刘涛，Macormedia第一期认证网页教师。<br>    Adode第二期认证平面教师，原北京新东方职业教育中心电脑美术讲师，原天极风格电脑美术讲师，教育部考试中心《全国计算机应用技术职业技能考试》命题和评审教师。<br>    邹婷，教育部考试中心NIT—PRO第一批认证讲师，Macromedia认证培训专家<br>    ACCD认证培训专家，原北京新东方职业教育中心电脑美术讲师，原北京东方标准电脑美术讲师，教育部考试中心《全国计算机应用技术职业技能考试》命题，和评审教师，全国大学生就业指导卫星专网客座讲师，大话西游BBS美工站务，水木社区美TCLUB会员。

    本书使用最新的Dreamweaver CS4来进行页面的制作与基于DIV的布局，介绍了制作标准化网站所需学习的知识。其中不仅包括相关HTML、CSS等代码知识及网站如何构建等基础内容，还包括Web 2.0站点整站设计制作、搜索引擎优化、站点维护上传等比较高级的内容，涵盖了从基础到进阶，逐步制作完整的Web 2.0站点所需掌握的内容。<br>    光盘提供作者精心整理的代码、案例文件，并包含书中重点案例制作过程的视频教程，以及更多拓展开发视频。对于专业网站制作人员而言，Web 2.0及网站标准化建设无疑是必须掌握的知识。在商业的Web开发中，Dreamweaver是应用最广泛的软件，绝大部分布局的工作都是在Dreamweaver中完成的。<br>    《Dreamweaver CS4开发标准布局Web 2.0网站》的读者对象为Web开发人员、网站建设人员、专业网页设计师、大中专院校相关专业师生、各类网站制作培训班师生等。

    第1章 Web2.0时代的网站开发<br>    1.5 标准化让我们更轻松<br>    在国内申请的信用卡，可以在世界上很多国家使用。<br>    虽然不懂广东话，但依然可以去香港旅游、购物，因为大家都会讲普通话。<br>    水龙头坏了，在楼下的五金店买一个换上就行了。<br>    欧洲杯将在北京时间凌晨两点直播，将观看到精彩的比赛。<br>    生活中每天都发生类似的事情，这样的事情似乎再正常不过，并没有什么特别之处。但是，有没有想过，为什么信用卡可以在国际上通用?为什么大家都会讲普通话?为什么买来的新水龙头的螺口正好与老的水管能接上?为什么只要在凌晨两点打开电视机，就不会错过比赛?在这些事情的背后，都有着一个隐藏的“因素”在起作用，这个因素就是标准。生活中各行各业都有着自己相应的标准与规范，标准可以方便交流、促进协作、提高效率。<br>    对于IT行业，设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。可能要在手机、打印机、数码相机之间交互数据；可能要在网站、邮件和办公软件之间传递信息；可能要在未来新设备（例如机顶盒、信息家电）中应用现有资源。如果没有统一的标准，那么现在所有的信息都是孤立的、不可分享、不可重用的，需要浪费大量的人力、物力重新为新设备建立数据，需要为每一次的多系统应用做专门的开发。对于这个问题，好在已经找到了解决的方案，这就是——XML。<br>    XML简单说就是一种“有规定格式的文档”，只要设备或系统产生的数据都遵守这种格式，就可以实现互相的数据交换、分享与协作。自从1998年国际万维网组织（W3C.org）推出XML 1.0规范以来，已经有大量的XML标准在生活中应用，例如用手机订阅的天气预报、股票行情，这些数据都是从相应的系统获得，然后通过XML格式转换发送的；通过QQ或者MSN上发送消息到不在线的朋友手机上，这其中的信息也是通过XML转换实现的。还有更多的商业应用，例如公司内部的CRM、ERP、内容管理系统之间的数据交互、整合与共享都应用了XML。<br>    那么，自然会想到网页（Web）是否也应该遵循XML标准呢?答案是肯定的。<br>    本节将介绍网站标准化。<br>    1.5.1 CSS让网页更容易设计-5维护<br>    万维网出现以后，大大改变了人们的信息获取方式，以前从报纸、电视、广播上获取信息，现在可以更方便地通过网络、浏览器获得。Web上的信息也曰益丰富，从一开始简单的、静态的文档和图片信息，到现在动态的、可交互的多媒体信息，Web上的信息已经多到可以用“恐怖”来形容。到2008年年底，Google搜索引擎已经能够搜索到82亿张网页和21亿张图像。这么多的数据是财富，但是如果不能有效利用和搜索就是“信息垃圾”。而事实上，已经产生了数据冗余和信息无法有效共享、查询的情况。<br>    99％的网站都是采用HTML制作的，而HTML并不符合XML格式，因此这些网页信息都很难适应未来新设备和数据共享的要求。国际万维网组织（W3C.org）已经提出了解决这个问题的办法，他们在HTML基础上，按照XML格式制定了新的规范XHTML 10。只要通过简单的改变，就能将HTML转为XHTML，从而实现向XML的过渡。同时，为了使页面信息更加容易被搜索和重用、XHTML的代码需要结构更加清晰、标签更加有语义，W3C推荐使用CSS来控制表现，以实现内容与表现的相分离。<br>    World Wide Web最早是以文件的概念组成，希望透过网页与超链接，让文件与知识更容易连接援引。从HTML语法大量使用文件概念的标签（例如代表标题的<br>    、代表段落的<br>    ），就不难看出WWW的这个特质。<br>    然而WWW比起早期其他网络媒介更迷人的地方，在于它能直接在页面上嵌入并呈现图片，这个改变让WWW发展迅速，也让页面视觉装饰大为盛行。但网页先天的文件特性，让图像排版设计难以施展手脚，于是像利用嵌套表格与图像拼组而成的页面开始盛行，以求达到精准元素定位与更精美的视觉效果。这个潘多拉盒子一开，造成了许多失控的乱象，让页面的源代码变得难以阅读与维护。<br>    为了让网页在视觉上可以有更多元的表现，W3C在1996年推出CSS第一版，提供解决之道。不过由于CSS有赖于浏览器的支持，因此长久以来，CSS的推展情况一直不佳，直到IE 6、Firefox等主流浏览器支持CSS，才渐渐改善。<br>    CSS语法是要让网页内容与视觉呈现分离，一方面使得页面维护工作更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计也对搜寻引擎更为友善，更容易搜寻到页面内容。其次，CSS也可以增加页面在不同媒介的呈现效果。同一份页面可依据用途不同，例如在屏幕显示或打印，而自动切换不同的CSS语法，让呈现最佳化。也由于读取页面的媒介越来越多元（如手机、PDA），CSS可以弹性调整呈现方式。这些都更加彰显了CSS在网页上的优势。<br>    1.5.2 扔掉Table使用XHTML+CSS的布局<br>    在开发标准化的网站时，时不时能够看到一些页面整体布局的问题，要求用DIV做一些Table才能做到的，否则就以此为把柄说XHTML+CSS布局方法不好。其实，首先要做的是改变思维，以适应XHTML+CSS的布局。<br>    1.面向页面设计而非面向浏览器设计<br>    XHTML+CSS能够实现的是一种流布局，也就是随着内容的长度自动增长区域，并且最终导致整个页面增长，这时候浏览器就必须显示滚动条。Table强迫症的一个征兆就是极力避免流布局，希望以浏览器的可视区域为布局目标，要求在可视区域中划分内容区域而不是在页面上划分内容区域。<br>    实际上XHTML是无法针对浏览器设计的，因为它仅仅包含语义，或者说是内狡而浏览器如何去表现这些内容是无法确定的。CSS提供了控制表现方式的一种途径，但这仅仅是针对主流浏览器的，而且浏览器支持的“指令集”还有稍微的差别（说到这里，真希望能够为一个浏览器写CSS，然后编译为全平台兼容代码），最后这些指令暂时还仅仅支持针对页面的流式布局控制。因此，如果决定要开始写符合语义的XHTML，并且仅仅用CSS控制布局，首先就要把思路转变为面向页面（或者说是文档）的布局控制，而非面向浏览器可视区域的布局控制。<br>    接下来肯定有人要说，“那就是承认了有些布局老方法很容易做到，但新方法很难做到啦”。这是当然的，然而这不成为继续使用Table的理由。这时候要反过来探讨原始目标，是为什么要控制布局?低层次的需求是为了美观，谁都希望同样的内容能够以更好的视觉效果展示在用户眼前。高层次的需求是为了控制受众的浏览方式，让他们能够按预先设计好的方式来区分页面内容的轻重点，按照期望优先浏览某些内容，同时也帮助他们更快地找到想要的内容，而不会在网站内感到沮丧。

