打印

网页设计教程-教你从最开始了解DIV CSS

本主题由俯卧撑于 2008-9-22 05:47 设置高亮

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

1^# 大中小发表于 2008-8-27 20:17 只看该作者

网页设计教程-教你从最开始了解DIV CSS

第一讲网页设计的基本认识

bbs.loveufo.com.cn; d; r4 _/ `6 g( i: ~+ ?- c( _
　　网页是由各种各样的元素组成，比如图片，文本，flash，流媒体等等。bbs.loveufo.com.cn2 b3 x5 D% _# Y- k
　　网页的书写方式：《世界未解之谜》网站是一家致力于打造权威全面的科学知识普及的文学及科技网站，站长根据世界名著《世界未解之谜》改编成为网站，为广大的学生，以及对宇宙世界充满好奇的朋友提供第一手资料，同时网站携手各大知名网站，为您提供最新的科技动态，有科技类、生物类、化学类、人文类等等等，我们没有研究宇宙的条件，但是我们拥有知情权，关心科技发展，关心宇宙苍生，让《世界未解之谜》给您一次提供服务的机会，让我们跟随《世界未解之谜》认识世界、认知世界。4 I J- y. n( A/ G
　　网页的书写方式一般分为两种，一种是所见即所得方式，一种是所见非所得方式。（对应于ＤＷ的设计和代码）
　　所见即所得方式非常的简单。我们可以参考下DVBBS（论坛程序的发帖模式），这种模式非常的简单，易学，但是也是最没前途，最入门的方式。
　　我们这里主要学习的将是所见非所得的方式，即XHTML代码及其语法模式，再配合上所见即所得方式的检测模式。
　　既然我们决定了一个制作网页的方法，我们就需要找一个自己用着顺手的软件。. J- P9 T& I9 b4 n/ C S
　　目前比较通用的软件是Dreamwaver，通常我们简称它为DW，它的最新版本是CS3版本，这个版本加强了对XHTML中DIV+CSS以及脚本语言的书写方便性，非常适合制作网页。未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明1 R- F) Z6 `( P. x7 I, G' K
　　当然，你如果能熟悉XHTML的标记，属性及语法模式，你也可以用一切可以书写文本的东西做出网页，比如说记事本、Editplus什么的。
　　先普及两个基本概念。
　　第一个是标记$ ^2 m: Z0 H; }5 I6 L
　　标记是由<>括起，中间含有标记识别字符的一种东西，它是网页的基本组成元素，相当于人体的细胞一样。它一般一对标记组成，以</>结尾，比如<title></title>，这个是网页标题标记。当然，也有特殊的，由一个标记组成，比如<img>图象标记。某些标记即可以单独出现又可以以对出现，比如换行<br>，换段<p>标记。HTML是一种开放的语言，这些都是可以识别的。当然，我们应该养成有开始就有结束的习惯，另外也要养成标记和属性一律用小写的习惯，虽然大小写在HTML和XHTML中并不会有分别，但是在XML一类严格的网页语言中，大小写是区分的。
　　第二个是属性
　　属性就是修饰标记的东西，比如修饰文字标记<font>的color属性，他们一般写在<>之间。未解之谜,科普知识,UFO,外星人,飞碟,金字塔,玛雅文明2 _) K/ H( h3 H: c
　　那么，下面我们需要知道的也就是网页的基本部分了。
　　网页有两个基本部分，写段简单的东西来说明网页的基本部分：bbs.loveufo.com.cn- T( m# H, r7 U- o! a/ n
　　

复制内容到剪贴板

代码:

　　<html>

　　　　<head><title>开始网页</title></head>

　　　　<body>

　　　　　　<!--开始-->

　　　　　　<!--结束-->

　　　　</body>

　　</html>

我们可以看到html head body这3个标记，第一个html是声明这个是网页文件，也是网页的最开头，通常在它的上面还有段声明本网页符合W3C标准及标准来源的语句。第二个Head是声明网页的头部，这里面的东西包括关键字，标题，编码，有时候也有JS语句，VS语句等等。第三个Body是声明网页的主体部分，这里面写的就是我们在网页中看到的东西，当然，也有些看不到的东西，那就是注释语句，像程序语言里的注释语句一样，网页语言也有注释语句
如之间的部分就是注释语句，再如/* */这个注释语句，这个通常用于CSS中。

本帖最近评分记录

俯卧撑文彩 +20 真不错！加油！ 2008-9-22 05:42
俯卧撑金钱 +20 真不错！加油！ 2008-9-22 05:42
俯卧撑威望 +20 真不错！加油！ 2008-9-22 05:42

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

2^# 大中小发表于 2008-8-27 20:24 只看该作者

第二讲网页布局分析

　　网页是一个不断磨练的过程，而参考和分析经典的网页就是必不可少的东西了，现在的网页制作教学往往忽略这个东西，但是这个东西恰恰是最重要的。
未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明5 C j1 \) T- q8 N
　　网页分析学主要分为两个部分，一个是布局分析，一个是内容分析。
　　布局分析即观察一个网页，你能知道它的布局是怎么样的。bbs.loveufo.com.cn! @2 b$ @3 ?- a0 P5 M! W

　　我们先来看第一个页面

本帖隐藏的内容需要回复才可以浏览

3 t9 k( V! ?4 Q/ j' i t+ F6 K
未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明) @8 n7 C: l# v: r" R4 G# i
[ 本帖最后由气味儿于 2008-8-28 14:01 编辑 ]

附件: 您所在的用户组无法下载或查看附件

本帖最近评分记录

俯卧撑文彩 +20 有你更精彩！ 2008-9-22 05:43
俯卧撑金钱 +20 有你更精彩！ 2008-9-22 05:43
俯卧撑威望 +20 有你更精彩！ 2008-9-22 05:43

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

3^# 大中小发表于 2008-8-27 20:27 只看该作者

第3讲网页分析学—代码分析

附件：[hide][/hide]未解之谜,科普知识,UFO,外星人,飞碟,金字塔,玛雅文明8 {! }; }9 `7 a( C5 y; z; L& Y

　　网页设计是一个不断借鉴并且创新的过程,而研究网页的构成除开布局的分析以外,还有代码分析.未解之谜,科普知识,UFO,外星人,飞碟,金字塔,玛雅文明3 X2 G3 b- c, M8 Z
代码分析是通过分析相关的代码来研究小细节部分是如何构成,如何书写.如果说布局分析是从整个网页的框架来说的,那么,代码分析就是细化这个框架,让这个框架有血肉,有灵魂。
　　代码分析的基本方法--参考点法:
　　即通过在所见即所得上的某个明显的参考点来找出在所见非所得模式下的相关代码.这个参考点可以是某个词,某张图片。《世界未解之谜》网站是一家致力于打造权威全面的科学知识普及的文学及科技网站，站长根据世界名著《世界未解之谜》改编成为网站，为广大的学生，以及对宇宙世界充满好奇的朋友提供第一手资料，同时网站携手各大知名网站，为您提供最新的科技动态，有科技类、生物类、化学类、人文类等等等，我们没有研究宇宙的条件，但是我们拥有知情权，关心科技发展，关心宇宙苍生，让《世界未解之谜》给您一次提供服务的机会，让我们跟随《世界未解之谜》认识世界、认知世界。2 f+ Z, y) n0 w" g6 T8 i" {
　　如在3-4讲附录中的校内网页面中,顶部的菜单栏(附录1-2略为1-2,下同)
　　我们可以通过明显的参考点,首页,个人主页等词汇来找寻它在代码中的对应位置(2-1)未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明. U: t" f: M. {4 G! }' K
bbs.loveufo.com.cn/ F& K7 `. A# g; p4 M. a" s
　　又如栏目标题(1-3),我们通过它的题目,可以用”最近谁看过”这个作为参考点,我们可以找到它在代码中对应的位置(2-2).世界未解之谜官方论坛# ~, t% N. X5 U4 |- m, p

