任务9布局学院网站主页教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务9 布局学院网站主页 Web前端开发案例教程 HTML5+CSS3 微课版 网页是由若干版块构成的，就像一张报纸的内容划分为若干版块，各版块经过合理的排版，使版面清晰、易读。在制作网页时，也需要对网页进行“排版”，网页的“排版”是通过布局来实现的。本任务对学院网站中的主页进行布局，将主页划分为多个块，使用HTML5标记定义这些块，并对每个块定义CSS样式进行布局。通过本任务的实现，掌握常用网页的布局方式，实现各种网页布局。 任务导学 任务3 布局学院网站主页 任务9 任 务 描 述 任务效果 图9-1 学院网站主页划分布局块 图9-2　布局效果 根据学院网站主页效果图，对主页的版块进行划分，如图9-1所示。创建网页，对学院网站的主页进行布局。布局效果如图9-2所示。 知识点 HTML5新增结构标记 01 HTML5+CSS3布局 02 任务3 布局学院网站主页 任务9 知 识 准 备 9.2.1 HTML5新增结构标记 网页布局时通常使用<div>标记定义块，使用CSS设计块的样式。在HTML5中，新增了一些结构标记，使用这些标记表示网页中的块更具有语义性。 这些标记有<header>、<nav>、<section>、<article>、<aside>和<footer>等，它们的作用与块标记相似，运用这些结构标记，可以让网页的整体结构更加直观清晰、更加具有语义性和现代风格。 <header>标记表示页面或页面中某一个区块的页眉，通常放置标题，它可以包含页面标题、LOGO图片，搜索表单等，语法格式如下： <header>标记  <header> <h1>标题</h1> …… </ header> 9.2.1 HTML5新增结构标记 8 9.2.1 HTML5新增结构标记 <header>标记 例如：在学院网站中使用<header>标记定义头部内容，结构代码如下：   <header> <img src="images/header.png" alt=""> <!-- 头部中放入图片 --> </header> 效果如图9-3所示： 图9-3 学院网站中的<header>标记 9 9.2.1 HTML5新增结构标记 <nav>标记定义页面的导航链接部分区域，引用<nav>标记可以让页面元素的语义更加明确。在一个HTML页面中可以包含多个<nav>标记，但并不是所有的链接都需要包含在<nav>标记中。 <nav>标记 传统的导航条 侧边栏导航 内页导航 翻页导航 通常<nav>标记用于以下几种场合： 10 9.2.1 HTML5新增结构标记 学院网站导航条用<nav>标记实现的结构代码如下。 图9-4 学院网站中的<nav>标记 如图9-4所示是学院网站导航条的内容。 <nav>标记 <nav> <ul > <li><a href="#">网站首页</a></li> <li><a href="#">学院概况</a></li> <li><a href="#">新闻中心</a></li> <li><a href="#" >机构设置</a></li> <li><a href="#" >教学科研</a></li> <li><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> <section>标记用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。<section>标记通常用于文章的章节、页眉、页脚或文档中的其他部分。 <section>标记 使用时需注意以下2点： 如果<article>标记、<aside>标记、<nav>标记更适合我们的使用条件，就不要使用<section>标记。 不要为没有标题的内容使用<section>标记。 9.2.1 HTML5新增结构标记 12 例9-1 用<section>标记定义内容区块，文件名为example01.html。 9.2.1 HTML5新增结构标记 <section>标记 浏览网页，效果如图9-5所示： 图9-5 <section>标记 <section>标记 9.2.1 HTML5新增结构标记 <article>标记 <article>标记用来定义独立的内容，该元素定义的内容可独立于其他的内容使用。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。除了内容部分，一个<ar