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

《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
第十六讲使用DIV+CSS格式化网页
课堂回顾：我们制作网页的重要步骤就是能够布局好网页，也就是将设计好的网页设计图分一般有下列４种方法：
１、将外部样式表链接到HTML文件上。
２、将外部样式表导入到HTML文件中.
3、将样式表内嵌HTＭＬ文件中。
4、将样式表内联到HTMＬ文件行中。
这里我们重点学****一下第一种,将css样式表作为独立的样式文件与hｔml文档进行关联进行网页制作。
外联样式表就是把外部的样式表文件链接到网页上，〈lｉnk＞标签实现,关于<linｋ〉标签在前面的章节中有详细的介绍。将<link＞标签加入到<head＞标签之间,具体格式如下:
<head＞
〈lｉnｋ reｌ=ｓtylesheｅｔ href=“”　type="text／css”＞
…
＜／heａd>
我们将之前做过的实例，使用DIV+ＣSＳ的方法来进行制作，看看我们如何具体操作：
注意事项：
一个网页文件
ＤIV+ＣＳＳ方法制作网页的要领就是将html标记与css样式分离成为2个文件，即一个页面包括2个文件，一个是hｔｍl文档，描述网页页面有什么内容,另一个就是这个ｈｔmｌ文档所关联的一个cｓs文件,这里描述网页布局的样式以及网页内部所有元素的样式.
图解：
Css文件
Html文件
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
我们在看下面实例:将以前做过的这个页面使用diｖ+cｓs的方法进行制作
【学****目标】理解将网页的内容与样式分开书写的制作方法，这样将网页的内容与样式分隔开写的做法会使得页面代码较为规范，可读性强
【讨论实例】
……
【教师指导】简述实例制作过程
　1、新建立一个站点,在站点中新建一个ｈtml文档,以及一个扩展名为。css的文件。，。
用Dreaｍｗｅaｖeｒ将新建立的ｉｎdex。ｈtｍl文件打开。在<head〉</heaｄ〉标记之间输入
＜liｎｋ hｒｅf="ｉndex。ｃｓｓ"　reｌ=”sｔylｅsheｅt" type="text/ｃsｓ＂　／＞
将名为iｎｄex．，．ｃss样式文件中的样式所决定。按快捷键F1２预览网页,然后将网页关闭，回到Dｒeａmｗｅａｖｅr中，我们可以看见在文件列表中，会呈现下面形式：
indeｘ．htｍｌ文件进行编辑时，多了一个index。。hｔml的源代码窗口和inｄex．css窗口中交互进行。在源代码窗口中我们要使用ｄiv　以及ｈｔｍｌ标记书写网页的元素,而在indｅx。ｃsｓ窗口中，我们为这些网页元素编辑属性和样式.
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
3、根据设计图的样式，我们还是要先布局好网页的整体结构。只不过这次我们要使用DIV