第二章-设计及实现

第二章设计与实现1第二章方法篇2.1网页设计要素2.1.1网页的基本视觉元素网页设计是指在网页制作中运用平面设计的基本视觉元素进行合理的组合构成，从而达到信息传达和审美的目的。网页设计中涉及的视觉元素主要包括网站标志、文字、图形和图像、色彩等。各视觉元素及其组合构成方式，是网页设计准确传递信息以及符合视觉审美规律的基本要求。在设计过程中，设计师必须遵循构图的形式美法则，才能设计出更合理美观的信息传达形式。美的形式不仅可以感染受众，还能使人们产生良好的形象记忆，从而更有效地达到表现网站主题内容的设计目的。2第二章方法篇网页是网站构成的基本元素，而网页的精彩与否与其版式风格是紧密相关的。（1）网页的风格定位网页设计首先要考虑风格的定位。任何网页的风格都由其主题内容决定，只有形式与内容达到完美统一，才能实现更好的宣传效果。目前网站的应用范围日益扩大，几乎涉及所有的行业，归纳起来大体可分为：新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络数码、医疗保健等。2.1.2网页的版式风格设计3第二章方法篇不同行业的网页，应体现出不同的风格。例如：政府机关的网页风格一般较严谨庄重，而娱乐行业则活泼生动，文化教育类的风格则高雅大方，等等。网页风格的形成主要依赖于网页的版式设计和页面的色调处理，以及图片与文字的组合形式等，因此，网页的设计和制作者要具有一定的美术素质和修养。2.1.2网页的版式风格设计4第二章方法篇（2）网页的版式设计网页的版式设计，是指在有限的显示器屏幕空间上将视听多媒体元素进行有机的排列组合，是一种区别于传统媒体的具有独特风格和艺术特色的视听传达方式。网页在传达信息的同时也使浏览者产生感官与精神上和谐的美的享受。为使网页达到最佳的视觉效果，设计师需要反复推敲网页版式的合理性，使浏览者有一个流畅的视觉体验。2.1.2网页的版式风格设计5第二章方法篇网页的版式设计通常包括：视觉元素及其组织形式、页面间的转场以及网站的导航形式等。“视觉元素的组织”包括元素的大小和数量、表格的布局、散点组合与块状组合、主题形象的体现、留白效果的表现、图与文的关系、曲线与直线的组织、水平线与垂直线以及斜线的比较，等等。根据不同的组织形式，可以将网页的版式大致划分为以下几种类型：骨骼型、满版型、分割型、中轴型、倾斜型、对称型、焦点型、三角型、自由型。2.1.2网页的版式风格设计6第二章方法篇骨骼型网页中骨骼型是一种规范、严谨的分割方式，类似于报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。骨骼型版式常为综合门户、新闻媒体类网站所采用。如图2-1所示。2.1.2网页的版式风格设计7第二章方法篇图2-1该网站为世界新闻报网，采用三栏的结构形式，清晰，有条理，富有弹性。2.1.2网页的版式风格设计8第二章方法篇满版型满版型页面以图像充满整版。主要以图像为诉求点，可将部分文字置于图像之上。视觉传达效果直观而突出，给人以生动大方的感觉。满版型版式被各种网站所采用，其中以韩国网站居多。如图2-2、图2-3、图2-4所示。2.1.2网页的版式风格设计9第二章方法篇图2-2教育机构网站采用实体图为背景进行满幅构图，丰富的画面给人以轻松、活泼、向上的感受。图2-3采用卡通图画作背景，导航形式与背景内容融为一体，形式统一，感觉轻松自然。图2-4色彩鲜明，内容形式活泼，整个画面充满了孩童般的阳光气息，海面、白云元素的出现，使画面更添空间感。2.1.2网页的版式风格设计10第二章方法篇分割型分割型版式指把整个页面分成上下或左右两部分，分别安排图片或文字内容。两部分形成对比，使图片部分感性而具表现力，文字部分则理性而具说服力。可以调整图片和文字所占的面积比例，来调节对比的强弱。如果图片比例过大，文字字体过于纤细，段落疏松，会造成视觉心理的不平衡，显得生硬。如果通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。分割型版式常被各类网站所采用。如图2-5、图2-6所示。2.1.2网页的版式风格设计11第二章方法篇图2-5图片与文字分割为上下两部分，图片一目了然，突出网站性质，文字设计清新淡雅，给人以轻松舒适的感觉。图2-6以象征主题内容的高品质图像为主，色彩鲜亮夺目，突出健康食品的特征2.1.2网页的版式风格设计12第二章方法篇中轴型中轴型版式指沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。中轴型版式为各类网站所采用。如图2-7、图2-8所示。2.1.2网页的版式风格设计13第二章方法篇图2-7以火炬的形象为中轴线划分整个页面，卷曲的背景形式给人以较强的空间感。图2-8用反差较大的背景色将页面一分为二，突现产品性能的实体图像，使页面更显生动。2.1.2网页的版式风格设计14第二章方法篇倾斜型倾斜型版式是将页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。倾斜型版式为各类网站所采用。如图2-9、图2-10、图2-11所示。2.1.2网页的版式风格设计15第二章方法篇图2-9色彩协调，边缘淡化，倾斜的页面显得轻松悠闲，体现了该网站的诉求特征。图2-10倾斜的画面形式突出网站的主题，增添动感，强烈的艺术处理效果、斑驳的边缘使网站突显个性。图2-11图片与文字内容均采用倾斜式，加以鲜明强烈的“可口可乐”元素，使画面更具动感，刺激人的感官。2.1.2网页的版式风格设计16第二章方法篇对称型对称型版式的页面给人稳定、严谨、理性的感觉。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。四角型对称也是其中一种，指在页面四角安排相应的视觉元素。对称型版式为各类网站所采用。如图2-12、图2-13所示。2.1.2网页的版式风格设计17第二章方法篇图2-12以健康、明快的嫩绿色为背景将画面上下分割，文字与图片的结合，增添了真实感和趣味性。图2-13红黑两色将画面分为左右对称的形式。不但背景对称，画面图像也相对对称，突出了页面主题的气氛。2.1.2网页的版式风格设计18第二章方法篇焦点型焦点型的网页版式通过对浏览者视线的诱导，可以使页面产生强烈的视觉效果，如集聚感或膨胀感等。焦点型分三种情况：中心——将图片或文字置于页面的视觉中心。向心——视觉元素引导浏览者的视线向页面中心聚拢。离心——视觉元素引导浏览者的视线向外辐射。焦点型版式为各类网站使用。如图2-14、图2-15、图2-16。2.1.2网页的版式风格设计19第二章方法篇图2-14视觉元素环绕光盘图形，引导浏览者的视线，色彩活跃，体现了网站的主题特征。图2-15利用文字元素组成焦点形式，引导浏览者的视线向外辐射，富有趣味性。图2-16利用浏览者操作鼠标带动图片形成视线引导的强烈效果，加以丰富的色彩，使画面更具动感、现代感，刺激人的感官。2.1.2网页的版式风格设计20第二章方法篇三角型三角型版式指网页各视觉元素呈三角形或多角形排列。正三角形最具稳定性，倒三角形则可产生动感。侧三角形构成一种均衡版式，既安定又有动感。三角型版式各类网站所采用。如图2-17、图2-18、图2-19。2.1.2网页的版式风格设计21第二章方法篇图2-17利用色彩划分构图，侧三角形构成一种均衡版式，既安定又有动感。图2-18利用三块版面将整个界面划分成三角构图，整体显得稳定、均衡。图2-19将两个三角形分别放置在呼应的对角上，配以标志及导航，处理得当，突显主题内容，使画面更具动感、现代感。2.1.2网页的版式风格设计22第二章方法篇自由型自由型版式的页面具有活泼、轻快的气氛。自由型版式也可应用于多种网站。如图2-20、图2-21所示。

