《网页设计与制作综合实训》实训指导书.docx
《《网页设计与制作综合实训》实训指导书.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作综合实训》实训指导书.docx（14页珍藏版）》请在冰豆网上搜索。
《网页设计与制作综合实训》实训指导书
武汉商贸职业学院
信息工程学院
《网页设计与制作综合实训》实训指导书
软件教研室2013年9月
《网页设计与制作综合实训》实训指导书
目
录
实训目的............................................................................................................................................1
实训内容及要求................................................................................................................................1
实训性质、实训地点、实习时间安排，适用专业班级................................................................2
实训一站点的规划设计...................................................................................................................3
实训二设计案例网站LOGO..........................................................................................................4
实训三设计案例网站BANNER....................................................................................................5
实训四设计案例网站导航条..........................................................................................................6
实训五设计案例网站网页内容和网页版权声明..........................................................................7
实训六对案例网站版面切图..........................................................................................................8
实训七制作完成案例网站首页......................................................................................................9
实训八案例网站模板的制作........................................................................................................10
实训九案例网页超级链接的添加................................................................................................11
实训十案例网站加入动态元素....................................................................................................12
第2页
《网页设计与制作综合实训》实训指导书
实训目的
在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。
本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。
通过本次实训希望达到以下目的：
1.熟悉和掌握Dreamweaver软件的使用方法；
2.熟悉和掌握PS软件的使用方法；
3.熟悉FLASH软件应用的方法；
4.学会使用CSS+DIV做网页布局；
5.熟练掌握站点的规划与设计
实训内容及要求
本实训的内容简述：
1.网站首页
（1）专业概况
（2）专业建设规划
（3）展示最新动态文章标题（8条）
（4）专业建设成效的文章标题（8项）
（5）专业建设特色文章标题（8项）
2.专业概况
点击项目概况，显示相关文本
3.专业建设规划
点击项目申报书菜单，显示flashpaper格式的申报书内容
4.专业建设特色
显示专业建设特色的文章标题列表，点击标题进入内容
5.专业建设动态
显示专业建设动态的标题列表，点击标题进入成果详细展示
6.专业建设成效
显示专业建设成效的标题列表，点击标题进入成果详细展示。
本实训的要求：
1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。
2.显示环境：
网页视觉效果应采用InternetExplorer6.0以上版本浏览器，显示分辨率以1024×768状态为准。
第1页
《网页设计与制作综合实训》实训指导书
3.网页规模：
网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。
4.网站结构：
要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。
5.要求页面美观大方、颜色搭配协调；
6.作品留存，下学期或下一阶段继续完善、开发。
实训性质、实训地点、实习时间安排，适用专业班级
该实训为校内模拟实训。
根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。
实训时间：
2013-2014学年第一学期第15-18周
实训班级：
软件1301班、软件1302班
实训地点：
学校机房
第2页
《网页设计与制作综合实训》实训指导书
实训一站点的规划设计
1、学时分配：
6学时
2、实训目的
（1）熟悉Dreamweaver软件的界面布局和工作环境。
（2）熟练掌握本地站点创建和管理的方法。
3、实训任务
（1）创建一个静态网站站点。
（2）从网络上收集网页素材。
（3）根据提供的网站策划方案范本，结合自己要制作完成的网站，开始着手书写网站策划方案。
4、实训内容
（1）打开Dreamweaver软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Dreamweaver软件。
（2）在本机D盘上创建文件夹“home”，在“home”文件夹下根据网站的规划设计，创建相关的文件夹，用来放置不同的文件。
（3）在Dreamweaver软件中，将D盘“home”文件夹定义成静态网站站点，站点名称任意。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第3页
《网页设计与制作综合实训》实训指导书
实训二设计案例网站LOGO
1、学时分配：
6学时
2、实训目的
（1）熟悉Photoshop软件的界面布局和工作环境。
（2）熟练掌握网站LOGO的设计方法。
（3）创建项目案例网站的LOGO。
3、实训任务
（1）掌握Photoshop软件文字工具工具的使用方法。
（2）查看网络上相关网站LOGO。
（3）根据小组讨论结果，实际动手完成网站的LOGO。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Photoshop软件。
（2）新建Photoshop文件，大小为980*600像素，分辨率为72像素/英寸，颜色模式为RGB颜色8位，背景颜色为白色或者透明都可以。
（3）使用文字工具，输入MZD三个字母，设置文字属性。
（4）栅格化文字图层，将栅格化后的图层上的3个字母分别移动到不同的3个图层上。
（5）分别对3个字母进行艺术化处理。
（6）输入其他的文字。
（7）为输入的文字图层设置“混合选项”。
（8）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第4页
《网页设计与制作综合实训》实训指导书
实训三设计案例网站BANNER
1、学时分配：
6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。
（2）熟练掌握网站BANNER的设计方法。
（3）创建项目案例网站的BANNER。
3、实训任务
（1）掌握Photoshop软件渐变工具的使用方法。
（2）查看网络上相关网站BANNER。
（3）根据小组讨论结果，实际动手完成网站的BANNER。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）打开上次保存好的Photoshop源文件，在上次完成的LOGO基础上，准备开始制作本次的BANNER。
（3）根据网站策划方案里的主色调和主题的要求，开始设计网站的BANNER，首先去选择一张适合的图片。
（4）使用矩形选框工具选择要使用的图片部分，图片的其他部分删除。
（5）根据设计要求，在BANNER上添加其他元素，比如文字或者其他能够表达网站主题的图片。
（6）使用魔术棒工具将要放置到BANNER上的图片的某一部分扣出来，然后设置适合的大小，旋转好方向后放好。
（7）设置图层的样式，以及文字的混合选项等。
（8）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第5页
《网页设计与制作综合实训》实训指导书
实训四设计案例网站导航条
1、学时分配：
6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。
（2）熟练掌握网站导航条的设计方法。
（3）创建项目案例网站的导航条。
3、实训任务
（1）掌握Photoshop软件圆角矩形工具的使用方法。
（2）查看网络上相关网站导航条。
（3）根据小组讨论结果，实际动手完成网站的导航条。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）查看网上其它网站的导航条，了解导航条的基本情况。
（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的导航条。
（4）根据网站策划方案里的主色调和主题的要求，开始设计网站的导航条，首先去选择一张适合的图片。
（5）使用圆角矩形工具绘制一个圆角矩形，颜色与大小要与整个网站的风格与主题相一致。
（6）选中绘制好的圆角矩形，使用渐变工具，绘制立体感导航条背景。
（7）输入导航条文字，输入导航条文字间的竖线间隔。
（8）设置文字和竖线的混合选项，增加立体感。
（9）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第6页
《网页设计与制作综合实训》实训指导书
实训五设计案例网站网页内容和网页版权声明1、学时分配：
6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。
（2）熟练掌握网站网页内容和网页版权声明的设计方法。
（3）创建项目案例网站的网页内容和网页版权声明。
3、实训任务
（1）掌握Photoshop软件多种工具结合的使用方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的网页内容和网页版权声明。
（4）根据网站策划方案里的主色调和主题的要求，选择灰色与深蓝色作为边框颜色，网页内容标题文字颜色为黑色。
（5）以制作通知公告为例，使用文字工具输入文字“通知公告”，文字大小为14号，文字颜色为黑色，文字字体为“宋体或者黑体”，根据自己的理解，可以为文字增加“混合选项”，设置文字效果。
（6）新建图层，选择“线条工具”，线条粗细为1像素，颜色为黑色或者深蓝色都可以，绘制一条直线。
（7）新建图层，选择“圆角矩形工具”，半径为50像素，颜色为黑色或者深蓝色。
（8）新建图层，选择“文字工具”，在刚才绘制好的圆角矩形上输入“More”，文字大小是12，颜色为白色，字体为“Arial”。
（9）使用同样的办法可以制作完成其他网页内容部分的标题。
（10）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第7页
《网页设计与制作综合实训》实训指导书
实训六对案例网站版面切图
1、学时分配：
6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。
（2）掌握网站版面设计的方法。
（3）对案例网站版面进行切图。
3、实训任务
（1）掌握Photoshop软件切片工具的使用方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手对网站版面进行切图。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）打开制作好的网站版面源文件，使用切片工具准备对版面进行切图。
（4）使用参考线将网站版面部分之间进行分割。
（5）使用切片工具对网站版面进行切割。
（6）切图完成后，选择“文件”——“存储为WEB所用格式”，存储文件类型可以选择“JPEG”或者“GIF”。
（7）整理保存好的文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第8页
《网页设计与制作综合实训》实训指导书
实训七制作完成案例网站首页
1、学时分配：
6学时
2、实训目的
（1）熟悉Dreamweaver软件的使用方法。
（2）掌握使用表格布局网页的方法。
（3）制作完成案例网站首页。
3、实训任务
（1）掌握Dreamweaver软件的使用方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手完成案例网站首页。
4、实训内容
（1）预览实训网页。
（2）在D盘根目录下新建一个文件夹“home”，在该文件夹中分别新建“css”、“images”，“html”三个文件夹，
（3）打开Dreamweaver软件，将“home”文件夹定义为站点。
（4）创建一个命名为“index.html”的网页文档，设置网页的页面属性。
（5）根据网页首页效果图，插入表格，进行表格的嵌套，完成网页首页的布局。
（6）在网页插入的表格中输入文字、水平线和日期等内容，设置文本的属性。
（7）在网页中插入图像，设置图像的属性。
（8）创建CSS样式表文件，分别定义需要添加效果的不同CSS样式。
（9）在网页上分别应用不同的CSS样式。
（10）保存网页文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第9页
《网页设计与制作综合实训》实训指导书
实训八案例网站模板的制作
1、学时分配：
6学时
2、实训目的
（1）熟悉Dreamweaver软件的使用方法。
（2）掌握网页模板的制作方法。
（3）掌握使用网页模板创建网页的方法。
3、实训任务
（1）掌握Dreamweaver软件的使用方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手制作网页模板。
4、实训内容
（1）根据下发的“二级网页.jpg”，在Photoshop软件中设计完成二级网页版面，并且切图制作网页。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）在Dreamweaver软件中打开制作好的二级网页，选择“文件”—“另存为模板”，将制作好的网页转化为模板文件。
（4）在创建好的模板网页上插入“可编辑区域”，根据需要可以插入多个可编辑区域。
（5）也可以选择“文件”—“新建”—“模板文件”，重新创建一个新的模板文件，跟制作网页的方法一样，制作完成模板网页后，一定要在模板网页中插入可编辑区域。
（6）选择“文件”—“模板”，选择创建好的网页模板，选择“由模板创建”，利用制作好的模板来生成网页。
（7）在生成的网页中的可编辑区域中添加相应的网页内容。
（8）对创建好的网页模板进行编辑，并且进行更新。
（9）整理保存好的文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第10页
《网页设计与制作综合实训》实训指导书
实训九案例网页超级链接的添加
1、学时分配：
6学时
2、实训目的
（1）熟悉Dreamweaver软件的使用方法；
（2）掌握网页超连接的添加和设置方法；
（3）创建完成案例网页的超连接。
3、实训任务
（1）掌握Dreamweaver软件的使用方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手创建网页超链接。
4、实训内容
（1）根据设计好的二级网页版面，制作网页模板。
（2）打开Dreamweaver软件使用创建的二级网页模板来创建主页的新闻网页。
（3）根据首页新闻链接标题内容，选择新闻网页内容，并将新闻内容添加到使用网页模板生成的新闻网页中。
（4）为首页新闻文字添加文字超链接。
（5）在创建新闻网页的模板文件中添加返回首页的链接。
（6）更新网页。
（7）根据首页导航条内容，选择合适的网页内容，使用二级网页模板生成相应网页。
（8）为首页导航条添加图片超链接，链接到相应的二级网页。
（9）在创建二级网页的模板文件中创建返回首页，以及二级网页之间互相链接的超链接。
（10）更新网页。
（11）为首页添加邮件链接、锚点链接、跳转菜单链接、下载链接等其他超链接。
（12）测试网页超链接，保存相关文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。
（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。
（4）除了教师的指导外，还要着重培养学生自学的能力。
第11页
《网页设计与制作综合实训》实训指导书
实训十案例网站加入动态元素
1、学时分配：
6学时
2、实训目的
（1）熟悉Flash软件的使用方法；
（2）掌握创建滚动效果的方法；
（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页
升级会员 