　　代码分析是作为一个网页制作者所应该掌握的基本技能.bbs.loveufo.com.cn4 a* |- d2 h3 H$ D

　　代码分析需要注意的几点:未解之谜,科普知识,UFO,外星人,飞碟,金字塔,玛雅文明( d5 O; ^/ m" r
《世界未解之谜》网站是一家致力于打造权威全面的科学知识普及的文学及科技网站，站长根据世界名著《世界未解之谜》改编成为网站，为广大的学生，以及对宇宙世界充满好奇的朋友提供第一手资料，同时网站携手各大知名网站，为您提供最新的科技动态，有科技类、生物类、化学类、人文类等等等，我们没有研究宇宙的条件，但是我们拥有知情权，关心科技发展，关心宇宙苍生，让《世界未解之谜》给您一次提供服务的机会，让我们跟随《世界未解之谜》认识世界、认知世界。9 M' k! L0 R, A( z0 f' U9 l" X
　　1 代码分析应该尽量让参考点更加具体
　　如,我们用”首页”这个词作为参考点来说:如果单是”首页”这个词,我们可以在校内页面找到以下几行(2-3)未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明# q" t' {" \- G4 a/ v/ |
如果我们用更加具体的参考点来描述,如我们再在参考点中加入”个人主页”这个词,就能更加的准确,这个道理和使用搜索引擎是一样的
未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明6 S! z+ t2 }/ r8 q- @
　　2 代码分析应该注意前后
　　代码分析应该注意前后的限制标记,这个在CSS中尤其重要,因为CSS并不像HTML中的属性一样,是定义哪就到哪,它可以定义整个<body>区域,也可以单单只定义一个层区域.这个我们在后面的CSS中会详细说明未解之谜|科普知识|UFO|外星人|飞碟|金字塔|玛雅文明) Q7 o# c! D( K" j* H: Z

