(教学课件)chapter8利用Div+CSS制作网页

第8章利用Div+CSS设计与制作网页

——制作网站主页计算机工程学院计算机基础教学部第8章利用Div+CSS设计与制作网页

——制作网站主页计学习目标掌握利用Div+CSS设计制作网页的整体思路熟练掌握利用CSS对Div进行定位的方法熟练掌握利用CSS设置Div属性的方法深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）2学习目标掌握利用Div+CSS设计制作网页的整体思路深圳职业实训项目深圳慧衡科技有限公司为了扩展业务需要制作一个公司网站，介绍公司概况、公司文化、产品展示等。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）3实训项目深圳慧衡科技有限公司为了扩展业务需要制作一个公司网站项目分析网页设计师小高首先进行需求分析，了解公司所要表达的理念、界面显示内容和栏目的要求，确定了网站主页的设计思路：（1）页面元素：网站banner、导航条（从“方案、技术、服务、设计、案例、培训、合作、慧衡”这8项来介绍公司）、介绍公司业务的一些文字元素、图像等。（2）版面布局：采用“国”字形结构，顶部区域用于装载网站的banner、导航条及横幅广告条；接下来就是主体内容区域，分为3列，左侧用于装载栏目列表，中间用于装载公司业务信息，右侧用于装载最新博文、联系方式；底部区域装载页脚信息。（3）配色方案：因为是公司网站，所以色彩搭配采用了深蓝色主题，蓝色可以给人“信任、安全、崇高”等的心理联想，也符合一般人的视觉感官。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）4项目分析网页设计师小高首先进行需求分析，了解公司所要表达的理设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院预备知识：Web标准Web标准提出网页主要由3部分组成：结构、表现和行为，相对应的结构标准为结构化语言，如XHTML和XML；表现标准语言，如CSS；行为标准，包括对象模型、ECMAScript等。Web标准最显著的特征就是将网页的内容与表现相分离，这就要求网页有良好的文档结构。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）6预备知识：Web标准Web标准提出网页主要由3部分组成：结构预备知识：认识Div

Div（division）即片段，并无实际的意义，只是一个定位标志，是块元素的一种。在HTML规范中，元素可分为内联元素（inlineelement）和块元素（blockelement）两种，块元素是其他元素的容器元素，它可以容纳内联元素和其他块元素。在默认情况下，块元素总是从新行开始，高度、宽度以及顶和底边距度可控制。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）7预备知识：认识Div

Div（division）即片段，并无预备知识：认识盒模型填充（padding）：盒子里面的内容到盒子边框的距离。边框（border）：盒子本身的边框，边框可以有多种样式，如实线、虚线或点线等。边界（margin）：盒子边框外和其他盒子之间的距离，称为边界；边界边是透明的，一般可用它控制元素之间的间隔。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）8小试身手预备知识：认识盒模型填充（padding）：盒子里面的内容到预备知识：定位方式1——float定位

准确来说，浮动并不是一种用作定位的选项，而是为元素分配一定的空间，然后让文档中的其他部分自动环绕在其周围。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）9小试身手预备知识：定位方式1——float定位

