作者：徐琴,张晓颖
出版社：航空工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
CSS+DIV网页样式与布局案例教程试读：
前言
随着社会的发展，传统的教学模式已难以满足就业的需要。一方面，大量的毕业生无法找到满意的工作，另一方面，用人单位却在感叹无法招到符合职位要求的人才。因此，从传统的偏重知识的传授转向注重就业能力的培养，并让学生有兴趣学习，轻松学习，已成为大多数高等院校及中、高等职业技术院校的共识。
教育改革首先是教材的改革，为此，我们走访了众多高等院校及中、高等职业技术院校，与许多教师探讨当前教育面临的问题和机遇，然后聘请具有丰富教学经验的一线教师编写了这套以任务为驱动的“案例教程”丛书。本书特色本书特色（1）满足教学需要。使用最新的以任务为驱动的项目教学方式，将每个项目分解为多个任务，每个任务均包含“任务说明”、“任务实施”和“支撑知识点”等内容：
■ 任务说明：让读者了解本任务需要制作的案例效果，以及需要学习的知识要点。
■ 任务实施：是制作案例的具体过程。大多数任务实施都分为构建网页HTML结构和构建CSS样式两部分，读者可在完成案例的过程中掌握HTML和CSS的相关知识。
■ 支撑知识点：对相关知识要点和技能进行系统讲解。（2）满足就业需要。在每个任务中都精心挑选与实际应用紧密相关的网页设计案例，以及讲解最核心、最实用的HTML和CSS技术，并强调具体技术的灵活应用，从而让读者真正做到学以致用。（3）经典的网页布局案例。CSS＋DIV网页布局是本书的重点，在本书的后5个项目中安排了多个经典的网页布局案例，包括企业网站、博客网站、学校网站、婚礼策划网站和旅游网站相关页面的制作，让读者真正掌握网页布局的精髓。（4）素材丰富。学习HTML和CSS的关键在于实践，本书除了为任务实施中的案例提供素材外，还为支撑知识点中讲解的大部分知识要点提供了实例演示文件。（5）体例丰富。各项目都安排有项目导读、学习目标、项目实训、项目总结等内容，从而让读者在学习项目前做到心中有数，学完后还能对所学知识和技能进行总结和练习。本书读者对象本书读者对象
本书可作为高等院校，中、高等职业技术院校，以及各类计算机教育培训机构的网页设计教材，也可供广大网页设计爱好者自学使用。本书内容安排
■ 项目一、项目二：学习HTML＋CSS网页设计的基础知识，包括网页设计软件Dreamweaver的使用方法、HTML和CSS基本概念、HTML语法基础、HTML常用标签、CSS的选择器类型、在HTML文档中引入CSS样式表的方法等。
■ 项目三至项目八：学习使用CSS设置和美化网页中文字、图片、背景、超链接、导航栏、表格和表单的方法，以及如何解决CSS与浏览器的兼容问题。读者在学习时，既要掌握CSS的相关属性，更要掌握如何灵活应用这些属性设置网页元素的外观。此外，还应掌握构建网页的HTML结构的方法。
■ 项目九至项目十一：掌握使用CSS＋DIV对网页进行布局的方法，包括标准流布局、浮动布局和定位布局等。其中，读者除了需要掌握相关HTML标签和CSS属性外，还应了解盒子模型的概念，掌握计算盒子模型大小和位置的方法。
■ 项目十二、项目十三：安排了两个综合实例，以帮助读者总结前面所学知识，能够综合应用HTML和CSS各种技术制作出符合实际应用需要的网页。本书教学资料下载
本书配有精美的教学课件，并且书中用到的全部素材都已整理和打包，读者可以登录我们的网站（http://www.bjjqe.com）下载。本书的创作队伍
本书由北京金企鹅文化发展中心策划，由徐琴、张晓颖任主编，周龙福、陈欣、谢东亮和陈凌任副主编。徐琴负责内容设计与项目一、二、三、四的编写及全书统稿整理工作；张晓颖负责项目八、十二、十三的编写及部分修改工作；陈欣负责项目九、十、十一的编写工作；陈凌负责项目五、六、七的编写工作；周龙福和谢东亮负责内容、教学方法设计。
尽管我们在写作本书时已竭尽全力，但书中仍会存在这样或那样的问题，欢迎读者批评指正。另外，如果读者在学习中有什么疑问，可登录我们的网站（http://www.bjjqe.com）去寻求帮助，我们将会及时解答。编者2012年8月项目一 网站开发入门项目导读
网站是一种新型的信息传播工具，人们通过它来发布自己想要公开的资讯及提供相关的网络服务。许多公司都有自己的网站，用于宣传公司或发布产品信息等。下面我们就来了解一些与网站建设相关的基础知识。学习目标
●了解网站开发的基本流程和相关知识。
●了解Dreamweaver工作环境及使用方法，能够建立站点及新建网页。
●了解HTML与CSS在网页制作中的作用，了解Web标准的概念，能够使用HTML标签创建简单的网页。任务一 了解网站开发流程任务说明
网站的创建需要经历前期准备（需求分析）、中期制作和后期测试发布3个大的阶段。前期准备包括了解网站的业务背景、明确网站的设计风格、确定网站的内容等；中期制作主要包括创建站点、制作页面、制作样式；后期的测试和发布工作包括检查页面效果是否美观、链接是否完好、是否与浏览器兼容，以及发布网站等。
在本任务中，我们将以一个汽车厂商网站MACACO的开发流程为例，让读者能够从宏观上掌握一个网站的制作流程，为后面的学习奠定基础。任务实施
网站开发流程从整体上来说可以分成3大部分，分别是网站设计、网站制作和后期维护，如图1-1所示。在这3部分中，本书着重介绍的是网站制作部分，强调3个要点的讲解：设置站点、搭建网页主体结构层、搭建网页样式层。下面详细介绍一下网站的开发流程。图1-1 网站开发流程图
步骤1 确定主题：可以分为分析策划和资料收集两个部分。制作网站前，首先需要对网站进行整体分析，分析网站的功能及建站的目的，确定用户群和网站内容，即确定网站的主题。在确定主题后，可绘制出网站架构图，并搜集建站所需的相关资料和素材，图1-2是MACACO网站的架构图，包括6个频道（栏目）。另外，可要求客户提供与公司相关的文字和图片等资料，如公司介绍、产品图片等。图1-2 MACACO网站架构图
步骤2 设计页面：网页设计师与客户沟通，并了解客户的基本要求后，制定网站建设方案并使用Photoshop等图像处理软件进行页面效果图设计。页面效果图主要包括首页效果图和频道首页效果图，图1-3是MACACO网站的首页效果图。将效果图设计好后交给客户查看，客户查看后提出修改意见，设计人员根据客户意见进行修改，并最终确定网页页面效果图。
步骤3 效果图切片：当效果图得到客户的认可后，设计师可使用Photoshop等图像处理软件中的切片工具将效果图切割并保存为JPG、GIF或PNG格式的小图片，将它们作为网页制作的图像素材。
提示
切割效果图时要考虑后期的布局方法，根据布局的需要进行切割。
步骤4 设置站点：从这一步骤开始进入到网页制作阶段。首先在本地磁盘创建网站根文件夹及子文件夹，并将制作网页需要的素材资源分类放置在各文件夹中，之后在网页制作软件Dreamweaver中定义站点。图1-4是MACACO网站的本地文件目录及在Dreamweaver中的站点结构。图1-3 MACACO网站的首页效果图
知识库
网站文件的目录结构一般可分为两种，一种是扁平式的，就是所有网页都放在网站根目录下，该方式比较适合小型网站；还有一种是树形结构，根目录下分成多个子文件夹，然后在每个子文件夹下再放上属于该类别的网页或素材。图1-4 网站的本地文件目录及在Dreamweaver中的站点结构
步骤5 制作网页：网页的制作可以分为结构层制作和样式行为层制作两部分。结构层制作就是使用HTML代码搭建网页的主体结构，如文字、图片、超链接等，可以直接编写代码来实现，也可以在Dreamweaver的可视化界面中操作。在结构层制作好后，就可以使用CSS（层叠样式表）及JavaScript （动态脚本语言）来制作网页的样式层及行为层，完成网页的布局和外观设置。
步骤6 测试上传网站：在将网站上传到服务器前，需要对其进行测试及优化。测试包括兼容性测试、链接测试等；优化是尽可能减小网页文件的体积及日后发生错误的机率。完成测试和优化后，就可以利用FTP工具将网站发布到所申请的空间服务器上。网站上传后，可继续通过浏览器进行实地测试。
步骤7 网站推广：网站上传后，需要进行推广和宣传，以提高网站的访问量及知名度。推广网站的方法有很多，如群发电子邮件、注册到搜索引擎、借助同类网站留言、加入友情链接、传统媒体宣传等。
步骤8 维护更新：制作好网站后，还需要在日常中对其进行维护和更新。站点只有不断地补充新内容，才能吸引浏览者，延长使用寿命。支撑知识点
通过对网站开发流程的学习，我们对创建网站有了完整的认识。下面对一些与网站紧密相关的基础知识进行了解。这些概念是创建网站的基础，也是学习网页必须掌握的内容。
一、网页、网站和主页
简单来说，网页就是我们上网时在浏览器中打开的一个个画面。网页中可以包含文字、图像、表格、超链接、声音、影像等，其中文字、图像、超链接是组成网页最基本的3个元素。网站就是一组相关网页的集合，是通过Internet向全世界发布信息的载体。
主页就是打开某个网站时显示的第一个网页，又叫首页。每个网站都有一个主页，通过它可以打开网站的其他页面。主页文件基本名为index或default，如index.html、default.html、index.asp和index.aspx等。
二、Internet、IP地址和域名
Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互连设备连接而成的、全球最大的开放式计算机网络。
因特网上连接了不计其数的服务器和客户机，每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。
由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符用以表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“www.sohu.com”，然后按【Enter】键就可以访问搜狐网站了。
知识库
在创建好网站后需要申请域名，并将网站上传到服务器上，这样别人才能通过互联网访问网站。
三、WWW、HTTP、URL和浏览器
WWW是World Wide Web的缩写，中文称为“万维网”，也可简称为Web，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由“统一资源标识符”（URL）标识，并利用超文本传输协议（Hypertext Transfer Protocol，HTTP）传送给使用者。
当你想访问万维网上的一个网页（或者其他资源）时，通常首先在浏览器中输入该网页的URL，或者通过超链接方式发送访问该网页的请求。Web服务器接在收到请求后，会将信息发送到您的电脑。由于网页文件都是一些HTML（超文本标记语言）代码或其他代码，因此还需要由浏览器解释为文本、图片和超链接等可视化的网页信息。
■ URL：统一资源标识符，也称为网址，这是世界通用的负责给万维网上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在服务器中的路径和文件名4部分组成，如图1-5所示。图1-5 URL示例
■ HTTP：超文本传送协议，它负责规定浏览器和服务器怎样互相交流。
■ HTML：超文本标记语言，它使用标签来定义网页的结构，我们将在后面具体学习。
■ 浏览器：是WWW服务的客户端浏览程序。使用它可以向万维网服务器发送各种请求，并对从服务器发来的超文本信息进行解释和显示。任务二 创建Dreamweaver站点任务说明
Dreamweaver是由美国Adobe公司推出的一款专业的网页编辑软件，它集网页设计和网站管理于一体，提供网页的可视化编辑和HTML代码编辑两种操作界面，能够有效地开发和维护基于Web标准的网站和应用程序，是网页制作者学习的首选。
本任务通过创建一个贯穿全书的站点，学习Dreamweaver的操作界面和站点的创建。养成在制作网页前先建立站点的好习惯，可以为以后系统地管理和维护网站打好基础。任务实施
站点是一个网站中所有文件和资源的集合。用户可以使用Dreamweaver在计算机上创建站点和网页，并将站点上传到Web服务器，还可以在保存文件后随时上传更新的文件来对站点进行维护。使用Dreamweaver搭建站点的方法很简单，下面我们便来学习在本机上创建静态站点的方法。在本书后面大部分任务实施中制作的网页，都需在该站点中创建。
步骤1 创建站点根目录。在使用Dreamweaver搭建站点前，需要先在自己的电脑中创建一个以英文或数字命名的空文件夹来作为网站根文件夹，此处我们在本机D盘下新建文件夹My Web。
提示
网站中不仅包含网页，还包含图像、音乐、样式表等文件。为便于维护，最好将不同的文件分类放置在不同的文件夹下，比如，图像文件一般放置在名为images的文件夹中，样式表文件一般放置在名为style的文件夹中。网站中所有文件及文件夹的命名尽量不要使用中文，以免制作过程中因文件路径包含中文字符，使文件无法正常显示。包含网站中所有本地文件及文件夹的文件夹称为网站根文件夹，用户可根据需要在其中创建图像及样式文件夹。
步骤2 在Dreamweaver中新建站点。启动Dreamweaver CS5，选择菜单栏中的“站点”＞“新建站点”菜单，如图1-6所示。图1-6 选择“新建站点”菜单
步骤3 弹出“站点设置对象”对话框，在“站点名称”文本框中输入My Web作为该站点的名称，在“本地站点文件夹”文本框中输入步骤1中创建的文件夹的物理地址，或单击右侧的“浏览文件夹”按钮，在打开的对话框中选择站点文件夹，如图1-7左图所示。
步骤4 单击“保存”按钮后，Dreamweaver中的“文件”面板中将显示新创建的站点，如图1-7右图所示。至此，我们便完成了该静态站点的创建。图1-7 创建站点的基本界面及“文件”面板
提示
选择菜单栏中的“窗口”＞“文件”菜单，可以打开或关闭“文件”面板。使用“文件”面板可以方便地管理站点中的网页和素材，比如我们可以在“文件”面板中创建网站所需要的网页文件和文件夹。
具体方法为：选中“文件”面板中用来保存网页或文件夹的文件夹（如站点根文件夹），单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”或“新建文件”项，然后给文件夹或文件命名，如图1-8所示。双击文件列表中的网页文件则可以在文档编辑窗口中将其打开。
步骤5 在制作网页的过程中，如果需要管理站点，比如对站点进行编辑、复制、删除或导出等操作，可以选择菜单栏中的“站点”＞“管理站点”菜单，打开如图1-9所示的“管理站点”对话框进行操作。图1-8 在“文件”面板中新建网页文件图1-9“管理站点”对话框
提示
命名文档名称时，不要更改扩展名（HTML网页的扩展名为.html）。要在“文件”面板中删除某个文件，可在选中文件后按键盘上的【Delete】键。支撑知识点
了解了在Dreamweaver中创建站点的方法后，接下来启动Dreamweaver，认识一下它的工作界面，并学习新建、保存、打开、预览及关闭网页文档的方法。
一、启动和退出Dreamweaver
1. 启动Dreamweaver
安装好Dreamweaver后，就可以使用该软件了。启动该软件的方法主要有以下2种。
■ 方法一：通过双击操作系统桌面上的Dreamweaver快捷图标启动。
■ 方法二：选择“开始”＞“所有程序”＞“Adobe Design Premium CS5 ”＞AdobeDreamweaver CS5”菜单启动。
使用以上方法启动Dreamweaver CS5后，默认情况下将进入其起始页，如图1-10所示。图1-10 Dreamweaver CS5的起始页
2. 退出Dreamweaver
退出Dreamweaver的方法主要有以下3种。
■ 方法一：在Dreamweaver的菜单栏中选择“文件＞“退出”菜单。
■ 方法二：按【Ctrl＋Q】组合键退出。
■ 方法三：单击Dreamweaver操作界面右上角的“关闭”按钮退出。
二、Dreamweaver工作界面介绍
启动Dreamweaver后，在其起始页中单击“新建”列中的任一项，将会创建一个相应格式的新文档，并进入Dreamweaver CS5工作界面。此处我们单击“HTML”项，创建一个.html格式的文档并进入Dreamweaver CS5工作界面，如图1-11所示。图1-11 Dreamweaver CS5工作界面
由图1-11可以看出，Dreamweaver CS5的工作界面由应用程序栏、文档标签、文档工具栏、文档窗口、标签选择器、状态栏、属性检查器和面板组等组成，下面我们就最常用的界面元素进行介绍。
1. 应用程序栏
应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、“CS Live”按钮和程序窗口控制按钮。
菜单栏几乎集中了Dreamweaver CS5的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某项命令，可首先单击主菜单名打开其下拉菜单，然后用鼠标单击相应的菜单项。
程序窗口控制按钮包括“最小化窗口”按钮、“最大化窗口”按钮和“关闭窗口”按钮。
2. 文档标签栏
文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及还原按钮；下方显示当前文档中的包含文档（如CSS文档）以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档，如图1-12所示。图1-12 文档标签栏
提示
如果文档名后带一个*号，表示网页已修改但未保存。
3. 文档工具栏
利用文档工具栏中包含的按钮可以在文档的不同视图之间快速切换，如图1-13所示。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。图1-13 文档工具栏
■ A. 代码：在文档窗口中显示代码视图。代码视图是一个用于编写HTML、CSS、JavaScript、服务器语言（如PHP或ColdFusion标记语言（CFML））以及其它任何类型代码的手工编码环境，如图1-14所示。在Dreamweaver的设计视图中对网页文档进行的操作，也将自动转换为相应的网页代码。图1-14 代码视图
■ B. 拆分：在文档窗口中同时显示代码视图和设计视图。这样当用户在代码视图中编辑网页源代码后，单击设计视图中的任意位置或单击“刷新设计视图”按钮，会立刻看到相应的编辑结果。
■ C. 设计：在文档窗口中显示设计视图。在设计视图中看到的网页效果类似于在浏览器中看到的效果，用户可在该视图中直接编辑网页中的各个对象。
提示
如果当前文档是XML、JavaScript、Java、CSS或其他基于代码的文件类型，则“设计”和“拆分”按钮将不可用。
■ F. 实时视图：与设计视图类似，但实时视图能更逼真地显示文档在浏览器中的效果，您还可以像在浏览器中一样与文档进行交互。在实时视图中不可编辑网页文档，不过您可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。
■ D. 实时代码：仅在实时视图中查看文档时可用。实时代码视图显示浏览器用于执行该页面的实际代码，当您在实时视图中与该页面进行交互时，它可以动态变化。实时代码视图不可编辑。
■ H. 在浏览器中预览/调试：在浏览器中预览或调试文档，单击后可在弹出的列表中选择一个浏览器版本。
■ I. 刷新设计视图：用于在代码视图中进行更改后刷新文档的设计视图。在执行某些操作（如保存文档或单击该按钮）之后，用户在代码视图中所做的更改才会自动显示在设计视图中。
■ K. 文档标题：可为文档设置标题。浏览网页时，该标题将显示在浏览器的标题栏。
4. 状态栏
状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息，如图1-15所示。图1-15 状态栏
其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构（HTML网页文档就是由一个个标签组成的，我们将在后面讲解），单击某个标签可以选中网页中该标签所代表的内容，如单击＜table＞标签，可选中网页中与之对应的表格。
5. 属性检查器
使用属性检查器可以检查和编辑当前选定网页元素（如文本和插入的对象）的最常用属性。属性检查器的内容会根据选定元素的变化而变化。例如，如果选择页面中的图像，则属性检查器将显示图像属性（如图像的文件路径、图像的宽度和高度、图像周围的边框等），如图1-16上图所示；如果选择文本，则属性检查器又会显示文本的相关属性，如图1-16下图所示。图1-16 属性检查器
6.“插入”面板“插入”面板包含用于创建和插入对象（例如表格、图像和链接）的按钮，这些按钮按几个类别进行组织，默认显示“常用”类别，如图1-17左图所示，您可以单击其右侧的下三角按钮，从弹出的列表中选择其他类别，如图1-17右图所示。例如，要在页面中插入图像，可先定位插入点，然后单击“插入”面板“常用”类别中的“图像：图像”按钮。图1-17“插入”面板
■ 常用类别：用于创建和插入最常用的对象，如图像、表格、超链接、＜div＞标签等。
■ 布局类别：用于插入表格、表格元素、＜div＞标签、框架和Spry菜单栏等与页面布局相关的元素。
■ 表单类别：用于创建表单和插入表单元素。
■ 数据类别：可以插入Spry数据对象和其他动态元素，例如记录集、重复区域及插入记录表单和更新记录表单等。
■ 文本类别：用于插入各种文本格式和列表格式的标签，如＜b＞、＜em＞、＜p＞、＜hl＞和＜ul＞等。
7.“文件”和“CSS样式”面板“文件”面板用于管理站点中的所有文件和文件夹，包括素材文件和网页文件，如图1-18左图所示。在前面的任务实施中已经介绍过该面板，这里不再赘述。
使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等，如图1-18右图所示。图1-18“文件”面板和“CSS样式”面板
提示
默认状态下，Dreamweaver提供的面板位于文档窗口右侧。要打开某个面板，可选择“窗口”莱单中的相应选项。
8. 工作环境参数设置
利用“首选参数”对话框可以修改Dreamwevar的系统参数。选择菜单栏中的“编辑”＞“首选参数”菜单或按快捷键【Ctrl＋U】可打开该对话框，如图1-19所示。图1-19“首选参数”对话框
三、新建和保存网页文档
在Dreamweaver CS5中可以创建两种形式的网页文档，一种是直接创建空白网页文档，另一种是通过Dreamweaver CS5内置模板创建具有一定内容和样式的网页文档。
下面在Dreamweaver CS5中新建一个空白网页文档，并将其保存，具体操作如下。
步骤1 启动Dreamweaver CS5后，选择“文件”＞“新建”菜单，或按【Ctrl＋N】组合键，打开“新建文档”对话框。
步骤2 在左侧的“文档类型”列表中选择“空白页”，在“页面类型”列表中选择网页类型（此处选择“HTML”），在“布局”列表中选择布局类型（此处选择“无”），单击“创建”按钮，便创建了一个新文档，如图1-20所示。图1-20 创建新文档
试读结束[说明：试读内容隐藏了图片]