Dreamweaver CS3网页设计培训教程

DreamweaverCS3网页设计培训教程第1课网页制作根底本课要点具体要求本课导读上机练习本课要点网页制作的相关知识初识DreamweaverCS3具体要求了解网页的定义及组成元素了解网页常见局部的称谓及标准了解网页制作的流程了解网页配色技巧了解DreamweaverCS3的工作界面掌握DreamweaverCS3的根本设置掌握DreamweaverCS3的根本操作本课导读 网页是构成网络的主体，是互联网信息的主要载体。在学习网页制作前，需要了解网页制作的相关知识，以便在以后的学习及工作中运用。另外，我们还需要认识网页制作工具DreamweaverCS3的工作界面、根本设置以及一些简单的应用，如启动与退出DreamweaverCS3、新建、保存、预览及翻开网页文档等。1.1网页制作的相关知识 网上冲浪已成为生活的一个重要组成局部，人们通过网络来获取知识、资源，越来越多的企事业单位也将网页作为宣传公司品牌形象的一种重要手段，网页也从以前的纯文本形式逐步开展到图、文、声音及动画兼有的综合形式。下面我们就来学习网页制作的各种知识。1.1网页制作的相关知识 1.1.1知识讲解 1.1.2典型案例——用“记事本〞制作“welcome.html〞网页1.1.1知识讲解 在开始学习网页制作之前，应先了解一下什么是网页以及一些相关的专业术语。1.1.1知识讲解 1.网页的定义及组成元素 2.网页常见局部的称谓及标准3.网页制作的流程 4.网页配色技巧1.网页的定义及组成元素 浏览网页时在浏览器中看到的一个个页面就是网页，其中包括多种多样的网页元素，如文本、图像、动画和音乐等。 文本是网页最根本的组成元素，是网页的主体局部。 图像也是网页中不可缺少的元素，是使网页看起来更美观的点睛之笔。动画在网页中也有广泛的应用，网页中常用的动画格式主要有两种：一种是SWF动画，一种是GIF动画。播放音乐是为浏览者提供听觉感受的最正确选择，但因为受音乐版权的约束，在专业网站中很少有使用背景音乐的，只在局部个人主页或企业网站中有所使用。2.网页常见局部的称谓及标准 通常情况下，网页的根本组成局部有Logo、Banner、导航条、超链接和版权信息等。3.网页制作的流程 制作网页不像编辑文档那样轻松，需要遵循一定的流程：收集资料和素材、规划站点、制作网页、测试站点、发布站点、更新和维护站点等。 1〕收集资料和素材 2〕规划站点 3〕制作网页 4〕测试站点 5〕发布站点 6〕更新和维护站点4.网页配色技巧 网页中的色彩通常用十六进制数来表示，如“#FF0000〞表示红色，“#00FF00〞表示绿色、“#0000FF〞表示蓝色、“#FFFF00〞表示黄色、“#FFFFFF〞表示白色、“#000000〞表示黑色等，即每两位为一种色彩，从左到右分别为红、绿、蓝三色，每组色彩的取值均为00～FF〔十进制数255的十六进制值〕。典型案例——用“记事本〞制作“welcome.html〞网页案例目标 本案例将使用“记事本〞制作一个简单的网页。典型案例——用“记事本〞制作“welcome.html〞网页操作思路〔1〕利用以HTML代码创立的文本文件可以通过“记事本〞等文本编辑程序直接进行编写的特点制作本网页文档。〔2〕创立图像和文本等内容。〔3〕从结构上讲，HTML文件由两大局部组成：一是头部〔即<head>标签与</head>标签之间的内容，如网页的标题就放置在头部〕，二是主体〔即<body>标签与</body>标签之间的内容，也就是在浏览器中看到的内容〕。为了与普通的文本文件相区别，将<html>标签与</html>标签分别放置在网页代码最前及最后，这样，一个简单的网页就创立好了。典型案例——用“记事本〞制作“welcome.html〞网页操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——用“记事本〞制作“welcome.html〞网页案例小结 本案例用“记事本〞制作了一个简单的网页文档。在制作过程中需注意的是：在保存文档时一定要在【保存类型】下拉列表框中选择【所有文件】选项；在输入网页文档名称时，一定要将网页文档的扩展名.htm〔或.html〕一并输入，否那么“记事本〞程序会将其保存为纯文本格式文档。1.2初识DreamweaverCS3 在学习了网页制作的根底知识后，接下来就应该认识网页制作利器——DreamweaverCS3了。1.2初识DreamweaverCS3知识讲解典型案例——用DreamweaverCS3创立“welcome2.html〞网页知识讲解 在学习DreamweaverCS3之前应先安装DreamweaverCS3，安装方法与其他应用程序的安装根本相同，这里不再赘述。知识讲解1.DreamweaverCS3的工作界面2.DreamweaverCS3的根本设置1.DreamweaverCS3的工作界面

2.DreamweaverCS3的根本设置 在使用DreamweaverCS3前，需要进行一些简单的设置，以方便使用软件。选择【编辑】→【首选参数】命令，翻开【首选参数】对话框，如图1.17所示。该对话框左侧为【分类】列表框，右侧为对应的设置选项；默认翻开的是【常规】分类，可单击左侧【分类】列表框中的选项进行切换，然后进行该分类的设置。典型案例——用DreamweaverCS3创立“welcome2.html〞网页案例目标 本案例将用DreamweaverCS3制作“welcome2.html〞网页，其效果和用“记事本〞创立的“welcome.html〞网页相同典型案例——用DreamweaverCS3创立“welcome2.html〞网页操作思路〔1〕创立一个新网页并将其保存。〔2〕在网页中添加素材并设置效果。〔3〕参加版权栏。典型案例——用DreamweaverCS3创立“welcome2.html〞网页操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——用DreamweaverCS3创立“welcome2.html〞网页案例小结 本案例用DreamweaverCS3创立了一个网页，并在IE浏览器中进行了预览。通过本案例的学习，可以看出Dreamweaver的强大功能及由此带来的便捷。Dreamweaver最大的特点之一就是可视化的操作，使得用户在不是很了解网页的框架语言HTML时即可随心所欲地对网页元素进行添加、删除以及各种属性设置，大大地减轻了初学者的负担，使初学者能够轻松上手，为以后的学习打下根底。1.3上机练习 1.3.1用“记事本〞创立“Goodmorning.html〞网页1.3.2用DreamweaverCS3制作“Goodmorning2.html〞网页1.3.1用“记事本〞创立“Goodmorning.html〞网页 本练习将使用“记事本〞制作“Goodmorning.html〞网页文档。1.3.1用“记事本〞创立“Goodmorning.html〞网页操作思路：将素材文件夹中的所有图像复制到网页要保存的文件夹中，如“D:\web〞。翻开“记事本〞程序，新建一个文件，将其保存到与素材图像相同的文件夹中，如“D:\web〞，并将其名称设置为“Goodmorning.html〞。参照效果图输入所有的代码，然后进行保存。1.3.2用DreamweaverCS3制作“Goodmorning2.html〞网页本练习将使用DreamweaverCS3制作与节中用“记事本〞制作的网页相同效果的网页“Goodmorning2.html〞。1.3.2用DreamweaverCS3制作“Goodmorning2.html〞网页操作思路：新建一个网页并将其保存。将要用到的素材复制到保存网页的同一目录下。在网页中插入图像。第2课创立站点与效劳器本课要点具体要求本课导读上机练习本课要点IIS的安装与简单配置站点的规划及创立具体要求了解安装IIS的必要性熟悉IIS的简单配置了解站点的规划掌握站点的创立方法掌握站点信息的修改方法掌握在【文件】面板中创立网站结构的方法本课导读 IIS是进行网页制作、测试、提供WWW效劳和FTP效劳的重要效劳器软件。要提供浏览网页的效劳，必须安装IIS中的WWW效劳。为方便管理和测试，需要在Dreamweaver中进行站点的创立及配置。2.1IIS的安装与简单配置 在学习制作网页前，应将网页的制作和测试环境创立好，其中包括IIS的安装与配置及站点的规划与创立等。2.1IIS的安装与简单配置 2.1.1知识讲解 2.1.2典型案例——局域网Web效劳器的创立2.1.1知识讲解 IIS是InternetInformationServices〔互联网信息效劳〕的缩写，是Microsoft公司的一种集成了多种Internet效劳〔如WWW效劳和FTP效劳等〕的软件。下面就IIS的相关知识进行介绍。2.1.1知识讲解

