《网页设计与制作综合实训》实训指导书.docx

1、网页设计与制作综合实训实训指导书武汉商贸职业学院信息工程学院网页设计与制作综合实训实训指导书 软件教研室 2013 年 9 月网页设计与制作综合实训实训指导书目录实训目的 .1实训内容及要求 .1实训性质、实训地点、实习时间安排，适用专业班级 .2实训一 站点的规划设计 .3实训二 设计案例网站 LOGO .4实训三 设计案例网站 BANNER .5实训四 设计案例网站导航条 .6实训五 设计案例网站网页内容和网页版权声明 .7实训六 对案例网站版面切图 .8实训七 制作完成案例网站首页 .9实训八 案例网站模板的制作 .10实训九 案例网页超级链接的添加 .11实训十 案例网站加入动态元素

2、.12第 2 页网页设计与制作综合实训实训指导书实训目的在前一阶段，学生完成了网页设计与制作、图形图像处理、CSS 设 计、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通， 特开设本系统化实训。本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发 的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要 求学生完成网站的前台设计。通过本次实训希望达到以下目的：1. 熟悉和掌握 Dreamweaver 软件的使用方法；2. 熟悉和掌握 PS 软件的使用方法；3. 熟悉 FLASH 软件应用的方法；4. 学会使用 CSS+DIV 做网页布局；5. 熟练掌

3、握站点的规划与设计实训内容及要求本实训的内容简述：1. 网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8 条）（4）专业建设成效的文章标题（8 项）（5）专业建设特色文章标题（8 项）2. 专业概况点击项目概况，显示相关文本3. 专业建设规划点击项目申报书菜单，显示 flashpaper 格式的申报书内容4. 专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容5. 专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6. 专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。本实训的要求：1. 应用 css 和 html（div+css）

4、技术完成至少 4 个页面，其中必须包括网站主 页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。2. 显示环境：网页视觉效果应采用 Internet Explorer 6.0 以上版本浏览器， 显示分辨率以 1024768 状态为准。第 1 页网页设计与制作综合实训实训指导书3. 网页规模：网页总量原则上不应超过 10M，且必须要是不连接互联网就可以 进行展示的作品。4. 网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在 images 文 件夹下等。5. 要求页面美观大方、颜色搭配协调；6. 作品留存，下学期或下一阶段继续完善、开发。实训性质、实训地点、实习时间安排，适用

5、专业班级该实训为校内模拟实训。根据高等教育教学大纲规定和学院教学计划安排 及培养学生职业技能的要求，软微班的学生于第一学期进行为期 4 周的校内实 训，项目名称为网页设计与制作综合实训。实训时间：2013-2014 学年第一学期第 15-18 周实训班级：软件 1301 班、软件 1302 班实训地点： 学校机房第 2 页网页设计与制作综合实训实训指导书实训一 站点的规划设计1、学时分配：6 学时2、实训目的（1）熟悉 Dreamweaver 软件的界面布局和工作环境。（2）熟练掌握本地站点创建和管理的方法。3、实训任务（1）创建一个静态网站站点。（2）从网络上收集网页素材。（3）根据提供的网

6、站策划方案范本，结合自己要制作完成的网站，开始着手书 写网站策划方案。4、实训内容（1）打开 Dreamweaver 软件，熟悉软件的界面布局和工作面板的摆放，能够 熟练使用 Dreamweaver 软件。（2）在本机 D 盘上创建文件夹“home”，在“home”文件夹下根据网站的规划 设计，创建相关的文件夹，用来放置不同的文件。（3）在 Dreamweaver 软件中，将 D 盘 “home” 文件夹定义成静态网站站点， 站点名称任意。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证

7、课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 3 页网页设计与制作综合实训实训指导书实训二 设计案例网站 LOGO1、学时分配：6 学时2、实训目的（1）熟悉 Photoshop 软件的界面布局和工作环境。（2）熟练掌握网站 LOGO 的设计方法。（3）创建项目案例网站的 LOGO。3、实训任务（1）掌握 Photoshop 软件文字工具工具的使用方法。（2）查看网络上相关网站 LOGO。（3）根据小组讨论结果，实际动手完成网站的 LOGO。4、实训内容（1）打开 Photoshop 软件，熟悉软件的界面布局和工作面板的摆放，能够熟练

8、使用 Photoshop 软件。（2）新建 Photoshop 文件，大小为 980*600 像素，分辨率为 72 像素/英寸，颜 色模式为 RGB 颜色 8 位，背景颜色为白色或者透明都可以。（3）使用文字工具，输入 MZD 三个字母，设置文字属性。（4）栅格化文字图层，将栅格化后的图层上的 3 个字母分别移动到不同的 3 个 图层上。（5）分别对 3 个字母进行艺术化处理。（6）输入其他的文字。（7）为输入的文字图层设置“混合选项”。（8）保存文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教

