网页设计DreamweaverCS教程基础篇.ppt

网页设计Dreamweaver CS3基础篇1 1第一章网页制作基础知识和Dreamweaver软件基础（制作“我的第一张网页”）2 2概要：Macromedia Dreamweaver CS3Macromedia Dreamweaver CS3提供了强大的提供了强大的网页制作功能，其可视化的操作界面更接近广大的网网页制作功能，其可视化的操作界面更接近广大的网页制作人员。所见即所得的界面可以使那些只要掌握页制作人员。所见即所得的界面可以使那些只要掌握了文档编辑能力的人就可完成一张网页的制作。了文档编辑能力的人就可完成一张网页的制作。本章主要通过三个活动的开展，让学生了解本章主要通过三个活动的开展，让学生了解Dreamweaver CS3Dreamweaver CS3网页浏览的基本原理和网页制作技网页浏览的基本原理和网页制作技术的发展，知道目前网页制作的几种工具。了解术的发展，知道目前网页制作的几种工具。了解HTMLHTML语法的基本构成及几种常用的标签。通过具体语法的基本构成及几种常用的标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面的网页实例制作，掌握起始页的设置以及基本的界面操作。操作。3 3 了解网页浏览的基本原理和当前站点网页制作情况。了解网页浏览的基本原理和当前站点网页制作情况。了解网页浏览的基本原理和当前站点网页制作情况。了解网页制作技术的发展及目前网页制作的几种工具。了解网页制作技术的发展及目前网页制作的几种工具。了解网页制作技术的发展及目前网页制作的几种工具。教学目标：教学目标：知识要点：知识要点：活动一：初识网页 客户机服务器体系、静态网页和动态网页、浏览客户机服务器体系、静态网页和动态网页、浏览客户机服务器体系、静态网页和动态网页、浏览器的种类、网页制作技术、常用的网页制作工具。器的种类、网页制作技术、常用的网页制作工具。器的种类、网页制作技术、常用的网页制作工具。4 4准备知识：（1）网页浏览的基本原理活动一：初识网页活动一：初识网页客户/服务器模式 客户/服务器模式 5 5准备知识：（2 2）静态网页和动态网页）静态网页和动态网页活动一：初识网页活动一：初识网页 静态网页 动态网页 6 6准备知识：（3）认识不同的浏览器活动一：初识网页活动一：初识网页IE浏览器 腾讯浏览器 7 7（4 4）网页制作技术的发展）网页制作技术的发展（5 5）网页制作工具介绍）网页制作工具介绍活动一：初识网页活动一：初识网页准备知识：8 8活动一：初识网页活动一：初识网页一、注册一个邮箱。一、注册一个邮箱。二、观察网页元素的类型。二、观察网页元素的类型。三、使用三、使用DreamweaverDreamweaver打开网页，观察打开网页，观察软件的特点。软件的特点。活动引导：9 9活动小结：网页中使用的最多的元素是文字和图片。图网页中使用的最多的元素是文字和图片。图片的一般格式为片的一般格式为jpgjpg或或gifgif文件。文件。flashflash的使用能使的使用能使网页增加动感。网页增加动感。动态网页能对用户提交的信息作出及时的反动态网页能对用户提交的信息作出及时的反馈，使网页更具人性化。馈，使网页更具人性化。DreamweaveDreamweave有着可视化的操作界面，特别有着可视化的操作界面，特别在与在与flashflash和和fireworksfireworks的相互配合，成为网页创意的相互配合，成为网页创意组件中最重要的一员。组件中最重要的一员。活动一：初识网页活动一：初识网页1010活动二：认识HTML 了解了解HTMLHTML语法的基本构成，并能认识几种语法的基本构成，并能认识几种常用的标签，能简单的应用这些标签。常用的标签，能简单的应用这些标签。教学目标：教学目标：知识要点：知识要点：、等标签。等标签。1111准备知识：（1 1）HTMLHTML标签：标签：标识标识HTMLHTML文件的开始和结束文件的开始和结束 （2 2）headhead标签：标签：标题信息，包含了许多网页的属性信息标题信息，包含了许多网页的属性信息（3 3）titletitle标签：标签：标识当前网页的标题标识当前网页的标题（4 4）bodybody标签：标签：主体标签，主体标签，标签和标签和标签之间包括文档中所有标签之间包括文档中所有 文本、图像等网页元素的内容。文本、图像等网页元素的内容。（5 5）p p标签：标签：段落标签，段落标签，标签和标签和标签之间是一个段落的内容标签之间是一个段落的内容（6 6）fontfont标签：标签：字体标签，用来设置文字的格式字体标签，用来设置文字的格式（7 7）imgimg标签：标签：图像标签，设置网页中图像的来源、尺寸、对齐方式等属性图像标签，设置网页中图像的来源、尺寸、对齐方式等属性 （8 8）a a标签：标签：设置超级连接目标和名字等设置超级连接目标和名字等 活动二：活动二：认识认识HTMLHTML HTML是Hyper Text Markup Language的简称 1212一、网页的属性（背景与标题）一、网页的属性（背景与标题）二、网页中的文字二、网页中的文字三、网页中的图片三、网页中的图片四、网页中的链接四、网页中的链接活动二：活动二：认识认识HTMLHTML 活动引导：1313 通过直接修改网页中的代码可以很快地改变网页中通过直接修改网页中的代码可以很快地改变网页中各个网页元素的属性，但要记住如此众多的标签和相关各个网页元素的属性，但要记住如此众多的标签和相关属性的代码，却不是一件容易的事情。那么让我们来通属性的代码，却不是一件容易的事情。那么让我们来通过对过对DreamweaverDreamweaver的学习，利用它所见即所得的优势，的学习，利用它所见即所得的优势，来轻轻松松地做自己的网页吧！来轻轻松松地做自己的网页吧！活动二：活动二：认识认识HTMLHTML 活动小结1414 熟悉基本的界面操作，并对网页的制作有熟悉基本的界面操作，并对网页的制作有一个初步的认识。一个初步的认识。活动三：制作“我的第一张网页”教学目标：教学目标：知识要点：知识要点：界面基本组成、基本操作。界面基本组成、基本操作。1515主程序界面大致分主程序界面大致分为以下几个区域：为以下几个区域：菜单栏菜单栏 插入栏插入栏 文档工具栏文档工具栏 编辑区编辑区 状态栏状态栏 属性面板属性面板 面板组面板组活动三：活动三：制作制作 “我的第一张网我的第一张网页页”准备知识：Dreamweaver SC3主程序界面 1616活动引导：活动三：活动三：制作制作 “我的第一张网我的第一张网页页”一、建立站点二、制作网页，将各种网页元素放入到网页中去。1717活动三：活动三：制作制作 “我的第一张网我的第一张网页页”制作完成后的 效果图 1818 制作网页的基本流程可以分为：建制作网页的基本流程可以分为：建立站点立站点-创建网页创建网页-插入网页元素插入网页元素-编编辑网页元素辑网页元素-保存网页保存网页-预览效果。预览效果。活动三：活动三：制作制作 “我的第一张网我的第一张网页页”活动小结：1919第一章实验：制作“我的个人介绍”实验要求：实验要求：一、建立站点目录mysitelx，并将站点指定至站点目录。二、制作网页“我的个人介绍”，在网页中加入背景图片、文字、水平线、图片和超级链接。三、通过记事本打开网页，修改现有的HTML代码，比较前后效果。注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页。2020 修改后效果 第一章实验：第一章实验：制作制作“我的个人介绍我的个人介绍”2121第二章站点的建立与管理（制作（制作“个人博客个人博客”）2222概要：建立站点是制作网页的第一步，然而要建立一建立站点是制作网页的第一步，然而要建立一个较好的站点并不是一件容易的事，需要前期的素材个较好的站点并不是一件容易的事，需要前期的素材准备和站点结构的规划。要学会制作网页，掌握站点准备和站点结构的规划。要学会制作网页，掌握站点建立和编辑的方法尤为重要，所有的网页都是基于站建立和编辑的方法尤为重要，所有的网页都是基于站点建立的。这些知识的掌握，对今后的网页制作将极点建立的。这些知识的掌握，对今后的网页制作将极为关键。为关键。本章主要通过四个活动的开展，通过为本章主要通过四个活动的开展，通过为“我的个我的个人网站人网站”收集相关资料，掌握站点素材及其制作工具收集相关资料，掌握站点素材及其制作工具的有关知识。为的有关知识。为“我的个人网站我的个人网站”规划站点目录，并规划站点目录，并比较大型站点的站点结构与小型站点的站点结构区别，比较大型站点的站点结构与小型站点的站点结构区别，从而了解站点的设计流程。使用从而了解站点的设计流程。使用“高级高级”标签为标签为“我我的个人网站的个人网站”建立站点，并设置相关参数。通过网站建立站点，并设置相关参数。通过网站地图，实现对地图，实现对“我的个人网站我的个人网站”中的网站文件进行管中的网站文件进行管理、检查链接等。理、检查链接等。2323活动一：为我的个人网站作准备 了解一般站点的设计流程，为我的个人网站收了解一般站点的设计流程，为我的个人网站收了解一般站点的设计流程，为我的个人网站收集相关资料，并掌握站点素材及其制作工具的有关知集相关资料，并掌握站点素材及其制作工具的有关知集相关资料，并掌握站点素材及其制作工具的有关知识。识。识。教学目标：教学目标：知识要点：知识要点：站点的设计流程、素材文件类型、素材制作工具。站点的设计流程、素材文件类型、素材制作工具。站点的设计流程、素材文件类型、素材制作工具。2424准备知识：（1 1）站点设计流程）站点设计流程 创建站点大致包括以下四步曲：创建站点大致包括以下四步曲：第一步：第一步：对要创建的站点进行规划，确立建站的目的、规模对要创建的站点进行规划，确立建站的目的、规模 、面向的群体、服务器端的配置等各项情况。、面向的群体、服务器端的配置等各项情况。第二步：建立一个完整的站点目录结构。第二步：建立一个完整的站点目录结构。第三步：使用网页制作软件及辅助软件，如第三步：使用网页制作软件及辅助软件，如flashflash、fireworksfireworks 等完成网站的制作。等完成网站的制作。第四步：对网站进行测试，并发布。第四步：对网站进行测试，并发布。活动一：活动一：为我的个人网站作准备为我的个人网站作准备 2525准备知识：（2 2）站点素材文件类型简介站点素材文件类型简介 文字资料文字资料 :目前常用的、能够合并到网页文本内容的常见文档类型有目前常用的、能够合并到网页文本内容的常见文档类型有ASCIIASCII 文本文件、文本文件、RTF RTF 文件和文件和MS Office MS Office 文档文档 图片资料图片资料:目前网页中用到比较多的图片类型有两种，主要是目前网页中用到比较多的图片类型有两种，主要是JPEGJPEG和和GIF.GIF.动画资料动画资料:目前使用较多的是用目前使用较多的是用FlashFlash制作的制作的swfswf格式的动画，此外，网页格式的动画，此外，网页中中 用得比较多用得比较多 的另一种动画形式是的另一种动画形式是ShockwaveShockwave 音频资料音频资料:目前常见的有目前常见的有.midi.midi 或或 .mid.mid（乐器数字接口）格式，由于其文（乐器数字接口）格式，由于其文件件 量小，声音质量好，所以被广泛使用。另一种使用非常广泛量小，声音质量好，所以被广泛使用。另一种使用非常广泛的的音音 频频文件类型是文件类型是.mp3,ra.mp3,ra、.ram.ram、.rpm.rpm 或或 RealAudio RealAudio 格式格式也也 具有具有 非常高的压缩程度，文件大小要小于非常高的压缩程度，文件大小要小于 MP3MP3，它同样可以进，它同样可以进行行“流流 式处理式处理”.视频资料视频资料:网页上视频表现的形式一般分为两种，一种是用户下载链接的网页上视频表现的形式一般分为两种，一种是用户下载链接的视视 频文件，然后在本地机上看。另一种是可以在浏览器中播放频文件，然后在本地机上看。另一种是可以在浏览器中播放的视的视 频文件，称为内嵌视频。内嵌视频格式主要有频文件，称为内嵌视频。内嵌视频格式主要有MPEGMPEG、QuickTimeQuickTime、RealVideoRealVideo、ActiveMovieActiveMovie等。等。其他资料其他资料:在在DreamweaverDreamweaver中还能插入中还能插入Active X Active X 控件和控件和Java appletJava applet。ActiveX ActiveX 控件（以前称作控件（以前称作 OLE OLE 控件）是可以充当浏览器插件控件）是可以充当浏览器插件的的 可重复使用的组件，有些像微型的应用程序。可重复使用的组件，有些像微型的应用程序。活动一：活动一：为我的个人网站作准备为我的个人网站作准备 2626准备知识：（3 3）网页素材制作工具之一）网页素材制作工具之一 PhotoshopPhotoshop活动一：活动一：为我的个人网站作准备为我的个人网站作准备 Photoshop操作界面 2727活动一：活动一：为我的个人网站作准备为我的个人网站作准备 准备知识：（3 3）网页素材制作工具之二）网页素材制作工具之二FireworksFireworksFireworks操作界面 2828活动一：活动一：为我的个人网站作准备为我的个人网站作准备 准备知识：（3 3）网页素材制作工具之三）网页素材制作工具之三 FlashFlash Flash操作界面 2929活动一：活动一：为我的个人网站作准备为我的个人网站作准备 准备知识：（3 3）网页素材制作工具之四）网页素材制作工具之四 CorelDRAWCorelDRAW CorelDRAW操作界面 3030活动引导：一、收集文字资料二、收集图片资料三、收集背景音乐活动一：活动一：为我的个人网站作准备为我的个人网站作准备 3131活动小结：这个活动是为后面制作个人站点做准备，素材的内容可以自这个活动是为后面制作个人站点做准备，素材的内容可以自己决定。如果我们已经学过了己决定。如果我们已经学过了flashflash，那么我们还可以为网页中，那么我们还可以为网页中添加自己制作的添加自己制作的flashflash动画。动画。在以上的活动中我们主要收集了文字与图片，甚至是音乐文在以上的活动中我们主要收集了文字与图片，甚至是音乐文件，这些素材将构成我们个人网站的内容。件，这些素材将构成我们个人网站的内容。活动一：活动一：为我的个人网站作准备为我的个人网站作准备 3232比较大型站点的站点结构与小型站点的站点结比较大型站点的站点结构与小型站点的站点结构区别，为构区别，为“我的个人网站我的个人网站”规划站点目录。规划站点目录。活动二：规划自己的网站教学目标：教学目标：知识要点：知识要点：站点结构规划、大型站点的站点结构、小型站站点结构规划、大型站点的站点结构、小型站点的站点结构。点的站点结构。3333准备知识：（1 1）规划站点结构规划站点结构 在组织站点结构时，需要注意以下三点：在组织站点结构时，需要注意以下三点：其一、其一、将站点内容分门别类，即将相关页面放置在同一文件夹内。将站点内容分门别类，即将相关页面放置在同一文件夹内。其二、其二、单独放置图像、声音或其他多媒体文件的位置。即将所有图单独放置图像、声音或其他多媒体文件的位置。即将所有图 图像、声音或其他多媒体文件放在独立的文件夹内。图像、声音或其他多媒体文件放在独立的文件夹内。其三、其三、对本地站点和远程站点使用相同的结构，即在创建并测试完对本地站点和远程站点使用相同的结构，即在创建并测试完 站点后，将所有文件都上传到远程站点，使本地结构完整地站点后，将所有文件都上传到远程站点，使本地结构完整地 复复 制到远程站点上。制到远程站点上。活动二：活动二：规划自己的网站规划自己的网站3434（2 2）常见的站点结构）常见的站点结构站点结构一：学校网站站点结构一：学校网站活动二：活动二：规划自己的网站规划自己的网站 站点结构示意图2 站点结构示意图1 3535活动二：活动二：规划自己的网站规划自己的网站 活动引导：在下面的活动中我们来为自己的站点建立站点目录，并将在下面的活动中我们来为自己的站点建立站点目录，并将 上一次活动中所收集的资料放入相对应的文件目录中。上一次活动中所收集的资料放入相对应的文件目录中。（1 1）资源管理器，在）资源管理器，在DD盘建立站点目盘建立站点目图图2.7 2.7 站点目录结构站点目录结构（2 2）将收集的素材复制到相关文件夹中，图片文件放置到）将收集的素材复制到相关文件夹中，图片文件放置到imagesimages内，内，文字、音乐、文字、音乐、flashflash文件放置到文件放置到otherother文件夹内。文件夹内。目录结构目录结构图图3636活动小结:通过本活动我们重点要学会如何规划自己的站点结通过本活动我们重点要学会如何规划自己的站点结构，这可是网站制作很关键的一步！如果站点目录规划不构，这可是网站制作很关键的一步！如果站点目录规划不合理的话，那么在以后的具体的网页制作中以及维护时，合理的话，那么在以后的具体的网页制作中以及维护时，就会遇到很大的问题。就会遇到很大的问题。此外，特别要注意的是目录中的所有文件夹不要有中此外，特别要注意的是目录中的所有文件夹不要有中文名字，不然会有意想不到的后果文名字，不然会有意想不到的后果 活动二：活动二：规划自己的网站规划自己的网站3737掌握站点的建立及站点参数的设置方法。掌握站点的建立及站点参数的设置方法。活动三：打造自己的个性化站点教学目标：教学目标：知识要点：知识要点：“高级高级”标签、建立站点。标签、建立站点。3838准备知识：准备知识：（1 1）站点管理的概念）站点管理的概念（2 2）设置站点参数）设置站点参数活动三：活动三：打造自己的个性化站点打造自己的个性化站点“编辑”|“首选参数”命令“首选参数”对话框 3939活动三：活动三：打造自己的个性化站点打造自己的个性化站点活动引导：一、建立站点二、制作首页三、制作分页四、完成链接4040活动三：活动三：打造自己的个性化站点打造自己的个性化站点网页效果 4141活动小结：活动小结：在这次活动中我们完完整整的制作了一个个人的网站，在这次活动中我们完完整整的制作了一个个人的网站，是不是比想象中的容易啊！在本次制作中使用了是不是比想象中的容易啊！在本次制作中使用了“高级高级”选项卡来建立网站，这比使用向导建立更快捷。选项卡来建立网站，这比使用向导建立更快捷。在制作中，网页间的链接是很重要的，作为一个设计者在制作中，网页间的链接是很重要的，作为一个设计者值得注意的是，你的设计要让使用者能方便的在你的站点值得注意的是，你的设计要让使用者能方便的在你的站点中的任何网页之中进行跳转。中的任何网页之中进行跳转。活动三：活动三：打造自己的个性化站点打造自己的个性化站点4242掌握编辑站点的方法。掌握编辑站点的方法。活动四：编辑我的站点 教学目标：教学目标：网站地图，管理网站文件、链接检查、添加和网站地图，管理网站文件、链接检查、添加和删除站点。删除站点。知识要点：知识要点：4343准备知识：（1 1）站点管理功能）站点管理功能（2 2）站点视觉地图）站点视觉地图（3 3）添加和删除站点）添加和删除站点活动四：活动四：编辑我的站点编辑我的站点“管理站点”对话框 视图工具栏 4444一、导入站点一、导入站点二、使用站点视觉地图管理站点文件二、使用站点视觉地图管理站点文件三、删除站点三、删除站点活动四：活动四：编辑我的站点编辑我的站点 活动引导：4545活动小结:在本活动中我们使用了站点视觉地图来管理活动在本活动中我们使用了站点视觉地图来管理活动三中所建立的站点，我们通过站点视觉地图完成对站点三中所建立的站点，我们通过站点视觉地图完成对站点文件的删除、重命名、修改网页标题、检查链接等管理文件的删除、重命名、修改网页标题、检查链接等管理站点的常用操作。这些操作对我们以后建立的站点管理站点的常用操作。这些操作对我们以后建立的站点管理是非常有用的。是非常有用的。活动四：活动四：编辑我的站点编辑我的站点 4646第二章实验：制作“我的心灵小站”实验要求：一、建立站点目录一、建立站点目录mysitelxmysitelx，并将站点指定至站点目录。，并将站点指定至站点目录。二、制作站点二、制作站点“我的心灵小站我的心灵小站”中的网页，在网页中加如文中的网页，在网页中加如文字、图片、音乐以及字、图片、音乐以及flashflash等网页元素。等网页元素。三、通过站点视觉地图完成对站点文件的删除、重命名、修三、通过站点视觉地图完成对站点文件的删除、重命名、修改网页标题、检查链接等。改网页标题、检查链接等。注意：本实验提供的样例仅供参考注意：本实验提供的样例仅供参考 4747第二章实验：第二章实验：制作制作“我的心灵小站我的心灵小站”网页效果4848第三章新建文档与对象4949概要：概要：一个网站是由许多网页组成的，网页中的各项元素决定了网一个网站是由许多网页组成的，网页中的各项元素决定了网页的多样性。在这众多的网页元素中文字、列表等是组成网页的基页的多样性。在这众多的网页元素中文字、列表等是组成网页的基础。础。本章主要通过四个活动的开展，让我们学会制作网页的一些基本章主要通过四个活动的开展，让我们学会制作网页的一些基本操作，其中包括：通过三种方法创建网页、打开现有网页文档及本操作，其中包括：通过三种方法创建网页、打开现有网页文档及保存网页；文本和特殊字符的输入及编辑方法，学会创建列表；掌保存网页；文本和特殊字符的输入及编辑方法，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法，并分析其共握在网页中插入日期、水平线等常见网页元素的方法，并分析其共同之处；掌握设置网页属性的方法，并了解站点设计的一些基本理同之处；掌握设置网页属性的方法，并了解站点设计的一些基本理念。念。5050活动一：初识网页 熟练掌握网页文件的新建和保存方法。熟练掌握网页文件的新建和保存方法。教学目标教学目标：知识要点：知识要点：网页基本操作（新建、打开、保存）、标签网页基本操作（新建、打开、保存）、标签选择器、调整页面大小。选择器、调整页面大小。5151准备知识：（1 1）新建网页）新建网页 方法一：方法一：方法二：方法二：方法三：方法三：活动一：活动一：初识网页初识网页“新建文档”对话框启始页中的“创建新项目”在“文件”面板中创建页 5252准备知识：（2 2）打开网页）打开网页（3 3）保存网页）保存网页活动一：活动一：初识网页初识网页“打开”对话框“另存为”对话框 5353活动一：活动一：初识网页初识网页准备知识：（4 4）标签选择器）标签选择器（5 5）调整页面大小）调整页面大小 页面大小的调整 使用标签选择器选取网页元素图 利用标签选择器编辑标签 5454活动引导：一、使用上述方式创建网页，并保存相关网页。一、使用上述方式创建网页，并保存相关网页。二、将网页的最佳尺寸设置为二、将网页的最佳尺寸设置为955955600600。活动一：活动一：初识网页初识网页5555活动小结:本活动主要让我们练习了网页的新建、本活动主要让我们练习了网页的新建、保存以及页面的设置等基本操作。这是网站建立保存以及页面的设置等基本操作。这是网站建立的最基本操作，任何网页的制作都离不开这些基的最基本操作，任何网页的制作都离不开这些基本的操作。本的操作。活动一：活动一：初识网页初识网页5656 掌握文本和特殊字符的输入及编辑方法，掌握文本和特殊字符的输入及编辑方法，学会相关的属性设置。学会相关的属性设置。活动二：给网页加入文字和特殊字符教学目标：教学目标：知识要点：知识要点：文本、特殊字符输入与编辑及属性设置。文本、特殊字符输入与编辑及属性设置。5757准备知识：（1 1）文本的输入）文本的输入（2 2）特殊字符的输入）特殊字符的输入活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符文本的输入“字符”下拉菜单图“插入其他字符”对话框 5858准备知识：（3 3）文字的编辑）文字的编辑（4 4）文字的格式设置）文字的格式设置 字体格式的设置字体格式的设置 文字颜色的设置文字颜色的设置 文字样式的设置文字样式的设置 其他设置其他设置活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符“属性”面板 “编辑字体列表”“编辑字体列表”对话框 样式效果 5959活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符准备知识：（5 5）文字的其他操作）文字的其他操作 拼写检查拼写检查 查找和替换查找和替换 撤消和重复操作撤消和重复操作“拼写检查”对话框“查找和替换”对话框“结果”面板“首选参数”对话框的“常规”分类项 6060一、输入文本及特殊符号一、输入文本及特殊符号二、对输入的文本及特殊符号进行拼写检查，二、对输入的文本及特殊符号进行拼写检查，将输入错误的文字进行替换。将输入错误的文字进行替换。三、设置文字的格式，其中包括字体格式、文三、设置文字的格式，其中包括字体格式、文字颜色及样式的设置。字颜色及样式的设置。活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符活动引导：6161 掌握文本和特殊字符的输入及编辑掌握文本和特殊字符的输入及编辑方法，学会相关的属性设置。方法，学会相关的属性设置。活动二：给网页加入文字和特殊字符教学目标：教学目标：文本、特殊字符输入与编辑及属性设文本、特殊字符输入与编辑及属性设置。置。知识要点：知识要点：6262准备知识：（1 1）文本的输入）文本的输入（2 2）特殊字符的输入）特殊字符的输入活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符文本的输入“字符”下拉菜单图“插入其他字符”对话框6363活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符准备知识：（3 3）文字的编辑）文字的编辑（4 4）文字的格式设置）文字的格式设置 字体格式的设置字体格式的设置 文字颜色的设置文字颜色的设置 方法一：单击方法一：单击“颜色颜色”框，在弹出的颜色表中选取。框，在弹出的颜色表中选取。方法二：直接在方法二：直接在“颜色颜色”框后的文本框内输入颜色的十六进制数值，例框后的文本框内输入颜色的十六进制数值，例如：如：#009999#009999。方法三：直接在方法三：直接在“颜色颜色”框后的文本框内输入表示颜色的单词，例如：框后的文本框内输入表示颜色的单词，例如：redred。“属性”面板 6464准备知识：（4 4）文字的格式设置）文字的格式设置 文字样式的设置文字样式的设置 其他设置其他设置“编辑字体列表”“编辑字体列表”对话框 样式效果 活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符6565准备知识：（5 5）文字的其他操作）文字的其他操作 拼写检查拼写检查 查找和替换查找和替换 撤消和重复操作撤消和重复操作活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符“查找和替换”对话框 “结果”面板“拼写检查”对话框“首选参数”对话框的“常规”分类项6666活动引导：一、输入文本及特殊符号一、输入文本及特殊符号二、对输入的文本及特殊符号进行拼写检查，二、对输入的文本及特殊符号进行拼写检查，将输入错误的文字进行替换。将输入错误的文字进行替换。三、设置文字的格式，其中包括字体格式、文三、设置文字的格式，其中包括字体格式、文字颜色及样式的设置。字颜色及样式的设置。活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符6767活动小结:在本活动中，我们主要练习了网页中文字的输入和在本活动中，我们主要练习了网页中文字的输入和编辑，其中包括了对文字的格式设置、拼写检查以及文字编辑，其中包括了对文字的格式设置、拼写检查以及文字查找与替换。我们还练习了特殊字符的插入，有些特殊字查找与替换。我们还练习了特殊字符的插入，有些特殊字符在网页制作中是必不可少的。这些操作对今后网页中的符在网页制作中是必不可少的。这些操作对今后网页中的文字编辑将会有很大用处。文字编辑将会有很大用处。活动二：活动二：给网页加入文字和特殊字符给网页加入文字和特殊字符6868活动三：插入列表与其他网页元素 掌握在网页中创建列表的方法以及在网掌握在网页中创建列表的方法以及在网页中插入日期、水平线等常见网页元素的方法，页中插入日期、水平线等常见网页元素的方法，并分析其共同之处。并分析其共同之处。教学目标：教学目标：知识要点：知识要点：列表、日期、水平线列表、日期、水平线 6969准备知识：（1 1）创建列表）创建列表 设置列表项设置列表项 修改列表属性修改列表属性 设置子列表项设置子列表项（2 2）插入日期）插入日期（3 3）插入水平线）插入水平线活动三：活动三：插入列表与其他网页元素插入列表与其他网页元素 “列表属性”对话框 7070活动引导：一、创建列表一、创建列表 二、插入水平线二、插入水平线 三、插入日期三、插入日期 四、插入图像四、插入图像活动三：活动三：插入列表与其他网页元素插入列表与其他网页元素 7171插入图像网页效果 活动三：活动三：插入列表与其他网页元素插入列表与其他网页元素 7272活动小结:在本活动中我们主要练习了列表的创建及修在本活动中我们主要练习了列表的创建及修改，我们还练习了在网页内插入日期及水平线的操改，我们还练习了在网页内插入日期及水平线的操作。特别是我们通过标签编辑器修改了水平线的颜作。特别是我们通过标签编辑器修改了水平线的颜色，颜色效果要在预览状态下才能看到。色，颜色效果要在预览状态下才能看到。活动三：活动三：插入列表与其他网页元素插入列表与其他网页元素 7373活动四：设置我们网页的属性 掌握设置网页属性的方法，并了解站点设计的掌握设置网页属性的方法，并了解站点设计的一些基本理念。一些基本理念。教学目标：教学目标：知识要点：知识要点：网页的标题、背景颜色、背景图像、链接文本、网页的标题、背景颜色、背景图像、链接文本、网页边界、配色方案。网页边界、配色方案。7474准备知识：（1 1）网页外观和链接的设置）网页外观和链接的设置 页面文字设置页面文字设置 网页背景的设置网页背景的设置 网页边距设置网页边距设置 链接文字的设置链接文字的设置 （2 2）站点风格和色彩搭配）站点风格和色彩搭配 关于站点风格关于站点风格 关于色彩搭配关于色彩搭配 （3 3）网页标题和编码的设置）网页标题和编码的设置活动四：活动四：设置我们网页的属性设置我们网页的属性 7575 活动引导：一、制作站点内各网页间的链接文字一、制作站点内各网页间的链接文字 二、使用网页属性设置首页二、使用网页属性设置首页 三、使用网页属性设置分页三、使用网页属性设置分页活动四：活动四：设置我们网页的属性设置我们网页的属性 7676实验：制作“中国民俗文化”实验要求：一、建立站点目录一、建立站点目录mysitelxmysitelx，并将站点指定至站点，并将站点指定至站点目录。制作网页目录。制作网页“中国民俗文化中国民俗文化”，在网页中加入相，在网页中加入相应文字，并设置字体。应文字，并设置字体。二、制作网页间的文字链接。二、制作网页间的文字链接。三、利用网页属性对话框，设置网页背景、链接文字、三、利用网页属性对话框，设置网页背景、链接文字、页边距、网页标题等属性。页边距、网页标题等属性。注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页7777活动四：活动四：设置我们网页的属性设置我们网页的属性 网页效果7878活动小结:在本活动中我们通过设置网页属性完成在本活动中我们通过设置网页属性完成了网页背景、链接文字、页边距以及网页标题了网页背景、链接文字、页边距以及网页标题的设置。的设置。可见在可见在DreamweaverDreamweaver中可以通过网页属中可以通过网页属性对话框，轻松的对页面的各项属性进行设置。性对话框，轻松的对页面的各项属性进行设置。活动四：活动四：设置我们网页的属性设置我们网页的属性 7979第三章实验：制作“中国民俗文化”实验要求：一建立站点目录一建立站点目录mysitelxmysitelx，并将站点指定至站点目录。，并将站点指定至站点目录。二制作网页二制作网页“中国民俗文化中国民俗文化”，在网页中加入相应文字，并，在网页中加入相应文字，并设置字体。设置字体。三制作网页间的文字链接。三制作网页间的文字链接。四利用网页属性对话框，设置网页背景、链接文字、页边距、四利用网页属性对话框，设置网页背景、链接文字、页边距、网页标题等属性。网页标题等属性。注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页8080第三章实验：制作“中国民俗文化”网页效果 8181 第四章表格处理与网页布局8282概要：表格是网页制作中极为重要的一个对象，传统的网页布局以及各表格是网页制作中极为重要的一个对象，传统的网页布局以及各元素的组织都是依靠表格来进行的，它直接决定了网页是否美观，内元素的组织都是依靠表格来进行的，它直接决定了网页是否美观，内容组织是否清楚。但随着基于容组织是否清楚。但随着基于XHTMLXHTML的的DIV+CSSDIV+CSS网页制作布局技术网页制作布局技术的发展，采用的发展，采用DIV+CSSDIV+CSS布局成为了一种发展趋势。采用此种布局方式布局成为了一种发展趋势。采用此种布局方式可以使网站改版相对简单，对于搜索引擎比表格布局的页面更具友好可以使网站改版相对简单，对于搜索引擎比表格布局的页面更具友好性。但学习性。但学习DIV+CSSDIV+CSS需要以需要以HTMLHTML为基础，对于初学网页设计的人而为基础，对于初学网页设计的人而言有一定难度，且不提倡在言有一定难度，且不提倡在DreamweaverDreamweaver中直接进行编写。该内容中直接进行编写。该内容将在以后章节中做适当介绍，但不作为本书重点内容，本书以后的案将在以后章节中做适当介绍，但不作为本书重点内容，本书以后的案例仍以表格布局为主。表格在网页中除了起到布局页面的作用外，同例仍以表格布局为主。表格在网页中除了起到布局页面的作用外，同时也可以作为数据表格。时也可以作为数据表格。本章主要介绍了如何利用表格来布局页面，以及表格及其单元本章主要介绍了如何利用表格来布局页面，以及表格及其单元格的编辑与属性设置。此外，还单独介绍了利用格的编辑与属性设置。此外，还单独介绍了利用DreamweaverDreamweaver的特的特殊功能对数据表格进行的一些有效处理方法。殊功能对数据表格进行的一些有效处理方法。8383活动一：利用表格布局页面 熟练掌握利用表格设计完成页面的熟练掌握利用表格设计完成页面的熟练掌握利用表格设计完成页面的布局布局布局教学目标：教学目标：知识要点：知识要点：表格的插入及属性设置表格的插入及属性设置表格的插入及属性设置8484（1 1）关于标准模式、扩展表格模式）关于标准模式、扩展表格模式 标准模式标准模式 扩展表格模式扩展表格模式（2 2）插入表格）插入表格（3 3）设置表格属性）设置表格属性活动一：活动一：利用表格布局页面“表格”对话框“属性”面板 准备知识：准备知识：8585活动四：活动四：设置我们网页的属性设置我们网页的属性 准备知识：准备知识：（4）添加表格行或列 添加行和列 删除行或列 在“属性”面板中添加删除行或列（5）插入嵌套表格“插入行或列”对话框表格“属性”面板 嵌套表格 活动一：活动一：利用表格布局页面8686活动引导：一一、建立站点并新建网页。建立站点并新建网页。二二、完成网页属性完成网页属性设置。设置。三三、完成网页的基本布局。完成网页的基