网页设计与制作教程杨帆严耀伟王方网页设计第三章.pptVIP

3.1.1 表格基础 日常生活中，最常见的表格是用来显示数据的，比如Excel中的表格。在Dreamweaver中，表格除了可以显示数据外，最主要的功能是定位与排版。这样才能够将前面介绍过的文本与图像定位在网页中的任何想要显示的区域中。 1.表格建立 网页设计就是从创建表格开始的，先学习表格的创建可以为后来的网页设计奠定基础。 (1)创建各种表格 创建各种表格 1.表格建立 (2)在表格中插入网页元素 (3)设置表格属性 即使在网页中插入一个最简单的表格，也具有表格的几个重要的元素，那就是表格整体、行、列和单元格。所以插入表格后，【属性】面板中显示的是该表格的基本属性。表格的基本属性如表3.2所示。 表3.2表格的基本属性 表格的基本属性 2．编辑表格 (1)选中表格元素 (2)调整表格大小 2．编辑表格 (3)合并及拆分表格元素 当创建的表格不符合要求时，可以通过删除或增加表格的行与列，以及合并或者拆分单元格来实现 2．编辑表格 (4)复制及粘贴单元格 3．布局表格 (1)创建布局表格与单元格 (2)布局表格与单元格属性 布局表格与单元格属性 4．表格制作实例 （1）一像素表格 （2）圆角相框 4．表格制作实例 （3）可隐藏的说明书 3.1.2修饰网页各种元素 （1）网页各种元素标签 （2）HTML信息 （3）文本标签 （4）图像标签 （5）表格标签 （6）链接标签 （5）表格标签 （6）链接标签 3.2 框架的规划与建立 3.2.1 框架与表格 1.框架和表格的区别 2.使用框架的优缺点： （1）优点 访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。 （2）缺点 ①并不是所有浏览器都提供良好的框架支持； ②难以实现在不同框架中精确的对齐各个页面元素。 3.2.2 规划框架 框架最常见的用法就是实现页面导航，一般是将页面划分为一个导航区和一个内容区。这些框架中的每一个都是一个独立的 HTML页面。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件不在浏览器中显示，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 3.2.3 创建框架 1.选择框架集和框架 （1）在“框架”面板中选择框架和框架集 （2）在文档窗口中选择框架和框架集 2.设置框架集和框架属性 (1)设置框架集属性 (2)设置框架属性 选择要查看或设置属性的框架集，在“属性”检查器中，查看所有框架集属性。 3.2.3 创建框架 设置框架集属性 边框 边框宽度 边框颜色 框架大小 3.2.3 创建框架 设置框架属性 框架名称 源文件 滚动 不能调整大小 边框及边框颜色，边界宽度和高度 3.2.4 框架的操作 1.改变框架尺寸 2.嵌套框架 3. 拆分框架 4.保存框架 5.在框架中显示页面 （1）直接在框架中编辑空文档 （2）在框架中打开现有文档 （3）在属性检查器为框架设置源文件 （4）设置超链接的目标框架 6.删除框架 3.2.5 Spry框架 （1）Spry框架概念 Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。Spry构件是一个页面元素，通过启用用户交互来提供更丰富的用户体验。 （2）Spry菜单栏构件 （3）Spry选项卡式面板构件 （4）Spry折叠构件 （2）Spry菜单栏构件选项 （3）Spry选项卡式面板构件 选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。访问者可以通过单击要访问的面板上的选项卡，来隐藏或者显示在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。 （4）Spry折叠构件 Spry折叠构件是可折叠的面板，可以将大量内容存储在一个紧凑的空间中。访问者可以通过单击该面板上的选项卡来隐藏或者显示在折叠构件中的内容。折叠面板分为两种：一种是多个面板的折叠式面板构件，一种是只有一个面板的可折叠面板构件。 3.3层的运用 在Dreamweaver中的层分为两种格式：CSS层和Netscape层格式。 （1）CSS层：使用DIV和SPAN标记来定位网页元素的位置。CSS层的优点是具有良好的兼容性，Internet Explorer 4.0和Netscape Navigator 4.0及它们的更高版本的浏览器都支持CSS层。 （2）Netscape层：在网页上定位元素使用的是LAYER和ILAYER标签。Netscape层只能被Netscape Navigator 4.0及更高版本的浏览器所支持。 3.3.1创建层 1.设