　　3 代码分析应该有头有尾《世界未解之谜》网站是一家致力于打造权威全面的科学知识普及的文学及科技网站，站长根据世界名著《世界未解之谜》改编成为网站，为广大的学生，以及对宇宙世界充满好奇的朋友提供第一手资料，同时网站携手各大知名网站，为您提供最新的科技动态，有科技类、生物类、化学类、人文类等等等，我们没有研究宇宙的条件，但是我们拥有知情权，关心科技发展，关心宇宙苍生，让《世界未解之谜》给您一次提供服务的机会，让我们跟随《世界未解之谜》认识世界、认知世界。- z& |! Z( @) Q6 M% t1 f
　　正如标记有头有尾一样,当然,这里排除了部分特殊标记.我们的代码分析也是应该有头有尾的, 即我们分析是从一个标记的开始到这个标记的结束.

[ 本帖最后由气味儿于 2008-9-21 13:08 编辑 ]

附件: 您所在的用户组无法下载或查看附件

本帖最近评分记录

俯卧撑文彩 +100 支持发布精彩文章！ 2008-9-22 05:44
俯卧撑金钱 +100 支持发布精彩文章！ 2008-9-22 05:44
俯卧撑威望 +100 支持发布精彩文章！ 2008-9-22 05:44

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

4^# 大中小发表于 2008-8-27 20:27 只看该作者

第4讲 CSS的基本书写模式

复制内容到剪贴板

代码:

 





了解CSS

CSS全名为层叠样式表,是一种新的定义标记的方式.



CSS的书写

CSS的书写共有3类

一是书写以CSS为后缀的文件,在网页中调用的形式

<link href="111.css" rel="stylesheet" type="text/css">

<link>标记是作为连接的说明,type说明它的类型是CSS文本,rel说明它的性质是样式表,href表示它连接到111.css这个文件



二是书写在<style type=”text/css”></style>之间,通常出现在网页头部中

<style>标记表示这个是一个样式,type说明这个样式是CSS文本



三是书写在标记内,以style引用.

如<img src=”1.gif” style=”border:1px;”>

[hide]

注意事项

CSS的书写以”{“开头,以”}”结尾,每个属性间以”;”分割,属性定义以”:”来开始