准确来说，浮动并不预备知识：定位方式2——position的4种定位模式①absolute（绝对）如果设置一个Div绝对定位，可以通过设置该元素的top、left值，使其移至坐标（left，top）处，坐标原点是页面的左上角，那么该元素原来占据的空间将消失。如果某个绝对定位的Div位于父层Div中，且父层Div也被定位过，那么此时的坐标原点就不是页面的左上角，而是这个父层Div的左上角。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）10小试身手预备知识：定位方式2——position的4种定位模式①预备知识：定位方式2——position的4种定位模式②relative（相对）如果设置一个Div相对定位，可以通过设置其top、left值，使其相对于原来它所在的位置向下、向右进行移动，移动的距离就是设置的top、left值。页面中其他的元素不会占据其偏移后留下的空白空间，就像该元素仍在原位一样。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）11小试身手预备知识：定位方式2——position的4种定位模式②预备知识：定位方式2——position的4种定位模式③static（静态）如果设置一个Div静态定位，静态定位是Div的默认状态，表示Div保持在原来应该在的位置上，即该值没有任何移动的效果。④fixed（固定）如果设置一个Div固定定位，可以通过设置其top、left值，使其固定在显示屏的某个位置上，即使滚动浏览器时，该元素也固定不变，不会跟着移动位置。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）12预备知识：定位方式2——position的4种定位模式③相对定位和绝对定位的比较相对定位relative绝对定位absolute定位基准以它自己原来的位置为基准以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准原来的位置还占用着原来的位置，未脱离标准流不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）13相对定位和绝对定位的比较相对定位绝对定位定位基准以它自己原制作流程网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室14任务1：利用Div构建页面整体框架任务4：利用CSS美化Div任务3：利用CSS定位Div任务2：在Div中插入页面元素制作流程网页设计与制作实用教程（第3版）深圳职业技术学院计任务1——利用Div构建页面的整体框架网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室151创建Div2在“display”Div中嵌套插入子Div在“content”Div中嵌套插入子Div任务1——利用Div构建页面的整体框架网页设计与制作实用教STEP1：创建Div深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）16插入Div，并将其ID定义为banner。依次创建Div“navigation”、“display”、“content”、“footer”。STEP1：创建Div深圳职业技术学院计算机基础教研室网页STEP2：在“display”Div中嵌套插入子Div深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）17在“display”Div中插入子Div，并将其ID定义为dis-flash。在“display”Div中插入子Div“dis-text”。STEP2：在“display”Div中嵌套插入子Div深圳STEP3：在“content”Div中嵌套插入子Div深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）18在“content”Div中插入Div，并将其ID定义为con-left。STEP3：在“content”Div中嵌套插入子Div深圳任务2——在Div中插入页面元素网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室191在“banner”Div中插入图像2在“navigation”Div中插入导航条列表3在“display”Div中插入页面元素4在“content”Div中插入页面元素5在“footer”Div中插入页面元素任务2——在Div中插入页面元素网页设计与制作实用教程（第STEP1：在“banner”Div中插入图像深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）20在“banner”Div中插入“banner.gif”图像。STEP1：在“banner”Div中插入图像深圳职业技术学STEP2：在“navigation”Div中插入导航条列表深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）21在“navigation”Div中插入导航条列表。STEP2：在“navigation”Div中插入导航条列表STEP3：在“display”Div中插入页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）22在“dis-flash”Div中插入Flash动画。在“dis-text”Div中输入文本。STEP3：在“display”Div中插入页面元素深圳职业STEP4：在“content”Div中插入页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）23在“con-left”Div中插入页面元素。在“con-main”Div中插入页面元素。在“con-right”Div中插入页面元素。STEP4：在“content”Div中插入页面元素深圳职业STEP5：在“footer”Div中插入页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）24在“footer”Div中插入页面元素。STEP5：在“footer”Div中插入页面元素深圳职业技任务3——利用CSS定位Div网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室251定位“banner”、“navigation”、“display”及“content”Div居中对齐2定位“footer”Div，设置宽度值为100%3定位“display”Div中的“dis-flash”Div与“dis-text”Div两列布局4定位“content”Div中3个Div子元素呈三列布局任务3——利用CSS定位Div网页设计与制作实用教程（第3STEP1：定位“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值，使其居中显示。STEP1：定位“banner”、“navigation”、STEP2：定位“footer”Div，设置宽度值为100%深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）27设置“footer”Div的width值为100%。STEP2：定位“footer”Div，设置宽度值为100%STEP3：定位“display”Div中的“dis-flash”Div与“dis-text”Div两列布局深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）28设置“dis-flash”Div的属性值，使其浮动左对齐。设置“dis-text”Div的属性值，使其浮动右对齐。设置“content”Div的“clear”属性值。STEP3：定位“display”Div中的“dis-flaSTEP4：定位“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的右侧。STEP4：定位“content”Div中3个Div子元素呈任务4——利用CSS美化Div以及其中的页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）301在“navigation”Div中制作水平导航条2为“display”Div设置背景3美化“content”Div中的页面元素4为“footer”Div设置上边框及背景颜色任务4——利用CSS美化Div以及其中的页面元素深圳职业技STEP1：在“navigation”Div中制作水平导航条深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）31为“navigation”Div设置背景。制作水平导航条。STEP1：在“navigation”Div中制作水平导航条STEP2：为“display”Div设置背景为“display”Div设置背景。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）32STEP2：为“display”Div设置背景为“displ设置“con-leftone”Div的圆角背景。设置“con-lefttwo”的圆角背景。美化“con-main”Div中的文本。设置“con-rightone”、“con-righttwo”、“con-rightthree”Div的圆角背景。STEP3：美化“content”Div中的页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）33设置“con-leftone”Div的圆角背景。STEP3：STEP4：为“footer”Div设置上边框及背景颜色为“footer”Div设置上边框及背景颜色。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）34STEP4：为“footer”Div设置上边框及背景颜色为“项目总结深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）35项目总结深圳职业技术学院计算机基础教研室网页设计与制作实用教课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所学的Div、CSS及前面知识，设计与制作一个介绍动画《全职猎人》的网页。要求如下：利用Div对页面进行布局。使用CSS样式美化Div及页面元素。同步测试

