作者：新视角文化行
出版社：数字艺术出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
DIV+CSS 3.0网页布局实战从入门到精通(全彩超值版)试读：
前言
丰富多样的网站是现代社会发展不可缺少的一部分，在很大程度上推动了许多行业的迅速发展，随着Internet技术及其应用的不断发展，网络在大部分人的生活中已经占据了不可替代的位置。
网页是宣传网站的重要窗口，只有将网页设计得更加精美并极具创意，才能够吸引更多的浏览者进行访问。那么，如何才能将网页设计得更加实用、精致呢？在Web标准席卷国内网站设计领域的时代，使用Div+CSS布局设计网页已成为一种流行趋势，它能够真正做到W3C提出的内容与表现相分离的Web标准，本书主要讲述的便是基于Web标准的Div+CSS网页的设计方法以及制作技巧，希望能够帮助大家及时转变传统的网站设计思维。
本书的特点与内容安排
本书主要介绍了如何使用Div+CSS的布局方式进行网页布局设计，并通过100个经典实例与知识点相结合的形式进行讲解。另外，在较为难以理解的地方加以提示，使读者能够轻松、快速地掌握该种布局方式。全书共分为12章，每章的主要内容如下。
第1章 Dreamweaver与CSS基础。本章通过7个实例介绍了如何在Dreamweaver中创建站点、远程交互站点以及设置远程服务器。另外，本章还介绍了CSS样式的基础知识，其中包括内联CSS样式、内部CSS样式和外部CSS样式以及使用CSS样式定义单位、值等。
第2章 Div+CSS布局基础。本章通过9个实例介绍了Div常用的布局方式以及常用的定位方式，并且还讲述了在进行margin属性设置时经常出现的空白边叠加现象以及较为特殊的流体网格布局的使用方法和制作技巧。
第3章 使用CSS控制网页背景。本章通过7个实例介绍了使用CSS样式定义网页背景颜色、背景图像，以及控制背景图像的位置、固定背景图像等方面的相关知识，并且还介绍了CSS 3.0中新增的背景控制属性。
第4章 使用CSS控制文本。本章通过13个实例全方位地介绍了在CSS样式中定义文字属性的方法和技巧，以及网页中特殊字体的使用方法和CSS类选区的应用，并且还介绍了CSS 3.0中新增的文字属性。
第5章 使用CSS控制图片效果。本章通过8个实例介绍了使用CSS样式对网页中图片的边框、缩放、对齐方式进行控制的技巧以及实现图文混排效果的方法，并且还介绍了CSS 3.0中新增的边框控制属性。
第6章 使用CSS控制列表样式。本章通过9个实例全面并细致地介绍了网页中列表标签的使用方法、使用CSS样式定义列表的方法以及通过CSS样式与列表相结合制作网页导航菜单的方法，并且还介绍了CSS 3.0中新增的内容和透明度属性。
第7章 使用CSS美化表格和表单元素。本章通过12个实例介绍了网页中表格和表单元素的创建方法以及使用CSS样式对表格和表单元素进行设置和调整的技巧，并且还介绍了如何使用CSS样式实现表格特效和CSS 3.0中新增的多列布局的相关属性及使用方法。
第8章 使用CSS样式美化超链接和鼠标指针。本章通过9个实例介绍了如何创建、定义网页超链接，以及如何使用CSS样式实现超链接和鼠标指针的特殊效果，并且还介绍了CSS 3.0中新增的与界面有关的属性及应用方法。
第9章 使用CSS滤镜。本章通过5个实例简单介绍了有关CSS滤镜的相关知识，其中包括Alpha滤镜、BlendTrans滤镜、Blur滤镜、FlipH和FlipV滤镜以及DropShadow滤镜，并且还介绍了CSS样式中各种滤镜效果的应用方法。
第10章 CSS与其他语言综合运用。本章通过6个实例介绍了CSS与其他语言综合运用的方法和技巧，以及运用后所产生的效果。
第11章 使用网站常见效果。本章通过5个实例详细介绍了如何创建和修改Spry构件，其中包括Spry菜单栏、Spry选项卡式面板、Spry折叠式面板、Spry可折叠面板和Spry工具提示。
第12章 布局制作商业网站页面。本章通过10个商业网站实例的设计制作，向读者全面介绍了如何使用Div+CSS布局方式设计制作不同类型的商业网站页面。
关于本书作者
本书作者有着多年的网页教学以及网页设计制作的工作经验，先后在多家网络公司从事网页设计制作工作，积累了大量网页设计制作经验并精通网页布局和美化的多种技巧。本书基于最新版本的Dreamweaver CS6软件，按照从简单到复杂、从入门到精通的思路进行写作，作者还结合了100个典型的网站实例进行讲解，从而使读者能够快速地掌握目前流行的Div+CSS网页布局及制作技能。
如何阅读本书
本书采用了图文相结合的方式对网页的设计以及制作的细节进行全面的展示，本书配套光盘中提供了书中所有实例的源文件、相关素材以及书中实例的视频教程，方便读者学习和参考。
由于作者编写水平有限，书中难免有错误和疏漏之处，恳请广大读者批评、指正。读者在学习的过程中，如果遇到问题，可以联系作者（电子邮件nvangle@163.com）。编著第1篇基础篇第01章Dreamweaver与CSS基础
Dreamweaver是一款所见即所得的网页编辑软件，它是第一款针对专业网页设计师的视觉化网页制作软件，利用它可以轻而易举地制作出跨平台限制、跨浏览器限制且充满动感的网页。
在Dreamweaver中设计制作网页时，需要使用CSS样式对页面进行控制和修饰，在网页中应用CSS样式表有4种方式，内联即样式、嵌入样式、链接外部样式和导入样式，用户可以根据所设计网页的不同要求进行选择。实例001 建站第一步——创建本地静态站点
在Dreamweaver中创建本地站点非常简便、快捷。不管制作什么类型、什么风格的网站页面都要从构建站点开始，首先要理清网站结构的脉络，然后才能在创建的静态站点中设计制作网页。
源文件 无
视频 光盘\视频\第1章\实例1.swf
知识点 创建站点
学习时间 5分钟
实例分析
本实例主要通过执行“站点→新建站点”菜单命令，然后在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置，实例1设置完成后的效果如图1-1所示。图1-1 最终效果
知识点链接
在创建本地静态站点时，唯一用到的菜单命令就是“站点→新建站点”命令，通过该命令弹出“站点设置对象”对话框，在该对话框中进行相应的设置即可。
制作步骤
01 执行“站点→新建站点”菜单命令，弹出“站点设置对象”对话框，在“站点名称”文本框中输入站点的名称，如图1-2所示。单击“本地站点文件夹”文本框后的“浏览”按钮，弹出“选择根文件夹”对话框，浏览到本地站点的位置，如图1-3所示。图1-2 “站点设置对象”对话框图1-3 “选择根文件夹”对话框
02 单击“选择”按钮，确定本地站点根目录位置，此时“站点设置对象”对话框如图1-4所示。单击“保存”按钮，完成本地站点的创建。这时Dreamweaver将自动打开“文件”面板，在该面板中显示了刚刚创建的静态站点，如图1-5所示。图1-4 “站点设置对象”对话框图1-5 “文件”面板
Q 在Dreamweaver中，新建站点有几种方式？
A 两种。一种是通过执行“站点→新建站点”菜单命令来新建站点；另一种是执行“站点→管理站点”菜单命令，在弹出的“管理站点”对话框中单击“新建”按钮，同样可以弹出“站点设置对象”对话框，在该对话框中设置以及新建站点。
Q 为什么要创建本地静态站点？
A 在大多数情况下，都是在本地站点中对网页进行编辑制作，然后再通过FTP上传到远程服务器上，因此在制作网页之前应创建本地静态站点。实例002 设置远程服务器——创建企业网站站点
在创建站点时，可以先将该站点的远程服务器信息设置好，这样的话可以制作好一部分网站页面，就上传一部分页面，便于随时在网络中查看页面的效果。
源文件 无
视频 光盘\视频\第1章\实例2.swf
知识点 设置服务器信息
学习时间 10分钟
实例分析
本实例主要通过执行“站点→新建站点”菜单命令，在弹出的“站点设置对象”对话框中设置站点的名称以及确定该站点根目录的位置，然后再切换到“服务器”选项的设置界面中，对服务器信息进行设置，实例2设置完成后的效果如图1-6所示。图1-6 最终效果
知识点链接
本实例的关键在于服务器信息的设置，在设置信息时要确保FTP地址、用户名和密码全部正确，才能连接上Web服务器。
01 执行“站点→新建站点”菜单命令，弹出“站点设置对象”对话框，在“站点名称”对话框中输入站点的名称，单击“本地站点文件夹”后的“浏览”按钮，弹出“选择根文件夹”对话框，浏览到站点的根文件夹，如图1-7所示。单击“选择”按钮，选定站点根文件夹，如图1-8所示。图1-7 “选择根文件夹”对话框图1-8 “站点设置对象”对话框
02 单击“站点设置对象”对话框左侧的“服务器”选项，切换到“服务器”选项设置界面，如图1-9所示。单击“添加新服务器”按钮，弹出“添加新服务器”窗口，对远程服务器的相关信息进行设置，如图1-10所示。图1-9 “服务器”选项设置界面图1-10 设置服务器信息
03 单击“测试”按钮，弹出“文件活动”对话框，显示正在与设置的远程服务器进行连接，如图1-11所示。连接成功后，弹出提示对话框，提示“Dreamweaver已成功连接到您的Web服务器”，如图1-12所示。图1-11 “文件活动”对话框图1-12 与远程服务器连接成功
04 单击“添加新服务器”窗口上的“高级”选项卡，切换到“高级”选项卡的设置，在“服务器模型”下拉列表中选择“PHP MySQL”选项，如图1-13所示。单击“保存”按钮，完成“添加新服务器”窗口的设置，如图1-14所示。图1-13 设置“服务器模型”图1-14 完成远程服务器设置
05 单击“保存”按钮，完成企业网站站点的创建，“文件”面板将自动切换为刚建立的站点，如图1-15所示。单击“文件”面板上的“连接到远程服务器”按钮，即可连接到该站点所设置的远程服务器上，如图1-16所示。图1-15 “文件”面板图1-16 连接到远程服务器
Q 在创建站点时需不需要设置“服务器”选项卡中的相关选项？
A 如果用户需要使用Dreamweaver连接远程服务器，用来将站点中的文件通过Dreamweaver上传到远程服务器，则需要对“服务器”选项卡中的选项进行设置；否则，不需要设置。
Q 在创建远程站点的过程中，对于“服务器模型”需不需要进行设置？
A 可以设置也可以不设置，这两者没有太大的关系。如果已经确定了网站的形式，则可以进行设置，例如在实例2中，该企业网站已经确定使用PHP MySQL形式进行开发，则可以设置“服务器模型”为PHP MySQL。实例003 远程交互站点——创建Business Catalyst站点
Business Catalyst是Dreamweaver CS6新增的一项功能，它可以提供一个专业的在线远程服务器站点，从而使设计者能够获得一个专业的在线平台。
源文件 无
视频 光盘\视频\第1章\实例3.swf
知识点 新建Business Catalyst站点
学习时间 15分钟
实例分析
在Dreamweaver CS6中，创建Business Catalyst站点与创建本地静态站点一样，非常方便、快捷，创建完的Business Catalyst站点的效果如图1-17所示。下面我们将向大家介绍一下如何创建Business Catalyst站点。图1-17 最终效果
知识点链接
通过执行“站点→新建Business Catalyst站点”菜单命令，在弹出的对话框中进行设置，即可创建Business Catalyst站点，其优势在于可以为网页设计者提供一个专业的在线远程服务器站点，从而能够获得一个专业的在线平台。
制作步骤
01 执行“站点→新建Business Catalyst站点”菜单命令，Dreamweaver CS6会自动连接Business Catalyst平台服务器，如图1-18所示。弹出“登录”窗口，需要使用所注册的Adobe ID登录，如图1-19所示。图1-18 连接Business Catalyst平台服务器图1-19 登录窗口
02 输入Adobe ID和密码，单击“登录”按钮，登录到Business Catalyst服务器，显示创建Business Catalyst站点的相关选项，如图1-20所示。在“Site Name”文本框中输入Business Catalyst站点的名称，在URL文本框中输入Business Catalyst站点的URL名称，如图1-21所示。图1-20 business Catalyst站点设置选项图1-21 设置business Catalyst站点
03 单击“Create Free Temporary Site”按钮，即可创建一个免费的临时Business Catalyst站点。如果所设置的URL名称已经被占用，则会给出相应的提示，并自动分配一个没有被占用的URL，如图1-22所示。单击“Create Free Temporary Site”按钮，弹出“选择站点的本地根文件夹”对话框，浏览到Business Catalyst站点的本地根文件夹，如图1-23所示。图1-22 自动分配URL名称图1-23 “选择站点的本地根文件夹”对话框
04 单击“选择”按钮，确定站点的本地根文件夹，弹出“输入站点的密码”对话框，可以为所创建Business Catalyst站点设置密码，如图1-24所示。单击“确定”按钮，Dreamweaver CS6会自动将Business Catalyst站点中的文件与本地根文件夹进行同步，如图1-25所示。图1-24 “输入站点的密码”对话框图1-25 “文件活动”对话框
05 完成Business Catalyst站点与本地根文件夹的同步操作，在“文件”面板中可以看到所创建的Business Catalyst站点，如图1-26所示。在本地根文件夹中可以看到从Business Catalyst站点中下载的相关文件，如图1-27所示。
06 打开浏览器，在地址栏中输入所创建的Business Catalyst站点的URL地址，可以看到所创建Business Catalyst站点的默认网站效果，
试读结束[说明：试读内容隐藏了图片]