网页简单的建设

1、1网页设计与制作网页设计与制作教学课件教学课件尹明尹明2任务任务2 2：手工编写：手工编写HTMLHTML网页（网页（1010课时）课时） 要求要求:l熟悉熟悉HTML语法和常用标记语法和常用标记l能用记事本编写简单网页能用记事本编写简单网页3（二）操作示范与知识讲解（二）操作示范与知识讲解1.1手工编写网页的流程及步骤手工编写网页的流程及步骤启动记事本输入HTML源代码保存网页文件运行网页文件4（二）操作示范与知识讲解（二）操作示范与知识讲解1.2认识认识HTML1、HTML中文意为超文本标记语言，是Internet上描述网页内容和外观的标准。2、HTML文件是纯文本的文件格式，一般以htm

2、或html为扩展名。3、HTML的使用规范标记属性属性54、HTML文档的结构 页面标题 页面主体内容 （二）操作示范与知识讲解（二）操作示范与知识讲解61、标题标记标题主要用于分隔大段文字，使网页显示的内容结构清晰，HTML提供六级标题，为H1到H6。例如： 一级标题 三级标题 六级标题 1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解72、换行标记例如：换行标记浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径独徘徊。1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解83、段落标记

3、 例如：换行标记浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径独徘徊。1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解94、水平线标记例如：hr标记1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解105、文字标记设文字居中对齐注意：颜色值有两种取值方式：color=英文color=#十六进制RGB编码,例如：欢迎光临欢迎光临1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解116、无序号列表标记 列表项1 列表项2 创建无序列表说明：1、type用

4、来设置某个项目的项目符号，可取值为disc，表示实心圆，默认值；取值为circle，表示空心圆；取值为square，表示实心或空心的方块（取决于浏览器）；2、取值必须是小写字母。例如：1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解12默认无序列表:列表项1列表项2列表项3使用方块作为列表项标记的无序列表:列表项1列表项2列表项3（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记137、序号列表标记 列表项1 列表项2 创建有序列表说明：1、type用来设置数字序列样式，可取值为1，表示阿拉伯数字，默认值；取值为A，表示大写字母

5、；取值为a，表示小写字母；取值为I，表示大写罗马数字；取值为i，表示小写罗马数字；置数字序列的起始值，可以是任意整数；1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解14用大写罗马字母表示的有序列表:列表项1列表项2列表项3（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记158、表格标记创建表格定义表格标题，标题可放在表格上部、表格下部、表格上部的左侧、表格上部的右侧，默认为“ top”；定义表格的行，结束标签可省略；定义普通单元格数据，结束标签可省略；/定义标题单元格数据，结束标签可省略。1.3HTML的常用标记的常用标记（

6、二）操作示范与知识讲解（二）操作示范与知识讲解16课程表星期一星期二星期三星期四星期五第1、2节数学英语数学哲学化学第3、4节语文英语数学哲学计算机第5、6节计算机英语计算机计算机英语（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记17Table标签的属性设置：rules属性属性，设置单元格之间的分割线none 无分割线，默认rows 仅有行分割线Cols 仅有列分割线all 包含所有分割线Border属性属性，设置边框的宽度不指定值的单独一个border，相当于border=“1”（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用

7、标记18Table标签的属性设置：Cellspacing属性，设置单元格之间的空白Cellpadding属性，设置表格分割线和数据之间的距离以上两属性取值以像素为单位Width属性，取值为像素或百分比，设置表格的宽度height属性，取值为像素或百分比，设置表格的高度Align属性，可设置表格在页面中的对齐方式，如果不使用，则跟在表格后的文字自动显示在表格的下一行，如果使用的是left或right值，则会形成文本与表格环绕的效果（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记19表格的属性设置示例课程表&nbsp星期一星期二星期三星期四星期五第1、2节

8、数学英语数学哲学化学第3、4节语文英语数学哲学计算机每种属性的设置效果区别很大,大家看清楚了吗?如果没有看清楚,请课后自己动手做一遍试试（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记20标签的属性设置：align属性属性，设置单元格数据水平方向上的对齐center 表格内容居中对齐left 表格内容左对齐right 表格内容右对齐valign属性属性，设置单元格数据垂直方向上的对齐top 表格内容顶对齐Bottom 表格内容底对齐Middle 表格内容垂直居中对齐，默认注意：在注意：在TR标签中使用，可控制整行内容的对齐，在标签中使用，可控制整行内容的对齐，

9、在TH及及TD标签中使用，则控制相应单元格中内容的对齐标签中使用，则控制相应单元格中内容的对齐（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记21其它属性设置：在TABLE或TD、TH、TR标签内使用bgcolor属性设置背景颜色，使用background属性设置背景图案行合并在TD、TH标签内使用属性rowspan=?列合并在TD、TH标签内使用属性colspan=?行合并、列合并用于创建不规则的表格行合并、列合并用于创建不规则的表格（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记22学生情况表学号个人信息入学信息姓名性别年

10、龄班级入学年月001赵灵儿女19电商1班2005年9月002张无忌男21电商1班2005年9月（二）操作示范与知识讲解（二）操作示范与知识讲解1.3HTML的常用标记的常用标记239、超链接标记创建页面链接例如：这是一个超链接欢迎访问我的学院1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解249、超链接标记创建电子邮件链接例如：欢迎访问我的邮箱1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解259、超链接标记定义锚点创建锚链接1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解2610、插入图像标

11、记11、插入背景音乐标记12、标记的属性设置Bgcolor 设置页面背景颜色Background 设置页面背景图像13、插入多媒体标记1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解2714、设置文字的滚动效果设置文字的滚动效果相关属性设置：Width 定义滚动字幕滚动区域的宽度，取值为像素数或百分比，默认100%Height 定义滚动字幕滚动区域的高度，取值为像素数或百分比，默认高度值取决于当前文字Behavior 定义字幕如何移动定义字幕如何移动Sctoll 默认，重复沿一个方向滚动Slide 文本滚动到另一侧就停下Alternate 文本在区域内来回滚动Bgcolor 定义滚动区域的背景色定义滚动区域的背景色1.3HTML的常用标记的常用标记（二）操作示范与知识讲解（二）操作示范与知识讲解28Direction 指定文本滚动的方向指定文本滚动的方向Left 默认，