第6章-网页设计

6.1科技公司网站首页设计6.2

技能训练——经典留白的网站主页设计6.3

本章小结6.4

课后习题——突出视觉效果的网页设计

目录/Contents第章6网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。我们平常所浏览的网站都是由一张张的网页组成的，在这些网页中文字和图片是主要的组成元素。网页是一个文件，在进行网页设计时，将组成网页的各类元素按照一定的规律排列，就能获得一个完整的网页。本章将为读者详细地介绍不同类型的网页设计思路与制作过程。通过本章的学习，读者能够掌握网页设计的精髓，学会制作各种不同的网页效果。课堂学习目标●了解网页设计思路●科技公司网站首页设计●经典留白的网站主页设计●突出视觉效果的网页设计科技公司网站首页面设计经典留白的网站主页面设计4网页设计的工作目标是通过使用合理的颜色、字体、图片、样式对页面进行美化设计，好的网页设计，可以起到提升企业品牌形象的作用。网页设计在功能限定的情况下，要尽可能给予用户完美的视觉体验，它在设计的时候需要明确设计页面的目的和用户需要，从而做出更加美观、实用的网站页面。6.1.1设计思路本实例制作的是为科技类公司所设计的一个网站首页，根据公司的文化特点，选择了较简洁的页面布局方式，在具体的制作过程中，结合了Photoshop和CorelDRAW软件，对页面中的图片和文字进行处理，完成了富有设计感的首页设计。1．创作关键字：不规则四边形四边形是由不在同一直线上的四条线段通过依次首尾相连而形成的封闭图形。不规则四边形是平面设计中较为常见的几何形状，它可以横向、纵向或倾斜排列，不同的矩形可以产生不同的视觉效果。本例中即运用了大量的四边形，把倾斜和纵向的多个四边形通过错位排列的方式组合在一起，如图6-1所示，增加了画面的活泼性，与公司人性化的企业氛围交相辉映。由于只采用单一的四边形会显得单调，因此在页面中还为绘制的不规则四边形添加上投影，并把合适的图片放置在对应的四边形中，使画面变得更加丰富。图6-12．创作思维流程图6-2图6-3图6-43．设计效果【实例学习目标】结合Photoshop和CorelDRAW软件完成公司网站首页的设计，最终效果如图6-5所示。图6-5【Photoshop功能应用】用“色彩平衡”命令调整颜色，用“曲线”“色阶”命令调整亮度，用“色相/饱和度”命令变换色彩，用剪贴蒙版合成图像。【CorelDRAW功能应用】用“文本”工具输入文字，用“矩形”工具绘制圆角矩形。【实例素材】随书光盘\素材\06\01~04.jpg。【实例源文件】随书光盘\源文件\06\科技公司网站首页设计.cdr。6.1.2创作步骤◎CorelDRAW应用1．绘制并规划整体布局图6-6图6-7图6-8图6-9图6-10图6-11图6-12图6-13图6-14图6-15图6-16图6-17图6-18图6-19图6-20图6-21图6-22图6-23图6-24图6-25图6-26图6-27图6-28图6-29图6-30图6-31图6-32图6-33图6-342．制作页面导航条图6-35图6-36图6-37图6-38图6-39图6-40图6-41图6-42图6-43图6-44图6-45图6-46图6-47图6-48图6-49图6-50图6-51图6-52图6-53图6-54图6-55图6-56图6-573．添加不规则的四边形图6-58图6-59图6-60图6-61图6-62图6-63图6-64图6-65图6-66图6-67图6-68图6-69图6-70图6-71图6-72图6-73图6-74图6-75图6-76图6-77◎Photoshop应用4．调整建筑色彩图6-78图6-79图6-80图6-81图6-82图6-83图6-84图6-85图6-86图6-87图6-88图6-89图6-90图6-91图6-925．增强天空层次图6-93图6-94图6-95图6-96图6-97图6-98图6-99图6-100图6-101图6-102图6-103图6-1046．调整海景图像颜色图6-105图6-106图6-107图6-108图6-109图6-110图6-111图6-112图6-113图6-114图6-115图6-1167．增强植物的颜色图6-117图6-118图6-119图6-120图6-121图6-122图6-123图6-124图6-125图6-126图6-127图6-1288．将图像导入到网页图6-129图6-130图6-131图6-132图6-133图6-134图6-135图6-136图6-137图6-138图6-139图6-140图6-141图6-142图6-143图6-1449．在网页中添加文字信息图6-145图6-146图6-147图6-148图6-149图6-150图6-151图6-152图6-153图6-154图6-15510．绘制图形，丰富效果图6-156图6-157图6-158图6-159图6-160图6-161图6-162图6-163图6-164图6-165图6-166图6-167网页中往往会包含大量的图片和文字信息，如何编排这些内容，是每个平面设计师都需要考虑的。在进行网页设计时，可以尝试在页面中采用留白的处理方式，这样可以使页面变得更加简单，也更能突出要表现的主题思想。下面介绍利用留白方式设计与制作一个家装公司的网站主页的方法，效果如图6-168所示。图6-1681．设计效果【技能训练素材】随书光盘\技能训练\素材\06\01~03.jpg。【技能训练源文件】随书光盘\技能训练\源文件\06\