网站设计开发课件-第五讲-兰州JQ-网页文本及媒体的应用

《网站设计开发课件-第五讲-兰州JQ-网页文本及媒体的应用》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、梦想...编织Web西安电子科技大学贺华副教授3.1Dreamweaver8简介3.2网页文本及媒体的应用3.3表格的应用3.4布局表格的应用3.5超级链接3.6框架的应用3.7CSS样式的应用3.8层和行为的应用3.9时间轴的应用3.10表单的应用3.11模板的应用习题3本节知识点插入文本，输入空格、特殊字符及日期　　格式化文本　　设置文本的属性　　项目列表的应用　　插入多媒体对象本节提纲3.2.1案例：制作简单的“睡美人”网页3.2.2文本的编辑操作3.2.3插入多媒体对象3.2.4上机实训3.2网页文本及媒体的应用3.2.1案例：制作简单的“睡美人”网页

2、制作简单的“睡美人”网页，在页面中插入文本、图像、水平线、日期、背景及空链接等。其效果图如图3-29所示。图3-29“睡美人”效果图实战步骤(1)创建站点及首页文件。(2)输入文本内容，设置字体。　　将光标放在段首，每个段落的开头空两格。文本面板设置为不换行空格。设置效果如图3-30所示。(4)设置背景和标题。　　①在“属性”面板中选择“页面属性”，在弹出的对话框中选择“背景图像(00111.jpg)”或“背景颜色”。　　②在“属性”面板中选择“页面属性”中的“标题/编码”→“标题”命令，输入标题的内容，如图3-32所示。图3-30文本的设置(3)插入水平线和日期

3、。　　①将光标放在要插入水平线及日期的位置。　　②单击“插入”→“HTML”→“水平线”命令。　　③选择“常用”插入栏中的　　按钮，在水平线上插入日期，如图3-31所示。(4)设置背景和标题。　　在“属性”面板中选择“页面属性”中的“标题/编码”→“标题”命令，输入标题的内容，如图3-32所示。(5)插入图像及其他内容。图3-31插入水平线及日期图3-32插入背景图像及标题3.2.2文本的编辑操作1．输入文本1)插入普通文本2)插入特殊字符3)在字符之间添加空格图3-33插入栏“文本”类别图3-34“插入其他字符”对话框(1)将中文输入法切换到全角模式，按一下空格

4、键则输入一个全角的空格。在属性面板的“格式”列表中选择“预先格式化的”选项后(如图3-35所示)，则可以按空格键输入空格。(2)使用快捷键Ctrl+Shift +空格键输入空格。4)文本的换行(1)将光标定位在需要换行的位置。(2)单击插入栏“文本”类别中的“换行符”按钮，或按快捷键Shift+Enter，即可在该位置插入一个换行符，从而使两段之间的距离和正常行距一样。图3-35设置“预先格式化的”格式2．插入其他文本1)插入水平线　　插入水平线的操作步骤如下：(1)在文档编辑区将插入点定位到所需位置。(2)选择“插入”→“HTML”→“水平线”命令。(3)单击“插入”

5、栏中的“HTML”按钮　　。　　初次绘制的水平线的格式往往不能满足实际需要，此时可通过水平线“属性”面板对其进行修改，如图3-36所示。图3-36水平线“属性”面板2)插入日期在制作网页时，有时需要插入当前的日期，Dreamweaver8提供了快速插入日期和时间的功能。具体操作步骤如下：　　①将光标定位在需要插入日期的位置。　　②选择“插入”→“日期”命令。　　③单击“插入”栏中“常用”类别上的按钮　　。　　④在弹出的对话框中选择日期格式，如图3-37所示。图3-37“插入日期”对话框3)插入列表创建以上列表的方法如下：(1)选中要设置为列表形式的文本，或将光标

6、置于要设置为列表的段落中。(2)选择“文本”→“列表”→“项目列表”或“编号列表”、“定义列表”命令，或者单击“属性”面板上的“项目列表”按钮　　或“编号列表”按钮　　。定义列表：决定整个列表和选定列表项的外观，其方法为：选择“文本”→“列表”→“属性”命令，或单击“属性”面板中的“列表项目”按钮，弹出“列表属性”对话框，如图3-38所示。图3-38“列表属性”对话框3．格式化文本文本格式一般包括文本的字体、字号、颜色及对齐方式等。通常可通过文本的“属性”面板来设置，如图3-39所示，在文档窗口中可以看到效果。只是在进行字体的设置时，先要在“字体列表”框中选择“编辑字体

7、列表”，然后选择要添加的字体，如图3-40所示。图3-39文本“属性”面板图3-40添加方正姚体后的结果3.2.3插入多媒体对象1．网页图像的基础知识1)网页图像格式2)颜色基础2．插入图像图像可以直接插入在页面中，也可以在表格、表单或层中插入。应用层还可以使图像交叠。　　使用以上任一种方式时都会出现“选择图像源文件”对话框，在其中选取所要插入的图像文件，如图3-41所示。然后单击“确定”按钮，则将选中的图像插入到指定的位置。图3-41“选择图像源文件”对话框1)设置图像属性热点工具图像名称图像宽度与高度浏览文件　　在文档