第31章 项目实战-PC端固定布局[2]

2017年10月6日07:00:53 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.大纲算法

在 HTML5 中有一个很重要的概念,叫做 HTML5 大纲算法(HTML5 Outliner),它的用途是为用户提供一份页面的信息结构目录。 比如我们经常使用的手册就是一个非常好的大纲结构:

合理的使用 HTML5 元素标签,可以生成一个非常清晰的文档大纲,我们可以通过各种工具去查看当前页面,比如谷歌和火狐的插件可以查看当前的 HTML5 大纲。这里我们推荐使用一个服务器端的测试工具:HTML 5 Outliner,网址如下:

测试工具:https://gsnedders.html5.org/outliner/

这个工具可以上传本地 html 文件,也可以填写 URL,或者直接在多行文本框上编写HTML5 代码均可了解大纲。

通过我们将上一节课的代码编写, 发现这个页面的大纲非常的难看, 出现三个Untitled Section,这个意思表示页面此处缺少大纲标题,不规范。如果你的页面在这里测试,大纲都比较清晰,那么 HTML5 页面是比较规范的。

//大纲目录结构

1.Untitled Section
    1.Untitled Section
        1.瓢城旅行社
    2.Untitled Section

二.section 和 div

首先,我们暂不探讨怎么让 html5 页面大纲合乎规范。先探讨一下 section 和 div 的区别。

div 元素在 html5 之前就是非常常用的标签,它本身没有任何语义,用来页面布局和CSS 样式以及 JS 调用。那么,div 的用途已经说的很清楚了:

1.如果是页面布局,且不是 header、footer 之类的专属区域,都应该使用 div;

2.如果只是单纯的对一个端内容进行 CSS 样式定义,那么也应该使用 div;

3.如果想对一段内容进行 JS 控制,那么也应该使用 div。

html5 中,section 并不是用来取代 div 的。在基础课程中已经简单的了解过,它是具有语义的文档标签。表示一段文档中的章节,比如包含一个标题和一个段落,而大纲规范中,至少要包含一个标题。

//section 至少需要一个 h1 ~ h6

<section>
    <h2>Bootstrap</h2>
    <p>Bootstrap 是一款 html5 开源框架</p>
</section>

通过上诉说明,我们对于下方的 section 标签,增加一个 h2 即可实现大纲要求。最终大纲变成如下结构:

//大纲目录结构

1.Untitled Section
    1.Untitled Section
        1.瓢城旅行社
    2.波特四抓

那么发现最后一个 Untitled Section 已经拥有了标题,已经符合规范。对于前面还有两个,待会儿再说。现在再探讨一个问题,既然 div 用于没有任何语义的布局和样式定义,那么我们就需要探讨一下如下代码用 div 还是 section。

//这里改用 section 还是 div 呢?

<section class="center">
    <h1 class="logo">瓢城旅行社</h1>
    <ul class="link">
        <li class="active"><a href="###">首页</a></li>
        <li><a href="###">旅游资讯</a></li>
        <li><a href="###">机票订购</a></li>
        <li><a href="###">风景欣赏</a></li>
        <li><a href="###">公司简介</a></li>
    </ul>
</section>

从结构上来看,section 需要包含至少一个 h1 ~ h6,这里是符合的。但容易混淆的部分是,section 是某个区域章节的标题,h1 其实是整个网站的标题。而 ul 部分是导航超链接,严格来讲,也不算章节的内容。最重要的是这块的 section 用于的布局样式定义,所以我个人认为这里使用 div 更加妥当一些。注:section 本身使用频率并不是很高,而section 并不是代替div 的元素。

//比较合理的做法

<div class="center">
    <h1 class="logo">瓢城旅行社</h1>
    <ul class="link">
        <li class="active"><a href="###">首页</a></li>
        <li><a href="###">旅游资讯</a></li>
        <li><a href="###">机票订购</a></li>
        <li><a href="###">风景欣赏</a></li>
        <li><a href="###">公司简介</a></li>
    </ul>
</div>

这里大纲进行了一个很有趣的变化,如下:

//改变后的大纲

1.Untitled Section
    1.瓢城旅行社
    2.波特四抓

通过目前的大纲,我们可以了解到,还剩一个标题就可以实现完美大纲。这个剩下的标题是哪个元素下的呢?答案是:body 元素。我们只要在 body 元素下创建一个 h1,写上标题名称,即可。

//增加 body 标题,解决大纲问题

<body>
    <h1>Body 大标题</h1>
    ...
</body>

虽然在 body 增加标题解决了大纲问题, 但问题是我们本身页面设计根本不需要在 body创建一个 h1 啊。难道创建后,再隐藏这种多此一举的方法吗?这个问题,稍后再看,先再探讨一下头部的结构问题。

三.结构分析

首先,探讨一下 nav 元素。这个元素本质上是用来存放一组作为导航的链接,比如 ul。我们第一节课,把整个头部全部存放进去,显得不是特别合理,所以,最好在 ul 的外围。而 LOGO + 导航,我们可以理解为 header 头部,所以,最终改写成如下结构:

//头部元素换成了 header,nav 元素只包含 ul

<header id="header">
    <div class="center">
        <h1 class="logo">瓢城旅行社</h1>
        <nav class="link">
            <ul>
                <li class="active"><a href="###">首页</a></li>
                <li><a href="###">旅游资讯</a></li>
                <li><a href="###">机票订购</a></li>
                <li><a href="###">风景欣赏</a></li>
                <li><a href="###">公司简介</a></li>
            </ul>
        </nav>
    </div>
</header>

在去掉<body><h1>...</h1></body>的情况下,我们发现,这种结构的主标题大纲居然是:瓢城旅行社。而<nav>下则又出现一个 Untitled Section,由此可得到几个结论:

1.header 元素不需要强制标题 h1 ~ h6,如果有标题,算 body 的。这样主大纲标题就有了;

2.section 和 nav 元素大纲要求有标题 h1 ~ h6,但 section 必须有才规范,而 nav如果没有标题,也是合理的。当然,添加上标题会让大纲更加好看,页面中可以隐藏。

//最终格式如下:

<header id="nav">
    <div class="center">
        <h1 class="logo">瓢城旅行社</h1>
        <nav class="link">
            <h2 class="none">网站导航</h2>
            <ul>
                <li class="active"><a href="###">首页</a></li>
                <li><a href="###">旅游资讯</a></li>
                <li><a href="###">机票订购</a></li>
                <li><a href="###">风景欣赏</a></li>
                <li><a href="###">公司简介</a></li>
            </ul>
        </nav>
    </div>
</header>

根据改变的元素内容,适当更改一下 CSS 即可。

注:本章为第42课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: