网页设计与制作-电子教案-陈彦许第2章节Dreamweaver的基本操作.pptVIP

2.5 实践与运用——保定秦奋切割机厂网站设计与制作 第2章 Dreamweaver的基本操作 2.5.2 素材搜集与编辑 建立站点文件夹“保定秦奋切割机厂”，再里面建立“images”文件夹， 把公司提供的素材进行整理，再从网络上下载必要的图片，对公司的LOGO和网站标题进行设计，保存在“images”文件夹下。 2.5 实践与运用——保定秦奋切割机厂网站设计与制作 第2章 Dreamweaver的基本操作 2.5.3 建立站点 尚辅网 / 陈彦许 主编 陈维华 卢爱芹 副编著 中国水利水电出版社 第2章 Dreamweaver的基本操作 【学习目标】 第2章 Dreamweaver的基本操作 2.学会表格的编辑方法 3.学会制作特殊的表格与格式化 1.深入理解表格在网页布局中的作用 5.学会在网页中设置各种超链接 6.学会使用表格设计网页的布局 4.学会插入与设置文本样式的操作 2.1 表格操作 第2章 Dreamweaver的基本操作 2.1.1 表格基本语法 边框是用border表示，它嵌入在table标记里面，后面的值表示表格边框的宽度，数值越大，宽度就越大。 注意：tr和td标签对在table/table中是不能交叉的。 2.1 表格操作 第2章 Dreamweaver的基本操作 2.1.2 插入表格 Step1 将光标定位在需要插入表格的位置，选择菜单栏“插入”|“表格”命令，或“插入”面板中的“常用”类别中，单击“表格”按钮，如图所示。 在弹出的“表格”对话框中，输入表格的各项参数，包括“行”、“列”、“表格宽度”、“边框粗细”等，如图所示。 Step2 Step3 单击“确定”按钮，关闭当前对话框，即可在网页编辑“设计”视图下可看到已经插入的表格，如图2-4所示。 2.1 表格操作 第2章 Dreamweaver的基本操作 2.1.3 编辑表格 单击表格的任何一个边框，或者将光标放在表格内任何位置，选择网页编辑窗口左下角的〈table〉标记来选中整个表格。表格选中后编辑区下方的“属性”面板会显示当前表格的属性，如图所示。如果属性面板不可见，可以单击“查看”｜“查看面板”命令或按F4快捷键调出属性面板。 表格“属性”面板参数说明： 表格：指定表格的ID,该设置对表格起到标识的作用。 行和列：指定表格中行和列的数目。 宽：用于设置表格的宽度，单位可以是像素，也可以按浏览器窗口宽度百分比计算表格的宽度。 填充：指单元格内容与单元格边框之间的像素数，如果没有在后面的文本框中输入值，大多数浏览器默认设置为1。 间距: 两个相邻单元格之间的像素数，如无明确指定间距值，浏览器默认设置为2。 对齐：指表格相对同一段落的其他元素的位置，它提供了“默认”“左对齐”“右对齐”“居中对齐”4种对齐方式。 边框：以像素为单位设置表格边框的宽度，如果没有明确指定边框的值，大多数浏览器设置表格边框为1，将边框设置为0，表格没有边框。 类：为表格指定css样式。 2.1 表格操作 第2章 Dreamweaver的基本操作 2.1.4 编辑行、列和单元格 （1）行或列的选取： ?把鼠标放置于行最上面的单元格或列最左侧的单元格中，拖动至最后一个单元格可选择行或列。 ?用鼠标指向行的左边框或列的上边框，当鼠标指针变成黑色箭头时单击鼠标。 （2）单元格的选取： ?将光标置于单元格中按下Ctrl+A可选中一个单元格。 ?将光标置于单元格中按编辑窗口左下面的“td”标签。 ?用Ctrl键可选中不连续的多个单元格。 ?用Shift键可选中连续的多个单元格。 选中行、列或单元格后，在下方“属性 ”面板里可以精确的调整指定选项的各种属性参数，如图所示。 2.1 表格操作 第2章 Dreamweaver的基本操作 2.1.5 特殊样式表格的制作 （1）细线表格的制作 Step1 插入一个3行2列的表格，设置“填充”和“间距”选项都为“0”，“边框”设为“1”，浏览效果如图所示。 选中表格，在右键菜单中选择“编辑标签”命令，弹出“标签编辑器”，在“浏览器特定的”选项卡中设置“边框颜色”为黑色，如图所示。 Step2 2.1 表格操作 第2章 Dreamweaver的基本操作 2.1.5 特殊样式表格的制作 （1）细线表格的制作 Step3 确定后保存，预览图如下所示。可见，即使把“边框”设置为“1”，表格边框还是比较粗。 Step4 将表格的“间距”选项设置为“1”，将“边框”设置为“0”，在“标签编辑器”中的“常规”选项卡中设置“背景颜色”为黑色，如图所示，设置完后单击“确定