[讲解]第2章重要说明： 1 网页命名规则要求：网页文件名与网页标题都与例题

[讲解]第2章重要说明： 1 网页命名要求：网页文件名与网页标题都与例题 第2章重要说明: 1 网页命名规则要求:网页文件名与网页标题都与例题 第2章重要说明: 1. 网页命名规则 要求:网页文件名与网页标题都与例题编号一致; 举例:例2.1网页文件名为"e2_1.htm"，网页标题栏显示"例2.1(顶级标记)"。 2. 网页编辑方法一(用记事本) 在网站根目录c:/AppServ/www/中建立文本文档，按规则命名后，用记事本打开并编辑; 网页浏览方法:在IE地址栏中输入如 ";; 为了提高效率，在编辑和浏览过程中不用关闭文件和浏览器。 3. 网页编辑方法二(用编辑器) 访问编辑器 , 修改网页标题并编辑; 使用“格式化代码”和“运行代码”按钮; 使用“保存文件”按钮，将文件按规则命名并保存到网站根目录c:/AppServ/www/中。 例2.1 (顶级标记) 编写第一个网页，要求: 1. 设置网页标题为"例2.1(顶级标记)"; 2. 设置网页背景为黑色，字符为白色; 3. 使得网页显示文字"我爱HTML，我爱PHP!"; 例2.2 (Meta标记) 对例2.1进行再设计,要求: 1. 将网页背景色改为"#000000"，字符颜色改为"#ffffff"; 2. 标明网页所使用的字符集为GB2312。 3. 设置网页3秒后自动刷新,并指向网页hi.htm; 4. 设置离开网页时的动态过渡时间为3秒,过渡方式自定; 思考:网页背景颜色和字符颜色有无改变,估计一下原因。 例2.3 (特殊标记) 编写一个网页，要求: 1. 显示一条宽度为240,厚度为5的蓝色线条; 2. 第一行显示版权符号和商标符号,分别进行标注(鼠标停留时显示); 3. 第二行显示"勾股定理"字样及其表达式(a平方加b平方等于c平方),文字和表达式之间空四格; 4. 将以上内容居中, 并在居中开始和居中结束处分别给出注释; 5. 用预格式标记再次显示"勾股定理"字样及其表达式,文字和表达式之间仍空四格。 思考:两个“空四格”的效果有何差异，为什么, 例2.4 (文本标记) 现有李白诗三首，内容如下: ----------------------- 李白诗三首 静夜思 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 黄鹤楼送孟浩然之广陵 故人西辞黄鹤楼，烟花三月下扬州。 孤帆远影碧空尽，唯见长江天际流。 早发白帝城 朝辞白帝彩云间，千里江陵一日还。 两岸猿声啼不住，轻舟已过万重山。 ----------------------- 请按要求编写网页: 1. 设置各首诗之间分段，每两个诗句之间分行; 2. 设置标题标签:总标题为h1并居中显示，各首诗的标题为h3; 3. 设置各首诗句的字体、大小、颜色和字型, 要求: (1)第一首诗句: 黑体、4号、橙色 (2)第二首诗句: 宋体、3号、蓝色、倾斜 (3)第三首诗句: 楷体(楷体_GB2312)、5号、紫色、加粗 4. 将第一首诗置左、第二首诗置右、第三首诗居中显示。 例2.5 (表格标记) 现有梁山好汉名单如下: ---------------------- 水浒英雄谱 编号 姓名 绰号 1 鲁智深 花和尚 2 李逵 黑旋风 ---------------------- 请按要求编写网页: 1. 表格宽度为300,边框为1,水平居中对齐; 2. 表格标题为H3; 3. 第一行高为30,第一列宽为80,后两列宽均为110; 4. 第一列内容水平居中; 5. 使得表格线条为细线(设格间距为0); (以下三项为选做内容) 6. 设置颜色: 背景为淡蓝,框线为红色; 7. 分隔线: 仅显示上下外边框和内部分隔线(注:这是学术出版物中的表格规范)。 8. 合并单元格: 在表格最后添加一行,将3个单元格合并显示"合并单元格"字样; 例2.6 (引用标记) 解压缩文件"图片.rar"，打开文件夹"图片/htm"，在其中编写一个网页，要求如下: 1.引用"图片"文件夹中的四张图片,并在说明文字中注明图片的相对位置，如“这是父文件夹中的图片”; 2.引用网站www.sgksw.net的文件夹head中的图片dgxugy.jpg，说明文字为"这是外网中的图片"。 提示: 父文件夹的相对路径: ../ 兄弟文件夹"aa"的相对路径: ../aa/ 子文件夹"bb"的相对路径: bb/ 先以文件夹"htm"为参照，确定引用每个图片文件的相对路径 查看与思考: 1) 双击此网页图标，查看引用图片的效果。 2) 将"图片"文件夹中全部对象复制到网站根目录c:/AppServ/www/ 中，在IE中浏览此网页。 思考:为何引用效果不变? 3) 将此网页分别复制到文件夹"www"和"www/htm/gif"中，再分别在IE中浏览此网页。 思考:为何引用效果改变? 怎样才能保证引用效果? 例2.7 (链接标记) 利用文件e2_7.txt编辑网页，要求: 1. 设置链接标记的颜色: 按下时为红色, 按下后为灰色(gray)。 2. 在换段标记

