《电子商务网站建设与管理》-第4章构建静态HTML网页

4.1网页设计原则与工作流程

4.1.1网页设计原则1.明确设计任务网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。客户的要求，也属于设计的任务，只有明确了设计的任务之后，才能接下来考虑如何完成这个任务。2.设计的实现设计的实现可以分为两部分。第一部分为站点的规划及草图的绘制；第二部分为网页的制作。第一部分可以在纸上或计算机上完成，在此过程中需要将站点的栏目内容规划好，并将各个网站页面的排版布局以及用色事先在纸上或计算机中绘制好；第二部分则是通过第一部分构思的内容创建出站点首页以及其它页面的设计图，然后将这些设计图表现到网页当中。下一页返回4.1网页设计原则与工作流程3.色彩的运用不同的色彩代表了不同的情感，有着不同的象征意义。这些象征意义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果就不同。例如：绿色和金黄、淡白搭配，可以产生优雅、舒适的气氛；蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛；红色和黄色、金色的搭配能渲染喜庆的气氛；而金色和栗色的搭配，则会给人带来暖意等。设计的任务不同，配色方案也应随之不同，考虑到网页的适应性，应尽量使用网页安全色。下一页上一页返回4.1网页设计原则与工作流程4.造型的组合在网页设计中，主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素，画面上的所有元素可以统一作为画面的基本构成要素——点、线、面来进行处理，在一幅成功的作品里是需要点、线、面的共同组合与搭配来构造整个页面的。通常可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、节奏、韵律、归纳、变异、特写、反射等，它们都有各自的特点，在设计中应根据具体情况，选择最适合的表现手法，可以突出页面上的重要元素，突出设计的主题，增强美感，让浏览者在感受美的过程中领会设计的主题，从而实现设计任务。造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，还能将网页上的各种元素有机地组织起来，它甚至还可以引导浏览者的视线。下一页上一页返回4.1网页设计原则与工作流程5.页面布局页面布局是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循统一、连贯、分割、对比以及和谐五大原则。6.网页的优化在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会直接影响页面的浏览速度和页面的适应性，从而影响浏览者对网站的印象。网页的优化包括文字的适用性、图像的优化、网页表格的优化、网页屏幕的适用性等。总之，网页优化应本着这样的原则：尽量使网页浏览速度提高，减小网页的体积，不造成浏览者浏览网页的视觉疲劳，以及优化的网页可以在大部分浏览器中正常显示。下一页上一页返回4.1网页设计原则与工作流程4.1.2网页设计工作流程1.分析与策划在创建网站之前，首先需要对网站进行整体分析，分析网站的功能及目的，确定网站的用户群，然后依据分析内容来确定网站的域名、网站的空间、所需使用的网站技术以及设置网站栏目及子栏目等内容。2.资料的收集依据网站的栏目及类型，搜集建站所需的资料。3.网页的布局规划根据上面的网站栏目规划及收集的资料，对网站中各个栏目的布局方式做个规划，绘制到纸上或计算机中，作为网站设计的草稿使用。下一页上一页返回4.1网页设计原则与工作流程4.网站页面设计根据上面修正过的草稿，通过Fireworks、Photoshop等图像处理软件设计出网站页面的正式布局界面，然后将网站界面切片为网页可以使用的各个图像文件，并制作出所需的Flash动画等网站所需的设计素材。5.编辑网页依据前面整理的资料以及设计的界面、切片的图像与制作的网页素材等网页编辑软件，整合为编辑用户可以浏览的网页形式。6.程序编写根据网站的功能以及设计的页面，设计网站的数据结构，并通过程序语言编写网站的功能与网站操作后台，对于网站的程序编写完全可以通过Dreamweaver完成。对于纯HTML网页则不需要程序的编写，可以跳过这一步。下一页上一页返回4.1网页设计原则与工作流程7.调试与优化在交付网站前，必须对网站进行全面的测试与优化，以减少日后发生错误的可能。8.网站发布将制作完成的网站发布到互联网上，并对发布的网站进行宣传。4.1.3精彩网页赏析制作一个色彩协调、创意新颖的网页，是广大网站网页设计者最渴望达到的目的，但是在最初学习网站设计时往往掌握不好色彩搭配、页面布局以及栏目设置的技巧，这时设计者可以研究一些精彩网站的制作案例，通过对精彩网站的学习可以快速提高学习者的设计能力。下面给出一些不同类型的网站，如图4-1所示。上一页返回4.2网页色彩与布局1.网页色彩的作用对于网页设计而言，网页色彩有以下三个作用。（1）体现风格——突出主题。（2）划分区域——统一风格。（3）吸引视线——加深印象。2.色彩的属性自然界中有许多种色彩，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的等。其中最基本的有三种RGB（红、绿、蓝），其他的色彩都可以由这三种色彩调和而成，我们称这三种色彩为“三原色”。一般来说，色彩可以分为无彩色、有彩色和独立色三大类。无彩色是指黑色、白色和灰色；而有彩色是指除了黑、白、灰之外的纯色，暗色、浅色或浊色，如粉红、暗红和鲜红色；至于独立色，则是指金色和银色。任何一种彩色都具备色相、明度和纯度三个属性。而无彩色黑、白、灰只有明度属性。下一页返回4.2网页色彩与布局（1）色相（Hue），指的是色彩的相貌、名称。比如说红色、绿色、黄色等都代表了不同的色相。（2）明度（Brightness），也叫亮度，指的是色彩的明暗、深浅程度。明度越大，色彩越亮。明度越低，色彩越暗。（3）纯度（Saturation），也叫饱和度，指色彩的纯净度、鲜艳程度。纯度高则色彩纯，鲜亮；纯度低则色彩暗淡，含灰色。3.色彩的构成色彩构成可以理解为色彩的作用，是在色彩科学体系的基础上，研究符合人们知觉和心理的配色。配色有三类要素：光学要素（明度、色相、纯度），存在条件（面积、形状、肌理），心理因素（冷暖、进退、轻重、软硬、朴素华丽）。设计的时候，可以运用逻辑思维选择合适的色彩搭配，产生恰当的色彩构成。最优秀的配色范本是自然界里的配色，因此我们可以通过观察自然界里的配色，再经过理性的提炼最终获得我们所需要的最佳效果。下一页上一页返回4.2网页色彩与布局4.2.2色彩与心理不同的色彩会给浏览者不同的心理感受。在色环中，从红色到黄色的范围会使人感到温暖，主要包括红、橙、黄等色，称为暖色。由蓝绿到蓝紫范围的色会使人感到寒冷，主要包括蓝绿、青、蓝、蓝紫等色，称为冷色。而黄绿、紫等色属于不冷不暖的中性色。在网页中，为了营造出温馨祥和的气氛，多采用大面积的暖色来实现；而一些严谨、敏感的信息多以冷色表现。色彩具有轻重感。明度高的色彩让人感觉轻，明度低的色彩让人感觉重。在明度相同的条件下，冷色一般比暖色感觉略轻。在网页色彩设计时，轻色用在网页上部，重色用于下部，比较符合人们的视觉习惯。下一页上一页返回4.2网页色彩与布局

