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

《《网页设计与制作综合实训》实训指导书》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、.word可编辑.武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书　软件教研室.专业.专注..word可编辑.2013年9月.专业.专注..word可编辑.目录实训目的1实训内容及要求1实训性质、实训地点、实习时间安排，适用专业班级2实训一 站点的规划设计3实训二 设计案例网站LOGO4实训三  设计案例网站BANNER5实训四  设计案例网站导航条6实训五  设计案例网站网页内容和网页版权声明7实训六  对案例网站版面切图8实训七  制作完成案例网站首页9实训八  案例网站模板的制作10实训九  案例网页

2、超级链接的添加11实训十  案例网站加入动态元素12.专业.专注..word可编辑.实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法

3、；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训内容及要求本实训的内容简述：1.网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况点击项目概况，显示相关文本3.专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书内容.专业.专注..word可编辑.1.专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容2.专业建设动态显示专业建设动态的标

4、题列表，点击标题进入成果详细展示3.专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。本实训的要求：1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。2.显示环境：网页视觉效果应采用InternetExplorer6.0以上版本浏览器，显示分辨率以1024×768状态为准。3.网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。4.网站结构：要求结构清晰，文件有清晰的分类，比如图片

5、都放在images文件夹下等。5.要求页面美观大方、颜色搭配协调；6.作品留存，下学期或下一阶段继续完善、开发。实训性质、实训地点、实习时间安排，适用专业班级该实训为校内模拟实训。根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。实训时间：2013-2014学年第一学期第15-18周实训班级：软件1301班、软件1302班实训地点：学校机房.专业.专注..word可编辑.实训一 站点的规划设计1、学时分配：6学时 2、实训

6、目的 （1）熟悉Dreamweaver软件的界面布局和工作环境。 （2）熟练掌握本地站点创建和管理的方法。 3、实训任务 （1）创建一个静态网站站点。 （2）从网络上收集网页素材。 （3）根据提供的网站策划方案范本，结合自己要制作完成的网站，开始着手书写网站策划方案。 4、实训内容 （1）打开Dreamweaver 软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Dreamweaver 软件。 （2）在本机D盘上创建文件夹“home”，在“home”文件夹下根据网站的规划设计，创建相关的文件夹，用来放置不同的文件。 

7、（3）在Dreamweaver 软件中，将D盘 “home” 文件夹定义成静态网站站点，站点名称任意。 5、实训要求 （1）由指导教师讲清实训的基本原理，要求，实训目的。 （2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。 （3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。 （4）除了教师的指导外，还要着重培养学生自学的能力。 .专业.专注..word可编辑.实训二 设计案例网站LOGO 1、学时分配：6学时 2、实训目的 （1）熟悉Photoshop软件的界面布局和工作环境。（2）熟

8、练掌握网站LOGO的设计方法。 （3）创建项目案例网站的LOGO。 3、实训任务 （1）掌握Photoshop软件文字工具工具的使用方法。（2）查看网络上相关网站LOGO。 （3）根据小组讨论结果，实际动手完成网站的LOGO。 4、实训内容 （1）打开Photoshop软件，熟悉软件的界面布局和工作面板