《网页设计与制作Dreamweaver-cs6》教学课件(全).pptx

1、网页设计与制作（Dreamweaver CS6）目录网页设计基础01020304Dreamweaver初级应用网页布局Dreamweaver高级应用网站的测试与发布0506综合应用01网页设计基础网页设计基础【任务1】体验HTML文档网页基础（1）选择“开始所有程序附件记事本”命令，在记事本窗口中输入以下HTML代码。（2）输入完毕，选择“文件保存”命令，打开“另存为”对话框，选择保存位置为素材库的chapter1文件夹，文件名为“myweb1.html”，保存类型为“所有文件”，单击“保存”按钮。网页设计基础（3）在“计算机”中打开chapter1文件夹，双击“myweb1.html”打开浏

2、览器浏览该网页，可以看到字幕“富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善”从右向左滚动，标题“社会主义核心价值观”出现在浏览器的标题栏，如左图所示。（4）右击浏览器空白处，在弹出的快菜单中选择“添加到收藏”命令，将该网页添加到收藏夹中，如右图所示。网页设计基础（5）启动Dreamweaver CS6软件，选择“文件打开”命令，打开chapter1文件夹中的myweb2.html，如左图所示。（6）按【F4】键隐藏所有面板，单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver 的“代码”视图，对代码进行如右图所示的修改。网页设计基础（7）单击“设计”按钮切

3、换到设计视图，按【F12】键保存并浏览网页，如图所示。单击“Adobe官方网站”超链接，将在浏览器的新窗口中打开Adobe官方网站。（8）在Dreamweaver中打开chapter1文件夹中的myweb3.html，切换到代码视图。网页设计基础（9）在和之间添加以下代码。（10）选择“文件保存”命令，按【F12】键浏览该网页网页设计基础1.1 网页基础知识1Internet概述Internet，中文名称为“因特网”或“国际互联网”，是利用通信线路和通信设备将世界各地的计算机网络、主机和个人计算机互相连接起来，在网络协议控制下所构成的全球互联网系统。网页设计基础2WWW服务WWW 是 Worl

4、d Wide Web的缩写，其含义是“全球网”，也称其为“万维网”。WWW是一种基于HTTP（超文本传输协议）的交互式多媒体信息检索工具。使用WWW，可以在Internet上浏览各种信息资源。WWW服务采用客户机/服务器工作模式，由WWW浏览器、Web服务器和WWW协议组成。网页设计基础3Web站点和网页Web站点，又称为网站，是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，Web站点是一种通信工具，人们可以通过网站来发布自己想要公开的资讯，或者利用Web站点来提供相关的网络服务，浏览者可以通过网页浏览器来访问Web网站，获取需要的资讯或者享

5、受网络服务。网页设计基础4HTTP和URLHTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议，它允许将HTML文档从 Web 服务器传送到 WWW浏览器。Internet中的Web服务器数量众多，且每台服务器都包含有多个网页，用户要想在众多的网页中指明要获得的网页，就必须借助于统一资源定位符（URL,Uniform Resource Locators）进行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例如：某网页的URL为：http:/ 网站配色方案1色彩的基础知识（1）色彩的三要素色相：指色彩的相貌，也就是各种颜色之间的区别，是色彩最显著的特征。明度：指色彩本身的明

6、暗深浅程度，简单来说就是指色彩的程度。纯度：指色彩本身的鲜艳程度，又称为色彩的饱和度。（2）色彩的感觉2色彩的搭配原则（1）网页色彩搭配时，要善用单色、对比色、邻近色和同类色。（2）网页要用与众不同的色彩，不同类型的网站配以不同的色彩，从而表达不同的情感诉求。（3）色彩要和网站的内容、文化氛围相符合，以便更好地突出网站的特色。（4）网页配色时，尽量把颜色控制在三种之内，以免页面产生“乱”的效果。网页设计基础3网站常见的配色方案（1）儿童类网站：常运用幸福感强烈、充满温情、智慧和希望的黄色；干净、清澈的蓝色；渲染朝气、健康、自然的绿色；营造温馨氛围，活泼、朝气的橙色，如图所示。网页设计基础（2）

7、教育类网站：常运用平静、清澈的蓝色或充满希望的绿色，如图所示。网页设计基础（3）企业类网站：常运用沉稳、冷静、严谨、成熟的冷色调蓝色，给人一种稳定感，使访问者容易建立对网站的信任，如图所示。网页设计基础（4）购物类网站：常运用红色、黄色、橙色等暖色调渲染氛围，让浏览者感觉到轻松和愉快，如图所示。网页设计基础（5）旅游休闲类网站：常运用代表大自然、健康和希望的绿色，代表天空、海洋，干净清澈的蓝色，如图所示。网页设计基础1.3 网站设计常用软件1网站设计开发软件（1）文本编辑器制作网页通常使用HTML语言，HTML文档可以使用多种文本编辑器进行编辑，如记事本、Word、写字板、UltraEdit等

