Dreamweaver8精品教程完整版课件全套ppt教学教程-最全电子讲义(最新).ppt

《Dreamweaver8精品教程完整版课件全套ppt教学教程-最全电子讲义(最新).ppt》由会员分享，可在线阅读，更多相关《Dreamweaver8精品教程完整版课件全套ppt教学教程-最全电子讲义(最新).ppt（247页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1章章 初识网站和网页初识网站和网页|网站和网页网站和网页网站和网页网站和网页|网页中的元素类型网页中的元素类型网页中的元素类型网页中的元素类型|从功能角度分析网页从功能角度分析网页从功能角度分析网页从功能角度分析网页|常用网站管理与制作软件常用网站管理与制作软件常用网站管理与制作软件常用网站管理与制作软件|网站建设流程网站建设流程网站建设流程网站建设流程1.1 网站和网页网站和网页网站是网页的集合，网页是组成网站的元素。网站是网页的集合，网页是组成网站的元素。网站是网页的集合，网页是组成网站的元素。网站是网页的集合，网页是组成网站的元素。1.1.1 网站、网页和主页网站、网页和主页网页网

2、页网页网页大型网站大型网站大型网站大型网站一个小型网站可能只包含几个网页，而一个大型网一个小型网站可能只包含几个网页，而一个大型网一个小型网站可能只包含几个网页，而一个大型网一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。站则可能包含成千上万个网页。站则可能包含成千上万个网页。站则可能包含成千上万个网页。小型网站小型网站小型网站小型网站新浪网新浪网新浪网新浪网站首页站首页站首页站首页主页也叫首页，每个网站都有自己的首主页也叫首页，每个网站都有自己的首主页也叫首页，每个网站都有自己的首主页也叫首页，每个网站都有自己的首页，它是浏览者登录网站时看见的第一页，它是浏览者登录网

3、站时看见的第一页，它是浏览者登录网站时看见的第一页，它是浏览者登录网站时看见的第一个网页，也是网站的入口。个网页，也是网站的入口。个网页，也是网站的入口。个网页，也是网站的入口。1.1.2 网页是什么网页是什么 网页中除了包含文字外，还包含图像、动画等内容。网页中除了包含文字外，还包含图像、动画等内容。网页中除了包含文字外，还包含图像、动画等内容。网页中除了包含文字外，还包含图像、动画等内容。图像图像图像图像动画动画动画动画文字文字文字文字我们看到的一个个网页都是由多个文件组成的。网页我们看到的一个个网页都是由多个文件组成的。网页我们看到的一个个网页都是由多个文件组成的。网页我们看到的一个个网

4、页都是由多个文件组成的。网页文件是文件是文件是文件是“根根根根”，图像和动画文件都是，图像和动画文件都是，图像和动画文件都是，图像和动画文件都是“枝叶枝叶枝叶枝叶”。图像图像图像图像文件文件文件文件网页网页网页网页文件文件文件文件选择选择选择选择“文件文件文件文件”“”“另存另存另存另存为为为为”菜单菜单菜单菜单在浏览器中选择在浏览器中选择在浏览器中选择在浏览器中选择“文件文件文件文件”菜单中的菜单中的菜单中的菜单中的“另存为另存为另存为另存为”，可将网页保存到磁盘中。，可将网页保存到磁盘中。，可将网页保存到磁盘中。，可将网页保存到磁盘中。1.2 网页中的元素类型网页中的元素类型 1.2.1

5、网页中的文字与图像网页中的文字与图像文字与图像是网页中的基本元素，是浏览者获得相关文字与图像是网页中的基本元素，是浏览者获得相关信息的主要来源。信息的主要来源。|可在设计网页时为文字设置位置、字体、字号、颜色、对齐可在设计网页时为文字设置位置、字体、字号、颜色、对齐方式，以及加粗和倾斜等格式。方式，以及加粗和倾斜等格式。|网页中只能使用和显示网页中只能使用和显示JPEG、GIF和和PNG格式的图像，其他格式的图像，其他诸如诸如BMP和和TIF等格式的图像目前还都不能用于网页中。等格式的图像目前还都不能用于网页中。1.2.2 网页中使用的动画与视频影像网页中使用的动画与视频影像视频流技术常见的格

6、式有视频流技术常见的格式有视频流技术常见的格式有视频流技术常见的格式有Real VideoReal Video及及及及Apple Apple QuickTimeQuickTime。GIFGIF动画动画动画动画SWFSWF动画动画动画动画目前，大家在网页中看到的动画主要包括两类，即目前，大家在网页中看到的动画主要包括两类，即动态动态GIF格式动画和格式动画和SWF格式动画。格式动画。|动态动态GIF格式动画的原理十分简单，就是高速连格式动画的原理十分简单，就是高速连续显示多幅静态图像，就像播放动画片一样。通常续显示多幅静态图像，就像播放动画片一样。通常用于制作简单的小型动画。用于制作简单的小型动

