1、第一章第一章 初识网站和网页初识网站和网页|网站和网页网站和网页|网页中的元素类型网页中的元素类型|从功能角度分析网页从功能角度分析网页|常用网站管理与制作软件常用网站管理与制作软件|网站建设流程网站建设流程|初识初识Dreamweaver界面界面1.1 网站和网页网站和网页网站是网页的集合，网页是组成网站的元素。网站是网页的集合，网页是组成网站的元素。1.1.1 1.1.1 网站、网页和主页网站、网页和主页一个小型网站可能只包含几个网页，而一个大型网站则可一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。能包含成千上万个网页。主页也叫首页，每个网站都有自己的首页，它主页
2、也叫首页，每个网站都有自己的首页，它是浏览者登录网站时看见的第一个网页，也是是浏览者登录网站时看见的第一个网页，也是网站的入口。网站的入口。1.1.2 网页是什么网页是什么 网页中除了包含文字外，还包含图像、动画等内容。网页中除了包含文字外，还包含图像、动画等内容。我们看到的一个个网页都是由多个文件组成的。网页文件是我们看到的一个个网页都是由多个文件组成的。网页文件是“根根”，图像和动画文件都是，图像和动画文件都是“枝叶枝叶”。在浏览器中选择在浏览器中选择“文件文件”菜单中的菜单中的“另存另存为为”，可将网页保存到磁盘中。，可将网页保存到磁盘中。1.2 网页中的元素类型网页中的元素类型 1.2
3、.1 1.2.1 网页中的文字与图像网页中的文字与图像文字与图像是网页中的基本元素，是浏览者获得相关文字与图像是网页中的基本元素，是浏览者获得相关信息的主要来源。信息的主要来源。|可在设计网页时为文字设置位置、字体、字号、颜色、可在设计网页时为文字设置位置、字体、字号、颜色、对齐方式，以及加粗和倾斜等格式。对齐方式，以及加粗和倾斜等格式。|网页中只能使用和显示网页中只能使用和显示JPEGJPEG、GIFGIF和和PNGPNG格式的图像，格式的图像，其他诸如其他诸如BMPBMP和和TIFTIF等格式的图像目前还都不能用于网等格式的图像目前还都不能用于网页中。页中。1.2.2 网页中使用的动画与视
4、频影像网页中使用的动画与视频影像视频流技术常见的格式有视频流技术常见的格式有Real VideoReal Video及及Apple QuickTimeApple QuickTime。目前，大家在网页中看到的动画主要包括两类，即动态GIF格式动画和SWF格式动画。|动态GIF格式动画的原理十分简单，就是高速连续显示多幅静态图像，就像播放动画片一样。通常用于制作简单的小型动画。|如果需要在网页上使用一些大型、复杂或带有声音的动画，可借助Macromedia的Flash软件来制作SWF动画。1.2.3 网页中使用的声音网页中使用的声音适当的在网页上加点音乐效果，会使网页更具吸引力。目前，网上比较流行
5、的音频格式主要有MIDI、WAV、MP3与Real Audio。1.3 从功能角度分析网页从功能角度分析网页从功能的角度来看，可以将网页中的元素分为站标、导航栏、广告条、标题栏和按钮。站标站标导航导航栏栏广告广告条条标题标题栏栏按钮按钮1.3.1 站标站标站标也叫站标也叫LOGOLOGO，是网站的标志，其作用是使人看见它就，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站能够联想到企业。因此，网站LOGOLOGO通常采用企业的通常采用企业的LOGOLOGO。LOGOLOGO通常采用带有企业特色和思想的图案，或是与企业通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变
6、形，当然也有很多是图文组合。相关的字符或符号及其变形，当然也有很多是图文组合。1.3.2 导航栏导航栏导航栏实际上是网站内多个页面的超链接组合。导导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览航栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。者在最短时间内了解网站的主要内容。设计导航栏时，有几点需要注意。设计导航栏时，有几点需要注意。|如果网站内容不多，并且导航栏不超过两排，可以根据网站风格尝试灵活摆放，如放在网页的左侧或者放在页面上方等。|如果网站的栏目很多，可以将导航栏分为多排放置在主页如果网站的栏目很多，可以将导航栏分
7、为多排放置在主页LOGOLOGO的下方或右侧，为便于观看，可为各排设置不同的底色。的下方或右侧，为便于观看，可为各排设置不同的底色。|如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或Flash制作导航栏。1.3.3 广告条广告条广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。在在BannerBanner的制作过程中有一些要点需要注意：的制作过程中有一些要点需要注意：|BannerBanner可以是静态的也可以是动态的。可以是静态的也可以是动态的。|BannerBanner的体积不宜过大，尽量使用的体
8、积不宜过大，尽量使用GIFGIF格式的图片与动画或格式的图片与动画或FlashFlash动画。动画。|BannerBanner中的文字不要太多，只要达到一定的提醒效果就可以。中的文字不要太多，只要达到一定的提醒效果就可以。|BannerBanner中图片的颜色不要太多，尤其是中图片的颜色不要太多，尤其是GIFGIF格式的图片或动画，格式的图片或动画，要避免出现颜色的渐变和光晕效果。要避免出现颜色的渐变和光晕效果。1.3.4 标题栏标题栏这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内
9、容少的小网站采用后者。1.3.5 按钮按钮网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按钮的颜色或者大小。1.4 常用网站管理与制作软件常用网站管理与制作软件1.4.11.4.1常用网站管理与网页编辑软件常用网站管理与网页编辑软件|Dreamweaver：网页制作软件三剑客之一，该软件是现在使用最多的网页编辑工具，它支持HTML动态网页、Flash动画、插件，能实现很多FrontPage无法实现的功能，如
10、动态按钮、下拉菜单等。另外，它还可以用来作为动态网站的开发环境。|FrontPage：该软件是目前最简单、最容易上手，且功能强大的网页制作利器，特别适合网页初学者使用。不过，Frontpage也有不少缺点：首先是兼容性不好，利用FrontPage做出来的网页往往不能用Netscape浏览器正常显示；其次，生成的垃圾代码多；此外，FrontPage对动态网页支持不好，不支持Flash，显得有点落伍了。1.4.2 网页设计辅助软件网页设计辅助软件在进行网页制作时，除了需要Dreamweaver、FrontPage等软件外，还会用到Fireworks、Flash、Photoshop等软件，这些软件的
11、主要功能与特点如下：|Fireworks：主要用于制作网页图像、标志、GIF动画、图像按钮与导航栏等。|Flash：主要用于制作矢量动画，如广告、网站片头动画、动画短片、MTV等。|Photoshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求（除了多媒体）。1.4.3 常用网站程序设计语言常用网站程序设计语言如果网站中包含动态网页，除了需要学习一些常用的网页设计软件外，还应掌握一些常用的网站程序设计语言。|JavaScript和VBScript脚本语言|Java|CGI|AS
12、P|ASP.net|PHP|JSP1.5 网站建设流程网站建设流程1.5.1 1.5.1 根据要求确定网站内容根据要求确定网站内容建设网站要有目的性，首先要确定网站的建设网站要有目的性，首先要确定网站的性质和受众，并预期网站发布后的反响。性质和受众，并预期网站发布后的反响。确定了这些后就要开始组织网站的主要内确定了这些后就要开始组织网站的主要内容。容。1.5.2 规划网站栏目规划网站栏目确定了网站内容后，就要开始进行网站规划。例如，将网站的内容划分成哪些栏目，从而使网站既便于浏览者的浏览，也有利于网站将来的维护和更新。1.5.3 确定网页尺寸与版面布局确定网页尺寸与版面布局目前显示器最常用的分
13、辨率是目前显示器最常用的分辨率是10241024 768768像素和像素和800800 600600像素。像素。在在10241024 768768的分辨率下显示的页面的尺寸应该的分辨率下显示的页面的尺寸应该为为10071007 600600像素，而像素，而800800 600600的分辨率下显示的的分辨率下显示的页面尺寸为页面尺寸为778778 435435像素。像素。确定了网页尺寸后，接下来的任务就是确定网页布局类型了。确定了网页尺寸后，接下来的任务就是确定网页布局类型了。网页布局类型没有确定的标准，可以根据需要制定。常见的布网页布局类型没有确定的标准，可以根据需要制定。常见的布局有上下分割
14、型、左右分割型和复合分割型（上下分割和左右局有上下分割型、左右分割型和复合分割型（上下分割和左右分割结合）。分割结合）。1.5.4 确定网站配色与风格确定网站配色与风格不同的网站有着自己不同的风格，也有着自己不同的颜色。基本上网站使用的颜色从出发点上看可以分为以下3种类型：|行业风格色：许多网站使用颜色秉承着所属行业的风格。|企业标准色：在现代企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如Intel官方网站的主色调是一种接近于天蓝的蓝色，|个人习惯色：这种配色方法的使用在很大程度上是凭设计者的个人爱好以及当时的心态决定的，在个人网站较为多见。行业风格色行业风格
15、色著名的化妆品公司玫琳凯中国网站使用的颜色是粉色。这几乎是所有化妆品行业中最常用到的颜色，这种颜色代表了高贵，典雅以及甜蜜等；企业标准色企业标准色在现代企业中，公司的在现代企业中，公司的CI形象显得尤其重要，每一个公司的形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如设计必然要有标准的颜色。比如Intel官方网站的主色调是官方网站的主色调是一种接近于天蓝的蓝色。一种接近于天蓝的蓝色。个人习惯色个人习惯色这种配色方法在设计的时候自由度非常高，同时所选的题材与要表现的内容也是由设计者自己决定，比如设计者喜欢红色和黑色，那么在设计的时候就倾向于使用这两种颜色。下面是一些网页配色时的小技
16、巧下面是一些网页配色时的小技巧|用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度。|用两种色彩：先选定一种色彩，然后选择它的对比色。|用一个色系：简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。|颜色不能太多：不要将所有颜色都用到，尽量控制在35种色彩以内。|背景和前文的对比：背景和前文的对比尽量要大（尤其不要使用花纹图案作为页面背景），以便突出主要文字内容。1.5.5 收集网页所用素材收集网页所用素材在制作网页之前，应首先收集好制作网页时要在制作网页之前，应首先收集好制作网页时要使用的素材，这些素材包括文字资料、图片、使用的素材，这些素材包括文字资料、图
17、片、动画、声音、视频等。动画、声音、视频等。对于一些原始的材料还可以使用对于一些原始的材料还可以使用PhotoShopPhotoShop、FireworksFireworks、FlashFlash等软件进行处理，使其可以更好等软件进行处理，使其可以更好地应用于网页。地应用于网页。1.5.6 利用软件制作网页利用软件制作网页制作网页也就是整合网页素材，即使用制作网页也就是整合网页素材，即使用DreamweaverDreamweaver等软件进行网页设计。等软件进行网页设计。还可以根据需要为网页增加一些特效，比如还可以根据需要为网页增加一些特效，比如闪烁的字幕、跳出动画、改变鼠标的形状等，闪烁的字
18、幕、跳出动画、改变鼠标的形状等，这些多是通过这些多是通过JavaScriptJavaScript来实现的。来实现的。1.5.7 测试和发布网站测试和发布网站|在发布之前需要先对网站进行测试，网站测试一般包括在发布之前需要先对网站进行测试，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。测试等。|要发布网站，用户需要具备两个条件：域名和虚拟主机。要发布网站，用户需要具备两个条件：域名和虚拟主机。提供这类服务的公司被称为域名和网站托管服务商，目前，提供这类服务的公司被称为域名和网站托管服务商，目前，这类公司也有很多，如中国
19、万网（这类公司也有很多，如中国万网（http:/http:/）、通）、通联无限（联无限（http:/http:/）等。）等。1.6 初识Dreamweaver界面 1.6.1 1.6.1 Dreamweaver 8.0Dreamweaver 8.0界面介绍界面介绍Dreamweaver 8.0标准工作界面大致可以分为以下几个区域:标题栏:菜单栏：文档工具栏：“插入”栏：文档窗口：属性栏：状态栏：浮动面板组：1.6.2 1.6.2 常用常用工具工具 菜单栏工具：菜单栏工具：文件：用来管理文件。插入：用来插入各种元素.修改：具有对页面元素修改的功能。文本：用来对文本操作。命令：所有的附加命令项 站
20、点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。1.6.2 1.6.2 常用常用工具工具 文档工具栏：文档工具栏：“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。界面如图2-4所示。1.6.2 1.6.2 常用常用工具工具 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜单共167个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像
21、、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。面板的界面如图2-51.6.2 1.6.2 常用常用工具工具 “文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 8.0显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。1.6.2
22、1.6.2 常用常用工具工具 属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。属性面板的界面如图2-8所示。1.6.2 1.6.2 常用常用工具工具 “文档窗口”的底部的状态栏提供了与你正在创建的文档的有关其他信息。“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。
