搜索
项目六创建“伊韵”手机网站——应用Div+CSS布局网页一、学习目标二、理论指导三、任务实践一、学习目标了解什么是Web标准，以及Web标准的构成。认识Div，掌握创建和选择Div的方法。了解Div+CSS布局的优缺点，掌握绝对定位、相对定位与浮动定位的用法。掌握常用Spry布局对象的用法。能够应用Div+CSS构建网页布局。二、理论指导（一）Web标准概述1．什么是Web标准Web标准是由W3C（WorldWideWebConsortium）和其他标准化组织制定的一套规范，包括HTML、JavaScript及CSS等一系列标准，其目的在于创建一个统一的用于Web表现层的技术标准，以便能通过不同浏览器或终端设备（计算机、手机等）向用户展示信息内容。2．Web标准的构成目前来说，Web标准由结构（Structure）、表现（Presentation）和行为（Behavior）三部分组成。（1）结构结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的Web标准技术主要是HTML。（2）表现表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。（3）行为行为是指对整个文档的一个模型定义和交互行为的编写。（二）认识Div1．Div简介Div是用来为HTML文档中的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签Div和结束标签/Div之间的所有内容构成。在它里面可以内嵌表格（table）、文本（text）等HTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表格式化这个块来控制。2．创建DivDiv标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。3．选择Div要对Div执行某项操作，首先需要将其选中。在DreamweaverCS5中选择Div的方法有两种。•将鼠标光标移至Div周围的任意边框上，当边框显示为红色实线时单击鼠标左键可将其选中。•将插入点置于Div中，然后单击“标签选择器”中相应的div标签，同样可将其选中。（三）“Div+CSS”布局中的常见定位方式“Div+CSS”布局，就是使用Div布局网页和定位网页中的元素，而使用CSS样式来控制这些元素的显示方式。这种布局是目前比较流行的网页布局方式。1．绝对定位与相对定位（1）绝对定位绝对定位在CSS中的写法是“position:absolute;”。其表达的意思是参照浏览器的左上角，配合top、right、bottom、left（上、右、下、左）值来定位元素。（2）相对定位相对定位在CSS中的写法是“position:relative;”，其表达的意思是以父级对象（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，配合上、右、下、左（简称TRBL）进行定位，当父级内有padding等CSS属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。2．浮动定位浮动定位在CSS中用“float”属性来表示。当“float”值为“none”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。（四）使用Spry布局对象1．Spry菜单栏Spry菜单栏是一系列导航菜单按钮，当光标指向某个按钮时可以弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的导航信息。2．Spry选项卡式面板Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后，单击“插入”面板“布局”类别中的“Spry选项卡式面板”即可将其插入。3．Spry折叠式Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry折叠式”即可将其插入。4．Spry可折叠面板Spry可折叠面板是一个可以在收缩的空间内存储内容的面板，用户可通过单击面板标签来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry可折叠面板”即可将其插入。三、任务实践任务一制作网站首页上部本任务将以“伊韵”网站中的“index.html”网页为例，通过制作其上部，来初步学习“Div+CSS”布局在实际网页制作中的应用（具体操作见视频6-1）。任务二制作网站首页中部相对网页上部来说，中部的制作要复杂很多，因为涉及到Div的嵌套、浮动定位、三列式布局和Spry折叠式（具体操作见视频6-2）。任务三制作网站首页下部网页下部的制作相对来说要简单很多，因为只需要插入一个Div，并在其中插入图像即可（具体操作见视频6-3）。任务四设置网页“body”样式本任务通过设置网页“body”样式，来解决网页四周的空白和背景问题（具体操作见视频6-4）。