1.安装IIS的必要性 2.IIS的安装3.IIS的简单配置1.安装IIS的必要性 要发布网页，让其他用户通过网络〔Internet或企业内部网Intranet〕访问站点中的各个网页，需要在放置站点的计算机中安装相应的软件，这就是Web效劳器软件，IIS即包括该效劳。2.IIS的安装 通常情况下，要作为Web效劳器的计算机中都需要安装Windows2000或Windows2003操作系统，对于一般的网页制作和测试用Web效劳器或小型企事业作为Intranet的Web效劳器，安装WindowsXP操作系统即可。下面，以在WindowsXP操作系统中安装IIS为例进行讲解。在安装IIS之前，需要准备好WindowsXP的安装光盘或将WindowsXP的安装程序复制到计算机中。在WindowsXP中安装IIS的具体操作步骤请教师参照软件及书中内容进行讲解。3.IIS的简单配置 创立IIS主要是创立Web效劳器和FTP效劳器，用户通过Web效劳器可以将各种信息有效、直观地发布给局域网中的内部用户或Internet上的用户；通过FTP效劳器可以在效劳器和客户机之间快速地传送文件。将IIS安装好后，系统将自动创立一个默认的Web站点〔默认位于“C:\Inetpub\wwwroot〞文件夹中〕和一个默认的FTP站点〔默认位于“C:\Inetpub\ftproot〞文件夹中〕，用户也可创立自己的Web站点和FTP站点，并修改和设置站点的属性。3.IIS的简单配置 这里，以系统自动创立的默认Web站点为例介绍如何设置Web站点的属性，具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——局域网Web效劳器的创立案例目标 本案例将使用WindowsXP操作系统创立一个局域网Web效劳器。作为效劳器的计算机的IP地址为、Web效劳器的IP地址为，局域网中的用户通过在IE浏览器中输入“50〞进行内部网的访问。典型案例——局域网Web效劳器的创立操作思路〔1〕在要作为Web效劳器的计算机中安装IIS，其安装方法参见节中的“IIS的安装〞局部，本案例中不再赘述。〔2〕配置Web效劳器的IP地址为。〔3〕创立站点文件夹，并配置Web效劳器。典型案例——局域网Web效劳器的创立操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——局域网Web效劳器的创立案例小结 本案例通过创立一个局域网Web效劳器为读者演示了创立Web效劳器的整个流程。在局域网Web效劳器的配置中，正确设置网站首页的名称是非常重要的，当用户在IE浏览器中直接输入Web效劳器地址〔如〕时，IIS将会自动显示首页〔如index.asp〕；如果在站点中没有发现该网页文档，那么按默认文档列表框中的顺序从上向下进行搜索，自动显示发现的文档，如果没有发现，那么会报错。2.2站点的规划及创立 创立IIS，只是完成了创立网页制作和测试环境的一局部，要制作网页，还需要在DreamweaverCS3中进行站点的规划及创立。2.2站点的规划及创立知识讲解典型案例——局域网内部网站站点的创立知识讲解 在制作网页之前，应先对要制作的网页的站点进行规划和创立，这样就可利用站点的管理功能对站点中的文件进行管理和测试。知识讲解1.站点的规划2.站点的创立1.站点的规划站点的规划是指利用文件夹分门别类地保存不同的网页内容，合理地组织站点结构。在规划站点时，应先在本地磁盘上创立一个文件夹作为站点的根目录，在制作过程中创立和编辑的所有网页、图像文件及网站中用到的其他内容都应保存在该文件夹中。在发布站点时，只需将此文件夹中的所有内容上传到Web效劳器上即可。如果站点结构复杂，内容较多，那么还需建立子文件夹，以存放不同类别的网页或图像等。2.站点的创立站点规划完成后就可以开始创立站点了。在DreamweaverCS3中，可以通过【站点管理】对话框进行站点的创立和管理操作。DreamweaverCS3中提供了本地站点、远程站点和测试站点3种站点类型。创立站点和管理站点的具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——局域网内部网站站点的创立案例目标 本案例将在DreamweaverCS3中创立一个局域网内部网站的站点“gongsi〞。典型案例——局域网内部网站站点的创立操作思路〔1〕节已在D盘中创立了文件夹“gongsi〞，本实例中直接进行使用，不再创立站点文件夹。〔2〕配置站点的本地信息。其中，站点名称为“gongsi〞，保存位置为“D:\gongsi\〞。典型案例——局域网内部网站站点的创立操作思路〔3〕配置站点的测试效劳器。其中，在【效劳器模型】下拉列表框中选择【ASPVBScript】选项，在【访问】下拉列表框中选择【本地/网络】选项，在【测试效劳器文件】文本框中输入与本地根文件夹相同的文件夹，即“D:\gongsi\〞。〔4〕在【文件】面板中创立新文件夹及文件并进行编辑。典型案例——局域网内部网站站点的创立操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——局域网内部网站站点的创立案例小结 本案例创立了一个局域网内部网站的站点，在创立过程中需要注意：如果有以.asp为扩展名的动态网页，那么必须配置测试效劳器信息，而且测试效劳器文件夹所在的位置应包含在IIS的站点中，否那么将不能正常显示网页内容。2.3上机练习 2.3.1创立寝室Web效劳器2.3.2创立站点“Site〞2.3.1创立寝室Web效劳器 在寝室内创立一个小型的局域网，选择一台计算机作为Web效劳器，安装IIS并进行配置，然后进行Web效劳器的测试。2.3.2创立站点“Site〞在Dreamweaver中新建一个站点，将其设置为不使用任何效劳器技术，然后将其保存在D盘上的“Site〞文件夹内。2.3.2创立站点“Site〞操作思路：在D盘上新建一个“Site〞文件夹。创立不使用任何效劳器技术的站点并将其保存在“Site〞文件夹内。第3课用文本制作简单网页本课要点具体要求本课导读上机练习本课要点添加网页文本设置文本格式具体要求掌握添加普通文本、空格、特殊字符、水平线、日期及活动字幕的方法掌握设置字体格式的方法掌握设置段落格式的方法熟悉创立列表的方法本课导读 文本是网页的主体，是浏览者获取信息最主要的途径。添加文本及设置文本格式的方法与在Word中根本相同，但也有不同之处，如换行、分段和添加空格等。3.1添加网页文本 文本是网页的主体内容，是向浏览者传递信息最主要的方式。从某种意义上说，文本是网页存在的根底，是网页中不可或缺的元素。3.1添加网页文本

