chapter8利用Div+CSS制作网页.pptxVIP

第8章　利用Div+CSS设计与制作网页——制作网站主页计算机工程学院　计算机基础教学部.学习目标掌握利用Div+CSS设计制作网页的整体思路熟练掌握利用CSS对Div进行定位的方法熟练掌握利用CSS设置Div属性的方法深圳职业技术学院 计算机基础教研室.实训项目深圳慧衡科技有限公司为了扩展业务需要制作一个公司网站，介绍公司概况、公司文化、产品展示等。深圳职业技术学院 计算机基础教研室.项目分析网页设计师小高首先进行需求分析，了解公司所要表达的理念、界面显示内容和栏目的要求，确定了网站主页的设计思路：（1）页面元素：网站banner、导航条（从“方案、技术、服务、设计、案例、培训、合作、慧衡”这8项来介绍公司）、介绍公司业务的一些文字元素、图像等。（2）版面布局：采用“国”字形结构，顶部区域用于装载网站的banner、导航条及横幅广告条；接下来就是主体内容区域，分为3列，左侧用于装载栏目列表，中间用于装载公司业务信息，右侧用于装载最新博文、联系方式；底部区域装载页脚信息。（3）配色方案：因为是公司网站，所以色彩搭配采用了深蓝色主题，蓝色可以给人“信任、安全、崇高”等的心理联想，也符合一般人的视觉感官。深圳职业技术学院 计算机基础教研室.设计目标深圳职业技术学院 计算机基础教研室.预备知识：Web标准Web标准提出网页主要由3部分组成：结构、表现和行为，相对应的结构标准为结构化语言，如XHTML和XML；表现标准语言，如CSS；行为标准，包括对象模型、ECMAScript等。Web标准最显著的特征就是将网页的内容与表现相分离，这就要求网页有良好的文档结构。深圳职业技术学院 计算机基础教研室.预备知识：认识Div?Div（division）即片段，并无实际的意义，只是一个定位标志，是块元素的一种。在HTML规范中，元素可分为内联元素（inline element）和块元素（block element）两种，块元素是其他元素的容器元素，它可以容纳内联元素和其他块元素。在默认情况下，块元素总是从新行开始，高度、宽度以及顶和底边距度可控制。深圳职业技术学院 计算机基础教研室.预备知识：认识盒模型小试身手填充（padding）：盒子里面的内容到盒子边框的距离。边框（border）：盒子本身的边框，边框可以有多种样式，如实线、虚线或点线等。边界（margin）：盒子边框外和其他盒子之间的距离，称为边界；边界边是透明的，一般可用它控制元素之间的间隔。深圳职业技术学院 计算机基础教研室.预备知识：定位方式1 ——float定位?准确来说，浮动并不是一种用作定位的选项，而是为元素分配一定的空间，然后让文档中的其他部分自动环绕在其周围。小试身手深圳职业技术学院 计算机基础教研室.预备知识：定位方式2—— position的4种定位模式① absolute（绝对）如果设置一个Div绝对定位，可以通过设置该元素的top、left值，使其移至坐标（left，top）处，坐标原点是页面的左上角，那么该元素原来占据的空间将消失。如果某个绝对定位的Div位于父层Div中，且父层Div也被定位过，那么此时的坐标原点就不是页面的左上角，而是这个父层Div的左上角。小试身手深圳职业技术学院 计算机基础教研室.预备知识：定位方式2—— position的4种定位模式② relative（相对）如果设置一个Div相对定位，可以通过设置其top、left值，使其相对于原来它所在的位置向下、向右进行移动，移动的距离就是设置的top、left值。页面中其他的元素不会占据其偏移后留下的空白空间，就像该元素仍在原位一样。小试身手深圳职业技术学院 计算机基础教研室.预备知识：定位方式2—— position的4种定位模式③ static（静态）如果设置一个Div静态定位，静态定位是Div的默认状态，表示Div保持在原来应该在的位置上，即该值没有任何移动的效果。④ fixed（固定）如果设置一个Div固定定位，可以通过设置其top、left值，使其固定在显示屏的某个位置上，即使滚动浏览器时，该元素也固定不变，不会跟着移动位置。深圳职业技术学院 计算机基础教研室.相对定位和绝对定位的比较 相对定位relative绝对定位absolute定位基准以它自己原来的位置为基准以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准原来的位置还占用着原来的位置，未脱离标准流不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样深圳职业技术学院 计算机基础教研室.制作流程任务1：利用Div构建页面整体框架任务3：利用CSS定位Div任务2：在Div中插入页面元素任务4：利用CSS美化Div深圳职业技术学院 计算机基础教研室.任务1 ——利用