第13章 综合应用--网页设计与制作

综合应用--网页设计与制作最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，作为初学者，那么最好明白网页布局的基本概念。网页设计元素由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1002x600。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。1.页面尺寸什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。2.整体造型文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。3.文本页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。4.页脚图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。5.图片综合应用--网页设计与制作网页布局的方法网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：1.纸上布局法2.软件布局法许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。准备一若干张白纸和一只铅笔，你要设计一个时尚站点。1.纸上布局法*尺寸选择：目前一般1024X768的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以1024X768的分辨率为准。先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。造型的选择：考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。(图3)图3.jpg是我们从图1.jpg和2.jpg得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为图3.jpg增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。(图4)*增加页头：页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。((图5)*增加文本：图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。(图6)*增加图片：经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。在上面的草图基础上我们通过Photoshop软件来进行布局网页制作。2.软件布局法01打开Photoshop软件，新建空白文件，如图Z4-1所示。图Z4-1图层状态图Z4-2图层状态02使用钢笔工具绘制如图Z4-2所示路径。03使用鼠标右键单击路径建立选区如图Z4-3所示，参数如图Z4-4所示。图Z4-3建立选区Z4-4建立选区对话参数04保持选区不改变，新建图层，得到图层1如图Z4-5所示图Z4-5图层状态图图05对选区填充一个灰色，这一步操作中灰色只是一个布局，颜色可以随意设置，效果如图Z4-6所示。图Z4-6填充灰色图Z4-7绘制路径图Z4-8建立选区图Z4-9图层状态图06同样的操作方式，在画布右边使用钢笔工具绘制路径如图Z4-7所示。07对所绘制的路径建立选区如图Z4-8所示，保持选区不丢失，新建图层，图层状态如图Z4-9所示08对图层2填充灰色，最终效果如图Z4-10所示。图Z4-10填充灰色效果图09使用圆角矩形工具在画布上面绘制路径，绘制效果如图Z4-12所示。图Z4-11使用圆角矩形工具图Z4-12绘制圆角矩形10依次绘制多个路径，并填充一个不一样的灰色，最终效果如图Z4-13所示。图Z4-13画布布局效果11选择图层1，按住【Ctrl】单击图层1的缩略图，载入图层1选区，对弧形选区填充颜色#9bc1e8。12复制图层1，得到图层1副本，同样的方式再填充一个浅一点的颜色#ccdff2，13复制图层1副本，得到图层1副本2，同样的方式再填充一个浅一点的颜#e7edf714将3个图层顺序调整如图Z4-14所示，并使用变形工具对形状进行调整，效果如图Z4-16所示。图Z4-14图层状态图图Z4-15复制一次调整后效果图图Z4-16复制两次调整后效果图15同样的操作方式，选择图层2，对其填充填充颜色#ccdff2，效果如图Z4-17所示。图Z4-17调整后画布效果16打开素材人.psd，将其导入画布中，使用水平翻转，调整人物的方向，效果如图Z4-18所示。图Z4-18加入人物素材17制作导航，输入文字后隐藏背景颜色块图层，效果如图Z4-19所示。图Z4-19导航文字18使用圆角矩形工具，填充蓝色#4866aa，这一步为导航添加一个二级菜单，效果如图Z4-22所示。图Z4-21使用圆角矩形工具图Z4-22绘制圆角矩形后效果图Z4-20圆角矩形工具参数设置19使用文字工具，在二级菜单中输入文字，效果如图Z4-23所示。图Z4-24画布右上角快速导航文字图Z4-23添加二级导航文字20同样的操作方式，在画布的右上角添加快速导航文字，效果如图Z4-24所示。21使用圆角矩形工具，绘制矩形并填充颜色#afcded，效果如图Z4-25所示。图Z4-25为快速导航添加背景22填充颜色后，可以看到两个蓝色的色块有重叠，所以在这一步添加一个白色线，突出点立体感，做一个小细节处理，效果如图Z4-26所示。。图Z4-26细节处理添加一条白线23打开素材“小图片.psd”，使用复制粘贴命令，将3个图片分别放置于3个色块上面，效果如图Z4-27所示。图Z4-27添加小图片后效果24添加完图片后，把背景色块隐藏掉。25打开素材“文字.psd”，导入画布中，复制两次并调整文字的显示方式，效果如图Z4-28所示。图Z4-28为小图片配上文字介绍26打开素材“logo.psd”，为网页添加一个LOGO，放置于左上角。如果觉得右边太单调还可以将LOGO部分复制一次改变颜色放置于右方，最终效果如图Z4-29所示。图Z4-29加入LOGO后整体效果