7、画。|如果需要在网页上使用一些大型、复杂或带有声如果需要在网页上使用一些大型、复杂或带有声音的动画，可借助音的动画，可借助Macromedia的的Flash软件来制软件来制作作SWF动画。动画。1.2.3 网页中使用的声音网页中使用的声音适当的在网页上加点音乐效果，会使网页更具吸引力。适当的在网页上加点音乐效果，会使网页更具吸引力。适当的在网页上加点音乐效果，会使网页更具吸引力。适当的在网页上加点音乐效果，会使网页更具吸引力。目前，网上比较流行的音频格式主要有目前，网上比较流行的音频格式主要有目前，网上比较流行的音频格式主要有目前，网上比较流行的音频格式主要有MIDIMIDI、WAVWAV、M

8、P3MP3与与与与Real AudioReal Audio。控制音乐控制音乐控制音乐控制音乐的播放的播放的播放的播放1.3 从功能角度分析网页从功能角度分析网页从功能的角度来看，可以将网页中的元素分为站标、从功能的角度来看，可以将网页中的元素分为站标、从功能的角度来看，可以将网页中的元素分为站标、从功能的角度来看，可以将网页中的元素分为站标、导航栏、广告条、标题栏和按钮。导航栏、广告条、标题栏和按钮。导航栏、广告条、标题栏和按钮。导航栏、广告条、标题栏和按钮。站标站标导航导航栏栏广告广告条条标题标题栏栏按钮按钮1.3.1 站标站标站标也叫站标也叫站标也叫站标也叫LOGOLOGO，是网站的标志，

9、其作用是使人看见，是网站的标志，其作用是使人看见，是网站的标志，其作用是使人看见，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站它就能够联想到企业。因此，网站它就能够联想到企业。因此，网站它就能够联想到企业。因此，网站LOGOLOGO通常采用企通常采用企通常采用企通常采用企业的业的业的业的LOGOLOGO。LOGOLOGO通常采用带有企业特色和思想的图案，或是与通常采用带有企业特色和思想的图案，或是与通常采用带有企业特色和思想的图案，或是与通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图企业相关的字符或符号及其变形，当然也有很多是图企业相关的

10、字符或符号及其变形，当然也有很多是图企业相关的字符或符号及其变形，当然也有很多是图文组合。文组合。文组合。文组合。1.3.2 导航栏导航栏导航栏实际上是网站内多个页面的超链接组合。导航导航栏实际上是网站内多个页面的超链接组合。导航导航栏实际上是网站内多个页面的超链接组合。导航导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览者在栏也是网站中所有重要内容的概括，可以让浏览者在栏也是网站中所有重要内容的概括，可以让浏览者在栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。最短时间内了解网站的主要内容。最短时间内了解网站的主要内容。最短

11、时间内了解网站的主要内容。设计导航栏时，有几点需要注意。设计导航栏时，有几点需要注意。设计导航栏时，有几点需要注意。设计导航栏时，有几点需要注意。|如果网站内容不多，并且导航栏不超过两排，可以如果网站内容不多，并且导航栏不超过两排，可以如果网站内容不多，并且导航栏不超过两排，可以如果网站内容不多，并且导航栏不超过两排，可以根据网站风格尝试灵活摆放，如放在网页的左侧或者根据网站风格尝试灵活摆放，如放在网页的左侧或者根据网站风格尝试灵活摆放，如放在网页的左侧或者根据网站风格尝试灵活摆放，如放在网页的左侧或者放在页面上方等。放在页面上方等。放在页面上方等。放在页面上方等。页面页面页面页面左侧左侧左侧

12、左侧页面页面页面页面上方上方上方上方|如果网站的栏目很多，可以将导航栏分为多排放置如果网站的栏目很多，可以将导航栏分为多排放置如果网站的栏目很多，可以将导航栏分为多排放置如果网站的栏目很多，可以将导航栏分为多排放置在主页在主页在主页在主页LOGOLOGO的下方或右侧，为便于观看，可为各排的下方或右侧，为便于观看，可为各排的下方或右侧，为便于观看，可为各排的下方或右侧，为便于观看，可为各排设置不同的底色。设置不同的底色。设置不同的底色。设置不同的底色。LOGOLOGO右侧右侧右侧右侧LOGOLOGO下方下方下方下方|如果导航栏内容较多的话，尽量使用文字超链接而如果导航栏内容较多的话，尽量使用文字