知识讲解

典型案例——制作版权信息栏

知识讲解

在网页中添加文本与在Word等文字处理软件中添加文本类似。知识讲解 1.添加普通文本 2.添加空格 3.添加特殊字符 4.添加水平线 5.添加日期和时间 6.创立活动字幕1.添加普通文本

在Dreamweaver中，可以直接输入文本，也可以从其他文档中复制文本，还可以导入文本。具体操作请教师参照软件和书中内容进行讲解。2.添加空格

如果要添加空格，需将输入法切换到全角状态，然后再按空格键。如果未切换到全角状态，那么也可按【Ctrl+Shift+空格】组合键在文档中添加空格。

3.添加特殊字符

在网页制作过程中，时常需要添加一些特殊字符，如版权符号和注册商标符号等，这就需要使用Dreamweaver的特殊字符添加功能。插入特殊字符的具体操作请教师参照软件和书中内容进行讲解。4.添加水平线

使用水平线可以对多个对象进行分隔，使各个对象错落有致。插入水平线的具体操作请教师参照软件和书中内容进行讲解。5.添加日期和时间

如果需要，还可以在网页中添加日期和时间，在网页中添加日期或时间的具体操作请教师参照软件和书中内容进行讲解。6.创立活动字幕 活动字幕也称为滚动看板和滚动字幕，网站中常用的滚动公告就是一种活动字幕。使用HTML的<marquee>标签即可创立活动字幕，具体操作请教师参照软件和书中内容进行讲解。典型案例——制作版权信息栏

案例目标

本案例将练习在DreamweaverCS3中添加文本。典型案例——制作版权信息栏

操作思路 〔1〕新建一个空白网页并划分出版权栏。〔2〕输入文本。〔3〕在【属性】面板中设置其属性和超链接，然后进行保存。操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——制作版权信息栏

案例小结 本案例通过创立一个版权信息栏演示了水平线、普通文本、特殊符号、普通文本超链接的创立等操作。版权信息栏通常位于页面的底部，主要放置版权声明、技术支持、网站管理超链接等信息，局部网站也将网页访问量和加载页面所用时间等信息放在版权信息栏中。典型案例——制作版权信息栏

3.2设置文本格式 如果网页中的文本样式太单调，那么会大大削弱网页的外观效果。通过对网页文本格式的设置，可使文本变得美观，让网页更具吸引力。3.2设置文本格式

知识讲解

典型案例——美化版权信息栏

知识讲解

设置文本格式包括对选中文本的字体、字号和颜色进行设置，以及对光标插入点所在段落的文本的对齐方式和缩进方式等进行设置，下面分别进行介绍。知识讲解 1.设置字体格式 2.设置段落格式 3.添加列表

1.设置字体格式 同其他文字处理软件一样，在DreamweaverCS3中也可对文本的颜色、字体和字号等进行设置。1〕编辑字体列表2〕设置文本字体及字号3〕更改文本颜色 具体操作方法请教师参考软件和书中内容进行讲解。2.设置段落格式 文本格式设置还包括对文本段落进行格式设置，如设置段落对齐方式、缩进方式和列表等。1〕文本段落对齐方式的设置2〕文本段落缩进方式的设置 具体操作方法请教师参考软件和书中内容进行讲解。3.添加列表 列表有工程列表和编号列表两种。列表常应用在条款或列举等类型的文本中，如文章列表等。1〕添加工程列表2〕添加编号列表 具体操作方法请教师参考软件和书中内容进行讲解。

典型案例——美化版权信息栏

案例目标 本案例将练习对“版权.html〞网页中的文本进行格式设置。

典型案例——美化版权信息栏操作思路〔1〕对水平线进行设置。〔2〕对所有的文本进行字号设置。〔3〕对段落对齐方式进行设置。〔4〕对最后一行文本进行字体及颜色等设置。典型案例——美化版权信息栏操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——美化版权信息栏案例小结 本案例通过美化“版权.html〞为用户演示了文本格式的设置方法。在设置文本格式时，正文文本应尽量使用12像素的宋体。另外，需要特别注意的是：对齐、缩进及列表，都是针对文本段落的，只有对文本段落才有效。3.3上机练习“导购〞网页的制作“导购〞网页的美化3.3.1“导购〞网页的制作 根据本课所学知识制作“导购〞网页文档，主要运用普通文本的输入、水平线的添加、空格的添加、换行与分段等知识点。

3.3.2“导购〞网页的美化 根据本课所学知识对节制作的网页文档进行美化，主要运用字体的添加，字体、字号、颜色的设置，文本段落的对齐，列表的创立和加粗效果的运用等知识点。第4课插入图像美化网页本课要点具体要求本课导读上机练习本课要点图像的插入及根本编辑图像高级操作具体要求熟悉图像的插入熟悉图像的根本编辑学会制作鼠标经过图像学会制作导航条本课导读 除文本外，图像是网页最重要的组成局部。图像在整个网页中可以起到画龙点睛的作用，图文并茂的网页比纯文本更能吸引人的注意力。4.1图像的插入及根本编辑

一个好的网页除了文本之外，还应该有图像来点缀。在网页中恰到好处地使用图像，能使网页更加生动、美观。4.1图像的插入及根本编辑 知识讲解4.1.2典型案例——“青春〞网页的制作知识讲解 图像格式很多，但目前网页中支持的图像格式只有GIF，JPG〔也称为JPEG〕和PNG3种。知识讲解 1.图像的插入 2.图像的根本编辑 1.图像的插入

使用Photoshop或Fireworks等图像处理软件制作好需要的图像并保存为网页支持的图像格式后，即可使用DreamweaverCS3将其插入到网页中。插入图像的具体操作请教师参照软件及书中内容进行讲解。

2.图像的根本编辑

插入图像并选中图像后，可在【属性】面板中编辑图像的属性，如设置图像的大小、边框和对齐方式等。

典型案例——“青春〞网页的制作案例目标 本案例将练习在网页中插入图像并设置图像的根本属性。

典型案例——“青春〞网页的制作操作思路〔1〕将图像文件复制到“img1〞文件夹中并新建一个空白网页文档。〔2〕插入背景图像并设置其格式。〔3〕插入文本并设置格式。典型案例——“青春〞网页的制作操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。

典型案例——“青春〞网页的制作案例小结 本案例主要讲解如何利用DreamweaverCS3在网页中插入图像并对图像的属性进行设置。在浏览网页的时候，当鼠标光标移到图像上时，鼠标光标右下角会出现“青春〞提示字样，这是在【属性】面板的【替换】文本框中输入替换文本的效果。需要注意的是：图像的对齐方式一定要为“左对齐〞，否那么得不到图像和文本段落在同一水平区域的效果。 4.2图像高级操作

DreamweaverCS3中提供了鼠标经过图像和导航条等网页功能，下面对这些功能分别进行介绍。4.2图像高级操作

知识讲解

典型案例——制作网站导航条

知识讲解 鼠标经过图像功能展示的是一种动态图像的效果，当鼠标光标经过图像时图像会发生变化。这种图像由原始图像和鼠标经过图像组成：当鼠标光标移动到原始图像上时，将会显示鼠标经过图像；当鼠标光标移出图像范围时，那么显示原始图像。知识讲解

