《第11章企业网站的设计与制作.docVIP

第四部分 精美网页设计实战篇 书到第11章，很多读者一看，觉得只是一些小例子的制作，而并没有涉及到整个网页的制作。实际上，第一部分的色彩设计与风格创意运用了大量的网页实例来说明各种色彩及配色对网页的风格创意的影响以及对浏览者的视觉影响；而第二部分的网页元素设计篇则侧重于对网页至关重要的元素的设计，让读者在这些简单易学的实例中去体会前几章节的理论知识，同时也培养读者对色彩的感觉，通过这一部分，很多读者应该找到一些设计的感觉了吧；第三部分的网页布局美化篇主要是让读者对Dreamweaver软件操作有所熟悉，能够独立实现一些网页制作的简单操作；到了第四部分，也就是本书最精彩的部分了，在这一部分中，作者将会讲解2个完整的网页设计制作的实例。所谓更多的知识还来自于自我实践和对他人作品的鉴赏与总结，相信读者们在自己亲自尝试、实践后能取得进步。 第11章 企业网站的设计与制作 这一章介绍的是中小型企业的网站实例制作过程。对于中小型企业，信息量不会太多，但又不能像个人主页那么天马行空，往往会显得平凡却又不失特色，如图11-1-1所示就是作者制作的放飞思维创意设计公司网站的首页。 图11-1- 1 放飞思维创意设计公司网站的首页 11.1 创建背景 背景对于这个网页来说太重要了，三种色彩的搭配使网页典雅而不失活泼，而每种色彩所占的页面比例也不能忽视，这关系到整个网页的平衡哟。 1. 打开Photoshop，按【Ctrl+N】，新建一个宽“800px”，高“600px”的文件，将它命名为“放飞思维创意设计公司”。 2. 在【背景】图层上填充草绿色（R204，G204，B102）；新建图层，将其命名为“蓝色”，在页面左边创建“50px×600px”的矩形选区，填充蓝色（R0，G51，B102）；再次新建图层，将其命名为“米色”，在蓝色背景右侧创建“560px×600px”的矩形选区，填充米色（R255，G255，B204），如图11-1-2所示。 图11-1- 2 3. 双击【米色】图层的缩览图，调出【图层样式】对话框，勾选【外发光】复选框，做如图11-1-3所示的设置，页面效果如图11-1-4所示。 图11-1- 3 【外发光】设置 图11-1- 4 至此，背景就创建完毕了，下面我们就要开始制作导航了。 11.2 制作导航 除了用Flash制作的绚丽的导航条以外，现在的静态网页越来越倾向于简介的导航条了，甚至有些网站直接用代码实现在单色背景上写栏目文字，而放弃用图片来装饰，这样做的好处是网页下载速度快，并且在栏目文字有改动时，能够方便及时改写。这个网页的栏目文字同样是在Dreamweaver里添加的，但是栏目的背景却是图片。 1. 新建图层，命名为“白色虚线”，制作如图11-2-1所示的虚线，制作虚线的具体操作步骤已经在前面的章节中叙述过了，这里的点划线高“2px”、宽“2px”、间隔“2px”。把【白色虚线】图层调整到【米色】图层的下面，使其被外发光遮盖。 图11-2- 1 制作白色虚线 2. 给【白色虚线】图层添加矢量蒙版，将前景色和背景色设置成白色和黑色，用【渐变工具】在矢量蒙版上由左到右拉出渐变，效果如图11-2-2所示。 图11-2- 2 添加矢量蒙版 3. 新建【小三角符号】图层，制作栏目文字前的暗红色（R153，G51，B0）小三角符号，放大后如图11-2-3所示。 图11-2- 3 制作小三角符号 接下去是最重要的，就是代表公司形象的Logo了。 11.3 设计Logo 这里的Logo并非为这个网页特别制作的，只是作者为了方便，在因特网上找的素材。读者在独立设计企业网站时要切忌盗用已有的Logo设计，而要为企业量身定做一个只属于它的Logo。 1. 打开“放飞思维Logo.psd”，将【Logo】图层复制过来，并移动到合适的位置上，如图11-3-1所示。 图11-3- 1 添加Logo 2. 用暗红色（R153，G51，B0）的方正粗倩简体在Logo左边写上企业名称，其中可以逐个调整字体大小和行间距，使其如图11-3-2所示。 图11-3- 2 添加企业名称 3. 新建【蓝色虚线】图层，按照之前制作白色虚线的方法制作蓝色虚线，这里不用添加矢量蒙版。然后用黑体在虚线下面写上企业标语，如图11-3-3所示。 图11-3- 3 添加蓝色虚线和企业标语 首页已经基本上完成了，可以看出这个网页的标准色吧，那么信息文字、链接样式以及内页的设计都要围绕着标准色进行，这样设计出来的网页才不会给人混乱的感觉。那么下面我们就要在Dreamweaver 8中对网页进行布局和美化，添加了栏目文字和版权信息以后这个首页就完整了。