新手学DIV+CSS商业网站布局从入门到精通(实战案例版)

新手学DIV+CSS商业网站布局从入门到精通(实战案例版)是一本讲解商业网站的布局和美化的参考教学书籍，由朱印宏编著，中国铁道出版社出版。全书基于Dreamweaver和Photoshop常用软件，作者按照由浅到深的写作思路并且结合了多个典型网站实例，使读者不但可以学会应用多种工具制作精美网页，还可以掌握现下最流行的DIV+css网页布局与美化技能，非常适合css初学者下载来学习参考。

内容介绍

《新手学DIV+CSS商业网站布局从入门到精通(实战案例版)》系统地讲解了CSS的基础知识和实际运用技术，通过大量实例对CSS进行深入浅出的分析，主要包括CSS的基本语法和概念，系统讲解CSS布局模型、CSS安全性、CSS重用性、CSS合作开发、CSS商业开发规范。着重讲解如何用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时，掌握CSS+DIV的精髓。除此之外新手学DIV+CSS商业网站布局从入门到精通还详细讲解了5个网站综合布局案例，指导读者制作符合Web标准的网页，帮助读者进一步巩固所学到的知识，提高综合应用的能力。在综合实战过程中，每章都会穿插讲解一项CSS应用技术，如文字、图片、背景、表格、表单和菜单等网页元素的样式设计技法，可以适用于中高级用户进一步学习的实用教材。

章节目录

第1章 初学者必知的常识

1.1 回眸Web标准发展之路

1.1.1 第一个吃螃蟹的是谁？

1.1.2 设计师的表格情结

1.1.3 归去来兮

1.1.4 传统布局与标准布局比较

1.1.5 网页设计前瞻

1.2 Web标准：开发者必知技术规范

1.2.1 网页结构

1.2.2 网页布局

1.2.3 网页行为

1.3 CSS布局的基本思路

1.3.1 语义含义与实例解释

1.3.2 给网页设计师推荐的网站：CSS禅意花园

1.3.3 CSS布局的基本思路及实例

1.4 CSS其实不难

1.5 制作第一个XHTML+CSS页面

第2章 CSS语言基础1

2.1 认识CSS

2.1.1 为什么学习CSS

2.1.2 编辑简单的CSS样式

2.1.3 编辑简单CSS样式具体操作步骤

2.1.4 CSS与浏览器

2.1.5 CSS样式表文件

2.1.6 CSS注释

2.2 CSS类型

2.2.1 行内样式解释及实例展示

2.2.2 内嵌式解释及实例展示

2.2.3 链接式解释及实例展示

2.2.4 导入样式解释及实例展示

2.2.5 各种方式的优先级实例展示

2.3 CSS样式结构

2.4 CSS基本选择器

2.4.1 标记选择器解释与实例展示

2.4.2 类别选择器解释与实例展示

2.4.3 ID选择器解释与实例展示

第3章 CSS语言基础2

3.1 复合选择器

3.1.1 包含选择器解释及实例展示

3.1.2 子选择器解释及实例展示

3.1.3 相邻选择器解释及实例展示

3.1.4 属性选择器解释及实例展示

3.1.5 伪选择器解释及实例展示

3.1.6 集体声明解释及实例展示

3.2 层叠与继承

3.2.1 CSS的层叠性应用实例解析

3.2.2 层叠性实例测试具体操作步骤

3.2.3 CSS的继承性图解及实例

3.2.4 CSS继承与层叠的运用实例

第4章 XHTML重构基础

4.1 认识网页结构

4.1.1 XHTML文档

4.1.2 定义文档类型

4.1.3 DTD文档类型

4.1.4 声明命名空间

4.1.5 XHTML语法

4.1.6 XHTML元素

4.1.7 XHTML常用结构元素：div

4.1.8 XHTML常用结构元素：span

4.1.9 XHTML带用结构元素：hl、h2、h3、h4、h5和h6

4.1.1 0XHTML常用结构元素：p

4.1.1 1XHTML常用结构元素：ul、ol、li、dl、dt和dd

4.1.1 2XHTML常用结构元素：table、tr和td

4.1.1 3把握XHTML结构的语义性

4.1.1 4构建语义化页面操作

