网页开发与设计实验指导书.doc

网页开发与设计实验指导书

曹玉琳

信息管理与信息系统系

2016年3月
实验要求
（1）预习教材有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。
（2）仔细观察上机操作时出现的各种现象，记录主要情况，作出必要说明和分析。
（3）每次将所完成的网页提交给教师检查。
（4）遵守机房纪律，爱护实验设备。
（5）对于提交的作品，应该能讲出各部分功能和自己的设计思路；可以参考他人作品或网络资源，但严禁抄袭或下载提交应付了事。
（6）实验指导书只作为实验时的参考，大家可以不拘泥于指导书，根据自己的情况进行练习。
（7）严禁打游戏。

目录
TOC\h\z\t"a,1"HYPERLINK\l"_Toc388103664"实验一HTML5基础 PAGEREF_Toc388103664\h1
HYPERLINK\l"_Toc388103665"实验二CSS3编程 PAGEREF_Toc388103665\h2
HYPERLINK\l"_Toc388103666"实验三HTML5高级编程 PAGEREF_Toc388103666\h5
HYPERLINK\l"_Toc388103667"实验四综合运用 PAGEREF_Toc388103667\h6

第页
实验一HTML5基础
【实验目的】
熟悉网站建设的步骤
熟悉Dreamweaver软件的操作界面和操作方法。
掌握HTML语法规范，常用标记的语法，各种标记的使用。

【实验条件】
每名同学使用一台计算机。小组同学相邻，方便讨论。

【实验内容】
新建并保存网页：用记事本、Ultraedit开发网页，建立一个具有基本结构标记的HTML文件，然后另存为.htm文件，并在浏览器中运行。
制作简单的图文网页。要求使用标题、分行、段落、有序列表、无序列表、特殊字符、图像、均有体现。参看书和PPT。
制作带有超链接的网页，要求有文字链接、图片超链接、锚链接。参看书和PPT。
在网页上增加表单，效果类似于用户注册页面。
参考实验1-1.png、实验1-2.png、实验1-3.png制作网页。

实验二CSS3编程
【实验目的】
1.熟练掌握使用CSS修饰网页的方法。
2.熟悉表格CSS类选择器、ID选择器、标签选择器，能够使用DIV和盒子模型对网页进行布局。

【实验条件】
每名同学使用一台计算机。小组同学相邻，方便讨论。

【实验内容】
有如下表格：

用CSS对其进行修饰，修饰后效果为：

提示：可以使用传统CSS修饰，也可以使用CSS3修饰。
使用li标签制作图片展示网页，如下图：

3.使用li制作竖版和横版菜单，如下图：

4.使用div进行如下页面布局：

实验三HTML5高级编程
【实验目的】
1.掌握HTML5高级标签和CSS3各种选择器、布局的使用方法。
2.能够利用他们制作HTML，完成网页的修饰和交互功能。

【实验条件】
每名同学使用一台计算机。小组同学相邻，方便讨论。

【实验内容】
1.制作下面的网页

2.制作手机版网站，比如HYPERLINK"http://3g.163.com/touch/news/"http://3g.163.com/touch/news/，如下图：

实验四综合运用
【实验目的】
1.综合运用所学知识设计和开发简单的网站。

【实验条件】
每名同学使用一台计算机。小组同学相邻，方便讨论。

【实验内容】
根据系统随机分配的作业题目制作一个中小型的网站，要求综合应用所学的知识，程序中有必要的注释，具有良好的容错机制；程序完全可调试通、并且能够独立的搭建和部署运行环境、要求独立完成;更多的功能可自己添加、设计。