武汉商贸职业学院
信息工程学院
《网页设计与制作综合实训》实训指导书
软件教研室 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. 显示环境：网页视觉效果应采用 Internet Explorer 6.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 页