静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例37.docVIP

企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例一、设计和制作计算机系部网站 一、案例整体目标及要求 （一）案例目的 通过案例，进一步巩固、深化和扩展学生的理论知识与专业技能；训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力、团队协作精神，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等提高学生运用所学的理论知识和技能、最终提升学生开发网站的综合能力。 （二）案例要求 规划网站的内容结构、目录结构、链接结构。 应用DIV+CSS搭建网站布局。 应用网页特效增强网站视觉效果。 应用模板构建网站二级页面。 完成网站测试及发布。 二、案例解决方案 （一）网站规划 网站策划可以说是整个网站建设的前提，网站策划中包括网站用户需求分析，网站信息组织、网站导航设计、网站功能需求分析以及网站推广方案等一系列内容。通过网站策划，可以确定的因素包括：网站的类型、网站导航的规划、网站的整个风格（CI要素）、网站的功能和网页布局。而这些因素都是可以直接在网页效果图中体现出来的。 图1 网站策划内容 1. 规划站点目录结构 设置站点的一般做法是在本地磁盘创建一个包含站点所有资源的文件夹，然后在这个文件夹中创建多个子文件夹，将所应用的资源分门别类存储到相应的文件夹下，也可以根据需要创建多级文件夹。 建立站点相应文件夹，如图2所示。 图2 站点目录结构 2. 规划站点栏目结构 根据网站的使用范围和用途，设计栏目结构草图，如图3所示。 图3 站点栏目结构 （二）搜集素材 网站策划完成之后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体等案例。在开始开发站点前，请确保收集了所有这些案例并做好了准备,否则，可能为找不到一幅图像而中断设计、开发过程。 （三）网页效果图设计 网页效果图设计是网站案例开发中非常重要的一环，是通过技术手段来设计网页的视觉效果。效果图的好坏，直接影响到整个网站的质量。通过设计网页效果图，网页设计师可以把对网站的理解通过图像的方式表现出来，然后让客户直观地进行审核，客户也可以通过对效果图的审核，提出自己的意见和建议，让设计师进行修改。最终实现一个能够让双方都满意的设计效果。网页效果图设计流程如下： 首先进行网站策划，然后由客户提交相关的图文资料，网页设计师根据策划的内容和收集的素材进行效果图设计；最后提交客户审核，双方就设计图中不满意的内容进行沟通协商，做进一步的修改，直到审核通过为止。 在网页效果图的设计阶段，应按照绘制结构草图，在photoshop中绘制辅助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输出切片到Dreamweaver的顺序来依次进行。 在图像软件中设计网页效果图，总体可以分为7个步骤： （1）创建辅助线 在具体设计前，应当考虑到网页的布局形式，可以根据策划阶段确定下来的网页布局草图，在photoshop的画布中添加辅助线，（去掉“这样”）目的是为了明确页面布局形式和面积。 需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够全部创建好的，而是设计哪一部分内容创建哪一部分的辅助线，否则辅助线过多会使页面混乱。 （2）绘制结构底图 根据创建好的辅助线，使用photoshop相应工具把网页效果图中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效果。 这里的“矩形块只是一个统称，可以是任意的形状。除了得到形状以外，还可以直接对这些”矩形块配色，或添加纹理、滤镜，从而在整体上对页面的配色方案进行控制。 （3）添加内容 结构底图绘制完毕后，就可以开始在网页效果图中添加实际的内容了，包括文字和图像，从而完成最终的效果图方案。 添加图像的时候，如何选择最合适的图像素材，如何对图像素材进行处理是非常重要的，可以说网页中图像设计的好坏，直接影响到整体的页面效果。 （4）切片 效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片工具就像是剪刀，使用切片工具可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。 切片的另外一个目的，也是最主要的目的是为了布局的需要。同一个网页效果图，按不同的方式布局就会得到不同的切片，并没有说哪一个才是“标准”的，所以要想灵活运用切片，必须熟悉流行的布局技术。 （5）优化 做Photoshop切片图片时必须要先根据需要的图片的精度，确定导出的格式，一般情况下，作为网页图片要求比较高的情况下，可以选