电子教案5-4网页设计.ppt

网页设计(3) 第4讲 网页布局（2） *制作人：马秀麟2 一、一、PSPS布局页面技术布局页面技术 o 1.总体说明 n 目标 o 布局整体协调的页面 o 以图像处理、绘制图形等技术制作页面 n 主导思想 o 整体性、框架性的固定信息在PS中按照美工方式 完成； o 文字信息，局部图像信息在DW中插入 *制作人：马秀麟3 一、一、PSPS布局页面技术布局页面技术 o 2.PS布局主要流程 n 以PS绘制页面 o 关键技术 n 屏幕拷贝【PrintScreen】 n 选区、复制与粘贴、羽化效果 n 使用自由变换工具 n 使用修补工具 n 滤镜工具、绘制图形工具 o 文字工具 n 输入文字 n 文字样式 o 注意：对未来输入数据的区域尽量用纯色。 *制作人：马秀麟4 一、一、PSPS布局页面技术布局页面技术 n 在PS下切片 o 选择切片工具 n 拖动鼠标、绘制用户切片 n 凡是需要在DW中修改之处，都制作为切片 o 切片处理 n 纯色切片 以【切片工具】在切片上右单击，弹出【切片设置 】对话框，选择【无图像】，并用吸管设置其背景 色。 n 图像切片 到DW中处理。 *制作人：马秀麟5 一、一、PSPS布局页面技术布局页面技术 n 保存为Web页面 o 选择【文件】-【保存为Web】格式，直接选择【 存储】按钮，弹出【保存】对话框，在【保存】对 话框中进行如下设置： n 选择【保存类型】、HTML和图像； n 保存位置：DW的站点文件夹； n 利用【设置】-【其他】打开【输出设置】对话框，从 中选择【切片】，【生成CSS】，然后【确定】 o 命名文件并选择【保存】后，即可制作出基于 CSS+DIV的布局页面。 *制作人：马秀麟6 一、一、PSPS布局页面技术布局页面技术 o 3. 以DW处理页面背景图 n 打开PS布局的Web页 n 对纯色切片的处理 o 直接点击纯色的切片，键入Del键删除占位图片 。 n 对图像切片的处理 o 单击选中图像切片，从【属性】面板中复制其文件 名； o 选择此图像所在的层对象（借助设计区底部的标签 ），把图像文件名复制到【属性】面板的【背景图 像】中； o 然后删除此占位图像； 一、一、PSPS布局页面技术布局页面技术 o 4. 使布局后的页面居中 n 层布局方式 o 在左下角选定最外层的Div o 利用CSS面板，修改： nPosition: Relative nMargin-left: auto nMargin-Right: auto o 在网页代码最前面添加语句： 可从DW的新建网页中复制这句话，使之兼容XHTML标准 *制作人：马秀麟7 一、一、PSPS布局页面技术布局页面技术 n 表格布局方式 o 选定左下角的最外层Table o 在“属性”面板中设置Table的对齐方式： n “居中对齐”。 o 5.处理样式信息 o 把样式信息保存到专门的CSS文档中 o 在网页中引用样式文档 *制作人：马秀麟8 四、四、PSPS布局页面技术布局页面技术 o 6.补充技术制作翻转图 n 适应性仅早期的PS支持 n 步骤： o 绘制页面，为计划翻转的区域提供至少两个图层 n 默认前景层、翻转层 o 切割页面 o 切换到ImageReady，启动“Web内容”面板 o 选择特定的切片，右单击切片，并选择“添加翻转 图” o 在翻转状态下，设置默认的前景图层为“不显示” n 最后保存这个图片为网页形式。 *制作人：马秀麟9 二、其他布局技术 o 1.框架布局 n (1)网页设计中的重要问题 o 固定区域 n 在多个网页中，固定区域是相同的 o 活动区域 n 在不同的网页中，活动区域是变化的 二、其他布局技术 n (2)框架布局的概念 o 朴素的想法 n 把整个浏览器窗口分成若干个区域 n 每个区域放一个独立的网页 n 针对单个区域改变内容 o 关键技术 n 对区域的命名 标记区域 为超级链接的输出指明位置 n 特色 同时出现多个HTML文档 FrameSet文档 各个Frame中的网页文档 二、其他布局技术 n (3)实施框架布局 o 新建框架页面 n 新建示例中的页（框架页），选择一种框架 n 新建文件，然后利用【修改】【框架集】拆分框架 o 框架面板 n 窗口框架 o 设置框架的属性 n 从面板中选择一个框架，改变其属性 名称、边框、滚动条、默认的网页 二、其他布局技术 o 把网页显示在指定框架内 n 提示 五种不同类型的输出位置： _Blank 新窗口 _Top 如果有多重框架，显示到顶级框架中 _self 默认值，显示在当前框架中 _parent 如果有多重框架，显示到当前框架的上一级中 二、其他布局技术 n (3)嵌入式框架布局 o 嵌入式框架布局的价值 n 整个网页使用表格布局或者层布局 n 在某个位置开辟一个小视窗，给予名称。 n 在此小视窗中显示其他的网页 o 嵌入式框架的语句 n o 用法 n 对于超级链接 提示信息 *制作人：马秀麟14 *制作人：马秀麟15 二、其他布局技术 o 2、模版布局的概念 n(1)模版布局的概念 o 基本思路 n构造一个模版文档 n利用模版文档创建、编辑网页 o 特色 n每个网页都包含固定区域和活动区域的全部信息 n由模版文档统一管理各个网页的固定区域 n模版技术必须借助于本地站点 二、其他布局技术 n(2)把布局页面保存为模板 o 选择【文件】-【另存为模板】，把刚刚创建的布局页面保存 为模板； n注意：保存模板时，必须有站点的支持； o 在模板页面上添加相对固定的菜单栏、目录信息，并设置相 应的超级链接。 o 为模板页链接CSS样式文件； o 把部分区域设置为“可编辑区域”。 n光标放在区域中； n使用菜单【插入】-【模板对象】-【可编辑区域】，把该区 域设计为可编辑区域。 o 把操作完毕的模板保存起来 *制作人：马秀麟17 二、其他布局技术 n (3)利用