PART 1 DreamweaverCS4与web2．0 开发基础<br>第1章 Web2．O时代的网站开发<br>1．1 Web2．O<br>1．1．1 强调用户体验设计<br>1．1．2 Web2．0 页面设计<br>1．2 Web2．0 主流特色技术<br>1．2．1 CSS布局<br>1．2．2 AjaX(JavaScript)<br>1．2．3 各种框架<br>1．3 标准化的网页<br>1．3．1 如何学习网页标准<br>1．3．2 网页标准化的优点<br>1．4 DreamweaverCS4给予设计师的支持<br>1．4．1 DreamweaverCS4新功能<br>1．4．2 使用Dreamweaver快速建立符合Web2．0 规格的Spry框架<br>1．5 标准化让我们更轻松<br>1．5．1 CSS让网页更容易设计与维护<br>1．5．2 扔掉Table使用XHTML．+CSS布局<br>1．5．3 DIV+CSS网站的命名规则有利于网站优化<br>1．5．4 通过精简CSS来实现控制网页文件大小<br><br>第2章 Dreamweaver CS4光速入门<br>2．1 创建站点<br>2．1．1 使用向导搭建站点<br>2．1．2 使用高级设定搭建站点<br>2．2 管理站点<br>2．2．1 文件管理<br>2．2．2 站点编辑<br>2．2．3 利用站点地图规划站点<br>2．3 3分钟制作一个网站<br><br>第3章 Web2．0 站点开发流程<br>3．1 静态网站与动态网站<br>3．1．1 什么是静态网站与动态网站<br>3．1．2 静态网站与动态网站的应用<br>3．2 网站开发流程<br>3．2．1 网站开发基本流程<br>3．2．2 站点策划相关知识<br>3．2．3 站点开发人员分工<br>3．3 网站策划书<br>3．3．1 网站策划书都要写些什么<br>3．3．2 网站策划书范例<br><br>第4章 你一定需要掌握HTML代码吗<br>4．1 为什么要掌握HTMI．代码<br>4．1．1 HTM[．代码的重要性<br>4．1．2 了解HTML代码<br>4．2 编辑HTML代码<br>4．2．1 Dreamweaver中的HTML源码编辑窗口<br>4．2．2 使用代码窗口的快捷菜单<br>4．3 优化HTML源码<br>4．3．1 快速标签编辑器<br>4．3．2 优化HTML代码<br>4．4．查找与替换<br>4．4．1 使用查找功能<br>4．4．2 替换功能的使用<br>4．4．3 高级查找功能<br>4．4．4 搜索标签<br>4．4．S存储查找和替换设置<br>4．5 使用Dreamweaver手工编写代码<br>4．5．1 使用“代码”面板<br>4．5．2 标签选择器和标签编辑器的使用<br>4．5．3 代码提示功能<br>4．6 关于XHTML<br>4．6．1 为何要将HTML．升级为XHTML<br>4．6．2 XHTML和HTML．的区别<br>4．6．3 如何将HTML页面转换为XHTML<br><br>第5章 页面设计的思考<br>5．1 确定网站页面<br>5．1．1 简单化<br>5．1．2 水平居中布局<br>5．1．3 更少的分列<br>s．1．4 把页面的顶栏和页面分开<br>5．1．5 明显的边缘<br>5．1．6 简洁的导航栏<br>5．1．7 粗体LOGO<br>5．1．8 更大的字体<br><br>第6章 页面布局利器——CSS盒子戏法<br>6．1 为何要使用cSS<br>6．2 理解CSS盒子模型<br>6．2．1 何为盒子模型<br>6．2．2 使用盒子模型的原因<br>6．3 实现结构与表现相分离<br>6．4 熟悉工作流程<br>6．5 常用CSS代码及应用<br>6．5．1 CSS样式的类型<br>6．5．2 使用CSS编辑器<br>6．5．3 在CSS面板中快速修改样式<br>6．5．4 编辑CSS样式<br>6．5．5 设计时间样式表<br>6．5．6 使用CSS美化页面<br>6．6 CSS高级应用<br><br>第7章 DlV排兵布阵<br>7．1．DIV+CSS是什么<br>7．1．1 DIV是什么<br>7．1．2 DIV+CSS的优势<br>7．1．3 DIV+CSS的问题<br>7．2 Absolute与Relative<br>7．2．1 AbsOlute<br>7．2．2 Relative<br>7．2．3 Absolute与Relative应用实战<br>7．3 并非所有内容都要使用DIV做容器<br>7．4 掌握DIV布局<br>7．4．1 案例分析<br>7．4．2 案例实战<br>7．4．3 案例总结<br>7．5 解读DIV+CSS网页制作误区<br>7．5．1 节省代码不是唯一目的<br>7．5．2 id是狙击枪，class是双刃剑<br>7．5．3 工作上也做到结构与表现分离<br>7．5．4 CSS不是万能的，没有CSS也不是万万不能的<br><br>第8章 表格<br>8．1 了解表格<br>8．1．1 表格的代码结构<br>8．1．2 表格的边框属性BorcIer<br>8．1．3 表格的边框色属性Border color<br>8．1．4 单元格间距属性CellSpacing<br>8．1．5 单元格边距属性CellPadding<br>8．1．6 表格的水平对齐属性ALIGN<br>8．2 表格基本操作<br>8．2．1 表格整体设置<br>8．2．2 编辑表格内容<br>8．3 使用表格进行页面排版<br>8．3．1 创通科技页面的制作<br>8．3．2 农资导刊网络版页面<br>8．4 表格的优缺点<br>8．4．1 表格排版的优势<br>8．4．2 表格的劣势<br><br>第9章 打开布局思路<br>9．1 打破布局模式<br>9．2 像表格一样布局DIV<br>9．2．1 在非IE浏览器中的实现<br>9．2．2 IE浏览器中的解决方案<br><br>PART 2 网站元素与相关技术剖析<br>第10章 文字——网站主角化妆<br>10．1 文字的重要性<br>10．2 网页字体设计守则<br>10．2．1 字体传达的印象<br>10．2．2 文字的粗细<br>10．2．3 文字的字号<br>10．2．4 网页字体设计守则<br>10．3 字体设计实例<br>10．3．1 为网页中加入文字<br>10．3．2 设定文字变形<br>10．3．3 制作文字特效<br><br>第11章 图片无处不在<br>11．1 网页图像常用格式<br>11．1．1 GIF图像<br>11．1．2 IPG图像<br>11．1．3 PNG图像<br>11．2 图像在网页中的应用<br>11．2．1 网页图像使用范围<br>11．2．2 图像选用技巧<br>11．3 网页图像处理<br>11．3．1 Logo的制作<br>11．3．2 页面整体效果的制作<br>11．4 图像运用实例<br>11．4．1 网页图像的插入<br>11．4．2 插入鼠标经过图像<br>11．4．3 插入导航条<br>11．4．4 外部图像编辑器的设置与启用<br>11．5 用CSS控制网页背景图<br>11．5．1背景颜色background．color<br>11．5．2 背景图片background—image<br>11．5．3 设置背景图样式<br>11．5．4 在Dreamweaver CS4中设置背景图<br><br>第12章 CSS滤镜万花筒<br>第13章 规范的链接<br>13．1 关于链接<br>13．1．1 准备知识<br>13．1．2 创建链接<br>13．1 _3链接检查与测试<br>13．2 规范的链接<br><br>第14章 人性化导航<br>14．1 导航制作注意事项<br>14．1．1 导航颜色设计守则<br>14．1．2 测试导航可行性<br>14．1．3 保持导航的合理性<br>14．1．4 走出导航设计的误区<br>14．2 各种人性化导航及制作<br>14．2．1 制作Vista风格导航<br>14．2．2 制作Flash导航<br><br>第15章 美丽智能的表单<br>15．1 关于表单的基本知识<br>1S．1．1 表单概述<br>15．1．2 插入表单体及表单元素<br>15．1．3 表单元素的介绍<br>1S．1．4 设置表单元素的属性<br>15．2 构建表单页面<br>15．2．1 构建基本的表单页面<br>15．2．2 设置表单的提交属性<br>15．3 表单验证<br>15．4．美化表单<br>15．4．1 定义文本样式<br>15．4．2 定义背景样式<br>15．4．3 定义链接样式<br>15．4．4 定义文本字段样式<br>1S．4．5 定义按钮样式<br>15．5 Ajax智能表单<br>15．5．1 什么是A1ax<br>15．5．2 XMLHttpRequestAjax实例简介<br>15．5．3 Ajax适用场景<br>15．5．4 Ajax不适用场景<br>15．5．5 使用XForms和Ajax创建自动建议表单字段<br><br>第16章 丰富的多媒体元素<br>第17章 Web2.0中的Flsh<br>第18章 交互能手JavaScript<br>第19章 与模板打交道<br>PART 3 网站后期维护与推广<br>第20章 网站大体检<br>第21章 把一切交给服务器<br>第22章 SEO-让搜索引擎找到我<br>第23章 工作的捷径<br>PART 4 Web2.0站点开发实录<br>第24章 CSS ZenGarden站点<br>第25章 韩国Miodio站点首页<br>第26章 IGN娱乐公园网站