伴随信息技术的进步, 网站设计成为时下网络平台中人与人交流必不可少的宠儿, 但要完成网站制作作品就必不可少其他软件的支持, 如Flash动画制作, Fireworks图像处置, Photoshop图片制作及处置等。怎么样结合Photoshop来设计出有自己风格的页面是本文所要研究的课题。1、Photoshop和Dreamweaver的容易介绍1.Photoshop的介绍Photoshop是一款由美国发布的用来处置图像、图形的软件, 简称PS。它不仅能够处置出你所需要的图片, 还可以参考我们的需要动手绘画源于己喜欢的图像、图形, 譬如画笔工具、钢笔工具与图形工具, 用鼠标单击选中, 在自己新建的画布上描绘出你喜欢的图像, 然后选择合适的颜色, 注意色彩要均衡, 单击油漆桶工具或选择菜单栏中编辑|填充命令即可, 如此, 容易的一幅画作就完成了, 最后你可以参考自己对图像的需要进行图层样式的选择, 单击菜单栏中图层|图层样式命令选择需要的选项就能了。2.Dreamweaver的介绍Dreamweaver简称Dw, 是一款集网站设计和网站管理于一身的网页编辑器, 也是人与人之间一种视觉的交流方法。一份精美的网页中包括的元素海量, 包含图像、图形、文字、动画等, 将这类元素进行规范的排版与适当的布局, 就需要用Dw中的CSS样式、表格制作等海量功能来辅助完成。需要提及的是Dw中的编辑基本上都是靠代码来完成的。2、Dw中网站布局和实例制作1.Dw中的页面布局原则(1) 色彩要搭配适合, 网页在颜色搭配上要遵从以下几个方面:渲染主题深色调, 突出环境浅色调, 简洁大方白色调, 对比鲜明黑色调, 端庄奢华紫色调, 浪漫婉约粉色调。(2) 元素要相得益彰, 有的网站页面元素不少, 尤以图片文字为首。文字过多会叫人感觉乏味无趣, 图片过多又会感觉低俗, 为了预防视觉疲累, 应该将图片和文字适合搭配。(3) 图片要处置合理, 在页面布局中不少图片都不符合需要, 有的色彩过于鲜艳, 有的像素过低模糊不清, 有的仅需一部分图片。针对这类问题, 大家都可以用PS轻松处置。2.实例制作(1) 打开Dw软件, 选择新建栏目下的HTML模板, 进入后选择管理站点|站点|新网站建设点, 名字为梦回唐朝且保存在E:/myweb的根文件夹下。注意文件命名时要使用字母或数字, 以便各网页之间进行有效的链接。(2) 处置需要的图片和文字存入myweb/images文件夹中, 图片处置用PS软件, 主要处置图片的大小、色彩及像素值。譬如网页的logo图片、导航条、锚点图标、分割图形等都可依据需要处置。在这里先介绍该网站主页的logo图片的制作合成, 第一打开PS软件, 新打造一个3025cm的画布, 然后分别打开一幅扇子图片和一幅背景图片, 可单击工具栏中的迅速选择工具将扇面抠下;处置背景图非常简单, 仅需用裁剪工具裁出中间的部分。最后返回新建的画布, 将扇面和背景图分别放入两个图层中, 再处置文字梦回唐朝, 主如果用图层样式, 这里不再详细说明。应该注意的是图片格式须保存为网页通常格式.jpg.png或.gif, 以便浏览器迅速下载。(3) 插入所需表格, 将已经处置好的图片、文字、图标、导航条等进行规范适当的布局排版, 然后调整表格的长度和宽度。(4) 保存之后依据浏览器的预览成效进行健全调整页面。3、借助PS为网站布局在Dw中布局页面会有的耗时, 既要代码输入, 又要调整表格搭配、背景颜色, 相比较而言, 在PS中将页面布局完成, 然后将它插入网站制作中更容易有效, 而且可以事先搭配好颜色。1.PS布局原则(1) 配色要清爽亮丽, 使用一个主色调, 其他颜色使用不可与主色反差太大, 以防导致视觉错乱。(2) 布局应合理规范, 不可随性布置, 叫人看着不舒服, 要疏密有度, 和谐统一。(3) 突出主题, 对比鲜明, 不可让不重要的文字或图片占用很多篇幅, 以至于忽视了主题, 应将要紧信息呈目前视觉的中心, 叫人一看容易明了。2.实例操作(1) 打开PS并新建一个1024768像素的画布, 文件名为主题相册, 颜色为白色, 分辨率为72像素\英寸。(2) 借助图形工具描绘出所需要的页面成效图, 单击菜单栏中的图层|图层样式选择适合的样式, 让图像看着有立体的成效或其他成效。(3) 保存图片为.jpg格式, 以便察看其成效。(4) 为了保证图片在网站制作中更好地适用于表格, 可以单击菜单栏中视图|锁定切片命令, 将图片切割成符合网页的logo、导航等多个小块进行保存, 保存时用存储为web形式, 以便浏览器更快地下载。注意切割时应准确, 使页面成效更佳且易在网站制作中进行布局和表格处置。(5) 在Dw中新网站建设点, 插入表格后将已保存的图片导入页面中, 设为背景图片, 然后健全调整页面。(6) 在这个基础上可以加入自己喜欢的图片, 完成后保存并在浏览器中预览。
