当前位置:首页 >> 建筑/土木 >>

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


第2章重要说明:
1. 网页命名规则
要求:网页文件名与网页标题都与例题编号一致;
举例:例2.1网页文件名为"e2_1.htm",网页标题栏显示"例2.1(顶级标记)"。
2. 网页编辑方法一(用记事本)
在网站根目录c:/AppServ/www/中建立文本文档,按规则命名后,用记事本打开并编辑;
网页浏览方法:在IE地址栏中输入如"http://127.0.0.1/e2_1.htm";
为了提高效率,在编辑和浏览过程中不用关闭文件和浏览器。
3. 网页编辑方法二(用编辑器)
访问编辑器 http://sgks.zspt.cn/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.引用网站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. 在换段标记<p></p>之间, 按要求做5个链接标记:
(1) 最后一首: 链接到最后一首诗(关山月)
(2) 电子邮箱: 链接到 gdxugy@126.com
(3) 例2.5 (表格标记): 链接到 e2_5.htm
(4) 例2.6 (引用标记): 链接到 htm/e2_6.htm
(5) 外部网页: 链接到 http://www.sgksw.net
3. 在</BODY>标记前插入两个链接标记:
(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.将下列代码嵌入网页,理解代码,浏览效果
<script Language ="JavaScript">
<!--
alert(“弹出一个提示框”);
document.write(“输出字符串<br>”);
//三目运算
var x=3.3;
document.write(x>3?1:2+3,"<br>");
//JS函数
function multi(x,y)
{
return x*y;
}
z=multi(20,10);
document.write(z);
-->
</Script>
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.适当修饰网页和表单元素




相关文章:
CSS规范命名大全
tips 栏目标题:title 加入:joinus 指南:guide 服务:...命名规则说明: 1)、所有的命名最好都小写; 2...、相对网页外层重要部分 CSS 样式命名: 外套 wrap...
网页代码的规范
1、<!–页面注释解–> 2、 3、 4、网页标题 5、...alt="图片说明"> 22、链接词 23、重点关键词强调 24、关键词强调关键词强调关键词强调 25、 26、...
网站建设实施规范
网页有独立的、可概括说明网页核心内容的网页标题(...网站建设实施规范 、网站建设尺寸规范 1页面标准...2、 网站根目录:只允许存放网站缺省命名文件索引文件...
期末考试(网站设计与制作) (2)
其他文件或文件名命名也要规范,不使用汉字或带有空格...2. 网站内容要求 (1)网站至少要有 3-5 个页面...注意:网页标题是指显示在 浏览器标题栏上的文字, ...
下载文件说明
文件的命名规则与书中相应源代码文件名一致。读者可将相关文件夹(如 ch2)拷贝...ch2 第2章说明个 HTML 网页 设置 HTML 网页标题示例 设置 HTML 网页...
11229-网页设计实用教程-教学指南
(1)网页标题多用来提示该页的主要内容,会出现在...(2)个成功的网站都有自己独特的标志,如同个...样式表就可以改变个甚至多个网页文件的样式,大大...
SEO优化:DIV+CSS
CSS+DIV SEO 优化命名规则... 3页 5财富值 CSS...个关键词即可,网页的正文内容要与网页 标题的主题...对于 SEO 过度的问题,还有重要的问题需要说明,...
【必修】1-5.《信息技术基础》
(11001000) 都是 2,转换为 16 进制数为 C8;位...数字化是信息技术发展的重要主题,它已经越来越...(2)保存网页标题为“啸秋中学”的网页时,文件...
SEO复习资料
网页标题进行优化时要注意两方面 1 正确使用各级 ...网页减肥 概念: 不仅仅指通过一些手段对网页文件大小...2 完全按照 W3C 的命名规则,效果会好些 JS 脚本...
必修3第1章第2节内环境稳态的重要性
内环境稳态的重要性(共 2 课时)班级:___学号:___姓名:___ 【学习目标】1.说明内环境稳态及其生理意义;简述稳态的调节机制。 2.关注内环境稳态与健康的关系...
更多相关标签: