Web前端基础案例 8

任务9布局学院网站主页Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）网页是由若干版块构成的，就像一张报纸的内容划分为若干版块，各版块经过合理的排版，使版面清晰、易读。在制作网页时，也需要对网页进行“排版”，网页的“排版”是通过布局来实现的。本任务对学院网站中的主页进行布局，将主页划分为多个块，使用HTML5标记定义这些块，并对每个块定义CSS样式进行布局。通过本任务的实现，掌握常用网页的布局方式，实现各种网页布局。9.1任务描述图9-1学院网站主页划分布局块图9-2

布局效果根据学院网站主页效果图，对主页的版块进行划分，如图9-1所示。创建网页，对学院网站的主页进行布局。布局效果如图9-2所示。9.2知识准备9.2.1

HTML5新增结构标记9.2.2HTML5+CSS3布局9.2.1HTML5新增结构标记HTML5中，新增了一些结构标记：<header>、<nav>、<section>、<article>、<aside>和<footer>等，这些标记，可以让网页的整体结构更加直观清晰、更加具有语义性和现代风格。<header>标记表示页面或页面中某一个区块的页眉，通常放置标题，它可以包含页面标题、LOGO图片，搜索表单等，语法格式如下：<header>标记

<header><h1>标题</h1>……</header>9.2.1HTML5新增结构标记9.2.1HTML5新增结构标记<header>标记例如：在学院网站中使用<header>标记定义头部内容，结构代码如下：

<header><imgsrc="images/header.png"alt=""><!--头部中放入图片--></header>效果如图9-3所示：图9-3学院网站中的<header>标记9.2.1HTML5新增结构标记<nav>标记定义页面的导航链接部分区域，引用<nav>标记可以让页面元素的语义更加明确。在一个HTML页面中可以包含多个<nav>标记，但并不是所有的链接都需要包含在<nav>标记中。<nav>标记传统的导航条侧边栏导航内页导航翻页导航通常<nav>标记用于以下几种场合：9.2.1HTML5新增结构标记学院网站导航条用<nav>标记实现的结构代码如下。图9-4学院网站中的<nav>标记如图9-4所示是学院网站导航条的内容。<nav>标记<nav> <ul> <li><ahref="#">网站首页</a></li> <li><ahref="#">学院概况</a></li> <li><ahref="#">新闻中心</a></li> <li><ahref="#">机构设置</a></li> <li><ahref="#">教学科研</a></li> <li><ahref="#">团学在线</a></li> <li><ahref="#">招生就业</a></li> <li><ahref="#">公共服务</a></li> <li><ahref="#">信息公开</a></li> <li><ahref="#">统一信息门户</a></li> </ul></nav><section>标记用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。<section>标记通常用于文章的章节、页眉、页脚或文档中的其他部分。<section>标记注意：如果<article>标记、<aside>标记、<nav>标记更适合我们的使用条件，就不要使用<section>标记。不要为没有标题的内容使用<section>标记。9.2.1HTML5新增结构标记例9-1：用<section>标记定义内容区块

example01.html9.2.1HTML5新增结构标记<section>标记浏览网页，效果如图9-5所示：图9-5<section>标记

<section>标记9.2.1HTML5新增结构标记<article>标记

<article>标记用来定义独立的内容，该元素定义的内容可独立于其他的内容使用。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。除了内容部分，一个<article>标记通常有自己的标题（通常放在一个<header>标记中），有时还有自己的页脚。9.2.1HTML5新增结构标记例9-2用<article>标记定义新闻内容example02.html。

9.2.1HTML5新增结构标记<article>标记浏览网页，效果如图9-6所示。9.2.1HTML5新增结构标记图9-6<article>标记<article>标记在HTML5中，<article>标记可以嵌套使用。<article>标记可以包含多个<section>标记，<section>标记也可以包含多个<article>标记。<article>标记可以被看成是一种特殊类型的<section>标记，它比<section>标记更强调独立性。即<section>标记侧重分段或分块，而article侧重独立性。如果一块内容相对来说比较独立、完整，就应该使用<article>标记；如果想将一块内容分成几段，就应该使用<section>标记。9.2.1HTML5新增结构标记<article>标记例9-3在项目chapter09中再新建一个网页文件，用<article>标记和<section>标记定义新闻内容，文件名：example03.html。

9.2.1HTML5新增结构标记<article>标记浏览网页，效果如图9-7所示。9.2.1HTML5新增结构标记图9-7<article>标记和<section>标记<article>标记<aside>标记9.2.1HTML5新增结构标记<aside>标记主要的使用方法有两种。（1）包含在<article>标记中作为主要内容的附属信息部分，如与当前文章有关的参考资料、名词解释等。（2）在<article>标记之外使用的，作为页面或者站点全局的附属信息，例如，侧边栏、广告、友情链接等。例9-4：用<aside>标记定义网页的侧边栏导航example04.html。

9.2.1HTML5新增结构标记<aside>标记浏览网页，效果如图9-8所示。9.2.1HTML5新增结构标记图9-8<aside>标记<aside>标记<footer>标记<footer>标记用于定义页面或区域的页脚，可以是网站的版权信息、作者、日期及联系信息。一个页面中可以包含多个<footer>标记，也可以在<section>标记或<article>标记中使用<footer>标记。9.2.1HTML5新增结构标记图9-9所示是学院网站页脚部分。图9-9学院网站的页脚部分

学院网站中<footer>标记的结构代码如下。9.2.1HTML5新增结构标记<footer>标记9.2.2HTML5+CSS3布局HTML5+CSS3在布局时首先将页面分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。常用的HTML5+CSS3布局方式有单列布局、两列布局、三列布局和通栏布局等。网页的主体内容宽度现在一般采用1000px～1920px。下面通过示例介绍常用的网页布局方式。9.2.2HTML5+CSS3布局单列布局将页面上的块从上到下依次排列，即单列布局。例9-5：单列布局页面，效果如图9-10所示

example05.html图9-10单列布局页面

代码略。9.2.2HTML5+CSS3布局二列布局单列布局虽然统一、有序，但会让人觉得呆板，所以在实际网页制作中，会采用二列布局。二列布局实际上是将中间内容分成左、右两部分。9.2.2HTML5+CSS3布局二列布局例9-6将页面进行二列布局，效果如图9-11所示，文件名为：example06.html。图9-11二列布局页面

代码略。9.2.2HTML5+CSS3布局二列布局注意：在两列布局中，为右边的块设置了右浮动，实际上也可以设置左浮动，但如果设置左浮动，就需要设置margin-left属性，使其与左边的块间隔一定的距离，最终效果是一样的。读者可以自行尝试。对于内容比较多的网站，有时需要采用三列布局。三列布局实际上是将中间内容分成左、中、右三部分。9.2.2HTML5+CSS3布局三列布局9.2.2HTML5+CSS3布局例9-11将页面进行三列布局，效果如图9-12所示，文件名：example07.html。三列布局图9-12三列布局页面