【文档说明】(教学课件)chapter8利用Div+CSS制作网页.pptx，共(36)页，2.438 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2789.html

以下为本文档部分文字说明：

高等教育出版社学习目标➢掌握利用Div+CSS设计制作网页的整体思路➢熟练掌握利用CSS对Div进行定位的方法➢熟练掌握利用CSS设置Div属性的方法网页设计与制作实用教程（第3版）2实训项目深圳慧衡科技有限公司

为了扩展业务需要制作一个公司网站，介绍公司概况、公司文化、产品展示等。网页设计与制作实用教程（第3版）3项目分析网页设计师小高首先进行需求分析，了解公司所要表达的理念、界面显示内容和栏目的要求，确定了网站主页的设计思

路：（1）页面元素：网站banner、导航条（从“方案、技术、服务、设计、案例、培训、合作、慧衡”这8项来介绍公司）、介绍公司业务的一些文字元素、图像等。（2）版面布局：采用“国”字形结构，顶部区域用于装载网站的banner、导航条及横幅广告条；接下来就是主体内容区域，

分为3列，左侧用于装载栏目列表，中间用于装载公司业务信息，右侧用于装载最新博文、联系方式；底部区域装载页脚信息。（3）配色方案：因为是公司网站，所以色彩搭配采用了深蓝色主题，蓝色可以给人“信任、安全、崇高”等

的心理联想，也符合一般人的视觉感官。网页设计与制作实用教程（第3版）4设计目标网页设计与制作实用教程（第3版）5预备知识：WEB标准⚫Web标准提出网页主要由3部分组成：结构、表现和行为，相对应的结构标准为结构化语言，如XHTML和XML；表现标准语言，如CSS；行为标准，包

括对象模型、ECMAScript等。⚫Web标准最显著的特征就是将网页的内容与表现相分离，这就要求网页有良好的文档结构。网页设计与制作实用教程（第3版）6预备知识：认识DIV⚫Div（division）即片段，并无实际的意义，只是一个定

位标志，是块元素的一种。⚫在HTML规范中，元素可分为内联元素（inlineelement）和块元素（blockelement）两种，块元素是其他元素的容器元素，它可以容纳内联元素和其他块元素。⚫在默认情况下，块元素总是从新行开始，高度、宽度以及顶

和底边距度可控制。网页设计与制作实用教程（第3版）7预备知识：认识盒模型⚫填充（padding）：盒子里面的内容到盒子边框的距离。⚫边框（border）：盒子本身的边框，边框可以有多种样式，如实线、虚线或点线等。⚫边界（margin）：盒子边框外和其他

盒子之间的距离，称为边界；边界边是透明的，一般可用它控制元素之间的间隔。网页设计与制作实用教程（第3版）8小试身手预备知识：定位方式1——float定位⚫准确来说，浮动并不是一种用作定位的选项，而是为元素分配一定的空间，然后让文档中的其他部分自动环绕在其周围。网页设计与制作实用教程（第3版）

9小试身手预备知识：定位方式2——position的4种定位模式①absolute（绝对）•如果设置一个Div绝对定位，可以通过设置该元素的top、left值，使其移至坐标（left，top）处，坐标原点是页面的左上角，那么该元素原来占据的空间将消失。•如果某个绝对

定位的Div位于父层Div中，且父层Div也被定位过，那么此时的坐标原点就不是页面的左上角，而是这个父层Div的左上角。网页设计与制作实用教程（第3版）10小试身手预备知识：定位方式2——position的4种定位模式②relative（相对）•如果

设置一个Div相对定位，可以通过设置其top、left值，使其相对于原来它所在的位置向下、向右进行移动，移动的距离就是设置的top、left值。页面中其他的元素不会占据其偏移后留下的空白空间，就像该元素仍在原位一样。网页设计与制作实用教程（

第3版）11小试身手预备知识：定位方式2——position的4种定位模式③static（静态）•如果设置一个Div静态定位，静态定位是Div的默认状态，表示Div保持在原来应该在的位置上，即该值没有任何移动的效果。④fixed（固定）•如果设置一个

Div固定定位，可以通过设置其top、left值，使其固定在显示屏的某个位置上，即使滚动浏览器时，该元素也固定不变，不会跟着移动位置。网页设计与制作实用教程（第3版）12相对定位和绝对定位的比较相对定

位relative绝对定位absolute定位基准以它自己原来的位置为基准以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准原来的位置还占用着原来的位置，未脱离标准流不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样

网页设计与制作实用教程（第3版）13制作流程网页设计与制作实用教程（第3版）14任务1：利用Div构建页面整体框架任务4：利用CSS美化Div任务3：利用CSS定位Div任务2：在Div中插入页面元素任务1——利用DIV构建页面的整体框架网页设计与制作实用教程（

