网设计标准流程

1、遵循Web标准的网页设计工作流程(一)一.问题:在实际开发一个网站的时候，具体是按照什么工作流程进行工作的，一个网站到底是如何从零开始一点点做出来的呢?二.步骤:可以把一个页面的完整设计过程分为7个步骤，如下图所示。在图中，这这个过程程分为了了7个步步骤，并并且说明明了这77个步骤骤相应使使用的工工具。这这7个步步骤依次次为：1. 内容容分析：仔细研研究需要要在网页页中的展展现的内内容，梳梳理其中中的逻辑辑关系，分分清层次次，以及及重要程程度。2. 结构构设计：根据内内容分析析的成果果，搭建建出合理理的HTTML结结构，保保证在没没有任何何CSSS样式的的情况下下，在浏浏览器保保持高可可读性。

2、3. 原型型设计：根据网网页的结结构，绘绘制出原原型线框框图，对对页面进进行合理理的分区区的布局局，原型型线框图图是设计计负责人人与客户户交流的的最佳媒媒介。4. 方案案设计：在确定定的原型型线框图图基础上上，使用用美工软软件，设设计出具具有良好好视觉效效果的页页面设计计方法。5. 布局局设计：使用HHTMLL和CSSS对页页面进行行布局。6. 视觉觉设计：使用CCSS并并配合美美工设计计元素，完完成由设设计方法法到网页页的转化化。7. 交互互设计：为网页页增添交交互效果果，如鼠鼠标指针针经过时时的一些些特效等等。三.实例:要设计计出一个个如下图图所示的的页面。这这是为一一个假想想的名为为“B

3、aaby Houusinng”的的儿童用用品网上上商店制制作的一一个网站站首页。 遵循循Webb标准的的网页设设计工作作流程(二)一.要先想想清楚这这个网站站的内容容是什么么？通过过一个网网页要传传达给访访问者什什么信息息？这些些信息中中哪些是是最重要要的？哪哪些是相相对比较较重要的的？以及及哪些是是次要的的。这些些信息应应该如何何组织呢呢？ 我我们可以以参考一一些网上上商店的的网站，比比如下图图所示的的是卓越越沿马逊逊网上商商店的首首页，读读者在研研究一些些成功网网站的时时候，不不要仅仅仅关注这这些网站站的设计计风格和和技术细细节，更更要从更更深的角角度观察察它们，这这样才能能更好地地掌握核

4、核心的东东西。例例如从图图中可以以看到，这这个页面面尽管内内容非常常多，但但简单来来说，就就分为两两大类“分分类链接接”和“推推荐商品品链接”。这样回到我我们自己己的网站站，比如如说，可可以确定定出需要要在首页页展示如如下一些些信息：网站标题 网站标志 主导航栏 自身介绍和和用户帮帮助的链链接 账号登录与与购物车车 今日推荐商商品（11种） 最受欢迎商商品（11种） 分类推荐商商品（33种） 搜索框 类别菜单 特别提示信信息 版权信息 在理解了网网站的基基础上，我我们开始始构建网网站的内内容结构构。现在在完全不不要管CCSS，而而是完全全从网页页的内容容出发，根根据上面面列出的的要点，通通过H

5、TTML搭搭建出网网页的内内容结构构。如下图所示示的是搭搭建的HHTMLL在没有有使用任任何CSSS设置置的情况况下，使使用浏览览器观察察的效果果。在图图中，左左侧使用用线条表表示了各各个项目目的构成成。实际际上图中中显示的的就是前前面的图图在不使使用任何何CSSS样式时时的表现现。提示读者一一点，任任何一个个页面，应应该尽可能保保证在不不使用CCSS的的情况下下，依然然保持良良好结构构和可读读性。这这不仅仅仅对访问问者很有有帮助，而而且可以以有助于于你的网网站被GGooggle、百百度这样样的搜索索引擎了了解和收收录，这这样对于于网站提提升访问问量可是是至关重重要的。 遵遵循Weeb标准准的

6、网页页设计工工作流程程(三)在设计任何何一个网网页之前前，都应应该先有有一个构构思的过过程，对对网站的的完整功功能和内内容作一一个全面面的分析析。如果果有条件件，应该该制作出出线框图图，这个个过程专专业上称称为“原原型设计计”，例例如，在在具体制制作页面面之前，我我们就可可以先设设计一个个如下图图所示的的网页原原型线框框图。网页原型设设计也是是分步骤骤实现的的，先把把一个页页面分为为若干个个大部分分，然后后分别逐逐步细化化。如果是为客客户设计计的网页页，那么么使用原原型线框框图与客客户交流流沟通是是最合适适的方式式，既可可以清晰晰地表明明设计思思路，又又不用花花费大量量的绘制制时间，因因为原型