8、。（2）FrontpageFrontpage是微软公司推出的一款网页制作入门级软件。FrontPage使用方便简单，会用Word就能制作网页，所见即所得是其特点。（3）DreamweaverDreamweaver是由Adobe公司推出一款优秀的网站开发工具，是网页设计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护基于网站校准化的网站，它集成了众多网站开发中涉及的最新技术，扩展了页面设计与制作、多媒体开发和动画设计等功能，是当前最为流行的网站设计工具之一。2网页美化工具（1）Photoshop（2）Fireworks（3）Flash网页设计基础1.4 HTML文档入门1网站设计开发

9、软件1HTML语言概述HTML（Hypertext Marked Language，超文本标记语言）是用于创建Web文档的一种标记语言。自1990年首次用于网页编辑后，由于其编写制作的简易性，HTML迅速成为网页编程的主流语言，几乎所有的网页都是由HTML或其他语言程序嵌套在HTML语言中编写的。在IE浏览器任意打开一个网页，选择“查看源文件”命令，系统会启动记事本程序，打开该网页的源程序，如图所示。网页设计基础2HTML文档基本结构一个HTML文档是由一系列的网页元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。HTML文档的结构包括头部分（head）和主体部分（body）

10、两大部分，其中头部分描述浏览器所需的信息，主体部分则包含了所要说明的具体内容，HTML文档结构如图所示。网页设计基础3HTML文档常用标记（1）标题标记格式：网页的标题（2）主体标记格式：主体内容（3）文字标记格式：文本内容（4）段落标记格式：段落文本（5）换行标记格式：（6）水平线标记格式：（7）图像标记格式：网页设计基础3HTML文档常用标记（8）超链接标记格式：文本或图像（9）表格标记表格标记由表格标记、行标记和单元格标记3部分组成。（10）表单标记格式：（11）滚动标记格式：滚动方式文本网页设计基础【任务2】一个简单的JavaScript加法程序JavaScript脚本（1）选择“开始

11、所有程序附件记事本”命令，打开记事本窗口，在记事本中输入以下代码。网页设计基础（2）代码输入完毕，选择“文件保存”命令，打开“另存为”对话框，选择保存位置为素材库的chapter1文件夹，文件名为“myweb4.html”，保存类型为“所有文件”，单击“保存”按钮。（3）在“计算机”中打开chapter1文件夹，双击myweb4.html打开浏览器浏览该网页，效果如图所示。网页设计基础1.5 JavaScript脚本1常量在JavaScript中，常量有以下6种基本类型（1）整型常量：可以使用十六进制、八进制和十进制表示。（2）实型常量：由整数部分加小数部分表示，如12.12、125.369等

12、。（3）布尔值：布尔常量只有两种状态：true和false。（4）字符型常量：使用单引号或双引号括起来的一个或几个字符。（5）空值：JavaScript中有一个空值null，表示什么也没有。（6）特殊字符：JavaScript有以反斜杠（）开头的不可显示的特殊字符。2变量变量是存取数据、提供存放信息的容器。包括整数变量、字符型变量、布尔型变量和实数变量。网页设计基础3表达式和运算符（1）算术运算符通过算术运算符可以进行加、减、乘、除和其他数学运算。（2）逻辑运算符逻辑运算符比较两个布尔值（真或假），然后返回一个布尔值。（3）比较运算符比较运算符可以比较表达式的值，并返回一个布尔值。4基本程序语

13、句（1）if语句如果其中的条件成立，则执行语句1，否则执行语句2。（2）for语句实现条件循环，当条件成立时，执行语句集，否则跳出循环体。网页设计基础（3）break语句break语句是结束当前的循环，并把程序的控制权交给循环的下一条语句。（4）continue语句continue语句是结束当前的某一次循环，但并没有跳出整个循环。5函数函数是一个拥有名字的一系列JavaScript语句的有效组合，只要这个函数被调用，则该函数内的一系列JavaScript语句被顺序解释执行。定义一个函数和调用一个函数是两个截然不同的概念，定义一个函数只是让浏览器知道有这样一个函数，而只有在函数被调用时，其代码才

