第2章重要说明: 1 网页命名规则要求:网页文件名与网页标题都与例题

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

第2章重要说明:
1. 网页命名规则
要求:网页文件名与网页标题都与例题编号一致;
举例:例2.1网页文件名为"e2_1.htm",网页标题栏显示"例2.1(顶级标记)"。
2. 网页编辑方法一(用记事本)
在网站根目录c:/AppServ/www/中建立文本文档,按规则命名后,用记事本打开并编辑;
网页浏览方法:在IE地址栏中输入如"http://127.0.0.1/e2_1.htm";
为了提高效率,在编辑和浏览过程中不用关闭文件和浏览器。
3. 网页编辑方法二(用编辑器)
访问编辑器 /sgeditor.htm, 修改网页标题并编辑;
使用“格式化代码”和“运行代码”按钮;
使用“保存文件”按钮,将文件按规则命名并保存到网站根目录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.引用网站的文件夹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@
(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.适当修饰网页和表单元素




相关文档
最新文档