13、超链接而如果导航栏内容较多的话，尽量使用文字超链接而如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内不用图片。不过，如果导航栏内容不多，或者网页内不用图片。不过，如果导航栏内容不多，或者网页内不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或容比较活泼的话，多采用图片或容比较活泼的话，多采用图片或容比较活泼的话，多采用图片或FlashFlash制作导航栏。制作导航栏。制作导航栏。制作导航栏。图片导航栏图片导航栏图片导航栏图片导航栏FlashFlash导航栏导航栏导航栏导航栏广告条又称广告条又称广告条又称广告条又称BannerBa

14、nner，其功能是宣传网站或替其他，其功能是宣传网站或替其他，其功能是宣传网站或替其他，其功能是宣传网站或替其他企业做广告，以赚取广告费。企业做广告，以赚取广告费。企业做广告，以赚取广告费。企业做广告，以赚取广告费。1.3.3 广告条广告条在在Banner的制作过程中有一些要点需要注意：的制作过程中有一些要点需要注意：|Banner可以是静态的也可以是动态的。可以是静态的也可以是动态的。|Banner的体积不宜过大，尽量使用的体积不宜过大，尽量使用GIF格式的图片与动画格式的图片与动画或或Flash动画。动画。|Banner中的文字不要太多，只要达到一定的提醒效果就可中的文字不要太多，只要达到

15、一定的提醒效果就可以。以。|Banner中图片的颜色不要太多，尤其是中图片的颜色不要太多，尤其是GIF格式的图片或格式的图片或动画，要避免出现颜色的渐变和光晕效果。动画，要避免出现颜色的渐变和光晕效果。这里的标题栏不是指整个网页的标题栏，而是网页这里的标题栏不是指整个网页的标题栏，而是网页这里的标题栏不是指整个网页的标题栏，而是网页这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。内部各版块的标题栏，是各版块内容的概括。内部各版块的标题栏，是各版块内容的概括。内部各版块的标题栏，是各版块内容的概括。标题栏可以是文字加单元格背景，也可以是图片，标题栏可以是文字加

16、单元格背景，也可以是图片，标题栏可以是文字加单元格背景，也可以是图片，标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站一般的大型网站都采用前者，一些内容少的小网站一般的大型网站都采用前者，一些内容少的小网站一般的大型网站都采用前者，一些内容少的小网站采用后者。采用后者。采用后者。采用后者。1.3.4 标题栏标题栏标题标题标题标题栏栏栏栏标题标题标题标题栏栏栏栏网页中的按钮被点击之后，网页会实现相应的操作，网页中的按钮被点击之后，网页会实现相应的操作，网页中的按钮被点击之后，网页会实现相应的操作，网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，

17、或数据的传输等。比如页面跳转，或数据的传输等。比如页面跳转，或数据的传输等。比如页面跳转，或数据的传输等。设计按钮时，要保证按钮与页面的协调，不能太抢设计按钮时，要保证按钮与页面的协调，不能太抢设计按钮时，要保证按钮与页面的协调，不能太抢设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，眼，如果按钮上有字则尽量使用单色或渐变色背景，眼，如果按钮上有字则尽量使用单色或渐变色背景，眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分保证字迹清晰。当页面上有多个按钮的时候，应分保证字迹清晰。当页面上有多个按钮的时候，应分保

18、证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按钮的颜色或者大小。清主次，根据网页的需要改变按钮的颜色或者大小。清主次，根据网页的需要改变按钮的颜色或者大小。清主次，根据网页的需要改变按钮的颜色或者大小。1.3.5 按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮1.4.1常用网站管理与网页编辑软件常用网站管理与网页编辑软件1.4 常用网站管理与制作软件常用网站管理与制作软件|Dreamweaver：网页制作软件三剑客之一，该软件是现：网页制作软件三剑客之一，该软件是现在使用最多的网页编辑工具，它支持在使用最多的网页编辑工具，它支持DHTML动态网页、动态网页、Flash动画、插

19、件，能实现很多动画、插件，能实现很多FrontPage无法实现的功无法实现的功能，如动态按钮、下拉菜单等。另外，它还可以用来作为能，如动态按钮、下拉菜单等。另外，它还可以用来作为动态网站的开发环境。动态网站的开发环境。|FrontPage：该软件是目前最简单、最容易上手，且功能：该软件是目前最简单、最容易上手，且功能强大的网页制作利器，特别适合网页初学者使用。不过，强大的网页制作利器，特别适合网页初学者使用。不过，Frontpage也有不少缺点：首先是兼容性不好，利用也有不少缺点：首先是兼容性不好，利用FrontPage做出来的网页往往不能用做出来的网页往往不能用Netscape浏览器正浏览器

