《网页设计与制作》课程讲义

网页设计与制作课程讲义 第十六讲 使用DIV+CSS格式化网页课堂回顾：我们制作网页的重要步骤就是能够布局好网页，也就是将设计好的网页设计图分割成一个个单元格，然后将每部分图片与文字等网页信息添加到布局好的结构中，在之前我们使用的布局方法是使用表格。使用表格布局网页，加以在html标记中进行各个部分的属性设置构成了我们的网页。那么当前较为流行的制作网页的另一个方法就是用 DIV+CSS格式化网页。那么我们如何用DIV+CSS格式化网页？使用这种方法格式化网页有什么优越的地方呢？下面我们将通过制作网页实例的对比来学习和参照一下两者之间制作网页的区别。在前面的章节中学习了基本的网页元素，及其对应的HTML标签的语法。但对于网页设计者来说，仅学会这些是不够的。在Web 2.0标准中，HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页，还需要使用CSS样式表来表现网页的外观。本章将介绍CSS的基本概念，以及通过CSS控制网页元素，如文字外观、背景设置和元素定位等。新课学习要点提示：一、 CSS基本概念CSS是Cascading Style Sheets的缩写，中文译为层叠样式表，用于控制或增强网页外观样式，并且可以与网页的内容相分离。CSS 1.0是W3C工业合作组织首次发布于1997年，用于对HTML语言功能的补充。1998年又推出了CSS 2，进一步增强了HTML的语言功能。但由于浏览器之间的差异，对CSS的支持并不完全兼容。本书讲解的CSS主要针对IE用户。二、CSS功能介绍及优点在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。但随着Web的流行与发展，漂亮的外观变得格外重要。随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。此时CSS的出现为这种状况提供了解决之道。CSS还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁合理且清晰可读。简单了解CSS用于表现网页，控制或增强网页的外观。三、引用CSS既然CSS有如此强大的功能，那么在网页中如何进行引用？一般有下列4种方法：1、将外部样式表链接到HTML文件上。2、将外部样式表导入到HTML文件中。3、将样式表内嵌HTML文件中。4、将样式表内联到HTML文件行中。这里我们重点学习一下第一种，将css样式表作为独立的样式文件与html文档进行关联进行网页制作。外联样式表就是把外部的样式表文件链接到网页上，从而在网页中使用样式表。此方法通过标签实现，关于标签在前面的章节中有详细的介绍。将标签加入到标签之间，具体格式如下： 我们将之前做过的实例，使用DIV+CSS的方法来进行制作，看看我们如何具体操作:注意事项：一个网页文件1、 DIV+CSS方法制作网页的要领就是将html标记与css样式分离成为2个文件，即一个页面包括2个文件，一个是html文档，描述网页页面有什么内容，另一个就是这个html文档所关联的一个css文件，这里描述网页布局的样式以及网页内部所有元素的样式。2、 图解：Css文件Html文件我们在看下面实例：将以前做过的这个页面使用div+css的方法进行制作【学习目标】理解将网页的内容与样式分开书写的制作方法，这样将网页的内容与样式分隔开写的做法会使得页面代码较为规范，可读性强【讨论实例】 【教师指导】简述实例制作过程 1、新建立一个站点，在站点中新建一个html文档，以及一个扩展名为.css的文件。例如我们新建一个index.html的文件，以及index.css的文件。 3、 用Dreamweaver将新建立的index.html文件打开。在标记之间输入将名为index.css的样式文件与index.html文档进行关联，这样在index.html中我们编写的网页上的内容的样式将由index.css样式文件中的样式所决定。按快捷键F12预览网页，然后将网页关闭，回到Dreamweaver中，我们可以看见在文件列表中，会呈现下面形式： index.html文件进行编辑时，多了一个index.css文件。接下来我们网页制作的工作将在index.html的源代码窗口和index.css窗口中交互进行。在源代码窗口中我们要使用div 以及html标记书写网页的元素，而在index.css窗口中，我们为这些网页元素编辑属性和样式。3、根据设计图的样式，我们还是要先布局好网页的整体结构。只不过这次我们要使用DIV+css的方法来进行，我们还是设想将上面网页设计图划分为下面的结构：空白Logo部分常用链接Banner部分空白页面主体版权4、接上一步骤，我们要用div + css的方法确定整个页面的长、宽。在inde.html的源代码窗口中进行书写：在body标记中书写上述内容，div 标记是双标记，有开始有结束。Class代表了div中声明的内容的名称，这里我们先做的就是页面的大小，pagebody是我们自己为这个部分起的名字。现在这对 div标记就代笔了在index.html的页面上有了这么一个区域，名字是pagebody，下面我们在对应的css窗口中，来格式化这个区域。我们可以看到在css窗口，我们在里面输入了.pagebody width: 984px; height:672px; margin:auto;这句代码，含义是pagebody这个部分的属性，宽为984像素，高为672像素，margin:outo含义为这个区域是水平方向在浏览器窗口中是居中对齐的。这是我们可以通过Dreamweaver的网页预览窗口查看我们书写并且格式化的这个区域。5、由此，我们可以看出，在一个制作一个网页文件时，如果我们使用div+css的方法进行制作，那么我们大概的做法就是，在网页的源代码窗口中通过用 的方法先书写这个页面