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

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