网页制作教程--网页版面设计与制作.ppt

　　掌握了网页布局方法仅仅是掌握了一项版面布局技术，如何让版面设计得更美观、得体，还需要学习版面设计的基本知识。本项目将介绍版面的基本类型、设计准则以及使用Photoshop制作版面的方法。 （一） 预备知识──Photoshop CS3基础 (5) 变换图像 选择【编辑】/【自由变换】命令，可以对图像中的选区或除背景层以外的所有图层进行放大、缩小和旋转等自由变形处理。选择【编辑】/【变换】中的相应命令，可以对图像中的选区或除背景层以外的所有图层进行更丰富的变换操作，如图所示。 （一） 预备知识──Photoshop CS3基础 (6) 旋转画布 在编辑图像时、可能会对整个图像进行旋转，例如180o旋转、90o旋转、水平翻转和垂直翻转等。要对图像进行旋转或翻转，首先需要打开该图像，然后选择【图像】/【旋转画布】中的相应命令即可，如图所示。如果选择【图像】/【旋转画布】/【任意角度】命令，将弹出【旋转画布】对话框，如图所示，可对其参数进行设置。 （一） 预备知识──Photoshop CS3基础 4. 编辑文字 在图像处理中，文字是经常用到的，一件完整的作品都需要有文字内容来说明主题或通过特殊编排的文字来衬托整个画面。 (1) 输入文字 在Photoshop CS3中，可利用工具箱中的 （横排文字工具）、 （直排文字工具）输入横排或直排文字，利用 （横排文字蒙版工具）和 （直排文字蒙版工具）创建文字形状的选区。如果要处理的文字较多，可以按住鼠标左键并拖曳，绘制矩形框，然后在矩形框内输入所需的段落文本。通过文字属性栏中的 （创建文字变形）工具按钮，可以在保持文字可编辑的状态下，使用系统提供的15种不同的变形样式，将文字扭曲为不同的形状，使其呈现弧形、旗帜等特殊效果，如图所示。 （一） 预备知识──Photoshop CS3基础 （一） 预备知识──Photoshop CS3基础 (2) 栅格化文字 在Photoshop中，不能使用画笔工具、铅笔工具、渐变工具等绘画工具直接在文本图层上绘画，也不能直接对其应用滤镜操作。要解决这个问题，需要将文本图层进行栅格化处理。方法是，选中文本图层，然后选择【图层】/【栅格化】/【文字】或【图层】命令即可。文本图层一旦被转换为普通图层，用户将无法再编辑文本内容。文本图层经过栅格化变为普通图层后，就可以使用画笔等工具对文字进行修改了，如图所示。 （一） 预备知识──Photoshop CS3基础 (3) 路径和文字 在Photoshop中，通过沿路径或在路径内部输入文字的方法，可以制作出优美的文字曲线或以各种形状编排文本效果。例如，在工具箱中选择钢笔工具 ，然后在属性栏中单击 （路径）按钮，在图像窗口中通过依次单击鼠标绘制一条路径（开放或封闭均可），再在工具箱中单击 （横排文字工具）按钮，将鼠标指针移至路径上，当鼠标指针呈 形状后单击鼠标确定一个插入点，等到出现闪烁的光标后，即可沿路径输入文本，如图所示。 （一） 预备知识──Photoshop CS3基础 5. 图层样式 图层样式主要包括投影、阴影、发光、斜面和浮雕以及描边等。利用图层样式可以对图层中的图像快速应用效果，通过【图层样式】面板还可以查看各种预设的图层样式，并且仅通过单击鼠标即可在图像中应用样式，也可以通过对图层中的图像应用多种效果创建自定样式。 如果要对图层应用样式，选择【图层】/【图层样式】中的相应命令即可，如图所示，如选择【混合选项】命令，将弹出图所示【图层样式】对话框，对其进行参数设置即可。 （一） 预备知识──Photoshop CS3基础 （一） 预备知识──Photoshop CS3基础 6. 创建和保存切片 在工具箱中，切片工具 主要用于分割图像，切片选择工具 主要用于编辑切片。创建切片的方法是，单击 工具按钮，将鼠标指针移动到图像窗口中适合的位置，按住鼠标左键并拖曳，释放鼠标左键后即在图像中创建了切片，可以根据需要反复进行切割，如图所示。 （一） 预备知识──Photoshop CS3基础 6. 创建和保存切片 利用 工具选择图像中切片名称显示为灰色的切片，然后单击属性栏中的 按钮，可以将当前选择的切片激活，即左上角的切片名称显示为蓝色。另外，单击属性栏中的 按钮，在弹出的【划分切片】对话框中，可对当前选择的切片进行水平或垂直分割。 切片创建完毕后，还要保存成适合网页使用的图像。选择【文件】/【存储为Web和设备所用格式】命令，弹出【存储为Web和设备所用格式】对话框，如图所示。根据需要设置参数，然后单击