网页设计（3）第3讲网页布局高级
网页设计(3) 第3讲 网页布局高级
一、PS布局页面技术口1.总体说明目标布局整体协调的页面以图像处理、绘制图形等技术制作页面主导思想整体性、框架性的固定信息在PS中按照美工方式口完成；文字信息，局部图像信息在DW中插入2026/9/17
2026/9/17 2 一、PS布局页面技术 1.总体说明 ◼ 目标 布局整体协调的页面 以图像处理、绘制图形等技术制作页面 ◼ 主导思想 整体性、框架性的固定信息在PS中按照美工方式 完成； 文字信息，局部图像信息在DW中插入
一、PS布局页面技术2.PS布局主要流程以PS绘制页面关键技术口屏幕拷贝【PrintScreen选区、复制与粘贴、羽化效果使用自由变换工具使用修补工具滤镜工具、绘制图形工具文字工具输入文字文字样式注意：对未来输入数据的区域尽量用纯色。国32026/9/17
2026/9/17 3 一、PS布局页面技术 2.PS布局主要流程 ◼ 以PS绘制页面 关键技术 ◼ 屏幕拷贝【PrintScreen】 ◼ 选区、复制与粘贴、羽化效果 ◼ 使用自由变换工具 ◼ 使用修补工具 ◼ 滤镜工具、绘制图形工具 文字工具 ◼ 输入文字 ◼ 文字样式 注意：对未来输入数据的区域尽量用纯色
一、PS布局页面技术在PS下切片选择切片工具门拖动鼠标、绘制用户切片凡是需要在DW中修改之处，都制作为切片切片处理口纯色切片以【切片工具】在切片上右单击，弹出【切片设置】对话框，选择【无图像】，并用吸管设置其背景色。图像切片到DW中处理。2026/9/17
2026/9/17 4 一、PS布局页面技术 ◼ 在PS下切片 选择切片工具 ◼ 拖动鼠标、绘制用户切片 ◼ 凡是需要在DW中修改之处，都制作为切片 切片处理 ◼ 纯色切片 ▪ 以【切片工具】在切片上右单击，弹出【切片设置 】对话框，选择【无图像】，并用吸管设置其背景 色。 ◼ 图像切片 ▪ 到DW中处理
一、PS布局页面技术保存为Web页面选择文件-（保存为Web格式，直接选择【存储】按钮，弹出【保存】对话框，在【保存】对话框中进行如下设置：选择【保存类型】、HTML和图像保存位置：DW的站点文件夹：利用【设置】-【其他】打开【输出设置】对话框，从中选择【切片】，【生成CSS】，然后【确定】命名文件并选择【保存】后，即可制作出基于CSS+DIV的布局页面。2026/9/17E
2026/9/17 5 一、PS布局页面技术 ◼ 保存为Web页面 选择【文件】-【保存为Web】格式，直接选择 【存储】按钮，弹出【保存】对话框，在【保存】 对话框中进行如下设置： ◼ 选择【保存类型】、HTML和图像； ◼ 保存位置：DW的站点文件夹； ◼ 利用【设置】-【其他】打开【输出设置】对话框，从 中选择【切片】，【生成CSS】，然后【确定】 命名文件并选择【保存】后，即可制作出基于 CSS+DIV的布局页面