14、真正被执行。return语句指明由函数返回的值。02Dreamweaver初级应用Dreamweaver初级应用【任务3】独具匠心创建与管理本地站点（1）在D盘根目录中新建文件夹djjx，将素材renwu2.1文件夹中的所有内容复制到djjx中。运行Dreamweaver，选择“站点新建站点”菜单命令，弹出“站点设置对象”对话框，如左图所示。输入站点名称“独具匠心”，单击“本地站点文件夹”文本框后的“浏览文件夹”按钮，在打开的对话框中选择D:djjx文件夹作为站点根目录，单击“保存”按钮。此时，新定义的站点“独具匠心”出现在“文件”面板中，如右图所示。Dreamweaver初级应用（2）选择“

15、文件新建”菜单命令，弹出“新建文档”对话框，如图2-3所示。在左侧栏选择“空白页”选项，“页面类型”栏选择“HTML”，“布局”栏选择“无”，单击“创建”按钮，即可创建一个空白网页。选择“文件保存”菜单命令，打开“另存为”对话框，输入文件名index.html，单击“保存”按钮，即可在“文件”面板出现该文件。Dreamweaver初级应用（3）在“文件”面板中选择站点“独具匠心”，单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令，如左图所示。输入文件夹名称images，按【Enter】键完成，用来保存图像文件。在“文件”面板中按住【Ctrl】键依次单击bj.gif、ch.jpg和lian

16、.jpg这3个文件，按住鼠标左键将其拖动到images文件夹上，此时“文件”面板如右图所示。Dreamweaver初级应用（4）在“文件”面板中，双击打开jiangxin.html，按【F12】键打开浏览器预览，如图所示。（5）关闭浏览器窗口，将鼠标移到“文档”窗口上方的文件名标签上，单击“关闭”按钮，关闭该文件。在“文件”面板中，选择jiangxin.html文件，按【Del】键将其删除。Dreamweaver初级应用（6）选择“站点管理站点”菜单命令，打开“管理站点”对话框，如左图所示。选择站点“独具匠心”，单击“”按钮，打开“导出站点”对话框，如右图所示，选择保存位置，默认的站点定义文件

17、名是“独具匠心.ste”，单击“保存”按钮。Dreamweaver初级应用2.1 Dreamweaver的工作界面在桌面上双击Dreamweaver CS6的快捷图标,或选择“开始程序Adobe Dreamweaver”命令，打开Dreamweaver的开始界面，如左图所示。在开始页面中，单击“新建”栏中的“HTML”选项，将打开Dreamweaver的工作界面，如右图所示。Dreamweaver初级应用1工作区切换器单击“工作区切换器”下拉箭头，如图所示，在下拉菜单中，可以选择合适的工作区布局模式，不同工作区的界面会有所不同，系统默认的工作区是“设计器”。Dreamweaver初级应用2菜单

18、栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。菜单项按照功能的不同进行划分，使用户使用方便。例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。3文档工具栏和文档窗口“文档”工具栏包含“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图所示。“文档”窗口用来显示当前打开的文档，在这里进行网页的编辑制作。Dreamweaver初级应用4状态栏状态栏位于“文档”窗口的底部，提供与正在编辑的文档有关的信息和工具，

19、如上图所示。5“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。该面板的内容会根据选择对象的不同而显示不同的属性。6面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示，如下图所示。Dreamweaver初级应用7“插入”面板“插入”面板包含将各种网页元素插入到文档的快捷按钮，如左图所示。单击“常用”按钮，从下拉菜单中可以选择网页元素的类别，如右图所示。Dreamweaver初级应用8标尺、辅助线和网格在制作网页时，标尺、辅助线和网格可以帮助设计人员测量页面元素的大小，准确地放置和调整对象，从而可对网页进行布局，并且它们在浏览器

20、中不会显示。（1）标尺和辅助线l 选择“查看标尺显示”菜单命令，可在文档窗口的左边和上边显示标尺，如图所示。选择“查看标尺”子菜单中的“像素”、“英寸”或“厘米”命令，可以更改标尺的单位。l 从标尺向文档窗口内拖动鼠标，可产生水平或垂直辅助线，将鼠标放在辅助线上可以查看辅助线的位置或者拖动鼠标将其移动，进行精确定位。l 选择“查看辅助线锁定辅助线”菜单命令，可使辅助线不能移动。再次选择该命令，可以解除锁定。l 选择“查看辅助线”子菜单中的“靠齐辅助线”或“辅助线靠齐元素”项，则调整网页元素时，可使元素靠齐到辅助线。Dreamweaver初级应用（2）网格选择“查看网格设置显示网格”菜单命令，可

