网页设计标准流程VIP免费

第1页共12页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第1页共12页遵循Web标准的网页设计工作流程(一)一.问题:在实际开发一个网站的时候，具体是按照什么工作流程进行工作的，一个网站到底是如何从零开始一点点做出来的呢?二.步骤:可以把一个页面的完整设计过程分为7个步骤，如下图所示。在图中，这个过程分为了7个步骤，并且说明了这7个步骤相应使用的工具。这7个步骤依次为：1.内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。2.结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高可读性。3.原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。4.方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。5.布局设计：使用HTML和CSS对页面进行布局。6.视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。7.交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。三.实例:要设计出一个如下图所示的页面。这是为一个假想的名为“BabyHousing”的儿童用品网上商店制作的一个网站首页。第2页共12页第1页共12页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第2页共12页遵循Web标准的网页设计工作流程(二)一.要先想清楚这个网站的内容是什么？通过一个网页要传达给访问者什么信息？这些信息中哪些是最重要的？哪些是相对比较重要的？以及哪些是次要的。这第3页共12页第2页共12页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第3页共12页些信息应该如何组织呢？我们可以参考一些网上商店的网站，比如下图所示的是卓越沿马逊网上商店的首页，读者在研究一些成功网站的时候，不要仅仅关注这些网站的设计风格和技术细节，更要从更深的角度观察它们，这样才能更好地掌握核心的东西。例如从图中可以看到，这个页面尽管内容非常多，但简单来说，就分为两大类——“分类链接”和“推荐商品链接”。这样回到我们自己的网站，比如说，可以确定出需要在首页展示如下一些信息：网站标题网站标志主导航栏自身介绍和用户帮助的链接账号登录与购物车今日推荐商品（1种）最受欢迎商品（1种）分类推荐商品（3种）搜索框类别菜单特别提示信息版权信息在理解了网站的基础上，我们开始构建网站的内容结构。现在完全不要管CSS，而是完全从网页的内容出发，根据上面列出的要点，通过HTML搭建出网页的内容结构。第4页共12页第3页共12页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第4页共12页如下图所示的是搭建的HTML在没有使用任何CSS设置的情况下，使用浏览器观察的效果。在图中，左侧使用线条表示了各个项目的构成。实际上图中显示的就是前面的图在不使用任何CSS样式时的表现。提示读者一点，任何一个页面，应该尽可能保证在不使用CSS的情况下，依然保持良好结构和可读性。这不仅仅对访问者很有帮助，而且可以有助于你的网站被Google、百度这样的搜索引擎了解和收录，这样对于网站提升访问量可是至关重要的。第5页共12页第4页共12页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第5页共12页遵循Web标准的网页设计工作流程(三)在设计任何一个网页之前，都应该先有一个构思的过程，对网站的完整功能和内容作一个全面的分析。如果有条件，应该制作出线框图，这个过程专业上称为“原型设计”，例如，在具体制作页面之前，我们就可以先设计一个如下图所示的网页原型线框图。第6页共12页第5页共12页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第6页共12页网页原型设计也是分步骤实现的，先把一个页面分为若干个大部分，然后分别逐步细化。如果是为客户设计的网页，那么使用原型线框图与客户交流沟通是最合适的方式，既可以清晰地表明设计思路，又不用花费大量的绘制时间，因为原型设计阶段，往往要经过反复修改，如果每次都使用完成以后的...