静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 计算机系部网站-实训指导书1.doc

静态网页设计与制作（项目式） PAGE 218 PAGE 218 课程实训指导书 《静态网页制作（Dreamweaver）》 实训指导书 指导教师：张亚静 所在系别： 计算机技术系 所属专业： 网络技术 指导教师: 张亚静 专业负责人： 孙志成 PAGE PAGE 7 指导书填写要求 实训设计指导书由指导教师根据课题的具体情况进行设计填写，经学生所在专业的负责人审查、系领导签字后生效。此指导书应在实训开始前一周内填好并发给学生； 指导书填写的内容，必须和学生实训完成的情况相一致。若有变更，应当经过所在专业教研室及系主管领导审批后方可重新填写； 本指导书内有关“系”、“专业”等名称的填写，应写中文全称，学生的“学号”要写全，不能只写最后2位或1位数字； 有关年月日等日期的填写，一律用阿拉伯数字书写。如“2017年3月2日”或“2017-03-02”。 实训一、设计和制作计算机系部网站 一、实训的目的与要求 （一）实训目的 通过实训，进一步巩固、深化和扩展学生的理论知识与专业技能；训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力、团队协作精神，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等提高学生运用所学的理论知识和技能、最终提升学生开发网站的综合能力。 （二）实训要求 规划网站的内容结构、目录结构、链接结构。 应用DIV+CSS搭建网站布局。 应用网页特效增强网站视觉效果。 应用模板构建网站二级页面。 完成网站测试及发布。 二、实训的前期准备（设备、用具与软件环境） 操作系统： WIN10/WIN7/XP等操作系统 应用软件 Dreamwear网页编辑软件及 Flash动画设计软件、PS图形图像处理软件等。 三、实训的步骤 （一）网站规划 网站策划可以说是整个网站建设的前提，网站策划中包括网站用户需求分析，网站信息组织、网站导航设计、网站功能需求分析以及网站推广方案等一系列内容。通过网站策划，可以确定的因素包括：网站的类型、网站导航的规划、网站的整个风格（CI要素）、网站的功能和网页布局。而这些因素都是可以直接在网页效果图中体现出来的。 图1 网站策划内容 1. 规划站点目录结构 设置站点的一般做法是在本地磁盘创建一个包含站点所有资源的文件夹，然后在这个文件夹中创建多个子文件夹，将所应用的资源分门别类存储到相应的文件夹下，也可以根据需要创建多级文件夹。 建立站点相应文件夹，如图2所示。 图2 站点目录结构 2. 规划站点栏目结构 根据网站的使用范围和用途，设计栏目结构草图，如图3所示。 图3 站点栏目结构 （二）搜集素材 网站策划完成之后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项目并做好了准备,否则，可能为找不到一幅图像而中断设计、开发过程。 （三）网页效果图设计 网页效果图设计是网站项目开发中非常重要的一环，是通过技术手段来设计网页的视觉效果。效果图的好坏，直接影响到整个网站的质量。通过设计网页效果图，网页设计师可以把对网站的理解通过图像的方式表现出来，然后让客户直观地进行审核，客户也可以通过对效果图的审核，提出自己的意见和建议，让设计师进行修改。最终实现一个能够让双方都满意的设计效果。网页效果图设计流程如下： 首先进行网站策划，然后由客户提交相关的图文资料，网页设计师根据策划的内容和收集的素材进行效果图设计；最后提交客户审核，双方就设计图中不满意的内容进行沟通协商，做进一步的修改，直到审核通过为止。 在网页效果图的设计阶段，应按照绘制结构草图，在photoshop中绘制辅助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输出切片到Dreamweaver的顺序来依次进行。 在图像软件中设计网页效果图，总体可以分为7个步骤： （1）创建辅助线 在具体设计前，应当考虑到网页的布局形式，可以根据策划阶段确定下来的网页布局草图，在photoshop的画布中添加辅助线，（去掉“这样”）目的是为了明确页面布局形式和面积。 需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够全部创建好的，而是设计哪一部分内容创建哪一部分的辅助线，否则辅助线过多会使页面混乱。 （2）绘制结构底图 根据创建好的辅助线，使用photoshop相应工具把网页效果图中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效果。 这里的“矩形块只是一个统称，可以是任意的形状。除了得到形状以外，还可以