1.鼠标经过图像的制作 2.导航条的制作

1.鼠标经过图像的制作创立鼠标经过图像的具体操作步骤如下：〔1〕将光标插入点定位到需要创立鼠标经过图像的位置。〔2〕选择【插入记录】→【图像对象】→【鼠标经过图像】命令，翻开【插入鼠标经过图像】对话框。

1.鼠标经过图像的制作〔3〕在【图像名称】文本框中输入图像名称，单击【原始图像】文本框后的【浏览】按钮，在翻开的对话框中选择原始图像并单击【确定】按钮，返回【插入鼠标经过图像】对话框。用同样的方法设置鼠标经过图像。〔4〕选中复选框，可防止图像显示延迟。在【替换文本】文本框中输入所需内容。单击【按下时，前往的URL】文本框后的【浏览】按钮，在翻开的对话框中选择要链接到的网页文档并单击【确定】按钮，返回【插入鼠标经过图像】对话框。〔5〕设置完成后单击【确定】按钮，关闭【插入鼠标经过图像】对话框。2.导航条的制作

导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条为在网页和文件之间的跳转提供了一条快捷途径。制作导航条的具体操作步骤请教师参照软件及书中内容进行讲解。

典型案例——制作网站导航条

案例目标

本案例主要练习制作水平导航条。典型案例——制作网站导航条操作思路 〔1〕将需要的所有图像复制到“img〞文件夹中。〔2〕新建一个文档，在其中插入图像并设置格式。〔3〕插入导航条并进行设置。典型案例——制作网站导航条操作步骤

具体操作步骤请教师参照软件及书中内容进行讲解。典型案例——制作网站导航条案例小结 本案例主要练习水平导航条的创立。首先要注意，插入的第1个图像“left.png〞的对齐方式一定要设置为“左对齐〞，否那么该图像不能和后面的导航条水平对齐，而是分别处于两个段落，当然，在后面学习表格布局或DIV布局的相关知识后就不必设置该选项了。其次，如果在添加导航条元件的过程中操作有误，那么可以在【导航条元件】列表框中选中该元件，然后单击按钮，删除该元件之后再重新添加。添加完所有元件后，可以通过单击和按钮进行前后顺序调整。4.3上机练习 4.3.1制作“新年快乐〞网页 4.3.2为“新年快乐〞网页制作鼠标经过图像4.3.1制作“新年快乐〞网页 本练习将制作“新年快乐〞网页，主要练习在网页中添加图像并对图像的一些根本属性进行设置。4.3.1制作“新年快乐〞网页操作思路:在【页面属性】对话框中设置背景颜色为“#B30404〞。设置文档段落的对齐方式为“居中对齐〞。依次插入“t.gif〞、“t2.gif〞和“n.png〞图像，再设置“n.png〞的宽、高、链接和边框等属性〔因为给图像添加了链接，Dreamweaver默认会给图像加上1像素的边框，以突出图像的链接，但这样很影响网页的整体视觉效果，所以把边框值设为“0〞，去掉边框。至于宽和高的设置，适当即可，不过一定要同比缩放，以保证图像不失真〕。输入文本“新年快乐!Happynewyeartoyou!〞。插入底部图像“b.gif〞。4.3.2为“新年快乐〞网页制作鼠标经过图像

本练习将接着上面的练习制作网页，主要练习制作鼠标经过图像。4.3.2为“新年快乐〞网页制作鼠标经过图像操作思路：将节中制作的“新年快乐.html〞网页另存为“新年快乐2.html〞。删除“n.png〞，并重新添加原始图像为“n.png〞、鼠标经过图像为“n2.png〞的鼠标经过图像。设置鼠标经过图像的属性。第5课用表格标准网页本课要点具体要求本课导读上机练习本课要点表格的创立及根本编辑表格属性设置具体要求掌握普通表格及嵌套表格的创立方法熟悉表格和单元格的选择方法熟悉单元格的合并、拆分及删除方法熟悉表格及单元格属性的设置方法熟悉表格内容的添加方法本课导读 表格在日常办公中很常见，它能使数据的显示更清晰明了，网页中的表格还有更重要的作用——进行页面布局。表格可以将网页分割为很多组合在一起的小块，既加快了网页的加载速度，又使网页整齐而美观。5.1创立及编辑表格 页面布局是网页制作的宏观设置，使用表格进行页面布局是其中最常用的手段。5.1创立及编辑表格 知识讲解典型案例——制作“我的课程表〞表格知识讲解

表格是进行页面布局时非常有用的工具。利用表格进行页面布局，可以将图像或文本放置在表格的各个单元格中，从而精确控制其位置。知识讲解 1.创立表格 2.编辑表格1.创立表格 在DreamweaverCS3中，表格分为普通表格和嵌套表格。普通表格即是传统意义上的表格，嵌套表格是在表格的某个单元格内插入的表格，即表格之中再嵌套表格。1〕创立普通表格2〕创立嵌套表格2.编辑表格 表格创立好后，可以对表格进行合并或拆分单元格、删除或添加行〔或列〕等编辑操作。在表格中添加图像和文本等内容后，根据实际需要，也可对表格的大小等进行调整。1〕选择整个表格2〕选择行或列3〕选择单元格4〕拆分单元格5〕合并单元格6〕添加行或列7〕删除行或列5.1.2典型案例——制作“我的课程表〞表格案例目标 本案例主要练习创立表格和添加简单的内容。5.1.2典型案例——制作“我的课程表〞表格操作思路〔1〕创立一个5行6列的表格。〔2〕将第1列的前两个单元格合并，将第1行的后5个单元格合并。〔3〕在第3行的后5个单元格中各插入一个4行1列的嵌套表格，在第4行的后5个单元格中各插入一个2行1列的嵌套表格。〔4〕在相应单元格中添加文本或图像。5.1.2典型案例——制作“我的课程表〞表格操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。5.1.2典型案例——制作“我的课程表〞表格案例小结 本案例利用表格创立了一个“我的课程表〞网页，运用了创立表格、合并单元格、输入文本以及插入图像等知识。在DreamweaverCS3中，表格内容的对齐方式默认为“左对齐〞，而在IE浏览器中那么为“居中对齐〞，所以在Dreamweaver和IE浏览器中的效果有一定差异，为了防止因表格内容的默认对齐方式不同而引起浏览效果与预期效果的不同，需要在设计网页时为表格设置属性，下面我们就来学习怎样设置表格属性。5.2表格属性设置

要使表格美观，需要对表格及单元格的属性进行设置，如设置边框线颜色和单元格的对齐方式等。5.2表格属性设置知识讲解典型案例——美化“我的课程表〞表格知识讲解

表格的属性很多，包括表格的宽度、高度，表格包含的行数、列数，表格中各单元格间的距离，单元格中内容与单元格边框线间的距离以及是否有边框、边框线粗细和表格背景颜色等，下面分别进行讲解。知识讲解 1.设置表格属性 2.设置单元格属性1.设置表格属性

