网页设计与网站建设ppt课件

1、1；.第三部分 高级应用2；.目录n固定宽度的圆角边框n可变宽度、高度的艺术边框n实线圆角边框nTab面板n折叠面板3；.3.1固定宽度的圆角边框o图像的使用原则图像的使用原则n用尽可能少的图像n用尽可能小的图像n用尽可能简洁的html标记4；.3.1固定宽度的圆角边框o操作步骤操作步骤n设计图像n设计html结构n根据html结构对图像进行切片n在html标记中添加背景图像5；.3.2可变宽度、高度的艺术边框o设计并制作艺术边框效果设计并制作艺术边框效果o切成切成6片片o设计设计html结构，每一块中至少设计结构，每一块中至少设计6个盒子个盒子o采用采用“六图法六图法”完成艺术边框的组合完成

2、艺术边框的组合6；.3.3单色实线圆角边框o计算组成圆角的像素点计算组成圆角的像素点o设计设计“勾子勾子”o用用css“描述描述”各关键像素点各关键像素点7；.3.3 单色实线圆角框编号编号边框边框heigth左右左右margin1下下1px0px7px2左、右左、右2px1px5px3左、右左、右1px1px4px4左、右左、右1px1px3px5左、右左、右1px1px2px6左、右左、右1px2px1px8；.3.4 spry高级组件tab面板oSpry框架框架Spry Spry 框架是一个可用来构建更加丰富的框架是一个可用来构建更加丰富的 Web Web 页的页的 JavaScript

3、 JavaScript 和和 CSS CSS 库。库。nJavaScriptJavaScript是一种脚本语言。一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作、统计点击量、显示当前日期和时间、滚动字幕等。nCSS：定义spry框架的基本样式，可以编辑9；.o创建步骤创建步骤n创建站点n保存网页n添加spry组件n“全部保存”o分析分析html结构结构n整个面板放到一个名为“TabbedPanels1”的div中n选项卡放到了一个ul中，每个选项卡对应一个li。n内容放到一个div中，每个内容块又放入了一个div中。3.4 spry高级组件tab

4、面板10；.oCSS选择器选择器n.TabbedPanels：设置整个选项卡面板的属性，如宽度、位置n.TabbedPanelsTabGroup：设置“选项卡”的整体属性，如背景色n.TabbedPanelsTab：设置每个选项卡的属性，如字体、填充等n.TabbedPanelsContentGroup：定义选项卡内容区的整体属性，如填充、边界等n.TabbedPanelsContent：定义选项卡内容区的具体属性，如背景、边框3.4 spry高级组件tab面板11；.3.5折叠式面板o.Accordion：设置整个面板的属性，如宽度、位置：设置整个面板的属性，如宽度、位置o.AccordionPanelTab：设置每个标签的属性，如字体、填充等：设置每个标签的属性，如字体、填充等o.AccordionPanelOpen .AccordionPanelTab：定义展开菜单后，主菜单：定义展开菜单后，主菜单的样式的样式o.AccordionPanelContent：定义选项卡内容区的具体属性，如背景、边框：定义选项卡