2.1.2网页的版式风格设计23第二章方法篇图2-20自由组合的活泼版式，夸张的人物形象，有趣的导航悬挂其中，这样的搭配组合，让浏览者乐于接受。图2-21构图自由，形式独特，色彩搭配协调，极富趣味性。2.1.2网页的版式风格设计24第二章方法篇

以上介绍的版式基本类型并不是固定不变的，在实际设计中，设计师可以根据网页所要传达的主题内容来灵活地变化版式。在设计前要认真分析网站的定位，在设计中要灵活把握版式结构，才能更好地达到设计目的。2.1.2网页的版式风格设计25第二章方法篇点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本形式语言。一个按钮或文字是一个点，几个按钮或者几个文字的排列则形成线。线的移动、数行文字或者一块空白可以理解为面。点、线、面相互依存、相互作用，便可组合成各种各样的视觉形象以及千变万化的视觉空间。在设计中处理好三者的关系，合理地运用形式语言，不仅可以创造出独特的网页视觉形象，充分地表现网页的主题内容，还可以更好地吸引浏览者。点、线、面的运用和表现，如图2-22所示。2.1.3.形式语言的运用26第二章方法篇2.1.3.形式语言的运用27第二章方法篇（1）网页形态中点的视觉构成点是视觉构成的基本元素之一。点是相对而言的，在网页中，把一个单独而细小的形象称为点，并不只有圆点才叫点。比如一个汉字、一个按钮、一个标志等自由形，在页面中都可以是点。点是相对线和面而存在的元素。

2.1.3.形式语言的运用28第二章方法篇在设计中，一个网页往往需要有数量不等、形状各异的点来装饰画面。点的形状、方向、大小、位置、聚集、发散，能够给人带来不同的心理感受。例如在导航标题后加个点，在每段文字段首加方或者圆的点，能使页面显得活泼生动，甚至可以起到画龙点睛的作用。点的运用和表现，如图2-23所示。2.1.3.形式语言的运用29第二章方法篇图2-23这是同一网站的不同页面，点以不同的构成形式出现。上图，将点有规律地排列组合，布满整个画面，并构成网站的导航系统；中图，根据内容的需要，点以不同的色彩形式出现在画面中，自由活泼；下图，点构成的导航被放大至近似于面排列在页面中，背景又出现了不同形式的点，整个画面丰富活泼，却不杂乱。该网站总体来讲，构图独特，形式自由，色彩搭配协调，极富趣味性。2.1.3.形式语言的运用30第二章方法篇（2）网页形态中线的视觉构成线是点移动的轨迹，在页面上起到强调、分割、引导视线的作用。不同方向、长度、宽度、形态的线会给人以不同的感受。垂直的线显得平稳、挺拔；弧线流畅、轻盈；曲线给人以动感、活力；粗线条可以传递粗犷、勇敢、阳刚感；细线条可以传递锐利、敏感、速度感。在设计中，利用线对页面空间进行分割的方法也很普遍。线对空间的分割可以产生各种特征的面。线的运用和表现，如图2-24所示。2.1.3.形式语言的运用31第二章方法篇图2-24这一网站运用线条勾勒出不同形态，以构成丰富的画面。活跃的线条与图片的结合贯穿始终，与主题内容配合得恰到好处。每个页面的各种元素相互呼应，统一协调又不乏趣味，给整个网站增添了活力和感情色彩。2.1.3.形式语言的运用32第二章方法篇（3）网页形态中面的视觉构成面是网页形态中常用的构成元素，点和线的密集扩张轨迹都可构成面。面的大小、形态、变化关系到页面的整体布局。在网页设计中，表格和框架是用来分割页面的，采用面的分割、组合、虚实交替等方式可以使网页主题明确、层次分明，产生井然有序的和谐效果。面的运用和表现，如图2-25所示。2.1.3.形式语言的运用33第二章方法篇图2-25这一网站采用不同色彩变化的斜面进行布局，每个斜面都有区别于其他面的细节处理，并且都代表着不同的栏目内容，构成导航系统，点击进入下一级页面，又出现了不同的面的组合形式，但整体上都保持着和谐统一。画面丰富，导航灵活，每个页面的各元素相互呼应，相互衬托。2.1.3.形式语言的运用34第二章方法篇(1)色彩基础概念了解从色彩学上讲，色彩是由色相、明度、纯度三个要素组成的。色彩的三要素及色彩原理对于网页设计是至关重要的。2.1.4.色彩原理的运用35第二章方法篇色相——指不同波长的颜色构成的各种色彩相貌，是颜色的基本特征。明度——指色彩的明暗程度。通常又称亮度、光度、深浅度。纯度——纯度是指颜色的纯粹程度，也称饱和度，即与中性灰的参杂程度。对比色——色环中位置相对的两种色彩，通常也指两种可以明显区分的色彩。相近色——色环中相邻的三种颜色。无彩色——只有明度特征，没有色相和饱和度的区别，是指黑、白、灰系统色。有彩色——指黑、白、灰以外的色彩。2.1.4.色彩原理的运用36第二章方法篇（2）网页的色彩设计分析色彩在视觉系统中的重要性大于形状、面积、位置等因素。在网页设计中，色彩给浏览者带来的视觉冲击力常大于版式等因素，其表现力直接影响到形式的统一与美观。很多网站以成功的色彩搭配令人过目不忘。但刚接触网页设计时，往往不容易驾驭好网页的颜色搭配。前面简单介绍了色彩的基本概念，下面结合网页设计来探索色彩在其中的作用、特征体现以及搭配规律等。2.1.4.色彩原理的运用37第二章方法篇色彩在网页设计中的作用：组织、划分——利用色彩进行信息组织、区域划分与识别，便于浏览者操作和分辨，减少认知负荷。突出、强调——利用色彩的变化对内容进行必要的强调，使网页内容的层次更分明、条理更清晰。提示、警示——利用色彩的象征性表现内容，例如绿色按钮表示“开始”，红色表示“停止”等。增添吸引力——利用美观合理的色彩搭配吸引浏览者的眼球，激起其兴趣。2.1.4.色彩原理的运用38第二章方法篇