21、以显示或隐藏网格，如图所示。选择“查看网格设置网格设置”菜单命令，弹出“网格设置”对话框，如图所示，可以对网格的间隔大小、颜色、是否靠齐网格等进行设置。Dreamweaver初级应用2.2 站点的创建与管理1创建本地站点在Dreamweaver中创建Web站点，通常先在本地磁盘上创建本地站点，经过一系列的测试后，再将这些网页的副本上传到一个远程Web服务器，成为真正的站点供他人在互联网上浏览。（1）运行Dreamweaver，选择“站点新建站点”菜单命令，弹出“站点设置对象”对话框，如图所示。（2）选择对话框中的“站点”选项，在“站点名称”文本框中输入用户自定的站点名称。在“本地站点文件夹”文

22、本框中直接输入站点文件夹的路径，或单击后面的“浏览文件夹”按钮，在打开的“选择根文件夹”对话框中进行选择。Dreamweaver初级应用（3）如果要对站点属性进行详细的设置和调整，可以选择“高级设置”选项，如图所示，在弹出的选项卡中进行设置。（4）在“站点设置对象”对话框中单击“保存”按钮，完成本地站点的创建，此时“文件”面板中将显示站点中所有文件和文件夹。Dreamweaver初级应用2编辑站点（1）选择“站点管理站点”菜单命令，或在“文件”面板的下拉列表中选择“管理站点”命令，如左图所示，打开“管理站点”对话框，如右图所示。（2）选择要编辑的站点，单击“编辑”按钮或直接双击站点名称，在弹出

23、的“站点设置对象”对话框中可以对站点信息进行修改。（3）编辑完成后，单击“保存”按钮，返回“管理站点”对话框，单击“完成”按钮。Dreamweaver初级应用3复制站点在制作网站的过程中，如果仅需更改站点中的部分页面内容而不破坏原站点的内容时，可以先将站点复制出来，然后在其副本上修改，这样可以快速创建多个结构相同的站点。（1）选择“站点管理站点”菜单命令，打开“管理站点”对话框，在弹出的“管理站点”对话框中选择要复制的站点，单击“复制”按钮，将会出现新站点。（2）用鼠标双击新复制出的站点，在弹出的“站点设置对象”对话框中进行修改，单击“保存”按钮，返回“管理站点”对话框，单击“完成”按钮。4删

24、除站点选择“站点管理站点”菜单命令，打开“管理站点”对话框，选择要删除的站点，单击“删除”按钮，即可将站点删除。删除站点，只是删除了站点的定义信息，硬盘中相应位置的文件和文件夹并不会被删除。Dreamweaver初级应用5导出和导入站点如果在两台计算机之间移动站点，或多个用户共同开发网站，可通过Dreamweaver的导入和导出站点功能来实现。（1）导出站点l 选择“站点管理站点”菜单命令，打开“管理站点”对话框，选择要导出的站点，单击“导出”按钮。l 在弹出的“导出站点”对话框中，选择站点定义文件的保存位置，输入站点定义文件的文件名，单击“保存”按钮。导出站点时，只是将站点的定义信息保存到站

25、点定义文件（扩展名是.ste）中，不包括站点文件夹中的文件和文件夹。（2）导入站点l 选择“站点管理站点”菜单命令，打开“管理站点”对话框，单击“导入”按钮，弹出“导入站点”对话框。l 选择导入站点定义文件,单击“打开”按钮，再单击“管理站点”对话框中的“完成”按钮。站点被导入后，导入的站点将出现在“文件”面板的列表中，如果有重名站点，则导入的站点名称后面自动加上数字“2”。Dreamweaver初级应用2.3 文档的基本操作1创建文件夹若创建站点的内容不复杂，可将网页直接存放在站点文件夹下，而对于其他的资源可根据种类建立不同的文件夹进行存放，以便于管理和查找。例如：images文件夹存放站点

26、中的图像文件，music文件夹存放站点中的声音文件等。若站点复杂，网页也需要存放在不同的文件夹中，这样可以方便对网站进行修改。在本地站点中创建文件夹可使用以下方法。l 通过“我的电脑”或“资源管理器”直接在站点文件夹中进行创建。l 在“文件”面板中选择站点名称或文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令，输入文件夹的名称，按【Enter】键完成。2创建空白网页文件l 启动Dreamweaver后，窗口中会出现一个开始页面，单击“新建”栏的“HTML”选项即可创建一个空白网页。l 选择“文件新建”菜单命令，打开“新建文档”对话框，选择“空白页”选项卡中的“HTML”页面类型，

