第一部分 HTML设计要求与内容

网页设计与制作课程设计

专业：

班级：

姓名：

学号：

教师评分：

第一部分HTML

要求所有网页标题显示“天津职业技术师范大学(电商某某某)”，此处某某某是指网页编写者本人姓名。

1.用HTML语言编写符合以下要求的文档：

浏览器窗口用户区显示“欢迎来到天津职业技术师范大学”；

并显示学校图片(图片使用素材一中的tute.gif)；

请参考第一章和第二章内容编写，完成后的效果如下图所示。

网页代码index.html：

执行结果(网页截图)：

2.用HTML语言制作如下图所示效果的网页，文本内容使用素材一中的f1.txt，请参考第三章内容编写。

网页代码f1.html：

执行结果(网页截图)：

3.用HTML语言制作如下图所示效果的网页，请参考第三章内容编写。

网页代码first.html：

执行结果(网页截图)：

L1.txt，请参考第四章内容编写。

网页代码L1.html：

执行结果(网页截图)：

一中的L2.txt，请参考第四章内容编写。

网页代码L2.html：

执行结果(网页截图)：

6. 采用内部链接的方式按照下图所示效果设计网页 c.html、link1.html、link2.html、link3.html；

通过点击c.html中的超链接“再别康桥”，会相应打开关于“再别康桥”内容的另一个网页link1.html，

通过点击c.html中的超链接“雪花的快乐”，会相应打开关于“雪花的快乐”内容的另一个网页link2.html，

通过点击c.html中的超链接“最后的那一天”，会相应打开关于“最后的那一天”内容的另一个网页link3.html，

文本内容使用素材一中的c.txt、link1.txt、link2.txt、link3.txt；

请参考第五章内容编写。

网页代码c.html：

网页代码linkl.html：

执行结果(网页截图)：

7. 按照下图所示效果设计网页bookmark.html，制作书签链接，实现在同一页面

内的书签链接。

通过点击“软件介绍”书签链接，可以跳到该页面中“软件介绍”文字内容的位置，在该文字段落后有一个“返回页首”的链接，单击之后页面位置将定位到书签链接所在位置。

“使用帮助”“本地下载”书签链接的使用方法类似。

文本内容使用素材一中的bookmark.txt；

请参考第五章内容编写。

网页代码bookmark.html：

执行结果(网页截图)：

8. 按照下图所示效果设计网页score.html，实现一个学生成绩表。

表格背景图片使用素材一中的scorebg.jpg。

请参考第六章内容编写。

网页代码score.html：

执行结果(网页截图)：

9. 设计一幅网页标题为“鼠标大全”的5行3列的表格网页，网页的背景颜

色为“#FFCC99”、表格的宽度为“400像素”、粗细宽度为“1”、居中对齐；表格第一行只有两个单元格，其中内容分别为“品牌”和“鼠标名称”；具体品牌和鼠标名称分别对应lenovo-N70无线激光鼠标、lenovo-S201迷你光学鼠标、lenovo-M40光学鼠标、DELL-MS111光电鼠标。所有单元格内容全部居中对齐。具体效果如下图。最后以文件名mouse.html保存。(电子商务师试题06)

请参考第六章内容编写。

网页代码mouse.html：

执行结果(网页截图)：

10.利用框架标记设计一个网页，

通过点击左窗口(左子框架)中的超链接，

超链接链接的文件显示在右边窗口(右子框架)中。文本内容使用素材一中的k1.txt、k2.txt。

效果如下图所示，请参考第七章内容编写。

主页代码testMain.html：

左窗口装载网页代码testLeft.html：

右窗口装载网页代码testK1.html：

右窗口装载网页代码testK2.html：

执行结果(网页截图)：

11. 利用表单设计一个个人求职页面，效果如下图所示。

请参考第八章内容编写。

网页代码jobForm.html：

执行结果(网页截图)：

12.利用表单设计一个会员注册的页面，将表单内容置于表格中，

效果如下图所示。

请参考第六章和第八章内容编写。

网页代码reg.html：

执行结果(网页截图)：

13. 利用FrontPage工具设计如下网页。所用素材见“素材一”文件夹。

执行结果(网页截图)：

14. 利用FrontPage工具设计如下网页。所用素材见“素材一”文件夹。

执行结果(网页截图)：

15. 利用FrontPage工具设计如下网页。所用素材见“素材一”文件夹。

网页代码action.html：执行结果(网页截图)：