边做边学-DreamweaverCS5网页设计案例教程

使用表格【实战演练】——租车网页使用“表格”按钮，插入表格；使用“页面属性”命令，设置页面的边距、页面标题；使用“图像”按钮，插入图像布局网页。〔最终效果参看光盘中的“Ch05>效果>租车网页>index.html5-1〕5-1设置页面属性并插入表格启动DreamweaverCS5Untitled-1.html选择“文件>保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择站点名目保存路径，在“文件名”选项的文本框中输入“index到编辑窗口。>页面属性”命令，在弹出的“页面属性”对话框左侧“分类”选项列表0，如5-2所示，单击“确定”按钮。单击“插入”面板“常用”选项卡中的“表格”按钮，在弹出的“表格”对话框中进展设置，如图5-3所示，单击“确定”按钮，效果如图5-4所示。保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项。40第5章 使用表格CHAPTER5图5-2 图5-35-4设置单元格背景颜色并插入图像将光标置入到第1行单元格中，在“属性”面板“水平”选项的下拉列表中选择“居中对齐”选项，将“高”选项设为254〔#4488CF，如图5-55-6所示。5-55-6单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”Ch05>素材>租车网页>imagesimg_03.jpg5-7所示。5-741边做边学—— DreamweaverCS5 网页设计案例教程2行单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05>>images”文件等中 夹中的img_06.jpg，单击“确定”按钮完成图片的插入，效果如图5-8所示。等职业教育数字艺术类规划教材5-8用一样的方法分别将img_07.jpg、img_08.jpg文件插入到第3行和第4行的单元格中，5-9所示。5-9保存文档，按F12键预览效果，如图5-10所示。5-10【实战演练】——设计家园网页使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，转变表格的高度和对齐方式；使用“CSS〔最终效果参看光盘中的“Ch05>效果>设计家园网页>index.html5-1〕42第5章 使用表格CHAPTER55-1>翻开”命令，在弹出的“翻开”对话框中选择“Ch05>>设计家园网页>index.html5-2所示。将光标放置在5-3所示。选择“插入>表格对象>导入表格式数据”命令，弹出“导入表格式数据”对话框。图5-2 图5-3”对话框，在光盘名目下的“Ch05>>info.txt”文件，单击“翻开”按钮，返回到对话框中，如图5-4所示，单击“确定”按钮，导入表格式数据，效果如图5-5所示。图5-4 图5-543边做边学—— DreamweaverCS5 网页设计案例教程保持表格的选取状态，在“属性”面板中进展设置，如图5-6所示，表格效果如图5-7所示。中等职业教育数字术艺 图5-6术类规划教材5-71Shift1列，在“属性”面板“水35，表格效果如图5-8所示。5-9示。图5-8 图5-9CSS样式”命令，弹出“CSS样式”面板，单击面板中的“建CSS规则”按钮

，在弹出的“建CSS规章”对话框中进展设置，如图5-10所示，单击“确定”按钮，弹出“.text的CSS规章定义”对话框，在左侧的“分类”选项列表中选择“类型”选项，将“Color5-11所示。在左侧的“分类”选项列表中选择“背景”选项，将“Background-color”选项设为红色〔#D80100，如图5-12所示，单击“确定”按钮，创立样式。选中如图5-13单元格。44第5章 使用表格CHAPTER5图5-10 图5-11图5-12 图5-13在“属性”面板“类”选项的下拉列表中选择“text5-145-15所示。图5-14 图5-15单击面板中的“建CSS规章”按钮，在弹出的“建CSS规章”对话框中进展设5-16.BJCSS规章定义”对话框，在左侧的“分类”选项列表中选择“背景”选项，将“Background-color”选项设为浅灰色〔#CCC，如5-17所示，单击“确定”按钮，创立样式。图5-16 图5-1745边做边学—— DreamweaverCS5 网页设计案例教程选中如图5-18BJ用样式，如图5-19所示，效果如图5-20所示。用一样的方法为其他单元格添加样式，如图等中 5-21所示。等职业教育数字艺术规类 图5-18 图5-19规划教材图5-20 图5-21保存文档，按F12键预览效果，如图5-22所示。5-2246第5章 使用表格综合演练——流行音乐网页【案例分析】流行音乐风格多样，形态丰富，所以流行音乐网站要突出流行、时尚等元素，符合年轻人的

