3.《网页设计与制作（HTML+CSS）》实训手册.docxVIP

《网页设计与制作（HTML+CSS）》课程实验（实训）手册

一、项目概况

课程名称

网页设计与制作（HTML+CSS）

课程学时

34

开课学期

学年第学期

适用专业

项目数量

6

二、教学目标

1、知识培养目标：掌握网页的基本概念以及html的基本概念；学会应用DREAMWEAVER工具；熟记网页的基本标记符；传统TABLE布局方式以及DIV+CSS布局方式;

2、能力培养目标：制作网页的能力和后期运营的能力;运用制作网页工具以及其他软件的能力;系统开发的能力

3、素质培养目标：团队意识;职业道德;艰苦创业工作作风;创新时代精神

三、项目名称、类型及学时分配

序号

项目名称

类型（综合性、设计性、其它）

学时

1

站点的建立

综合性

2

2

Dreamweaver处理文字和图片

设计性

6

3

用表格和布局模式布局网页

设计性

8

4

创建超链接

综合性

6

5

创建登录注册页面

设计性

6

6

CSS+DIV创建信息网站

设计性

6

四、参考资料

1、网页设计与制作（html+css）传智播客著中国铁道出版社；

2、网页设计与制作实例教程方其桂著清华大学出版社；

3、网页设计与制作（html5+css3+java）赵丰年著人民邮电出版社。

项目一站点的建立

一、项目目的

1、掌握建立新站点的方法；2、理解设置站点参数；3、掌握管理站点的方法。

二、项目条件

仪器设备：行思楼5楼机房

使用材料：网页设计与制作教材

场地要求：机房机子正常使用，并且能满足学生使用数量

三、主要内容

建立站点，并且在站点下建立第一张网页

四、项目步骤

1.定义一个动态站点。

（1）设置虚拟目录：在本地磁盘“C:\Inetpub\wwwroot”下新建一个以自己拼音名字命名的根文件夹，例“C:\Inetpub\wwwroot\wangfang”。

（2）设置Web共享。

（3）选择“站点”|“新建站点”选项，进入“高级”选项卡，设置“本地信息”的各参数。

（4）设置“测试服务器”的各参数。

（5）显示结果。

2.测试站点。

（1）将test.asp文件复制到C:\Inetpub\wwwroot\wangfang文件夹中。

（2）进行预览/调试。见图1。

3.在站点下建立网页index.asp。

（1）插入一张3行1列的表格。表格宽度：775像素。

（2）设置第1行属性，高：10像素；背景颜色：007236。如没有显示10像素，则可以插入透明图片进行设置或直接在代码中进行设置。

（3）透明图片制作，编辑——首选参数——布局模式——创建路径——确定，返回表格：插入——图像——选择路径。

（4）设置第3行属性，高：10像素；背景颜色：00D122。

（5）第2行插入——图像——bg-index.jpg——确定，插入——媒体——Flash——index.swf——确定。设置属性，高：428像素。

（6）将Flash背景设置为透明，加入代码如下：

paramname=”wmode”value=”transparent”/wmode=”transparent”

（7）进行预览，见图2。

五、注意事项

在制作过程中一定按照以上步骤来操作，并且要准确输入正确的符号，同时要熟记双标记和单标记的区别是什么。

六、问题和思考

根据以上思路，如何作出图3的案例？

（可参照如下图操作）

项目二Dreamweaver处理文字和图片

一、项目目的

1、理解文本的概念和基本操作；2、理解图片的常见格式；3、掌握图片的基本操作。

二、项目条件

仪器设备：行思楼5楼机房

使用材料：网页设计与制作教材，自己收集准备素材

场地要求：机房机子正常使用，并且能满足学生使用数量

三、主要内容

1、插入和编辑文本格式；

2、图片的插入和编辑；

3、插入水平线。

四、项目步骤

1.制作实例1。

1)在网页中导入文章text.txt。

2)把标题和“摘自《中国青年报》”进行换行，正文紧密换行。

3)每段首行缩进两个字符，设置标题文字的格式：标题2；居中。将“摘自《中国青年报》”居中。

4)设置文章字体颜色为绿色。在“摘自《中国青年报》”后面插入“版权”的特殊符号。

5)在文章下面换行后插入图片hua.jpg。在标题和内容之间插入一条“水平线”：宽——90%；高——6；取消“阴影”复选框，用代码改变颜色为绿色。

6)在图片下面再插入一条同样的水平线。在页面中插入日期和时间。编辑图片hua.jpg，设置属性为：居中，宽280，高195，亮度为10，边框为5。

7)进行预览/调试。见图1。

2.制作实例2。

1)标题“春天来了”居中显示，字体：默认字体，段落：标题1，颜色：绿色。

2)正文选择默认字体，首行缩进2个字符，颜色：淡绿色。

3)在标题“春天来了”