网页设计与网站建设.pptx

第三部分第三部分 高级应用高级应用第1页/共12页目录固定宽度的圆角边框可变宽度、高度的艺术边框实线圆角边框Tab面板折叠面板第2页/共12页固定宽度的圆角边框图像的使用原则用尽可能少的图像用尽可能小的图像用尽可能简洁的html标记第3页/共12页固定宽度的圆角边框操作步骤设计图像设计html结构根据html结构对图像进行切片在html标记中添加背景图像第4页/共12页可变宽度、高度的艺术边框设计并制作艺术边框效果切成6片设计html结构，每一块中至少设计6个盒子采用“六图法”完成艺术边框的组合第5页/共12页单色实线圆角边框计算组成圆角的像素点设计“勾子”用css“描述”各关键像素点第6页/共12页3.3 单色实线圆角框编号编号边框边框heigth左右左右margin1下下1px0px7px2左、右左、右2px1px5px3左、右左、右1px1px4px4左、右左、右1px1px3px5左、右左、右1px1px2px6左、右左、右1px2px1px第7页/共12页3.4 spry高级组件tab面板Spry框架Spry 框架是一个可用来构建更加丰富的 Web 页的 JavaScript 和 CSS 库。JavaScriptJavaScript是一种脚本语言。一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作、统计点击量、显示当前日期和时间、滚动字幕等。CSS：定义spry框架的基本样式，可以编辑第8页/共12页创建步骤创建站点保存网页添加spry组件“全部保存”分析html结构整个面板放到一个名为“TabbedPanels1”的div中选项卡放到了一个ul中，每个选项卡对应一个li。内容放到一个div中，每个内容块又放入了一个div中。3.4 spry高级组件tab面板第9页/共12页CSS选择器.TabbedPanels：设置整个选项卡面板的属性，如宽度、位置.TabbedPanelsTabGroup：设置“选项卡”的整体属性，如背景色.TabbedPanelsTab：设置每个选项卡的属性，如字体、填充等.TabbedPanelsContentGroup：定义选项卡内容区的整体属性，如填充、边界等.TabbedPanelsContent：定义选项卡内容区的具体属性，如背景、边框3.4 spry高级组件tab面板第10页/共12页折叠式面板.Accordion：设置整个面板的属性，如宽度、位置.AccordionPanelTab：设置每个标签的属性，如字体、填充等.AccordionPanelOpen.AccordionPanelTab：定义展开菜单后，主菜单的样式.AccordionPanelContent：定义选项卡内容区的具体属性，如背景、边框.AccordionPanelTabHover：定义鼠标移入标签后的样式。第11页/共12页感谢您的观看！第12页/共12页