全部分类
搜索资料
    首页
    行业资料
    互联网
    Dreamweaver做网页布局

    Dreamweaver做网页布局

    举报
    开通vip

    Dreamweaver做网页布局 第 1 章 第 3 章 网页布局技术 【本章概要】 z 运用 Dreamweaver 8 中的表格布局； z 运用 DIV+CSS 技术布局； z 应用模板技术快速建站。 3.1 表格布局技术 在复杂的网页设计中使用表格，可以有效地组织数据，整齐地排列文件，使整个网页看起 来简洁清晰。在表格中不但可以组织文件、图像、组件等内容，还可以通过未定义边框的表格 对网页进行合理的布局，所以表格已经成为制作网页的一种有效的工具。在 Dreamweaver 8 窗 口内创建...

    Dreamweaver做网页布局
    第 1 章 第 3 章 网页布局技术 【本章概要】 z 运用 Dreamweaver 8 中的 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 格布局； z 运用 DIV+CSS 技术布局； z 应用模板技术快速建站。 3.1 表格布局技术 在复杂的网页设计中使用表格，可以有效地组织数据，整齐地排列文件，使整个网页看起 来简洁清晰。在表格中不但可以组织文件、图像、组件等内容，还可以通过未定义边框的表格 对网页进行合理的布局，所以表格已经成为制作网页的一种有效的工具。在 Dreamweaver 8 窗 口内创建表格是一件非常容易的事情，与在 Word 字处理软件中创建表格的方法非常类似。 课堂任务 1 制作课程表 知识预读 Š表格的组成 （1）组成表格的元素 组成表格的元素有：边框、单元格、行、列、单元格间距、单元格内距。如图 3-1-1 所示。 z 边框（border）：组成表格的线条称为边框。 z 单元格（cells）：每一个小格称为一个单元格。 z 行（rows）：水平方向的一排单元格称为行。 z 列（columns）：垂直方向的一排单元格称为列。 z 单元格间距（cellspacing）：表示单元格之间的空白距离。 z 单元格内距（cellpadding）:表示单元格内容与单元格边界之间的空白距离。 3.1 表格布局技术章章章 79 边框 行 列 单元格间距 单元格内距 单元格 表格 图 3-1-1 表格的组成 （2）表格与单元格的关系 一个表格由开始，
    结束，表格的内容由和定义。其中表示表的 一个行，表有多少行就有多少个；表示表的一个单元格，一般定义在中，一个 表有多少个单元格就有多少个。 表格由一个个单元格组成，如 9 个单元格可构成一个 3 行 3 列的表格。表格的属性和单元 格的属性设置有很多是相似的，但表格的属性设置都放在标记中，单元格的属性标记放 在或
    里。 ŠDreamweaver 8 中的表格属性 在 Dreamweaver 8 中，一旦选中某个对象，属性面板就会变成这个对象的设置面板，可以 通过这个设置面板来精确修改对象的属性。 （1）表格属性 当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修改表格的 行数、列数、大小等属性。表格属性面板如图 3-1-2 所示。 图 3-1-2 表格属性面板 单击图 3-1-2 右下角的小三角按钮，可以对更多的表格属性进行设置，如图 3-1-3 所示。 图 3-1-3 表格属性扩展面板 属性面板各功能如下： z ：表格的行数。 章章章第 1 章 网页布局技术 80 z ：表格的列数。 z ：指定表格的宽度。用于设置表格的宽度像素（单位为像素），如 果选择 表示设置表格的宽度占整个页面的百分比（单位为%）。 z ：指定表格的高度。设置方式类同表格宽度。 z ：单元格边界与单元格内文字的距离。 z ：单元格之间的间隙大小。 z ：表格的对齐方式，可以将表格居左、居中或居右。 z ：代表表格边框的粗细，如果设“0”则代表没有边框，注意网页中表格的 内边框和外边框粗细是一样的。 z ：设置表格的背景颜色。 z ：设置表格边框的颜色。 z ：设置表格的背景图像，如果设置了背景图像，背景 颜色就失效。 z ：消除列的宽度设置。 z ：消除行的高度设置。 z ：将表格宽度的设置由百分比转换为像素。 z ：将表格高度的设置由百分比转换为像素。 z ：将表格宽度的设置由像素转换为百分比。 z ：将表格高度的设置由像素转换为百分比。 （2）单元格的设置 和设置表格一样，可以对单元格做精确地设置和修改。只要将光标移至某个单元格中，属 性面板就会变成单元格的设置面板，如图 3-1-4 所示。 图 3-1-4 单元格属性扩展面板 z ：合并单元格（操作之前要先选择需要合并的单元格）。 z ：拆分单元格，拆分为多行或多列。 z ：单元格内部的水平对齐方式，作用与 类似。 z ：单元格内部的垂直对齐方式。 z ：设置单元格的背景图像。 z ：设置单元格的背景颜色。 z ：设置单元格的边框颜色。 3.1 表格布局技术章章章 81 Š表格的操作 （1）选取整个表格 在 Dreamweaver 8 中选取表格方法有很多种，最简单的就是将鼠标指针移动到表格的边框 线上单击鼠标左键就可以选择整个表格了。 如果光标在表格中间时，可以单击“修改”|“表格”|“选择表格”命令或在表格中单击右 键，从弹出的快捷菜单中单击“表格”|“选择表格”命令。 还有一个简单的方法是当光标在单元格中出现时，在 Dreamweaver 8 页面编辑窗口的左下 角的 HTML 快速启动栏上选择标签，就可以选取整个表格。如图 3-1-5 所示。 图 3-1-5 通过标签选取表格 （2）选取单元格 将鼠标指针移动到某个单元格上，按住 Ctrl 键不放，再单击，就可以选中这个单元格。 按住 Ctrl 键，再逐个单击要选取的单元格，就可以选中不连续的多个单元格。 通过鼠标拖动的方式可以选取连续的多个单元格。 （3）选取行或列 将鼠标指针移动到选取行的左边或者列的上面，光标变成箭头形状时单击鼠标左键就可以 选中一整行或整列。按住鼠标左键不放上下拖动还可以选取多行或多列。 错误！ 提示 将光标移至单元格中，可用键盘上的方向键和 Tab 键在单元格之间移动，如果在表格 最后一个单元格按下 Tab 键，表格会自动添加一行。 （4）插入行或列 将光标定位到选中的行或列上，然后单击菜单“修改”|“表格”|“插入行”命令插入行， 或在选中的行上单击鼠标右键，单击菜单“表格”|“插入行”命令。 提示 ① 插入新的行时，新增的行会出现在插入点的上方，而插入列的时候，会出现在插入 点的左方。因此，将插入点也就是光标移动到表格中的适当位置即可。 ② 光标插入点必须是在表格单元格内或选中的行或列上。 ③ 如果要插入多行或多列，可以选择插入的行、列的具体数量以及插入的位置，方法是： a. 在表格中单击鼠标右键，单击菜单“表格”|“插入行或列”命令； 章章章第 1 章 网页布局技术 82 b. 系统会弹出“插入行或列”对话框，如图 3-1-6 所示； 图 3-1-6 “插入行或列”对话框 c. 设置好后，单击“确定”按钮即可在表中插入相应的行或列。 （5）删除行或列 将光标定位到选中的行或列上，然后单击“修改”|“表格”|“删除行”或“删除列”命令 删除行或列，或单击鼠标右键，在弹出的快捷菜单单击“表格”| “删除行”或“删除列”命 令，就可以删除整行或者整列。 错误！ 提示 如果表格中有内容，按 Delete 键会先删除内容，再按一次才会删除行或列。 （6）合并单元格 选中相邻的两个或两个以上的单元格，可以是同行，也可以是同列相邻的若干个单元格， 如图 3-1-7 所示。 图 3-1-7 选中需要合并的单元格 单击“修改”|“表格”|“合并单元格”命令，或按快捷键 Ctrl+Alt+M 合并单元格，还可 以单击属性面板上的 按钮合并单元格，效果如图 3-1-8 所示。 图 3-1-8 单元格合并后效果 （7）拆分单元格 将光标移动到要分割的单元格中，如图 3-1-9 所示，单击“修改”|“表格”|“拆分单元格” 3.1 表格布局技术章章章 83 命令，或按快捷键 Ctrl+Alt+S，也可以单击属性面板上的 按钮拆分单元格。弹出“拆分单 元格”对话框，设置如图 3-1-10 所示。 图 3-1-9 单元格 图 3-1-10 “拆分单元格”对话框 在对话框中选择列上拆分，并设置拆分的数量，单击“确定”按钮，就可以看到拆分后的 效果，如图 3-1-11 所示。 图 3-1-11 单元格拆分后效果 Š表格的配色 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 对表格颜色的各项设置非常方便，但设置出来的视觉效果却往往不尽如人意。对于不熟悉 颜色搭配的人来说，要想设计出漂亮的表格就更不容易了。Dreamweaver 8 准备了许多专家设 计的配色方案，只需简单的套用就可以设计出美观的表格。 ① 将光标移动到任意一个单元格中或是选中表格。 ② 单击菜单“命令”|“格式化表格”命令，打开“格式化表格”对话框，如图 3-1-12 所示。 图 3-1-12 “格式化表格”对话框 ③ 在左上角的列表框中有各种配色方案供用户选择，还可以在对话框的各项属性栏中具 章章章第 1 章 网页布局技术 84 体修改每一项配色。修改完成后单击“确定”按钮，自动套用样式到表格。 1．任务目标 ‹ 学会在网页中插入表格，对表格的各组成元素进行选取； ‹ 学会插入、删除行或列，合并、拆分单元格； ‹ 能根据要求对表格、行、列、单元格属性进行设置； ‹ 了解 Dreamweaver 8 的配色方案； ‹ 制作如图 3-1-13 所示的课程表。 图 3-1-13 课程表效果图 2．实施步骤 步骤 1 插入表格 ① 新建一个空白网页，保存为 zgkcb.html，设置标题为“四职校课程表”。 ② 将光标定位到网页的第 1 行位置，插入标题“四职校 07V2 班课程表”。其中字体设置 为“黑体”，大小设置为“24 像素”，文本颜色设置为“#0000FF”。 ③ 将光标定位到第 3 行，插入一个 9 行 6 列的表格。单击菜单“插入”|“表格”命令，或者 单击常用面板“表格”按钮，设置如图 3-1-14 所示。 图 3-1-14 “表格”对话框 ④ 设置完成后单击“确定”按钮，就会在页面上看到插入的表格，如图 3-1-15 所示。其 3.1 表格布局技术章章章 85 中〈table〉表示整个表格，〈tr〉表示行，〈td〉表示列。 图 3-1-15 新建表格效果图及代码 步骤 2 输入文本 将光标定位到单元格中，输入文本。最终效果如图 3-1-16 所示。 图 3-1-16 输入文本后的表格效果图 步骤 3 修改表格 （1）插入行 选中表格中的第 6 行，然后单击菜单“修改”|“表格”|“插入行”命令插入行，或在选中 的行上单击鼠标右键，单击“表格”|“插入行”命令，得到如图 3-1-17 所示的效果。 图 3-1-17 插入行后的表格效果图 章章章第 1 章 网页布局技术 86 （2）合并单元格 ① 选中如图 3-1-7 所示单元格。 ② 单击菜单“修改”|“表格”|“合并单元格”命令，或按快捷键 Ctrl+Alt+M 合并单元格， 也可以单击属性面板上的 按钮合并单元格，效果如图 3-1-8 所示。 ③ 在新插入的行中，输入文本如图 3-1-18 所示。 图 3-1-18 合并单元格输入文本后的表格效果图 步骤 4 修改单元格 ① 文本对齐设置。选中第 1 行和第 6 行，如图 3-1-19 所示，将光标定位到第 1 行左边框 上单击，再按住 Ctrl 键，单击第 6 行的左边框。然后在属性面板的水平下拉列表框中选择“居 中对齐”选项，如图 3-1-20 所示。 图 3-1-19 选中表格中第 1 行和第 6 行 图 3-1-20 文本对齐操作 ② 字体设置。选中“兴趣小组”文本，在属性面板中设置字体为“黑体”。将表格中的其 他字体设置为“宋体”，大小为“9 点数”。 ③ 单元格中颜色设置。选中第 1 行，在属性面板中设置背景颜色为“#00FF00”。同理设 置下面第 4 行、第 5 行、第 7 行、第 8 行的背景颜色为“#F7F3D2”。 ④ 列宽设置。用鼠标选中第 2 列到第 5 列，在属性面板设置宽为“120”，按回车键，得 到如图 3-1-13 所示课程表。 ⑤ 保存网页，按 F12 预览。 3．对照练习 （1）如果要选中某一行单元格，可以将光标定位在该行任一单元格中，然后在标签选择器 中单击标签 ，即可将整行选中。 3.1 表格布局技术章章章 87 （2）设置表格宽度是时，使用 单位，网页在浏览器中不会出现滚动条。 A．像素 B．百分比 C．厘米 D．毫米 （3）本练习使用已学知识制作如图 3-1-21 所示的工作表，美化表格，并设置相应的超 链接。 图 3-1-21 工作表效果图 4．任务 小结 学校三防设施建设情况幼儿园教研工作小结高血压知识讲座小结防范电信网络诈骗宣传幼儿园师德小结 通过本任务，学会在网页中插入表格，并能对表格的各组成元素进行选取、设置，能够熟 练运用表格中行或列的插入、删除，掌握单元格的合并、拆分等。本任务完成过程如图 3-1-22 所示。 章章章第 1 章 网页布局技术 88 明确任务：制作课程表 插入表格 输入文本 修改表格 修改单元格 完成对照练习 阅读：“知识预读”的内容，了解表格相关知识 图 3-1-22 3.1.1 任务完成过程 课堂任务 2 制作中小型企业网站 1．任务目标 ‹ 学会一些表格制作的常用设计技巧； ‹ 学会使用表格布局网页； ‹ 制作如图 3-1-23 所示的中小企业网站。 3.1 表格布局技术章章章 89 图 3-1-23 中小型企业网站效果图 2．实施步骤 步骤 1 创建站点和设置页面属性 启动 Dreamweaver 8 软件，新建一个站点“haoshida”。将所需素材放到该文件夹中。在站 点内新建一个空白网页，并将其保存为 haoshida.html，设置标题为“好时达企业网站”，页面背 景色为“#336699”，左边距、右边距、上边距和下边距分别为“0”，如图 3-1-24 所示。 步骤 2 创建布局表格 ① 在页面内插入一个 1 行 1 列的表格 1，如图 3-1-25 所示，选中表格，在属性面板中设 置表格的对齐方式为“居中对齐”。 章章章第 1 章 网页布局技术 90 图 3-1-24 页面属性的设置 图 3-1-25 插入表格 1 ② 将光标定位在表格 1 后，插入一个 1 行 2 列的表格 2，设置如图 3-1-26 所示，在表格 属性中将左边单元格的宽度设为“269 像素”，对齐方式为“居中对齐”。 图 3-1-26 插入表格 2 ③ 将光标定位在表格 2 的第 1 列中，在属性面板中设置垂直为“顶端”，设置背景色为 “# 0097D0”，然后在该单元格中插入一个 2 行 1 列的表格 3，表格属性设置如图 3-1-27 所示。 图 3-1-27 插入表格 3 ④ 将光标定位在表格 3 的第 2 行中，在属性面板中设置垂直为“居中”，插入一个 4 行 1 列的表格 4，属性设置如图 3-1-28 所示。 3.1 表格布局技术章章章 91 图 3-1-28 插入表格 4 ⑤ 将光标定位在表格 2 中的第 2 列，在属性面板中设置垂直为“顶端”，插入一个 2 行 1 列的表格 5，适当调整表格大小，最终得到如图 3-1-29 所示效果。 图 3-1-29 表格布局完成后的网页效果图 步骤 3 向布局表格中插入内容 ① 将光标定位在表格 1 中，在属性面板中选择单元格“背景”右边的文件夹图标，在弹 出的对话框中选择准备好的图像作为单元格的背景图像，并设置单元格的高度为“235 像素”。 效果如图 3-1-30 所示。 图 3-1-30 表格 1 插入背景图像后的效果图 ② 将光标定位在表格 3 的第 1 行中，在属性面板中垂直为“顶端”，插入相应的图像，并 设置单元格的高度为“44 像素”。效果如图 3-1-31 所示。 图 3-1-31 表格 3 插入图像后的效果图 ③ 将光标定位在表格 4 的第 1 行中，在属性面板中设置背景为“image/index_09.jpg”,或 章章章第 1 章 网页布局技术 92 者通过右边的按钮插入准备好的图像，设置单元格高度为“45 像素”。采用同样的操作将表格 4 的其他 3 行也添加上相同的背景图像。效果如图 3-1-32 所示。 图 3-1-32 表格 4 插入背景图像后的效果图 ④ 将光标定位在表格 5 的第 1 行中，并在属性面板中设置背景颜色为“#70C800”，将光 标定位在表格 5 的第 2 行，在属性面板中设置垂直为“底部”，插入相应的图像，设置单元格的 高度为“52 像素”。将所有调整到适合大小。最后效果如图 3-1-33 所示。 图 3-1-33 表格 5 插入图像后的效果图 ⑤ 添加标题动画。定位光标到表格 1 中，在单元格的属性面板中设置垂直为“居中”，水 平为“居中对齐”。向单元格中插入 Flash 动画作为网页标题，按 F12 预览，如果 Flash 文件并 没有居中到单元格中，可以适当的用空格键来调整。并设置 Flash 动画的背景为透明。效果如 图 3-1-34 所示。 图 3-1-34 表格 1 插入 Flash 标题动画后的效果图 ⑥ 输入导航栏。向表格 4 单元格中添加导航文本，在单元格的属性面板中选择水平为“居 中对齐”。要插入的文本和设置效果如图 3-1-35 所示。 3.1 表格布局技术章章章 93 图 3-1-35 表格插入文本后的效果图 提示 网页中文本的 CSS 样式为：字体为“宋体”，大小为“9 像素”，颜色为“#000000”设 置时，先选中相应文字，然后在属性面板中选择所设置的 CSS 样式。 ⑦ 补充和完善其余内容。最终效果如图 3-1-23 所示。 提示 使用表格进行布局需要注意的： ① 如果想让网页在 800 像素×600 像素的屏幕分辨率下满屏显示，布局表格的宽度最宽 为 778 像素，计算公式为 800–20（滚动条）–2（边框）=778；如果要在 1 024 像素×768 像 素的屏幕分辨率下满屏显示，布局表格的宽度最宽为 1 002 象素，计算公式为 1 024–20–2 =1002。 ② 不要创建多行多列的布局表格，布局表格应尽量创建为 1 行多列或多行 1 列；如果 确实需要多行多列，可以在表格内创建嵌套表格。 ③ 在使用嵌套表格创建页面布局时，首先需要对页面中的各类元素做一个大致的规 划，事先构思好布局的草图，这样可以在创建表格时节省大量的时间。 ④ 可以通过标签方便、快捷地选取表格。 ⑤ 一般把一个网页的所有内容分成几块放在几个表格中，如：标题和广告栏一个表格， 导航栏一个表格，正文一个表格，版权说明一个表格。 3．对照练习 （1）调整表格列宽时，按住 键，可以不改变其他的宽度。 （2）网页布局中，最外层表格一般使用 单位。 A．像素 B．百分比 C．厘米 D．毫米 （3）在所完成的“公司简介”网页的基础上，根据提供的素材，使用表格布局技术完成“最 新产品”、“产品介绍”和“联系我们”3 个子页，并设置相应的超链接。 章章章第 1 章 网页布局技术 94 提示 ① 在插入图像时注意根据图像的大小设置表格的大小。 ② 采用表格对网页进行布局，一般最外层表格一般使用像素作为单位，规定表格的大 小，而内部嵌套的表格，则使用百分比作为单位。 4．任务小结 通过本任务，学习了表格制作的常用设计技巧，在实践过程中，更进一步体会了使用表格 设计网页的含义。本任务完成过程如图 3-1-36 所示。 明确任务：制作中小型企业网站 创建站点和设置页面属性 创建布局表格 向布局表格中输入内容 完成对照练习 图 3-1-36 3.1.2 任务完成过程 3.2 DIV+CSS 布局技术 为什么要学习不同的布局技术？相对于表格布局技术，DIV+CSS 布局技术有什么优点？如 何运用 DIV＋CSS 进行网页的布局？在本节中，将学习如何运用 DIV+CSS 设计网站布局。 课堂任务 1 设计一列式布局 知识预读 Š什么是 DIV DIV 是一个 XHTML 支持的标签，如当用户运用表格布局时，代码中会出现
    这样的结构，当用户运用 DIV 时也会出现
    这样的结构。 DIV 是 XHTML 中指定的，专门用于布局设计的容器对象。当用户运用 DIV 时，只需将内 3.2 DIV+CSS 布局技术章章章 95 容（如文本、图像或其他标签）放到
    中，如
    欢迎进入 DIV+CSS 的地盘
    ， 但
    只是一个标签，只负责将内容标识为一个区域，不负责其他任何事情，如内容的修饰美 化、位置摆放一般由 CSS 来控制。 Š什么是 DIV+CSS 布局 DIV+CSS 布局可以用一句话来概括，运用 DIV 在网页上划出一块属于自己的地盘，运用 CSS 对这块地盘进行相应的排版、修饰和美化。 DIV+CSS 布局与传统表格(table)布局的区别在于：表格布局的定位都是采用表格，通过表 格的间距或者用无色透明的 GIF 图片来控制布局版块的间距；而 DIV+CSS 布局采用层（div） 来定位，通过层的 margin,padding,border 等属性来控制版块的间距，而这些属性一般由 CSS 来 控制。如图 3-2-1 所示。 图 3-2-1 表格布局与 DIV+CSS 布局的区别 ŠID 与 CLASS 的区别 当用户在使用 CSS 的时候，通常会看到，不同的 CSS 定义却具有相同的效果，如图 3-2-2 所示。 章章章第 1 章 网页布局技术 96 ID 和 CLASS 定义 ID 和 CLASS 调用 生成的效果图 图 3-2-2 ID 和 CLASS 定义和调用的区别 那 ID与CLASS的定义和使用有什么区别呢？区别在于同一个名称的 ID值在当前XHTML 页面中，只允许使用一次；而不管是应用 DIV 还是其他对象，CLASS 都可以重复使用。 Š什么是块级元素与内联元素 块级元素一般是其他元素的容器元素，它可以容纳内联元素和其他块元素。内联元素一般 都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。如图 3-2-3 所示，表单是块级元素，而表单元素是内联元素。 图 3-2-3 块级元素（表单）和内联元素（表单元素）的区别 一般的块级元素诸如段落

    、标题

    、列表