9、学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 4 页网页设计与制作综合实训实训指导书实训三 设计案例网站 BANNER1、学时分配：6 学时2、实训目的（1）熟悉 Photoshop 软件的使用方法。（2）熟练掌握网站 BANNER 的设计方法。（3）创建项目案例网站的 BANNER。3、实训任务（1）掌握 Photoshop 软件渐变工具的使用方法。（2）查看网络上相关网站 BANNER。（3）根据小组讨论结果，实际动手完成网站的 BANNER。4、实训内容（1）打开 Photoshop 软件，熟悉软件的界面布局和工作面

10、板的摆放，熟练使用 Photoshop 软件。（2）打开上次保存好的 Photoshop 源文件，在上次完成的 LOGO 基础上，准备 开始制作本次的 BANNER。（3）根据网站策划方案里的主色调和主题的要求，开始设计网站的 BANNER， 首先去选择一张适合的图片。（4）使用矩形选框工具选择要使用的图片部分，图片的其他部分删除。 （5） 根据设计要求，在 BANNER 上添加其他元素，比如文字或者其他能够表达网站主 题的图片。（6）使用魔术棒工具将要放置到 BANNER 上的图片的某一部分扣出来，然后设 置适合的大小，旋转好方向后放好。（7）设置图层的样式，以及文字的混合选项等。（8）保存

11、文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 5 页网页设计与制作综合实训实训指导书实训四 设计案例网站导航条1、学时分配：6 学时2、实训目的（1）熟悉 Photoshop 软件的使用方法。（2）熟练掌握网站导航条的设计方法。（3）创建项目案例网站的导航条。3、实训任务（1）掌握 Photoshop 软件圆角矩形工具的使用方法。（2）查看网络上相关网站导航条。（3）根据小组讨

12、论结果，实际动手完成网站的导航条。4、实训内容（1）打开 Photoshop 软件，熟悉软件的界面布局和工作面板的摆放，熟练使用 Photoshop 软件。（2）查看网上其它网站的导航条，了解导航条的基本情况。（3）打开上次保存好的 Photoshop 源文件，在上次完成的基础上，准备开始制 作本次的导航条。（4）根据网站策划方案里的主色调和主题的要求，开始设计网站的导航条，首 先去选择一张适合的图片。（5）使用圆角矩形工具绘制一个圆角矩形，颜色与大小要与整个网站的风格与 主题相一致。（6）选中绘制好的圆角矩形，使用渐变工具，绘制立体感导航条背景。 （7）输入导航条文字，输入导航条文字间的竖线

13、间隔。（8）设置文字和竖线的混合选项，增加立体感。（9）保存文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 6 页网页设计与制作综合实训实训指导书实训五 设计案例网站网页内容和网页版权声明 1、学时分配：6 学时2、实训目的（1）熟悉 Photoshop 软件的使用方法。（2）熟练掌握网站网页内容和网页版权声明的设计方法。（3）创建项目案例网站的网页内容和网页版权声明。3、实训任

14、务（1）掌握 Photoshop 软件多种工具结合的使用方法。（2）查看网络上相关网站网页。（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。 4、实训内容（1）打开 Photoshop 软件，熟悉软件的界面布局和工作面板的摆放，熟练使用 Photoshop 软件。（2）查看网上其它网站的网页，了解网页对象分布的基本情况。（3）打开上次保存好的 Photoshop 源文件，在上次完成的基础上，准备开始制 作本次的网页内容和网页版权声明。（4）根据网站策划方案里的主色调和主题的要求，选择灰色与深蓝色作为边框 颜色，网页内容标题文字颜色为黑色。（5）以制作通知公告为例，使用文字工具

15、输入文字“通知公告”，文字大小为 14 号，文字颜色为黑色，文字字体为“宋体或者黑体”，根据自己的理解，可 以为文字增加“混合选项”，设置文字效果。（6）新建图层，选择“线条工具”，线条粗细为 1 像素，颜色为黑色或者深蓝 色都可以，绘制一条直线。（7）新建图层，选择“圆角矩形工具”，半径为 50 像素，颜色为黑色或者深 蓝色。（8）新建图层，选择“文字工具”，在刚才绘制好的圆角矩形上输入“More”， 文字大小是 12，颜色为白色，字体为“Arial”。（9）使用同样的办法可以制作完成其他网页内容部分的标题。（10）保存文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（

16、2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 7 页网页设计与制作综合实训实训指导书实训六 对案例网站版面切图1、学时分配：6 学时2、实训目的（1）熟悉 Photoshop 软件的使用方法。（2）掌握网站版面设计的方法。（3）对案例网站版面进行切图。3、实训任务（1）掌握 Photoshop 软件切片工具的使用方法。（2）查看网络上相关网站网页。（3）根据小组讨论结果，实际动手对网站版面进行切图。4、实训内容（1）打开 Photoshop 软件，

17、熟悉软件的界面布局和工作面板的摆放，熟练使用 Photoshop 软件。（2）查看网上其它网站的网页，了解网页对象分布的基本情况。（3）打开制作好的网站版面源文件，使用切片工具准备对版面进行切图。 （4）使用参考线将网站版面部分之间进行分割。（5）使用切片工具对网站版面进行切割。（6）切图完成后，选择“文件”“存储为 WEB 所用格式”，存储文件类型 可以选择“JPEG”或者“GIF”。（7）整理保存好的文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络

