平面设计
作者： water 相关文档:
网站设计制作开发漫谈(ILLUSTRATOR/Swift3D)
网站设计制作开发漫谈(Dreamweaver/Css)
11.21，增加了”网站设计制作开发漫谈(ILLUSTRATOR/Swift3D)
“部分。11.19，在PS里面将自己完成的平面图用PS的切刀切成"DW表格布局"后,就可以在DW里面进行网站的"DW表格布局"工作了．今天就来说说DW方面的.具体内容见下边-二，DW表格布局、整站“通用CSS”的添加、“动画留位”、“文字留位”等(DREAMWEAVER)
11.18，简单整理写了一下前期网站首页风格设计的思路-一，网站首页面风格以及内页模板风格的设计(PHOTOSHOP为主),关于内页模板风格的设计会在首页基本完成后再奉献给大家,我建议大家在做网站整体风格设计的时候也分开来做,因为首页的风格设计关系的整体网站的效果,而在PS设计、DW布局、LOGO以及部分首页小动画的设计、制作(PS、FLASH、SWISHmax、SWISH3D)之后，再进行内页风格设计(针对首页设计风格)，会使整站风格在第一感觉以及详细的看完整站后都会有一个风格的“主线”贯穿其中，当然，这只是大部分情况，内页多风格设计以及个性化设计不在此例．
做网站设计制作以及程序编写这行也很长时间了，现在所就职公司也有一定的规模，很喜欢我所在的技术部门做网站的流程，由于我所在公司体制的关系，我所面对的客户以及给他们所设计制作的网站都是中小型企业，其实很早就想写出来与大家分享，我会分几个大的方面说一下。
一，网站首页面风格以及内页模板风格的设计(PHOTOSHOP为主)
在我看来这就是平面设计中的分支WEB平面设计，所有设计工作均在PS里面进行，目前国内网站设计的主分辨率还是800*600和1024*768这两种居多，如果要设计成前者，那么在PS里面的长宽应该是778*425，这样在前者分辨率下打开网页后就是一个上下左右不带滚动条的“满IE（浏览器装有很多插件的会影响显示，此长宽数值是在安装“干净IE”的情况下）”页面，后者在设计时候要将宽度控制在1004*625比较好，当然，宽度是为了没有左右滚动条，高度是一个最小值，如果>425或者>625那么自然就会出现上下的滚动条。这里我就以在PS里面设计一个1024分辨率的网站界面为例(以本站设计为例)：
1、新建1004*625的空白文档
2、进行颜色的搭配以及素材图片的添加修饰
3、切图,分配好具体的"图块"以备在生成HTML后在DW里面编辑
4、利用PS的“存储为WEB所用格式”进行网页（htm、html）文件的输出
图片格式选择上根据"存储为WEB所用格式"中左下角的"图片格式,生成大小来判断用什么格式,色调少的用GIF,色调多的用JPG,品质可以定在70左右.
5、保存为html或者htm的网页文件，生成的切片图片默认会放在网页文件同级目录下的images目录里面．
二，DW表格布局、整站“通用CSS”的添加、“动画留位”、“文字留位”等(DREAMWEAVER)
网上关于DREAMWEAVER使用的文档很多，其实这些专业性的软件各人有各人的用法，但是有一点，每个人所用到的功能都只是软件所有功能的一小部分，其实软件越做越大，如果可以再有针对性的分成几个部分就好了，比如DW就可以出“网页排版专用”“可视化代码编写专用”“可视化CSS编写专用”，哈，个人见解，回到正题。
当网页在PS中输出成HTM或者HTML格式以后，就会在你所设定的输出文件夹出现一个index.htm或者index.html加上一个图片文件夹，这里就以生成index.htm为例，PS输出的默认的网页文件名字就是你的PSD源文件的名字+htm/html，而切成分片的图片都放在index.htm同级下的images文件夹下，而图片的命名默认是以你所生成网页的文件名，这里面假如是index.htm，那么images文件夹下的各个切片图片的命名就是index_01,index_02……等，当然，这段中我所说的都属于PS输出设置里面，如下面两图所示。在里面可以详细设置PS输出WEB格式文件的各个选项，正常不用这一步，用默认设置就可以了：）
DW开始，哈~~~，打开DW，首先新建一个站点,当然，前提你要记住你从PS里面输出的网页文件夹的位置（不记住是不可能的）。直接进行高级设置里面，如图所示位置为“站点名称”和“选择站点所有位置”，就是PS输出的网页文件夹。其它默认，这样，站点就建完了，假设我建的站点是“找找吧”。
完成上面这步“建站点”的工作后，就可以在右边的“文件”栏里面看到自己这个站点的文件了，如下图：分别是站点名称和站点的位置以及资源管理器式的站点文件目录。
然后双击index.html文件打开，就会看到一个已经自动生成的在一个大的表格里面的网页文件，如下图：
下面我们要做的首要工作是将这个大表格根据自己的布局拆分成几行单独的表格，由于我这个网站的布局影响，我将其拆成上下两部分。为什么呢？因为在浏览器打开一个网页是，是在装载完成一个整的表格<table>才显示出来，如果将整个表格大的方面分成上下两部分的话，那就可以在打开这个页面的时候上面的部分装载完成后立刻显示，而不会因为下面的部分需要装载时间长一些而影响了上面的优先显示出来的效果。所以大家在看大的“门户”页面时候，比如蓝色，是从上到下一块一块出来的。
具体拆分方法如下，以我这个页面为例，拆分要参照PS里面的切片布局来拆，数几行几列，我这个页面先做上面的表格，是6块，可以用一个3*3的表格来布局，第3列和第2行合成一个表格。就OK了。如下图：
在代码布局空口里面应该是这种效果：
而PS直接输出没有经过“DW表格布局”的代码是这种效果：
啊，今天就到这儿吧，DW这个部分不太好叙述，大家有不明白的地方请跟贴留言，多多谅解，下次咱聊一下整站“通用CSS”的添加、“动画留位”、“文字留位”,那就是DW的下篇喽。
待续~~~~~~~~~
| Tags (标签) | 引用通告地址 (0) |
| Tags: Photoshop | Dreamweaver |
 http://www.gogogo8.com/ver2/Blog/trackback.asp?tbID=157 http://www.gogogo8.com/ver2/Blog/trackback.asp?tbID=157&CP=GBK |
早晚会统一标准的
，欢迎大家提出宝贵意见
