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