要进行表格属性设置，需先选中表格。选中表格后，在【属性】面板可进行表格的属性设置。2.设置单元格属性 除了可以设置整个表格的属性外，还可对表格的单元格、行或列的属性进行设置。选择要设置属性的单元格、行或列后，其【属性】面板如下图。在单元格的【属性】面板中，可以对单元格中的文本进行属性设置，其设置方法与普通文本相同。另外，还可以对单元格的对齐方式、宽和高及是否换行等进行设置。典型案例——美化“我的课程表〞表格案例目标 本案例主要练习表格属性及单元格属性的设置。典型案例——美化“我的课程表〞表格操作思路〔1〕设置第1层〔外层〕表格的属性。〔2〕设置第1层表格的单元格属性。〔3〕设置第2层〔嵌套〕表格的属性。〔4〕设置第2层表格的单元格属性。典型案例——美化“我的课程表〞表格操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。典型案例——美化“我的课程表〞表格案例小结 本案例练习美化表格，包括对表格属性〔如表格边框粗细、边框颜色、间距、填充、对齐方式和高度等〕及单元格属性〔如单元格的对齐方式和单元格高度等〕进行设置。通过这些设置，可以使创立的表格及其内容的显示效果更好。5.3上机练习“个人简历〞网页的制作“个人简历〞网页的美化5.3.1“个人简历〞网页的制作 本练习将利用表格进行页面布局。5.3.1“个人简历〞网页的制作操作思路在DreamweaverCS3中创立一个9行1列、宽度为605像素、边框为1像素、其余值保持默认设置的表格。将素材图像“1px.gif〞复制到保存网页文档的位置。在第3行中插入图像“1px.gif〞。在第4～8行中分别插入宽度为90%的嵌套表格。将各嵌套表格的第2行中的单元格合并，在合并后的单元格中分别插入宽度为80%的嵌套表格。输入文本，然后对文本的属性进行设置。“个人简历〞网页的美化本练习将对节中制作的“个人简历〞网页进行美化。“个人简历〞网页的美化操作思路将“个人简历.html〞网页另存为“个人简历2.html〞。选中最外层表格，设置填充、间距和边框值分别为“0〞、“2〞和“0〞，背景颜色和边框颜色均为“#FFFFFF〞。设置最外层表格9行单元格的水平对齐方式均为“居中对齐〞、第1行的垂直对齐方式为“顶端对齐〞、第2～6行的垂直对齐方式为“居中对齐〞。设置第1，2，3，9行单元格的背景颜色。“个人简历〞网页的美化继续设置所有第2层嵌套表格的填充、间距和边框值分别为“0〞、“3〞和“1〞，边框颜色为“#FFFFFF〞。设置所有第2层嵌套表格中各单元格的水平对齐方式以及背景颜色。设置所有第3层嵌套表格中各单元格的水平对齐方式以及背景颜色。第6课建立链接本课要点具体要求本课导读上机练习本课要点使用网页链接网页链接分类具体要求了解网页链接掌握插入链接的根本方法熟悉各种链接的概念本课导读 网页链接能丰富网页的内容和功能，带给网站访问者极大的方便。很难想像一个没有链接的网站会是什么样子：浏览者每读一篇文章或查看一件商品的详细信息，都要从浏览器中输入准确的一串网络地址，这种情况是让人无法接受的。何况，没有网站的导航链接，事先很难知道网页信息的具体地址。网页链接就像网站的骨架，将网页和其他资源有序地整合起来，是网页中不可缺少的一局部。6.1使用网页链接 链接和文本、图像等一样，是网页的主体，是连接网页和其他资源的桥梁。通过链接，浏览者能顺利访问网站的信息资源。本节主要介绍怎样在网页中使用链接，并对链接进行简单的属性设置。6.1使用网页链接知识讲解典型案例——制作“古诗欣赏〞网页知识讲解

链接能够实现页面之间的跳转，从而有机地将网站中的各个页面联系起来，是网页中至关重要的元素。制作网页时，可以通过将链接加在图像和文字等上面来实现资源的连接。知识讲解1.了解网页中的链接2.插入网页链接3.设置链接样式1.了解网页中的链接 链接由源端点和目标端点两局部组成，有链接的一端称为链接的源端点〔鼠标光标移到其上时通常会变为形状〕，提供链接资源的一端称为目标端点，即Internet地址，通常称之为 URL。URL是英文“UniformResourceLocator〞的缩写，其含义为“统一资源定位符〞，它定义了一种统一的网络资源寻找方法，网络上的所有资源〔如网页、音频、视频、Flash动画和压缩文件等〕均可以通过这种方法访问。URL的根本格式是“访问方案://效劳器:端口/路径/文件#锚记〞，例如“://bk.baidu:80/view/262.htm#11〞。2.插入网页链接网页链接通常添加在文本或图像上，可以通过【属性】面板快速添加。1〕添加文本链接2〕创立普通图像链接3〕创立图像热点链接3.设置链接样式默认的页面链接样式很可能与页面的风格不协调，如颜色和字体等，可以根据需要预先进行链接样式的设置。具体操作步骤如下：〔1〕选择【修改】→【页面属性】命令〔或单击【属性】面板下方的【页面属性】按钮〕，翻开【页面属性】对话框。〔2〕在左边的【分类】列表框中选择【链接】选项，将对话框切换到该分类。在该对话框中进行相应的设置，然后单击【确定】按钮，关闭对话框。6.1.2典型案例——制作“古诗欣赏〞网页案例目标 本案例将练习在网页中添加图像和文本链接，并设置页面链接样式。6.1.2典型案例——制作“古诗欣赏〞网页操作思路〔1〕设置页面属性和链接样式。〔2〕插入表格并设置表格样式，利用表格进行网页布局。〔3〕插入嵌套表格。〔4〕添加相应文本和图像。〔5〕在文本和图像上添加链接。6.1.2典型案例——制作“古诗欣赏〞网页操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。6.1.2典型案例——制作“古诗欣赏〞网页案例小结 本案例通过制作“古诗欣赏〞网页演示了创立及设置文本链接和图像链接的方法，读者一定要掌握这些知识。6.2链接分类 在网页中，除了指向页面的链接外，还有文件链接、脚本链接、电子邮件链接、空链接和命名锚记等比较常见的链接类型。另外，链接还可分为相对链接和绝对链接两类。本节将详细介绍各种链接。6.2链接分类

知识讲解

典型案例——完善版权信息知识讲解 不同的链接可以实现不同的功能，下面分别介绍不同链接的功能和创立方法。知识讲解1.相对链接2.绝对链接3.文件链接4.空链接5.电子邮件链接6.命名锚记1.相对链接 相对链接在页面制作中最为常见，它只能链接网站内部的页面或资源，是链接目标相对于创立链接的页面的路径。例如，“about.html〞说明页面“about.html〞和链接所在的页面处于同一个文件夹中；又如，“img/logo.gif〞说明图片“logo.gif〞在创立链接的页面所处文件夹中的【img】文件夹中，依此类推，以斜线〔/〕分隔文件夹和文件来表示路径。创立相对链接的具体操作请教师参照软件和书中内容进行讲解。2.绝对链接 与相对链接对应的是绝对链接，绝对链接采用严格的寻址标准，包含通信方案、效劳器地址和效劳端口等，如“://news.163/img/netease_logo.gif〞，通过它就可以访问“://news.163〞网站内部“img〞文件夹中的图片“netease_logo.gif〞。绝对链接的创立方法和相对链接的创立方法一样，只是链接的地址需要手动输入。3.文件链接