4.1.1 5案例实战：构建一个符合语义的页面结构

4.2 DIV和Span应用

4.2.1 比较DIV和Span

4.2.2 案例实战：使用DIV

4.2.3 案例实战：DIV嵌套

4.2.4 案例实战：使用Span

4.3 ID和Class应用

4.3.1 使用ID

4.3.2 比较ID和Name

4.3.3 使用Class

4.3.4 比较ID和Class

第5章 CSS基本模型

5.1 认识CSS盒模型

5.1.1 为什么要提出盒模型

5.1.2 盒模型结构模拟

5.1.3 盒模型的宽和高

5.1.4 盒模型并列间距

5.1.5 盒模型垂直间距

5.1.6 空盒模型

5.2 盒模型的边框

5.2.1 定义边框宽度

5.2.2 定义边框颜色

5.2.3 定义边框样式

5.2.4 分析内联元素的边框

5.3 盒模型的外部空隙

5.3.1 恰当选择边界值

5.3.2 警惕元素边界重叠

5.3.3 内联元素的边界

5.4 盒模型的内部空隙

5.5 IE解析与盒模型的误解

5.5.1 IE6元素浮动时边界错位

5.5.2 让父元素自适应子元素高度

5.5.3 IE6子元素底边界不被解析

5.5.4 IE6的子元素溢出

……

第6章 CSS布局基础和实践

第7章 设计更安全的CSS

第8章 设计可重用的CSS与实例

第9章 CSS团队合作与开发

第10章 CSS规范化商业开发

第11章 博客类网站布局与设计——字体和文本样式

第12章 企业类型网站布局与设计——列表结构与样式

第13章 生活分类信息网站布局与设计——超链接与导航菜单样式

第14章 购物类型网站布局与设计——表单结构与样式

第15章 社区类型网站布局与设计——表格结构与样式

章节内容

1.1

回眸 Web 标准发展之路

国内信息技术的发展似乎总慢于西方半个节拍，其他不说，单就 CSS 技术也是一样。CSS 第个正式规范早于1996 年就已经发布，也就是说1996 年 W3C 组织(World Wide Web Consortium,万维网联盟)正式推出 CSS 1.0 版本技术标准，到198 年CSS 2.0 版本又面世

而我们的 Web 设计师们在新世纪钟声之后，才慢慢感觉到 CSS 技术的先进性，并开始在网站中小心翼翼地进行尝试。

W3C 组织是一个专门负责网络标准制定的非赢利组织，如 HTML、XHTML、CSS、XML等标准就是由 W3C 制定的根据 W3C 官方网站的介绍，W3C 会员包括生产技术产品及服务的厂商内容供应商、团体用户、研究实验室、标准制定机构和政府部门，W3C 会员一起协同工作，致力在万维网发展方向上达成共识。

