第3章 创建和编辑网页文档

3.3
图像处理
3.3.2 设置图像属性 在网页中插入图像后可以对图像的各种相关属性进行设置, 在网页中插入图像后可以对图像的各种相关属性进行设置, 若要设置图像属性,请执行以下操作: 若要设置图像属性,请执行以下操作: 1.图像名称及大小:使用缩略图下面的文本框设置名称,以 1.图像名称及大小 使用缩略图下面的文本框设置名称, 图像名称及大小: 行为( 交换图像" 便在使用 Dreamweaver 行为(如"交换图像")或脚本语言 (如 JavaScript 或 VBScript)时可以引用该图像.而缩略图右 VBScript)时可以引用该图像 时可以引用该图像. 侧标明了所插入图像的大小. 侧标明了所插入图像的大小. 2.宽和高:以像素为单位指定图像的宽度和高度.当您在页 2.宽和高 以像素为单位指定图像的宽度和高度. 宽和高: 中插入图像时, 中插入图像时,Dreamweaver 自动用图像的原始尺寸更新这 些文本框. 文本框中输入新值, 些文本框.在"宽"和"高"文本框中输入新值,实现图像大 小改变,但却与图像的实际宽度和高度不相符, 小改变,但却与图像的实际宽度和高度不相符,若要恢复图像 原始值,可单击" 文本框右侧的" 原始值,可单击"宽"和"高"文本框右侧的"恢复图像到原 始大小"按钮重设大小. 始大小"按钮重设大小.
3.2 文字处理
3.2.4 插入更新日期 Dreamweaver提供了一个方便的日期对象 Dreamweaver提供了一个方便的日期对象,该对象 提供了一个方便的日期对象, 使用户可以以喜欢的格式插入当前日期, 使用户可以以喜欢的格式插入当前日期,还可以选择在每次 保存文件时都自动更新该日期. 保存文件时都自动更新该日期. 1.插入日期,星期和时间 1.插入日期 插入日期, 2.插入更新日期 2.插入更新日期 3.修改日期 3.修改日期 要修改网页中已插入的日期,有两种方法: 要修改网页中已插入的日期,有两种方法: (1)若没有勾选 储存时自动更新" (1)若没有勾选"储存时自动更新",则直接手动修 若没有勾选" 改日期. 改日期. (2)若勾选了 储存时自动更新" (2)若勾选了"储存时自动更新",则选中日期后在 若勾选了" 按钮,同样弹出"插入日期"对话框, 属性面板中单击 按钮,同样弹出"插入日期"对话框,在其 中编辑修改日期格式. 中编辑修改日期格式.
3.2 文字处理
文字处理主要包括:输入文字,设置文字大小,设置字 文字处理主要包括:输入文字,设置文字大小, 设置文本颜色,设置文本对齐方式等. 体,设置文本颜色,设置文本对齐方式等. 3.2.1 输入文字 1.输入文字: 输入文字: 打开Dreamweaver 8.0之后 之后, 打开Dreamweaver 8.0之后,然后在需要插入文本的 位置单击鼠标左键定位插入点,然后输入文字. 位置单击鼠标左键定位插入点,然后输入文字.如果需要开 始新的一段, <Enter>键即可 对应的HTML标签是 键即可, 标签是<p>; 始新的一段,按<Enter>键即可,对应的HTML标签是<p>; 如果想换行显示一段内容,可以按<Shift+Enter>组合键 组合键, 如果想换行显示一段内容,可以按<Shift+Enter>组合键, 对应的HTML标签是 标签是<br>; 对应的HTML标签是<br>;如果输入的文字超出一行的范 输入的文本将自动换行. 围,输入的文本将自动换行.
3.2 文字处理---输入文字 文字处理---输入文字
2.输入连续空格 8.0中一般只能输入一个空格 中一般只能输入一个空格, 在Dreamweaver 8.0中一般只能输入一个空格,若要 输入连续的空格时,可以采用下面几种方法中的一种: 输入连续的空格时,可以采用下面几种方法中的一种: 执行菜单命令"编辑/首选参数" 打开"首选参数" ①执行菜单命令"编辑/首选参数",打开"首选参数" 对话框后,选定"分类"栏中的"常规"选项, 对话框后,选定"分类"栏中的"常规"选项,然后在右边 编辑选项中勾选"允许多个连续的空格" 编辑选项中勾选"允许多个连续的空格"复选框即可. 将光标定位到需要输入多个空格的位置, ②将光标定位到需要输入多个空格的位置,切换到代码视 图即HTML源文档中连续输入多个 &nbsp;" 源文档中连续输入多个" 图即HTML源文档中连续输入多个"&nbsp;",或者单击插 入工具栏文本分类中的"字符"对象,弹出下拉菜单, 入工具栏文本分类中的"字符"对象,弹出下拉菜单,选择 不换行空格"选项即可. "不换行空格"选项即可. 切换到中文输入法,设置为全角输入状态, ③切换到中文输入法,设置为全角输入状态,然后在欲连 续输入空格的位置按空格键. 续输入空格的位置按空格键. 3.输入特殊字符
3.2 文字处理
3.2.2 编辑文字 1.设置文字标题与段落 设置文字段落与标题的方法基本相同,方法如下: 设置文字段落与标题的方法基本相同,方法如下: (1)将光标定位到应用段落样式或文本样式的文本中 (1)将光标定位到应用段落样式或文本样式的文本中, 将光标定位到应用段落样式或文本样式的文本中, 或直接选取文本. 或直接选取文本. (2)单击属性面板中的格式选择框 (2)单击属性面板中的格式选择框,在弹出的下拉列表 单击属性面板中的格式选择框, 中选择"段落" 标题" 中选择"段落"或"标题". 切换到代码视图,我们就会发现,字符属性面板的" 切换到代码视图,我们就会发现,字符属性面板的"格 列表框中的"段落" 标题1 标题2 标题3 式"列表框中的"段落","标题1","标题2","标题3", "标题4","标题5","标题6"和"预先格式化的"等选项, 标题4 标题5 标题6 预先格式化的"等选项, 分别对应HTML语言中的 语言中的<p>,<h1>,<h2>,<h3>, 分别对应HTML语言中的<p>,<h1>,<h2>,<h3>, <h4>,<h5>,<h6>和<pre>标记 <h4>,<h5>,<h6>和<pre>标记. 标记.
3.1 创建一个新文档
3.1.3 设置页面属性 页面属性是指网页的一般属性信息,例如,网页标题, 页面属性是指网页的一般属性信息,例如,网页标题, 网页背景颜色,背景图像,超链接颜色,跟踪图像等. 网页背景颜色,背景图像,超链接颜色,跟踪图像等. 1.设置网页标题及编码 1.设置网页标题及编码 2. 设置网页其他属性 (1)外观 (1)外观 (2)链接 (2)链接 (3)跟踪图像 (3)跟踪图像
3.2 文字处理---编辑文字 文字处理---编辑文字
2.设置文字字体及大小 (1)设置字体 (1)设置字体 (2)设置字号 (2)设置字号 3.设置文本颜色 4.设置方本对齐方式
3.2 文字处理
3.2.3 插入水平线 水平线对于组织信息很有用.在页面上, 水平线对于组织信息很有用.在页面上,可以使用一条 或多条水平线以可视方式分隔文本和对象. 或多条水平线以可视方式分隔文本和对象. 1,插入水平线 将光标移到要插入水平线的位置,执行菜单" 将光标移到要插入水平线的位置,执行菜单"插 HTML" 水平线"命令或者在"插入"栏中, 入"→"HTML"→"水平线"命令或者在"插入"栏中,选 HTML" 然后单击"水平线"按钮, 择"HTML",然后单击"水平线"按钮,插入一条默认宽度 和粗细的水平线. 和粗细的水平线. 2,修改水平线 选定插入的水平线,打开属性面板,设置水平线的高度, 选定插入的水平线,打开属性面板,设置水平线的高度, 宽度, 宽度,对齐方式以及是否有阴影等属性 3,设置水平线的颜色 选中水平线, 选中水平线,然后单击属性面板中的快速标签编辑器按 打开编辑标签窗口,键入代码,如将水平线设为红色, 钮,打开编辑标签窗口,键入代码,如将水平线设为红色, 键入代码:color="red". 键入代码:color="red"
网页设计与制作教程
中国水利水电源自文库版社 网页设计与制作》 《网页设计与制作》教材 配套电子教案 2007.6
第3章 创建和编辑网页文档
3.1 3.2 3.3 3.4 3.5 创建一个新文档 文字处理 图像处理 超级链接 使用多媒体对象
3.1 创建一个新文档
3.1.1 创建新的空白文档 8.0中可以创建新的空白文档 中可以创建新的空白文档, 在Dreamweaver 8.0中可以创建新的空白文档,创建以 模板为基础的文档以及打开并编辑已经存在的文档. 模板为基础的文档以及打开并编辑已经存在的文档. 三种方法: 三种方法: 1, 从启动界面中的"创建新项目"组合框中选择合 从启动界面中的"创建新项目" 适的文件类型,即可直接进入文档窗口进行编辑. 适的文件类型,即可直接进入文档窗口进行编辑. 2,也可选择主菜单中的"文件"→"新建"命令, 也可选择主菜单中的"文件" 新建"命令, 系统弹出新建文档对话框. 系统弹出新建文档对话框. 3,按下Ctrl+N快捷键,系统弹出新建文档对话框. 按下Ctrl+N快捷键 系统弹出新建文档对话框. 快捷键,
3.1 创建一个新文档
3.1.2 打开现有文档 8.0中可以打开现有的 中可以打开现有的Web页或基 在Dreamweaver 8.0中可以打开现有的Web页或基 于文本的文档,即使这些文档不是用Dreamweaver 于文本的文档,即使这些文档不是用Dreamweaver 8.0 创建的也可以将其打开,然后利用Dreamweaver 8.0在 创建的也可以将其打开,然后利用Dreamweaver 8.0在 设计"视图或"代码"视图中编辑该文档. "设计"视图或"代码"视图中编辑该文档. 打开现有的文档有以下几种方法: 打开现有的文档有以下几种方法: 1.在"文档"窗口中打开选择的文档 1.在 文档" 2.导入Word文档 2.导入 导入Word文档 3.在资源管理器中打开文档 3.在资源管理器中打开文档
3.3
图像处理----设置图像属性 图像处理----设置图像属性
3.源文件:指定图像的源文件.单击文件夹图标以浏览到 3.源文件 指定图像的源文件. 源文件: 源文件,或者直接键入路径. 源文件,或者直接键入路径. 4.链接:指定图像的超级链接.将"指向文件"图标拖 4.链接 指定图像的超级链接. 链接: 指向文件" 站点"面板中的某个文件, 到"站点"面板中的某个文件,或单击文件夹图标浏览到站 点上的某个文档,或手动键入URL. 点上的某个文档,或手动键入URL. 5.对齐:可以将图像与同一行中的文本,另一个图像,插 5.对齐 可以将图像与同一行中的文本,另一个图像, 对齐: 件或其它元素对齐.当图像与图像在网页中对齐时, 件或其它元素对齐.当图像与图像在网页中对齐时,可由属 性面板中的按钮,,来确定,当图像与文本, ,,来确定 性面板中的按钮,,来确定,当图像与文本,插件或其它元 素对齐时,可将图像视为一般字符, 素对齐时,可将图像视为一般字符,运用属性面板中的列表 来确定. 来确定.
3.3
3.3.1 插入图像
图像处理
在Dreamweaver中插入图像的基本方法是: Dreamweaver中插入图像的基本方法是 中插入图像的基本方法是: 1.将光标置于要插入图像的位置,在插入工具栏的"常用" 将光标置于要插入图像的位置,在插入工具栏的"常用" 类中单击"图像"按钮或选择"插入"菜单中的"图像"命令, 类中单击"图像"按钮或选择"插入"菜单中的"图像"命令, 打开"选择图像源文件"对话框. 打开"选择图像源文件"对话框. 2.在对话框中显示有图像文件名,文件类型和图像源的路径 在对话框中显示有图像文件名, URL(每个网页都有一个唯一的地址 URL(每个网页都有一个唯一的地址,称作统一资源定位器即 每个网页都有一个唯一的地址, URL).我们选取存放在站点中的图像文件,然后单击【确定】 URL).我们选取存放在站点中的图像文件,然后单击【确定】按 钮将显示"图像标签辅助功能属性"对话框, 替代文本" 钮将显示"图像标签辅助功能属性"对话框,在"替代文本"和 详细描述"文本框中输入内容,单击"确定"按钮, "详细描述"文本框中输入内容,单击"确定"按钮,即可将图 片插入到指定区域. 片插入到指定区域. 3.如果所选择的图像文件不在用户设定的当前站点,则将打 如果所选择的图像文件不在用户设定的当前站点, Dreamweaver"对话框. 开"Macromedia Dreamweaver"对话框.提示是否将图像文件 复制到根文件夹,单击【 按钮,然后打开"复制文件为" 复制到根文件夹,单击【是】按钮,然后打开"复制文件为"对 话框,定位到站点中用于存放图像文件的文件夹images, 话框,定位到站点中用于存放图像文件的文件夹images,最后单 保存】按钮即可. 击【保存】按钮即可.