互联网上的资源丰富多样，除了网页之外，还有音频〔如MP3和铃声〕、视频、应用软件和小说等，下载这些文件就需要通过文件链接来实现。文件链接的创立方法和页面链接相同，也包括相对链接和绝对链接两种形式。4.空链接 为了实现一些自定义的功能或效果，常常要在网页中添加脚本，如JavaScript和VBScript脚本等，而其中许多功能是与访问者互动的，比较常见的是“设为首页〞和“参加收藏〞等，它们都需要通过空链接来实现。空链接并不实现页面的跳转，而是提供调用脚本的功能。空链接的地址统一用“#〞表示，需要在代码中添加脚本。5.电子邮件链接电子邮件链接为浏览者提供了快速创立电子邮件的功能，用户单击此类链接后即可进入电子邮件的创立向导，它的一大特点就是预先设置好了收件人的邮件地址。电子邮件链接与页面链接的不同之处在于使用的通信方案不同，电子邮件链接的通信方案是SMTP，所以在添加链接地址的时候加上“mailto:〞指定通信方案即可，如“mailto:www@163〞，后面的“www@163〞就是收件人的邮件地址。创立电子邮件链接的具体操作请教师参照软件和书中内容进行讲解。6.命名锚记当浏览者翻开某网页时，默认是从页面顶部开始显示的，如果网页内容超出窗口高度，那么需拖动滚动条往下浏览。当网页比较长的时候，这种方式就有些让浏览者费心了，比方一个公司介绍网页，每个局部都有一段较长的图文内容，加在一起网页就比较长了，这时，可以在网页中使用命名锚记，单击指向各命名锚记的链接即可跳到相应的局部去阅读，而不需使用滚动条去寻找。创立命名锚记的过程如下：⑴在页面某位置插入命名锚记。⑵在页面中需要跳转到命名锚记的位置插入指向对应锚记的链接。

典型案例——完善版权信息

案例目标 本案例将对节中制作的“版权2.html〞网页进行进一步完善，练习空链接和电子邮件链接的使用方法。典型案例——完善版权信息操作思路〔1〕翻开网页文档，在其中添加新的工程并设置格式。〔2〕为插入的工程编辑代码，设置链接。典型案例——完善版权信息操作步骤

具体操作步骤请教参照软件和书中内容进行讲解。

典型案例——完善版权信息案例小结 本案例通过对节中制作的“版权2.html〞网页进行进一步完善为用户演示了“设为首页〞和“参加收藏〞等空链接的创立方法以及电子邮件链接的使用方法。创立链接的通用方法是使用【属性】面板输入链接地址，建议读者熟练掌握该方法，其余方法作为辅助即可。6.3上机练习6.3.1制作网站友情链接栏目6.3.2制作“软件下载〞网页6.3.1制作网站友情链接栏目 根据本课所学知识制作网站中常见的友情链接栏目，其中主要用到了图像和文本链接以及滚动字幕，这些都是网站建设中常用的技术。读者熟练掌握本例之后，举一反三，即可满足多样化的网站需求。6.3.1制作网站友情链接栏目操作思路新建一个空白网页文档，在其中划分出链接栏，并将需要用到的图像复制到保存网页的文件夹中。插入图像和文本，并在【属性】面板中设置其属性。添加各种效果。6.3.2制作“软件下载〞网页 根据本课及之前所学的知识制作一个“软件下载〞网页，其中主要用到了文件链接、空链接以及文本和图像链接等。另外，还采用了表格布局技术，从而进一步稳固之前的学习内容。6.3.2制作“软件下载〞网页操作思路新建一个空白网页文档并保存，将需要的图像复制到保存该网页的目录下。使用表格进行网页布局，然后插入图像和文本等。设置链接。第7课通过多媒体元素丰富网页

本课要点具体要求本课导读上机练习本课要点插入Flash媒体元素插入其他媒体元素具体要求掌握插入Flash动画、按钮和文本的方法掌握插入FlashPaper的方法掌握插入Flash视频的方法掌握设置Flash背景透明的方法了解插入Shockwave影片的方法了解插入JavaApplet的方法熟悉插入背景音乐的方法熟悉插入插件的方法本课导读 网页中如果只有图像和文本，那么表现力毕竟有限。如果在网页中参加一些动感十足的Flash动画，那么可以吸引更多浏览者的注意。如果再加上背景音乐，那么就更能创立图像、文本、动画和音乐四位一体的多媒体效果了。7.1插入Flash媒体元素在网页中添加动态元素可使网页更具动感、更吸引人。Flash动画是网页中最常见的动态元素。Flash动画是一种矢量动画，它具有动画文件小、效果好并能够实现交互等优点。要制作Flash动画，可以使用Adobe公司最新推出的FlashCS3软件。7.1插入Flash媒体元素 知识讲解典型案例——制作“江南旅游〞网首页知识讲解 在DreamweaverCS3中，可以直接插入发布后的Flash动画文件〔.swf文件〕。可插入的Flash媒体元素包括Flash动画、Flash按钮和Flash文本等。知识讲解

1.了解Flash文件格式 2.插入Flash动画

3.插入Flash按钮

4.插入Flash文本

5.插入FlashPaper

6.插入Flash视频

7.设置Flash动画背景透明1.了解Flash文件格式要想在网页中插入适宜的Flash媒体元素，首先得了解其文件格式。Flash文件主要有以下3种文件类型：.swf.fla.swt2.插入Flash动画 制作网页时必须考虑到网络的下载速度，所以在插入Flash动画文件之前最好将其压缩为.swf格式。在网页中插入Flash动画后，可在【属性】面板中对其进行大小调整和预览等操作。插入Flash动画的具体操作请教师参照软件和书中内容进行讲解。3.插入Flash按钮 DreamweaverCS3中集成了许多精美的Flash按钮，这为增加网页动态效果提供了方便。在制作网页时，也可以将自己制作的Flash按钮插入到网页中。插入Flash按钮的方法与插入Flash动画类似，这里主要讲解插入DreamweaverCS3中集成按钮的方法。具体操作请教师参照教材进行讲解。4.插入Flash文本

在网页中还可以插入Flash文本，插入Flash文本的方法与插入Flash按钮的方法类似。Flash文本是DreamweaverCS3中集成的文本动画，可以通过【插入Flash文本】对话框插入。在网页中插入Flash文本的具体操作请教师参照软件和书中内容进行讲解。

5.插入FlashPaper FlashPaper是一种特殊的Flash动画文件，可以通过FlashPaper软件制作。制作网页时，可以利用插入FlashPaper功能在网页中插入FlashPaper文档。这样，在浏览器中翻开包含FlashPaper文档的网页时，用户就可以浏览FlashPaper文档中的所有页面，而无须加载新的网页；用户也可以搜索、打印和缩放该文档。在网页中插入FlashPaper的具体操作请教师参照软件和书中内容进行讲解。6.插入Flash视频

插入Flash视频也是目前网页制作中常用的方法。在DreamweaverCS3中，可以轻松地在网页中插入Flash视频。插入Flash视频的具体操作请教师参照软件和书中内容进行讲解。7.设置Flash动画背景透明 有时，为了优化网页视觉效果，可在表格的单元格中插入背景图像，然后再在该单元格中插入Flash动画，这时需要将Flash动画设置为背景透明，否那么就看不见下面的背景图像了。设置Flash动画背景透明的具体操作请教师参照软件和书中内容进行讲解。典型案例——制作“江南旅游〞网首页案例目标

