《网页设计与制作综合实训》教学大纲Word格式.docx
《《网页设计与制作综合实训》教学大纲Word格式.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作综合实训》教学大纲Word格式.docx（17页珍藏版）》请在冰点文库上搜索。
（5）要求页面美观大方、颜色搭配协调；
（6）作品留存，下学期或下一阶段继续完善、开发。
二.实训方式
该实训为校内模拟实训。
根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。
实训时间：
2013-2014学年第一学期第15-18周
实训班级：
软件1301班、软件1302班
实训地点：
校内机房
三.考核方式
个人最终成绩=平时*30%+项目中期检查*20%+项目终期检查*50%。
评分类别
评分项目
分值
评分指标
平时成绩（30）
考勤
10
迟到一次扣1分，早退一次扣1分，旷课一节扣2分
纪律
违反纪律一次扣一分，比如接听电话、玩游戏等
学习态度
根据学习态度是否认真评分
项目中期检查（20）
完成情况
20
根据中期完成项目进度给分
项目终期检查（50）
功能实现
（30）
软件系统
A、模块全部实现并且无明显Bug和程序执行错误
数据库设计
数据库设计符合用户需求并无明显冗余信息
代码编写
（10）
代码规范
A、符合微软基本代码规范要求
代码可读性
5
A、主要的类，方法和数据都有良好注释
非功能性需求
用户界面
2
A、所有界面风格一致
3
B、导航清晰明了，可用性高
B、主体布局用div+css技术
100
四.实训指导书及主要参考资料
指导书：
《网页设计与制作综合实训》实训指导书武汉商贸职业学院信息工程学院软件教研室张振寰。
参考资料：
1.《网页设计实训教程》裴献主编.科学出版社，2010年8月
2.《网页设计基础与实训》吴代文主编.清华大学出版社，2012年2月
五.实训项目及学时分配
实训项目一览表
序号
实训项目名称
学时
实训一
站点的规划设计
6学时
实训二
设计案例网站LOGO
实训三
设计案例网站BANNER
实训四
设计案例网站导航条
实训五
设计案例网站网页内容和网页版权声明
实训六
对案例网站版面切图
实训七
制作完成案例网站首页
实训八
案例网站模板的制作
实训九
案例网页超级链接的添加
实训十
案例网站加入动态元素
六.实训项目内容及其要求
实训一
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）除了教师的指导外，还要着重培养学生自学的能力。
实训二
设计案例网站LOGO
（1）熟悉Photoshop软件的界面布局和工作环境。
（2）熟练掌握网站LOGO的设计方法。
（3）创建项目案例网站的LOGO。
（1）掌握Photoshop软件文字工具工具的使用方法。
（2）查看网络上相关网站LOGO。
（3）根据小组讨论结果，实际动手完成网站的LOGO。
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Photoshop软件。
（2）新建Photoshop文件，大小为980*600像素，分辨率为72像素/英寸，颜色模式为RGB颜色8位，背景颜色为白色或者透明都可以。
（3）使用文字工具，输入MZD三个字母，设置文字属性。
（4）栅格化文字图层，将栅格化后的图层上的3个字母分别移动到不同的3个图层上。
（5）分别对3个字母进行艺术化处理。
（6）输入其他的文字。
（7）为输入的文字图层设置“混合选项”。
（8）保存文件。
实训三
设计案例网站BANNER
（1）熟悉Photoshop软件的使用方法。
（2）熟练掌握网站BANNER的设计方法。
（3）创建项目案例网站的BANNER。
（1）掌握Photoshop软件渐变工具的使用方法。
（2）查看网络上相关网站BANNER。
（3）根据小组讨论结果，实际动手完成网站的BANNER。
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）打开上次保存好的Photoshop源文件，在上次完成的LOGO基础上，准备开始制作本次的BANNER。
（3）根据网站策划方案里的主色调和主题的要求，开始设计网站的BANNER，首先去选择一张适合的图片。
（4）使用矩形选框工具选择要使用的图片部分，图片的其他部分删除。
（5）根据设计要求，在BANNER上添加其他元素，比如文字或者其他能够表达网站主题的图片。
（6）使用魔术棒工具将要放置到BANNER上的图片的某一部分扣出来，然后设置适合的大小，旋转好方向后放好。
（7）设置图层的样式，以及文字的混合选项等。
实训四
设计案例网站导航条
（2）熟练掌握网站导航条的设计方法。
（3）创建项目案例网站的导航条。
（1）掌握Photoshop软件圆角矩形工具的使用方法。
（2）查看网络上相关网站导航条。
（3）根据小组讨论结果，实际动手完成网站的导航条。
（2）查看网上其它网站的导航条，了解导航条的基本情况。
（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的导航条。
（4）根据网站策划方案里的主色调和主题的要求，开始设计网站的导航条，首先去选择一张适合的图片。
（5）使用圆角矩形工具绘制一个圆角矩形，颜色与大小要与整个网站的风格与主题相一致。
（6）选中绘制好的圆角矩形，使用渐变工具，绘制立体感导航条背景。
（7）输入导航条文字，输入导航条文字间的竖线间隔。
（8）设置文字和竖线的混合选项，增加立体感。
（9）保存文件。
实训五
设计案例网站网页内容和网页版权声明
（2）熟练掌握网站网页内容和网页版权声明的设计方法。
（3）创建项目案例网站的网页内容和网页版权声明。
（1）掌握Photoshop软件多种工具结合的使用方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的网页内容和网页版权声明。
（4）根据网站策划方案里的主色调和主题的要求，选择灰色与深蓝色作为边框颜色，网页内容标题文字颜色为黑色。
（5）以制作通知公告为例，使用文字工具输入文字“通知公告”，文字大小为14号，文字颜色为黑色，文字字体为“宋体或者黑体”，根据自己的理解，可以为文字增加“混合选项”，设置文字效果。
（6）新建图层，选择“线条工具”，线条粗细为1
像素，颜色为黑色或者深蓝色都可以，绘制一条直线。
（7）新建图层，选择“圆角矩形工具”，半径为50
像素，颜色为黑色或者深蓝色。
（8）新建图层，选择“文字工具”，在刚才绘制好的圆角矩形上输入“More”，文字大小是12，颜色为白色，字体为“Arial”。
（9）使用同样的办法可以制作完成其他网页内容部分的标题。
（10）保存文件。
实训六
（2）掌握网站版面设计的方法。
（3）对案例网站版面进行切图。
（1）掌握Photoshop软件切片工具的使用方法。
（3）根据小组讨论结果，实际动手对网站版面进行切图。
（3）打开制作好的网站版面源文件，使用切片工具准备对版面进行切图。
（4）使用参考线将网站版面部分之间进行分割。
（5）使用切片工具对网站版面进行切割。
（6）切图完成后，选择“文件”——“存储为WEB所用格式”，存储文件类型可以选择“JPEG”或者“GIF”。
（7）整理保存好的文件。
实训七
制作完成案例网站首页
（1）熟悉Dreamweaver软件的使用方法。
（2）掌握使用表格布局网页的方法。
（3）制作完成案例网站首页。
（1）掌握Dreamweaver软件的使用方法。
（3）根据小组讨论结果，实际动手完成案例网站首页。
（1）预览实训网页。
（2）在D盘根目录下新建一个文件夹“home”，在该文件夹中分别新建“css”、“images”，“html”三个文件夹，
（3）打开Dreamweaver软件，将“home”文件夹定义为站点。
（4）创建一个命名为“index.html”的网页文档，设置网页的页面属性。
（5）根据网页首页效果图，插入表格，进行表格的嵌套，完成网页首页的布局。
（6）在网页插入的表格中输入文字、水平线和日期等内容，设置文本的属性。
（7）在网页中插入图像，设置图像的属性。
（8）创建CSS样式表文件，分别定义需要添加效果的不同CSS样式。
（9）在网页上分别应用不同的CSS样式。
（10）保存网页文件。
实训八
（2）掌握网页模板的制作方法。
（3）掌握使用网页模板创建网页的方法。
（3）根据小组讨论结果，实际动手制作网页模板。
（1）根据下发的“二级网页.jpg”，在Photoshop软件中设计完成二级网页版面，并且切图制作网页。
（3）在Dreamweaver软件中打开制作好的二级网页，选择“文件”—“另存为模板”，将制作好的网页转化为模板文件。
（4）在创建好的模板网页上插入“可编辑区域”，根据需要可以插入多个可编辑区域。
（5）也可以选择“文件”—“新建”—“模板文件”，重新创建一个新的模板文件，跟制作网页的方法一样，制作完成模板网页后，一定要在模板网页中插入可编辑区域。
（6）选择“文件”—“模板”，选择创建好的网页模板，选择“由模板创建”，利用制作好的模板来生成网页。
（7）在生成的网页中的可编辑区域中添加相应的网页内容。
（8）对创建好的网页模板进行编辑，并且进行更新。
（9）整理保存好的文件。
实训九
案例网页超级链接的添加
（1）熟悉Dreamweaver软件的使用方法；
（2）掌握网页超连接的添加和设置方法；
（3）创建完成案例网页的超连接。
（3）根据小组讨论结果，实际动手创建网页超链接。
（1）根据设计好的二级网页版面，制作网页模板。
（2）打开Dreamweaver软件使用创建的二级网页模板来创建主页的新闻网页。
（3）根据首页新闻链接标题内容，选择新闻网页内容，并将新闻内容添加到使用网页模板生成的新闻网页中。
（4）为首页新闻文字添加文字超链接。
（5）在创建新闻网页的模板文件中添加返回首页的链接。
（6）更新网页。
（7）根据首页导航条内容，选择合适的网页内容，使用二级网页模板生成相应网页。
（8）为首页导航条添加图片超链接，链接到相应的二级网页。
（9）在创建二级网页的模板文件中创建返回首页，以及二级网页之间互相链接的超链接。
（10）更新网页。
（11）为首页添加邮件链接、锚点链接、跳转菜单链接、下载链接等其他超链接。
（12）测试网页超链接，保存相关文件。
实训十
案例网站加入动态元素
（1）熟悉Flash软件的使用方法；
（2）掌握创建滚动效果的方法；
（3）为案例网站加入动态效果。
（1）掌握Dreamweaver软件和Flash软件的使用方法。
（2）实际动手为网站首页制作一个Flash动画。
（3）为首页增加新闻动态滚动效果，以及图片动态滚动效果。
（1）打开Flash软件，熟悉Flash软件的使用方法。
（2）使用Flash软件创建一个简单动画，比如图片之间的简单切换。
（3）打开Dreamweaver软件，将Flash中生成的SWF格式动画文件插入到网页中，设置动画属性。
（4）熟悉链接网页源代码的编写方法，掌握基本的网页代码标签。
（5）在“通知公告”中给网页新闻添加由下向上的动态滚动效果。
（6）在“专业展板”中给图片添加由右向左的动态滚动效果。
（7）测试网页效果，整理保存好的文件。
升级会员 