之间, 按要求做5个链接标记: (1) 最后一首: 链接到最后一首诗(关山月) (2) 电子邮箱: 链接到 gdxugy@126.com (3) 例2.5 (表格标记): 链接到 e2_5.htm (4) 例2.6 (引用标记): 链接到 htm/e2_6.htm (5) 外部网页: 链接到 3. 在标记前插入两个链接标记: (1) 返回页首 (2) 关闭窗口 例2.8 (框架标记) 1. 建立一个框架网页,要求: (1) 按"20%,80%"的比例分为左右两个框架 (2) 左框架引用网页e2_7.htm,命名为left (3) 右框架引用网页e2_4.htm,命名为right 2. 浏览所建立的网页e2_8.htm,在左框架中单击超级链接标记. (1) 观察超级链接的打开目标(内容在哪个框架中显示?) (2) 作为浏览者,你认为此网页应如何改进? 3. 修改网页e2_7.htm,指定超级链接的打开目标,要求: (1) 超级链接"例2.5"的打开目标为新窗口(_blank) (2) 超级链接"例2.6"的打开目标为框架right (3) 超级链接"外部网页"的打开目标为顶层窗口(_top) 4. 分别浏览网页e2_7.htm 和 e2_8.htm,单击各个超级链接,查看显示效果. 例2.9 (列表标记) 现有内容如下: ----------------------- 一、无序列表(项目符号) 实心圆 空心圆 正方形 二、有序列表(项目编号) 阿拉伯数字编号1 阿拉伯数字编号2 大写英文编号 小写英文编号 大写罗马数字编号 小写罗马数字编号 ---------------------- 请按要求编辑网页: 1. 对两个标题使用H3标记 2. 根据第一个标题下的文字，使用无序列表 3. 根据第二个标题下的文字，使用有序列表 例2.10 (表单标记) 1. 将三个文件e2_10.*复制到网站根文件夹中 2. 根据e2_10.txt中的注释编写表单网页,实现如图e2_10.jpg所示效果 3. 通过浏览器访问所编写的网页，进行交互操作，查看动态效果. 注:e2_10.php为处理表单的程序(动态网页) 例2.11 (应用样式一) 按要求对网页e2_11.htm应用样式 1.应用内联样式 (1)将标题h1的文字设为蓝色 (2)去掉超链接的下划线 2.应用内部样式表 (1)用标签选择器设置两段文字的字体为"楷体_GB2312",字号为14px,字形为倾斜、加粗 (2)用类选择器设置两个按钮的背景颜色为淡蓝，前景颜色为红色。 例2.12 (应用样式二) 对网页e2_12.htm自主应用样式 1.对两个段落分别设置字体属性 2.设置字符间距、首行缩进和行高 例2.13(JS基础) 1.将下列代码嵌入网页，理解代码，浏览效果 2.定义一个计算梯形面积的函数，调用该函数显示上底、下底和高分 别为10、20和4的梯形的面积。 例2.14(JS显示日期) 例2.15(事件处理) 设计有一个文本框和一个按钮的表单,定义事件处理程序,要求: 1.装载网页(onload)后,按钮获得焦点 2.文本框获得焦点(onfocus)时显示“你好～”,失去焦点(onblur)时显示“再见～” 例2.16(动态改变链接标志图片) 例2.17(窗口对象) 1.在网页中设置一个“关闭窗口”的链接 2.在网页中设置一个按钮,单击弹出一个窗口显示网页e2.16.htm 3.设置当前窗口在10秒钟后自动关闭 例2.18(JS与表单交互一) 对例2.10表单进行前端校验，要求: 1.用户姓名不少于2个字符 2.密码不少于6个字符 3.逐一校验，不通过时用 alert()函数给出提示，返回后相应表单域清空并获得焦点 4.适当修饰网页和表单元素 例2.19(JS与表单交互二) 对例2.10表单进行前端校验，要求: 1.用户姓名不少于2个字符 2.密码不少于6个字符 3.整体校验，不通过用 alert()函数分行给出提示 4.适当修饰网页和表单元素