03 dreamweaver基础应用

《03 dreamweaver基础应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、零基础学　DreamweaverCS3+ASP第3章Dreamweaver基础应用在Dreamweaver中，创建网页非常简单。用户只要熟悉Word文档的编写，就可以以所见即所得的方式，在网页中插入文本、图像、Flash及超链接等内容，从而制作出各式各样的网页。本章将详细讲解如何在网页中插入各种资源。3.1插入文本文本是网页中的基础元素。根据文本的作用，网页中的文本可以分为网页标题、普通文本和特殊字符三大类。本节将详细讲解如何插入这三类文本。3.1.1插入网页标题网页标题是整个网页的标题。它出现在浏览器的标题栏上。设置合理的标题，可以帮助读者通过标题，就可以区分各

2、个网页的内容。下面讲解如何设置网页标题。（1）启动Dreamweaver，单击【文件】

3、【新建】命令，打开【新建文档】对话框，选择【空白页】选项，然后在【页面类型】选项框选择【HTML】选项，在【布局】选项框中选择【无】选项，如图3.1所示。图3.1【新建文档】对话框（2）单击【创建】按钮，Dreamweaver创建一个空白的页面，如图3.2所示。励志照亮人生　编程改变命运32第4章Dreamweaver基础应用（3）单击工具栏上的【代码】按钮，切换到【代码】视图，如图3.3所示。在【代码】视图中，显示了Dreamweaver自动添加的一些HTML基本代码。如果设

4、计视图中没有打开【文档】工具栏，可以单击【查看】

5、【工具栏】

6、【文档】命令，显示【文档】工具栏，如图3.4所示。图3.2【设计】视图图3.3【代码】视图图3.4【文档】工具栏（4）在【标题】文本框中输入网页的标题，例如“第一个网页”。用户页可以单击【属性】面板上的【页面属性】按钮，打开【页面属性】对话框，如图3.5所示。单击【标题/编码】选项，然后在【标题】文本框中输入标题，在【编码】下拉列表框中选择【简体中文（GB2312）】选项，如图3.6所示。图3.5【页面属性】对话框（5）选择【文件】

7、【保存】命令，打开【另存为】对话框。在【文件名】文本框中输入网页名称，

8、励志照亮人生　编程改变命运33零基础学　DreamweaverCS3+ASP如test。（6）单击【保存】按钮，将网页保存到存放网页文件的文件夹中。（7）在浏览器中打开该页面，如图3.7所示。可见该网页的标题是刚才输入的标题，但是网页正文还是空的。图3.6设置标题图3.7浏览网页3.1.2插入普通文本网页中文本内容是内容表达的主要方式。根据输入方式的不同，可以分为普通文本和特殊字符。本小节首先讲解普通文本的插入。普通文本就是使用者可以在网页文档中按照文本方式直接输入的文本。操作步骤如下所示。（1）打开上一小节创建的网页，在【设计】图3.8编辑字体列表视图中，单击页

9、面空白处，输入文字“秋日”。（2）选中“秋日”，单击【属性】面板的【字体】下拉列表框，选择【宋体】选项。如果下列列表中没有该选项，则单击【编辑字体列表】选项，打开【编辑字体列表】对话框，添加字体，如图3.8所示。（3）单击【大小】下拉列表框，选择【24】，字体设置效果如图3.9所示。（4）单击回车键，输入其他文本，在输入文本的过程中，也可以在属性面板对字体、大小和颜色等进行设置，最终页面如图3.10所示。（5）完成文本输入后，选择【文件】

10、【另存为】命令，保存网页为test1.html。（6）在浏览器中打开该文档，网页显示效果如图3.11所示。图3.9更改文字大小

11、励志照亮人生　编程改变命运34第4章Dreamweaver基础应用图3.10输入普通文本图3.11网页最终效果3.1.3插入特殊字符在网页中，设计人员还经常需要插入一些特殊字符，如版权符号。这些特殊字符在HTML中以名称或数字的形式表示。例如，版权符号©表示版权声明，在HTML中用“©”表示；注册商标符号®表示注册商标声明，在HTML中用“®”表示。插入特殊符号的操作如下所示。（1）新建一个空白文档。在【设计】视图中，单击网页空白处。（2）输入版权的文字，如图3.12所示。图3.12输入版权文字励志照亮人生　编程改变命运35零基础学　Dreamw

12、eaverCS3+ASP（3）将光标插入到“Copyright”之后，单击【插入】面板的【文本】标签，打开【文本】工具栏，如图3.13所示。（4）单击工具栏末端的倒三角按钮，选择【©版权】命令，弹出信息提示对话框。该对话框提示特殊符号是否支持，如图3.14所示。单击【确定】按钮，关闭该对话框。插入版权符号完成，如图3.15所示。图3.13【文本】工具栏图3.14【Dreamweaver】对话框图3.15插入版权符号图3.16版权符号实体代码（5）单击【代码】标签，切换到【代码】视图。可以看到版权符号的HTML代码，如图3.16所示。（6）保存网页。打开该文件，最终

13、效果如图3