CSS与Dreamweaver CS3完美网页设计

章节摘录

　　第1章 CSS基础知识　　本书的目标是通过介绍大量方便的技术，帮助读者使用Dreamweaver CS3的CSS布局和CSS工具，快速创建漂亮的、遵循Web标准且每个人都可访问的站点。但是在真正开始进入项目之前，要确保大家都站到同一起跑线上，让读者对CSS的术语和Dreamweaver的界面有一个基本的了解。因此，本章是一个精简的CSS初级教程，包括一些Dreamweaver实践练习，目的是让您初步了解并熟悉Dreamweaver的CSS工具和CSS布局。　　注意　　如果您已经非常了解基本的CSS概念，那么可以直接阅读第2章，或者只是把本章作为复习，找出自己CSS知识中的欠缺。另一方面，如果您是CSS新手，觉得本章内容很难理解，没关系，请读完全书再回到本章，您将发现自己对这里讨论的所有概念都会茅塞顿开。　　本章首先介绍CSS的基本概念，然后将创建一个等高的两列布局，带有标题和脚注，类似于Dreamweaver中的一个CSS布局——基本上经历了Stephanie编写CSS布局时使用的相同过程。阅读完本章，您应该能够查看Dreamweaver包含的任何CSS布局的代码，并基本了解所看到的内容。　　在开始之前，首先基于“新建文档”对话框中CSS布局列表中的“2列固定，左侧栏、标题和脚注”布局，保存一个新页面。介绍Web标准的概念时，将使用该文档作为示例，如图1.1所示。　　（1）启动Dreamweaver并选择“文件”>“新建”。选择“空白页”类别。选择“页面类型”类别下的“HTML”。从“布局”类别选择“2列固定，左侧栏、标题和脚注”。在对话框最右边，可以看到布局的图形表示，以及其规格的描述。　　（2）将“文档类型”保持为默认的“XHTML 1.0 Transitional”。将“布局CSS位置”保持为默认的“添加到文档头”。单击“创建”按钮。　　（3）将文档作为concepts.html保存在站点的根文件夹中。

书籍目录

