零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第3课.pptVIP

3.2.2 典型案例——布局“网上礼品商城”主页 （2）左列文字内容及右侧主要内容也分为多行或多列，因此可以使用嵌套表格来实现。 （3）利用单元格背景图像可以重复的特点，插入一个1行2列的“100%”的表格，第1个单元格放置固定大小的页面内容，第2个单元格可设置一幅背景图像，令其可以横向复制。 操作步骤请老师参照软件讲解 3.2.2 典型案例——布局“网上礼品商城”主页 案例小结 本例通过布局主页，介绍了表格的插入、嵌套、拆分、合并、表格与单元格的属性设置以及在表格或单元格上应用CSS样式等知识。在布局网页时，各个单元格都需要设置为顶端对齐，以使插入的图像之间无缝隙。使用CSS样式设置表格边框，可以替代网页中的线条。 3.3 上机练习 3.3.1 制作粗框表格 3.3.2 使用表格布局公司主页 3.3.1 制作粗框表格 下面练习制作粗框表格，如下图所示，主要练习设置表格属性和单元格属性。 3.3.1 制作粗框表格 操作思路： 插入5行3列，宽“500”像素的表格。 设置表格边框为“10”，间距为“1”，填充为“2”。 通过【窗口】菜单打开【标签检查器】面板组，在【属性】面板的【浏览器特定的】栏中设置“bordercolordark”颜色为“#006699”，“bordercolorlight”颜色为“#FFCC66”。 3.3.2 使用表格布局公司主页 下面练习布局我的主页，主要练习使用表格布局网页的操作，效果如下图所示。 3.3.2 使用表格布局公司主页 操作思路： 新建站点“rl”，并新建“index.html”文件，复制“第3课\素材\rl\img”中的文件到站点rl的“img”文件夹中。 设置【页面属性】对话框中的字号大小为“12”。 创建5行1列，宽“778”像素的表格，放置所有的网页元素。 在布局网页内容时，可以拆分单元格以满足需要。 没有背景图像的区域用白色填充。 文本内容可任意输入。 Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程 第3课 用表格和AP元素布局 本课要点 具体要求 本课导读 上机练习 本课要点 使用表格和AP元素 使用AP Div+CSS进行布局设计 具体要求 掌握表格与单元格属性设置 掌握边框样式的设置 掌握AP元素的属性设置 了解一般网页的大小 本课导读 表格与AP元素是网页布局时常借助的工具，主要用于对文本和图形进行定位或进行页面分栏等，是页面布局的实用工具。 3.1 使用表格 表格是处理数据最有效的工具，它能使数据得到合理的分配。通过表格与单元格的属性控制，可以使表格及表格数据表现出丰富的视觉效果。 3.1 使用表格 3.1.1 知识讲解 3.1.2 典型案例——制作细框表格 3.1.1 知识讲解 本节将介绍表格及表格元素的标签、表格与单元格的属性设置等内容。 3.1.1 知识讲解 1. 认识表格及表格元素标签 2. 设置表格属性 3. 设置单元格属性 1. 认识表格及表格元素标签 在HTML语言中，表格标签用table/table表示，表格元素标签位于table/table之间。行标签为tr/tr，单元格标签为td/td。 2. 设置表格属性 在设置表格属性前，首先要建立表格并选择表格。 将鼠标光标定位在插入的表格中，此时表格的上方或下方出现有标注的绿线，单击绿线区域即可选取光标所在的表格。用户也可以在标签栏中单击table标签来选取表格。 2. 设置表格属性 选取表格后，表格【属性】面板如下图所示。 3. 设置单元格属性 按下鼠标左键拖动选取需要的单元格后，其【属性】面板如下图所示。 3.1.2 典型案例——制作细框表格 案例目标 本案例将制作如下图所示的表格，主要介绍设置表格背景，单元格背景和表格边框的方法等。 3.1.2 典型案例——制作细框表格 操作思路： （1）创建“table.html”文件。 （2）插入9行3列的表格。 （3）设置表格属性和单元格属性。 操作步骤请老师参照软件讲解 3.1.2 典型案例——制作细框表格 案例小结 本案例制作了“table.html”网页文档。主要介绍了表格的插入、填充、对齐与背景颜色的设置，以及单元格背景颜色、背景图像、标题、字号的设置与单元格的合并等知识。 3.2 布局设计 布局是将网页内容有效地放置在页面中的一种方法，布局有表格布局和框架布局等，本节主要学习表格布局。 3.2 布局设计 3.2.1 知识讲解 3.2.2 典型案例——布局“网上礼品商城”主页 3.2.1 知识讲解 下面介绍一般