通过教材第8章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所第8章利用Div+CSS设计与制作网页

——制作网站主页计算机工程学院计算机基础教学部第8章利用Div+CSS设计与制作网页

——制作网站主页计学习目标掌握利用Div+CSS设计制作网页的整体思路熟练掌握利用CSS对Div进行定位的方法熟练掌握利用CSS设置Div属性的方法深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）38学习目标掌握利用Div+CSS设计制作网页的整体思路深圳职业实训项目深圳慧衡科技有限公司为了扩展业务需要制作一个公司网站，介绍公司概况、公司文化、产品展示等。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）39实训项目深圳慧衡科技有限公司为了扩展业务需要制作一个公司网站项目分析网页设计师小高首先进行需求分析，了解公司所要表达的理念、界面显示内容和栏目的要求，确定了网站主页的设计思路：（1）页面元素：网站banner、导航条（从“方案、技术、服务、设计、案例、培训、合作、慧衡”这8项来介绍公司）、介绍公司业务的一些文字元素、图像等。（2）版面布局：采用“国”字形结构，顶部区域用于装载网站的banner、导航条及横幅广告条；接下来就是主体内容区域，分为3列，左侧用于装载栏目列表，中间用于装载公司业务信息，右侧用于装载最新博文、联系方式；底部区域装载页脚信息。（3）配色方案：因为是公司网站，所以色彩搭配采用了深蓝色主题，蓝色可以给人“信任、安全、崇高”等的心理联想，也符合一般人的视觉感官。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）40项目分析网页设计师小高首先进行需求分析，了解公司所要表达的理设计目标网页设计与制作实用教程（第3版）41深圳职业技术学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院预备知识：Web标准Web标准提出网页主要由3部分组成：结构、表现和行为，相对应的结构标准为结构化语言，如XHTML和XML；表现标准语言，如CSS；行为标准，包括对象模型、ECMAScript等。Web标准最显著的特征就是将网页的内容与表现相分离，这就要求网页有良好的文档结构。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）42预备知识：Web标准Web标准提出网页主要由3部分组成：结构预备知识：认识Div

Div（division）即片段，并无实际的意义，只是一个定位标志，是块元素的一种。在HTML规范中，元素可分为内联元素（inlineelement）和块元素（blockelement）两种，块元素是其他元素的容器元素，它可以容纳内联元素和其他块元素。在默认情况下，块元素总是从新行开始，高度、宽度以及顶和底边距度可控制。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）43预备知识：认识Div

Div（division）即片段，并无预备知识：认识盒模型填充（padding）：盒子里面的内容到盒子边框的距离。边框（border）：盒子本身的边框，边框可以有多种样式，如实线、虚线或点线等。边界（margin）：盒子边框外和其他盒子之间的距离，称为边界；边界边是透明的，一般可用它控制元素之间的间隔。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）44小试身手预备知识：认识盒模型填充（padding）：盒子里面的内容到预备知识：定位方式1——float定位

准确来说，浮动并不是一种用作定位的选项，而是为元素分配一定的空间，然后让文档中的其他部分自动环绕在其周围。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）45小试身手预备知识：定位方式1——float定位

