网页设计实训报告.docx

网页设计实训报告.docx

《网页设计实训报告.docx》由会员分享，可在线阅读，更多相关《网页设计实训报告.docx（31页珍藏版）》请在冰豆网上搜索。

网页设计实训报告

2011/2012学年第2学期

专用周实训报告

课程名称：

网页设计专用周

班级：

信管1001、1002

教学周数：

2周

地点：

软件机房1

指导教师：

杨鹏、吴钢

网页设计专用周实训方案

一实训对象

1.实训班级：

信管1001、1002

2.计划实训周期：

10个工作日

3.计划受训人数：

50人左右

二实训目的

本实训目的：

通过本次实习对“关注营养、关注健康”的练习和自主网站的设计，使学生熟练应用HTML标记语言设计制作网页、熟练应用Dreamveaver8.0网页设计软件，使学生对《网页制作》所学的内容有一个系统的理解和掌握。

在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，独立完成自己的作品。

三实训内容

1.专业知识强化

序号

知识点

内容及要求

学时

1

网站的布局

运各种方式对网页元素的精确布局

2

2

表格的应用

运用表格对一些元素的布局

3

文字的应用

运用文字对网页的说明

4

图片和背景的应用

图片的添加，布局

5

链接的应用

使用各种不同的链接

6

表单的应用

对表单的熟练应用

7

css样式表的应用

Css样式的套用

2

8

层的应用

运用层对网页元素的精确布局

2

9

配置网站工具的使用

熟练地掌握网站设计工具

1.专业技能实战训练

序号

名称

内容及要求

学时

1

综合练习一

按照综合练习“保护生态环境”网站的规划、布局要求完整的重现网站绿色家园

12学时

2

综合练习二

按照综合实例“西安世博园“网站的规划、布局要求完整的重现网站

12学时

3

综合练习三

按照综合实例“关注猫”网站的规划、布局要求完整的重现网站

12学时

4

自主网站设计

1）画出网站的规划布局图、说明站点的主题并对各个模块进行说明

2）收集或制作相应的网页素材

3）制作网页

4）调试网站

5）个人总结（附加在网站的规划说明内）

24学时

四实训环境

硬件：

CPU赛扬1.6内存：

1G

显示器17寸

硬盘160G显卡ati256m

软件：

WindowsXP6.0或其他浏览器Dreamweaver

五实训进度

序号

时间

实训内容

方式

1

第一天

综合练习一

讲练

2

第二天

综合练习一

讲练

3

第三天

综合练习二

讲练

4

第四天

综合练习二

讲练

5

第五天

综合练习三

练习

6

第六天

综合练习三

讲练

7

第七天

自主网站设计（确定主题规划网站）（收集素材）

练习

8

第八天

自主网站设计（制作网页）

讲练

9

第九天

自主网站设计（制作网页）

练习

10

第十天

自主网站设计（调试网站）（书写报告）

六、此次网页实训周分为四个大模块：

①、保护生态环境②、西安世博园③、关注猫④、自主设计

详细操作如下：

保护生态环境

1.首先创建站点，为站点命名

2、为站点选择位置

3、站点创建完成

4、将所需网页元素全部放入自己所创的站点之中

5、运用层对网页进行布局，根据设计将相关元素放入框架之中

6、视频的插入和按钮的制作

7、网页的展示，动画的播放

8、保护生态环境网站设计完成

西安世博园

1、如上网站一样创建站点，将网页设计所需元素放入站点之中，运用层和表格对网页进行精确地布局定位

①、这是网站的首页的相关布局：

②下面是首页设计的一些相关代码

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"http:

//www.w3.org/TR/html4/loose.dtd">

--

.style2{

font-size:

12px;

color:

#000000;

}

.style3{

font-size:

16px;

color:

#669966;

}

.style5{font-size:

18px;color:

#669966;}

.style6{

font-size:

18px;

color:

#999900;

}

.style7{color:

#669900}

.style9{font-size:

18px;color:

#669900;font-weight:

bold;}

a:

link{

color:

#669966;

text-decoration:

none;

}

a:

visited{

color:

#669966;

text-decoration:

none;

}

a:

active{

color:

#FFFFFF;

text-decoration:

none;

}

a:

hover{

color:

#33FF33;

text-decoration:

none;

}

.style10{color:

#003300}

-->

--

functionMM_reloadPage（init）{//reloadsthewindowifNav4resized

if（init==true）with（navigator）{if（（appName=="Netscape"）&&（parseInt（appVersion）==4））{

document.MM_pgW=innerWidth;document.MM_pgH=innerHeight;onresize=MM_reloadPage;}}

elseif（innerWidth!

=document.MM_pgW||innerHeight!

=document.MM_pgH）location.reload（）;

}

MM_reloadPage（true）;

//-->

absolute;left:

71px;top:

667px;width:

439px;height:

26px;z-index:

1">