本案例将制作一个网站的首页，主要练习插入Flash动画、Flash文本和Flash按钮。典型案例——制作“江南旅游〞网首页操作思路〔1〕设置页面属性，并插入图像。〔2〕插入Flash动画。〔3〕设置Flash动画背景透明。〔4〕插入Flash文本。〔5〕插入Flash按钮。典型案例——制作“江南旅游〞网首页操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。典型案例——制作“江南旅游〞网首页案例小结 本案例练习了添加Flash动画、Flash文本、Flash按钮和设置Flash动画背景透明等。为了使Dreamweaver能正常插入Flash文本和Flash按钮，网页的保存路径中不能包含中文，而且Flash文本和Flash按钮的保存路径中也不能包含中文；如果网站文件夹名称中由于某些因素一定要包含中文，那么可在不包含中文的路径下创立新页面，在此页面中插入Flash文本或Flash按钮，此时，Dreamweaver能正常创立所需的Flash文本或Flash按钮，并生成.swf文件，然后将生成的.swf文件复制到网站所需目录中，使用插入Flash的方法插入该文件，便可实现相对应的同种功能。7.2插入其他媒体元素

在DreamweaverCS3中，除了可以插入Flash媒体元素外，还可添加其他媒体元素，如Shockwave影片、JavaApplet及背景音乐等。7.2插入其他媒体元素

知识讲解

典型案例——在线影院

知识讲解

下面讲解在DreamweaverCS3中插入Shockwave影片、JavaApplet及背景音乐等的方法。知识讲解

1.插入Shockwave影片 2.插入JavaApplet 3.插入背景音乐 4.插入插件

1.插入Shockwave影片

Shockwave影片具有文件小、下载速度快、被目前主流的浏览器所支持等优点，广泛应用于网页制作中。它是使用Director制作的多媒体影片文件。在DreamweaverCS3中插入Shockwave影片的具体操作请教师参照软件和书中内容进行讲解。2.插入JavaAppletJavaApplet是Java的应用程序，是一种动态、平安和跨平台的网络应用程序，它能在网页中实现一些特殊效果，如下雪、水纹和下雨等。JavaApplet常被嵌入到HTML语言中，可以实现较为复杂的控制和动态效果。可以从网站上下载JavaApplet，如://java/zh等网站。在网页中插入JavaApplet的具体操作请教师参照软件和书中内容进行讲解。3.插入背景音乐

在DreamweaverCS3中，可以为网页添加背景音乐。背景音乐是在网页后台播放的音乐，在制作时可以采用在源代码中添加代码的方法来添加背景音乐，具体操作请教师参照软件和书中内容进行讲解。

4.插入插件

如果想在浏览器中访问更多类型的媒体对象，就必须借助插件。利用插件可以在网页中插入各种类型的媒体元素。插件包括的范围很广，如视频文件、音乐文件和动画文件等。前面介绍的Shockwave影片就是插件中的一员。插入插件的具体操作请教师参照软件和书中内容进行讲解。

7.2.2典型案例——在线影院案例目标 本案例将在网页中插入一个插件，以丰富网页内容，主要练习插入插件的操作。7.2.2典型案例——在线影院操作思路〔1〕插入插件。〔2〕设置插件属性。7.2.2典型案例——在线影院操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。7.2.2典型案例——在线影院案例小结 本案例在“在线影院〞网页中插入了一个插件，在制作过程中主要练习了插入插件以及设置插件属性等操作。制作本案例主要是为了让读者灵活掌握插入插件的方法，从而学会在网页制作过程中插入其他媒体元素。7.3上机练习7.3.1个人主页7.3.2MTV欣赏7.3.1个人主页 本练习将制作一个个人主页，主要练习插入Flash动画、设置Flash动画背景透明以及添加背景音乐。7.3.1个人主页操作思路：设置页面属性，并添加背景音乐。插入背景图像，添加背景透明的Flash动画。插入Flash动画。7.3.2MTV欣赏 本练习将在“MTV欣赏〞页面中插入一个插件，主要练习插入插件。7.3.2MTV欣赏操作思路：在网页中插入“电影神话主题曲.wmv〞文件。在【属性】面板中设置其宽度为“640像素〞、高度为“480像素〞。第8课使用层叠样式美化网页本课要点具体要求本课导读上机练习本课要点层叠样式的定义及创立层叠样式的管理和应用具体要求了解层叠样式熟悉创立层叠样式的方法掌握层叠样式的管理掌握层叠样式的应用本课导读 DreamweaverCS3中默认的文本字号都比较大，需要用户自己手动来设置，但逐一设置很麻烦，运用层叠样式就可以很方便地对整个网页中的文本进行字体格式设置。另外，还可以用层叠样式来创立十分精美的表格线框等。8.1层叠样式的定义及创立 在设计网页时，常常需要对网页中各种元素的属性进行设置。一般来说，在同一个网站的所有页面中，相同类型的网页元素应该具有相同的属性，。如果逐一设置会做许多重复的工作，而且很容易出错；当需要对属性进行修改时，也需要逐一进行修改。为了解决这个问题，就需要使用CSS〔CascadingStyleSheets，即层叠样式表〕来统一进行控制。定义CSS样式后，就可以把它应用到不同的网页元素中，这样，所有应用该CSS样式的网页元素就会具有相同的属性；当修改该CSS样式后，所有应用该CSS样式的网页元素的属性就会一同被修改。8.1层叠样式的定义及创立

知识讲解

典型案例——设置网页页面属性

知识讲解 要想在文档中使用CSS样式，可以创立新的CSS样式，也可以链接或导入文档外部的CSS样式。在创立CSS样式前，我们先来了解一下CSS样式的定义。知识讲解 1.层叠样式的定义 2.认识【CSS样式】面板 3.创立层叠样式4.CSS样式的具体定义

1.层叠样式的定义CSS是“层叠样式表〞的简称，通过CSS可以定制网页中的文本格式，不仅可以控制一个页面的文本格式，采用外部链接的方式还可以控制多个页面的文本格式。CSS样式有多种定义方式，主要有标签CSS样式、类CSS样式和伪类CSS样式3种。2.认识【CSS样式】面板CSS的创立及管理根本上都是在【CSS样式】面板中进行的，下面就来认识它。选择【窗口】→【CSS样式】命令或按【Shift＋F11】组合键，翻开【CSS样式】面板。在该面板中可进行新建、编辑、删除CSS样式和链接外部CSS文件等操作。3.创立层叠样式在【CSS样式】面板中创立CSS样式的具体操作步骤如下：〔1〕单击【CSS样式】面板右上角的按钮，在弹出的菜单中选择【新建】命令，翻开【新建CSS规那么】对话框。〔2〕在【选择器类型】栏中选择所需定义的样式类型。〔3〕在【定义在】栏中可选择样式的种类或选择只在当前文档中应用所选样式。这里选中单项选择按钮，然后单击【确定】按钮。〔4〕翻开【保存样式表文件为】对话框。在该对话框的【保存在】下拉列表框中选择保存路径，在【文件名】文本框中输入该CSS样式的名称。〔5〕单击【保存】按钮，保存新建的样式表文件并自动翻开CSS规那么定义对话框。〔6〕在该对话框中进行各项参数设置，设置完成后单击【确定】按钮，系统会自动在【CSS样式】面板中显示出定义的样式。4.CSS样式的具体定义 CSS样式有8个类别：1〕类型 2〕背景 3〕区块4〕方框 5〕边框 6〕列表7〕定位 8〕扩展各类别中相关参数的具体含义请教师参照软件和书中内容进行讲解。典型案例——设置网页页面属性