色彩还具有强弱感。色彩的强弱感也称为色彩的华丽质朴感或鲜艳浑浊感。一般来说，纯度高、明度适中的色彩感觉华丽；纯度低、明度过高或过低的色彩感觉质朴。在网页设计时，合理地运用强弱不同的色彩，会形成动静得当、鲜浊适度的画面效果。例如，以暗色为主的网页，会给人以阴暗、消极、悲伤的印象，适度加入一些鲜艳的颜色，可以调节页面气氛，获得更佳的效果。每一种色彩都具有各自的情感效果和象征意义，能引发浏览者强烈的生理或心理共鸣。（1）红色——是一种激奋的色彩，有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉。下一页上一页返回4.2网页色彩与布局（2）绿色——介于冷暖色彩的中间，有和睦、宁静、健康、安全的感觉。它与金黄、淡白搭配，可以产生优雅、舒适的气氛。（3）橙色——也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。（4）黄色——具有快乐、希望、智慧和轻快的个性，它的明度最高。（5）蓝色——是最具凉爽、清新、专业的色彩。它与白色混合，能体现柔顺、淡雅、浪漫的气氛（如天空的色彩）。（6）白色——给人洁白、明快、纯真、清洁的感受。（7）黑色——给人深沉、神秘、寂静、悲哀、压抑的感受。（8）灰色——给人中庸、平凡、温和、谦让、中立和高雅的感觉。同时，每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、阴森。下一页上一页返回4.2网页色彩与布局4.2.3网页色彩设计原则知道了色彩的概念和心理感觉，在网页设计中如何合理地运用色彩呢?显然，在网页色彩设计时，要遵循下列原则：1.色彩的独特性网页色彩的选择与搭配要与众不同，使大家对你的网页印象深刻。2.色彩的鲜明性网页的色彩要鲜艳，容易引起浏览者的注意力。尤其在同类网站中，网页的色彩不但要符合此类网站的用色特点，还要有其独到之处。网页设计是一种艺术活动，只有按照内容决定形式的原则，大胆进行艺术创新，才能设计出既符合网站主题，又有一定艺术特色，风格独特、个性鲜明的网页。下一页上一页返回4.2网页色彩与布局3.色彩的合适性网页色彩要与所表达的内容相融合。另外，还要针对浏览者的类型、社会背景、心理需求来选择网页的色彩。比如，政府部门的网页风格应有庄重感，呈现宁静、严肃、高雅的氛围，以冷色调为宜；电子商务类网页可以通过红色、橙色、黄色等暖色调的搭配，呈现温馨、和煦、热情的氛围；蓝色给人的心理印象是崇高、深远、广大而睿智，为高科技企业网站所钟爱；保健类的网站不宜大面积地采用刺激性强的大红、黄和橙等色彩，因为它们易造成人们心理上的紧张感和恐慌感，而绿色象征生命与希望，给人健康、安全的感觉，适宜作为保健类网页的主色调。下一页上一页返回4.2网页色彩与布局4.色彩的易读性人们从物理、生理、心理、化学等多角度对色彩进行研究后发现，色彩的美存在于各色彩的相互关系中，这种相互关系就是色彩的对比与和谐。色彩的对比包括明度对比、纯度对比和色相对比。最能引人注目的也是运用最为普遍的色彩对比，是色相对比中的互补色或冷暖色的对比。色彩的和谐是指色彩在对比关系中能给人造成既鲜明又协调的视觉感受。网页色彩设计还要注意文字与背景色彩的明暗对比，文本要易读，图像要易于识别，以使浏览者在浏览大量网页信息的时候，减少屏幕刺激，减轻视觉疲劳。5.色彩设计的延续性网页色彩要保持用色的延续性。虽然网页的信息会不断更新，网页的版式也会定期修改，但网页色彩的基调和风格一旦形成后，不宜大幅或频繁地改换，应保持一定的延续性，这样才能使浏览者迅速识别且印象深刻。但为了保持新鲜感、提高吸引力，也应小范围地对网页色彩的明度、纯度进行适当的调整和变换。下一页上一页返回4.2网页色彩与布局6.色彩的联想性不同的色彩会使人产生不同的联想。如白色使人想到雪花，黑色使人想到黑夜，蓝色使人想到天空等。在网页设计时，多运用具有美好联想的色彩，可以使网站流露出别样的气息。4.2.4网页色彩的设计方法1.确定网站的主色调及辅助色网页中可以采用多种色彩，但一个网页中只能有一个主色调。主色调就好比乐曲中的主旋律，对网页起着主导作用。主色调主导着整个网页的风格和意境，而辅助色的面积虽小，却起着缓冲和强调的作用。辅助色能让页面有生气、有趣味，使主色调流畅。辅助色与主色调搭配合理，可使整个页面特色鲜明，下一页上一页返回4.2网页色彩与布局

