占位图像 用户ID: 密码: 验证码: 登录 注册     占位图像
 
教育168搜索

a
频道信息
学前教育 基础教育
小学 初中
高中 高等教育
心理学 机械工程
园林 IT教育
办公软件 Director
Authorware 图形图象
FIREWORKS CORELDRAW
Maya PhotoShop
AutoCAD 3D
操作系统 Windows xp
Windows Vista Linux
Windows 2003 Windows 2000
FreeBSD 注册表
网站制作 FLASH
Dreamweaver CSS教程
装修设计 LightScape
装修风水 方案设计
英语 商务外语
素质教育 法制教育
企业培训
最新更新
·用Dreamweaver M
·Dreamweaver实用小
·Dreamweaver未必了
·Dreamweaver若干技
·Dreamweaver制作和
·Dreamweaver中空格
·Dreamweaver8对网
·用Dreamweaver制作
·Dreamweaver经典插
·Dreamweaver简单描
·通过Dreamweaver设
·学习Dreamweaver8
·Dreamweaver制作复
·用Dreamweaver8在
·利用Dreamweaver8
·Dreamweaver实例:
·Dreamweaver CS
·Dreamweaver插入F

点击排行
·使用ewebeditor上传
·DreamweaverCS3
·使用SoftArtisans
·巧用Dreamweaver轻
·扩展Dreamweaver:
·Dreamweaver8轻松
·在DW中插入Flash的参数
·Dreamweaver实用小
·Dreamweaver基础:
·Dreamweaver入门:
·如何用Dreamweaver
·用DreamweaverMX
·Dreamweaver CS
·Dreamweaver:从网
·用Dreamweaver8在
·Dreamweaver经典插
·关于Dreamweaver乱
·Dreamweaver插入F

Dreamweaver:从网页模版切图到网页生成全攻略
发布日期:2006-4-9  浏览:521次
关键字:

  鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK,让我们开始:

  step1:在Photoshop中打开设计稿,如下图

  选择工具板上的slice切片工具,先大刀阔斧的切上一番!技巧:大面积的色块单独切成一块,尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示:

  step2:在PhotoShop中选择file-saveforweb...来输出,这里要注意一些参数的选择:

  我们来看看红线所标识的1,2,3部分,将1所示的切片工具选中,然后点选2所示的图片,在3所示的地方选择色值,如果色彩单一可以选择尽量小的色值位;(为什么要这样??)答案:这样会大大减小文件的大小,同时又能比较好的保持图片的色彩;设置好后点OK输出文件,这里的文件包括了一个htm和images文件夹,如图:

  这里候你的页面才算完成了一半,接下来在Dreamweaver里建立站点:

  step3:定义站点:

  在图示左边的sitename中为站点起一个名字,如example
然后在下面的localrootfolder中选择我们刚才导出的站点所以的文件夹;站点建好后在sitemap中我们看到:

  (为什么要建立站点?)建立站点可以使我们养成一种很好的习惯,就是把一个网站所包含的文件,文件夹有条理的放在一起,同时我们很容易的将这个站点移动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没人强求你,我在事际工作中就遇到这样的同事,没有习惯为页面建立站点,当然后果的要麻烦少少了)

  step4:重新制作页面表格(为什么?)通常在photoshop中直接导出的htm文件是不可以直接使用的,因为有些地方在实际运用时要作调整,比如有动态文字的地方,我们需要在页面中输入页不是使用图片,那么图片就要把它拿走,如果你在直接生成的htm中拿走不想要的图片再加上你想要的东西,你们发现页面将变得惨不忍睹,整个页面可能完全乱了套!
好了,先来分析一下导出的htm文件吧:

  根据这个页面表格所示,我们在新的页面中建立一个三行一列的表格:

  注意,把cellpadding,cellspacing,border三项值设为0,这个很重要;因为图片中我们不希望看到空隙和错位;然后再在第一行中插入一个三行两列的表格,并合并左边三列的表格,如图:

  插入表格的时个要注意对比原htm文件中的内容,思考为什么这样做;
接下来在第二行中插入一个二行二列的表格,按上面的方法合并左边的格子,并在右边格子的第一行插入一个一行五列的表格如图示:

  最后在下面一行插入一个三行二列的表格,并将图示中1,2外分别合并:

  最后得到的页面应该是这样的:
  好了,现在我们的任务就是往表格里面加图加内容了!这里就不再赘述了!(其实已经赘述得够多了!)

  还要提醒大家注意的是在加图片和内容时,表格单元格的align,valign这两个属性非常重要,要不遗余力的运用它们来帮你做事!OK,自己实践一下!

关键字:

相关信息 用户评论
·用Dreamweaver MX创造网页鼠标样式
·Dreamweaver实用小技巧
·Dreamweaver未必了解的5个小技巧
·Dreamweaver若干技巧
·Dreamweaver制作和套用模板的技巧
·Dreamweaver中空格问题的探讨
·Dreamweaver8对网站文件进行检查和整理
·用Dreamweaver制作网页时关于文字自动换行的小技巧
·Dreamweaver经典插件下载
·Dreamweaver简单描述制作网页的基本步骤
·通过Dreamweaver设计网页时组织CSS的建议
·学习Dreamweaver8了解掌握CSS层叠样式表
·Dreamweaver制作复杂交换图像
·用Dreamweaver8在网页中插入Flash视频
·利用Dreamweaver8掌握网页代码基本格式
·Dreamweaver实例:随机播放背景音乐
·Dreamweaver CS3 新功能描述
·Dreamweaver插入Flash添加透明或其他参数

 

更多评论

验证码:
验证码