在网页设计中，通常将色彩按其作用划分为以下几种：背景色——用于网页的背景颜色，有时即为基本色。基本色——即网页的主色调。一般占据面积较大，在整体网站上起到体现主题内容及风格的重要作用。辅助色——辅助基本色的次要颜色，起到配合基本色营造整体氛围的作用。强调色——用于突出、强调标志性内容的色彩。2.1.4.色彩原理的运用39第二章方法篇色彩均衡的体现要使网站看上去舒适、协调，除了文字、图片等的合理排版，色彩的均衡也是非常重要的。一个网站不可能单一地运用某种颜色，所以必须把握好色彩的均衡性。色彩的均衡，包括色彩的位置、色彩所占的比例、面积等。例如大面积色彩的明度以及鲜艳明亮的色彩面积应小一点，让人感觉舒适、不刺眼等。在网页设计中，一定要合理地运用色彩，使其在页面上呈现出一种均衡美的视觉效果。2.1.4.色彩原理的运用40第二章方法篇

色彩的心理联想不同的色彩在人们的生活中带有不同的感情和文化内涵。比如红色让人联想到太阳、玫瑰、喜庆、热闹、兴奋；白色象征纯洁、干净、明快；黑色代表深沉、神秘、压抑、寂静；紫色象征着女性化、高雅、浪漫；蓝色象征天空、高科技、稳重、理智；橙色代表欢快、甜美、收获、时尚；绿色代表了自然、活力、舒适、希望；等等。色彩的含义不是一成不变的，在特定的情景下，同种色彩给人的感受也随之变化。

2.1.4.色彩原理的运用41第二章方法篇不同色彩的运用和体现。如图2-26、图2-27、图2-28、图2-29所示。2.1.4.色彩原理的运用42第二章方法篇黑白灰的运用黑白灰是万能色，可以和任意一种色彩搭配。在设计过程中,如果两种色彩的搭配不协调，可试加入黑色或者灰色，或许会得到意想不到的效果。对一些明度较高的网站，适当配以黑色，可调节其明度效果，呈现均衡。白色是网站使用最普遍的一种颜色。很多网站留出大面积白色空间，作为网站组成部分，即通常所说的留白。很多设计性网站较多运用留白艺术。留白可给人遐想的空间，让人感觉心情舒适、畅快。恰当的留白对协调页面的均衡有很好的效果。

2.1.4.色彩原理的运用43第二章方法篇黑白灰的运用和体现，如图2-30所示2.1.4.色彩原理的运用44第二章方法篇基于对比色的配色对比色是指色环中位置相对的两种色彩，通常也指两种可以明显区分的色彩。对比色在网页设计中用得很普遍。由于对比色有较强烈的分离性，在设计网页时恰当地运用对比色，不仅能拉开色彩的距离感，而且能表现出特殊的视觉对比与平衡效果。如图2-31、图2-32所示。2.1.4.色彩原理的运用45第二章方法篇2.1.4.色彩原理的运用46第二章方法篇

基于相近色的配色相近色的搭配给人以自然、统一、和谐的视觉感受。相近色在网页设计中最为常用。如图2-33、图2-34、图2-35所示。2.1.4.色彩原理的运用47第二章方法篇2.1.4.色彩原理的运用48第二章方法篇

有彩色与无彩色的搭配有彩色与无彩色搭配的主要作用是强调网站的主题内容或控制画面色彩的平衡。如图2-36、图2-37所示。2.1.4.色彩原理的运用49第二章方法篇2.1.4.色彩原理的运用50第二章方法篇色彩小结了解了色彩的基本概念及其在网页设计中的搭配规律后，具体运用时，还需注意：一个网站不可能运用单一的某种颜色，因为这样会让人感觉单调、乏味；但也不能将所有颜色都运用上，因为那样会让人感觉轻浮、花哨，主题不突出，没有方向。通常使用一种或两种主题色，配以辅助色，一个页面尽量不要超过四种色彩。

2.1.4.色彩原理的运用51第二章方法篇在设计过程中，设计背景色时，要考虑其与前景文字的搭配。一般网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色，清晰可见，让人一目了然。有些网站为给浏览者留下深刻印象，处理背景时很夸张。比如一个空白页的某部分用了大面积的明亮色块，这时文字的色彩就要选择暗色系列的，这样文字才能与背景分开层次，不致于影响浏览者阅读内容。

2.1.4.色彩原理的运用52第二章方法篇标志是宣传网站的重要组成部分，所以在页面上要突出显示，标志的色彩跟网页的主题色层次要拉开。有时候为了更好地突出标志，也可适当使用对比色。导航、小标题是网站的指路灯。浏览者要在网页间跳转、了解网站的结构及内容，必须通过导航或者小标题引导来实现。这时可以使用稍具跳跃性的色彩来加以强调，以吸引视线，让人感觉网站功能清晰明了、层次分明，不致于迷失方向。2.1.4.色彩原理的运用53第二章方法篇网页细节的设计可以体现出一个网站的品质，及其对于浏览者的态度，每个网站都有自己设计精细的独特之处。下面我们从网站的导航方式及loading画面的设计两个方面来了解一下网页设计品质的细节体现。如图2-38、图2-39、图2-40、图2-41、图2-42、图2-43、图2-44、图2-45所示，不同的网站各自采用不同的导航方式及loading画面设计，精美别致，给人耳目一新的感觉。2.1.5.网页设计品质的细节体现54第二章方法篇2.1.5.网页设计品质的细节体现55第二章方法篇2.1.5.网页设计品质的细节体现56第二章方法篇2.2网站设计要素2.2.1.网站设计前的考虑（1）使用者优先的观念无论是在设计网站之前、设计过程中，还是设计完毕后，都要谨记一条准则，即：使用者优先。如果没有得到使用者的接受和认可，任何网站都会失去实际意义。（2）考虑多数人的连线状况在设计网站时必须以普遍的连线状况为参考量，避免放置大量会加重塞车情况或让人等得不耐烦的链接。在网站整体设计完成之后,最好上网测试一下连线情况。57第二章方法篇（3）考虑使用者的浏览器为使大多数使用者可以无障碍地浏览网站，最好采用浏览器都可阅读格式，避免使用只有个别浏览器可以支持的格式或其他程序技巧。如果为了展现网站设计的高超技术效果又不想放弃潜在受众，可考虑在主页设置几种观赏切换模式（如纯文字模式、Frame模式、Java模式等），供浏览者自行选择。2.2.1.网站设计前的考虑58第二章方法篇

