下载此文档

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


文档分类:IT计算机 | 页数:约5页 举报非法文档有奖
1/5
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/5 下载此文档
文档列表 文档介绍
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
第十六讲使用DIV+CSS格式化网页
课堂回顾:我们制作网页的重要步骤就是能够布局好网页,也就是将设计好的网页设计图分一般有下列4种方法:
1、将外部样式表链接到HTML文件上。
2、将外部样式表导入到HTML文件中.
3、将样式表内嵌HTML文件中。
4、将样式表内联到HTML文件行中。
这里我们重点学****一下第一种,将css样式表作为独立的样式文件与html文档进行关联进行网页制作。
外联样式表就是把外部的样式表文件链接到网页上,从而在网页中使用样式表.此方法通过〈link>标签实现,关于<link〉标签在前面的章节中有详细的介绍。将<link>标签加入到<head>标签之间,具体格式如下:
<head>
〈link rel=stylesheet href=“style.css” type="text/css”>

</head>
我们将之前做过的实例,使用DIV+CSS的方法来进行制作,看看我们如何具体操作:
注意事项:
一个网页文件
DIV+CSS方法制作网页的要领就是将html标记与css样式分离成为2个文件,即一个页面包括2个文件,一个是html文档,描述网页页面有什么内容,另一个就是这个html文档所关联的一个css文件,这里描述网页布局的样式以及网页内部所有元素的样式.
图解:
Css文件
Html文件
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
我们在看下面实例:将以前做过的这个页面使用div+css的方法进行制作
【学****目标】理解将网页的内容与样式分开书写的制作方法,这样将网页的内容与样式分隔开写的做法会使得页面代码较为规范,可读性强
【讨论实例】
……
【教师指导】简述实例制作过程
 1、新建立一个站点,在站点中新建一个html文档,以及一个扩展名为。css的文件。例如我们新建一个index.html的文件,以及index.css的文件。
用Dreamweaver将新建立的index。html文件打开。在<head〉</head〉标记之间输入
<link href="index。css" rel=”stylesheet" type="text/css" />
将名为index.css的样式文件与index.html文档进行关联,这样在index.html中我们编写的网页上的内容的样式将由index.css样式文件中的样式所决定。按快捷键F12预览网页,然后将网页关闭,回到Dreamweaver中,我们可以看见在文件列表中,会呈现下面形式:
index.html文件进行编辑时,多了一个index。css文件.接下来我们网页制作的工作将在index。html的源代码窗口和index.css窗口中交互进行。在源代码窗口中我们要使用div 以及html标记书写网页的元素,而在index。css窗口中,我们为这些网页元素编辑属性和样式.
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义
3、根据设计图的样式,我们还是要先布局好网页的整体结构。只不过这次我们要使用DIV

《网页设计与制作》课程讲义 来自淘豆网www.taodocs.com转载请标明出处.

猜你喜欢