27、在“布局”列表中选择“无”，单击“创建”按钮。l 在“文件”面板中选择站点，单击鼠标右键，从弹出的快捷菜单中选择“新建文件”命令，输入文件的名称，按【Enter】键完成。Dreamweaver初级应用3保存网页文件选择“文件保存”菜单命令或按【Ctrl+S】组合键可对当前文档进行保存。如果对打开的文档进行了修改，但尚未保存，文件名后将自动显示一个“*”，如图所示，保存后“*”将消失。Dreamweaver初级应用4文档的打开和预览l 选择“文件打开”菜单命令，弹出“打开”对话框，选择要打开的文件，单击“打开”按钮。l 在“文件”面板中，选择要打开的文档，右键单击鼠标，在弹出的快捷菜单中选择“打

28、开”命令，或直接双击鼠标都可以打开该文档。打开文档后，执行以下操作之一，用户可以在浏览器中预览页面。l 选择“文件在浏览器中预览IExplore”菜单命令。l 单击“文档”工具栏的“在浏览器中预览/调试”按钮，从弹出的菜单中选择“预览在IExplore”，如图所示。l 按【F12】键。Dreamweaver初级应用5移动和复制文件（文件夹）在“文件”面板中，选择要移动或复制的文件和文件夹。l 单击鼠标右键，在弹出的快捷菜单中选择“编辑拷贝”命令，然后选择目标位置，从快捷菜单中选择“编辑粘贴”命令，可完成文件或文件夹的复制操作。l 单击鼠标右键，在弹出的快捷菜单中选择“编辑剪切”命令，然后选择目

29、标位置，从快捷菜单中选择“编辑粘贴”命令，可完成文件或文件夹的移动操作。l 用鼠标直接将文件或文件夹拖动到新位置，可完成文件或文件夹的移动操作。6删除文件（文件夹）（1）在“文件”面板中，选择要删除的文件或文件夹。（2）单击鼠标右键，从弹出的快捷菜单中选择“编辑删除”命令或直接按【Del】键。（3）在弹出的提示对话框中单击“是”按钮，即可将文件或文件夹从本地站点中删除。Dreamweaver初级应用2.4 页面属性1打开“页面属性”对话框l 选择“修改页面属性”菜单命令。l 在“文档”窗口空白处单击鼠标右键，从弹出的快捷菜单中选择“页面属性”命令。l 按【Ctrl+J】组合键。l 单击属性面板

30、中的“页面属性”按钮。2设置页面属性“页面属性”对话框有“外观”“链接”“标题”“标题/编码”“跟踪图像”，可以设置页面的默认属性。（1）外观“页面属性”对话框如图。“外观”类别包括CSS外观和HTML外观，都可以对页面的“外观”进行设置。Dreamweaver初级应用l 页面字体：指定网页中使用的默认字体。l 大小：指定页面中使用的默认文本大小。l 文本颜色：指定文本显示的默认颜色。l 背景颜色：设置页面的背景颜色。l 背景图像：设置页面的背景图像。l 重复：指定背景图像在页面的显示方式，包括no-repeat(不重复)、repeat(重复)、repeat-x(横向重复)、repeat-y(

31、纵向重复)四个选项，显示效果如图所示。l 左边距和右边距：指定页面左边距和右边距的大小。l 上边距和下边距：指定页面上边距和下边距的大小。Dreamweaver初级应用（2）链接l 在“链接”选项中可以设置链接的属性，如左图所示。l 链接字体：指定页面链接文本使用的默认字体。l 大小：指定页面链接文本使用的默认文本大小。l 链接颜色：指定页面链接文本的颜色。l 已访问链接：指定已访问链接文本的颜色。l 变换图像链接：指定当鼠标指针位于链接文本上时显示的颜色。l 活动链接：指定用鼠标指针单击链接文本时显示的颜色。l 下画线样式：指定链接文本采用的下画线样式。列表中提供了4种样式，如右图所示，如果

32、选择“始终无下画线”，则自动取消网页链接文本的下画线。Dreamweaver初级应用（3）标题在“标题”类别中可以设置网页中标题的格式，即设置属性面板“格式”列表框中各标题的默认属性，如图所示。l 标题字体：指定网页中标题使用的默认字体。l“标题”选项组：分别为“标题1”至“标题6”指定文本的大小和颜色。Dreamweaver初级应用（4）标题/编码在“标题/编码”选项中可以设置网页标题的内容和编码类别，如图所示。l 标题：指定在浏览器窗口的标题栏上显示的页面标题。系统默认的网页标题是“无标题文档”。l 编码：指定当前网页中文本采用的编码类别。Dreamweaver初级应用（4）跟踪图像跟踪图