7、型设计阶阶段，往往往要经经过反复复修改，如如果每次次都使用用完成以以后的设设计图交交流，则则反复修修改需要要大量的的时间和和工作量量，而且且在设计计的开始始阶段，往往往交流流沟通的的中心并并不是涉涉及的细细节，而而是功能能、结构构等策略略性的问问题，因因此使用用这种线线框图示示非常合合适的。这里向读者者推荐一一种绘制制圆形线线框图非非常方便便的软件件“AAxurre RRP”，这这个软件件是专门门用来作作原型设设计的，而而且可以以方便地地设计动动态过程程的原型型，读者者有兴趣趣可以实实践一下下。这个个软件的的网址是是：htttp:/m/。这这个软件件目前没没有中文文版。如果没有AAxurre

8、RRP这样样的软件件，普通通的绘图图软件，例例如微软软公司的的Vissio，AAdobbe公司司的Fiirewworkks、甚甚至Phhotooshoop等软软件，都都可以胜胜任。在与客户讨讨论，确确定了原原型以后后，可以以进行实实际的页页面方案案设计了了，这一一步通常常使用PPhottoshhop或或者Fiirewworkks等软软件完成成。如下下图所示示的是在在Firrewoorkss中的效效果。！ 遵循WWeb标标准的网网页设计计工作流流程(四四)下面应该进进行的步步骤是页页面布局局这一步步骤，任任务是把把各种元元素放到到适当的的位置，暂暂时不用用涉及非非常细节节的因素素。具体来说，首首

9、先应该该对页面面的整体体进行一一些设置置，把个个各种浏浏览器中中默认值值不同的的元素属属性都设设置为统统一的值值等等，以以保证这这些内容容在各个个浏览器器中有相相同表现现。接下来就依依次对网网页的各各个部分分进行布布局设置置，入页页头、中中间部分分、页脚脚等等，此此时的主主要任务务是把位位置定好好，例如如下图中中，可以以看到，网网页中间间的内容容已经实实现了两两列布局局的效果果，而具具体的样样式细节节还没有有设置。在各个部分分布局完完成以后后，就开开始对每每个部分分依次设设置视觉觉细节效效果，例例如在页页面的页页头部分分，就可可以如图图下所示示地在FFireeworrks中中进行切切片，把把需

10、要的的图像切切出来。在例如，在在网页右右侧的圆圆角框，也也是在这这一步中中实现的的，如下下图所示示。此外还有很很多细节节都需要要仔细设设置，例例如圆角角框中的的目录列列表、搜搜索表单单等等，这这些设置置就都是是只涉及及局部的的样式了了。从图图中可以以看到，到到这里已已经接近近胜利了了。 遵循循Webb标准的的网页设设计工作作流程(五)接下来我们们进行一一些交互互性的动动态设计计，这里里主要是是为网页页元素增增加鼠标标经过时时的效果果。如下下图所示示，在鼠鼠标指针针经过主主导航栏栏和次导导航栏的的时候，相相应的菜菜单项会会发生变变化，鼠鼠标经过过“登录录帐号”或或者“购购物车”图图像时，颜颜色也

11、会会变浅，这这都是为为了提示示用户所所进行的的选择。此此外，当当鼠标经经过图像像时，图图像周围围的边框框也会发发变化。到这里，这这个页面面的静态态设计就就算完成成了，接接下来还还需要进进行相应应程序的的开发，无无论是由由程序员员进行开开发，还还是使用用CMSS系统，都都应该相相关的开开发人员员来继续续工作了了，设计计师的工工作到这这里基本本就结束束了。希望读者可可以通过过5天来来的讲解解，对网网页设计计从无到到有，从从策划构构思到设设计实施施，有一一个比较较完整的的概念了了！最后，谈一一谈使用用这种方方法设计计出来页页面具有有哪些优优点。做做到这里里，读者者可能还还没有完完全意识识到使用用这种

12、CCSS进进行布局局的优点点。这种种布局方方式的最最大优点点是非常常灵活，可可以方便便地扩展展和调整整。例如如，当网网站随着着业务的的发展，需需要在页页面中增增加一些些内容，那那么不需需要修改改CSSS样式，只只需要简简单地在在HTMML中增增加相应应的模块块就可以以了。如下图所示示的就是是对页面面扩展了了内容以以后的效效果，在在“主要要内容”部部分，增增加了“特特色促销销”和“优优中选优优”两个个模块，再再右侧栏栏中增加加了“送送货服务务”和“热热门信息息”两个个模块，在在前面的的页面基基础上，增增加这些些内容之之需要几几分钟的的时间就就可以完完成。不但如此，充充分设计计合理的的页面，可可以非常常灵活地地修改样样