kl800.com省心范文网

创建基本网页,文本,图像轮换,链接,表单


创建基本网页
文本、图像、超链接、表单

第三章 创建基本网页
?

3.1 插入文本

?
?

3.2 插入图像
3.3 轮换图像

?
? ?

3.4 插入媒体
3.5 创建链接 3.6插入表单

3.1 插入文本
?

一般来说,网页中显示最多的是文本。所以对 文本的控制,以及布局在设计网页中占了很大

的比重,能否对各种文本控制手段运用自如,
是决定网页设计是否美观、富有创意及提高工

作效率的关键。
最适合于网页正文显示的字体大小和行距为: ⑴ 字体大小10~14像素px左右 ⑵ 行距15像素px左右

Dreamweaver插入文本
? ? ?

直接输入 复制和粘贴文本 导入word文档:“文件”菜单-“导入” word文档 实 例

注意内容
? ? ?

1、输入文本空格 2、实现文本换行 3、插入相关文本要素

1、输入文本空格
?

通过键盘上的空格键可以实现输入文本空格,这是 与很多文字处理软件是一样的,但是在DW中输入空 格的数量在字符输入的半角状态和全角状态是不一 样的。

?

输入法切换半角状态时,按空格键只能输入一个空 格,而无法连续输入多个空格。
如需输入多个连续的空格,可通过一下几种方法来 实现。

?

(1)将输入法切换到中文全角状态。

(2)直接按Ctrl+shift+spacebar。
(3)”插入”菜单—“HTML”命令—“特殊字符” — 不换行空格。

2、实现文本换行
?

当输入多个文本时就需要换行,这可以通过按 Enter键或shift+enter键来实现。

?
?

按Enter键换行的行距较大。
按shift+enter键来实现正常的换行。

3、插入相关文本要素
? ?

插入特殊字符 制作网页时有时需要输入一些键盘上没有的字 符,如注册商标符号、欧元符号等等。 方法是:“插入”菜单—HTML—特殊字符

?

? ?

插入文本列表 在网页中插入文本列表,可以使文本内容显得更加 工整、直观。 方法:① “文本”插入工具栏 ② 属性面板

?

4、插入水平线
?

使用水平线可以分割网页的文档内容和对象, 使文档结构清晰,层次分明,便于浏览。在网 页中合理地插入水平线可以取得很好的视觉效 果。
方法:“插入”—HTML —水平线

?

3.2 插入图像
?

图像是网页中最重要的元素之一,图像能够使网页变 得丰富起来,令人耳目一新.图像不但能美化网页, 而且与文本相比更能够直观地说明问题,使表达的意 思一目了然,加深浏览者的印象.
在网页中插入图像

?

?

设置图像的属性

3.2.1 在网页中插入图像
?

在Dreamweaver8中,可以在“设计”视图或“代码”
视图中将图像插入文档。在Dreamweaver文档中添加 图像时,可以设置或修改图像属性并直接在“文档” 窗口中查看所做的更改。

?

在网页中将光标置于要插入图像的位置,执行“插入” 菜单,选择“图像”命令,打开“选择图像源文件”

对话框。

“选择图像源文件”对话框





如果插入的图 像不在当前网 页所在的站点 , Dreamweaver将 提示是否将该 图片复制到所 在站点,一般 单击“是”

3.2.2 设置图像的属性
?





图像属性的设置主要是通过“属性”面板来完成的, 在“属性”面板中可设置图像的大小、位置、名称、

边框、替代文本、低解析度等内容,使图像更加符合
页面设计,并使其更加美观。

3.3 轮换图像
?

鼠标经过图像效果是指当访问者移动鼠标经过图像时,图

像变为另一幅图像,当鼠标离开时又恢复为原来的图像.
?

注意:两幅图像的大小完全相同。如果这两个图像大小不

同, Dreamweaver将自动调整第二个图像的大小,以匹配
第一个图像的属性。
?

方法:将光标置于文档中,执行“插入” 框。

“图像对象”

“鼠标经过图像”命令,打开“插入鼠标经过图像”对话

“插入鼠标经过图像”对话框

3.4 插入媒体
?

多媒体对象和图像一样,在网页中是一道亮丽的风景,它 能使网页丰富、活跃起来,使用Dreamweaver制作网页,

可以方便地插入各种多媒体对象。当需要编辑各种多媒体
对象时,可以在Dreamweaver窗口中启动相应的媒体外部 编辑器来编辑媒体。
?
? ?

插入flash动画
插入flash按钮 插入flash文本

3.4.1 插入flash动画
?

Flash动画是一种高质量的矢量动画,在网络中有着大量