引人注目。网页的辅助色可用主调色的邻近色，也可用对比色。一般情况下，可选择一两种辅助色配合使用，整个网页的色彩最好控制在三种颜色之内。网页也可以采用单色调，以形成一种醒目的风格，需要注意的是，应在网页的局部采用少量小面积的对比色，以达到丰富页面色彩的效果。在色调的使用方面，采用高饱和度的色彩，如黄色、红色作为网页的主色调，能展现活泼、乐观、希望、充满生命力的气氛，具有强烈的视觉冲击力；采用具有中、低明度和饱和度的复合色，如浅灰、蓝灰、暗绿、枣红等作为网页的主色调，既不炫目，也不黯淡，对眼睛的刺激适中，可营造严肃、优雅、稳重、富有内涵的氛围；以粉彩等柔和色调为主色调的网页，则可营造明朗、轻松、欢快的气氛，如粉红、柠檬黄、天蓝、新绿等。下一页上一页返回4.2网页色彩与布局2.确定文字、配图的色彩效果3.网页色彩的配置主调色、辅助色、文字色、底色、图形色都是网页设计中不可缺少的色彩，但网页的色彩品种不宜过多，否则会过于花哨，喧宾夺主。主调色、辅助色、文字色等不一定要采用不同的色相，有时网页色彩简单明了更能突出主题，产生舒适的视觉效果。合理选配网页色彩，形成主色调为主小色块为辅、既对比又调和的色彩画面，会赋予网页以活力和个性，有助于吸引更多网民的视线。4.正确使用图像及其色彩图像在网页中起着画龙点睛的作用，不但能装饰页面，还能表达风格与情感。但网页如果图片过多或色彩使用不当，会导致浏览、下载的速度变慢，从而使网页的点击率下降，所以要正确使用图像及其色彩。下一页上一页返回4.2网页色彩与布局4.2.5网页色彩搭配技巧网页给人的第一印象来自视觉冲击，确定网页的色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到浏览者的情绪，一般来说，适合于网页标准色的颜色有蓝色、黄/橙色、黑/灰/白色3大色系。（1）红色。色感温暖，性格刚烈而外向，对人刺激性很强。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，还是一种容易造成人视觉疲劳的颜色。①在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。②在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。③在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。④在红色中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。下一页上一页返回4.2网页色彩与布局（2）黄色。性格冷漠、高傲、敏感，具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。①在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。②在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。③在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象，其色性也变的成熟、随和。④在黄色中加入少量的白，其色感变得柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。下一页上一页返回4.2网页色彩与布局（3）蓝色。色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广阔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。①如果在橙色中黄的成分较多，其性格趋于甜美、亮丽、芳香。②在橙色中混入少量的白，可使橙色的感觉趋于焦躁、无力。下一页上一页返回4.2网页色彩与布局（4）绿色。具有黄色和蓝色两种成分的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、满足、优美的色。①在绿色中黄的成分较多时，其性格就趋于活泼、友善，具有幼稚性。②在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。③在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。下一页上一页返回4.2网页色彩与布局（5）紫色。明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。①在紫色中红的成分较多时，具有压抑感、威胁感。②在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。③在紫色中加入少量的白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。下一页上一页返回4.2网页色彩与布局（6）白色。色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其他任何色，都会影响其纯洁性，使其性格变得含蓄。①在白色中加入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。②在白色中加入少量的黄，则成为一种乳黄色，给人一种香腻的印象。③在白色中加入少量的蓝，使人感觉清冷、洁净。④在白色中加入少量的橙，有一种干燥的气氛。⑤在白色中加入少量的绿，给人一种稚嫩、柔和的感觉。⑥在白色中加入少量的紫，可诱导人联想到淡淡的芳香。下一页上一页返回4.2网页色彩与布局4.2.6网页布局1.页面尺寸由于页面尺寸与显示器大小及分辨率有关，网页的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800×600的情况下，页面的显示尺寸为780×428个像素；分辨率在640×480的情况下，页面的显示尺寸为620×311个像素；分辨率在1024×768的情况下，页面的显示尺寸为1007×600个像素。从以上数据可以看出，分辨率越高，页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。下一页上一页返回4.2网页色彩与布局2.整体造型什么是造型？造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其他形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式、规则，如很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型的商业站点为显示它们的权威性，常以三角形为页面整体造型；菱形代表着平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作多数是结合多个图形加以设计，而其中某种图形的构图比例可能占的多一些。下一页上一页返回4.2网页色彩与布局3.页眉的作用页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面更多设计和整个页面的协调性。页头常放置站点名字的图片、公司标志以及旗帜广告。4.文本的显示文本在页面中出现都是以行或者块（段落）出现，它们的摆放位置决定着整个页面布局的可视性。过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。下一页上一页返回4.2网页色彩与布局5.页脚页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。6.图片的使用图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键，而你的布局思维也将体现在这里。7.多媒体很重要除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更加重要。上一页返回4.3构建网页操作过程4.3.1网页布局的形式原理1.变化与统一2.对称与均衡3.节奏与韵律4.对比与调和5.比例与适度6.重复与交错下一页返回4.3构建网页操作过程4.3.2网页布局的常见类型1.“国”字型2.拐角型3.标题正文型4.左右框架型5.上下框架型6.综合框架型7.封面型8.Flash型9.变化型下一页上一页返回4.3构建网页操作过程4.3.3版面布局的基本步骤1.草案新建页面犹如一张白纸，没有任何表格、框架或约定俗成的东西，可以尽可能地发挥你的想象力，将想到的“景象”画上去，这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能地多画几张，最后选定一个满意的作为继续创作的脚本。2.粗略布局在草案的基础上，将你确定需要放置的功能模块。功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等安排到页面上。注意：这里我们必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的排放。下一页上一页返回4.3构建网页操作过程3.定案定案是将粗略布局精细化、具体化。而在布局过程中，我们可以遵循的原则有以下几个。（1）正常平衡——亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定、诚实、信赖的效果。（2）异常平衡——即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。（3）对比——所谓对比，不仅利用色彩、色调等技巧来表现，在内容上也可涉及古与今、新与旧、贫与富等对比。（4）凝视——所谓凝视是利用页面中人物的视线，使浏览者产生仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。下一页上一页返回4.3构建网页操作过程（5）空白——空白有两种作用，一方面，空白给人留下想象的空间，另一方面，也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。（6）尽量用图片解说——此法对不能用语言说服或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者更多的心理因素。4.3.4版面布局的技巧1.版面构成构成是将造型按视觉效应、视觉力学和精神力学等原则组成，具备美好形态的造型。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。在这些形式里，都有着如下的部件。点：点是圆形的，但这是不正确的，实际上只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点，无论什么形状都下一页上一页返回4.3构建网页操作过程