33、像是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助的背景。这样用户在编辑网页时即可精确定位页面元素。提示：如果在“页面属性”对话框中同时设置了背景颜色和背景图像，那么在网页中优先显示背景图像，没有图像的位置显示背景颜色。设置页面标题，还可以直接在“代码”视图窗口中，修改标题代码和之间的内容，如图示。Dreamweaver初级应用【任务4】独具匠心文本的设置（1）创建“工匠精神”页面。启动Dreamweaver，将renwu2.2文件夹中的素材复制到任务2.1建立的“独具匠心”站点中。选择“文件新建”命令，或按【Ctrl+N】组合键，弹出“新建文档”对话框

34、，选择“空白页”中的“HTML”类型，单击“创建”按钮。（2）选择“文件保存”命令，弹出“另存为”对话框，选择站点文件夹，输入文件名gjjs.html，单击“保存”按钮。选择“修改页面属性”命令，弹出“页面属性”对话框，如图所示。在“外观（CSS）”类别的“背景颜色”框中输入颜色代码#9FF。在“标题/编码”类别的“标题”文本框中输入“工匠精神”，单击“确定”按钮。Dreamweaver初级应用（3）将光标定位到文档窗口中，选择“文件”菜单中的“导入Word文档”命令，弹出“导入Word文档”对话框，如左图所示，选择text文件夹中的“工匠精神.doc”，单击“打开”按钮。在如右图所示的相应位

35、置按【Enter】键进行分段，将光标分别定位到正文各段的前面，连续按四次【Ctrl+Shift+Space】组合键，插入四个空格，完成各段落首行缩进的设置。Dreamweaver初级应用（4）选择第一行“工匠精神”四个字，在属性面板的“大小”列表框中选择24px，系统自动弹出“新建CSS规则”对话框，输入名称“ys01”，单击“确定”按钮。单击属性面板中的“字体”列表按钮，在列表中选择“编辑字体列表”命令，弹出“编辑字体列表”对话框，如左图所示，在“可用字体”列表中选择“黑体”，双击鼠标将其添加到“选择的字体”列表中，单击“确定”按钮。选择标题“工匠精神”，在属性面板中将其设为“黑体”，居中对

36、齐，颜色为c30。单击属性面板中的“HTML”按钮，在“格式”列表框中选择“标题1”，如右图所示。Dreamweaver初级应用（5）将光标定位到文档内容的最后，选择“插入”菜单中的“HTML水平线”命令。右键单击插入的水平线，在弹出的快捷菜单中选择“编辑标签”命令，弹出“标签编辑器”对话框，如左图所示，选择“浏览器特定的”选项，设置颜色为红色，单击“确定”按钮。（6）将光标定位到水平线后，按【Enter】键，选择“插入”菜单中的“HTML特殊字符版权”命令，输入文本“版权所有”，将文本选中，在属性面板中设置为“居中对齐”，系统自动弹出“新建CSS规则”对话框，输入名称“ys02”，单击“确定

37、”按钮。按【Ctrl+S】组合键保存文件，按【F12】键预览网页，如右图所示。Dreamweaver初级应用（7）创建“匠心匠魂”页面。在“文件”面板中选择站点“独具匠心”，单击鼠标右键，从弹出的快捷菜单中选择“新建文件”命令，输入文件名jxjh.html，按【Enter】键确认。（8）打开jxjh.html文件，在“文档”工具栏的“标题”文本框中输入“匠心匠魂”。将光标定位到文档窗口中，选择“文件”菜单中的“导入Word文档”命令，导入text文件夹中的“匠心匠魂.doc”的内容。（9）将光标定位到第一行标题“匠心匠魂”的前面，连续按四次【Ctrl+Shift+Space】组合键，选中“匠心

38、匠魂”，在属性面板的“大小”列表框中选择36，系统自动弹出“新建CSS规则”对话框，输入名称“ys03”；单击属性面板中的“字体”列表按钮，添加字体“隶书”，在属性面板中将其设为“隶书”，颜色为红色，如图所示。Dreamweaver初级应用（10）选中“匠心至臻如琢如磨”6行文字，在属性面板的“HTML”选项卡中，先选择项目列表，再选择格式下的“标题2”，如上图所示。（11）在标题“匠心匠魂”下面一行插入水平线，宽度为300像素，左对齐，如下图所示。Dreamweaver初级应用（12）按【Ctrl+S】组合键保存文件，按【F12】键预览网页，如图所示。Dreamweaver初级应用2.5 文