第1章 CSS基础知识1.1 （X）HTML文档1.1.1 文档类型1.1.2 字符编码1.1.3 自然的文档流1.1.4 行内元素和块元素1.1.5 用div构建页面1.2 CSS文档1.2.1 CSS语法1.2.2 CSS选择符类型1.2.3 层叠1.2.4 一些真正混淆的内容——优先级1.2.5 继承1.2.6 box模型1.2.7 浏览器怪异现象1.2.8 hasLayout属性1.2.9 定位技术1.3 操纵自然流1.3.1 浮动图像1.3.2 应用清除元素1.3.3 插入div标签1.3.4 绝对定位的列1.3.5 清除浮动列1.3.6 进入布局第2章 使用固定起始页面和居中起始页面2.1 开始创建2.1.1 准备HTML文档2.1.2 准备比较图2.1.3 为body元素设置样式2.2 在CSS中使用速记属性2.3 使用背景图像2.3.1 创建"伪造"的右列2.3.2 创建外发光效果2.4 创建标题2.4.1 绝对定位：并非一无是处2.4.2 添加标志2.5 使侧边列圆角化2.5.1 首先设置顶部2.5.2 创建伪底2.6 添加页面底部2.6.1 添加外部页面包装器2.6.2 定位底部花朵图形2.6.3 要不要使用PNG格式，这是个问题2.7 关于浮动和清除的一点说明2.7.1 在页面中创建Pod2.7.2 避免浮动蔓延——如何迫使div包含自己的浮动2.7.3 空白——最后的处女地2.8 源代码顺序的问题2.9 字体与最终的样式化2.9.1 命名锚记和链接2.9.2 样式化标题2.9.3 平均化侧边列2.10 首字放大——简单的页面修饰技巧2.11 完成脚注2.12 消除错误2.12.1 针对IES调整数值——怪异模式2.12.2 hasLayout问题2.12.3 使用"检查浏览器兼容性"功能2.13 声明媒体类型2.14 小结第3章 从基于表格的布局转向CSS3.1 CSS问题3.1.1 利用"查找和替换"确定现有规则3.1.2 组织CSS规则3.1.3 建立顺序3.1.4 合并属性3.1.5 完成合并3.2 清理混乱的table标签3.2.1 利用"查找和替换"清除表格代码3.2.2 使用CSS样式化列表3.2.3 取消表格的嵌套状态3.2.4 利用AdobeFireworksCS3修改图形3.2.5 利用Div封装内容3.2.6 微调列表3.2.7 加快速度3.2.8 实践所学的内容3.3 重建页面标题3.3.1 在标题中添加背景图形3.3.2 定位导航图像3.4 继续清理过程3.5 删除最后的表格标记3.6 小结第4章 使用液态CSS布局4.1 简化CSS选择符4.2 创建标题4.2.1 插入背景图像4.2.2 插入徽标图像4.3 创建水平导航条4.3.1 为水平导航条创建CSS4.3.2 将命名锚记样式化为按钮4.3.3 使用设计时样式表4.3.4 水平导航条的最后微调4.3.5 解决水平滚动问题4.3.6 创建hover和当前页面指示器状态4.4 布局主内容区域4.4.1 修改列4.4.2 处理边界4.4.3 列的假象4.4.4 定位背景4.4.5 微调列4.4.6 添加徽章 图像4.4.7 创建左手导航条4.4.8 样式化菜单链接4.4.9 在垂直菜单中放置页面指示器4.4.10 样式化mainContent区域4.5 处理底部：样式化脚注4.5.1 浮动左侧元素和右侧元素4.5.2 最后的修饰第5章 利用弹性布局创建更复杂的页面5.1 新文档5.1.1 重新设置CSS默认值5.1.2 创建一个重设代码片段5.1.3 跳到左边5.1.4 调整重设5.2 em单位的重要性5.2.1 em是相对的5.2.2 对文字进行一些调整5.3 视觉变换5.3.1 样式化标题5.3.2 标题假象5.3.3 添加行内导航5.3.4 改善Dreamweaver的性能5.4 主要内容5.5 主站点导航条5.5.1 为列表项添加背景5.5.2 样式化链接本身5.5.3 使用cite元素5.5.4 处理右边侧栏5.5.5 脚注是最后一个元素，但内容并非最少5.5.6 快速处理IECC5.6 创建并样式化基于em的表单5.6.1 编写表单代码5.6.2 样式化表单5.6.3 添加表单验证5.7 创建及样式化可存取的数据表格5.7.1 将重活交给Dreamweaver5.7.2 指定表格尺寸5.7.3 提供附加反馈以提高可访问性5.7.4 样式化数据表格5.7.5 您有成就感吗第6章 利用CSS和Spry构建图片库站点6.1 选择适当的起始页布局6.2 构建初始框架6.3 光线、相机、内容……6.3.1 使用max-width和min-width6.3.2 解决IE问题——min/max宽度增强6.3.3 约束IE的内容区域6.3.4 扩展图片6.4 找准方向6.4.1 何谓Spry框架6.4.2 创建基于Spry的导航6.4.3 用CSS为Spry菜单栏应用样式6.4.4 在菜单栏上进行最后的修改6.4.5 我在哪里？通过菜单栏给出反馈6.5 在单个站点中组合使用两个CSS布局6.5.1 简要介绍公共页面元素6.5.2 为Sidebar2添加样式6.6 构建图片库——第一部分6.7 渐进增强——使图片库很酷6.7.1 创建HTML数据集6.7.2 快速检查6.7.3 Spry滚动面板构件6.7.4 为Spry滚动面板构件创建结构6.7.5 在滚动面板中导航6.7.6 添加详细图像6.8 完美地通过验证6.8.1 创建不唐突的JavaScript文件6.8.2 考虑周全6.8.3 最后的完善

编辑推荐

　　《CSS与Dreamweaver CS3完美网页设计》特色：　　Adobe Dreamweaver是最优秀的Web设计工具之一，CSS（CascadingStyleSheets）是非常受欢迎的创建可访问、遵循标准的Web页面的方法。但是，人们常会错误地认为，像Dreamweaver这样的可视化设计工具不能完成面向标准的设计者或开发者工作流。在《CSS与DreamweaverCS3完美网页设计》中，作者演示了实用、高效的技巧和技术，展现了Dreamweaver和CSS这个强大组合的魅力。在一系列详细的实例项目中，手把手指导设计者出色地完成Web设计工作。　　使用Drearmweaver用于构建基于CSS的网站的最新工具，您将学习到：　　CSS的核心概念；　　如何使用、定制和扩展Dreamweaver中包含的CSS布局：　　创建可访问网站过程中涉及的问题；　　如何使用CSS样式和定位将一个现有的基于表的网站变成遵循标准的网站；　　用于解决常见问题的技术；　　CSS中挑战性问题的实际解决方案：　　如何实现最新的Ajax的Spry框架，以渐进增强基于标准的和可访问的CSS布局。

作者简介

CSS与Dreamweaver CS3完美网页设计，ISBN：9787115189967，作者：（美）沙利文，（美）雷威斯 著，李二勇，谢君英 译

图书封面

---

 CSS与Dreamweaver CS3完美网页设计下载

---