可以。线：点集合在一起就形成线。面：一个平面。体：一个物体，一般是指物体占据的空间，有三维形状。点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。2.几何形代表的意义（1）圆形：运动及和谐美；（2）矩形：单纯而明确、稳定；（3）平行四边形：有向一方运动的感觉；（4）梯形：最稳定，令人联想到山；（5）正方形：稳定的扩张；（6）正三角形：平稳的扩张；（7）倒三角形：不安定、动态及扩张、幻想。下一页上一页返回4.3构建网页操作过程3.视觉中心的条件我们在日常生活中所看到的东西，都是由于形与形、图片与底色的相互关系。图形之间，图底之间，正是由于对比产生差异而被我们所感知和接受。图与底色的视差越大，图形越清晰，对视觉的冲击力越大。那么，平面上有那么多的东西，怎么才能够确定它是否是最主要的呢？请看：易于成为“视觉中心”的条件如下：（1）居于画面中心；（2）垂直或水平的比倾斜更易成为中心；（3）被包围；（4）相对于其他图形较大的；（5）色感要素强烈；（6）熟悉的图案，如果这件东西我们很熟悉，则一定会以它为焦点的。下一页上一页返回4.3构建网页操作过程4.体现页面的形式美网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。必须通过页面的合理安排，例如文字的条理清楚、流畅、整体感，图片色彩饱满、简约，使“形式美”得到体现。（1）从网站内容上进行排版。（2）从网页的布局形式上来看。（3）关于第一屏。（4）有关导航栏的位置。上一页返回4.4制作简单的图文混排页面