的精美动画素材。让网页活跃起来,使用Dreamweaver制
作网页,可以在网页插入导出为.swf或.swt格式的Flash 按钮。
?

方法是:将光标置于文档中,执行“插入”

“媒体”

“Flash”命令,打开“选择文件”对话框。

“选择文件”对话框





3.4.2 插入flash按钮
?

使用Dreamweaver中的Flash按钮对象,可以创建或者

载入一组预设的Flash按钮,并为按钮添加文本、背
景颜色以及指向其他文件的链接。
?

方法是:将光标置于文档中,执行“插入”

“媒体”

“Flash按钮”命令,打开“插入Flash按钮”对话框。

“插入Flash按钮”对话框





3.4.3 插入flash文本
?




“媒体”

方法是:将光标置于文档中,执行“插入”

“Flash文本”命令,打开“插入Flash文本”对话框。

3.4.4 给网页添加背景音乐
?
?

通过普通的<bgsound>标签来给网页添加背景音乐。
在<body> </body>之间输入<bgsound>标签,并对其

属性进行相关设置以后就可以达到效果。

<bgsound>标签的属性
? ?

balance:设置音乐的左右均衡。 delay:进行播放延时的设置。

?
? ? ?

loop:循环次数的控制。
src :音乐文件的路径。 volume:音量设置。 其中loop=“-1”表示音乐无限循环播放,如果你 要设置播放次数,则改为相应的数字即可。

?

一般在添加背景音乐时,我们并不需要对音乐 进行左右均衡以及延时的设置,所以仅需几个

主要的参数就可以了。
? ?

最后的代码如下: <bgsound src=“music.mid” loop=“-1”>

3.5 创建链接
?

创建文件链接

?
?

创建图像链接
创建图像热点链接

?
?

创建电子邮件链接
创建锚点链接

3.5.1 创建文件/图像链接
?





在一般情况下,创建文件链接都是在“属性”面板中的 “链接”文本框中完成的。使用“属性”面板可以给当 前文档中的文本或者图像添加链接。

“目标”下来列表中的4个选项: _blank:将被链接文档加载到新的未命名浏览器窗口中。

_parent:将被链接文档加载到父框架集或包含该链接的框架窗口中。
_self:将被链接文档加载到与该链接文字相同的框架或窗口中。 _top:将被链接文档加载到整个浏览器窗口并删除所有框架。

3.5.3 创建图像热点链接
?

图像热点链接可以将一幅图像分割为若干个区域,并将这

些区域设置成热点区域。可以将这些不同热点区域链接到
不同页面,当浏览者单击图像上不同的热点区域时,就可 以跳转到不同的页面。

热点工具: “矩形热点”工具、 “椭圆热点”工具、 “多边形热点”

工具

?

方法:选中图像,单击“属性”面板中的“热点工具”按
钮,绘制一个矩形热点,在“属性”面板中设置“链接”。

3.5.4 创建电子邮件链接
?

通过电子邮件链接,可以方便浏览者反馈信息,并将信 息传送到对应的信件中。如此一来,可方便用户与网 站管理者或服务商之间互相沟通.例如,用户可通过电 子邮件链接提供意见给网站管理者。同时一些网站可 以让消费者通过电子邮件链接得到其所提供的各种信 息与帮助。

?

在网页中选中要实现电子邮件链接的文字,执行“插
入”菜单,选择“电子邮件链接”命令,打开“电子 邮件链接”对话框。

“电子邮件链接”对话框

3.5.5 创建锚点链接
?

在制作网页时,有些页面内容较多,页面就可能变长。 为了方便浏览,可以在页面中创建锚点链接。

?

在网页中将光标置于要插入锚点链接的位置,执行

“插入”菜单,选择“命名锚记”命令,打开“命名
锚记”对话框。

“命名锚记”对话框

3.6 插入表单
?

使用表单可以与站点的访问者进行交互并从用户那里 收集信息。表单从用户那里收集信息后,将这些信息

提交给服务器进行处理。
?

目前表单主要用来进行意见调查、在线查询、网上购 物、在线申请等。在表单中经常出现的字段有:单行

文本框、多行滚动文本框、单选框、复选框、下拉列
表框和按钮。

创建表单对象
?





在创建表单对象之前,首先必须在页面中插入表单。 表单对象
?
? ? ? ? ?

插入表单之后,可 以看到有个红色的 虚线框就表示表单

单行文本框
多行滚动文本框

单选框
复选框 下拉列表框 按钮

的范围,如果需要
插入表单对象则应 该在该区域之内插 入。


赞助商链接