动态网站设计第03讲课件

总学时：96（课内84）6授课教师：刘坤电子信箱：联系电话：答疑时间：周2本次课程教学内容：项目三

网站主页设计与制作子项目3-1主页布局、效果图设计与制作任务2将布局好的主页使用Photoshop切片工具进行切片处理及保存。（重点）

本次课程教学目标：能力目标：会使用Photoshop切片工具对主页效果图进行切片处理；会进行切片的属性设置；会将切片处理后的文件进行存储管理及网页效果的预览。知识目标：知道网页布局原则；了解常见的网页布局形式；知道色彩设计原则；任务2使用Photoshop切片工具对主页进行切片处理及保存

【任务分析】

用Photoshop绘制好主页效果图后，若直接将其制作成网页，由于图片较大，会造成图片下载时间长，浏览速度慢。为了加快下载速度、方便浏览，可以通过Photoshop自带的切片工具把效果图切成N多个部份。这样，单个图片的体积就会相对变小，从而可以节省网页下载时间，加快网页浏览速度。

本任务是使用Photoshop自带的切片工具对制作完成的主页效果图进行切片，并将其保存为网页形式的文件。子项目3-1主页布局、效果图设计与制作（一）利用Photoshop切割网页图片应遵循的原则

1、最好依靠参考线。切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。2、Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分，主要是为预先设计的Logo和Banner留下空间，在DreamWeaver整合时最好不用Logo和Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需要。任务2使用Photoshop切片工具对主页进行切片处理及保存3、虚线和转角形状必切。虚线和转角形状在DreamWeaver不能实现，只能使用Photoshop切片。4、渐变必切。这也是DreamWeaver实现不了的。5、大图必切。大的图像必须切分成均匀图，这样可以提高网页下载速度。6、特殊文字效果必切。除黑体和宋体外，其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体，其它字体浏览器也可能不兼容。

任务2使用Photoshop切片工具对主页进行切片处理及保存（二）切片的种类

1、切片的分类依据切片是否是自动生成而划分为如下两类：（1）用户切片：用户使用切片工具创建的切片（图标为蓝色）。

（2）自动切片：用户在创建切片时由软件自动形成的切片（图标为灰色）。

2、两种切片的区别任务2使用Photoshop切片工具对主页进行切片处理及保存3、自动切片转换为用户切片

建议在进行效果图切片处理时，都切分成用户切片。也可以将自动切片转换成用户切片。方法有两种：法一：选择这个切片，使用切片选项工具栏中【提升到用户切片】按钮，如图所示。法二：右击选择的自动切片，在弹出的快捷菜单中选择“提升到用户切片”命令。任务2使用Photoshop切片工具对主页进行切片处理及保存利用Photoshop中的切片工具对下发的网页效果图进行切片处理

将C盘根目录下的exercise1.psd和exercise2.psd文件进行切片处理。准备工作：在站点文件夹ClassWeb下新建文件夹exercises1和exercises2

（一）exercise1.psd进行切片处理的步骤1、利用PhotoshopCS打开exercise.psd文件;2、选取左侧工具箱里的切片工具，如下图所示：任务2使用Photoshop切片工具对主页进行切片处理及保存注意这里选项的选取任务2使用Photoshop切片工具对主页进行切片处理及保存4、切割的导航条按钮：由于导航条上各按钮大小基本相同，选取切片工具选项工具栏中的“切片样式”为固定大小，设置宽度为“115px”，高度为“42px”，如图所示。注意将切片和被切对象对齐。切的时候要小心，可放大图像，避免切片之间重叠。提示：若切割的过程中发现切片错误，使用键盘上的【delete】键删除当前选区。

标题部分切片效果图任务2使用Photoshop切片工具对主页进行切片处理及保存任务2使用Photoshop切片工具对主页进行切片处理及保存6、将上方产生的一些自动切片提升为用户切片，并将为单色的切片进行处理，处理方法同切片02，这样在输出成网页后将由透明占位符和同色背景色代替，加快网页速度。任务2使用Photoshop切片工具对主页进行切片处理及保存7、切割图像左下角部分（牡丹所在部分），经观察发现，图层的大小正好与切片的大小一致，如果某个图层的范围正好是要切割的大小，则选中要切割的图层，执行“图层”→“基于图层的切片”命令，从而完成切片的切割。8、采用合适的方法完成“墨妙亭”、“弇山堂”和“版权所有”区域的切割。

提示：一定要使用“放大工具”检查各切片间是否有重叠现象。切片练习效果图任务2使用Photoshop切片工具对主页进行切片处理及保存9、完成导航栏中【休闲】按钮的超链接。超链接的设置方法有多种，在完成切片的切割后，可以完成其超链接工作。方法：选取工具栏中的“切片选取工具”，双击【休闲】按钮所在的切片，弹出“切片选项”对话框，并在对话框内完成参数的设置，由于“休闲”页面还未完成，这里我们设置空链接（#），目标为_blank，表示在新窗口中打开该链接

。任务2使用Photoshop切片工具对主页进行切片处理及保存11、按下【保存】按钮后，即可在exercises文件中产生一个网页文件exercieses1.html，及一个保存切片图片文件的文件夹images。打开images文件夹，不难发现各切片图片文件名有数字序号01、02……等作为标记。12、启动Dreamweaver8，在Dreamweaver8中打开exercise1.html，按下【F12】键进行效果图预览。任务2使用Photoshop切片工具对主页进行切片处理及保存1、将C盘根目录下的exercises2.psd文件进行切片处理，并将切片处理好的文件以exercise