2.2.2.网站主题设计的思维流程1.确定网站主题做网站，首先必须确定网站的主题。在选择主题和内容时，主题定位要小，内容要精。不要试图做一个包罗万象的网站，这样往往会使网站失去特色。2.确定网站界面界面是网站给浏览者的第一印象，往往决定着网站的可看性。在确定网站的界面时，要注意栏目与板块编排。构建网站就好比写论文，首先要列出提纲，做到主题明确、层次清晰。刚接触网站设计，容易犯的错误就是：确定题材后立刻开始制作，不进行合理规划，致使网站结构不清晰，目录庞杂，板块混乱。着手制作网页前，要仔细考虑每一个栏目和板块的组织编排。59第二章方法篇3.确定网站CI形象所谓CI(英文corporateidentity的缩写)，是指通过视觉设计来统一企业的形象。一个杰出的网站和实体企业一样，也需要整体的形象包装和设计。准确的、有创意的CI设计，可以使网站的宣传推广取得事半功倍的效果。网站主题和名称确定后，需要思考的就是网站的CI。网站CI包括：网站标志、网站色彩、标准字体、网站宣传语等。2.2.2.网站主题设计的思维流程60第二章方法篇设计网站标志(logo)logo是指网站的标志，可以是中文、英文字母或符号、图案等。标志的设计创意一般来自于网站的名称和内容，如将网站内有代表性的图形图案（人物、动物、植物、物品），加以卡通化或艺术化处理作为标志出现。最常用的方式是用网站名称作标志，采用不同的字体、字母的变形和组合制作出网站的标志。2.2.2.网站主题设计的思维流程61第二章方法篇设计网站色彩网站给人的第一印象来自不同的色彩搭配效果所产生的视觉冲击，网站的色彩可能直接影响到浏览者的情绪。“标准色彩”是指能体现网站形象和延伸网站内涵的色彩，用于网站的标志、标题、主菜单和基本色上，给人以和谐统一的感觉。至于其他色彩也可搭配使用，作为点缀和衬托，但绝不能喧宾夺主。2.2.2.网站主题设计的思维流程62第二章方法篇设计网站字体和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现网站的风格，可根据主题需要选择艺术化字体。需要注意的是：非默认字体只能采用图片的形式，以避免因浏览者的计算机没有安装特殊字体，而影响设计效果。设计网站宣传语即网站的精神主旨或网站的目标，可用富有气势的一句话或一个词来高度概括，以达到对外宣传的效果。2.2.2.网站主题设计的思维流程63第二章方法篇4.确定网站风格风格是指网站带给浏览者的综合感受，包括网站的CI、版面布局、浏览方式、交互性、语气等因素，不管是哪些因素，要能够使浏览者明确判断出网站是独特的。网站的风格可以是平易近人、生动活泼、温文儒雅等。风格独特的网站与普通网站的区别在于：普通网站看到的是信息的堆砌；风格独特的网站可使浏览者获得除内容外的更感性的认识，比如网站的品位、对浏览者的态度等。2.2.2.网站主题设计的思维流程64第二章方法篇5.选择有创意的内容选择有创意的内容，其目的是为了更好地宣传与推广网站。主题内容是网站的根本所在，内容第一是网站成功的关键，如果内容空洞，即使页面再精美，仍然会失去真正的意义。2.2.2.网站主题设计的思维流程65第二章方法篇网站设计的元素主要指视听元素，通常包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，设计师所要考虑的是如何将这些元素以感人的形式放进网页里。2.2.3.网站设计的元素66第二章方法篇2.3网站设计的实现2.3.1.主题案例五：网页基本视觉元素分析与制作技巧（1）视觉元素之一：网站导航分析网站的导航条可以引导浏览者迅速地找到有用的信息。目前在网页设计中，导航条的形式很丰富，最常见的是在网站中所有网页的上方放置菜单条，如图2-46所示。其他常见的形式还有比较随意的，如图2-47所示；表现另类个性、追求特殊艺术效果的，如图4-48；文字与图形相结合的，如图2-49、图2-50所示。在设计过程中，我们应依据网站风格与内容的需要合理地设计导航条的形式。如需要特殊艺术效果的导航形式，则可利用Photoshop软件进行图片化处理。

67第二章方法篇以图2-47、图2-48为例，这两种导航及背景都体现了Photoshop软件中画笔工具的艺术处理效果。画笔效果的制作过程简述如下：a.将图片转到通道面板,新建通道Alpha1；b.利用套索工具在通道里画出所需形状，并填充色彩；c.运用滤镜"画笔描边"中的"喷色描边"，设置效果参数；d.回到图层，打开"选择"菜单下的"载入选区"，继而选择通道"Alpha1"，填充相应色彩即可。上述提示仅为大致过程，学习者在设计操作时可反复试验，注意细节处理，直到实现网站理想的视觉效果。2.3.1.主题案例五：网页基本视觉元素分析与制作技巧68第二章方法篇2.3.1.主题案例五：网页基本视觉元素分析与制作技巧69第二章方法篇（２）视觉元素之二：网站标志分析网页标志是网站独有的传媒符号，一般出现在站点的页面上方，是网站内涵的集中体现。网站标志最重要的作用是传递网站的定位、表达网站的理念，便于人们识别，它广泛用于网站的宣传等。一个富有视觉冲击力的网站标志设计，会直接影响浏览者对网站的判断，特别是网站推广。标志设计追求的是：以简洁的符号化视觉艺术形象向人们传达网站的主题和理念。2.3.1.主题案例五：网页基本视觉元素分析与制作技巧70第二章方法篇网站标志的设计手法很多，例如：表象性手法、表征性手法、借喻性手法、标识性手法、卡通化手法、几何形构成手法、渐变推移手法。在实际运用中，标识性手法、卡通化手法和几何形构成手法最为常用。标识性手法是指用网站名称文字或拼音字母的符号来进行设计的方法，如图2-51所示。卡通化手法是指通过夸张、幽默的卡通图像来设计标志的方法，如图2-52所示。几何形构成手法是指用点、线、面等形式语言来设计标志的方法，如图2-53所示。2.3.1.主题案例五：网页基本视觉元素分析与制作技巧71第二章方法篇2.3.1.主题案例五：网页基本视觉元素分析与制作技巧72第二章方法篇（1）星巴克咖啡中国网站页面设计分析与制作技巧图2-54所示的网站为星巴克咖啡中国网站。首先，这一网站的布局形式符合其主题需要，标志元素出现在每一幅页面上，以突现主题。其次，页面以实体店场景为背景，体现网站的性质。浏览者的鼠标经过相应的导航元素，场景便会随之改变。人性化的设计将浏览者带入到一个逼真的虚拟环境中，趣味性十足。网站背景采用了富有肌理效果的底纹，使网站具有独特的色彩味道。当网站的整体版式风格形成后，在页面下方放置卡通元素加以细节处理，使画面丰富、有趣、不呆板。2.3.2.主题案例六：网站页面设计分析与制作技巧73第二章方法篇2.3.2.主题案例六：网站页面设计分析与制作技巧74第二章方法篇（2）星巴克咖啡韩国网站页面设计分析与制作技巧利用Photoshop制作具有“烧纸边缘效果”的背景底纹的操作小技巧有：使用套索工具绘制边缘带齿的不规则图形；进行快速蒙版的操作；选择区域的加减操作；高斯模糊滤镜的应用；色调/饱和度校正的设置。如图2-55所示。上述提示是制作的大概过程，学习者在设计操作时要注意细节处理，反复尝试。2.3.2.主题案例六：网站页面设计分析与制作技巧75第二章方法篇2.3.2.主题案例六：网站页面设计分析与制作技巧76第二章方法篇2.4基于设计的网站制作

