网上关于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的下篇喽。
待续~~~~~~~~~
出处:找找吧
责任编辑:moby
上一页 网站设计制作开发漫谈 [1] 下一页 网站设计制作开发漫谈 [3]
◎进入论坛网站综合、网页制作版块参加讨论
|