电子商务网页制作-项目七

项目七DIV+CSS布局设置项目综述本项目就是基于“DIV+CSS”技术,使用Dreamweaver来实现“个人网站”的设计与制作。项目目标能力目标：学习完本项目后,学生应当能够依据前期的网站策划及效果图完成整个创业园网站的DIV+CSS布局,包括:(1)学会利用“DIV+CSS”完成页面的布局,灵活运用该技术的布局思路及方法。(2)解决“DIV+CSS”的浏览器兼容问题。(3)学会使用“模板和库”进行网页的布局。知识目标：(1)Web标准。(2)XHTML基础。(3)DIV概念。(4)CSS语法规则。(5)模板和库的概念和应用。Part01任务一·个人网站首页的制作任务引导本任务的目标是依据“个人网站”的首页效果图,使用DIV+CSS技术,完成网站首页的制作。任务实施1.绘制首页结构布局草图2.新建站点3.制作页面知识分析1.Web标准Web标准是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。2.DIV+CSS与传统表格布局的区别大量的表格使HTML内部文档结构复杂,存在大量为了控制页面元素位置的表格。特别当遇到页面结构或者风格需要整体转变时,基本上需要重新制作整个网站。使用CSS+DIV布局,网站结构与表现分离。在网站风格改变、网站更新时,不需要再关心任何后台的操作,使二次开发更为便捷和友好,易于维护。使用CSS+DIV布局,并不是完全排除表格的使用。表格在结构化“显示数据”方面还是有着很大优势的,可以使数据信息更为易读。只是传统中使用表格来做页面布局的方法需要被Web标准化所取代。知识分析

3.DIV概述DIV(Division)标记可以看作是一个区块盒子,即<div>与</div>之间相当于一个盒子,它可以容纳文字、段落、图像等各种网页元素。它也是为HTML文档中大块的内容提供结构与背景的元素。<div>与</div>之间的这些元素都是用来构成这个区块的,所包含元素的特性由DIV标签的属性来控制,或者通过CSS样式来控制。DIV+CSS的布局技术是网站标准(或称“Web标准”)中的典型应用模式,也是Web标准中的常用术语之一。基于Web标准的网站设计的核心就是在于使网站实现表现与内容结构的分离。即网站的结构、表现、行为三者分离。而DIV+CSS布局的引入,使网页结构与表现分离,是实现Web标准的基础环节。知识分析

4.盒子模型盒子模型是CSS布局中非常重要的概念。所有网页中的元素可以被看作一个盒子,它在页面中的位置可以看作盒子所占据的位置。这个盒子由4部分组成,最外面是边界(margin);第二部分是边框(border);第三部分是填充(padding),也就是内容区域与边框之间的空白;第四部分就是存放东西的内容区域(content)。知识分析

5.CSS与HTML的结合CSS是“CascadingStyleSheet”的缩写,称为层叠样式表,一般简称为样式表,层叠是指多个样式可以同时应用于同一个页面或网页中的同一个元素。通常情况下,有三种方法可以将CSS样式应用到HTML页面中。(1)标签样式。通过style属性直接嵌入到HTML中去。(2)内部样式。把CSS样式单独地包含在头部标签内。(3)外部链接式。外部链接式的应用前提是需要将CSS样式存储为一个独立的文件,此文件可以为整个网站的多个页面服务。知识分析

6.CSS的语法规则通常在代码中添加CSS样式可按照以下的语法规则进行:选择器{属性1:属性值;

…属性n:属性值;}这里选择器主要包括三种类型:(1)类别选择器。类别选择器是以“.”开始的,名称可以自定义,但是必须由小写或者大写字母开始,后面可以使用任意的字母、数字、连接线或者下划线。知识分析(2)标记选择器。选择器可以是HTML包含的所有标签。(3)ID选择器。ID选择器都是以“#”开始,名字可以自定义,其命名规则和类别选择器相同。和类别选择器的区别在于,每个被套用了id名称的对象,其id名字在每个页面中只允许出现一次。拓展练习采用DIV+CSS的布局方式完成如图的页面。习题1.CSS+DIV布局的优势有哪些?2.简述Web标准及其发展趋势。Part02任务二·个人网站子页面的制作任务引导本任务的目标是使用模板以及DIV+CSS完成个人网站中“美文欣赏”子页面的制作。任务实施1.创建网站与页面模板2.通过模板生成“店铺公告”页面知识分析

1.<div>与<span>的区别<div>是块一级元素,可以包含段落、标题、表格、章节、图片等,它包围的元素会自动换行。而<span>也和<div>一样,可以容纳各种网页元素而被广泛应用。但是<span>是一个行内元素,在它的前后是不会换行的,它没有结构的含义,只是运用样式。<span>可以包含在<div>中,反之则不行。知识分析2.float属性的使用float属性在DIV+CSS的布局模式中使用频率非常高,主要用于设置对象是否浮动显示,并设置其具体的浮动方式,其属性值包括:none、left以及right。浮动是一种经常使用的布局方式,它能够改变页面中对象的前后排列顺序,这样使得DIV+CSS的布局更加方便。知识分析3.利用模板来创建网页(1)创建模板(2)编辑模板(3)修改并更新模板(4)从模板中分离4.“库”元素在网页中的应用