通过前面章节的学习，学习者已经能够使用Dreamweaver制作具有一定功能的图文并排网页，但是这样制作出来的网页很难有整体的视觉效果，例如案例四。当然也可以利用Photoshop设计不具有任何网页功能的页面效果图，例如案例六。但是效果图始终只是图片，不能作为网页来使用。通过这一节的讲解，学习者将能够把这些通过Photoshop设计的网页效果图变为实实在在的扩展名为.html的网页文件，在不破坏视觉效果的基础上，实现网页中的一些基本功能，如导航、动画、超链接等。77第二章方法篇切片工具的使用要把一张效果图变为网页，需要使用Photoshop中的切片工具，如左图，使用切片工具可以把图片切分成很多切片。其中操作者主动切出来的切片叫作用户切片，切片标识为蓝色，可以通过切片选取工具来改变用户切片的大小和位置。其余的切片叫作自动切片，切片标识为灰色，如下图。自动切片不能被直接修改，必须提升为用户切片后才能修改，切片选项是精确调整切片大小和位置的.78第二章方法篇2.4.1主题案例七:利用切割制作网站欢迎页面

案例要点—切片工具使用，切割规则，存储为web所用格式的设置。

目标描述—了解欢迎页面切割的目的，掌握切割的方法，初步掌握结合使用Photoshop和Dreamweaver来完成网站欢迎页面的制作。当一张效果图被切分为大大小小的切片后，通过Photoshop“文件”菜单中的“存储为web所用格式”，这张效果图将自动生成.html的网页。79第二章方法篇案例实现

如图2－58，这是一个小型网站的欢迎页面设计图。图2－582.4.1主题案例七:利用切割制作网站欢迎页面80第二章方法篇通过Photoshop的切片工具切割成如图2－59的样式，在硬盘上建立一个站点文件夹website图2－59切片图2.4.1主题案例七:利用切割制作网站欢迎页面81第二章方法篇使用Photoshop“文件”菜单下的“存储为web所用格式”，弹出如图2－60的对话框。使用该对话框左上角的缩放工具先把整张图缩小，然后使用切片选择工具把整张图所有的切片全部框选，设置成JPEG格式，品质设置为100。图2－60切片设置2.4.1主题案例七:利用切割制作网站欢迎页面82第二章方法篇设置完成后点击其右上角的存储，弹出如图2－61的对话框，选择保存在预先建立的站点文件夹website下，保存类型选择“HTML和（*.html）”，命名为index.html，点击保存。图2－61保存设置2.4.1主题案例七:利用切割制作网站欢迎页面83第二章方法篇保存后website文件夹下将自动生成一个images文件夹，用来保存切片生成的单独图片，同时还自动生成了index.html的网页文件。使用Dreamweaver打开index.html后发现，这些单独的切片图片通过一张隐形表格（见注解）无缝地拼接在一起，看不出任何切割的痕迹。这些工作由Photoshop自动完成，这样就实现了效果图向网页文件的转化。另外，如果需要改变存储图片的文件夹的名称（默认是images）、切片图片的命名方式等设置，使其符合站点整体规划，也可以在图2－61的设置里选“其他”，将弹出如图2－62的对话框，可在其中修改相关设置。2.4.1主题案例七:利用切割制作网站欢迎页面84第二章方法篇

另外，如果需要改变存储图片的文件夹的名称（默认images）、切片图片的命名方式等设置，使其符合站点整体规划，也可以在图2－61的设置里选择“其他”，将弹出如图2－62的对话框，可在其中修改相关设置。注：隐形表格就是表格的填充、间距、边框值都为0，网页中绝大多数排版都使用这种表格。2.4.1主题案例七:利用切割制作网站欢迎页面85第二章方法篇本案例在Dreamweaver中的后期处理页面整体居中由于最初设计图的大小比屏幕的分辨率小，在IE里预览由Photoshop自动生成的页面index.html时，整个页面会处于屏幕的左上角。即使设置表格的对齐属性为居中，也只能实现在水平方向上居中。怎样才能让设计图处于屏幕的绝对中间呢？首先，选中整个表格，使用Ctrl+X剪切，然后在剩下的空白页面上插入一张1行1列的表格，表格的宽和高都设置成100%，填充、间距、边框值都设为0，在这个1行1列的表格里面使用Ctrl+V，把刚才剪切的包含设计图的表格粘贴进来，对齐属性设置为居中。按F12键在IE中预览，会发现无论屏幕多大，设计图都已经绝对居中了。最后设置页面背景颜色为#C7AE8B，如图2－63，这样整个版面的效果就比较符合视觉规律。2.4.1主题案例七:利用切割制作网站欢迎页面86第二章方法篇图2－63居中显示2.4.1主题案例七:利用切割制作网站欢迎页面87第二章方法篇鼠标经过图像某些网页中的导航，当鼠标放上去时会有细微的变化，在Dreamweaver中可以通过使用“鼠标经过图像”来实现这样的操作。首先做两张相差很小的小图片，例如只是文字的颜色有一点不同，如图2－64，把它们存为JPEG的格式放在images文件夹下，分别命名为up.jpg和down.jpg。再用Dreamweaver新建一个基本页，保存在站点文件夹website下，命名为temp.html。如图2－65，在页面中插入“鼠标经过图像”，弹出图2－66对话框，把up.jpg添加到“原始图像”路径，down.jpg添加到“鼠标经过图像”路径，确定后，按F12键在IE中预览，会发现页面上正常显示的是up.jpg效果，当鼠标经过时图就变为down.jpg效果。2.4.1主题案例七:利用切割制作网站欢迎页面88第二章方法篇图2－65鼠标经过图像命令图2－66插入鼠标经过图像2.4.1主题案例七:利用切割制作网站欢迎页面89第二章方法篇图2-67允许阻止的内容注意：WindowsXP的安全保护会阻止这个网页效果的显示，需要手动允许，如图2－67。2.4.1主题案例七:利用切割制作网站欢迎页面90第二章方法篇

