第7章 创建“遇见鲜花”网上花店（一） 课件(共21张PPT) 《网页设计与制作（第三版）》（高教版）

(课件网) 创建“遇见鲜花”网上花店（一） 高等教育-出卷网- 网页设计与制作 教学目的： 了解站点设计制作整体流程 帮助学生理解CSS的概念及语法 帮助学生掌握Div+CSS布局网页的方法 培养学生综合运用多种软件工具(Photoshop+Dreamweaver等)建设站点的能力 教学重点： 帮助学生理解并掌握网页前端涉及的代码语言，包括HTML和CSS，主要是CSS 帮助学生理解网页设计与其它平面设计的不同 帮助学生综合运用Dreamweaver、Photoshop等软件,实现网页设计与网站整体制作 知识点： Div + CSS布局概念、CSS语法结构、CSS类型、CSS盒子模型、CSS文档流、CSS选择器类型 使用Dreamweaver建站流程 Div + CSS页面布局方法 CSS外部样式表控制页面显示样式的具体方法 1. 项目描述与分析 项目描述： 创建一个网上花店，站点名称为“遇见鲜花”。站点主要栏目为：花店简介、鲜花预定、鲜花配送、温馨花语和插花课堂。建站目的为推广花店品牌、介绍花店服务、接收网络订单、开办插花课堂等。 项目分析： 本项目目的在于创建一个档次较高的网上花店，满足城市白领们日常对于鲜花的需求。花店设计上偏向简洁大气，使用Div+CSS的布局方式很好地辅助实现了设计效果。 2. 预 备 知 识 （1）、Div + CSS 的 基 本 概 念 Div + CSS是网站标准中常用的术语之一，通常用于和HTML网页设计语言中的表格（table）定位方式进行区别。这是因为在Div + CSS布局方式中，不再使用传统的table标签来进行定位，而是直接采用更为直接的块标签（Div）来实现各种定位。 Div是HTML语言中定义文档块的一个标签，它一般用来表示文档内的大块内容（其中可以包括文字、图片、表格等其他内容）。具体制作时可以将Div块放置在页面上的任意位置，而且Div标签所表示的文档块还可以互相嵌套，从而形成较为复杂的页面布局结构。 （2）、 CSS 基 本 语 法 结 构 CSS的全称为Cascading Style Sheets，翻译过来为：层叠样式表。CSS文档由样式规则列表组成，浏览器用它来确定页面的显示效果。 CSS的语法结构为： 选择器 { 属性：值； 属性：值； …… } （3）、 CSS 样 式 表 类 型 内部样式表 外部样式表 内嵌样式表 （4）、 CSS 盒 子 模 型 （5）、 CSS 文 档 流 在CSS中定义了一个“标准文档流”。所谓的标准文档流，就是指在默认情况下，各种内容块的排列规则。 XHTML中有些标签所代表的内容块是从左到右横向排列，直到最右端排列不下了会自动折行。 另一种标签元素与之相反，它们所代表的内容块只能从上到下纵向排列。也就是说，在标准文档流情况下（即默认情况下），这种元素不会与其他标签元素共同出现在一行内。 3. 网 站 首 页 布 局 分 析 （1）站 点 内 容 结 构 图 （2）站 点 布 局 分 析 图 4.项目任务 具体操作步骤： 新建站点并链接外部样式表 添加首页背景图 制作页面整体布局 制作页面主导航条 制作页面主要内容部分 制作页脚版权信息并调整页面 5. 知 识 链 接 （1）、 线上学习：Div + CSS布局 W3School 中文网站 https://www..cn/ 模板无忧 http://www. （2）、 线下学习：网页设计发展历史 1、第一代简单网页 2、第二代基于表格布局的网页 3、基于flash的网页 4、基于CSS的网页 THANK YOU ... ...