下面，首先以一个简单网页为例，叙述一下制作过程，网页如图4-3所示。1.插入标题文字进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，单击属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。2.设置文字的格式选中文字，在上图属性面板中将字体格式设置成默认字体，可任意更改大小字号。并选中“B”将字体变粗。3.设置文字的颜色首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。下一页返回4.4制作简单的图文混排页面4.设置网页的标题和背景颜色点击“修改”菜单选“页面属性”。系统弹出“页面属性”对话框，如图4-5所示。5.插入图像选择以下任意一种方法：（1）使用插入菜单（2）使用插入栏（3）使用面板组“资源”面板下一页上一页返回4.4制作简单的图文混排页面6.输入欢迎文字在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎浏览……”然后，利用属性面板对文字进行设置，最后保存页面。一个简单的页面就这样编辑完毕了。7.预览网页在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为“index.htm”。下一页上一页返回4.4制作简单的图文混排页面4.4.1用Dreamweaver处理文档处理文档包括文档的创建、文档的打开和存储、定义文档属性、定义文档标题等项内容，是网页设计的最基本操作。1.创建空白文档创建空白网页的操作方法有以下几种。（1）启动Dreamweaver，在“开始”页单击HTML，系统会自动创建一个空白文档。（2）如果Dreamweaver已经启动，可以用组合键“Ctrl+N”创建一个空白文档。（3）如果Dreamweaver已经启动，可以用菜单创建一个空白文档，方法如下：“文件”菜单，“新建”——在“新建文档”对话框中单击“常规”选项卡，类别选“基本页”，在基本页列表框中选“HTML”，单击“创建”按钮。下一页上一页返回4.4制作简单的图文混排页面（4）如果构建了本地站点，则应在站点中创建新文件，然后双击文件名，打开文件进行内容编辑。这种方法最符合Dreamweaver的网页设计流程，建议使用这种方法，如图4-9所示。2.打开现有文档打开现有文档可采用以下几种方法。（1）在Windows窗口中右击选中的网页文件，然后在快捷菜单中选“使用DreamweaverMX编辑”，选中的文件将在Dreamweaver打开。（2）在Dreamweaver窗口→“文件”菜单→“打开”→在“打开”对话框中选文件→单击“打开”按钮。下一页上一页返回4.4制作简单的图文混排页面3.保存和关闭文档文档的保存有“保存”和“另存为”，当关闭文档时也会提示用户保存文档。（1）保存文档。保存文档的方法有以下两种。①打开“文件”菜单→选“保存”选项→指定保存位置→为文件起名→选保存类型→单击“保存”按钮。如果当前文档是新文档，则保存文档后新文档默认名字将由“无标题文档”变为在保存操作中新起的名字。②另存文档：“文件”菜单→“另存为”→在弹出的窗口中指定保存位置→为文件起名→选保存类型→单击“保存”按钮。下一页上一页返回4.4制作简单的图文混排页面4.设置页面属性页面标题、背景、文本和链接颜色都是文档的基本属性。通过“页面属性”对话框可以对页面属性进行设置。在属性工具栏上单击“页面属性”按钮，或点击工具栏上的修改→页面属性，再或者直接使用快捷键“Ctrl+J”即可。4.4.2创建文本和设置文本格式1.插入文本要向Dreamweaver文档添加文本，可以直接在Dreamweaver“文档”窗口中输入文本，也可以剪切并粘贴，还可以从Word文档导入文本。下一页上一页返回4.4制作简单的图文混排页面2.编辑文本格式网页的文本分为段落和标题两种格式。在文档编辑窗口中选中一段文本，在属性面板“格式”后的下拉列表框中选择“段落”，把选中的文本设置成段落格式。“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，同时文字全部加粗。另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。3.设置