使用HTML创建静态页面 文档资料.pptVIP

第五课 网站设计和页面布局技术 本课目标 能使用网站设计流程分析简单网站的设计 能使用 DIV 层技术进行页面整体布局 能使用表格进行图文内容的布局 网站开发的流程介绍 网站开发的 4 个步骤： 1 、 需求分析 客户需求 确认需求 业务背景 设计风格 网站内容 提供样板 网站开发的流程介绍 2 、 网站制作 3 、测试网页 4 、发布网站 保证让 Internet Explorer 和 Mozilla Firefox 浏览器能比较 好地展示你的作品 制作好的网站，经测试之后，就可以在服务器上发布，这 样，能让更多的人知道您的网站 创建站点 制作首页 制作模板 制作样式 需求分析 客户需求 业务背景 淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台 设计风格 淘宝网具有鲜明、亮丽、明快、时尚的风格 网站内容 公司简介 、商品分类 、商品展示 、价格信息 、商品有哪些信誉好的足球投注网站 、网上订 单 、会员注册 、客户服务等 确认需求 提供给客户一个前期静态的设计样板 ( 可用 photoshop 制作 ) 大家想想淘宝网 的业务背景 使用 HTML 创建静态网站 (2) 网页编程 第四课 CSS 样式表 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要 CSS 样式表 HTML 标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 内容相同 外观不同 为什么需要 CSS 样式表 样式表能实现内容与样式的分离，方便团 队开发 程序员 写代码 美工做样式 内容与样式和谐 统一的完整网页 样式表的基本语法 样式表的基本结构 STYLE type= ext/css P { color :red; font-size :30px; font-family : 隶书 ;} …… /STYLE 声明文档样 式表结束 文档样式表开始， 类型为 CSS 样式 样式规则 选择器 样式规则 P { color :red; font-size :30px; font-family : 隶书 ;} 属性 属性的值 样式表的基本语法 HTML HEAD TITLE 样式规则 /TITLE STYLE type= ext/css 倠笠挠汯牯爺摥※潦瑮昭浡汩? 隶书 ; font-size:24px;} /STYLE /HEAD BODY H2 静夜思 /H2 P 床前明月光， /P P 疑是地上霜。 /P P 我是郭德刚， /P P 低头思故乡。 /P /BODY /HTML 本页面中所有的 P 标 签都应用了此样式 所有的段落都采用 P 样式，保证风格统一 用分号 隔开 选择器 如何编写此样式 ? 字体类型为律书、 大小 24px STYLE type= ext/css .red { ??????????挠汯牯爺摥※潦瑮昭浡汩? 隶书 ; font-size:24px; } …… /STYLE 样式表的基本语法 如果希望其他的标签也能采用 P 标签的样 式，怎么办？ 其他标签和 P 标签应该采用相同的样式，所以要为它 们定义一个共享样式。 类样式 (class) . 类名 样式规则 样式表的基本语法 HEAD TITLE 样式规则 /TITLE STYLE type= ext/css .red { 潣潬?敲?映湯?慦業祬尺 隶书 ; } /STYLE /HEAD BODY H2 汣獡?牜摥 静夜思 /H2 P class= ed 床前明月光， /P P class= ed 疑是地上霜。 /P P 我是郭德刚， /P P class= ed 低头思故乡。 /P /BODY CLASS 类 选择器 为类选择器定 义的样式规则 应用类选择器 class ＝”类名“ H2 和 P 标签要应用同一样式 如何实现这样的样 式效果？字体类型 都为隶书 常