案例目标 网页页面属性也是通过创立层叠样式来实现对整个网页进行控制的，下面就来设置网页页面属性。典型案例——设置网页页面属性操作思路〔1〕新建一个空白文档并将所有要用的素材复制到保存网页的位置。〔2〕设置页面属性。〔3〕插入网页元素。典型案例——设置网页页面属性操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。典型案例——设置网页页面属性案例小结 本案例练习了网页页面属性的常规设置，DreamweaverCS3将网页页面中最常用的一些层叠样式集中在其中，以方便制作者进行设置。8.2层叠样式的管理和应用 初次创立的层叠样式可能不太符合实际需要，此时可以对层叠样式进行编辑。另外，局部层叠样式创立好后，还需制作者手动进行应用。8.2层叠样式的管理和应用

知识讲解

典型案例——为表格应用CSS样式知识讲解 在DreamweaverCS3中，可以对已创立的CSS样式进行修改和编辑，也可以删除已创立的CSS样式。知识讲解

1.编辑CSS样式 2.链接外部CSS样式表文件 3.删除CSS样式 4.应用CSS样式

1.编辑CSS样式 编辑CSS样式有两种方法：一种是在CSS规那么定义对话框中进行修改，另一种是直接在【CSS样式】面板中修改。2.链接外部CSS样式表文件 CSS样式通常只显示在创立该样式的页面的【CSS样式】面板中，通过链接可将其他页面中的样式应用到当前页面中。链接外部样式表的具体操作步骤请教师参照软件和书中内容进行讲解。3.删除CSS样式 如果不再需要某个CSS样式，那么可以将其删除。在【CSS样式】面板中选择要删除的CSS样式，再单击按钮，即可删除该CSS样式。

4.应用CSS样式设置好CSS样式后，标签CSS样式和伪类CSS样式会自动应用到相应的HTML标签和伪类上，而类CSS样式需要手动应用到需要的网页元素上。将类CSS样式应用到网页元素上主要有3种方法：使用网页元素的快捷菜单使用CSS样式的快捷菜单使用网页元素的【属性】面板8.2.2典型案例——为表格应用CSS样式

案例目标 本案例利用CSS样式对节中制作的“我的课程表〞网页进行样式设置，以美化网页。8.2.2典型案例——为表格应用CSS样式操作思路〔1〕定义第1层表格的边框和背景等属性。〔2〕定义第1层表格的单元格属性。〔3〕定义第2层表格的边框和背景等属性。〔4〕定义第2层表格的单元格属性。8.2.2典型案例——为表格应用CSS样式操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。8.2.2典型案例——为表格应用CSS样式案例小结 本案例练习用CSS样式对表格进行修饰，从中可以看出：CSS样式是统一多个网页风格的工具，使用得当可使网页制作事半功倍而且效果协调统一。在一些大型网站中，所有页面的风格是一致的，但各个栏目之间有一些小的差异，在制作好一个栏目的CSS样式文件后，再稍微修改一下即可。8.3上机练习8.3.1“再别康桥〞网页页面属性设置8.3.2“再别康桥〞网页其他样式的设置及应用8.3.1“再别康桥〞网页页面属性设置 本练习对“再别康桥〞网页进行页面属性设置。8.3.1“再别康桥〞网页页面属性设置操作思路：设置页面背景。设置页面默认字体〔默认字体的颜色要参照背景图像的颜色进行设置〕。设置链接样式。8.3.2“再别康桥〞网页其他样式的设置及应用 本练习对“再别康桥〞网页进行其他样式的定义及应用。8.3.2“再别康桥〞网页其他样式的设置及应用操作思路：定义3种不同的字体样式，并将其分别应用于诗人简介、诗歌标题和诗歌内容。定义顶部表格及单元格的样式。定义图片样式。第9课使用框架进行网页布局本课要点具体要求本课导读上机练习本课要点了解框架并创立框架框架及框架集的根本操作和属性设置具体要求了解框架及框架集熟悉框架及框架集的创立掌握框架及框架集的根本操作掌握框架及框架集的属性设置本课导读 使用框架可以防止重复劳动，如将共同的局部〔顶部的导航区和版权信息区〕做成单独的网页，然后通过框架将其链接到各个框架网页中，从而节约时间，并减小整个网站的大小。9.1了解框架并创立框架 在布局页面时除了可以使用层和表格外，还可以使用框架进行布局，下面介绍框架的概念及创立方法。9.1了解框架并创立框架 知识讲解典型案例——制作“在线小说〞框架网页知识讲解 框架的功能是把浏览器窗口划分为假设干个区域，分别显示不同的网页。框架集的功能是定义一组框架的布局和属性。下面对框架及框架集的相关知识进行介绍。知识讲解 1.了解框架及框架集 2.框架及框架集的创立 3.框架及框架集的保存

1.了解框架及框架集在网页上定义的一个区域就是单个框架，而框架集那么记录了同一个网页中多个框架的布局、超链接和属性信息。利用框架可以把浏览器窗口划分为假设干个区域，在每个区域中可以添加任意网页元素，也可以分别显示不同的网页。1.了解框架及框架集 框架集与框架之间的关系其实就是包含与被包含的关系，框架集相当于一个容器，框架那么是放在容器中的东西，框架集记录了框架的位置以及框架中包含的网页的链接地址。2.框架及框架集的创立 DreamweaverCS3的预定义框架集可以直接创立，也可以在页面中加载。 1〕直接创立预定义框架集 2〕加载预定义框架集 3〕手动创立框架集3.框架及框架集的保存 框架创立完成后，可将其保存。在DreamweaverCS3中，保存框架和框架集与保存一般网页文档有所不同，可以保存某个框架文档，也可以单独保存框架集文档，还可以保存框架集和框架中出现的所有文档。 1〕保存框架文档 2〕保存框架集文档 3〕保存框架集中的所有文档典型案例——制作“在线小说〞框架网页案例目标 本案例主要练习利用框架进行网页布局。本案例中共有5个框架，其中顶部及底部各1个，中间3个。典型案例——制作“在线小说〞框架网页操作思路〔1〕创立一个“上方固定，下方固定〞类型的框架集。〔2〕将中间的框架进行拆分、调整，使中间具有3个框架。〔3〕保存框架及框架集。典型案例——制作“在线小说〞框架网页操作步骤

具体操作步骤请教师参照软件和书中内容进行讲解。典型案例——制作“在线小说〞框架网页案例小结 本案例练习了框架网页的创立及保存，其中要重点掌握的是手动进行框架拆分的方法，要区分按住【Alt】键拆分与未按住【Alt】键直接拆分的区别。另外，本案例中保存框架及框架集时使用的都是快捷键，用户可在DreamweaverCS3的【文件】菜单中找到相应命令的快捷键。9.2框架及框架集的根本操作和属性设置 框架创立完成后，还需对其进行一些操作，如选择框架、设置属性和链接网页等，下面分别进行讲解。9.2框架及框架集的根本操作和属性设置知识讲解典型案例——设置“在线小说〞网页的框架及框架集属性知识讲解 可对框架及框架集进行选择和删除等操作，下面对这些根本操作进行讲解。知识讲解 1.框架及框架集的根本操作 2.删除框架 3.框架及框架集的属性设置 1.框架及框架集的根本操作 在对框架和框架集进行属性设置以及其他操作前，需要先选择相应的