如.1{color:#ccc;font-size:10px;}



CSS的分类

CSS有3种类型:

1 自定义CSS

1-1 ID

以”#”+名称的形式,它一般用于单独的区域

如#111{color:#ff0000;}

它的调用是以id开头

如<img src=”1.gif” id=”111”>



其中<img>是定义图片调用,src定义调用路径,这里的src=”1.gif”是说明显示该网页同目录下的1.gif文件



1-2 class

以”.”+名称的形式,它一般用于大量定义

如.clear{clear:both;}

它的调用是以class开头

如<div class=”clear”></div>



1-3以style属性开头



3 重定义标记

以标记为名称

如body{background:#000;}



4 特殊的CSS,CSS选择符

常用的有四种

a:link 设定正常状态下链接文字的样式

a:active 设定鼠标单击时的链接外观

a:visited 设定访问过的链接外观

a:hover 设定鼠标放置在链接文字上时,文字的外观



举几个例子

重定义1-3的栏目样式



<DIV class=box id=userVisitor>

<H3>最近谁看过*****的页面</H3>



首先我们通过DIV里的id可以看到,控制这个层区域的ID是userVisitor

<h3>是标题标记,标题标记有<h1>-<h6>,从1-6依次减小.

我们用重定义标记的方法定义下栏目样式

先定义下它的开头为#userVisitor h3



由于IE和FF(firefox)中<h1>到<h6>标记字体大小不一样,所以我们需要先重定义下字体大小(12px)

然后定义它的背景色(#000黑色),以及字体颜色(#fff白色)

代码如下(2-4)



CSS书写的注意事项

1 CSS的冲突性

不同的样式在定义了同一个目标时按照就近原则进行.

举个例子:

<span style="color:#000000; font-size:12px;">我是黑色</span>

我们定义一个class,为

.white{color:#fff;}

那么下面这段

<span style="color:#000000; font-size:12px;" class="white">我还是黑色</span>

我们重新定义一个<span>



<span id=”1” style="color:#000000; font-size:12px;"><span id=”2” style="background-color:#000;" class="white">我变白色了</span>我是黑色</span>



从上面我们可以看到规律.即,先从最靠近的属性开始解析.



2 CSS的命名以字母,数字,下划线命名均可

如#111

#11abc

#abc

#abc_111

都是合法的[/hide]



3 CSS中的命名是严格区分大小写的

如.White和.white就不是同一个class

[ 本帖最后由气味儿于 2008-9-21 13:10 编辑 ]

本帖最近评分记录

俯卧撑文彩 +50 精品文章 2008-9-24 12:36
俯卧撑金钱 +50 精品文章 2008-9-24 12:36
俯卧撑威望 +50 精品文章 2008-9-24 12:36

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

5^# 大中小发表于 2008-8-27 20:27 只看该作者

第5讲实例分析讲解CSS中的float及其相关属性

　　Float这个属性在网页设计制作中起很关键的作用.
　　举个例子:
　　我们写一段menu的代码
　　CSS如下:
　　#menu{width:100%; line-height:20px; height:20px; padding-left:5%;}未解之谜,科普知识,UFO,外星人,飞碟,金字塔,玛雅文明 z) h& e- q8 q3 p9 T( d
　　#menu li{float:left; padding-right:5px; list-style:none;}未解之谜,科普知识,UFO,外星人,飞碟,金字塔,玛雅文明. c! _8 _+ ^( l4 Q# d: K
　　.clear{clear:both;}

本帖隐藏的内容需要回复才可以浏览

bbs.loveufo.com.cn( L' X+ s# \- S3 @8 E
[ 本帖最后由气味儿于 2008-9-21 13:13 编辑 ]

附件: 您所在的用户组无法下载或查看附件

本帖最近评分记录

俯卧撑文彩 +100 精品文章 2008-9-24 12:37

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

6^# 大中小发表于 2008-8-27 20:27 只看该作者

6

留用！

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

7^# 大中小发表于 2008-8-27 20:27 只看该作者

7

留用！

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

8^# 大中小发表于 2008-8-27 20:27 只看该作者

8

留用！

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

9^# 大中小发表于 2008-8-27 20:27 只看该作者

9

留用！

TOP

气味儿

版主

Rank: 16

UID: 348
帖子: 432
精华: 3
积分: 3535
威望: 3526 点
金钱: 31 金
文彩: 907 斗
精品币: 1 个
钻石: 2 只
UFO: 1 只
在线时间: 84 小时

特别贡献奖论坛参与勋章福娃勋章杰出会员勋章优秀斑竹奖章最佳新人奖章合格版主奖章

10^# 大中小发表于 2008-8-27 20:28 只看该作者

总共分9讲完成！你慢慢学我慢慢更新！

TOP

网页设计教程-教你从最开始了解DIV CSS

网页设计教程-教你从最开始了解DIV CSS

代码:

第二讲 网页布局分析

第3讲 网页分析学—代码分析

第4讲 CSS的基本书写模式

代码:

第5讲 实例分析讲解CSS中的float及其相关属性

6

7

8

9

第二讲网页布局分析

第3讲网页分析学—代码分析

第5讲实例分析讲解CSS中的float及其相关属性