回到实例index.html中，如果需要设计主导航的鼠标翻转效果，也可以通过以上步骤去实现。得益于最初设计图的切片划分，index.html的导航实际上已经被分成了若干独立的图片，并且分别处于不同的单元格中。只需要针对导航上的这几张小图，使用Photoshop再制作一张稍有变化的相应图片作为翻转后的图片，并存储在images文件夹下即可。先把这几个单元格里的普通图片删去，如图2－68，使用鼠标翻转图片在每个单元格里重新插入一次，就完成了整个导航的鼠标翻转的制作。2.4.1主题案例七:利用切割制作网站欢迎页面91第二章方法篇图2－68删除导航图片2.4.1主题案例七:利用切割制作网站欢迎页面92第二章方法篇

制作这些导航小图片的翻转图片比较麻烦，有个简单的方法可以一次完成。首先用Photoshop打开包含切片信息的那张原始设计图（图2－69），把导航的样式做一些需要的变化（图2-70），然后设置保持不变，再存储为web所用格式到另外一个临时的地方（例如桌面上），修改存储的文件名（比如原来是index.html，现在index0.html）。这样就在桌面上得到了一个index0.html和一个images文件夹。2.4.1主题案例七:利用切割制作网站欢迎页面93第二章方法篇打开images文件夹，找到和原来导航的图片相应的图片（可以参看切片编号），全部选中并复制到站点website的images文件夹下，就一次性得到了所有需要的翻转图片。桌面上生成的index0.htm和images临时文件夹就可以删除了。最后不要忘了在导航图片上写上超链接，实现点击后跳转到相应的页面。2.4.1主题案例七:利用切割制作网站欢迎页面94第二章方法篇图2－69原导航文字样式图2－70稍作变化的样式2.4.1主题案例七:利用切割制作网站欢迎页面95第二章方法篇案例小结

切割要遵循一定的规律，切片要为网页中需要实现的功能服务，比如图2－59中的切片2、3、4、5、6就是为了做鼠标翻转效果服务的，而切片9可以用不同的图片来更换保证页面的新鲜感。切片13是一段文字，但在网页中以图片的形式存在不利于文字的编辑和更新，所以把它在单元格中删除，而在Dreamweaver中另外输入所需的文字。

2.4.1主题案例七:利用切割制作网站欢迎页面96第二章方法篇切片变为网页后分别处于不同的单元格中，凌乱的切片会导致表格过于复杂，不但难以修改，还会增加代码的数量。因此在切割出必要的需要实现功能的切片后，要尽量使剩下区域版面上的切片和实现功能的切片相配合，在水平和垂直方向上保持统一。

2.4.1主题案例七:利用切割制作网站欢迎页面97第二章方法篇

新手在做切片的时候经常会在切片和切片之间留有一些1个像素高的废切片，在切片做完后，要养成良好的习惯，清点切片的编号顺序，如果发现编号有缺失，肯定是产生了废切片，可以在相应的地方使用缩放工具放大到最大，找到并调整，以去除这些废切片。如图2－71，放大后如图2－72，发现切片8是1像素高的废切片，只需把切片3的下沿向下调整1个像素，切片8就消失了。2.4.1主题案例七:利用切割制作网站欢迎页面98第二章方法篇图2－71实际大小图2－72放大后效果2.4.1主题案例七:利用切割制作网站欢迎页面99第二章方法篇2.4.2主题案例八：制作网站的主框架页面案例要点—主框架页面的切割，二次排版，隐形表格。目标描述—了解主框架页面切割的目的，掌握切割的方法，进一步学会结合软件Photoshop和Dreamweaver的相关功能来完成网站制作。100第二章方法篇案例实现前一个案例中提到了网站的欢迎页面，它是整个网站的大门，比较侧重于视觉的美观，使浏览者可能被它所吸引，从而产生继续浏览网站的兴趣。目前大多数个人网站以及企业网站都会有类似此功能的欢迎页面。无论是什么类型的网站，都要传达给浏览者大量的信息内容，这就需要设计一个主框架页面，使相应栏目的内容能够方便地放入其中，又不失美观。其余栏目的页面都沿用这个主框架页面的设计风格，仅改变栏目的相应内容。2.4.2主题案例八：制作网站的主框架页面101第二章方法篇图2－73是一家小型企业网站的公司介绍栏目的截图，版面结构简洁清晰。图2－73/2.4.2主题案例八：制作网站的主框架页面102第二章方法篇先建立一个站点文件夹website1

图2－74是切割后的设计图，很简单，但是完全能满足需求。其中切片1是网站标题以及主导航所在的位置，切片2是与栏目相关的一张图片或者Flash，切片3是二级导航所在的位置，切片4是本页相关的内容，切片5是底部的修饰和版权信息，这样依据设计结构分割的方法，会使日后的更新和修改很便利。这种结构化切割后生成的页面成为了本网站的主框架页面，其他栏目都可由这个页面另存后修改相应的内各部分而得到。注意图2－74切割图中没有主导航和二级导航文字，因为设计师预计纯文字导航，是在Dreamweaver中完成的，因此在设计稿上不需要出现导航，只预留出相应的位置即可。2.4.2主题案例八：制作网站的主框架页面103第二章方法篇将切割后的设计图存储为web所用格式，存放到预先建立的站点文件夹website1中，命名为company.html。图2－74切片图2.4.2主题案例八：制作网站的主框架页面104第二章方法篇本案例在Dreamweaver中的后期处理图片设置为单元格背景

使用Dreamweaver打开company.html，选中整个表格，对齐属性设为居中，网页背景颜色设置为#0E539E。选中company.html中切片1所在的图片，也就是最上面的网站标题部分，在属性栏里可以看到这张图片的大小为719×82像素，然后在单元格中删除该图，将空出来的单元格设置为为719×82像素，并将该图设置为本单元格的背景图片，如图2－75。改动后，可以在这个单元格中嵌套一个右对齐的隐形表格，把主导航放进去。用同样的方法处理切片3，放入二级导航，使用CSS来设置超链接样式，如图2－76。2.4.2主题案例八：制作网站的主框架页面105第二章方法篇图2－75单元格属性图2－76插入导航注意：在单元格中删掉不需要的切片图片时尽量将单元格的宽和高设置为与该图片一致的尺寸，以防出现删掉图片后整个表格错开的问题。2.4.2主题案例八：制作网站的主框架页面106第二章方法篇对于内容二次排版