CHAPTER5特点和需求，网页设计要求突出视觉上的效果，迎合年轻人的喜好和风格。【设计理念】在网页设计、制作过程中，网页背景承受深蓝色。使画面具有奇特的吸引力，人物的剪影以及炫酷的效果在画面的中心更加突出，黑白字体的使用，使画面干净，下方歌曲的的名目介绍，直观清楚，整体风格时尚丰富，符合年轻人的特点。【学问要点】使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，转变表格的宽度、单元格的高度和表格的对齐方式；使用“CSS〔最终效果参看光盘中的“Ch05>效果>流行音乐网页>index.html5-1〕>翻开”命令，在弹出的“翻开”对话框中选择“Ch05>>流行音乐网页>index.html5-2所示。图5-1 图5-25-3所示的单元格中，选择“插入>表格对象>导入表格式数据”5-4所示。47边做边学—— DreamweaverCS5 网页设计案例教程中等职业教育数字艺类术 图5-3 图5-4类规划 3 单击“确定”按钮，效果如图5-5所示。保持表格的选取状态，在“属性”面板中，将教材 “宽”选项设设410，在“对齐”选项的下拉列表中选择“居中对齐”选项，如图5-6所示，5-7所示。5-55-65-74 CSS样式”命令，弹出“CSS样式”面板，单击面板中的“建CSS规则”按钮

，在弹出的“建CSS规章”对话框中进展设置，如图5-8所示，单击“确定”按钮，弹出“.text的CSS规章定义”对话框，在左侧的“分类”选项列表中选择“类型”选项，将“Font-familyFont-size”选项设为14Color”选项设为浅灰色#535353，其他选项的设置如图5-9所示，单击“确定”按钮，创立样式。48第5章 使用表格CHAPTER5图5-8 图5-9选中如图5-10所示的单元格，在“属性”面板“水平”选项下拉列表中选择“居中对24text5-12所示。F125-13所示。图5-10 图5-11图5-12 图5-1349边做边学—— DreamweaverCS5 网页设计案例教程综合演练——建筑信息资讯网页中等职教业 5.4.1 【案例分析】教育数艺字 建筑信息网供给建筑行业资讯、工程信息、工程治理、建筑百科、合同大全、专家观点、房艺术类划规 地产业、建筑论文、机械设备、建筑考试、家装宝典等建筑询问，网页设计要求符合建筑行业的划教材特色。【设计理念】在网页设计、制作过程中，网页背景承受白兰搭配，蓝色的格子的脱离效果使画面产生了丰富的立体效果，设计图纸的使用，是网页更具技术感。画面丰富整齐舒适，给人信任的感觉，没有多余的修饰搭配，符合建筑信息这一行业特色。【学问要点】使用“页面属性”命令，设置页面的边距和标题；使用“表格”按钮，插入表格；使用“图〔Ch05>效果>建筑信息资讯网页>l5-1〕5-1启动DreamweaverCS5Untitled-1.html>保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择站点名目保存路径，在“文件名”选项的文本框中输入“index到编辑窗口。>页面属性”命令，在弹出的“页面属性”对话框左侧“分类”选项列表0，如5-2所示。50第5章 使用表格在左侧“分类”选项列表中选择“标题/编码”选项，在“标题”选项右侧的文本框中5-3所示，单击“确定”按钮，完成页面属性的修改。图5-2 图5-3

CHAPTER5单击“插入”面板“常用”选项卡中的“表格”按钮，在弹出的“表格”对话框中，将“行数”选项设为321062图5-4所示，单击“确定”按钮，效果如图5-5所示。保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项。图5-4 图5-5将光标置入到如图5-6所示的单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮 ，在弹出的“选择图像源文件”对话框中选择光盘“Ch05>素材>建筑信息资讯网页>imagesimg_01.jpg5-7所示。图5-6 图5-7将光标置入到第1行第2列单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮 ，在弹出的“选择图像源文件”对话框中选择光盘“Ch05>素材>建筑信息资讯网页>imagesimg_02.jpg5-8所示。51边做边学—— DreamweaverCS5 网页设计案例教程中等职业 图5-8教数育 7 将第2行全部单元格选中，如图5-9所示，单击“属性”面板中的“合并所选单元格，数艺字 使用跨度按钮艺类术 所示。类规划教材

5-1035-115-95-105-11将光标置入到第2行单元格中单“插入面“常用选项卡中“图像按钮 在弹出的“选择图像源文件”对话框中选择光盘“Ch05>素材>建筑信息资讯网页>images”文件夹中的“img