20、正常显示；其次，生成的垃圾代码多；此外，常显示；其次，生成的垃圾代码多；此外，FrontPage对对动态网页支持不好，不支持动态网页支持不好，不支持Flash，显得有点落伍了。，显得有点落伍了。1.4.2 网页设计辅助软件网页设计辅助软件在进行网页制作时，除了需要在进行网页制作时，除了需要在进行网页制作时，除了需要在进行网页制作时，除了需要DreamweaverDreamweaver、FrontPageFrontPage等软件外，还会用到等软件外，还会用到等软件外，还会用到等软件外，还会用到FireworksFireworks、FlashFlash、PhotoshopPhotoshop等软件，

21、这些软件的主要功能与特点如下：等软件，这些软件的主要功能与特点如下：等软件，这些软件的主要功能与特点如下：等软件，这些软件的主要功能与特点如下：|Fireworks：主要用于制作网页图像、标志、：主要用于制作网页图像、标志、GIF动动画、图像按钮与导航栏等。画、图像按钮与导航栏等。|Flash：主要用于制作矢量动画，如广告、网站片头：主要用于制作矢量动画，如广告、网站片头动画、动画短片、动画、动画短片、MTV等。等。|Photoshop：Adobe公司出品的一个优秀而且强大公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设的图形图像处理软件，起初它的应用领域主要是平面设

22、计而不是网页设计，但是它所具有的强大功能完全涵盖计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求（除了多媒体）。了网页设计所涉及到的各种需求（除了多媒体）。1.4.3 常用网站程序设计语言常用网站程序设计语言如果网站中包含动态网页，除了需要学习一些常用如果网站中包含动态网页，除了需要学习一些常用如果网站中包含动态网页，除了需要学习一些常用如果网站中包含动态网页，除了需要学习一些常用的网页设计软件外，还应掌握一些常用的网站程序的网页设计软件外，还应掌握一些常用的网站程序的网页设计软件外，还应掌握一些常用的网站程序的网页设计软件外，还应掌握一些常用的网站程序设计语言。设

23、计语言。设计语言。设计语言。|JavaScript和和VBScript脚本语言脚本语言|Java|CGI|ASP|ASP.net|PHP|JSP1.5 网站建设流程网站建设流程1.5.1 根据要求确定网站内容根据要求确定网站内容建设网站要有目的性，首先要确定网站的性质和受建设网站要有目的性，首先要确定网站的性质和受众，并预期网站发布后的反响。确定了这些后就要众，并预期网站发布后的反响。确定了这些后就要开始组织网站的主要内容。开始组织网站的主要内容。1.5.2 规划网站栏目规划网站栏目确定了网站内容后，就要开始进行网站规划。例如，确定了网站内容后，就要开始进行网站规划。例如，确定了网站内容后，就

24、要开始进行网站规划。例如，确定了网站内容后，就要开始进行网站规划。例如，将网站的内容划分成哪些栏目，从而使网站既便于浏将网站的内容划分成哪些栏目，从而使网站既便于浏将网站的内容划分成哪些栏目，从而使网站既便于浏将网站的内容划分成哪些栏目，从而使网站既便于浏览者的浏览，也有利于网站将来的维护和更新。览者的浏览，也有利于网站将来的维护和更新。览者的浏览，也有利于网站将来的维护和更新。览者的浏览，也有利于网站将来的维护和更新。1.5.3 确定网页尺寸与版面布局确定网页尺寸与版面布局目前显示器最常用的分辨率是目前显示器最常用的分辨率是目前显示器最常用的分辨率是目前显示器最常用的分辨率是10247681

25、024768像素和像素和像素和像素和800600800600像素。像素。像素。像素。在在在在10247681024768的分辨率下显示的页面的尺寸应该为的分辨率下显示的页面的尺寸应该为的分辨率下显示的页面的尺寸应该为的分辨率下显示的页面的尺寸应该为10076001007600像素，而像素，而像素，而像素，而800600800600的分辨率下显示的的分辨率下显示的的分辨率下显示的的分辨率下显示的页面尺寸为页面尺寸为页面尺寸为页面尺寸为778435778435像素。像素。像素。像素。确定了网页尺寸后，接下来的任务就是确定网页布确定了网页尺寸后，接下来的任务就是确定网页布确定了网页尺寸后，接下来的任

