《网页设计流程》由会员分享，可在线阅读，更多相关《网页设计流程（18页珍藏版）》请在金锄头文库上搜索。
1、网页设计流程,李文兢,案例描述,网站的开发过程,网站的开发过程大致可分为5个阶段： 策划与分析、设计、开发、测试、发布 在网站开发的每一个阶段，都需要相关各方人员的共同合作，包括客户、设计师和编程开发人员等不同角色,网站开发过程的各环节,遵循Web标准的网页设计步骤,步骤 工具,内容分析,结构设计,原型设计,效果图设计,布局设计,视觉设计,交互设计,铅笔,纸,橡皮,HTML,Axure RP,Visio,Fireworks,Word,Fireworks,Photoshop,CSS,HTML,CSS,HTML,Fireworks,Photoshop,CSS,JavaScript,DreamWea
2、ver,网页设计是网站开发中耗时最多，也是最为关键的一个环节，下面介绍的是从零开始遵循Web标准的理念设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤：,遵循Web标准的网页设计步骤,内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。 结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高度可读性。 原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。 效果图设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的
3、图片。 布局设计：使用HTML和CSS对页面进行布局。 视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。 交互设计：为网页增添交互效果，如鼠标指针经过和点击时的一些特效等。,一、内容分析,参考已有的网站 明确网页的内容，如网页需要传递给浏览者的信息，各种信息的重要性，各种信息的组织架构等。以“信息与网络中心”首页为例进行说明。 对于这个页面，首先要有明确的网站名称和标志（logo），此外，要使浏览者能方便地了解这个网站所有者的信息，包括指向自身的介绍（“关于我们”）、联系方式等内容的链接。然后再思考制作这个网站的目的是什么，因为这个网站的根本目的是为了对外宣传网络中心这个部
4、门，给全校师生员工提供更便捷的网络和信息化服务，实现数字化校园，信息化教学。那么这些目的就是该网站的定位。 根据网站的定位确定该网站具有的栏目结构，并把每个第一级栏目的标题作为导航条的导航项。,二、 HTML结构设计,使用具有一定含义的标记，如 任何一个页面，应该尽可能保证在不使用CSS的情况下，依然保持良好的结构和可读性。这不仅仅对访问者有帮助，而且有助于被搜索引擎收录。 当有若干个项目并列时，是较好的选择。,三、原型设计,首页,二级页面,内页,四、效果图设计,五、布局设计,在这一步中，任务是把各种元素通过CSS布局放到适当的位置，而暂时不涉及对页面元素美化这样细节的因素 1. 整体样式设计
5、 首先对整个页面的共有属性进行一些设置，例如字体、margin、padding等属性都进行初始设置，以保证这些内容在各个浏览器中有相同的表现 2. 页头部分 #header部分的代码中，将position属性设置为relative，目的是使其包含的子元素使用绝对定位时，以页头而不是浏览器窗口为定位基准，然后设定它的宽度width等于网页的宽。 3. 内容部分 在原型线框图中，内容部分为左右两列，下面首先对HTML代码进行改造，然后设置相应的CSS代码，实现左右分栏的要求 4. 页脚部分 为页脚部分增加一个div，并将其id名称设置为“footer”,六、视觉设计,页面总体的布局设计完成后，就要
6、开始对细节进行设计了，整个设计过程是按照从内容到形式，逐步细化的思想来进行的。视觉设计主要是使用Fireworks切图再把切好的图放置到页面元素的背景中实现的,用图像替换标题文字的方法,可以看到图像已经出现在正确的位置，但是原来的标题文字还在上面，这时为了隐藏原来的文字，需要在HTML中为文字套一层标记，代码如下： 信息与网络中心 然后在CSS中通过display属性将它隐藏起来，代码如下： #header h1 span display: none; 这样标题部分的视觉设计就设置完成了。对标题文字进行图像替换最核心的作用就是在HTML代码中仍然保留h1元素的文字信息，这样对于网页的维护和结构
7、完整都有很大好处，同时对搜索引擎的优化也有很大的意义,左侧列和右侧列的视觉设计,七、交互效果设计,1. 为“常用下载” 设置鼠标经过时效果 #sidebar .downbox li a:hover background: #ffeeee url(images/bullet2.gif) no-repeat 10px center; /* 注意同时改变了背景颜色和作为小图标的背景图像*/ color:#cc6633; /* 改变文字颜色*/ ,七、交互效果设计,2. 当鼠标经过一张展示图片时，图像的边框颜色由土黄色变为蓝色，背景色也由白色变为蓝色,3. 解决IE 6中的bug,总结CSS布局的优点,使用CSS进行布局的最大优点是非常灵活，可以方便地扩展和调整。例如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改CSS样式，只需要简单地在HTML中增加相应的结构模块就可以了。,总结CSS布局的优点,不但如此，设计得足够合理的页面可以非常灵活地修改样式。例如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页面，如图所示。可以看到左右两列交换了位置。,