39、本的输入1在网页中添加文本（1）添加普通文本可以采用以下三种方法。l 直接通过键盘输入文本。l 在其他应用程序中，选择文本，按【Ctrl+C】组合键进行复制，在Dreamweaver的“文档”窗口中，选择“编辑粘贴”菜单命令（或按【Ctrl+V】组合键）复制文本。l 选择“文件导入Word文档”菜单命令，弹出“导入Word文档”对话框，选择要导入的Word文档，单击“打开”按钮，将该Word文档中的全部文本添加到“文档”窗口中。Dreamweaver初级应用（2）插入空格默认情况下，网页文档只允许在文本或字符之间输入一个空格，若要在文档中输入多个连续空格，可：l 选择“插入”面板中的“文本”类

40、别，在“字符”下拉菜单中选择“不换行空格”。l 选择“插入”“HTML”“特殊字符”“不换行空格”命令。l 按【Ctrl+Shift+Space】组合键。l 在“代码”视图窗口中，输入空格代码“ ”。l 切换中文输入法为全角状态，按空格键可以输入多个空格。l 选择“编辑首选参数”菜单命令，弹出“首选参数”对话框，如图所示。在“分类”列表中选择“常规”选项，勾选“允许多个连续的空格”复选框，单击“确定”按钮。此时，可以直接按空格键输入空格。Dreamweaver初级应用（3）插入特殊字符在网页中有时需要一些特殊字符，可使用以下方法输入。l 选择“插入”“HTML”“特殊字符”菜单命令，

41、在子菜单中选择要插入的特殊字符。l 用鼠标右键单击输入法工具条上的软键盘，如左图所示，从打开的列表中选择相应的符号组，如选择“特殊符号”，其软键盘如右图所示，单击可插入特殊字符。Dreamweaver初级应用（4）插入日期在网页中如果需要显示日期，可采用以下步骤完成。在“文档”窗口中，将插入点定位到需要插入日期的位置。选择“插入日期”菜单命令或单击“插入”面板“常用”类别中的“日期”按钮，弹出“插入日期”对话框，如图所示，设置完成后，单击“确定”按钮。l 其中，前3项用于设置星期、日期和时间的格式。l“储存时自动更新”复选框用于在下次保存该文档时，是否会自动更新日期。Dreamweaver初级

42、应用2文本的分段和换行（1）段落换行若想生成新的段落，在两段之间出现一空行，可采用以下方法进行换行。l 在需要换行的位置直接按【Enter】键。l 在代码视图窗口中输入段落标记和。（2）换行符换行若不想生成新的段落，两行之间不出现空行，可采用以下方法进行换行。l 按【Shift+Enter】组合键。l 选择“插入”“HTML”“特殊字符”“换行符”命令。l 选择“插入”面板中的“文本”类别，在“字符”下拉菜单中选择“换行符”。l 在“代码”视图窗口中，输入换行标记，如图所示。Dreamweaver初级应用3文本的属性设置格式美观的文本不仅可以传递大量的信息，还可以激发浏览者的阅读兴趣。要设置文

43、本的格式，需先选中文本，在出现的文本属性面板中，通过“HTML”和“CSS”界面都可以对文本的属性进行设置，如图所示。Dreamweaver初级应用（1）在“CSS”界面中设置文本格式在“文本”属性面板中单击“CSS”按钮，切换到文本的CSS设置界面。Dreamweaver默认的是宋体字，“字体”列表默认显示的是英文字体类型，若设置其他中文字体，需先将中文字体类型添加到字体列表中，方法如下：l 单击文本属性面板中的“字体”列表按钮，选择“编辑字体列表”命令，如左所示，弹出“编辑字体列表”对话框，如右图所示。l 在“可用字体”列表中选择要添加的字体，双击鼠标或单击按钮，将其添加到“选择的字体”列

44、表中，可以同时添加多种字体。单击按钮，可在“字体列表”中添加字体列表项。在“字体列表”中选择字体列表项，单击按钮，可将其删除。字体添加完毕后，单击“确定”按钮。Dreamweaver初级应用（2）在“HTML”界面中设置段落格式在“文本”属性面板中单击“HTML”按钮，切换到“HTML”界面，可以进行以下设置。l 设置段落标题的格式：在“格式”下拉列表中选择“标题 1 标题 6”即可设置段落的标题格式。若想去除已有的格式，可将格式选项设为“无”，如左图所示。l 设置段落的缩进方式：单击“内缩区块”按钮，即可设置段落的缩进，如果想取消，则单击左侧的“删除内缩区块”按钮。l 创建项目列表和编号列表