18、资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 8 页网页设计与制作综合实训实训指导书实训七 制作完成案例网站首页1、学时分配：6 学时2、实训目的（1）熟悉 Dreamweaver 软件的使用方法。（2）掌握使用表格布局网页的方法。（3）制作完成案例网站首页。3、实训任务（1）掌握 Dreamweaver 软件的使用方法。（2）查看网络上相关网站网页。（3）根据小组讨论结果，实际动手完成案例网站首页。4、实训内容（1）预览实训网页。（2）在 D 盘根目录下新建一个文件夹“home”，在该文件夹中分别新建“css”、 “images”，“html”三个文件夹，（3）打

19、开 Dreamweaver 软件，将“home”文件夹定义为站点。（4）创建一个命名为“index.html”的网页文档，设置网页的页面属性。 （5）根据网页首页效果图，插入表格，进行表格的嵌套，完成网页首页的布局。（6）在网页插入的表格中输入文字、水平线和日期等内容，设置文本的属性。（7）在网页中插入图像，设置图像的属性。（8）创建 CSS 样式表文件，分别定义需要添加效果的不同 CSS 样式。（9）在网页上分别应用不同的 CSS 样式。（10）保存网页文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。

20、（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 9 页网页设计与制作综合实训实训指导书实训八 案例网站模板的制作1、学时分配：6 学时2、实训目的（1）熟悉 Dreamweaver 软件的使用方法。（2）掌握网页模板的制作方法。（3）掌握使用网页模板创建网页的方法。3、实训任务（1）掌握 Dreamweaver 软件的使用方法。（2）查看网络上相关网站网页。（3）根据小组讨论结果，实际动手制作网页模板。4、实训内容（1）根据下发的“二级网页.jpg”，在 Photoshop 软件中设计完成二级网页版 面，并且切图制作

21、网页。（2）查看网上其它网站的网页，了解网页对象分布的基本情况。（3）在 Dreamweaver 软件中打开制作好的二级网页，选择“文件”“另存为 模板”，将制作好的网页转化为模板文件。（4）在创建好的模板网页上插入“可编辑区域”，根据需要可以插入多个可编 辑区域。（5）也可以选择“文件”“新建”“模板文件”，重新创建一个新的模板 文件，跟制作网页的方法一样，制作完成模板网页后，一定要在模板网页中插 入可编辑区域。（6）选择“文件”“模板”，选择创建好的网页模板，选择“由模板创建”， 利用制作好的模板来生成网页。（7）在生成的网页中的可编辑区域中添加相应的网页内容。（8）对创建好的网页模板进行

22、编辑，并且进行更新。（9）整理保存好的文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 10 页网页设计与制作综合实训实训指导书实训九 案例网页超级链接的添加1、学时分配：6 学时2、实训目的（1）熟悉 Dreamweaver 软件的使用方法；（2）掌握网页超连接的添加和设置方法；（3）创建完成案例网页的超连接。3、实训任务（1）掌握 Dreamweaver 软件的使用方法。（2）

23、查看网络上相关网站网页。（3）根据小组讨论结果，实际动手创建网页超链接。4、实训内容（1）根据设计好的二级网页版面，制作网页模板。（2）打开 Dreamweaver 软件使用创建的二级网页模板来创建主页的新闻网页。（3）根据首页新闻链接标题内容，选择新闻网页内容，并将新闻内容添加到使 用网页模板生成的新闻网页中。（4）为首页新闻文字添加文字超链接。（5）在创建新闻网页的模板文件中添加返回首页的链接。（6）更新网页。（7）根据首页导航条内容，选择合适的网页内容，使用二级网页模板生成相应 网页。（8）为首页导航条添加图片超链接，链接到相应的二级网页。（9）在创建二级网页的模板文件中创建返回首页，以

24、及二级网页之间互相链接 的超链接。（10）更新网页。（11）为首页添加邮件链接、锚点链接、跳转菜单链接、下载链接等其他超链 接。（12）测试网页超链接，保存相关文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 11 页网页设计与制作综合实训实训指导书实训十 案例网站加入动态元素1、学时分配：6 学时2、实训目的（1）熟悉 Flash 软件的使用方法；（2）掌握创建滚动效果的方法；（

25、3）为案例网站加入动态效果。3、实训任务（1）掌握 Dreamweaver 软件和 Flash 软件的使用方法。（2）实际动手为网站首页制作一个 Flash 动画。（3）为首页增加新闻动态滚动效果，以及图片动态滚动效果。4、实训内容（1）打开 Flash 软件，熟悉 Flash 软件的使用方法。（2）使用 Flash 软件创建一个简单动画，比如图片之间的简单切换。（3）打开 Dreamweaver 软件，将 Flash 中生成的 SWF 格式动画文件插入到网页 中，设置动画属性。（4）熟悉链接网页源代码的编写方法，掌握基本的网页代码标签。（5）在“通知公告”中给网页新闻添加由下向上的动态滚动效果。（6）在“专业展板”中给图片添加由右向左的动态滚动效果。（7）测试网页效果，整理保存好的文件。5、实训要求（1）由指导教师讲清实训的基本原理，要求，实训目的。（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。第 12 页