第3版）151创建Div2在“display”Div中嵌套插入子Div在“content”Div中嵌套插入子DivSTEP1：创建DIV网页设计与制作实用教程（第3版）16插入Div，并将其ID定义为banne

r。依次创建Div“navigation”、“display”、“content”、“footer”。STEP2：在“DISPLAY”DIV中嵌套插入子DIV网页设计与制作实用教程（第3版）17在“display”Div中插

入子Div，并将其ID定义为dis-flash。在“display”Div中插入子Div“dis-text”。STEP3：在“CONTENT”DIV中嵌套插入子DIV网页设计与制作实用教程（第3版）18在“content”Div中插入Div，并将其ID定义为con-left。任务2

——在DIV中插入页面元素网页设计与制作实用教程（第3版）191在“banner”Div中插入图像2在“navigation”Div中插入导航条列表3在“display”Div中插入页面元素4在“content”Div中插入页面元素5在“footer”Div中插入页面元素STEP1：在“

BANNER”DIV中插入图像网页设计与制作实用教程（第3版）20在“banner”Div中插入“banner.gif”图像。STEP2：在“NAVIGATION”DIV中插入导航条列表网页设计与制作实用教程（第3版）21在“navigation”Div中插入导航条列表。S

TEP3：在“DISPLAY”DIV中插入页面元素网页设计与制作实用教程（第3版）22在“dis-flash”Div中插入Flash动画。在“dis-text”Div中输入文本。STEP4：在“CONTENT”DIV中插入页面元素网页设计与制作实用教程（第3版）23在“con-lef

t”Div中插入页面元素。在“con-main”Div中插入页面元素。在“con-right”Div中插入页面元素。STEP5：在“FOOTER”DIV中插入页面元素网页设计与制作实用教程（第3版）24在“footer”Di

v中插入页面元素。任务3——利用CSS定位DIV网页设计与制作实用教程（第3版）251定位“banner”、“navigation”、“display”及“content”Div居中对齐2定位“footer”Div，设置宽度值为100%3定位“display”Div中的“di

s-flash”Div与“dis-text”Div两列布局4定位“content”Div中3个Div子元素呈三列布局STEP1：定位“BANNER”、“NAVIGATION”、“DISPLAY”及“CONTENT”DIV居中对齐网页设计与制作实用教程（第3版）26设置“

banner”Div的width、height、padding及margin值，使其居中显示。设置“navigation”Div的width、height、padding、margin值，使其居中显示。设置“display”Div的width、height、padding、margin值

，使其居中显示。设置“content”Div的width、height、padding和margin值，使其居中显示。STEP2：定位“FOOTER”DIV，设置宽度值为100%网页设计与制作实用教程（第3版）27设置“footer”Div的width值为100%。STEP3：定位“

DISPLAY”DIV中的“DIS-FLASH”DIV与“DIS-TEXT”DIV两列布局网页设计与制作实用教程（第3版）28设置“dis-flash”Div的属性值，使其浮动左对齐。设置“dis-text”Div的属性值，使其浮动右对齐

。设置“content”Div的“clear”属性值。STEP4：定位“CONTENT”DIV中3个DIV子元素呈三列布局网页设计与制作实用教程（第3版）29设置“con-left”Div的width、height、padding及margin值。设

置“con-main”Div为相对定位，使其定位在“con-left”Div的右侧。设置“con-right”Div为相对定位，使其定位在“con-main”Div的右侧。任务4——利用CSS美化DIV以及其中的页面元素网页设计与制作实用教程（第3版）301在“navigati

on”Div中制作水平导航条2为“display”Div设置背景3美化“content”Div中的页面元素4为“footer”Div设置上边框及背景颜色STEP1：在“NAVIGATION”DIV中制作水平导航条网页设计与制作实用教程（第3版）31为“navigation”Div设置

背景。制作水平导航条。STEP2：为“DISPLAY”DIV设置背景为“display”Div设置背景。网页设计与制作实用教程（第3版）32设置“con-leftone”Div的圆角背景。设置“con-lefttwo”的圆角背景。美化“con-main”Div中的文本。设置“con-r

ightone”、“con-righttwo”、“con-rightthree”Div的圆角背景。STEP3：美化“CONTENT”DIV中的页面元素网页设计与制作实用教程（第3版）33STEP4：为“FOOTER”DIV设置上边框及背景颜色为“footer

”Div设置上边框及背景颜色。网页设计与制作实用教程（第3版）34项目总结网页设计与制作实用教程（第3版）35课后练习1.配套实训利用配套实训文件夹下提供的素材文件，根据所学的Div、CSS及前面知识，设计与制作一个介绍动画《全职猎人》的网页。要求如下：➢利用Div对页面进行

布局。➢使用CSS样式美化Div及页面元素。2.同步测试通过教材第8章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）