咨询,就免费赠送域名与服务器,咨询热线:13670727658当前位置: 主页 > 建站知识 > 网站建设知识 >
推荐内容
联系我们
电话咨询:18261388958
E-mail:97318091#qq.com
地址: 连云港市新浦区通灌南路58号银城国际旺角铭座706室

连云港网站建设公司分析规范的网页设计该如何

作者/整理:开创网络公司 来源:互联网 2017-03-04

任何一位网页设计者在接到一个WEB设计任务时,无论在设计草图还是在编写代码时不可避免的都有一个web逻辑机构的问题:网页如何布局?当然,这也是一个最简单的问题,因为无论结果如何答案无非是头部、内容、侧栏、底部几个“盒子(Box)”的集合。
 
但是,就是这么一个简单的问题在网页设计的进行中,随着网站越来越庞大交错,其问题也就会变得越来越复杂。
 
我们可以在互联网上看到很多实例,看看其他网站是如何布局并使用标签的。面对无数网页设计者的五花八门的布局方式及标签使用,WonderCSS总结出一套最规范的网页布局方式,并结合HTML5的新标签的逻辑含义来对网页进行合理的布局。
 下来我们结合HTML5标签来谈谈网页设计的布局。

为整个页面添加“容器”标签

如果将整个页面视为一个房间我们需要为这个房间的最外延做个标签,以便罩住、囊括所以页面元素。简单的说就是在body内设置一个最外层“div”,有了它我们可以控制整张网页的位置——居左、居右、居中。

同时我们在样式考虑上也有了更丰富的选择,比如可以做双层背景(body为第一层),也可以为页面添加白边。更重要的一点,在涉及到响应式布局时,这个最外层的box可以精确有效的控制整体页面尺寸。

在标签的命名上可以最直观的标写 <div id=”page”> ,还有很多人习惯命名为 main ,但在这里我们建议将main用于套用 Content 和 Sidebar之外(如果有需要)。

用 <Header> 定义页面的页眉部分

网页的顶部部分我们通常叫他head或header,在其中主要包含着网站名称、LOGO、主导航、Banner内容。在代码编写时,以往我们都使用 <div id=”header”> 来定义网页的头文件部分,如今HTML5直接提出了 <header> 标签来更直观的告诉web开发者与搜索引擎:这里是相对父级的头部/顶部/页眉部分。

header标签可以在页面里重复出现,因为它可以是整个页面的头部信息,也可以是 <article> 的头部文件。因此我们有必要为作为页面布局的header标签命名为 id=”masthead” 或其他。

页面顶部部分涉及到html5新标签中,我们时常会用到 <hgroup> 和 <nav>。hgroup标签用于整合网站名称及描述内容,nav标签很直观,就是一位我们写惯了的 <div id=”nav”>,在逻辑上指明了这一部分是导航/菜单。


<header id="masthead">
     <hgroup>
          <h1>网站名称</h1>
          <h2>网站描述</h2>
     </hgroup>
     <nav id="main-menu">
          <a href=/news/zhishi/"/">导航1</a>_br/index.html />      </nav>
</header>

用 “Content” 命名页面的主要内容部分

每个页面都有它的主题部分,比如文章详细页面里的文章内容部分、列表页的文章标题列表。对于这部分内容html5为我们提供了 <article> 标签,但落实在页面设计中不可主题部分只有“内容”那么简单,往往还包括路径面包屑、广告位、评论等内容,这时我们可以单独设置一个 <div=”content”> 来定义它为页面内容部分。

页面的主要内容依据不同层次的页面,其内容各自不同。尤其在网站的首页面时,一些CMS类页面内结构复杂,内部由多个“部分”组成。每一块内容我们可以使用 <section> 标签定义。

而 <article> 标签我们用于定义页面内的主题内容,比如文章页面的详细内容,包括标题、描述、文章段落等元素。

用 “Sidebar” 命名页面的辅助信息部分

Sidebar是页面布局中我们熟悉的部分,我们叫它“侧栏”或“边栏”,它往往是页面的可选部分。Sidebar内放置的是相对于Content的相关内容或辅助内容,如“最新文章” “热门文章”等。

html5的新标签 <aside> 代表与页面内容相关、有别于主要内容的部分。在页面布局中 aside 标签是侧栏中的单位,每一个 aside 内往往会标有一个标题来表明这部分内容的标题(title)。通常这个标题我们用 h3 来定义。


<div id="sidebar">
     <aside>
          <h3>关于WonderCSS</h3>
          <p>
               WonderCSS专注于网站前端用户体验,为您提供专业的Wordpress主题、DedeCMS模板等网站建设服务。
          </p>
     </aside>
     <aside>
          <h3>最新文章</h3>
          <ul>
               <li> <>
          </ul>
     </aside>
</header>

用 <Footer> 定义页面的页脚部分

了解了header标签之后我们就不难了解footer标签了,它是相对于父级的底部/页脚部分。由于网站底部内容主要是体现版权类信息所以我们可以为footer标签命名为“colophon”。

当然你也许会看到很多网站底部拥有很丰富的内容,比如关于我们、联系方式等辅助内容,但很多时候我们将这部分内容算做另一个Sidebar,只不过在布局方式上不在左右排列,而是在下面而已。

最后我们要解释一个问题,为什么要规范网页布局的标签使用及命名?

首先html5提出了标签逻辑化,在标签本身已经规范了内容的使用,无论在页面体验还是搜索引擎亲和方面都是大势所趋。其次,对于一个网站的代码编写,尤其是结构复杂的大项目难免涉及到多人合作、接替的工作内容,因此规范化的使用标签及命名能更好的让多人“兼容”在一起,减少因工作交接而耽搁的工作进程时间。由此做好布局的规范工作不单单是开发者“个人”的事情。 
本文由连云港做网站公司-连云港开创网络公司转载自wondercss!