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

武汉商贸职业学院 信息工程学院 《网页设计与制作综合实训》实训指导书 　 软件教研室 2013年9月  目 录 实训目的 1 实训内容及要求 1 实训性质、实训地点、实习时间安排，适用专业班级 2 实训一?站点的规划设计 3 实训二?设计案例网站LOGO 4 实训三??设计案例网站BANNER 5 实训四??设计案例网站导航条 6 实训五??设计案例网站网页内容和网页版权声明 7 实训六??对案例网站版面切图 8 实训七??制作完成案例网站首页 9 实训八??案例网站模板的制作 10 实训九??案例网页超级链接的添加 11 实训十??案例网站加入动态元素 12 实训目的 在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。 本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。 通过本次实训希望达到以下目的： 熟悉和掌握Dreamweaver软件的使用方法； 熟悉和掌握PS软件的使用方法； 熟悉FLASH软件应用的方法； 学会使用CSS+DIV做网页布局； 熟练掌握站点的规划与设计 实训内容及要求 本实训的内容简述： 网站首页 （1）专业概况 （2）专业建设规划 （3）展示最新动态文章标题（8条） （4）专业建设成效的文章标题（8项） （5）专业建设特色文章标题（8项） 专业概况 点击项目概况，显示相关文本 专业建设规划 点击项目申报书菜单，显示flashpaper格式的申报书内容 专业建设特色 显示专业建设特色的文章标题列表，点击标题进入内容 专业建设动态 显示专业建设动态的标题列表，点击标题进入成果详细展示 专业建设成效 显示专业建设成效的标题列表，点击标题进入成果详细展示。 本实训的要求： 应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。 显示环境：网页视觉效果应采用Internet Explorer 6.0以上版本浏览器，显示分辨率以1024×768状态为准。 网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。 网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。 要求页面美观大方、颜色搭配协调； 作品留存，下学期或下一阶段继续完善、开发。 实训性质、实训地点、实习时间安排，适用专业班级 该实训为校内模拟实训。根据学院教学计划安排及培养学生职业技能的要求，学生于第学期进行 实训一?站点的规划设计 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、学时分配：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）栅格化文字