关于 W3C 组织的更多信息，请读者访问 W3C 官方英文网站 (http:/www.w3c.org)，或者通过万维网联盟中国香港办事处(成立于 1998 年 11 月，地址在香港科技大学)，以及万维网联盟中国办事处(http://www.chinaw3c.org/，成立于 2006 年 4 月，地址在北京航空航天大学)获取有关 W3C的中文介绍。

1.1.1 第一个吃螃蟹的是谁?

CSS 的中国实践与普及当推《CSS 权威指南》一书的引进，相信很多早期的 Web 设计师都看过这本书。时间大致应该锁定在 2001 年  月，此后，前卫的设计师们开始在网页中局部尝试 CSS

技术。2004 年 10 月闪客帝国(现已关闭)开始用 Web 标准对自己的网站进行重构，当时在业界产生了不小的轰动，因为这是第一个“吃螃蟹”的人。对于一个商业网站来说，使用未经普遍实践的

技术是存在很大风险的，所幸他们很顺利地走过来。用当时网易学院采访边城浪子的话说:“网站重构是今后很多网站要面临的问题，标准化永远不会是个错误，我们知道我们早晚会走这一步。长痛不如短痛，所以，我们就下定决心。闪客帝国网站于 2005 年完成了全部 CSS 布局，作为国内第一个大型应用案例，虽然在设计思想和技巧使用上不是最佳案例，但其在 CSS 布局应用上带来了很多宝贵经验

1.1.2 设计师的表格情结

表格在网页布局中应用已经有很多年，由于多年的技术发展和经验积累，Web 设计工具功能不断增强，使表格布局在网页应用中达到登峰造极的地步。

一个最典型的例子就是网页设计师可以直接使用图像编辑器画图、切图，最后再由图像编辑器全自动生成表格布局的页面，像这样提供完整而又完善的一条龙服务的网页设计工具实在很多，如设计师比较熟悉的Adobe Photoshop、ImageReady 和Fireworks等。

这些工具的使用都很简单，学习周期短、制作速度快，而且设计的页面效果都很漂亮。如果你是一位富有艺术感的读者，相信设计出来的页面必定很吸引眼球。

传统表格布局的快速与便捷加速了网页设计师对于页面创意的激情，而忽视代码的理性分析,甚至刚学几天的初学者都敢说出“我可以设计出最完美的网页”，表格布局就这样被神话。

表格为谁而生?

提出这个疑问决非偶然，一直以来我就在不断探寻和思考表格的渊源。假设我们从网页设计这个相对独立的领域跨入另一个陌生的公司财会世界，你会大悟表格的真正使命。

“表格在手，一清二楚”，这是财会人员的口头禅，记得以前看过一本书，书中介绍一企业高级白领，她的最大才干就是擅长设计表格，针对不同的工作、不同的岗位，设计出适合不同工作和岗位的表格，让不同工种和岗位的员工能将各工作更有序更高效地完成，并将管理成本降得更低。何为高级，原来是能够设计出各种表格的白领。

也许你会自以为擅长表格设计的人当属网页设计师，其实这种想法是错误的，随手翻阅高级管理人员案头的形形色色表格，你才明白什么是真正的表格，表格的真正价值所在。如果当你进入公司管理阶层运作时，才发现若能为公司根据需要不断设计出行之有效的各类表格，那才是很重要的工作。

表格能够使繁复的数据分门别类，让人一目了然地清楚数据内在的整体情况，它比许多文字说明都要简明、有用得多。

例如,如何将客户的不同模具的未付款帐单理清,要知道每一次签订制作的模具是分期付款的同一客户的不同模具，因签订合同的时间不同，加上其他诸多因素等，其应付款和未付款的期数是各不相同的，只有用表格的形式，才能很清楚地表达不同模具应付款和未付款及所有模具总未付款情况。

走出传统的纸制表格再来看看与网页毗邻的电子表格技术。提起电子表格，你一定会想到微软的 Excel，但你不会想到 VisiCalc。

1979 年面世的 VisiCal 是历史上第一个电子表格软件，是它直接奠定了电子表格软件的基础,VisiCalc 的发明人 Dan Bricklin 绝对是一位天才(个人主页:http:/www.bricklin.com/)，仅用16KB的代码就改变了整个计算机产业，直接推进了个人电脑的发展。

从界面上看，VisiCalc 完全左右现代电子表格软件的发展。最早的 VisiCalc 是在 Apple II 系统上运行，因此给苹果公司带来了巨额利润。后来 Mitch Kapor 创办 Louts 公司，推出 Lotus 1-2-3,电子表格得到更完善的发展。

如今 Lotus 1-2-3 电子表格软件也消失在用户的视野，提起电子表格大家都只知道 Excel，或者国内金山公司的电子表格。但不管电子表格软件如何发展，它们最终都是为了数据管理服务的，谁也不会想到用表格来进行设计，或用表格来排版布局。

1.1.3归去来兮

实际上，表格的功能不是用来进行布局的。最初的网页没有今天这么复杂，仅显示文本或几个简单的图像，网页文档从上而下自然流动分布，不需要考虑版式设计问题。

后来随着网页内容的丰富，图像、声音、动画等多媒体不断充斥网页，网页内容不断膨胀，同时用户对于网页视觉提出了更高要求，于是如何把传统印刷中的版式技术转移到网页设计中来就成。

使用说明

1、下载并解压，得出pdf文件

2、如果打不开本文件，请务必下载pdf阅读器

3、安装后，在打开解压得出的pdf文件

4、双击进行阅读