利用Photobhop＋Dreamweaver制作网页的方法与技巧.pdfVIP

ISSN 1009-3044 E—mail：eduf@CCCC．net．cn ComputerKnowledgeandTechnology电脑知识与技术 http：／／www．dnzs．net．ca Vo1．6，No．2January2010．PP．445—446 Te1：+86—551—5690963 5690964 利用Photo~shop+Dreamweaver制作网页的方法与技巧 周纯玉．詹劫 (大连水产学院现代教育技术与网络中心，辽宁 大连 116023) 摘要 ：该文介绍 了通过 Photoshop和 Dreamweaver相结合 ，轻松创作完美网页的方法与技巧 。 关键词 ：布局 ；切片：Photoshop：Drearrlweaver 中图分类号 ：TP393 文献标识码 ：A 文章编号 ：1009—3044(2010)02-445-02 TheMethodandTechniqueofUsingPhotoshopandDreamweavertoM akeW ebPage ZHOUChun—yu，ZHANfie (DalianFisheriesUniversity，Dalian116023，China) Abstract：Thisarticleintroducessomemethodsandtechniquesaboutmakingthewebpage．ByusingPhotoshopandDreamweaver，the webpagewillbeveryfine． Keywords：composition；shce；photoshop；dreamweaver 。 随着互联网的广泛应用 ，网页制作 已成为热 门，一个好 的网页既要 内容翔实，又要视觉新颖 ，还要布局合理 ，既要把 内容的层次 性和空间性突出显示出来 ，又要使页面合理流畅、环环相扣。网页制作的工具有很多，但是利用Photoshop和Dreamweaver配合使用 制作 出来 的网页布局更规范，页面更精美 ，因此深受网页制作者的推崇 。 1网页布局的原则 网页布局是决定网站美观与否的一个重要方面 ，通过合理的、有创意布局，才可以把文字、图像等 内容完美地展现在浏览者前 面。最好先用笔和纸将构思的草 图画下来 ，不需要很详细 ，只需要画出页面 的大体结构作为创作样本即可。布局的原则如下： 1)对称均衡 ：对称是一种美 ，能给人稳定感 ，但过度的对称就会给人一种呆板、死气沉沉的感觉，对称形式构成 的网页具有重心 稳定和庄重整齐的美感，均衡的网页生动活泼富于变化，具有变化美。 2)对比协调 ：对 比使网页形式生动、个性鲜明，避免平淡无奇；对 比协调则给人以柔和、亲切的美感。 3)比例适度 ：确立 良好的比例关系，并非黄金分割，但一定要适度、协调，才能使整个页面和谐、匀称明朗。 4)疏密交错 ：网页上重复的形式过多，会使页面显得呆板，容易使浏览者产生视觉疲劳 。因此不要整个网页一种样式，要通过留 白、空格、改变行间距 、字间距等变化来打破页面呆板、平淡的格局 。 5)节奏韵律：韵律是使节奏富有律动感的变化美，将点 、圆形、线条等沿一定的曲线重复排列时，就会产生韵律感，使画面显得 轻盈而富有灵气 。 2在Photoshop中布局网页 I)首先在 Photoshop中建一个 1001x550像素的文件，这样在 1024x768这种常规分辨率下，不会出现水平滚动条和垂直滚动条 (长度 1001像素是作者在多次实验中总结出的数据)。 2)一般情况下页面分头、中、底三个部分，如果看到别人的版面想借鉴的话，那就做个截图，然后把截图放在最底层 ，作为最初 的草图。如果不想用别人的版面，最好也还是找一个同类网站借鉴一下。 3)参考线是布局网页的有效工具，先用横参考线将 网页布局分成几大版块 ，然后再用竖参考线将每个板块按思路分为几个小 板块 ，最后整体观察一下。需要注意的是网站的Logo和导航条等都是事先设计好 的，有固定大小 ，在做这些区域时尺寸一定要按照 这些元素尺寸设计，不能有丝毫差错，否则进入Dreamweaver整合时，则可能出现空边或撑开表格的现象。 4)导航文字的特殊字体要在 Photoshop中直接添加上去，字体的颜色设置要考虑到整个页