第二章网页元素.docx

第二章网页元素.docx

《第二章网页元素.docx》由会员分享，可在线阅读，更多相关《第二章网页元素.docx（13页珍藏版）》请在冰豆网上搜索。

第二章网页元素

第二章网页元素

一、页面属性2

1、外观2

2、链接2

3、标题3

二、文本的插入与编辑4

1、插入文本4

2、编辑文本段落格式和字符4

3、特殊字符5

4、分段5

5、插入水平线5

6、插入时间5

练习一5

三、插入图像5

1、插入图像6

2、设置图像属性6

3、插入其它图像元素6

4、鼠标经过图像7

5、导航条7

练习二7

练习三7

四、其他网页素7

1、flash动画7

2、flash文本8

3、flash按钮8

4、音频/视频9

练习四10

一、页面属性

单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。

1、外观

“外观”是设置页面的一些基本属性。

我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。

左右上下边距是指当前页面的左右上下留出的空白空间的距离。

2、链接

设置文本链接方法:

文本属性——链接

“链接”选项内是一些与页面的链接效果有关的设置。

“链接颜色”定义超链接文本默认状态下的字体颜色；

“变换图像链接”定义鼠标放在链接上时文本的颜色；

“已访问链接”定义访问过的链接的颜色；

“活动链接”定义活动链接的颜色；

“下划线样式”可以定义链接的下划线样式。

3、标题

“标题”用来设置标题字体的一些属性。

文本属性中的“格式”设置有关。

4、标题/编码

标题：

用于输入网页的页面标题，在浏览网页时出现在浏览器的标题栏上。

编码：

当前文档页面的文字解码方式。

二、文本的插入与编辑    

1、插入文本

（1）、在Dreamweaver“文档”窗口中键入文本

（2）、复制和粘贴文本

（3）、导入文本

 2、编辑文本段落格式和字符

（1）、标准文本格式

DW定义了3类格准文本格式：

段落、标题和预格式化文本。

A、最小单位是段落。

 B、“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。

对应的字体由大到小，同时文字全部加粗。

C、预格式化文本指的就是用户预先对文字进行格式化，浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。

缺点：

不能被自动换行。

（2）、设置文本字体

    DW预设的可供选择的字体组合只有6项英文字体组合，要想使用中文字体，必须重新编辑新的字体组合，在“字体”后的下拉列表框中选择“编辑字体列表”，弹出“编辑字体列表”对话框：

（3）、列表格式

列表分为两种，有序列表

和无序列表。

无序列表：

没有顺序，每一项前边都以同样的符号显示；

有序列表：

前边的每一项有序号引导。

3、特殊字符

一些无法通过键盘输入的字符，需要使用DW特殊字符功能来添加。

（1）、“插入”面板-文本-最后一个按钮

（2）、“插入”菜单-HTML-特殊字符

注意：

输入空格方法

（1）、输入法“半角”改为“全角”，shift+ctrl+空格

（2）、特殊字符-不换行空格

4、分段

（1）产生空行分段法：

按enter键（回车键）

（2）、不产行空行分段法：

shift+enter键

5、插入水平线

水平线可以很好地分隔网页中的内容。

执行“插入”菜单-HTML-水平线命令。

高、宽修改:

属性面板

颜色修改：

鼠标右键---编辑标签---浏览器特定---颜色

   6、插入时间

（1）、“插入“面板组-常用-“日期”按钮

（2）、“插入”菜单-日期

练习一

创建站点ys,根据首页要求完成一至四题

三、插入图像

目前互联网上支持的图像格式主要有GIF、JPEG和PNG。

其中使用最为广泛的是GIF和JPEG。

1、插入图像

请把使用到的图片放在站点根目录下的文件夹（images文件夹）里 。

（1）、直接插入图像

  方法一：

 单击常用插入栏的“图像”按钮。

或利用“插入”菜单-图像。

方法二：

“插入”菜单——图像

注意：

如果我们在插入图片的时候，没有将图片保存在站点根目录下，会弹出提示对话框，提醒我们要把图片保存在站点内部，这时单击“是”按钮，

2、设置图像属性

   选中图像后，在属性面板中显示出了图像的属性，如下如所示。

 在属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。

在缩略图右侧有一个文本框，在其中可以输入图像标记的名称。

可以省略；

“宽”和“高”：

设置图像的宽度和高度；

“替代”：

用来设置图像的替代文本，当图像无法显示时，将显示这段文字；

   “类”：

选择应用于图像的CSS样式；

“链接”和“目标”：

链接是指给图像加的超链接，目标是指链接的打开方式；

“垂直边距”：

设置图像与上面、下面的文字之间的距离；

“水平边距”：

设置图像与左边、右边的文字之间的距离；

“边框”：

设置图像的边框粗细，默认的边框宽度为0；

“对齐”：

设置图像相对于同一段落或同一行中其他元素的对齐方式。

“

对齐按钮”：

设置整个段落在浏览器中居左对齐、居中对齐、居右对齐。

“编辑”：

可对图像进行简单的编辑和优化

    3、插入其它图像元素

在没寻找到合适的图片时，可使用占位符来代替图片位置。

“插入”-图像对象-图像占位符

双击图像点位符，就会弹出选择图像对话框，将制作好的图像插入占位符的位置上。

4、鼠标经过图像

指当鼠标经过图像时，原始图像会变成另一张图像，它由原始图像和鼠标经过图像两张图构成；要求：

两张图片一样大，否则系统会将鼠标经过图像调整到原始图像大小。

5、导航条

“插入”菜单-图像对象-导航条

先填写项目名称，再设置图像、前往的URL，最后选择确定或继续添加。

练习二

在ys站点中,根据首页要求完成五至六题

练习三

综合练习，建立唐诗网

四、其他网页素

1、flash动画

“插入”菜单-媒体-flash-扩展名为.swf的flash文件

重设大小：

返回其初始大小；

循环：

设置flash动画连续播放；

自动播放：

设置加载页面后自动播放；

品质：

设置越高，观看效果越好，对处理器要求越高。

2、flash文本

Dreamweaver可以帮你指定的文本制作为动画效果，生成动画文件。

“插入”菜单-媒体-flash文本

目标：

①_blank：

单击链接以后，指向页面出现在新窗口中。

②_self：

指向页面显示在当前框架中。

（默认值）。

3、flash按钮

用dreamweaver本身自带的flash按钮制作按钮。

“插入”菜单-媒体-flash按钮

注意：

制作flash文本和flash按钮时，站点文件夹的路径不要包含有中文字符，也不要把站点文件夹放到桌面上。

否则会出现以下提示

4、音频/视频

（1）链接形式

（2）、嵌入形式

在网页中插入音频时，考虑到下载速度、声音效果等因素，一般采用rm或mp3格式。

视频常见的格式有wmv、avi、mpg、rmvb等。

网页上播放的音乐或视频等媒体，依靠浏览者电脑所安装的播放程序，所以浏览者电脑必须事先安装有相应的播放程序才能正常浏览。

插入音频和视频的方法：

“插入”菜单-媒体-插件

提示：

插入的音乐和视频界面都是默认的32x32的大小，我们可以选中该音频或视频，在属性面板进行设置。

（3）、背景音乐形式

DW中没有提供插入背景音乐的按钮，所以我们只能通过代码设置标签来实现。

“插入”菜单-标签-HTML标签-bgsound

练习四

利用插入多媒体知识完成家庭装饰网。