26、务就是确定网页布确定了网页尺寸后，接下来的任务就是确定网页布局类型了。网页布局类型没有确定的标准，可以根局类型了。网页布局类型没有确定的标准，可以根局类型了。网页布局类型没有确定的标准，可以根局类型了。网页布局类型没有确定的标准，可以根据需要制定。常见的布局有上下分割型、左右分割据需要制定。常见的布局有上下分割型、左右分割据需要制定。常见的布局有上下分割型、左右分割据需要制定。常见的布局有上下分割型、左右分割型和复合分割型（上下分割和左右分割结合）。型和复合分割型（上下分割和左右分割结合）。型和复合分割型（上下分割和左右分割结合）。型和复合分割型（上下分割和左右分割结合）。上下分割型上下分割型

27、上下分割型上下分割型左右分割型左右分割型左右分割型左右分割型1.5.4 确定网站配色与风格确定网站配色与风格不同的网站有着自己不同的风格，也有着自己不同不同的网站有着自己不同的风格，也有着自己不同不同的网站有着自己不同的风格，也有着自己不同不同的网站有着自己不同的风格，也有着自己不同的颜色。基本上网站使用的颜色从出发点上看可以的颜色。基本上网站使用的颜色从出发点上看可以的颜色。基本上网站使用的颜色从出发点上看可以的颜色。基本上网站使用的颜色从出发点上看可以分为以下分为以下分为以下分为以下3 3种类型：种类型：种类型：种类型：|行业风格色行业风格色：许多网站使用颜色秉承着所属行业的风格。：许多网

28、站使用颜色秉承着所属行业的风格。|企业标准色企业标准色：在现代企业中，公司的：在现代企业中，公司的CI形象显得尤其重要，形象显得尤其重要，每一个公司的每一个公司的CI设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如Intel官方网官方网站的主色调是一种接近于天蓝的蓝色，站的主色调是一种接近于天蓝的蓝色，|个人习惯色个人习惯色：这种配色方法的使用在很大程度上是凭设计：这种配色方法的使用在很大程度上是凭设计者的个人爱好以及当时的心态决定的，在个人网站较为多见。者的个人爱好以及当时的心态决定的，在个人网站较为多见。行业风格色行业风格色著名的化妆品公司著名的化妆品公司著名的化妆品公司著名的化妆

29、品公司玫琳凯中国网站使用的颜色是粉玫琳凯中国网站使用的颜色是粉玫琳凯中国网站使用的颜色是粉玫琳凯中国网站使用的颜色是粉色。这几乎是所有化妆品行业中最常用到的颜色，这色。这几乎是所有化妆品行业中最常用到的颜色，这色。这几乎是所有化妆品行业中最常用到的颜色，这色。这几乎是所有化妆品行业中最常用到的颜色，这种颜色代表了高贵，典雅以及甜蜜等；种颜色代表了高贵，典雅以及甜蜜等；种颜色代表了高贵，典雅以及甜蜜等；种颜色代表了高贵，典雅以及甜蜜等；企业标准色企业标准色在现代企业中，公司的在现代企业中，公司的在现代企业中，公司的在现代企业中，公司的CICI形象显得尤其重要，每一形象显得尤其重要，每一形象显得尤

30、其重要，每一形象显得尤其重要，每一个公司的个公司的个公司的个公司的CICI设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如IntelIntel官官官官方网站的主色调是一种接近于天蓝的蓝色。方网站的主色调是一种接近于天蓝的蓝色。方网站的主色调是一种接近于天蓝的蓝色。方网站的主色调是一种接近于天蓝的蓝色。个人习惯色个人习惯色这种配色方法在设计的时候自由度非常高，同时所这种配色方法在设计的时候自由度非常高，同时所这种配色方法在设计的时候自由度非常高，同时所这种配色方法在设计的时候自由度非常高，同时所选的题材与要表现的内容也是由设计者自己

31、决定，选的题材与要表现的内容也是由设计者自己决定，选的题材与要表现的内容也是由设计者自己决定，选的题材与要表现的内容也是由设计者自己决定，比如设计者喜欢红色和黑色，那么在设计的时候就比如设计者喜欢红色和黑色，那么在设计的时候就比如设计者喜欢红色和黑色，那么在设计的时候就比如设计者喜欢红色和黑色，那么在设计的时候就倾向于使用这两种颜色。倾向于使用这两种颜色。倾向于使用这两种颜色。倾向于使用这两种颜色。下面是一些网页配色时的小技巧下面是一些网页配色时的小技巧|用一种色彩：这里是指先选定一种色彩，然后调用一种色彩：这里是指先选定一种色彩，然后调用一种色彩：这里是指先选定一种色彩，然后调用一种色彩：这