图2－74中切片4是用来放置相应栏目内容的，不同栏目内容的图文关系的变化会使对这部分的切割产生差异。company.html作为主框架页，不需要采取如图2－77那种连同栏目内容一起切割的方法，应该考虑到它的通用性和可扩展性，先把内容部分先作为整体切片，如图2－74。等生成网页后再对这部分进行二次切割，排版嵌入到页面中，下面看看具体如何实现。2.4.2主题案例八：制作网站的主框架页面107第二章方法篇图2-77连同栏目内容一起切割，不需要这样一次切割成，它会导致其他栏目的内容很难顺利地排入网页，缺乏通用性和可扩展性。2.4.2主题案例八：制作网站的主框架页面108第二章方法篇对图2－74中切片4的第二次排版，怎样最快、最简单地实现？使用Photoshop打开images文件夹中切片4的图片，按照图文关系再切割一次，注意图中分隔线条不要放在切片3内，如图2－78，以Web所用格式存储在站点文件夹website1中，文件名为company_04.html。使用Dreamweaver打开company_04.html，选中切片3所在部分，删掉图片并直接排入文字，以方便以后修改，注意文字的CSS样式，选中整个表格，Ctrl＋C复制待用。使用Dreamweaver打开company.html，删掉中间部分（图2－74中切片4）的图片，设置单元格背景为白色，Ctrl＋V粘贴刚才复制的表格。company_04.html这个页面在做完上述这几步后就可以从站点文件夹中删除了。这样我们就快速地完成了对页面内容的第二次排版。如果图文关系不复杂，大多时候只需要手工建立隐形表格并插入排版，不需要单独切割，这里提供的是通用的方法。2.4.2主题案例八：制作网站的主框架页面109第二章方法篇图2－78对内容的单独切割2.4.2主题案例八：制作网站的主框架页面110第二章方法篇预先定制网页的命名规则整个网站包含很多网页文件，我们需要按照一定的规则做好命名规划，而不应该在要保存制作的网页时临时命名。命名可以采用栏目的英文单词或者拼音，尽量不要使用中文。命名预先规划完成后，在做主框架页面时，就可以写出所有导航的超链接，这样就不需要重复写由主框架页面另存而产生的页面的导航超链接，减少了很多工作量。考虑到Internet的国际性，网站根目录内所有的文件和文件夹（包含图片、声音、动画等资源文件）都应尽可能使用英文和数字来命名。在制作网站前可以先画出站点的栏目分布图，并定好每个页面的名字，如图2－79。2.4.2主题案例八：制作网站的主框架页面111第二章方法篇

2.4.2主题案例八：制作网站的主框架页面112第二章方法篇案例小结切割主框架页面时，首先要把版面按标题、导航、内容、底部等分割开，使版面有较好的可扩展性。其次再考虑一些局部的功能性，比如栏目内容、Flash、鼠标翻转等，都尽量采取第二次排版嵌入。由于并不是一次切割到位，表格的嵌套使用频繁，所以对于表格、单元格知识的掌握和运用要求比较高，比如表格内的对齐关系、长宽的设定、背景的设定等。最后，CSS里可以专门对表格的边框进行定义，如果灵活运用，可以利用表格解决很多内容排版时需要的分隔线。2.4.2主题案例八：制作网站的主框架页面113第二章方法篇2.4.3主题案例九：完成整体网站制作案例要点—Flash、iframe、插件、查找和替换。目标描述—掌握一些目前在网页制作中比较流行的技术，最终完成网站制作。这个案例将涉及一些网站制作技术，这些技术并不是必需的，为了让学习者更多地了解网站制作技术，在这个案例的局部使用了一些和原网站制作不同的技术。如图2－80，这是一个网站主框架页面的截图，它根据设计的初衷以及版面的结构做了切割。切片1是网站的标题logo，切片3是Flash的主导航，切片4是当前栏目的标题，切片5是Flash的二级导航，切片6是一张会产生变化的图片，切片7是需要二次排版的相应栏目的内容，切片9和11是版权信息和联系方式。切片8、10、12都是辅助切片，完成切片后存储为web所用格式，命名为procss.html，保存在预先建立的站点文件夹website2中。114第二章方法篇本案例在Dreamweaver中的后期处理网页中的Flash技术近几年在一些韩国网站风格的网站上十分流行。本案例中主导航和二级导航都采用了Flash技术，Flash导航形式活泼，具有动感，在这里主要介绍如何在网页中运用Flash技术。Dreamweaver打开文件process.html，删除其中切片3和切片5的图片，将做好的和这两张图片等大且已在Flash内定义好超链接的Flash导航分别插入到对应的单元格中，如图2－81。图2－81插入Flash2.4.3主题案例九：完成整体网站制作115第二章方法篇无论是Flash导航还是页面中的其他Flash元素，都需要让Flash的背景和原版面周围的背景无缝连接。这可以通过将Flash中的背景色与原版面的背景色设置为同一种颜色来实现，如本案例。2.4.3主题案例九：完成整体网站制作116第二章方法篇再看一个网页的局部图2－82，中间的文字部分设计成Flash动画。如果在Dreamweaver中删除这块切片所在单元格中的图片，那么该处的背景图将不完整。当使用Flash来替代时，Flash的背景不能设置为某种单色，所以，在切割的时候应该先把设计图做成如图2－83的样式。删掉的切片4的图片可以作为Flash的背景使用，这样就实现了Flash和周围图片的无缝连接。或者也可以把这张图作为该单元格的背景图，然后将插入的Flash背景设置为透明。2.4.3主题案例九：完成整体网站制作117第二章方法篇图2－82局部设计图图2－83修改后的设计图2.4.3主题案例九：完成整体网站制作118第二章方法篇

