Dreamweaver网页设计与制作案例教程 (4)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
导航条制作效果
4.2.4 插入文本
步骤1 在“中部左1”表格的1行1列单元格内定位 光标，输入文本“酒店”，执行【格式】|【样式】 |【粗体】和【加强】菜单命令，格式化文本。
步骤2 选择“酒店”二字，在【单元格】属性面板 中选择【对齐】︱【左对齐】项及【格式】|【标题 2】项，如图所示。
设置“酒店”字体格式
步骤6 弹出的【图像标签辅助功能属性】对话框， 如图所示，可以设置图像的辅助属性，也可以直接单 击“确定”按钮。
【复制文件为】对话框
设置图像标签辅助功能属性
4.2.1 插入图像
步骤7 在【图像】属性面板中设置图像宽：210、高： 90等属性，如图所示；效果如图所示。
设置“logo”图像大小
插入“logo”效果
4.2.4 插入文本
步骤3 用同样的方法输入文 本“机票”、“旅游”，效果 如图所示。
步骤4 在“中部右1”表格的 2行1列单元格内定位光标，输 入文本“热门信息”；执行 【格式】|【样式】|【粗体】 和【加强】菜单命令，并在 【单元格】属性面板中选择 【格式】|【标题3】项。
插入“酒店”等文本效果
插入“项目列表”图像
4.2.2 插入图像占位符
步骤1 在“顶部”表格 的2行3列单元格内定位光 标 ， 执 行 【 插 入 】|【 图 像 对 象 】|【 图 像 占 位 符 】 菜单命令，弹出【图像占 位符】对话框，设置参数 如图所示，单击“确定” 按钮；插入图像占位符效 果如图所示。
步骤2 选中“天气预报” 图像占位符，在【单元格】 属性面板中选择【对齐】 ︱【居中对齐】选项。
步骤4 提示所选择的图像不在本地站点“letuweb” 下，建议拷贝到“letuweb”下，如图所示，单击“是” 按钮。
“保存文档”提示信息
“复制图像”提示信息
4.2.1 插入图像
步骤5 弹出【复制文件为】对话框，如图所示，将 “logo.jpg”保存在文件夹：D:letuweb\daohang中， 单击“保存”按钮。
选择图像源文件
4.2.1 插入图像
步骤10 在【图像】属性 面板中设置图像宽：78、 高：60；用同样的方法插 入图像img02.jpg～ img07.jpg，效果如图所示。
步骤11 在“右部”最上 方灰色表格的1行1列定位 光标，插入“项目列表” 图像；将“项目列表”图 像复制到其他单元格中， 效果如图所示。
步骤5 单击“ ” 按钮，输入“酒店机 票”项目名称：dh31， 用与“目的地”页面 相同的方法选择所需 要的图像，【插入导 航条】对话框中的参 数设置如图所示。
【插入导航条】对话框参数设置
4.2.3 制作导航条
步骤6 用与添加“目的地”项目同样的方法添加 “餐饮美食”、“旅游度假”及“商旅管理”导 航条项目，单击“确定”按钮，完成导航条的插 入，保存网页，导航条制作效果如图所示。
【插入导航条】对话框参数设置
4.2.3 制作导航条
步骤4 单击“”按钮，输入“目的地”项目名称：dh21，
选择“目的地”项的“状态图像”及“鼠标经过图像”图像， 如图所示；在【插入导航条】对话框中的参数设置如图所示。
选择导航图像
【插入导航条】对话框参数设置
4.2.3 制作导航条
提示：注意“首页”是当前页，其项目的“状态图像” 与其他页面的“状态图像”是不相同的。
项目4
图文并茂的网页—文本与图像的应用
知识要点
1 掌握插入文本及特殊字符的方法 2 掌握的格式化文本的方法 3 掌握创建列表的方法 4 掌握插入图像及占位符的方法 5 掌握图像的编辑方法 6 掌握鼠标经过图像及导航条的制作方法
4.1 网页展示：向“首页”页面中插入文本或图像元素
在上一章使用表格完成 “乐途网”首页布局的 基础上，本章将把网页 的主要元素文本及图像 插入到布局表格中，使 网页具有丰富多彩的内 容。首页中主要插入了 文本、图像、图像占位 符等，并制作了用于超 链接的网页元素——导 航条，网页效果如图所 示。
4.2.1 插入图像
步骤2 在“顶部”表格的logo单元格内定位光标，执 行【插入】|【图像】菜单命令，弹出【选择图像源文 件】对话框，如图所示，选择图像：logo，单击“确 定”按钮。
选择图像文件
4.2.1 插入图像
步骤3 如果没有预先保存网页，并显示如图所示的对 话框，提示要先保存网页，单击“确定”按钮。
4.2.1 插入图像
步骤8 用同样的方法插入“顶部”图像：top.jpg、 logo.jpg，在【图像】属性面板中设置top.jpg的宽： 890、高：40，logo.jpg的宽：480、高：90，效果如图 所示。
插入“顶部”图像效果
4.2.1 插入图像
步骤9 在“左部”表格的1行2列定位光标：执行 【插入】|【图像】菜单命令，弹出【选择图像源 文件】对话框，如图所示，选择图像img01.jpg， 单击“确定”按钮 。
选择导航图像
4.2.3 制作导航条
步骤3 在【插入导航条】对话框中勾选“预先载入图 像”，并选择导航条插入方式为：水平，“首页”导航项 目参数设置如图所示。
提示：本章只学习制作导航条项目，导航条还不能实现超链接的功能，在“超级 链接”一章中，将导航条各项目中输入“URL”地址后，才可以实现网页间的跳转。
“首页”页面效果
4.2 网页制作
4.2.1 插入图像 步骤1 启动Dreamweaver CS4，在【标准】工具栏上单击
“打开”按钮，在弹出的【打开】对话框中，如图所示， 选择上一章已完成页面布局的文件index.html；打开的网 页文件如图所示，需要向表格中插入文本及图像等元素。
选择文件
使用表格布局的“首页”页面
设置图像占位符参数
插入图像占位符效果
4.2.3 制作导航条
步骤1 在“顶部”表格的3行单元格内定位光标，执行 【插入】|【图像对象】|【导航条】菜单命令，弹出 【插入导航条】对话框，如图所示。
【插入导航条】对话框
4.2.3 制作导航条
步骤2 在【插入导航条】对话框中输入“首页”项目百度文库名称：dh11；分别单击“状态图像”及“鼠标经过图 像”右侧的“浏览”按钮，选择图像文件，如图所示。
4.2.4 插入文本
步骤1 在“中部左1”表格的1行1列单元格内定位 光标，输入文本“酒店”，执行【格式】|【样式】 |【粗体】和【加强】菜单命令，格式化文本。
步骤2 选择“酒店”二字，在【单元格】属性面板 中选择【对齐】︱【左对齐】项及【格式】|【标题 2】项，如图所示。
设置“酒店”字体格式
步骤6 弹出的【图像标签辅助功能属性】对话框， 如图所示，可以设置图像的辅助属性，也可以直接单 击“确定”按钮。
【复制文件为】对话框
设置图像标签辅助功能属性
4.2.1 插入图像
步骤7 在【图像】属性面板中设置图像宽：210、高： 90等属性，如图所示；效果如图所示。
设置“logo”图像大小
插入“logo”效果
4.2.4 插入文本
步骤3 用同样的方法输入文 本“机票”、“旅游”，效果 如图所示。
步骤4 在“中部右1”表格的 2行1列单元格内定位光标，输 入文本“热门信息”；执行 【格式】|【样式】|【粗体】 和【加强】菜单命令，并在 【单元格】属性面板中选择 【格式】|【标题3】项。
插入“酒店”等文本效果
插入“项目列表”图像
4.2.2 插入图像占位符
步骤1 在“顶部”表格 的2行3列单元格内定位光 标 ， 执 行 【 插 入 】|【 图 像 对 象 】|【 图 像 占 位 符 】 菜单命令，弹出【图像占 位符】对话框，设置参数 如图所示，单击“确定” 按钮；插入图像占位符效 果如图所示。
步骤2 选中“天气预报” 图像占位符，在【单元格】 属性面板中选择【对齐】 ︱【居中对齐】选项。
步骤4 提示所选择的图像不在本地站点“letuweb” 下，建议拷贝到“letuweb”下，如图所示，单击“是” 按钮。
“保存文档”提示信息
“复制图像”提示信息
4.2.1 插入图像
步骤5 弹出【复制文件为】对话框，如图所示，将 “logo.jpg”保存在文件夹：D:letuweb\daohang中， 单击“保存”按钮。
选择图像源文件
4.2.1 插入图像
步骤10 在【图像】属性 面板中设置图像宽：78、 高：60；用同样的方法插 入图像img02.jpg～ img07.jpg，效果如图所示。
步骤11 在“右部”最上 方灰色表格的1行1列定位 光标，插入“项目列表” 图像；将“项目列表”图 像复制到其他单元格中， 效果如图所示。
步骤5 单击“ ” 按钮，输入“酒店机 票”项目名称：dh31， 用与“目的地”页面 相同的方法选择所需 要的图像，【插入导 航条】对话框中的参 数设置如图所示。
【插入导航条】对话框参数设置
4.2.3 制作导航条
步骤6 用与添加“目的地”项目同样的方法添加 “餐饮美食”、“旅游度假”及“商旅管理”导 航条项目，单击“确定”按钮，完成导航条的插 入，保存网页，导航条制作效果如图所示。
【插入导航条】对话框参数设置
4.2.3 制作导航条
步骤4 单击“”按钮，输入“目的地”项目名称：dh21，
选择“目的地”项的“状态图像”及“鼠标经过图像”图像， 如图所示；在【插入导航条】对话框中的参数设置如图所示。
选择导航图像
【插入导航条】对话框参数设置
4.2.3 制作导航条
提示：注意“首页”是当前页，其项目的“状态图像” 与其他页面的“状态图像”是不相同的。
项目4
图文并茂的网页—文本与图像的应用
知识要点
1 掌握插入文本及特殊字符的方法 2 掌握的格式化文本的方法 3 掌握创建列表的方法 4 掌握插入图像及占位符的方法 5 掌握图像的编辑方法 6 掌握鼠标经过图像及导航条的制作方法
4.1 网页展示：向“首页”页面中插入文本或图像元素
在上一章使用表格完成 “乐途网”首页布局的 基础上，本章将把网页 的主要元素文本及图像 插入到布局表格中，使 网页具有丰富多彩的内 容。首页中主要插入了 文本、图像、图像占位 符等，并制作了用于超 链接的网页元素——导 航条，网页效果如图所 示。
4.2.1 插入图像
步骤2 在“顶部”表格的logo单元格内定位光标，执 行【插入】|【图像】菜单命令，弹出【选择图像源文 件】对话框，如图所示，选择图像：logo，单击“确 定”按钮。
选择图像文件
4.2.1 插入图像
步骤3 如果没有预先保存网页，并显示如图所示的对 话框，提示要先保存网页，单击“确定”按钮。
4.2.1 插入图像
步骤8 用同样的方法插入“顶部”图像：top.jpg、 logo.jpg，在【图像】属性面板中设置top.jpg的宽： 890、高：40，logo.jpg的宽：480、高：90，效果如图 所示。
插入“顶部”图像效果
4.2.1 插入图像
步骤9 在“左部”表格的1行2列定位光标：执行 【插入】|【图像】菜单命令，弹出【选择图像源 文件】对话框，如图所示，选择图像img01.jpg， 单击“确定”按钮 。
选择导航图像
4.2.3 制作导航条
步骤3 在【插入导航条】对话框中勾选“预先载入图 像”，并选择导航条插入方式为：水平，“首页”导航项 目参数设置如图所示。
提示：本章只学习制作导航条项目，导航条还不能实现超链接的功能，在“超级 链接”一章中，将导航条各项目中输入“URL”地址后，才可以实现网页间的跳转。
“首页”页面效果
4.2 网页制作
4.2.1 插入图像 步骤1 启动Dreamweaver CS4，在【标准】工具栏上单击
“打开”按钮，在弹出的【打开】对话框中，如图所示， 选择上一章已完成页面布局的文件index.html；打开的网 页文件如图所示，需要向表格中插入文本及图像等元素。
选择文件
使用表格布局的“首页”页面
设置图像占位符参数
插入图像占位符效果
4.2.3 制作导航条
步骤1 在“顶部”表格的3行单元格内定位光标，执行 【插入】|【图像对象】|【导航条】菜单命令，弹出 【插入导航条】对话框，如图所示。
【插入导航条】对话框
4.2.3 制作导航条
步骤2 在【插入导航条】对话框中输入“首页”项目百度文库名称：dh11；分别单击“状态图像”及“鼠标经过图 像”右侧的“浏览”按钮，选择图像文件，如图所示。