论文部分内容阅读
摘要：本文介绍了使用Photoshop软件中的切片工具切割网页直观图的具体方法和应注意的有关事项，因每切割一个方框就是一个表格，所以可以结合Dreamweaver软件来轻松布局网页表格。
关键词：切片；Photoshop；Dreamweaver；表格
中图法分类号：TP317文献标识码：A文章编号：1009-3044(2007)16-31179-02
Using Photoshop and Dreamweaver to Layout Web Table Easily
LI Jun
(Xinyang Vocational&Technical College, Xinyang 464000, China)
Abstract:This article introduces some methods and precautions about the slicing of the web page pictures by using the slice tool in software photoshop,because every sliced frame is a table, you can combine the software Dreamweaver to layout web table.
Key words:slice; photoshop; dreamweaver;table
表格是网页制作中最重要得元素，它在定位网页中的文字及图片的位置时起到绝对性的作用。不会熟练的使用表格是做不好网页的。
任何一个网页都包含大量的表格，难道这些表格都是设计者一点点设计出来的吗？其实不然，这里有一个简单的方法，可以用Photoshop(以下简称PS)和Dreamweaver(以下简称DW)来轻松布局网页表格。
1 在Photoshop中用切片切割网页排版格局图
首先在Photoshop中建一个760×500像素的文件，打开“文件”菜单下的“新建”，在弹出的对话框中填写尺寸，设计出网页效果图，并将其保存为index_design.jpg（如图1所示）。
图1 index_design.jpg设计草图
接下来观察此图，准备切图。
1.1切割图片
在切割图片时要用到切片，它的目的是将一张大图片切成多个小的图片，以加快下载速度[1]。首先在面板中选择切片工具（如图2），先不要急着切，观察一下规律，分清何时使用图片，何时使用背景色，何时使用背景图片，据此将图切为9部分（如图4）。
注意以下方面，首先观察到在图4中第1、3和5部分是纯色，所以单独切成一块，为了减小DW页面的体积，这部分可以设为无图像，选择“切片选择工具”（如图2），在此色块上双击，打开对话框（如图3），切片的类型设为：无图像[2]。到DW中仅建立表格，设定表格高度与实际图像相符，此后全部使用背景色完成，在WEB页中的表现形式仅为一行代码：例如第1部分代码为＜tr＞＜td bgcolor=”#B42401＞＜/td＞＜/tr＞。
其次，图4中第8部分切成了3×16大小的图片，便于背景图案的填充，在WEB页中也为一行代码：＜tr＞＜td background=”images\middleback.jpg”＞＜/td＞＜/tr＞
最后，切割完成后，使用放大镜观看切割有无重复的地方，如有重复的地方，则进行微调，方法如下：选择“切片选择工具”（如图2），在需要调整切片的图像上双击，打开对话框（如图3），对切割图片的高度或宽度进行微调1像素或2像素。
图2 切片及切片选取工具
图3 切片选项对话框
图4 对首页草样进行切片
需要注意，将切分好的图片保存。点击“文件”/“存储为web所用格式”，在弹出的对话框中输入“文件名”，例如：保存路径在”f:\dream\”下， 文件类型为“仅图像”。（切出的图像一般都存放保存在images文件夹中，没有特殊需要不用更改。）最终输出的图片存储在了f:\dream\images里[3]。
总之，在切割的时候主要凭个人的经验和感觉，要多次尝试，对于同一幅画，每个人切图做出的网页不一定都是一样的表格。下面就进入网页制作阶段。
2 将DW与PS结合进入网页制作阶段
2.1 在DW软件进行操作
首先打开DM软件，先建立一个站点，执行“站点”/“新建站点”，在打开的对话框中写入站点名称，如“实例1”，设本地文件夹：如“f:\dream\”。
其次，执行“文件”/“新建”，新建一个网页文件，选择“修改”/“页面属性”，单击后面的浏览，选择“f:\dream\images\”文件夹下的图像（即图1）作为跟踪图像，同时调整透明度60%。跟踪图像是在网页中将原来的平面设计稿作为辅助的背景，这么一来，用户就可以方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。接着整理窗口界面，执行“修改”/“页面属性”，将其左、右、上、下边距设为0；可将标尺隐藏，执行“查看”/“标尺”[4] 。
最后观察图4，插入4行1列的表格，宽度为760像素，表格的高度在属性面板中设置；接着在第1行中插入1行4列的表格，参照跟踪图像，分别在第2列和第4列插入存储在f:\dream\images里的图片，在第1列和第3列填入背景色； br＞ 在第2行中填入背景色，色彩值可从PS中获得；在第3行中插入1行2列的表格，在第1列中插入存储在f:\dream\images里的图片，在第2列中插入背景图片（注意：在表格中插入图片之前，要将光标定位为垂直顶端）；在第4行中插入1行2列的表格，插入存储在 f:\dream\images里的按钮图片，将其复制3个，并在此单元格中插入背景图片。
按照以上的方法就可以轻松布局网页表格。这里举了一个简单的例子，大家可以举一反三，设计出优秀的网页。
参考文献：
[1]丛书编委会.计算机图形图像处理——Photoshop CS2中文版[M].北京:清华大学出版社,2006.
[2]Linux宝库.Photoshop切片结合Dreamweaver拼接教程[EB/OL].http://www.goltime.com/articleview/2006-10-23/article_view_265_3.htm,2007-02-09
[3]罗辉.网页图片优化和分割的一种方法[J].中国医学教育技术,2004,18(5):303-305
[4]网络.网页制作——第三课文档与图像[EB/OL].http://www.tc168.net/362118/index.asp?xAction=xReadNews&NewsID=656,2005-01-26.
注:“本文中所涉及到的图表、公式注解等形式请以PDF格式阅读原文。”
关键词：切片；Photoshop；Dreamweaver；表格
中图法分类号：TP317文献标识码：A文章编号：1009-3044(2007)16-31179-02
Using Photoshop and Dreamweaver to Layout Web Table Easily
LI Jun
(Xinyang Vocational&Technical College, Xinyang 464000, China)
Abstract:This article introduces some methods and precautions about the slicing of the web page pictures by using the slice tool in software photoshop,because every sliced frame is a table, you can combine the software Dreamweaver to layout web table.
Key words:slice; photoshop; dreamweaver;table
表格是网页制作中最重要得元素，它在定位网页中的文字及图片的位置时起到绝对性的作用。不会熟练的使用表格是做不好网页的。
任何一个网页都包含大量的表格，难道这些表格都是设计者一点点设计出来的吗？其实不然，这里有一个简单的方法，可以用Photoshop(以下简称PS)和Dreamweaver(以下简称DW)来轻松布局网页表格。
1 在Photoshop中用切片切割网页排版格局图
首先在Photoshop中建一个760×500像素的文件，打开“文件”菜单下的“新建”，在弹出的对话框中填写尺寸，设计出网页效果图，并将其保存为index_design.jpg（如图1所示）。
图1 index_design.jpg设计草图
接下来观察此图，准备切图。
1.1切割图片
在切割图片时要用到切片，它的目的是将一张大图片切成多个小的图片，以加快下载速度[1]。首先在面板中选择切片工具（如图2），先不要急着切，观察一下规律，分清何时使用图片，何时使用背景色，何时使用背景图片，据此将图切为9部分（如图4）。
注意以下方面，首先观察到在图4中第1、3和5部分是纯色，所以单独切成一块，为了减小DW页面的体积，这部分可以设为无图像，选择“切片选择工具”（如图2），在此色块上双击，打开对话框（如图3），切片的类型设为：无图像[2]。到DW中仅建立表格，设定表格高度与实际图像相符，此后全部使用背景色完成，在WEB页中的表现形式仅为一行代码：例如第1部分代码为＜tr＞＜td bgcolor=”#B42401＞＜/td＞＜/tr＞。
其次，图4中第8部分切成了3×16大小的图片，便于背景图案的填充，在WEB页中也为一行代码：＜tr＞＜td background=”images\middleback.jpg”＞＜/td＞＜/tr＞
最后，切割完成后，使用放大镜观看切割有无重复的地方，如有重复的地方，则进行微调，方法如下：选择“切片选择工具”（如图2），在需要调整切片的图像上双击，打开对话框（如图3），对切割图片的高度或宽度进行微调1像素或2像素。
图2 切片及切片选取工具
图3 切片选项对话框
图4 对首页草样进行切片
需要注意，将切分好的图片保存。点击“文件”/“存储为web所用格式”，在弹出的对话框中输入“文件名”，例如：保存路径在”f:\dream\”下， 文件类型为“仅图像”。（切出的图像一般都存放保存在images文件夹中，没有特殊需要不用更改。）最终输出的图片存储在了f:\dream\images里[3]。
总之，在切割的时候主要凭个人的经验和感觉，要多次尝试，对于同一幅画，每个人切图做出的网页不一定都是一样的表格。下面就进入网页制作阶段。
2 将DW与PS结合进入网页制作阶段
2.1 在DW软件进行操作
首先打开DM软件，先建立一个站点，执行“站点”/“新建站点”，在打开的对话框中写入站点名称，如“实例1”，设本地文件夹：如“f:\dream\”。
其次，执行“文件”/“新建”，新建一个网页文件，选择“修改”/“页面属性”，单击后面的浏览，选择“f:\dream\images\”文件夹下的图像（即图1）作为跟踪图像，同时调整透明度60%。跟踪图像是在网页中将原来的平面设计稿作为辅助的背景，这么一来，用户就可以方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。接着整理窗口界面，执行“修改”/“页面属性”，将其左、右、上、下边距设为0；可将标尺隐藏，执行“查看”/“标尺”[4] 。
最后观察图4，插入4行1列的表格，宽度为760像素，表格的高度在属性面板中设置；接着在第1行中插入1行4列的表格，参照跟踪图像，分别在第2列和第4列插入存储在f:\dream\images里的图片，在第1列和第3列填入背景色； br＞ 在第2行中填入背景色，色彩值可从PS中获得；在第3行中插入1行2列的表格，在第1列中插入存储在f:\dream\images里的图片，在第2列中插入背景图片（注意：在表格中插入图片之前，要将光标定位为垂直顶端）；在第4行中插入1行2列的表格，插入存储在 f:\dream\images里的按钮图片，将其复制3个，并在此单元格中插入背景图片。
按照以上的方法就可以轻松布局网页表格。这里举了一个简单的例子，大家可以举一反三，设计出优秀的网页。
参考文献：
[1]丛书编委会.计算机图形图像处理——Photoshop CS2中文版[M].北京:清华大学出版社,2006.
[2]Linux宝库.Photoshop切片结合Dreamweaver拼接教程[EB/OL].http://www.goltime.com/articleview/2006-10-23/article_view_265_3.htm,2007-02-09
[3]罗辉.网页图片优化和分割的一种方法[J].中国医学教育技术,2004,18(5):303-305
[4]网络.网页制作——第三课文档与图像[EB/OL].http://www.tc168.net/362118/index.asp?xAction=xReadNews&NewsID=656,2005-01-26.
注:“本文中所涉及到的图表、公式注解等形式请以PDF格式阅读原文。”