第1章 走进页面布局设计(理论).ppt

1、第一章走进页面布局设计,课程地位,课程目标,学习内容 XHTML基本语法 网页布局模型 页面背景特效及元素定位 导航栏 学习目标 使用布局模型设计商业站点页面布局 使用页面背景特效及元素定位实现复杂的布局设计 熟练掌握常用导航栏的制作过程 实战项目 综合项目：51Job招聘专版,本章内容,XHTML的作用及发展 XHTML与HTML的区别 XHTML的DOCTYPE和基本标签 CSS常用属性,本章目标,熟练区别XHTML与HTML 理解XHTML的DOCTYPE 创建简单的XHTML页面布局,内容回顾,HTML文档结构 HTML基本标签 文本标签、文字布局、超链接 表单及表单元素 、 CSS（

2、层叠样式表） 布局知识 表格布局、DIV布局,css复习,样式表分类： 内联样式表、内部样式表、外部样式表 选择器分类： 标签选择器 类选择器：根据元素Class属性来选择元素 ID选择器：根据元素ID来选择元素 其他选择器 伪类选择器 例如：a:hovercolor:red a:visitedcolor:blue 子选择器 例如： #links acolor:blue; 后代选择器 例如：p .p1color:#0000CC; 通用选择器 例如：*font-size:12px p *font-size:12px 群组选择器 例如：p,td,acolor:red,1. XHTML简介,1.1

3、为什么使用XHTML 运行在用户机器上的浏览器种类繁多，在技术实现细节上存在差异 HTML缺陷 不能适应现在越多的网络设备和应用需要 代码不规范，浏览效果不一致 内容与表现混杂,1.2 什么是XHTML,XHTML指可扩展超文本标签语言（Extensible HyperText Markup Language） W3C组织在HTML4的基础上，用XML的规则对其进行重构 是HTML向XML过渡的一种新标准,HTML,XHTML,value： block：块状显示 inline：同前一元素在一行显示 none：隐藏元素,display属性应用,示例:display.html,#first wid

4、th:300px; height:50px; background:#99cccc; display:block; text-align:center; line-height:50px; font-size:12px; border:#ccc 1px dashed; margin: ,6.2 常用样式属性float,浮动属性用于设置元素在父级包含容器中的停靠方向,float:value;,value： left：停靠在父容器的左侧 right：停靠在父容器的左侧 none：不停靠，按默认方式排列,6.3 常用样式属性补丁,margin:value; padding:value;,补丁属性应用

5、,示例:css-margin-padding.html,#content #menu background-image:url(images/bg.jpg); padding-top:5px; padding-left:5px; width:395px; height:31px; ,7. 创建XHTML页面步骤,第一步：选择合适的DOCTYPE 第二步：编写HTML文档结构 第三步：添加内容, XHTML基础 ,欢迎进入XHTML编程世界 欢迎进入XHTML编程世界,布局演练-1,布局演练-2,布局演练-3,完成P23面作业,总结,XHTML指可扩展超文本标签语言（Extensible HyperText Markup Language），是使用XML重构HTML4.01而来的新标准 XHTML与HTML的区别在于XHTML语法规则上更严谨、更规范 块状标独占一行，宽度为100%，行内元素宽度和高度由其中的内容决定，所以设置宽度和高度无效。 可以采用displa