石家庄网页设计、css+div、网站建设

css+div | css基本语法 | css初体验 | 网页设计软件 | 实用化码 | 网页素材|seo网站优化技术服务

« 网页头部的Doctype的类型声明导致CSS样式定义失效遵循Web标准的网页设计工作流程(一) »

遵循Web标准的网页设计工作流程(二)

昨天介绍了网页设计的工作流程概述,今天开始来看一看具体是如何进行的。

第1步要先想清楚这个网站的内容是什么?通过一个网页要传达给访问者什么信息?这些信息中哪些是最重要的?哪些是相对比较重要的?以及哪些是次要的。这些信息应该如何组织呢? 我们可以参考一些网上商店的网站,比如下图所示的是卓越沿马逊网上商店的首页,读者在研究一些成功网站的时候,不要仅仅关注这些网站的设计风格和技术细节,更要从更深的角度观察它们,这样才能更好地掌握核心的东西。例如从图中可以看到,这个页面尽管内容非常多,但简单来说,就分为两大类——“分类链接”和“推荐商品链接”。

 

这样回到我们自己的网站,比如说,可以确定出需要在首页展示如下一些信息:

  • 网站标题
  • 网站标志
  • 主导航栏
  • 自身介绍和用户帮助的链接
  • 账号登录与购物车
  • 今日推荐商品(1种)
  • 最受欢迎商品(1种)
  • 分类推荐商品(3种)
  • 搜索框
  • 类别菜单
  • 特别提示信息
  • 版权信息

在理解了网站的基础上,我们开始构建网站的内容结构。现在完全不要管CSS,而是完全从网页的内容出发,根据上面列出的要点,通过HTML搭建出网页的内容结构。

如下图所示的是搭建的HTML在没有使用任何CSS设置的情况下,使用浏览器观察的效果。在图中,左侧使用线条表示了各个项目的构成。实际上图中显示的就是前面的图在不使用任何CSS样式时的表现。

 

提示读者一点,任何一个页面,应该进可能保证在不使用CSS的情况下,依然保持良好结构和可读性。这不仅仅对访问者很有帮助,而且可以有助于你的网站被Google、百度这样的搜索引擎了解和收录,这样对于网站提升访问量可是至关重要的。

好了,今天向介绍到这里,明天继续

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Walle Build 100427 Code detection by Codefense  theme by BokeZhuti

Copyright 2006-2009 梦网页设计站点地图   Copyright 2006-2009 冀ICP备08101**号 Some Rights Reserved.欢迎联系梦设计,QQ:819204705.
您可以在河北石家庄梦设计工作室css+div资料站了解到:css+div|css+div布局|css+div排版|SEO|SEO服务|SEO优化|SEO技术|SEO工具|SEO教程|SEO培训|什么是SEO|网站优化|搜索引擎优化等网站资讯