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

武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013年9月《网页设计与制作综合实训》实训指导书第2页目录实训目的...........................................................................................................................................1实训内容及要求...............................................................................................................................1实训性质、实训地点、实习时间安排，适用专业班级...............................................................2实训一站点的规划设计..................................................................................................................3实训二设计案例网站LOGO.........................................................................................................4实训三设计案例网站BANNER...................................................................................................5实训四设计案例网站导航条.........................................................................................................6实训五设计案例网站网页内容和网页版权声明.........................................................................7实训六对案例网站版面切图.........................................................................................................8实训七制作完成案例网站首页.....................................................................................................9实训八案例网站模板的制作.......................................................................................................10实训九案例网页超级链接的添加...............................................................................................11实训十案例网站加入动态元素...................................................................................................12《网页设计与制作综合实训》实训指导书第1页实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《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状态为准。《网页设计与制作综合实训》实训指导书第2页3.网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。4.网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。5.要求页面美观大方、颜色搭配协调；6.作品留存，下学期或下一阶段继续完善、开发。实训性质、实训地点、实习时间安排，适用专业班级该实训为校内模拟实训。根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。实训时间：2013-2014学年第一学期第15-18周实训班级：软件1301班、软件1302班实训地点：学校机房《网页设计与制作综合实训》实训指导书第3页实训一站点的规划设计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）除了教师的指导外，还要着重培养学生自学的能力。《网页设计与制作综合实训》实训指导书第4页实训二设计案例网站LOGO1、学时分配：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）除了教师的指导外，还要着重培养学生自学的能力。《网页设计与制作综合实训》实训指导书第5页实训三设计案例网站BANNER1、学时分配：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）除了教师的指导外，还要着重培养学生自学的能力。《网页设计与制作综合实训》实训指导书第6页实训四设计案例网站导航条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）除了教师的指导外，还要着重培养学生自学的能力。《网页设计与制作综合实训》实训指导书第7页实训五设计案例网站网页内容和网页版权声明1、学时分配：6学时2、实训目的（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站网页内容和网页版权声明的设计方法。（3）创建项目案例网站的网页内容和网页版权声明