32、里是指先选定一种色彩，然后调整透明度或者饱和度。整透明度或者饱和度。整透明度或者饱和度。整透明度或者饱和度。|用两种色彩：先选定一种色彩，然后选择它的对用两种色彩：先选定一种色彩，然后选择它的对用两种色彩：先选定一种色彩，然后选择它的对用两种色彩：先选定一种色彩，然后选择它的对比色。比色。比色。比色。|用一个色系：简单地说就是用一个感觉的色彩，用一个色系：简单地说就是用一个感觉的色彩，用一个色系：简单地说就是用一个感觉的色彩，用一个色系：简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。例如淡蓝、淡黄、淡绿，或者土黄、土灰、土

33、蓝。例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。|颜色不能太多：不要将所有颜色都用到，尽量控颜色不能太多：不要将所有颜色都用到，尽量控颜色不能太多：不要将所有颜色都用到，尽量控颜色不能太多：不要将所有颜色都用到，尽量控制在制在制在制在3 35 5种色彩以内。种色彩以内。种色彩以内。种色彩以内。|背景和前文的对比：背景和前文的对比尽量要大背景和前文的对比：背景和前文的对比尽量要大背景和前文的对比：背景和前文的对比尽量要大背景和前文的对比：背景和前文的对比尽量要大（尤其不要使用花纹图案作为页面背景），以便突（尤其不要使用花纹图案作为页面背景），以便突（尤其不要使用花纹图案作为页面背景），以便突（尤

34、其不要使用花纹图案作为页面背景），以便突出主要文字内容。出主要文字内容。出主要文字内容。出主要文字内容。1.5.5 收集网页所用素材收集网页所用素材在制作网页之前，应首先收集好制作网页时要使用在制作网页之前，应首先收集好制作网页时要使用在制作网页之前，应首先收集好制作网页时要使用在制作网页之前，应首先收集好制作网页时要使用的素材，这些素材包括文字资料、图片、动画、声的素材，这些素材包括文字资料、图片、动画、声的素材，这些素材包括文字资料、图片、动画、声的素材，这些素材包括文字资料、图片、动画、声音、视频等。音、视频等。音、视频等。音、视频等。对于一些原始的材料还可以使用对于一些原始的材料还可以

35、使用对于一些原始的材料还可以使用对于一些原始的材料还可以使用PhotoShopPhotoShop、FireworksFireworks、FlashFlash等软件进行处理，使其可以更好等软件进行处理，使其可以更好等软件进行处理，使其可以更好等软件进行处理，使其可以更好地应用于网页。地应用于网页。地应用于网页。地应用于网页。1.5.6 利用软件制作网页利用软件制作网页制作网页也就是整合网页素材，即使用制作网页也就是整合网页素材，即使用制作网页也就是整合网页素材，即使用制作网页也就是整合网页素材，即使用DreamweaverDreamweaver等软件进行网页设计。等软件进行网页设计。等软件进行网

36、页设计。等软件进行网页设计。还可以根据需要为网页增加一些特效，还可以根据需要为网页增加一些特效，还可以根据需要为网页增加一些特效，还可以根据需要为网页增加一些特效，比如闪烁的字幕、跳出动画、改变鼠标比如闪烁的字幕、跳出动画、改变鼠标比如闪烁的字幕、跳出动画、改变鼠标比如闪烁的字幕、跳出动画、改变鼠标的形状等，这些多是通过的形状等，这些多是通过的形状等，这些多是通过的形状等，这些多是通过JavaScriptJavaScript来实现的。来实现的。来实现的。来实现的。1.5.7 测试和发布网站测试和发布网站|在发布之前需要先对网站进行测试，网站测试一在发布之前需要先对网站进行测试，网站测试一在发布

37、之前需要先对网站进行测试，网站测试一在发布之前需要先对网站进行测试，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、般包括服务器稳定和安全测试、程序和数据库测试、般包括服务器稳定和安全测试、程序和数据库测试、般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。网页兼容性测试等。网页兼容性测试等。网页兼容性测试等。|要发布网站，用户需要具备两个条件：域名和虚要发布网站，用户需要具备两个条件：域名和虚要发布网站，用户需要具备两个条件：域名和虚要发布网站，用户需要具备两个条件：域名和虚拟主机。提供这类服务的公司被称为域名和网站托拟主机。提供这类服务的公司被称为域名和网站托拟主机。

38、提供这类服务的公司被称为域名和网站托拟主机。提供这类服务的公司被称为域名和网站托管服务商，目前，这类公司也有很多，如中国万网管服务商，目前，这类公司也有很多，如中国万网管服务商，目前，这类公司也有很多，如中国万网管服务商，目前，这类公司也有很多，如中国万网（http:/http:/）、通联无限）、通联无限）、通联无限）、通联无限（http:/http:/）等。）等。）等。）等。第2章 初识Dreamweaver 8|熟悉Dreamweaver 8操作环境|网站规划与管理|设置页面属性|上机实践编辑“墨攻”页面并保存 2.1 熟悉Dreamweaver操作环境 安装安装Dreamweaver 8

