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

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