图2－84添加参数选中插入的swf文件后，在“属性”里点“参数”，添加如图2－84所示的参数和值，这样就可以使这个Flash背景透明。2.4.3主题案例九：完成整体网站制作119第二章方法篇javascript小程序实现网页图片的变化网页设计不同于平面设计，可以使用一些技术让网页显得更有生气，如图2－85中间的这张图片，可以使用javascript小程序来实现。目前有两种比较流行的方案：一种是每次网页刷新随机从预先定义的图片中抽调一张显示；另一种是每隔一段时间自动变换图片显示。2.4.3主题案例九：完成整体网站制作120第二章方法篇方案1效果实现使用Photoshop软件做两张与切片6所在单元格内图片process_06.jpg等大的替换图，也存放在站点文件夹website2的images文件夹中，按顺序重新命名三张图片为process_06_1.jpg、process_06_2.jpg、process_06_3.jpg。使用Dreamweaver打开process.html，删除切片6所在单元格内的图片，设置空出来的单元格长宽和该图片相同。切换到代码视图，在这个单元格所在的代码位置，输入如图2－86所示的代码，再到IE中预览。这样每次刷新页面都会在三张图片中随机选取一张显示。2.4.3主题案例九：完成整体网站制作121第二章方法篇图2－86插入代码2.4.3主题案例九：完成整体网站制作122第二章方法篇方案2效果实现保留前面做的三张图片，在空单元格所在的代码处插入<imgsrc="images/process_06_1.jpg“name="img1"width="285"height="331"id="img1"style="filter:revealTrans(Transition=1,Duration=1.5)">，滤镜中的Duration是指切换时间（以秒计），本例设置的是1.5秒，若想使切换过程慢一些，可增大Duration参数的值。2.4.3主题案例九：完成整体网站制作123第二章方法篇在网页源代码的<head>与</head>之间插入如图2－87所示的这段javascript程序代码。在网页源代码的<body>标记中加上onload="start()"事件，使在网页载入时就显示动态切换效果。按F12键在IE中预览，三张图片每隔1.5秒会轮流分别显示一次。注意：所有图片的文件名和文件格式要统一，用序号区分，如本例所用图片的文件名（含相对路径）为：images/process_06_1.jpg、images/process_06_2.jpg、images/process_06_3.jpg。2.4.3主题案例九：完成整体网站制作124第二章方法篇互联网上提供了大量现成的能实现动态功能的javascript小程序，所以学习者即使没有掌握这种程序语言，也可以从中挑选合适的拿来使用。图2－87插入代码2.4.3主题案例九：完成整体网站制作125第二章方法篇栏目内容可扩展性地解决图2－80中切片7是放置每个栏目主要内容的地方，由于不同栏目的内容所占用的版面大小不同，因此切片7所在的单元格需要在不破坏版面美观的基础上在垂直方向上有一定的伸缩性，以适应每个栏目内容的变化，目前一般采取如下两种方法来实现。Ａ.使用背景图片让左右的单元格和栏目的单元格同时伸缩。这种方法要求在做主框架页设计图以及切割主框架页时都要考虑实现扩展的可能性。如图2－88，两个不同的页面中切片7所在的单元格在高度上有明显差异，而版面下方以及左右两边简单的底纹设计使得这种变化完全不会影响版面结构。2.4.3主题案例九：完成整体网站制作126第二章方法篇图2－88栏目内容不同2.4.3主题案例九：完成整体网站制作127第二章方法篇图2－80中切片10和12的存在也从技术上保障了切片7伸缩的可能性。用Dreamweaver打开process.html，若尝试在切片7所在单元格中放入超过原来高度的内容，例如原图片高为717像素，现在改成817像素，那么在IE中预览时就会发现版面遭到了一定程度的破坏，如图2－89产生了白色裂纹。2.4.3主题案例九：完成整体网站制作128第二章方法篇图2－89版面错开图2－90背景图片2.4.3主题案例九：完成整体网站制作129第二章方法篇Ｂ.iframe标记的使用iframe一般被称作内联框架，或者页中页。首先把本栏目切片7的内容单独做成一个页面，存储在站点文件夹website2中，命名process_iframe.html。注意将设置页面属性中的左边距和上边距值均设置为0，如图2－91。使用Dreamweaver打开process.html文件，删除切片7所在单元格内的图片，在代码视图下的该单元格位置插入<iframewidth="500"height="700"scrolling="auto"src="process_iframe.html"></iframe>。process_iframe.html是作为一个内联框架嵌在process.html中的，如果proceed_iframe.html中的内容超出了设定的宽500像素、高700像素的范围，就会自动产生滚动条。2.4.3主题案例九：完成整体网站制作130第二章方法篇图2－91内容单独做成一个网页2.4.3主题案例九：完成整体网站制作131第二章方法篇插件的使用和很多软件一样，Dreamweaver也可以使用外部插件来实现一些复杂的功能。在安装该软件时，可以附带安装MacromediaExtensionManager插件管理器，打开软件后所有已安装的插件将被列出，可以对其进行管理，如图2－92。2.4.3主题案例九：完成整体网站制作132第二章方法篇图2－92插件使用2.4.3主题案例九：完成整体网站制作133第二章方法篇查找和替换通过对主框架页的另存并修改，可以生成其他栏目的页面，如果发现在制作网站的过程中出错，例如主导航上公司简介本来应该链接到profile.html，由于笔误写成了porfile.html，因为所有的页面都是由另存产生的，所以它们都需要修改。通过Dreamweaver“编辑”菜单中的“查找和替换”的功能，可以很方便地实现一次性全部修改，如图2－94。查找范围选择“整个当前本地站点”或者指定到站点文件夹，搜索项选择“源代码”，查找href=“porfile.html”替换为href=“profile.html”，2.4.3主题案例九：完成整体网站制作134第二章方法篇图2－94查找和替换选择“替换全部”。于是，Dreamweaver会在整个站点所有文件的源代码中查找到“porfile.html”并自动替换为“profile.html”。2.4.3主题案例九：完成整体网站制作135第二章方法篇案例小结网站的制作主要有两个步骤：一是在Photoshop等软件中设计网站的欢迎页、主框架页以及二级框架页，在这个过程中除了需要遵循一般的平面设计规律，还需要考虑网页功能的实现；二是把这些设计好的版面利用Photoshop软件中的切片工具生成网页，在Dreamweaver等网页设计软件中编辑这些页面，并由此产生其他相关的网页。Dreamweaver软件中的层、时间线、行为、插件，以及Flash、Javascript、Applet、ActiveX、Shockwave等技术的使用，使网页成为与浏览者交互的平台。2.4.3主题案例九：完成整体网站制作136第二章方法篇2.5网站的发布2.5.1网站的本机测试在网站发布之前对站点进行本机测试是一个必不可少的步骤，特别是对大型或访问量大的网站。网站的本机测试包括目标浏览器的测试和站点链接的检查。137第二章方法篇测试目标浏览器在制作网页时，既可使用如图像和段落文本等所有浏览器都支持的元素，也可使用如样式和层等只有较新浏览器才支持的元素。Dreamweaver中的“检查目标浏览器”能对文档中的HTML进行测试，检查是否有目标浏览器不支持的标签或属性。步骤如下：选择“文件”菜单下“检查页”子菜单中的“检查目标浏览器”，如图2-95。在默认状态下，Dreamweaver会自动检查浏览器的兼容性，如果发生兼容问题，状态栏中的检查浏览器兼容