网页设计-任务六Div+CSS.ppt

项目三布局技术 网页设计 DreamweaverCS3项目教程 项目三布局技术 任务六布局技术之二 Div CSS 技能目标能够利用DreamweaverCS3预设的CSS布局创建页面 能够理解Div CSS所体现的表现和内容相分离特性 知识目标理解CSS盒子模式 熟练掌握Div的创建与设置方法 掌握CSS规则设置方法 项目三布局技术 3 1 1使用Div CSS搭建页面3 1 2问题探究 Div CSS布局认识表格3 1 3知识拓展 使用预设CSS布局创建页面 任务六布局技术之二 Div CSS 项目三布局技术 任务六Div CSS 构建任务 工作流程在站点中新建一个页面并保存 插入一个Div并设置相关CSS规则 使之成为外部容器 根据事先拟好的布局草图 定制四个Div标签并分别设置相关CSS规则 在各Div窗口中插入相应页面元素 检查整个布局效果并加以调整 保存并预览布局效果 项目三布局技术 任务六Div CSS 构建任务 网页预览效果 项目三布局技术 任务六Div CSS 问题探究 Div标签一般用来定义网页上的一个特定区域 将文字 图片和表格等各种网页元素放在此区域里 再用CSS对该标签定义的区域进行定位和样式的设置 CSS样式表不但是定义页面样式的良好工具 同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具 为了提高设计效率 可以事先定义好布局所需的CSS样式规则 然后在 插入Div标签 中应用 使用这种方式排版的网页代码简洁 更新方便 能兼容更多的浏览器 项目三布局技术 任务六Div CSS 问题探究 CSS的盒子模式要利用CSS进行网页布局 需要借助HTML的一个标签元素Div 也就是目前比较流行的Div CSS来布局网页结构 需要接触到的知识点就是CSS的盒子模式 这也是Div排版的核心所在 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容 而改用CSS排版后 通过CSS定义的大小不一的盒子和盒子嵌套来编排网页 项目三布局技术 任务六Div CSS 问题探究 CSS的盒子模式利用CSS进行网页布局 需要借助HTML的一个标签元素Div 通过CSS定义的大小不一的Div和Div嵌套来编排页面结构 也就是目前比较流行的Div CSS来布局网页结构 项目三布局技术 任务六Div CSS 问题探究 CSS的盒子模式之所以称CSS为盒子模式 主要是因为CSS盒子模式具备的四种属性 内容 content 填充 padding 边框 border 边界 margin 与日常生活中所见的盒子类似 内容是盒子里装的东西 填充则是防止盒子里的东西 贵重的 损坏而添加的抗震辅料 边框就是盒子本体 边界则期望盒子摆放时留足一定空隙保持通风 同时便于取出 在设计网页时 利用CSS的强控制能力 灵活控制这四种属性 使网页区块分明 代码易读 强化代码重用 实现页面复杂布局的控制效果 项目三布局技术 任务六Div CSS 问题探究 Div CSS布局设计思路用Div来定义语义结构 用CSS来美化网页 如加入背景 线条边框 对齐属性等 在这个CSS定义的盒子内加上内容 如文字 图片等 项目三布局技术 任务六Div CSS 问题探究 典型的版面实例该实例采用分栏结构 即页头 导航栏 内容 版权四部分组成 Div CSS排版结果图 项目三布局技术 任务六Div CSS 问题探究 Div CSS标准的优点符合W3C标准 微软等公司均为W3C支持者 这样可以保证您的网站不会因为将来网络应用的升级而被淘汰 结构清晰 容易被搜索引擎搜索到 天生优化了seo搜索引擎 搜索引擎 提高易用性 可以一次设计 随处发布 支持浏览器的向后兼容 几乎在所有的浏览器上都可以使用 表现和内容相分离 这也用CSS布局的特色所在 网页由内容构成 而将网页设计部分剥离出来放在一个独立样式文件中 代码变得更简洁 使页面和样式的更新变得更加方便 提高了网页下载速度 Table布局中 垃圾代码会很多 一些修饰的样式及布局的代码混合一起 而Div更能体现样式和结构相分离 结构的重构性强 项目三布局技术 任务六Div CSS 知识拓展 预设CSS布局创建页面DreamweaverCS3提供了30多个定制的CSS布局来创建CSS布局页面 也可以创建自己的CSS布局 并将它们添加到配置文件夹中 就能在 新建文档 对话框中显示自定义的布局选项 CSS布局可以在下列浏览器中正确呈现 Firefox Windows和Macintosh 1 0 1 5和2 0 InternetExplorer Windows 5 5 6 0 7 0 Opera Windows和Macintosh 8 0 9 0 以及Safari2 0 项目三布局技术 任务六Div CSS 知识拓展 预设CSS布局创建页面选择 文件 新建 弹出 新建文档 对话框 如图所示 选择 空白页 类别 选择 页面类型 下的 HTML 页面类型 从32种不同布局中选择需要的CSS布局 图新建文档对话框 项目三布局技术 任务六Div CSS 知识拓展 预设CSS布局创建页面在对话框右边的 预览 窗口显示该布局 并给出所选布局的简短说明 从 文档类型 弹出菜单中选择文档类型 从 布局CSS位置 弹出菜单中选择布局CSS的位置 单击 创建 按钮 一张已定制好的CSS布局新页面就自动生成了 如图所示 此时可根据规划设计放置不同网页元素即可 图新建定制CSS布局文档 项目三布局技术 任务六Div CSS 知识拓展 预设CSS布局创建页面向选项列表添加自定义CSS布局如果希望自定义CSS布局能够与Dreamweaver提供的其它布局一样出现在预设布局选项列表中 必须保证自定义的HTML布局文件扩展名为 htm 且将此页面添加到AdobeDreamweaverCS3 Configuration BuiltIn Layouts文件夹中 将自定义的布局预览图像 例如 gif或 png文件 也添加到AdobeDreamweaverCS3 Configuration BuiltIn Layou