PowerPoint 演示文稿
Download
Report
Transcript PowerPoint 演示文稿
ASP动态网站规划与设计
黄创英
[email protected]
2015年7月20日
1
一、本课程学习要求
课程特点：实践性和实用性均很强的一门课（技能课）。
学习时——
• 多做（自已实践为主，教师指导为辅）
• 多看多借鉴，多模仿（“掠人之美”，为我所用）
• 与老师的关系
—老师引进门（新手）
—互相学习（高手）
•
•
•
•
充分掌握各种工具性软件
充分利用网络资源
密切注意各种新技术
努力学习各种综合性知识（美术、文学、编排等）
2
二、课时分配
• 课程总计36学时，2学分，学时分配如下：
3
三、考核方式
（1）课程接近结束时以个人或者以小组形式制
作一个独立作品作为考查内容。作品主题以教师
命题为准。占总成绩的60%
（2）平时成绩（上机、作业和课堂考勤等），
占总成绩的40%
课堂考勤有1/3学时数不合格者，成绩计0分。
4
四、网上课件下载方式
• 可以登陆校内FTP下载站：
ftp://ftp.gduf.edu.cn/，进入【_最新上传】
/[选修课材料下载专区]/[ASP动态网站规
划与设计]/
• 作业上交邮件地址：
[email protected]
• 邮件主题要求标明第几次作业、班级学号、
姓名等信息
5
一个页面例子
6
相应的代码片断
•
•
•
<HTML><HEAD><TITLE>百度——全球最大中文搜索引擎</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>function
h(obj,url){obj.style.behavior='url(#default#homepage)';obj.setHomePage(url);}</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY text=#000000 vLink=#0000cc aLink=#ff6600 link=#0000cc bgColor=#ffffff
onload=document.f.wd.focus()>
<CENTER><BR><IMG height=59 src="百度——全球最大中文搜索引擎.files/logo.gif" width=174
border=0><BR><BR><BR><BR>
<DIV id=n>
<LI id=h></LI>
<LI><A href="http://news.baidu.com/">资 讯</A></LI>
<LI class=w>网 页</LI>
<LI><A href="http://post.baidu.com/">贴 吧</A></LI>
<LI><A href="http://zhidao.baidu.com/">知 道</A></LI>
<LI><A href="http://mp3.baidu.com/">MP3</A> </LI>
<LI><A href="http://image.baidu.com/">图 片</A></LI>
<LI id=m><A href="http://www.baidu.com/more/index.html">更 多 >></A>
</LI></DIV>
<P style="HEIGHT: 44px"></P>
…
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
7
Dreamweaver的安装
•
•
•
•
取得安装文件。可以下载，光盘等文件中取得
安装演示
功能简介
部分板面的介绍（技巧）
8
如何利用软件来设计网页
• 在DW中，我们如何更快地生成网页?
• 如何完成上一步的例子？
• 上一步中例子的代码是如何的?
9
相应的代码
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
• "http://www.w3.org/TR/html4/loose.dtd">
• <html>
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
• <title>无标题文档</title>
• </head>
•
•
•
•
•
•
•
<body>
<p> </p>
<p> </p>
<p> 大家好！这是我的第一个网页！
</p>
</body>
</html>
10
五、网页制作的基本知识
• 1.2 HTML概述
HTML （HyperText Markup Language，超文本标识语言）
• 网页实际上都是一个个文本文件，但它的文本与普通文本
不同处在于：可以通过一个文本中的链指针，由鼠标操作
（点一下文本中的高亮度或带下划线的条目），实现文档
间的跳转。
•
这样的文本即所谓“超文本”（HyperText)。
• 超文本文件（网页）的编写可以用任何一种文本编辑器，
但其效果只能通过浏览器才能显示出来。
• HTML不是一种编程语言，而是一种“标注语言”。网页
制作者可以使用HTML提供的各种“标记符号”标注文本
文件，随意地达到各种页面显示效果。所以，应用HTML
语言制作网页的关键就在于熟练了解掌握各个“标记”的
功能。目前流行的是HTML 4.0版。
11
五、网页制作的基本知识
特点：
•
•
•
•
•
简单易学
每个HTML文件不能太大
HTML文件独立于平台，对多平台兼容
编写简易
显示形式的不同，要求设计时要考虑显示形式
HTML语言内容丰富，从功能上大体可分为：
文本结构设置、列表建立、文本属性制定、超链
接、图片和多媒体插入、对象、表格以及窗体的
操作。
12
一个简单网页结构的例子
13
简单网页结构
术语：< … > 与</ …>配对——容器（contaniner)
14
简单网页结构
• HTML标记
– 1．HTML文档标记
格式：<HTML>…</HTML>标志文件开始和结尾的标记。
– 2．HTML文件头标记
格式：<HEAD>…</HEAD>用于包含文件的基本信息。
– 3．HTML文件主体标记
格式：<BODY>…</BODY>文件主体标记。
注意：<HEAD>与<BODY>为独立的两个部分，不能互相
嵌套。
15
六、HTML标记简介
•
•
•
•
<hr> 分隔线
<br>换行符
<P>段落符
<font>文本修饰
<FONT>标记提供了几种属性 ：
–size：设置文字的大小。
–face：设置字体。
–color：设置文字的颜色。
16
六、HTML标记简介
其他标记格式
功能
<U>…</U>
给字符加下划线
<S>…</S>
给字符上加横线，表示删除
<B>…</B>
给字符加粗
<I>…</I>
将字符设置成斜体
<BLINK>…</BLINK>
标记使得其中的文字产生闪烁的效果
17
六、HTML标记简介
• <A>…</A>超级链接格式
标记属性
功能
href=URL
给定链接目标的位置
target=frametarget
设置显示链接目标的框架
accesskey=character
设置快捷键
tabindex=num
设置Tab键的顺序
rel=linktype
设置到链接的关系
18
六、HTML标记简介
• <IMG>图像标识
–图像在网页设计中是必不可少的，所以用户应掌握在
网页中操作图像的方法。
– 格式：<IMG>…</IMG>
– 功能：在网页中加入图像等。
19
六、HTML标记简介
• <Marquee>图像标识
–格式：<Marquee>…</Marquee>
– 功能：在网页中加入简单滚动效果等。
20
六、HTML标记简介
• <Frame>框架结构标记的使用
格式：<FRAMESET>…</FRAMESET>
标记属性
功能
rows=size
设置多重框架的高度
cols =size
设置多重框架的宽度
onload=script
设置框架被载入的事件
onunload=script
设置框架被卸载的事件
21
六、HTML标记简介
• <Frame>框架结构的文件格式
<HTML>
<HEAD>
…
</HEAD>
<FRAMESET>
<FRAME>
…
<FRAME>
…
</FRAMESET>
</HTML>
22
注意：在老版本的浏览器
可能不支持框架结构。
六、HTML标记简介
• <table> 表格标记
创建表格是规划页面最常用的方法。
格式：<TABLE>…</TABLE>
功能：创建表格进行页面设计。
在浏览器中显示时，表格的整体外观由<TABLE>
标记的属性决定 。
23
六、HTML标记简介
• <table> 表格属性
标记属性
border=size
width= size
height=size
cellspacing=size
cellpadding =size
background =URL
bgcolor =colorvalue
align=alignstyle
cols =size
24
功能
设置表格边框大小
设置表格的宽度
设置表格的高度
设置单元格间距
设置单元格的填充距
设置表格背景图片
设置表格背景色
设置对齐方式
设置表格的列数
六、HTML标记简介
• 定制表格
使用<TABLE>只是定义空表格，还需要定义行和单元
格。
格式：<TR>…</TR>
功能：定义表格的一行。
对于每一行，可以定义行属性
• 行属性：
标记属性
bgcolor=colorvalu
e
align=alignstyle
valign=valignstyle
25
功能
设置行背景颜色。
设置行对齐方式。
设置单元格垂直对齐方式。
六、HTML标记简介
• 单元格属性：
标记属性
bgcolor=colorvalue
设置单元格背景颜色
rowspan=num
设置单元格所占的行数
colspan =num
设置单元格所占的列数
align =alignstyle
valign =valignstyle
设置对齐方式
设置单元格垂直对齐方式
width =size
设置单元格宽度
设置单元格高度
height=size
26
功能
六、HTML标记简介
• <Form>表单的结构
格式：<FORM>…</FORM>定义表单。
标记属性
功能
action= URL
设置处理表单的程序
method=postmethod
设置发送表单的HTTP方法
enctype=contenttype
设置发送表单的内容属性
onsubmit= script
设置被发送事件
target=frametarget
设置显示表单内容的窗口
accept-charset=cdata
设置可支持的字符列表
27
六、HTML标记简介
• <Form> 中常用的标记
输入域
• （1）单行输入域<INPUT>
•
•
•
•
28
1）text类型
2）password类型
3）radio类型 4）checkbox类型
5）submit类型 6）reset类型
7）hidden类型
六、HTML标记简介
• <Form> 中常用的标记
输入域
• （2）多行输入域标记<TEXTAREA>
标记属性
功能
name=cdata
设置FORM提交的输入信息的名称
rows=num
设置文本域的行数
cols= num
设置文本域的列数
tabindex=num
设置tab键的次序
29
六、HTML标记简介
• <Form> 中常用的标记
按钮 <BUTTON>
标记属性
功能
name=cdata
设置已发送表单的关键字。
value=cdata
设置已发送表单的值。
type= buttontype
设置按钮的类型。
tabindex=num
设置tab键的次序。
30
六、HTML标记简介
• <Form> 中常用的标记
选择域
格式：
<SELECT>
<OPTION>选项一
<OPTION>选项二
…
</SELECT>
功能：定义选择栏。
31
七、 WEB运行环境和IIS安装
• B/S结构与C/S结构
• 动态页面生成原理
• 动态页面的实现技术
（ASP，JSP，PHP，ASP.NET等）
• 动态网页建站一般流程
32
八、 WEB运行环境和IIS安装
• 配置IIS
–安装
–启动
–创建站点（物理目录，虚拟目录，访问URL的方法）
33