45、：单击“项目列表”按钮，可对段落添加项目列表符号。将光标定位到需要更改项目列表的文字上，单击“列表项目.”按钮，打开“列表属性”对话框，如右图所示。在“列表类型”下拉框中选择“项目列表”，在“样式”下拉框中选择样式，单击“确定”按钮，可以更改项目列表的样式。Dreamweaver初级应用单击“编号列表”按钮，可对段落添加编号列表符号。将光标定位到需要更改编号列表的文字上，单击“列表项目.”按钮，打开“列表属性”对话框，如图所示，在“列表类型”下拉框中选择“编号列表”，在“样式”下拉框中选择样式，单击“确定”按钮，可以更改编号列表的样式。Dreamweaver初级应用4插入水平线网页中经常会用一

46、条或多条水平线将不同的对象分隔，使整个页面更加整齐、美观。（1）插入水平线将光标定位到需要插入水平线的位置，执行以下操作之一，即可插入水平线。l 选择“插入HTML水平线”菜单命令。l 单击“插入”面板“常用”类别中的“水平线”按钮。（2）水平线的属性设置选择水平线，出现“水平线”属性面板，如图所示，可以设置水平线的属性。Dreamweaver初级应用2.6 CSS样式的基本操作1“CSS样式”面板可以使用“CSS 样式”面板查看、创建、编辑和删除 CSS 样式，并且可以将外部样式表附加到文档。执行以下操作之一均可打开“CSS样式”面板，如图所示。l 选择“窗口CSS样式”命令。l 按【Shi

47、ft+F11】组合键。l 单击属性面板上的“CSS面板”按钮。Dreamweaver初级应用2使用“CSS样式”面板创建CSS样式（1）打开“CSS样式”面板，单击面板右下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框，如图所示。（2）选择要创建的CSS样式的类型。（3）选择定义样式的位置，单击“确定”按钮。Dreamweaver初级应用（4）如果选择的是“新建样式表文件”选项，则打开“保存样式表文件为”对话框，如左图所示，选择样式表文件的保存位置，输入样式表文件名，单击“保存”按钮。如果选择某一样式表文件，如右图所示，则生成的样式将追加到该样式表文件中。如果选择的是“仅对该文档”选

48、项，则直接打开“CSS规则定义”对话框。（5）在“CSS规则定义”对话框中，从“分类”列表中选择样式选项，完成样式属性的设置后，单击“确定”按钮。Dreamweaver初级应用3定义CSS样式的属性“CSS规则定义”对话框共包括类型、背景、区块、方框、边框、列表、定位和扩展。（1）定义CSS样式“类型”属性在“CSS规则定义”对话框中的“分类”列表中选择“类型”选项，可以定义CSS样式的基本字体和进行类型设置，如左图所示。（2）定义CSS样式“背景”属性在“CSS规则定义”对话框中的“分类”列表中选择“背景”选项，可定义CSS样式的背景属性，如右图所示。Dreamweaver初级应用（3）定义

49、CSS样式“区块”属性在“CSS规则定义”对话框中的“分类”列表中选择“区块”选项，可以定义CSS样式的标签及属性的间距和对齐方式，如左图所示。（4）定义CSS样式“方框”属性在“CSS规则定义”对话框中的“分类”列表中选择“方框”选项，可对控制元素在页面上放置方式的标签和属性进行设置，如右图所示。Dreamweaver初级应用（5）定义CSS样式“边框”属性在“CSS规则定义”对话框中的“分类”列表中选择“边框”选项，可以定义元素周围边框的设置，如左图所示。（6）定义CSS样式“列表”属性在“CSS规则定义”对话框中的“分类”列表中选择“列表”选项，可为列表标签定义列表设置，如项目符号的大小

50、和类型，如右图所示。Dreamweaver初级应用（7）定义CSS样式“定位”属性在“CSS规则定义”对话框中的“分类”列表中选择“定位”选项，用来确定与选定的 CSS 样式相关的内容在页面上的定位方式，如左图所示。（8）定义CSS样式“扩展”属性在“CSS规则定义”对话框中的“分类”列表中选择“扩展”选项，用来定义光标、图像等内容的视觉效果，如右图所示。Dreamweaver初级应用4管理CSS样式（1）编辑CSS样式选择“窗口CSS 样式”命令，打开“CSS 样式”面板。执行下列操作之一，编辑CSS样式。l 双击要编辑的样式名称，打开“CSS 规则定义”对话框，然后进行更改。l 选择要编辑