39、Dreamweaver 8后，单击后，单击“开始开始”按钮，选按钮，选择择“所有程序所有程序”“Macromedia”“Macromedia”“Macromedia”“Macromedia Dreamweaver 8”Dreamweaver 8”菜单，就可以启动菜单，就可以启动Dreamweaver Dreamweaver 8 8了。进入了。进入Dreamweaver 8Dreamweaver 8后，首先映入眼帘的是后，首先映入眼帘的是起始页。起始页。打开最近打开最近打开最近打开最近打开过的打开过的打开过的打开过的文件文件文件文件创建不同创建不同创建不同创建不同类型的新类型的新类型的新类型的新

40、文件文件文件文件在系统内置在系统内置在系统内置在系统内置文件的基础文件的基础文件的基础文件的基础上创建新文上创建新文上创建新文上创建新文件件件件在起始页的在起始页的“创建新项目创建新项目”列中选择列中选择“HTML”“HTML”后，将后，将会进入会进入Dreamweaver 8Dreamweaver 8的工作界面。的工作界面。菜单栏菜单栏标题栏标题栏插入栏插入栏文档标签文档标签文档工具栏文档工具栏收缩与展开收缩与展开下方面板组下方面板组状态栏状态栏属性面板属性面板收缩与展开收缩与展开右方面板组右方面板组面面板板组组2.1.1 “插入”栏“插入插入”栏包含用于将各种类型的对象栏包含用于将各种类型

41、的对象（如图像、表格和层）插入到文档中的按（如图像、表格和层）插入到文档中的按钮。钮。单击单击“插入插入”栏左侧的栏左侧的“常用常用”按钮可以按钮可以打开一个下拉列表，从中选择其他选项可打开一个下拉列表，从中选择其他选项可以改变以改变“插入插入”栏的内容。栏的内容。单击“常用”按钮，在下拉列表中选择“显示为制表符”命令，“插入”栏的外观将发生变化。某些按钮的右侧带有一个小三角符号“”，单击该三角符号将弹出该按钮的一组同位按钮。2.1.2 文档标签与文档工具栏文档标签显示了当前打开的网页文档的名称。文档标签显示了当前打开的网页文档的名称。只显示代只显示代码视图码视图显示代码视图显示代码视图和设计

42、视图和设计视图只显示设只显示设计视图计视图刷新设刷新设计视图计视图在浏览器中在浏览器中预览预览/调试调试文档工具栏用于切换网页视图，管理文件，以及预览文档工具栏用于切换网页视图，管理文件，以及预览文档工具栏用于切换网页视图，管理文件，以及预览文档工具栏用于切换网页视图，管理文件，以及预览网页等。网页等。网页等。网页等。文档标题文档标题2.1.3 文档窗口中的状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。一些信息。标签选择器标签选择器手形工具手形工具缩放工具缩放工具文档大小与预计下载时间文档大小与预计下载时间标签选择器显示了光标所

43、在位置的标签的层次结构。标签选择器显示了光标所在位置的标签的层次结构。标签选择器显示了光标所在位置的标签的层次结构。标签选择器显示了光标所在位置的标签的层次结构。选取、手形和缩放工具是选取、手形和缩放工具是选取、手形和缩放工具是选取、手形和缩放工具是Dreamweaver 8Dreamweaver 8新增的功新增的功新增的功新增的功能，能，能，能，分别用于选取、移动和缩放对象。分别用于选取、移动和缩放对象。分别用于选取、移动和缩放对象。分别用于选取、移动和缩放对象。选取工具选取工具2.1.4 属性面板与面板组属性面板用于查看或编辑所选对象的属性。属性面板会属性面板用于查看或编辑所选对象的属性。

44、属性面板会随着所选对象的不同而变化。随着所选对象的不同而变化。选中图像后选中图像后选中图像后选中图像后的属性面板的属性面板的属性面板的属性面板选中文字后选中文字后选中文字后选中文字后的属性面板的属性面板的属性面板的属性面板Dreamweaver 8Dreamweaver 8为用户提供了众多面板，如属性面板、文件为用户提供了众多面板，如属性面板、文件面板、历史记录面板等。为便于管理，面板、历史记录面板等。为便于管理，Dreamweaver 8Dreamweaver 8将这将这些面板归入到不同的面板组中。些面板归入到不同的面板组中。“文件文件文件文件”面板组包面板组包面板组包面板组包括三个面括三个

