内容简介
《CSS与Dreamweaver CS3完美网页设计》以将CSS与Dreamweaver两个软件的功能相结合的方式,通过大量实例介绍了CSS基础知识,然后从固定起始页面和居中起始页面开始,逐步深入地介绍从基于表格的布局转向CSS、使用液态CSS的布局,以及利用弹性布局创建更复杂的页面,最后介绍如何利用CSS和Spry构建图片库站点。
《CSS与Dreamweaver CS3完美网页设计》由经验丰富的技术专家撰写,具有较强的专业性和针对性。《CSS与Dreamweaver CS3完美网页设计》可以作为网页制作爱好者培养动手能力的培训教材,也可以作为专业设计人员参考用书。
编辑推荐
Adobe Dreamweaver是最优秀的Web设计工具之一,CSS(Cascading Style Sheets)是非常受欢迎的创建可访问、遵循标准的Web页面的方法。但是,人们常会错误地认为,像Dreamweaver这样的可视化设计工具不能完成面向标准的设计者或开发者工作流。在《CSS与Dreamweaver CS3完美网页设计》中,作者演示了实用、高效的技巧和技术,展现了Dreamweaver和CSS这个强大组合的魅力。在一系列详细的实例项目中,手把手指导设计者出色地完成Web设计工作。
使用Drearmweaver用于构建基于CSS的网站的最新工具,您将学习到:
CSS的核心概念;
如何使用、定制和扩展Dreamweaver中包含的CSS布局:
创建可访问网站过程中涉及的问题;
如何使用CSS样式和定位将一个现有的基于表的网站变成遵循标准的网站;
用于解决常见问题的技术;
CSS中挑战性问题的实际解决方案:
如何实现最新的Ajax的Spry框架,以渐进增强基于标准的和可访问的CSS布局。
媒体评论
第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 在页面中..
书摘
第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保存在站点的根文件夹中。
……