任务10布局学院网站主页_第1页
任务10布局学院网站主页_第2页
任务10布局学院网站主页_第3页
任务10布局学院网站主页_第4页
任务10布局学院网站主页_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务10布局学院网站主页Web前端开发案例教程HTML5+CSS3项目式微课版网页是由若干版块构成的，就像一张报纸的内容划分为若干版块，各版块经过合理的排版，使版面清晰、易读。在制作网页时，也需要对网页进行“排版”，网页的“排版”是通过布局来实现的。本任务对学院网站中的主页进行布局，将主页划分为多个块，使用HTML5标记定义这些块，并对每个块定义CSS样式进行布局。通过本任务的实现，掌握常用网页的布局方式，实现各种网页布局。任务3布局学院网站主页任务10任务效果

学院网站主页划分布局块

布局效果根据学院网站主页效果图，对主页的版块进行划分，如左图所示。创建网页，对学院网站的主页进行布局。布局效果如右图所示。知识点

单列布局01

两列布局02

三列布局03

通栏布局01任务3布局学院网站主页任务1010.2知识准备HTML5+CSS3在布局时首先将页面分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。常用的HTML5+CSS3布局方式有单列布局、两列布局、三列布局和通栏布局等。网页的主体内容宽度现在一般采用1000px～1920px。下面通过示例介绍常用的网页布局方式。10.2.1单列布局单列布局将页面上的块从上到下依次排列，即单列布局。例10-1将页面进行单列布局，效果如图所示，文件名：example01.html。

单列布局页面

单列布局10.2.1单列布局样式表文件style1.css，代码如下。单列布局10.2.1单列布局注意：通常给块定义类选择器名称时，都会遵循一些常用的命名规范。案例中的命名便是按照规范命名的。10.2.2二列布局二列布局单列布局虽然统一、有序，但会让人觉得呆板，所以在实际网页制作中，会采用二列布局。二列布局实际上是将中间内容分成左、右两部分。10.2.2二列布局二列布局例10-2将页面进行二列布局，效果如图所示，文件名为：example02.html。

二列布局页面

页面的HTML结构代码如下。10.2.2二列布局二列布局外部样式表文件style2.css，代码如下。10.2.2二列布局二列布局10.2.2二列布局二列布局注意：在上面的代码中，为右边的块设置了右浮动，实际上也可以设置左浮动，但如果设置左浮动，就需要设置margin-left属性，使其与左边的块间隔一定的距离，最终效果是一样的。读者可以自行尝试。对于内容比较多的网站，有时需要采用三列布局。三列布局实际上是将中间内容分成左、中、右三部分。10.2.3三列布局三列布局10.2.3三列布局例10-3将页面进行三列布局，效果如图所示，文件名：example03.html。三列布局

三列布局页面

10.2.3三列布局页面的HTML结构代码如下：三列布局10.2.3三列布局外部样式表文件style3.css，代码如下：三列布局注意：因为很多浏览器在显示未指定width属性的浮动元素时会出现Bug。所以，一定要为浮动的元素指定width属性。现在很多流行的网站采用通栏布局，即网页中的一些模块，如头部、导航和页面底部等经常需要通栏显示。也就是说这些模块无论页面放大或缩小，这些通栏模块的宽度始终保持与浏览器一样的宽度。10.2.4通栏布局通栏布局

学院网站的布局就采用了该种布局，如图所示。10.2.4通栏布局通栏布局

通栏布局页面

导航栏和页面底部为通栏显示，它们与浏览器的宽度保持一致。通栏布局的关键在于在通栏模块的宽度设置为100%，即与浏览器一样宽。该布局页面在10.3节任务中实现。前面所讲的布局是网页中的基本布局，实际上，在设计网站时需要综合运用这几种布局，实现各种各样的网页布局样式。10.2.4通栏布局通栏布局任务3布局学院网站主页任务1010.3.1搭建布局块结构在项目chapter10中再新建一个网页文件，文件名：index.html，在文件中首先定义页面布局的结构，然后定义各个布局块的样式。分析学院网站主页布局页面效果，该页面采用的是通栏布局。先搭建该页面的结构。单击文件index.html，打开该文件，添加页面结构代码如下。页面结构10.3.1搭建布局块结构上述代码定义了网页需要的布局块，用<header>标记放置页面头部内容，用<nav>标记构建页面导航，用<footer>标记存放页脚信息，其它块使用<div>标记。此时浏览网页，效果如图所示。10.3.1搭建布局块结构页面结构没有添加样式的页面

搭建页面布局块后，使用CSS外部样式表设置页面中各个块的样式，创建外部样式表文件style.css，在index.html文件的<head>标记内添加如下代码，将外部样式表文件链接到页面文件中。10.3.2定义布局块CSS样式<linkhref="style.css"rel="stylesheet"type="text/css"/>

样式定义10.3.2定义布局块CSS样式样式定义样式表文件代码如下。10.3.2定义布局块CSS样式样式定义浏览网页，效果如图所示。学院网站主页采用通栏布局，目前采用这种

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论