电子商务网页设计（第三版）第 4 章 层和框架在网页中的应用

第4章层和框架在网页中的应用

第1节层在网页中的应用

第2节框架在网页中的应用页第1节层在网页中的应用一、层的概念和分类1.层的概念层是网页内容的一个容器，只要是能放置在网页中的内容，都可以放置在层当中。层最主要的特性就是它可以在网页上自由浮动，从而实现对网页元素的精确定位，而且层的位置是可以重叠的，可以任意地控制层的前后位置、显示或隐藏，大大增强了网页设计的灵活性。2.层的分类（1）普通层和嵌套层（2）固定层和浮动层1）固定层。固定层在网页中的位置固定。2）浮动层。在网页设计视图内，可以通过拖动控制手柄使浮动层移动。二、层的创建及设置1.普通层的创建（1）使用菜单命令创建普通层（2）使用布局面板创建普通层2.嵌套层的创建（1）使用菜单命令创建嵌套层（2）使用插入面板创建嵌套层3.层属性的设置4.层的基本操作（1）选择层（2）移动层（3）改变层大小（4）对齐层三、使用Div布局易买网首页1.新建空白文档2.插入Div标签四、使用“Div+CSS”美化易买网首页1.生成CSS文件2.Div应用样式3.编辑网页内容五、使用APDiv实现浮动广告1.插入APDiv2.设置APDiv浮动效果3.保存网页并浏览六、APDiv与表格的转换1.把APDiv转换为表格2.把表格转换为APDiv第2节框架在网页中的应用一、框架与框架集1.框架框架（frame）是指用来分隔网页的窗格，每个框架都是浏览器中的一个区域，它可以显示与浏览器窗口中所显示内容相关的HTML文档，是一个独立的HTML页面。2.框架集框架集（frameset）是指定义一组网页布局结构与属性的HTML页面，其中包含了显示在页面中框架的数量、尺寸、装入框架的页面来源及其他可定义的属性相关信息。3.框架结构的优点（1）使网页结构清晰，易于维护和更新。（2）每个框架网页都具有独立滚动条，因此访问者可以独立控制各个页面。（3）便于修改。一般情况下，每隔一段时间，网站的设计就要做一定的修改，如果是公共部分需要修改，只需修改公共页面，整个网站就同时更新。（4）访问者的浏览器不需要为每个页面重新加载与导航相关的图形，当浏览器的滚动条滚动时，这些链接不随滚动条的滚动而上下移动，一直固定在某个窗口，便于访问者能随时跳转到另一个页面。二、创建预定义框架集1.示例方式2.按钮方式3.菜单方式4.保存框架三、框架和框架集基本操作1.选择框架和框架集（1）在“框架”面板中选择框架和框架集（2）在设计窗口中选择框架或框架集2.拆分和删除框架3.属性设置（1）设置框架集属性（2）设置框架属性4.识别代码（1）框架的基本结构代码<frameset><frame><frame>…………</frameset>（2）框架集标签<frameset>标签的属性1）framespacing属性，通过该属性来设置框架集边框的宽度2）bordercolor属性，通过该属性来设置框架集边框的颜色3）rows属性，在垂直方向，浏览器可以被分割成多个窗口4）cols属性，在水平方向浏览器可以被分割成多个窗口（3）框架标签<frame>的属性1）src属性，显示页面源文件的路径。2）name属性，框架的名称。3）scrolling属性，框架滚动条显示属性。4）noresize属性，框架尺寸调整属性。5）marginwidth属性，框架边缘宽度属性。6）marginheight属性，框架边缘高度属性。四、框架布局“图书首页”页面1.创建框架布局页面2.