网页制作教程教学课件-整套教程电子讲义.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第1章,网页基础知识,网页相关知识简介,认识网页构成,网站建设流程,1.1 网页相关知识简介,1.1.1 因特网,因特网（Internet），又叫国际互联网，它是目前世界上最大的计算机网络，将无数广域网、局域网及单机按照一定的通讯协议组织在一起，方便了计算机之间的信息传递。,1.1.2 网站、网页和主页,网站是多个网页的集合，各个网页通过超级链接构成一个网站整体。,网页实际上包括了一组文件，它们分别是网页文件（扩展名为.htm、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。,主页也叫首页，即浏览者登录网站时看见的第一个网页，也是网站的入口。,1.1.3 IP地址与域名,IP地址由4个小于256的数字组成，数字之间用点间隔，例如“61.135.150.126”就是一个IP地址。,由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名，域名是独一无二的。,1.1.4 网址,网址又叫URL，它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。,一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。,范例1 在浏览器中打开金企鹅网站,本例通过在IE浏览器中打开金企鹅网站，来熟悉一下域名、网址和浏览器的应用。,启动IE浏览器，在地址栏中输入金企鹅网站域名,按【Enter】键,，打开网页,1.1.6 网站管理与网页制作相关软件,Fireworks：主要用于制作网页图像、网站标志、GIF动画、图像按钮与导航栏等。,Flash：主要用于制作矢量动画，如广告条、网站片头动画、动画短片、MTV等。,Photoshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求（除了多媒体）。,在进行网页制作时，除了需要Dreamweaver外，还会用到Fireworks、Flash、Photoshop等辅助软件。,1.1.7 XHTML,XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。,1.1.8 脚本语言简介,脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript。,VBScript和JScript是微软的产品，IE都支持。JavaScript是Netscape的产品，不仅适用于Netscape，同时和IE也有很好的兼容性可以说是一种通用的脚本语言。,范例2 无缝滚动效果的实现,本例通过研究无缝滚动效果的实现，来认识一下XHTML和脚本语言在网页制作中的作用。,XHTML,JavaScript,1.1.8 动态网页概述,动态网页与静态网页是相互对应的，从表现形式上来看，网页URL的后缀不一样，静态网页的后缀可以是.htm、.html、.shtml和.xml，而动态网页是以.asp、.jsp、.php、.perl、.cgi等形式为后缀的，并且在动态网页网址中有一个标志性的符号“？”例如，“认识网页构成,网页中的元素都有自己的名字，可以将他们分为站标、导航条、广告条、标题栏和按钮等。,站标,广告条,导航条,按钮,标题栏,1.2.1 站标,站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。,Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合，如图1-11所示。,1.2.2 导航条,导航条是网站内多个页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。,导航条,导航条,1.2.3 广告条,广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。Banner的尺寸可以根据版面需要来安排，一般大型的商务网站都有自己的标准尺寸和摆放位置。,1.2.4 标题栏,这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。,标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站常采用后者。,1.2.5 按钮,在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。,1.3 网站建设流程,1.3.1 网站需求分析,1确定网站主要内容,2规划网站主要栏目,3收集网页所用素材,1.3.2 设计制作网站页面,该过程主要包括设计和制作页面，所谓设计，就是用图像处理软件设计好网页的效果图，并将设计好的效果图进行切割导出。,将切割好的图片进行导出后，就可以在Dreamweaver中组织网站内容了。包括输入文本、插入图片、动画等。,1.3.3 空间和域名申请,1申请虚拟空间,所谓虚拟空间，就是互联网上的一台功能相当于服务器级的电脑或虚拟主机，该电脑要用专线或其他形式24小时与因特网相连。,2申请域名,域名的申请方法与虚拟空间相同，凡提供虚拟空间服务的网站一般都提供域名服务。,1.3.4 测试和发布网站,有了空间和域名后，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。,1.3.5 网站推广,注册到搜索引擎,交换广告条,宣传,网络广告,报纸、杂志,第2章,Dreamweaver 8入门,熟悉Dreamweaver 8工作界面,网站创建与管理,基本页面属性设置,2.1 熟悉Dreamweaver 8工作界面,启动Dreamweaver 8后，在起始页的“创建新项目”列中单击第一项“HTML”，将会创建一个“.html”格式的新文档，并进入Dreamweaver 8工作界面。,2.1.1 标题栏和菜单栏,标题栏上显示软件名称、文档标题和程序窗口控制按钮（“最小化窗口”按钮 、“最大化窗口”按钮 和“关闭窗口”按钮 ）。,菜单栏中几乎集中了Dreamweaver 的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。,2.1.2 “插入”栏,“插入”栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可将相应的对象插入到文档中。,2.1.3 文档标签与“文档”工具栏,文档标签显示了网页文档名称；“文档”工具栏用于切换网页视图，设置网页标题，检查浏览器支持等。,2.1.4 状态栏,状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。,范例1 利用状态栏中标签选择单元格,在制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，下面我们就来看看如何利用,“,标签选择器,”,来选中这些小单元格（具体操作见视频2-1）。,2.1.5 浮动面板,在Dreamweaver中，大多数操作都是通过面板实现的。,“属性”面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。,除“属性”面板外，Dreamweaver 8还提供了众多面板，如“文件”面板、“历史记录”面板等。,如要打开或关闭某个面板，可单击“窗口”菜单下的相应选项。,范例2 练习面板基本操作,在了解了面板的种类和作用后，下面来看看如何打开新的面板、隐藏面板，以及完全关闭面板等（具体操作见视频2-2）。,2.2 网站创建与管理,2.2.1 确定站点目录结构,为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。它主要包括两项任务，一是在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等的文件夹，该文件夹被称为站点根文件夹；为便于管理站点中的内容，还要在站点文件夹中创建若干子文件夹，以存放不同类型的文件。,范例3 在Dreamweaver中定义“火百合”站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联，可以使用Dreamweaver上传或下载站点内容（具体操作见视频2-3）。,2.2.2 网页文档基本操作,1新建文档,Dreamweaver中的文档也就是网页，创建新网页的方法有多种，下面使用,“,文件,”,菜单创建网页。,选择,“,文件,”,“,新建,”,菜单，打开,“新建文档,”,对话框。,2保存文档,新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。,选择,“,文件,”,“,保存,”,菜单，弹出,“,另存为,”,对话框,选择保存位置,输入文件名,单击,“,保存,”,按钮,3预览文档,对网页进行编辑或修改后，可在浏览器中预览其效果。,打开文档后，单击文档工具栏中的 按钮，在弹出的菜单中选择,“,预览在IExplore 7.0,”,菜单项,4打开和关闭文档,如要打开某站点中现有的网页文档，可以选择“文件”“打开”菜单，在弹出的“打开”对话框中选择要打开的文件，然后单击“打开”按钮。,选择目标文件所在文件夹,关闭文件的操作相当简单，只需单击相应文件右上方的,“,关闭,”,按钮 。,单击选择文件,单击,“,打开,”,按钮,范例4 利用“文件”面板创建网页,使用“文件”面板，可以非常方便地管理站点和站点中的文件。下面看一下在“文件”面板中创建和命名文档的方法（具体操作见视频2-4）。,2.2.3 网页文件命名规则,为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。首先，静态的首页文件一般命名为“index.html”或“index.htm”。如果是包含程序代码的动态页面，比如ASP文件，则命名为“index.asp”。总之，后缀名与网页本身所使用的技术是对应的。,2.3 基本页面属性设置,2.3.1 指定网页文档标题和边距,在浏览网页时，可以看到浏览器上端都会有表示网页特征或欢迎词之类的标题。在Dreamweaver中，可以在,“,文档工具栏,”,中的,“,标题,”,文本框中直接输入网页标题，也可以在,“,页面属性,”,对话框的,“,标题/编码,”,类别中进行设置。,另外，利用,“,页面属性,”,对话框，可以随意调整网页的上、下、左、右边距，如果想取消这些边距，可以把边距值设定为,“,0,”,。,2.3.2 指定网页背景颜色和背景图像,指定网页背景颜色的方法非常简单，只需在“页面属性”对话框中单击“背景颜色”后的颜色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。,如果用户喜欢的话，也可以将图像设置为网页背景（具体操作见视频2.3.2）。,2.3.3 为网页设置文本和链接属性,通过设置“页面属性”对话框中的“页面字体”、“大小”和“文本颜色”，可以设置网页中文本的属性。,另外，要设置链接文本的属性，可以在“页面属性”对话框左侧的分类列表中选择“链接”选项，然后在右侧设置各项参数。,范例5 为“movie”网页设置页面属性,通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。本节通过编辑“movie”网页，来使读者进一步掌握网页页面属性的设置方法（具体操作见视频2-5）。,第2章,Dreamweaver 8入门,熟悉Dreamweaver 8工作界面,网站创建与管理,基本页面属性设置,2.1 熟悉Dreamweaver 8工作界面,启动Dreamweaver 8后，在起始页的“创建新项目”列中单击第一项“HTML”，将会创建一个“.html”格式的新文档，并进入Dreamweaver 8工作界面。,2.1.1 标题栏和菜单栏,标题栏上显示软件名称、文档标题和程序窗口控制按钮（“最小化窗口”按钮 、“最大化窗口”按钮 和“关闭窗口”按钮 ）。,菜单栏中几乎集中了Dreamweaver 的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。,2.1.2 “插入”栏,“插入”栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可将相应的对象插入到文档中。,2.1.3 文档标签与“文档”工具栏,文档标签显示了网页文档名称；“文档”工具栏用于切换网页视图，设置网页标题，检查浏览器支持等。,2.1.4 状态栏,状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。,范例1 利用状态栏中标签选择单元格,在制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，下面我们就来看看如何利用,“,标签选择器,”,来选中这些小单元格（具体操作见视频2-1）。,2.1.5 浮动面板,在Dreamweaver中，大多数操作都是通过面板实现的。,“属性”面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。,除“属性”面板外，Dreamweaver 8还提供了众多面板，如“文件”面板、“历史记录”面板等。,如要打开或关闭某个面板，可单击“窗口”菜单下的相应选项。,范例2 练习面板基本操作,在了解了面板的种类和作用后，下面来看看如何打开新的面板、隐藏面板，以及完全关闭面板等（具体操作见视频2-2）。,2.2 网站创建与管理,2.2.1 确定站点目录结构,为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。它主要包括两项任务，一是在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹；为便于管理站点中的内容，还要在站点文件夹中创建若干子文件夹，以存放不同类型的文件。,范例3 在Dreamweaver中定义“火百合”站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联，可以使用Dreamweaver上传或下载站点内容（具体操作见视频2-3）。,2.2.2 网页文档基本操作,1新建文档,Dreamweaver中的文档也就是网页，创建新网页的方法有多种，下面使用,“,文件,”,菜单创建网页。,选择,“,文件,”,“,新建,”,菜单，打开,“,新建文档,”,对话框。,2保存文档,新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。,选择,“,文件,”,“,保存,”,菜单，弹出,“,另存为,”,对话框,选择保存位置,输入文件名,单击,“,保存,”,按钮,3预览文档,对网页进行编辑或修改后，可在浏览器中预览其效果。,打开文档后，单击文档工具栏中的 按钮，在弹出的菜单中选择,“,预览在IExplore 7.0,”,菜单项,4打开和关闭文档,如要打开某站点中现有的网页文档，可以选择“文件”“打开”菜单，在弹出的“打开”对话框中选择要打开的文件，然后单击“打开”按钮。,选择目标文件所在文件夹,关闭文件的操作相当简单，只需单击相应文件右上方的,“,关闭,”,按钮 。,单击选择文件,单击,“,打开,”,按钮,范例4 利用“文件”面板创建网页,使用“文件”面板，可以非常方便地管理站点和站点中的文件。下面看一下在“文件”面板中创建和命名文档的方法（具体操作见视频2-4）。,2.2.3 网页文件命名规则,为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。首先，静态的首页文件一般命名为“index.html”或“index.htm”。如果是包含程序代码的动态页面，比如ASP文件，则命名为“index.asp”。总之，后缀名与网页本身所使用的技术是对应的。,2.3 基本页面属性设置,2.3.1 指定网页文档标题和边距,在浏览网页时，可以看到浏览器上端都会有表示网页特征或欢迎词之类的标题。在Dreamweaver中，可以在,“,文档工具栏,”,中的,“,标题,”,文本框中直接输入网页标题，也可以在,“,页面属性,”,对话框的,“,标题/编码,”,类别中进行设置。,另外，利用,“,页面属性,”,对话框，可以随意调整网页的上、下、左、右边距，如果想取消这些边距，可以把边距值设定为,“,0,”,。,2.3.2 指定网页背景颜色和背景图像,指定网页背景颜色的方法非常简单，只需在“页面属性”对话框中单击“背景颜色”后的颜色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。,如果用户喜欢的话，也可以将图像设置为网页背景（具体操作见视频2.3.2）。,2.3.3 为网页设置文本和链接属性,通过设置“页面属性”对话框中的“页面字体”、“大小”和“文本颜色”，可以设置网页中文本的属性。,另外，要设置链接文本的属性，可以在“页面属性”对话框左侧的分类列表中选择“链接”选项，然后在右侧设置各项参数。,范例5 为“movie”网页设置页面属性,通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。本节通过编辑“movie”网页，来使读者进一步掌握网页页面属性的设置方法（具体操作见视频2-5）。,第3章,编辑网页内容,文本的输入与格式设置,插入图像和动画,制作超链接,3.1 文本的输入与格式设置,3.1.1 输入文本,在Dreamweaver中输入文本的方法非常简单，只要将光标定位在网页的某个位置，然后输入文字就可以了。,另外，可以利用剪贴板将外部文本拷贝到网页中，然后设置其格式和各种属性。,3.1.2 设置文本段落和字符格式,Dreamweaver中的文本格式设置与标准字处理程序（如Word）类似。用户可以利用“属性”面板为文本设置默认格式化样式（段落、标题 1、标题 2等），或者直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列表方式等。,1设置字体列表,Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可以通过设置字体列表来解决这一问题。,选择字体,单击添加字体,2设置文本字体及大小,学会设置字体列表后，就可以随心所欲地设置文本的字体了。下面就来学习在属性面板中设置文本字体及大小的方法。,拖动鼠标选中文本,设置字体、大小等属性,3设置段落缩进,通过设置段落缩进格式，可以更好地布局文档。将光标置于需要设置段落缩进的任意段落中，然后在属性面板的“格式”下拉列表中选择“段落”选项，单击“文本凸出”按钮 可使段落凸出，单击“文本缩进”按钮可使段落缩进。,4设置列表项,列表分为项目列表和编号列表，项目列表常应用在,“,列举,”,类型的文本中，编号列表常应用在,“,条款,”,类型的文本中，这种方式使得文本更直观、明了。,选中所要设置的文本，然后单击属性面板上的,“,项目列表,”,按钮 ，即可设置列表项。,范例1 设置“公司介绍”网页文本,在学习了文本的输入和格式设置方法后，下面通过一个小例子来练习和巩固一下这些知识（具体操作见视频3-1）。,3.1.3 插入水平线和特殊字符,1水平线,水平线对于组织信息和区分版块很有帮助。要插入水平线，可以选择,“,插入,”,“,HTML,”,“,水平线,”,菜单。,2插入特殊字符,要插入特殊符号，可以选择,“,插入,”,“,HTML,”,“,特殊字符,”,菜单，然后在弹出的菜单中选择相应的特殊字符。,如果在,“,特殊字符,”,菜单下没有找到需要的字符，可以通过选择该菜单中最下面的,“,其他字符,”,命令打开,“,插入其他字符,”,对话框。,3.2 插入图像和动画,3.2.1 插入并设置图像属性,在Dreamweaver中插入图像的方法非常简单，在确定图像插入点后，单击,“,常用,”,插入栏中的,“,图像,”,按钮，打开,“,选择图像源文件,”,对话框，从中选择要插入的图像，然后单击,“,确定,”,按钮即可。,3.2.2 插入flash动画,确定插入点后，单击“常用”插入栏中的“媒体：Flash”按钮 ，在弹出的“选择文件”对话框中选择一个扩展名为.swf的Flash动画，单击“确定”按钮，Flash动画就被插入到了页面中。,3.2.3 应用透明flash动画,假如我们为网页、某个表格或某个单元格指定了一张很漂亮的背景图像，而当我们在单元格中又插入一个Flash动画的时候，由于Flash动画的背景颜色会遮盖掉背景图像，这样就看不到漂亮的背景图像了。那么如何使背景图像能够正常显示呢？答案就是设法将Flash动画的背景颜色改成透明（具体操作见视频3.2.3）。,范例2 在“火百合”主页中插入图像和动画,在学习了图像和动画的应用后，下面通过一个例子来练习一下这方面的知识（具体操作见视频3-2）。,3.3 制作超链接,3.3.1 常规链接,常规超级链接包括内部超级链接和外部超级链接，内部超级链接是指目标文件位于站点内部的链接；外部超级链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。,1内部链接,内部链接的设置非常灵活，在选中要设置链接的对象后，可以在属性面板的,“,链接,”,文本框中直接输入要链接到的网址或网页名称；也可以单击属性面板上,“,链接,”,文本框后的文件夹图标 ，在弹出的,“,选择文件,”,对话框中选择要链接到的文件；还有一种方法是单击并拖动,“,属性,”,面板上,“,链接,”,文本框后的 按钮到,“,文件,”,面板中的文件上。,2外部链接,外部链接只能采用一种方法设置，就是在选中对象后，在“属性”面板的“链接”文本框中输入要链接到的网址。,3.3.2 图片链接和下载链接,设置图片链接和下载链接的方法非常简单，选中要设置为链接的文字或图片后，只要在,“,属性,”,面板的,“,链接,”,文本框中将链接目标设置为图像文件或压缩文件就可以了3.3.3 电子邮件链接,有些网站上留有电子邮件地址，单击该地址可打开“Outlook Express”的“新邮件”窗口。这是一种特殊类型的链接，又叫电子邮件链接，下面看看此类链接的设置方法。,3.3.4 热点链接,如何为一张图片设置多个链接呢？这就用到了热点。使用热点工具可以将一张图片划分成多个区域，并为这些区域分别设置链接。,范例3 为“火百合”网页设置链接,在学习了超链接的设置方法后，下面通过一个例子，来进一步巩固前面所学知识（具体操作见视频3-3）。,第4章,构建网页布局,使用表格,使用框架,4.1 使用表格,所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其“各安其位”。,此处表示未明确设置单元格的宽度,此处显示了表格的宽度。如果只显示一个,“,”,符号，表示未明确设置表格宽度,4.1.1 创建表格,在Dreamweaver中创建表格的方法非常简单，确定插入点后，单击,“,常用,”,插入栏中的,“,表格,”,按钮，打开,“,表格,”,对话框。设置各项参数后，单击,“,确定,”,按钮，便可插入表格。,4.1.2 选择表格和单元格,在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。,要选择某个单元格，可首先将光标放置在该单元格内，然后按【CtrlA】组合键或者单击“标签选择器”中对应的“”标签。,要选择某行或某列，可将光标置于该行的左侧或该列的顶部，当光标形状变为黑色箭头 或 时单击鼠标。,4.1.3 设置表格和单元格的属性,选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。,在单元格中单击，属性面板中将显示相应单元格的属性。,1设置表格和单元格的宽度与高度,制作网页时，很多情况下都需要改变表格和单元格的宽度与高度，通过拖动边框或在属性面板的“宽”和“高”文本框中直接输入数值，就可以非常方便地改变表格和单元格的宽度与高度。,设置表格高度,设置单元格,“,宽,”,和,“,高,”,2为表格和单元格设置背景颜色及背景图像,为表格和单元格设置背景颜色及背景图像的方法相当简单。,将光标置于单元格中,单击,“,背景,”,文本框后的文件夹图标,选择文件,范例1 使用表格构建“火百合”主页布局,在第3章的范例2中介绍图像的插入方法时，由于还没有讲到表格，所以给出的是现成的表格。下面将结合表格与图像的应用来看一下,“,火百合,”,主页的具体制作方法（具体操作见视频4-1）。,范例2 制作细线表格,在Dreamweaver中，有多种方法可以制作细线表格，下面我们讲解一种最简单也是最常用的方法，就是通过设置表格的间距和背景颜色来制作细线表格（具体操作见视频4-2）。,4.1.4 合并与拆分单元格,1合并单元格,所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。,拖动鼠标选中要合并的单元格,单击,“,合并所选单元格，使用跨度,”,按钮,2拆分单元格,拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下。,在要拆分的单元格中单击,单击,“,拆分单元格为行或列,”,按钮,打开,“,拆分单元格,”,对话框，设置各项参数后单击,“,确定,”,按钮,4.1.5 在表格中添加或删除行或列,在使用表格布局网页时，往往需要在创建好的表格中添加或删除行或列。,在要添加行或列的单元格中单击鼠标右键，在弹出的快捷菜单中选择,“,表格,”,“,插入行或列,”,菜单,在打开的,“,插入行或列,”,对话框中设置各项后单击,“,确定,”,按钮,4.1.6 格式化表格,在使用表格显示数据信息时，为便于浏览者阅读，往往需要为单元格设置不同的背景颜色。常用的方法如下。,选中表格后，选择,“,命令,”,“,格式化表格,”,菜单,在,“,格式化表格,”,对话框中设置各项后，单击,“,确定,”,按钮,范例3 制作嵌套表格,所谓嵌套表格，就是在一个大表格的某个单元格里插入一个新的表格，我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的。,本节通过制作“火百合”网站中的“产品展示”页面来看看嵌套表格的应用和制作方法（具体操作见视频4-3）。,范例4 制作圆角表格,在浏览网页时，经常会看到圆角表格，这使得整个网页看起来更加柔和、美观。,制作圆角表格的方法有很多，下面就以制作下图左侧的表格为例，具体讲解一下此类表格的制作方法（具体操作见视频4-4）。,4.2 使用框架,4.2.1 关于框架和框架集,在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。每个框架可显示不同的文档内容，彼此之间互不干扰。,框架网页由框架集定义，框架集是特殊的HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。,4.2.2 创建框架集,用户可以直接创建框架集，也可以在普通页面中加载预定义的框架集其中，直接创建框架集的方法与创建普通页面的方法相似。,选择,“,文件,”,“,新建,”,菜单，打开,“,新建文档,”,对话框,在,“,类别,”,列表中选择,“,框架集,”,选项，右侧将显示系统预定义的框架集类型，选择其中一种，然后单击,“,创建,”,按钮,4.2.3 框架和框架集的基本操作,1认识“框架”面板,利用,“,框架,”,面板可以对框架和框架集进行操作，选择,“,窗口,”,“,框架,”,菜单，可以打开,“,框架,”,面板。,2选择框架和框架集,在文档窗口中选择框架的方法为，按住【Alt】键，然后在要选择的框架内单击，被选中的框架边线将显示为虚线。,如要选择框架集，单击该框架集上的任意边框即可，此时框架集的所有边框都呈虚线显示。,利用,“,框架,”,面板选择框架时，直接在面板中相应区域单击即可。选择框架集时，在面板中单击框架集的边框即可。,4.2.4 框架及框架集的属性设置,1设置框架属性,选中框架后，属性面板上将显示相应框架的属性。,显示框架源文件的保存路径,选择是否显示框架的边框,设置框架滚动条的属性,2设置框架集属性,选中框架集，属性面板中将显示框架集的属性。,该面板中各参数的含义同框架属性面板基本相同，不同的是在,“,行,”,或,“,列,”,文本框中可设置框架的行高或列宽，在,“,单位,”,下拉列表框中可选择具体单位。,4.2.5 保存框架和框架集,1保存框架,2保存框架集,3保存框架集中的所有文档,范例5 制作框架网页娱乐天地,该例制作了一个名为“娱乐天地”的网页，它首先利用框架将页面划分成了若干区域。另外，在局部布局中也用到了表格（具体操作见视频4-5）。,第5章,样式表的应用,认识样式表,定义样式表,样式表的高级应用,5.1 认识样式表,5.1.1 熟悉“CSS样式”面板,在Dreamweaver 8中，我们可以借助,“,CSS样式,”,面板来新建、删除、编辑和应用样式，以及附加外部样式表等。,5.1.2 CSS样式的存在方式,CSS样式以下面两种方式存在于网页中：,外部CSS样式表：为了增强CSS样式的通用性，我们可以创建扩展名为.css的样式表文件。利用“CSS样式”面板可将该文件链接到站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。,内部（或嵌入式）CSS样式表：是一系列包含在HTML文档head部分的、style标签内的CSS样式。,5.2 定义样式表,5.2.1 CSS样式的分类,根据应用对象的不同，CSS样式被分成了以下三类。,（1）类样式,（2）标签样式,（3）选择器样式,5.2.2 定义样式的步骤,对于类样式而言，当我们修改了所选文本的字体、大小、颜色等属性后，系统会自动创建相应的样式。此外，也可以在“CSS样式”面板中单击“新建CSS规则”按钮 ，直接创建类样式和其他两种样式。,范例1 为“火百合”网页中的表格定义边线样式,在了解了定义样式的步骤后，本节通过一个实例来学习一下类样式的定义和应用方法（具体操作见视频5-1）。,范例2 为“火百合”网页定义“body”样式,在样式类型中，最常用的就是标签样式，本节通过为“火百合”网页定义“body”样式，来看看标签样式的定义和应用（具体操作见视频5-2）。,范例3 为“火百合”网页定义链接样式,“,链接,”,是网站中不可缺少的组成元素，本节通过为,“,pro_b.html,”,网页中的链接文本定义样式，来看看高级样式的设置方法（具体操作见视频5-3）。,范例4 链接外部样式,我们在“范例2”中曾创建了一个名为“s2.css”的样式文件，下面来看看如何将其链接到网站中的其他页面（具体操作见视频5-4）。,5.3 样式表的高级应用,范例5 为“火百合”网页设置列表样式,所谓列表样式，就是为网页中的列表文本设置的样式。本节通过为,“,火百合,”,网页左侧的链接文本设置列表样式，来看一下此类样式的设置方法（具体操作见视频5-5）。,范例6 为“火百合”网页中的图片设置阴影,很多人都知道Photoshop拥有强大的滤镜功能，但很少有人知道Dreamweaver中的CSS滤镜。应用CSS滤镜可设置渐变、透明、阴影等效果。本例使用CSS滤镜中的,“,Shadow,”,属性来给图像添加阴影（具体操作见视频5-6）。,范例7 在同一个网页中设置两种链接样式,有时候可能会遇到这种情况，你制作了一个网页，其中有很多链接文本，你想用不同的链接样式来区分这些链接文本，也就是设置两个不同样式的链接，那么如何设置呢？下面通过给LZG站点中的“index_a.html”网页添加一个链接样式来讲解此类样式的设置方法（具体操作见视频5-7）。,第5章,样式表的应用,认识样式表,定义样式表,样式表的高级应用,5.1 认识样式表,5.1.1 熟悉“CSS样式”面板,在Dreamweaver 8中，我们可以借助,“,CSS样式,”,面板来新建、删除、编辑和应用样式，以及附加外部样式表等。,5.1.2 CSS样式的存在方式,CSS样式以下面两种方式存在于网页中：,外部CSS样式表：为了增强CSS样式的通用性，我们可以创建扩展名为.css的样式表文件。利用“CSS样式”面板可将该文件链接到站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。,内部（或嵌入式）CSS样式表：是一系列包含在HTML文档head部分的、style标签内的CSS样式。,5.2 定义样式表,5.2.1 CSS样式的分类,根据应用对象的不同，CSS样式被分成了以下三类。,（1）类样式,（2）标签样式,（3）选择器样式,5.2.2 定义样式的步骤,对于类样式而言，当我们修改了所选文本的字体、大小、颜色等属性后，系统会自动创建相应的样式。此外，也可以在“CSS样式”面板中单击“新建CSS规则”按钮 ，直接创建类样式和其他两种样式。,范例1 为“火百合”网页中的表格定义边线样式,在了解了定义样式的步骤后，本节通过一个实例来学习一下类样式的定义和应用方法（具体操作见视频5-1）。,范例2 为“火百合”网页定义“body”样式,在样式类型中，最常用的就是标签样式，本节通过为“火百合”网页定义“body”样式，来看看标签样式的定义和应用（具体操作见视频5-2）。,范例3 为“火百合”网页定义链接样式,“,链接,”,是网站中不可缺少的组成元素，本节通过为,“,pro_b.html,”,网页中的链接文本定义样式，来看看高级样式的设置方法（具体操作见视频5-3）。,范例4 链接外部样式,我们在“范例2”中曾创建了一个名为“s2.css”的样式文件，下面来看看如何将其链接到网站中的其他页面（具体操作见视频5-4）。,5.3 样式表的高级应用,范例5 为“火百合”网页设置列表样式,所谓列表样式，就是为网页中的列表文本设置的样式。本节通过为,“,火百合,”,网页左侧的链接文本设置列表样式，来看一下此类样式的设置方法（具体操作见视频5-5）。,范例6 为“火百合”网页中的图片设置阴影,很多人都知道Photoshop拥有强大的滤镜功能，但很少有人知道Dreamweaver中的CSS滤镜。应用CSS滤镜可设置渐变、透明、阴影等效果。本例使用CSS滤镜中的,“,Shadow,”,属性来给图像添加阴影（具体操作见视频5-6）。,范例7 在同一个网页中设置两种链接样式,有时候可能会遇到这种情况，你制作了一个网页，其中有很多链接文本，你想用不同的链接样式来区分这些链接文本，也就是设置两个不同样式的链接，那么如何设置呢？下面通过给LZG站点中的“index_a.html”网页添加一个链接样式来讲解此类样式的设置方法（具体操作见视频5-7）。,第6章,制作高级网页效果,应用交互式图像,应用多媒体,应用行为,6.1 应用交互式图像,6.1.1 鼠标经过图像,要制作鼠标经过图像，需要用到两张大小相同，而内容不同的图像。其中一张作为原始图像，在页面打开的时候就显示；另一张则作为鼠标经过图像，在鼠标经过的时候替换原始图像显示出来。本例中用到的两张图像位于网站,“,car,”,的图像文件夹,“,images,”,中（具体操作见视频6.1.1）。,范例1 为“macaco”网页制作交互式导航条,导航条在网站中起着不可替代的作用，它把网站中的各个页面连接起来，每一个网站都有自己的导航条。利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条（具体操作见视频6-1）。,6.2 应用多媒体,6.2.1 在页面中嵌入音乐文件,网页中可以应用多种格式的音乐文件，如MID（乐器数字接口）格式、WAV（Waveform扩展名）格式、AIF（音频交换文件格式，即AIFF）格式、MP3（运动图像专家组音频，即MPEG-音频层-3）格式、WMA（Windows Media Audio）、RA或RAM（Real Audio）格式等。,范例2 为“火百合”主页添加背景音乐,通过上一节的学习，相信大家已经掌握了在网页中插入音频文件的方法。但是，很多时候需要将插入的音频文件隐藏，那么如何实现呢？下面通过为网页设置背景音乐来看看如何隐藏网页中的音频文件（具体操作见视频6-2）。,范例3 在“cat”网页中嵌入视频,除了插入音乐文件外，在Dreamweaver中还可以非常容易地插入Shockwave影片、Applet和视频文件等其他媒体元素。下面以在“cat”网页中插入视频文件为例，来看看插入