准确来说，浮动并不预备知识：定位方式2——position的4种定位模式①absolute（绝对）如果设置一个Div绝对定位，可以通过设置该元素的top、left值，使其移至坐标（left，top）处，坐标原点是页面的左上角，那么该元素原来占据的空间将消失。如果某个绝对定位的Div位于父层Div中，且父层Div也被定位过，那么此时的坐标原点就不是页面的左上角，而是这个父层Div的左上角。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）46小试身手预备知识：定位方式2——position的4种定位模式①预备知识：定位方式2——position的4种定位模式②relative（相对）如果设置一个Div相对定位，可以通过设置其top、left值，使其相对于原来它所在的位置向下、向右进行移动，移动的距离就是设置的top、left值。页面中其他的元素不会占据其偏移后留下的空白空间，就像该元素仍在原位一样。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）47小试身手预备知识：定位方式2——position的4种定位模式②预备知识：定位方式2——position的4种定位模式③static（静态）如果设置一个Div静态定位，静态定位是Div的默认状态，表示Div保持在原来应该在的位置上，即该值没有任何移动的效果。④fixed（固定）如果设置一个Div固定定位，可以通过设置其top、left值，使其固定在显示屏的某个位置上，即使滚动浏览器时，该元素也固定不变，不会跟着移动位置。深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）48预备知识：定位方式2——position的4种定位模式③相对定位和绝对定位的比较相对定位relative绝对定位absolute定位基准以它自己原来的位置为基准以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准原来的位置还占用着原来的位置，未脱离标准流不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）49相对定位和绝对定位的比较相对定位绝对定位定位基准以它自己原制作流程网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室50任务1：利用Div构建页面整体框架任务4：利用CSS美化Div任务3：利用CSS定位Div任务2：在Div中插入页面元素制作流程网页设计与制作实用教程（第3版）深圳职业技术学院计任务1——利用Div构建页面的整体框架网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室511创建Div2在“display”Div中嵌套插入子Div在“content”Div中嵌套插入子Div任务1——利用Div构建页面的整体框架网页设计与制作实用教STEP1：创建Div深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）52插入Div，并将其ID定义为banner。依次创建Div“navigation”、“display”、“content”、“footer”。STEP1：创建Div深圳职业技术学院计算机基础教研室网页STEP2：在“display”Div中嵌套插入子Div深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）53在“display”Div中插入子Div，并将其ID定义为dis-flash。在“display”Div中插入子Div“dis-text”。STEP2：在“display”Div中嵌套插入子Div深圳STEP3：在“content”Div中嵌套插入子Div深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）54在“content”Div中插入Div，并将其ID定义为con-left。STEP3：在“content”Div中嵌套插入子Div深圳任务2——在Div中插入页面元素网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室551在“banner”Div中插入图像2在“navigation”Div中插入导航条列表3在“display”Div中插入页面元素4在“content”Div中插入页面元素5在“footer”Div中插入页面元素任务2——在Div中插入页面元素网页设计与制作实用教程（第STEP1：在“banner”Div中插入图像深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）56在“banner”Div中插入“banner.gif”图像。STEP1：在“banner”Div中插入图像深圳职业技术学STEP2：在“navigation”Div中插入导航条列表深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）57在“navigation”Div中插入导航条列表。STEP2：在“navigation”Div中插入导航条列表STEP3：在“display”Div中插入页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）58在“dis-flash”Div中插入Flash动画。在“dis-text”Div中输入文本。STEP3：在“display”Div中插入页面元素深圳职业STEP4：在“content”Div中插入页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）59在“con-left”Div中插入页面元素。在“con-main”Div中插入页面元素。在“con-right”Div中插入页面元素。STEP4：在“content”Div中插入页面元素深圳职业STEP5：在“footer”Div中插入页面元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）60在“footer”Div中插入页面元素。STEP5：在“footer”Div中插入页面元素深圳职业技任务3——利用CSS定位Div网页设计与制作实用教程（第3版）深圳职业技术学院计算机基础教研室611定位“banner”、“navigation”、“display”及“content”Div居中对齐2定位“footer”Div，设置宽度值为100%3定位“display”Div中的“dis-flash”Div与“dis-text”Div两列布局4定位“content”Div中3个Div子元素呈三列布局任务3——利用CSS定位Div网页设计与制作实用教程（第3STEP1：定位“banner”、“navigation”、“display”及

“content”Div居中对齐深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）62设置“banner”Div的width、height、padding及margin值，使其居中显示。设置“navigation”Div的width、height、padding、margin值，使其居中显示。设置“display”Div的width、height、padding、margin值，使其居中显示。设置“content”Div的width、height、padding和margin值，使其居中显示。STEP1：定位“banner”、“navigation”、STEP2：定位“footer”Div，设置宽度值为100%深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）63设置“footer”Div的width值为100%。STEP2：定位“footer”Div，设置宽度值为100%STEP3：定位“display”Div中的“dis-flash”Div与“dis-text”Div两列布局深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）64设置“dis-flash”Div的属性值，使其浮动左对齐。设置“dis-text”Div的属性值，使其浮动右对齐。设置“content”Div的“clear”属性值。STEP3：定位“display”Div中的“dis-flaSTEP4：定位“content”Div中3个