网页设计与制作精品文档.ppt
《网页设计与制作精品文档.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作精品文档.ppt（31页珍藏版）》请在冰豆网上搜索。
1网页设计与制作网页设计与制作网页设计与制作网页设计与制作教学课件教学课件教学课件教学课件尹明尹明2任务任务22：
手工编写：
手工编写HTMLHTML网页（网页（1010课时）课时）要求要求:
l熟悉熟悉HTML语法和常用标记语法和常用标记l能用记事本编写简单网页能用记事本编写简单网页3
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.1手工编写网页的流程及步骤手工编写网页的流程及步骤启动记事本输入HTML源代码保存网页文件运行网页文件4
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.2认识认识HTML1、HTML中文意为超文本标记语言，是Internet上描述网页内容和外观的标准。
2、HTML文件是纯文本的文件格式，一般以htm或html为扩展名。
3、HTML的使用规范标记属性属性54、HTML文档的结构页面标题页面主体内容
（二）操作示范与知识讲解
（二）操作示范与知识讲解61、预排格式标记例如：
Hello,world!
1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解72、标题标记标题主要用于分隔大段文字，使网页显示的内容结构清晰，HTML提供六级标题，为H1到H6。
例如：
一级标题三级标题六级标题1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解83、换行标记例如：
换行标记浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
无可奈何花落去，似曾相识燕归来。
小园香径独徘徊。
1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解94、段落标记例如：
换行标记浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
无可奈何花落去，似曾相识燕归来。
小园香径独徘徊。
1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解105、水平线标记例如：
hr标记1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解116、文字标记设文字居中对齐注意：
颜色值有两种取值方式：
color=英文color=#十六进制RGB编码,例如：
欢迎光临欢迎光临1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解127、无序号列表标记列表项1列表项2创建无序列表说明：
1、type用来设置某个项目的项目符号，可取值为disc，表示实心圆，默认值；取值为circle，表示空心圆；取值为square，表示实心或空心的方块（取决于浏览器）；2、Li标签也有type属性，作用同上；3、取值必须是小写字母。
例如：
1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解13默认无序列表:
列表项1列表项2列表项3使用方块作为列表项标记的无序列表:
列表项1列表项2列表项3
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记148、序号列表标记列表项1列表项2创建有序列表说明：
1、type用来设置数字序列样式，可取值为1，表示阿拉伯数字，默认值；取值为A，表示大写字母；取值为a，表示小写字母；取值为I，表示大写罗马数字；取值为i，表示小写罗马数字；2、start用来设置数字序列的起始值，可以是任意整数；3、Li标签也有两个属性：
type和value，作用同上。
1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解15用大写罗马字母表示的有序列表:
列表项1列表项2列表项3起始数字为3的有序列表:
列表项1列表项2列表项3编写不连续的有序列表:
列表项1列表项2列表项3变换了数字样式的有序列表:
列表项1列表项2列表项3
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记169、表格标记创建表格定义表格标题，标题可放在表格上部、表格下部、表格上部的左侧、表格上部的右侧，默认为“top”；定义表格的行，结束标签可省略；定义普通单元格数据，结束标签可省略；/定义标题单元格数据，结束标签可省略。
1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解17课程表星期一星期二星期三星期四星期五第1、2节数学英语数学哲学化学第3、4节语文英语数学哲学计算机第5、6节计算机英语计算机计算机英语
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记18Table标签的属性设置：
rules属性属性，设置单元格之间的分割线none无分割线，默认rows仅有行分割线Cols仅有列分割线all包含所有分割线Border属性属性，设置边框的宽度不指定值的单独一个border，相当于border=“1”
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记19Table标签的属性设置：
Cellspacing属性，设置单元格之间的空白Cellpadding属性，设置表格分割线和数据之间的距离以上两属性取值以像素为单位Width属性，取值为像素或百分比，设置表格的宽度height属性，取值为像素或百分比，设置表格的高度Align属性，可设置表格在页面中的对齐方式，如果不使用，则跟在表格后的文字自动显示在表格的下一行，如果使用的是left或right值，则会形成文本与表格环绕的效果
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记20表格的属性设置示例课程表 星期一星期二星期三星期四星期五第1、2节数学英语数学哲学化学第3、4节语文英语数学哲学计算机每种属性的设置效果区别很大,大家看清楚了吗?
如果没有看清楚,请课后自己动手做一遍试试
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记21标签的属性设置：
align属性属性，设置单元格数据水平方向上的对齐center表格内容居中对齐left表格内容左对齐right表格内容右对齐valign属性属性，设置单元格数据垂直方向上的对齐top表格内容顶对齐Bottom表格内容底对齐Middle表格内容垂直居中对齐，默认注意：
在注意：
在TR标签中使用，可控制整行内容的对齐，在标签中使用，可控制整行内容的对齐，在TH及及TD标签中使用，则控制相应单元格中内容的对齐标签中使用，则控制相应单元格中内容的对齐
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记22其它属性设置：
在TABLE或TD、TH、TR标签内使用bgcolor属性设置背景颜色，使用background属性设置背景图案行合并在TD、TH标签内使用属性rowspan=?
列合并在TD、TH标签内使用属性colspan=?
行合并、列合并用于创建不规则的表格行合并、列合并用于创建不规则的表格
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记23学生情况表学号个人信息入学信息姓名性别年龄班级入学年月001赵灵儿女19电商1班2005年9月002张无忌男21电商1班2005年9月
（二）操作示范与知识讲解
（二）操作示范与知识讲解1.3HTML的常用标记的常用标记2410、超链接标记创建页面链接例如：
这是一个超链接欢迎访问我的学院1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解2510、超链接标记创建电子邮件链接例如：
欢迎访问我的邮箱1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解2610、超链接标记定义锚点创建锚链接1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解2711、插入图像标记12、插入背景音乐标记13、标记的属性设置Bgcolor设置页面背景颜色Background设置页面背景图像14、插入多媒体标记1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解2815、设置文字的滚动效果设置文字的滚动效果相关属性设置：
Width定义滚动字幕滚动区域的宽度，取值为像素数或百分比，默认100%Height定义滚动字幕滚动区域的高度，取值为像素数或百分比，默认高度值取决于当前文字Behavior定义字幕如何移动定义字幕如何移动Sctoll默认，重复沿一个方向滚动Slide文本滚动到另一侧就停下Alternate文本在区域内来回滚动Bgcolor定义滚动区域的背景色定义滚动区域的背景色1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解29Direction指定文本滚动的方向指定文本滚动的方向Left默认，从右到左Right从左到右Up从下向上Down从上向下hspace定义滚动字幕四周水平间隙Vspace定义滚动字幕四周垂直间隙Loop指定滚动次数，默认值-1，重复滚动Scrollamount设置滚动文字移动的速度Scrolldelay设置滚动文字移动时的延迟1.3HTML的常用标记的常用标记
（二）操作示范与知识讲解
（二）操作示范与知识讲解30（三）综合实例（三）综合实例31
（一）任务分析
（一）任务分析页面结构图水平线文字红色竖线视频图片水平线返回首页
升级会员 