45、面括三个面括三个面板板板板“CSS”“CSS”面面面面板组包括板组包括板组包括板组包括两个面板两个面板两个面板两个面板2.2 网站规划、创建与管理2.2.1 确定网站结构所谓网站结构，就是网站中各个分支之间以及分支所谓网站结构，就是网站中各个分支之间以及分支所谓网站结构，就是网站中各个分支之间以及分支所谓网站结构，就是网站中各个分支之间以及分支与主页之间的关系与主页之间的关系与主页之间的关系与主页之间的关系。通常情况下，一个网站的结构往往与该网站的导航通常情况下，一个网站的结构往往与该网站的导航通常情况下，一个网站的结构往往与该网站的导航通常情况下，一个网站的结构往往与该网站的导航菜单相对应。

46、菜单相对应。菜单相对应。菜单相对应。确定好网站结构后，接下来应根据网站结构创建本确定好网站结构后，接下来应根据网站结构创建本地站点，实际上就是确定本地站点以及文件的存放地站点，实际上就是确定本地站点以及文件的存放位置。位置。2.2.2 确定站点目录结构2.2.3 定义站点站点站点站点站点信息信息信息信息新站点新站点新站点新站点为便于管理和编辑站点，在创建网页之前，首先要在为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。中定义站点。定义站点可以将本地磁盘中的站点同定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联。建立一定的关联。2.2.4 新建

47、、打开和关闭网页文件1.1.新建网页文件新建网页文件 Dreamweaver中的文件也就是网页，可以通过中的文件也就是网页，可以通过“文件文件”“新建新建”菜单来创建新网页。菜单来创建新网页。2.打开网页文件如果要打开某站点中现有的网页文件，可以选择如果要打开某站点中现有的网页文件，可以选择“文文件件”“打开打开”菜单，在菜单，在“打开打开”对话框中进行选择。对话框中进行选择。3.关闭网页文件要关闭网页文件，只需单击相应文件右上角的要关闭网页文件，只需单击相应文件右上角的“关闭关闭”按钮，或者按【按钮，或者按【Ctrl+WCtrl+W】组合键。】组合键。2.2.5 保存和预览网页文件新建或编辑

48、网页文件后，新建或编辑网页文件后，需要保存文件，才能使需要保存文件，才能使所做的设置生效。所做的设置生效。选择选择“文件文件”“”“保存保存”菜菜单或按【单或按【Ctrl+SCtrl+S】组合】组合键，即可保存文件。键，即可保存文件。对网页进行编辑或修改后，按【F12】键可以在浏览器中预览其效果。2.2.6 “文件”面板的应用在在DreamweaverDreamweaver中，利用中，利用“文件文件”面板可以非常方面板可以非常方便地管理站点中的网页文件和文件夹。便地管理站点中的网页文件和文件夹。显示站显示站显示站显示站点名称点名称点名称点名称连接到远程连接到远程连接到远程连接到远程主机或与远主

49、机或与远主机或与远主机或与远程主机断开程主机断开程主机断开程主机断开刷新刷新刷新刷新站点站点站点站点获取获取获取获取文件文件文件文件上传上传上传上传文件文件文件文件取出取出取出取出文件文件文件文件存回存回存回存回文件文件文件文件选择选择选择选择视图视图视图视图展开以展开以展开以展开以同时显同时显同时显同时显示本地示本地示本地示本地和远程和远程和远程和远程站点站点站点站点站点内站点内站点内站点内容列表容列表容列表容列表1新建文件和文件夹利用利用“文件文件”面板可以方便地新建文件（实际上就是面板可以方便地新建文件（实际上就是网页）和文件夹。网页）和文件夹。如要新建文件夹，可在弹出的菜单中选择“新建

50、文件夹”选项，其他操作同上。2重命名文件和文件夹在在“文件文件”面板中可以方便地重命名文件和文件夹，面板中可以方便地重命名文件和文件夹，在右键快捷菜单中选择在右键快捷菜单中选择“编辑编辑”“”“重命名重命名”菜单即菜单即可。可。3文件与文件夹的命名规则为便于日后的维护和管理，网站中所有文件和文件夹为便于日后的维护和管理，网站中所有文件和文件夹的命名都是有一定规则的。的命名都是有一定规则的。|最好不要使用中文命名文件。|文件名中不要使用大写英文字母。|运算符符号不能用在文件名的开头。|比较长的文件名可使用下划线“_”来隔开多个单词或关键字。|在大型网站中，分支页面的文件应存放在单独的文件夹中存放