第2章 网页元素的添加

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
5. 水平线 水平线主要用于分隔文档内容,使文档结构清晰,层次分明。单击菜单“ 水平线主要用于分隔文档内容,使文档结构清晰,层次分明。单击菜单“插 HTML” 水平线”命令,或单击插入面板组中“HTML” 入”→“HTML”→“水平线”命令,或单击插入面板组中“HTML”选项下的 按钮可插 入水平线,此时属性面板变为水平线属性面板,可对水平线的宽、高、对齐方式、阴影等 水平线属性面板, 对齐方式、 入水平线,此时属性面板变为水平线属性面板 可对水平线的宽、 进行设置。 进行设置。
2.1.2 新知解析
1. 文本的属性面板 在文档窗口输入一段文字,此时属性面板变为文本属性面板, 在文档窗口输入一段文字,此时属性面板变为文本属性面板,可通过文本属性 面板对文本进行设定。 面板对文本进行设定。
2.4
第2章
网页元素的添加
2.1 文本和页面属性
2. 插入空格 在Dreamweaver中,无论按键盘上的空格键多少次,只能添加一个空格。若要添加 Dreamweaver中 无论按键盘上的空格键多少次,只能添加一个空格。 多个空格,一般采用按住Ctrl+Shift +空格键的方法 每按一次,添加一个空格。 空格键的方法, 多个空格,一般采用按住Ctrl+Shift +空格键的方法,每按一次,添加一个空格。
2.10
第2章
网页元素的添加
2.2 图像的插入和设置
2.2.1 案例制作:网页“球星---亨利” 案例制作:网页“球星---亨利 亨利”
通过本案例的操作,你将学会:如何插入图像和设置图像属性、 通过本案例的操作,你将学会:如何插入图像和设置图像属性、如何设置网页背景颜 色、如何设置图像和文本的对齐方式和进行文本换行。 如何设置图像和文本的对齐方式和进行文本换行。
第2章
网页元素的添加
2.2 图像的插入和设置
2.2.3 技巧提示
1. 图像“属性”中的“对齐”与段落对齐方式的不同 图像“属性”中的“对齐” 2. 网页元素的定位
2.15
第2章
网页元素的添加
2.2 图像的插入和设置
2.2.4 实战演练:网页“球星风采”的制作 实战演练:网页“球星风采”
通过本案例的操作,你将学会:如何插入图像和设置图像属性、 通过本案例的操作,你将学会:如何插入图像和设置图像属性、如何借助表格进行 文本和图像的定位。 文本和图像的定位。
2.16
第2章
网页元素的添加
2.3 超链接的设置方法
2.3.1案例制作:网站“诗词大观” 2.3.1案例制作:网站“诗词大观”首页 案例制作
通过本案例的操作,你将学会:如何 通过本案例的操作,你将学会: 插入文本、图像和设置它们的属性、 插入文本、图像和设置它们的属性、如何 插入表格并借助表格进行文本和图像的定 如何建立锚记链接、电子邮件链接、 位、如何建立锚记链接、电子邮件链接、 绝对超链接、空连接。 绝对超链接、空连接。
2.20
第2章
网页元素的添加
2.3 超链接的设置方法
(2)网页内的超链接 创建网页内超链接是通过使用“命名锚记”来完成的。 命名锚记链接” 创建网页内超链接是通过使用“命名锚记”来完成的。 “命名锚记链接”一般用 在单个网页篇幅较长,浏览者需要翻屏查看的情况下。 在单个网页篇幅较长,浏览者需要翻屏查看的情况下。 制作锚记链接,首先将光标移到需要插入锚点的位置,单击菜单“插入” 制作锚记链接,首先将光标移到需要插入锚点的位置,单击菜单“插入”→“命 名锚记”命令,在弹出的对话框中输入锚记名称,单击“确定”按钮, 名锚记”命令,在弹出的对话框中输入锚记名称,单击“确定”按钮,于是就添加了 然后再创建跳转到这些命名锚记的超链接。建立锚记链接的格式是“ 命名锚记 。然后再创建跳转到这些命名锚记的超链接。建立锚记链接的格式是“#锚记 名称”。 名称”
2.17
第2章
网页元素的添加
2.3 超链接的设置方法
2.3.2 新知解析 2.3
1. 超链接的表现形式 (1)网页之间的超连接 (2)网页内的超链接 (3)E-mail链接 mail链接 (4)空链接和脚本链接 (5)图像热点链接
2.18
第2章
网页元素的添加
2.3 超链接的设置方法
(1)网页之间的超连接 要在网页中创建超链接,首先选中要创建链接的对象(文本、 要在网页中创建超链接,首先选中要创建链接的对象(文本、图像或其他页面对 然后可以通过以下3 象),然后可以通过以下3种方法创建超链接。 ),然后可以通过以下 种方法创建超链接。 在属性面板的“链接”文本框中输入目标对象的URL或路径。 或路径。 在属性面板的“链接”文本框中输入目标对象的URL或路径 拖动“链接”文本框后面的“指向文件”图标到“文件” 拖动“链接”文本框后面的“指向文件”图标到“文件”面板中的目标 对象上(默认使用相对路径)。 对象上(默认使用相对路径)。 单击“链接”文本框后面的“浏览文件”按钮,在打开的“选择文件” 单击“链接”文本框后面的“浏览文件”按钮,在打开的“选择文件” 对话框中选择链接对象,然后单击“确定”按钮。 对话框中选择链接对象,然后单击“确定”按钮。
2.5
第2章
网页元素的添加
2.1 文本和页面属性
3. 页面属性的设置 当我们需要对网页的整体外 观进行设置时,可通过“ 观进行设置时,可通过“页面属 性”命令进行设置。在属性面板 命令进行设置。 中单击“页面属性”按钮, 中单击“页面属性”按钮,或单 击菜单“修改”→“页面属性” 页面属性” 击菜单“修改” 命令,出现页面属性对话框。 命令,出现页面属性对话框。在 “外观”选项下可以整体上对网 外观” 页中采用默认方式输入的文字的 字体、大小、颜色、页面背景、 字体、大小、颜色、页面背景、 边距等进行设定。 边距等进行设定。
2.13
第2章
网页元素的添加
2.2 图像的插入和设置
宽和高:浏览器中为图像保留的宽度和高度,默认单位为像素。 宽和高:浏览器中为图像保留的宽度和高度,默认单位为像素。 源文件:指定图像的路径。 源文件:指定图像的路径。 链接:指定图像的超链接。 链接:指定图像的超链接。 替换:为图像添加注释。 替换:为图像添加注释。 编辑:单击其右侧的优化、裁剪、重新取样、亮度/对比度、 编辑:单击其右侧的优化、裁剪、重新取样、亮度/对比度、锐化等按 钮对图像进行处理, 钮对图像进行处理,也可以单击按钮打开指定的图像处理软件重新编辑 图像。 图像。 垂直边距:指定图像在垂直方向上与文本或其他网页元素的间距。 垂直边距:指定图像在垂直方向上与文本或其他网页元素的间距。 水平边距:指定图像在水平-方向上与文本或其他网页元素的间距。 水平边距:指定图像在水平-方向上与文本或其他网页元素的间距。 目标:指定链接时的目标窗口或框架。 目标:指定链接时的目标窗口或框架。 边框:指定图像边框的宽度 边框: 图像所处的段落在文档中的对齐方式。 图像所处的段落在文档中的对齐方式。 对齐:指定当前图像与旁边的文本的混排方式。 对齐:指定当前图像与旁边的文本的混排方式。 低解析度源:指定当前图像的低分辨率副本的路径。 低解析度源:指定当前图像的低分辨率副本的路径。 地图:用于制作图像热点链接。 地图:用于制作图像热点链接。 2.14
2.19
第2章
网页元素的添加
2.3 超链接的设置方法
设置完链接后,在属性面板的“目标”下拉列表框也变为可用状态。 目标” 设置完链接后,在属性面板的“目标”下拉列表框也变为可用状态。“目标” 下拉列表框中各选项的含义如下。 下拉列表框中各选项的含义如下。 _parent: _parent:在含有该链接的框架的父框架集或父窗口中打开目标文件。 _self:在该链接所在的窗口或同一框架中打开目标文件, _self:在该链接所在的窗口或同一框架中打开目标文件,此为默认选项。 _top:在整个浏览器窗口中打开目标文件,因而会删除所有框架。 _top:在整个浏览器窗口中打开目标文件,因而会删除所有框架。 _blank:在一个新的浏览器窗口中打开目标文件。 _blank:在一个新的浏览器窗口中打开目标文件。
2.8
第2章
网页元素的添加
2.1 文本和页面属性
2.1.3 技巧提示
1. 水平线颜色的修改 2. 换行与回车键的不同
2.9
第2章
网页元素的添加
2.1 文本和页面属性
2.1.4 实战演练:网页“藏獒鉴赏”的制作 实战演练:网页“藏獒鉴赏”
通过本案例的操作,你将学会:如何插入文本和设置文本的属性、 通过本案例的操作,你将学会:如何插入文本和设置文本的属性、如何插入网页背景图 像、如何插入水平线、日期、特殊符号并进行设置。 如何插入水平线、日期、特殊符号并进行设置。
2.6
第2章
网页元素的添加
2.1 文本和页面属性
4. 特殊字符 当在网页中需输入一些特殊字符时,可单击菜单“插入” 当在网页中需输入一些特殊字符时,可单击菜单“插入”→“HTML” →“特殊字符” 选择相应选项。 →“特殊字符”→选择相应选项。 特殊字符
2.7
Biblioteka Baidu
第2章
网页元素的添加
2.1 文本和页面属性
2.1.1 案例制作:网页“藏獒鉴赏”部分正文 案例制作:网页“藏獒鉴赏”
通过本案例的操作,你将学会: 如何插入文本和设置文本的属性、 通过本案例的操作,你将学会: 如何插入文本和设置文本的属性、 如何插入网页背 景图像和设置项目列表。 景图像和设置项目列表。
2.3
第2章
网页元素的添加
2.1 文本和页面属性
第2章
网页元素的添加
学习目标
掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局
2.1
第2章
网页元素的添加
本章内容
2.1 文本和页面属性 2.2 图像的插入和设置 2.3 超链接的设置方法 2.4 翻转图 2.5 Flash对象 Flash对象
2.2
第2章
网页元素的添加
2.1 文本和页面属性
2.12
第2章
网页元素的添加
2.2 图像的插入和设置
3. 图像属性面板 在网页中用鼠标单击图像,则图像处于选中状态,四周出现控制柄, 在网页中用鼠标单击图像,则图像处于选中状态,四周出现控制柄,拖动柄可调整 图像大小,同时属性面板显示出与图像有关的属性设置。 图像大小,同时属性面板显示出与图像有关的属性设置。
2.21
第2章
网页元素的添加
2.3 超链接的设置方法
(3)E-mail链接 mail链接 E-mail链接是一种特殊的链接,单击这种链接将打开一个空白通讯窗口,允许用户 mail链接是一种特殊的链接 单击这种链接将打开一个空白通讯窗口, 链接是一种特殊的链接, 创建电子邮件,并发送到指定的邮箱地址。 创建电子邮件,并发送到指定的邮箱地址。 创建E mail链接方法是选择要创建 mail链接的对象 然后在属性面板的“链接” 链接方法是选择要创建E 链接的对象, 创建E-mail链接方法是选择要创建E-mail链接的对象,然后在属性面板的“链接” 文本框中输入“mailto:”和E-mail地址,例如“mailto:gushi@sina.com”。还可以单击 地址, 文本框中输入“mailto:”和 mail地址 例如“mailto:gushi@sina.com”。 菜单“插入” 电子邮件链接”命令或单击“插入”面板“常用”选项卡下的“ 菜单“插入”→“电子邮件链接”命令或单击“插入”面板“常用”选项卡下的“电 子邮件链接”按钮,在打开的“电子邮件链接”对话框中进行设置, 子邮件链接”按钮,在打开的“电子邮件链接”对话框中进行设置,
2.11
第2章
网页元素的添加
2.2 图像的插入和设置
2.2.2 新知解析 2.2
1. 常见的图像类型和格式 目前已知的图像格式有几十种,但能在浏览器中显示的图像只有GIF、JPEG和 目前已知的图像格式有几十种,但能在浏览器中显示的图像只有GIF、JPEG和 PNG三种 而最常用的是GIF和JPEG两种 PNG三种,而最常用的是GIF和JPEG两种。 三种, 两种。 2. 插入图像 在插入图像前,应将图像与网页文件保存到同一文件夹。在网页中插入图像的方法 在插入图像前,应将图像与网页文件保存到同一文件夹。 如下。 如下。 将光标移到要插入图片的地方,选择“插入”→“图像”命令,打开“选择图像源 图像”命令,打开“ 将光标移到要插入图片的地方,选择“插入” 文件”对话框。选中需要插入的图像文件,单击“确定”按钮,打开“ 文件”对话框。选中需要插入的图像文件,单击“确定”按钮,打开“图像标签辅助功 能属性”对话框。输入所需的信息后,单击“确定”按钮, 能属性”对话框。输入所需的信息后,单击“确定”按钮,此时在文档窗口中将显示出 该图像。 该图像。
相关文档
最新文档