《Dreamweaver-网页设计与制作(第二版)课件整套电子教案.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver-网页设计与制作(第二版)课件整套电子教案.ppt（301页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、任务 1认识网站与网页任务 2使用 HTML 语言修改简单网页项目一项目一项目一项目一个人网页的简单美化个人网页的简单美化个人网页的简单美化个人网页的简单美化网站制作基础知识网站制作基础知识网站制作基础知识网站制作基础知识2 LOGO任务1认识网站与网页任务任务 1 1 认识网站与网页认识网站与网页认识网页的本质和网页中的常见元素认识网页的本质和网页中的常见元素掌握掌握IP地址、域名、网址等基本概念地址、域名、网址等基本概念理解静态网页与动态网页的区别理解静态网页与动态网页的区别任务任务 1 1 认识网站与网页认识网站与网页一、网页的本质一、网页的本质如图所示是新浪网的主页及其组成文件，由该图
2、可以看出，网页主要由如图所示是新浪网的主页及其组成文件，由该图可以看出，网页主要由文字、图像和动画等元素组成。网页包括一组文件，它们分别是网页文件文字、图像和动画等元素组成。网页包括一组文件，它们分别是网页文件（扩展名为（扩展名为htm、asp等）、图像文件（扩展名为等）、图像文件（扩展名为jpg、gif等）和等）和Flash动画动画文件（扩展名为文件（扩展名为swf）等。）等。任务任务 1 1 认识网站与网页认识网站与网页 新浪网主页及其组成文件任务任务 1 1 认识网站与网页认识网站与网页二、网页中的常见元素二、网页中的常见元素1.文本文本文本一直是最重要的信息载体与交流工具，网页中的信息
3、一般以文本为主。文本一直是最重要的信息载体与交流工具，网页中的信息一般以文本为主。在网页中可以通过字体、大小、颜色、底纹、边框等设置文本的属性。在网页中可以通过字体、大小、颜色、底纹、边框等设置文本的属性。构成网页的常用元素任务任务 1 1 认识网站与网页认识网站与网页2.图像图像在网页中图像既可以表达主题，也可以对网页起装饰作用。网页中的图片在网页中图像既可以表达主题，也可以对网页起装饰作用。网页中的图片一般为一般为JPG、PNG和和GIF格式，即以格式，即以.jpg（或（或.jpeg）、）、.png和和.gif为后为后缀的文件。缀的文件。3.超链接超链接超链接是网站的灵魂，是从一个网页指向
4、另一个目的端的链接。超链接是网站的灵魂，是从一个网页指向另一个目的端的链接。4.表单表单表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输入文本、单击单选框与复选框，以及从下拉菜单中选择选项。入文本、单击单选框与复选框，以及从下拉菜单中选择选项。任务任务 1 1 认识网站与网页认识网站与网页5.表格表格表格是网页排版的灵魂。使用表格排版是现在网页的主要制作形式。通过表格是网页排版的灵魂。使用表格排版是现在网页的主要制作形式。通过在表格中放置相应的图片或其他内容，网页中的元素得以方便地固定在设计在表格中放置相应的图片或
5、其他内容，网页中的元素得以方便地固定在设计的位置上，即可有效地组合成符合设计效果的页面。一般表格边线不在网页的位置上，即可有效地组合成符合设计效果的页面。一般表格边线不在网页中显示。中显示。6.动画动画动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。者的最有效的方法。任务任务 1 1 认识网站与网页认识网站与网页三、三、IP地址、域名和网址地址、域名和网址1.IP地址地址每一个主机在互联网上都有唯一的地址，这个地址称为每一个主机在互联网上都有唯一的地址，这个地址称为IP地址（地址（Internet
6、ProtocolAddress）。）。IP地址由地址由4组组0255之间的整数（可取之间的整数（可取0及及255）组成，组成，数字之间用点间隔。数字之间用点间隔。2.域名域名由于由于IP地址在使用过程中难于记忆和书写，人们又用一种与地址在使用过程中难于记忆和书写，人们又用一种与IP地址对应地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。独一无二的。任务任务 1 1 认识网站与网页认识网站与网页3.网址网址网址又称为网址又称为URL，英文全称是，英文全称是“UniformResourceLoc
7、ator”，即统一资源，即统一资源定位符。一个完整的网址由通信协议名称、域名或定位符。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中地址、网页在服务器中的路径和文件名的路径和文件名4部分组成。部分组成。网址示例任务任务 1 1 认识网站与网页认识网站与网页四、动态网页与静态网页四、动态网页与静态网页网页可分为动态网页（网页可分为动态网页（DHTML）和静态网页（）和静态网页（HTML）两大类。）两大类。从表现形式上来看，动态网页与静态网页从表现形式上来看，动态网页与静态网页URL的后缀不同，静态网页的的后缀不同，静态网页的后缀可以是后缀可以是.htm、.html、.xml、.sh
8、tml，而动态网页则是以，而动态网页则是以.asp、.jsp、.php、.cgi、.perl为后缀，并且在动态网页网址中通常有一个标志性符号为后缀，并且在动态网页网址中通常有一个标志性符号“？”。12 LOGO任务2使用HTML语言修改简单网页任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页掌握创建掌握创建HTML文件的方法文件的方法理解理解HTML文件结构文件结构掌握简单掌握简单HTML文件的编写方法文件的编写方法任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页HTML（HypertextMarkupLanguage，超文本标记
9、语言）不是一种编程，超文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。其语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。其最基本的语法是：最基本的语法是：内容内容。标记通常都是成对使用的，一个。标记通常都是成对使用的，一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠杠“/”。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页一、一、HTML文件的创建文件的创建人们经常使用网页这个概念，实际上，网页就是一个文件，这个文件
10、是利人们经常使用网页这个概念，实际上，网页就是一个文件，这个文件是利用用HTML写成的，所以又被称为写成的，所以又被称为HTML文件。文件。HTML文件的本质就是一个文件的本质就是一个文本文件，只是扩展名为文本文件，只是扩展名为“.htm”或或“.html”。在。在Windows操作系统中，操作系统中，最简单的文本编辑软件就是最简单的文本编辑软件就是Notepad（记事本）。（记事本）。HTML文件的创建方法非常简单，具体的操作步骤如下。文件的创建方法非常简单，具体的操作步骤如下。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页在记事本中输入 HTML 文件 修
11、改后缀名任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页保存后的 HTML 文件 在浏览器中的显示效果任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页二、二、HTML文件结构文件结构1.标记标记标记放在标记放在HTML文件的开头，并没有实质性的功能，只是一个形文件的开头，并没有实质性的功能，只是一个形式上的标记，在式上的标记，在HTML文件开头使用文件开头使用标记开始。标记开始。2.标记标记称为头标记，一般放在称为头标记，一般放在标记里，其作用是放置关于此标记里，其作用是放置关于此HTML文件的信息，如提供索引、定义文件的信息，如
12、提供索引、定义CSS样式等。样式等。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页3.标记标记称为标题标记，包含在称为标题标记，包含在标记内，其作用是设定网页标题，标记内，其作用是设定网页标题，在浏览器左上方的标题栏中将显示这个标题，此外，在在浏览器左上方的标题栏中将显示这个标题，此外，在Windows任务栏中显任务栏中显示的也是这个标题。示的也是这个标题。4.标记标记称为主体标记，网页所要显示的内容都放在这个标记内，它是称为主体标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在。在后面项目中所介绍的文件的重点所在。在后面项目中所介绍的HTM
13、L标记都将放在这个标记都将放在这个标记内。标记内。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页三、简单的三、简单的HTML案例案例例例1.1设置标题。设置标题。新建空白的新建空白的html文件，文件，输入输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。标题标记标题标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页以下为标题样式：以下为标题样式：H1标题大小标题大小H2标题大小标题大小H3标题大小标题大小H4标题大小标题大小H5标题大小标题大小H6标题大小标题大小
14、标题标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.2设置文字颜色。设置文字颜色。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。字体颜色标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页设置文字颜色设置文字颜色这是蓝色文字这是蓝色文字任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.3同时设置加粗、倾斜以及文字的颜色。同时设置加粗、倾斜以及文字的颜色。新建空白的新建空白的
15、html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。蓝色粗斜字体任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页蓝色粗斜字体蓝色粗斜字体这是蓝色粗斜字体这是蓝色粗斜字体任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.4插入本项目素材中的插入本项目素材中的“cup.jpg”图片。图片。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开
16、这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。插入图片任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页插入图片插入图片网页也可以图文并茂网页也可以图文并茂!任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页例例1.5注释标记。注释标记。新建空白的新建空白的html文件，输入文件，输入HTML代码如下，在浏览器中打开这个网页，代码如下，在浏览器中打开这个网页，其效果如图所示。其效果如图所示。注释标记任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页注释标记注释标记这是正文文本
17、这是正文文本任务 3任务 1面板基本操作初识 Dreamweaver CS3 任务 2创建“fuligong”站点新建和管理站点为首页设置头信息和页面属性页面总体设置项目二项目二项目二项目二创建度假村网站创建度假村网站创建度假村网站创建度假村网站DreamweaverDreamweaverDreamweaverDreamweaverCS3 CS3 CS3 CS3 入门入门入门入门32 LOGO任务1面板基本操作初识DreamweaverCS3任务任务 1 1 认识网站与网页认识网站与网页熟悉熟悉DreamweaverCS3操作界面操作界面掌握网页文档的基本操作掌握网页文档的基本操作任务任务 1
18、 1 认识网站与网页认识网站与网页DreamweaverCS3工作界面如图所示，其界面大致可以直观地划分为工作界面如图所示，其界面大致可以直观地划分为9个部分。个部分。DreamweaverCS3 工作界面任务任务 1 1 认识网站与网页认识网站与网页一、文档窗口一、文档窗口文档窗口有三种视图状态，分别是代码、拆分和设计。在文档工具栏部分文档窗口有三种视图状态，分别是代码、拆分和设计。在文档工具栏部分有三个按钮，如图所示，可以快速地切换三种视图。有三个按钮，如图所示，可以快速地切换三种视图。视图切换按钮任务任务 1 1 认识网站与网页认识网站与网页二、状态栏二、状态栏状态栏提示当前创建文档的有
19、关信息，如图所示。状态栏提示当前创建文档的有关信息，如图所示。状态栏任务任务 1 1 认识网站与网页认识网站与网页三、三、“插入插入”工具栏工具栏“插入插入”工具栏提供的是部分操作或功能的快捷按钮，这些操作或功能在工具栏提供的是部分操作或功能的快捷按钮，这些操作或功能在编辑网页中会频繁使用。下图展示了其中的常用、布局、表单和文本四个部编辑网页中会频繁使用。下图展示了其中的常用、布局、表单和文本四个部分。分。“插入”工具栏（常用）“插入”工具栏（布局）任务任务 1 1 认识网站与网页认识网站与网页“插入”工具栏（表单）“插入”工具栏（文本）任务任务 1 1 认识网站与网页认识网站与网页四、四、“
20、文档文档”工具栏工具栏“文档文档”工具栏上有前面提到的文档视图切换按钮，同时还有新建、打开、工具栏上有前面提到的文档视图切换按钮，同时还有新建、打开、保存、剪切、复制、粘贴、页面预览、上传、根据保存、剪切、复制、粘贴、页面预览、上传、根据DTD声明验证声明验证HTML标标记等快捷按钮。记等快捷按钮。“文档”工具栏任务任务 1 1 认识网站与网页认识网站与网页五、五、“属性属性”面板面板“属性属性”面板用于对网页中元素属性进行设置，面板用于对网页中元素属性进行设置，“属性属性”面板中的属性项面板中的属性项动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属动态关联至鼠标选定的网页元
21、素。如图所示，分别展示的是网页中文本的属性面板和图像元素的属性面板。性面板和图像元素的属性面板。“属性”面板（图像属性）“属性”面板（文本属性）任务任务 1 1 认识网站与网页认识网站与网页六、六、“结果结果”面板面板“结果结果”面板用于显示几种常用操作的操作结果，如图所示。面板用于显示几种常用操作的操作结果，如图所示。“结果”面板任务任务 1 1 认识网站与网页认识网站与网页1.搜索搜索DreamweaverCS3提供的搜索功能十分强大，如图所示。其搜索范围可提供的搜索功能十分强大，如图所示。其搜索范围可以是鼠标选定的一段文字、当前文档、当前打开的几个文档、某个文件夹下以是鼠标选定的一段文字
22、、当前文档、当前打开的几个文档、某个文件夹下的所有文档，甚至是整个站点的文档。的所有文档，甚至是整个站点的文档。查找和替换功能任务任务 1 1 认识网站与网页认识网站与网页七、七、“文件文件”面板面板“文件文件”面板可以管理当前站点的文件和文件夹，无论它们是本地站点还面板可以管理当前站点的文件和文件夹，无论它们是本地站点还是在远程服务器上。是在远程服务器上。“文件”面板任务任务 1 1 认识网站与网页认识网站与网页八、面板组八、面板组面板组是分组在某个标题下的相关面板的集合，如图所示。面板组是分组在某个标题下的相关面板的集合，如图所示。面板组任务任务 1 1 认识网站与网页认识网站与网页1.C
23、SSCSS面板显示当前元素的面板显示当前元素的CSS式样，可以在该区域新建、修改或删除式样，可以在该区域新建、修改或删除CSS声明语句。声明语句。2.代码片断代码片断代码片断面板收集了许多常用代码段，包括代码片断面板收集了许多常用代码段，包括HTML代码、代码、JavaScript代代码等。码等。3.应用程序应用程序应用程序面板为使用动态技术页面的编写提供了方便，该部分包括数据库应用程序面板为使用动态技术页面的编写提供了方便，该部分包括数据库链接、数据集绑定、组件使用等方面的内容。链接、数据集绑定、组件使用等方面的内容。任务任务 1 1 认识网站与网页认识网站与网页4.标签检查器标签检查器标签
24、检查器动态关联到文档窗口内当前选定的元素标记，标签检查器列出标签检查器动态关联到文档窗口内当前选定的元素标记，标签检查器列出该标记具有的属性、可供该标记绑定的事件等。该标记具有的属性、可供该标记绑定的事件等。5.资源资源资源面板用于管理页面中使用的多媒体元素，包括图片、资源面板用于管理页面中使用的多媒体元素，包括图片、Flash动画、声动画、声音文件等。音文件等。任务任务 1 1 认识网站与网页认识网站与网页九、菜单栏九、菜单栏1.标签库标签库标签库的显示如图所示。在该编辑器中可以新建标签，并且为标签添加标签库的显示如图所示。在该编辑器中可以新建标签，并且为标签添加属性。属性。标签库编辑器任务
25、任务 1 1 认识网站与网页认识网站与网页2.快捷键快捷键可以修改或添加常用操作的快捷键，以提高使用可以修改或添加常用操作的快捷键，以提高使用DreamweaverCS3的效的效率。率。快捷键设定面板任务任务 1 1 认识网站与网页认识网站与网页3.首选参数首选参数（1）新建文档）新建文档首选参数设置面板（新建文档）任务任务 1 1 认识网站与网页认识网站与网页（2）验证程序）验证程序“验证程序验证程序”部分的作用是为没有明确声明参数的页面指部分的作用是为没有明确声明参数的页面指定规范标准。定规范标准。首选参数设置面板（验证程序）51 LOGO任务2创建“fuligong”站点新建和管理站点任
26、务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页了解网页文档和文件的命名规则了解网页文档和文件的命名规则熟悉定义站点的步骤，能定义站点并创建网页熟悉定义站点的步骤，能定义站点并创建网页任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页一、网页文档和文件夹的命名规则一、网页文档和文件夹的命名规则网站中所有文件和文件夹的命名最好遵循一定的规则。网站中所有文件和文件夹的命名最好遵循一定的规则。1.静态的首页文件一般命名为静态的首页文件一般命名为“index.html”。如果是包含程。如果是包含程序代码的动态页面，如序代码的动态页面，如ASP
27、文件，则命名为文件，则命名为“index.asp”。2.最好不要使用汉字命名文件和文件夹。最好不要使用汉字命名文件和文件夹。3.文件名中不要使用大写英文字母。文件名中不要使用大写英文字母。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页4.运算符号不能用在文件名的开头。运算符号不能用在文件名的开头。5.比较长的文件名可以使用下划线比较长的文件名可以使用下划线“_”隔开多个单词或关键隔开多个单词或关键字。字。6.在大型网站中，分支页面的文件应存放在单独的文件夹中。在大型网站中，分支页面的文件应存放在单独的文件夹中。7.在动态网站中，用来存放数据库的文件夹一般命名为
28、在动态网站中，用来存放数据库的文件夹一般命名为“data”或者或者“database”。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页二、在二、在Dreamweaver中定义站点中定义站点为便于管理和编辑站点，在创建网页之前，首先要在为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定中定义站点。定义站点可以将本地磁盘中的站点文件夹同义站点。定义站点可以将本地磁盘中的站点文件夹同Dreamweaver建立一定建立一定的关联，可以使用的关联，可以使用Dreamweaver上传或下载站点内容。上传或下载站点内容。定义站点主要包括设置站点名称、站
29、点性质，以及站点所对应的文件夹。定义站点主要包括设置站点名称、站点性质，以及站点所对应的文件夹。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页设置站点名称和服务器技术任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页设置网站编辑方式和站点根文件夹任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页设置连接远程服务器的方法 所设参数总汇任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页“文件”面板中显示新创建的站点任务任务 2 2 使用使用 HTML HTML 语言修改简单网
30、页语言修改简单网页三、新建文档三、新建文档Dreamweaver中的文档也就是网页，创建新网页的方法有多种。下面使中的文档也就是网页，创建新网页的方法有多种。下面使用用“文件文件”菜单创建网页。菜单创建网页。“新建文档”对话框任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 创建新文档任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页四、保存和关闭文档四、保存和关闭文档新建或编辑网页文档后，需要保存文档才能使所做的设置生效。新建或编辑网页文档后，需要保存文档才能使所做的设置生效。“另存为”对话框任务任务 2 2 使用使用 HTML
31、HTML 语言修改简单网页语言修改简单网页五、打开和预览文档五、打开和预览文档除常用的新建、保存和关闭文档操作外，有时还需要打开某个文档进行编除常用的新建、保存和关闭文档操作外，有时还需要打开某个文档进行编辑。辑。打开文档文档打开效果任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 预览文档任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页六、六、“文件文件”面板的应用面板的应用使用使用“文件文件”面板可以非常高效地管理站点。实际操作中，在定义站点后，面板可以非常高效地管理站点。实际操作中，在定义站点后，通常都是利用该面板创建、重命
32、名或打开站点中的网页文档或文件夹。通常都是利用该面板创建、重命名或打开站点中的网页文档或文件夹。创建文档图任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 重命名文档任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 新建文件夹任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 重命名文件夹69 LOGO任务3为首页设置头信息和页面属性页面总体设置任务任务3 3汉字编码训练汉字编码训练掌握设置网页头信息的方法掌握设置网页头信息的方法熟悉页面属性的设置方法熟悉页面属性的设置方法任务任务3 3汉字编码训练汉
33、字编码训练一、设置头信息一、设置头信息头信息包括网页关键字、网页说明等。在使用头信息包括网页关键字、网页说明等。在使用Google、Baidu、Bing等等搜索引擎搜索网页时，不是检索网页的所有内容，而是只检索网页的关键字。搜索引擎搜索网页时，不是检索网页的所有内容，而是只检索网页的关键字。如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常使用的词语。使用的词语。任务任务3 3汉字编码训练汉字编码训练插入关键字任务任务3 3汉字编码训练汉字编码训练 在“代码”视图中查看关键字效果任务任务3 3汉字编码训练汉字编码
34、训练 设置说明文本任务任务3 3汉字编码训练汉字编码训练二、设置页面属性二、设置页面属性“页面属性”对话框任务任务3 3汉字编码训练汉字编码训练“编辑字体列表”对话框任务任务3 3汉字编码训练汉字编码训练 设置链接样式任务任务3 3汉字编码训练汉字编码训练 设置网页标题和编码任务 3任务 1输入并设置网站子页文本文本输入与编辑任务 2在主页中插入导航条和图像应用图像为主页设置动画和背景音乐应用动画和多媒体项目三项目三项目三项目三制作汽车网站制作汽车网站制作汽车网站制作汽车网站输入与编辑网页元素输入与编辑网页元素输入与编辑网页元素输入与编辑网页元素 80 LOGO任务1输入并设置网站子页文本文本
35、输入与编辑任务任务 1 1 认识网站与网页认识网站与网页熟练掌握文本的输入方法熟练掌握文本的输入方法掌握各种文本格式的设置方法掌握各种文本格式的设置方法任务任务 1 1 认识网站与网页认识网站与网页一、输入文本一、输入文本在在Dreamweaver中输入文本的方法非常简单，只要将光标定位在网页的中输入文本的方法非常简单，只要将光标定位在网页的某个位置，然后选择输入法输入文本即可。对于大量的外部文本，用户可利某个位置，然后选择输入法输入文本即可。对于大量的外部文本，用户可利用剪贴板将其拷贝到网页文档中。用剪贴板将其拷贝到网页文档中。打开外部文本并复制任务任务 1 1 认识网站与网页认识网站与网页
36、二、设置文本段落格式和字符格式二、设置文本段落格式和字符格式默认情况下，输入文本的字体、字号等，与该网页默认情况下，输入文本的字体、字号等，与该网页“页面属性页面属性”中设置的中设置的相同。相同。文本的格式设置有字符格式与段落格式之分。其中，要设置段落格式，只文本的格式设置有字符格式与段落格式之分。其中，要设置段落格式，只需将光标定位在该段落即可进行设置；要设置字符格式，应首先利用拖动方需将光标定位在该段落即可进行设置；要设置字符格式，应首先利用拖动方法选中文本，然后再进行设置。法选中文本，然后再进行设置。文本“属性”面板任务任务 1 1 认识网站与网页认识网站与网页 设置文本颜色 设置段落对
37、齐任务任务 1 1 认识网站与网页认识网站与网页1.设置字体列表设置字体列表Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需中自带的字体有限，一般满足不了大多数网页设计者的需求。可以通过设置字体列表解决这一问题。求。可以通过设置字体列表解决这一问题。2.设置文本字体及大小设置文本字体及大小设置好需要的字体列表后，就可以为网页中的文本设置字体了。设置好需要的字体列表后，就可以为网页中的文本设置字体了。3.设置段落对齐和缩进设置段落对齐和缩进通过设置段落对齐和缩进格式，可以更好地为文档布局。通过设置段落对齐和缩进格式，可以更好地为文档布局。文本及段落格式设置任务任务 1 1
38、 认识网站与网页认识网站与网页4.设置列表项设置列表项“编号列表编号列表”的设置方法同的设置方法同“项目列表项目列表”类似。类似。选中文本应用“项目列表”格式任务任务 1 1 认识网站与网页认识网站与网页三、插入水平线和特殊字符三、插入水平线和特殊字符1.插入水平线插入水平线水平线对于组织信息和区分版块很有帮助，如图所示。水平线对于组织信息和区分版块很有帮助，如图所示。网页中的水平线任务任务 1 1 认识网站与网页认识网站与网页 水平线“属性”面板任务任务 1 1 认识网站与网页认识网站与网页2.插入特殊字符插入特殊字符要插入特殊字符，可在定位插入点后，选择要插入特殊字符，可在定位插入点后，选
39、择“插入记录插入记录”“HTML”“特殊字符特殊字符”命令，然后在弹出的菜单中选择相应的特殊字符。命令，然后在弹出的菜单中选择相应的特殊字符。插入特殊字符90 LOGO任务2在主页中插入导航条和图像应用图像任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页掌握编辑图像的方法掌握编辑图像的方法掌握图像各种特效的制作方法掌握图像各种特效的制作方法掌握导航条的制作方法掌握导航条的制作方法任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页一、网页中常见的图像文件格式一、网页中常见的图像文件格式JPEG（联合图像专家组标准）格式：该格式适于表现
40、色彩丰富、具有连（联合图像专家组标准）格式：该格式适于表现色彩丰富、具有连续色调的图像，如各种照片。续色调的图像，如各种照片。GIF（图形交换格式）格式：由于它最多只能包含（图形交换格式）格式：由于它最多只能包含256种颜色，因而适合种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像。表现色调不连续或具有大面积单一颜色的图像。PNG（便携网络图像）格式：该格式集（便携网络图像）格式：该格式集JPEG和和GIF格式的优点于一身，格式的优点于一身，图像质量高且可包含透明区。图像质量高且可包含透明区。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页二、插入与编辑
41、图像二、插入与编辑图像在在Dreamweaver中插入图像的方法非常简单，下面介绍具体操作。中插入图像的方法非常简单，下面介绍具体操作。确定插入点后单击“图像”按钮任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 插入图像任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页“图像标签辅助功能属性”对话框“首选参数”对话框任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页下面列出图像下面列出图像“属性属性”面板中各常用项的意义。面板中各常用项的意义。图像：设置图像名称，主要用于通过脚本控制图像。图像：设置图
42、像名称，主要用于通过脚本控制图像。宽和高：图像的宽度和高度（单位为像素），改变了图像的尺寸后，该宽和高：图像的宽度和高度（单位为像素），改变了图像的尺寸后，该数值将加粗显示。数值将加粗显示。图像“属性”面板任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页源文件：显示图像文件的路径。源文件：显示图像文件的路径。链接：用于创建从图像到其他文件的链接。链接：用于创建从图像到其他文件的链接。替换：在浏览器无法显示图像文件时，在图像位置显示的说明性文字。替换：在浏览器无法显示图像文件时，在图像位置显示的说明性文字。垂直边距和水平边距：指定图像上、下、左、右空白的像素值。垂
43、直边距和水平边距：指定图像上、下、左、右空白的像素值。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页目标：设置在何处打开链接文档，目标：设置在何处打开链接文档，_blank表示新窗口，表示新窗口，_self表示当前表示当前窗口，窗口，_parent表示当前窗口的父窗口，表示当前窗口的父窗口，_top表示当前窗口的顶级窗口。表示当前窗口的顶级窗口。边框：设置图像边框的粗细，以像素为单位。有时在为图像设置链接后，边框：设置图像边框的粗细，以像素为单位。有时在为图像设置链接后，图像的周围会多出一个蓝色的边框，此时只需将图像的边框值设置为图像的周围会多出一个蓝色的边框
44、，此时只需将图像的边框值设置为“0”，即可将该边框去掉。，即可将该边框去掉。对齐：确定图像在单元格或页面中的对齐方式。对齐：确定图像在单元格或页面中的对齐方式。任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页三、使用图像占位符三、使用图像占位符图像占位符相当于图像的临时替代对象。如果网页中的某个图像尚未制作图像占位符相当于图像的临时替代对象。如果网页中的某个图像尚未制作好，可暂时用图像占位符代替。好，可暂时用图像占位符代替。打开“图像占位符”对话框任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 插入图像占位符 替换图像任务任务
45、2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页四、制作鼠标经过图像四、制作鼠标经过图像要制作鼠标经过图像，需要用到两张大小相同，而内容不同的图像。其中要制作鼠标经过图像，需要用到两张大小相同，而内容不同的图像。其中一张作为原始图像，在页面打开的时候显示；另一张则作为鼠标经过图像，一张作为原始图像，在页面打开的时候显示；另一张则作为鼠标经过图像，在鼠标经过的时候替换原始图像显示出来。在鼠标经过的时候替换原始图像显示出来。设置图像名称和原始图像任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页 插入鼠标经过图像任务任务 2 2 使用使用 HTM
46、L HTML 语言修改简单网页语言修改简单网页预览文档任务任务 2 2 使用使用 HTML HTML 语言修改简单网页语言修改简单网页五、制作导航条五、制作导航条导航条在网站中起着不可替代的作用，它把网站中的各个页面连接起来。导航条在网站中起着不可替代的作用，它把网站中的各个页面连接起来。每一个网站都有自己的导航条。利用与制作鼠标经过图像类似的方法，可制每一个网站都有自己的导航条。利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。制作导航条需要用到两组大小相同而内容不同的作具有可变效果的导航条。制作导航条需要用到两组大小相同而内容不同的图片。图片。设置鼠标经过图像任务任务 2 2
47、使用使用 HTML HTML 语言修改简单网页语言修改简单网页 预览网页106 LOGO任务3为主页设置动画和背景音乐应用动画和多媒体任务任务3 3汉字编码训练汉字编码训练掌握插入掌握插入Flash动画的方法动画的方法掌握插入音频和视频的方法掌握插入音频和视频的方法任务任务3 3汉字编码训练汉字编码训练一、插入一、插入Flash动画动画Flash动画是一种流行的矢量动画，具有文件尺寸小、变化丰富的优点，动画是一种流行的矢量动画，具有文件尺寸小、变化丰富的优点，因而很多网页中都会使用。因而很多网页中都会使用。选择 Flash 动画任务任务3 3汉字编码训练汉字编码训练插入 Flash 动画任务任
48、务3 3汉字编码训练汉字编码训练 Flash 动画“属性”面板“属性属性”面板中部分常用设置项的意义如下。面板中部分常用设置项的意义如下。循环：选中该选项后，循环：选中该选项后，Flash动画将连续播放。动画将连续播放。自动播放：如果选中该选项，则在打开页面时自动播放自动播放：如果选中该选项，则在打开页面时自动播放Flash动画。动画。垂直边距和水平边距：指定垂直边距和水平边距：指定Flash动画周围的空白像素值。动画周围的空白像素值。宽和高：以像素为单位指定宽和高：以像素为单位指定Flash动画的宽度和高度。动画的宽度和高度。任务任务3 3汉字编码训练汉字编码训练文件：指向文件：指向Flas
49、h动画文件的路径。动画文件的路径。重设大小：将重设大小：将Flash动画恢复到实际大小。动画恢复到实际大小。品质：设置品质：设置Flash动画的播放品质。动画的播放品质。比例：确定比例：确定Flash动画如何适应在其动画如何适应在其“宽宽”和和“高高”编辑框中设置的尺寸。编辑框中设置的尺寸。对齐：确定影片在页面上的对齐方式。对齐：确定影片在页面上的对齐方式。背景颜色：指定背景颜色：指定Flash动画区域的背景颜色。动画区域的背景颜色。参数：单击此按钮打开一个对话框，可在其中输入传递给参数：单击此按钮打开一个对话框，可在其中输入传递给Flash动画的附动画的附加参数。加参数。任务任务3 3汉字编
50、码训练汉字编码训练二、应用透明二、应用透明Flash动画动画假如已为网页、某个表格或某个单元格设置了一张背景图像，在单元格假如已为网页、某个表格或某个单元格设置了一张背景图像，在单元格中插入一个中插入一个Flash动画时，由于动画时，由于Flash动画的背景颜色会遮盖掉背景图像，就动画的背景颜色会遮盖掉背景图像，就看不到背景图像了。为使背景图像能够正常显示，需要将看不到背景图像了。为使背景图像能够正常显示，需要将Flash动画的背景动画的背景颜色改成透明。颜色改成透明。插入动画任务任务3 3汉字编码训练汉字编码训练 预览网页效果任务任务3 3汉字编码训练汉字编码训练 预览透明背景的动画效果“参