CH2 Dreamweaver的使用.pptVIP

Web技术及应用 Dreamweaver（chap2） 主 讲 教 师：陆有军 E-Mail地址：tjlyj@ 本 章 内 容 工作窗口 视图模式 首选参数 “编辑 首选参数” 站点 要制作一个能够被公众浏览的网站，首先需要在本地硬盘上制作这个网站，然后将这个网站传到Internet的Web服务器上。放置在本地磁盘上的网站称为本地站点，处于Internet上Web服务器里的网站称为远程站点。 网页中的基本元素 输入文本 一般字符的输入： 直接输入、剪贴板或导入Word文档 特殊符号的输入： “文本”工具栏→“字符”按钮 设置文本属性 文本属性 段落格式（段落对齐、段落间距、文本缩进等） 文字格式（字体、字号、颜色、粗体、斜体、下划线等） 设置方法 “文本”工具栏 “属性”面板 制作列表 设置方法：“属性”面板中的“项目列表”/ “编号列表”按钮 列表属性：快捷菜单→”列表” →”属性” 设置页面属性 页面属性 页面颜色：背景颜色、文字颜色、链接颜色 整体属性：背景图像、页面边距、页面标题、跟踪图像 设置方法 “修改”菜单→“页面属性” “属性”面板→“页面属性”按钮 例1:设置跟踪图像 练习文件 sample\tracing\tracing.htm 最终文件 sample\tracing\tracing-end.htm 任务要求 学会在页面中设置跟踪图像 大致步骤 设置跟踪图像（img.jpg）→设置透明度（50%）→完成设置 图像的插入和设置 插入图像 “插入”菜单→ “图像” “常用”工具栏→ “图像”按钮 例2:设置图像 练习文件 sample\imgproperties\imgproperties.htm 最终文件 sample\imgproperties\imgproperties-end.htm 任务要求 学会在页面中设置图像属性 大致步骤 设置对齐（右对齐）→设置边距（皆为20）→设置边框（1）→设置替换文字（开业庆典） 插入图像占位符 图像占位符 只是临时布局占位用的图像，在IE浏览时显示一个红叉。 插入方法 “插入”菜单→ “图像对象”→ “图像占位符” “常用”工具栏→ “图像”按钮→ “图像占位符” 设置方法 同图像设置 替换图像占位符 “属性”面板→“创建”按钮 “属性”面板→“源文件” 插入鼠标经过图像 鼠标经过图像 当鼠标移动到图像时，图像变成了另一幅图像；当鼠标移开时，又恢复成原来的图像。常应用于链接的按钮上。 插入方法 “插入”菜单→ “图像对象”→ “鼠标经过图像” “常用”工具栏→ “图像”按钮→ “鼠标经过图像” 例3:鼠标经过图像 练习文件 sample\imgover\imgover.htm 最终文件 sample\imgover\imgover-end.htm 任务要求 学会在页面中制作鼠标经过图像 大致步骤 定插入点→选择鼠标经过图像→选择原始图像（index_19.jpg和index_19-2.jpg） →设置替换文本（修饰图片） 插入导航条 导航条 由一系列的栏目按钮组成，并且一个网页中一般只有一个导航条。 插入方法 “插入”菜单→ “图像对象”→ “导航条” “常用”工具栏→ “图像”按钮→ “导航条” 例4:导航条 练习文件 sample\navbar\navbar.htm 最终文件 sample\navbar\navbar-end.htm 任务要求 学会在页面中制作鼠标经过图像 大致步骤 定插入点→选择原始图像（home_data\lanc.gif） →选择鼠标经过图像（home_data\lanc2.gif） →设置替换文本（中文版） →其它（选中“预先载入图像”，选择“水平”，选中“使用表格”） 表格的制作 “插入”菜单→“表格”命令 “常用”工具栏→“表格”按钮 Ctrl+Alt+T 单元格的拆分和合并 单元格的拆分 “修改”菜单→“表格” →“拆分单元格” 单元格的合并 “修改”菜单→“表格” →“合并单元格” 表格的嵌套 定义 表格的嵌套其实就是在一个表格的其中一个单元格里再插入一个表格。 操作 定插入点→”插入”菜单→“表格” 格式化表格 “命令”菜单→“格式化表格” 例5:格式化表格 练习文件 sample\formattable\formattable.htm 最终文件 sample\formattable\formattable-end.htm 任务要求 学会在页面中格式化表格 大致步骤 定位光标→格式化表格（”AltRows:Basic Grey”） 表格数据排序 “命令”菜单→“排序表格” 例6:表格数据排序 练习文件 sample\sorttable\sorttable.htm 最终文件 sampl