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