打印

[教程] 网页设计教程-教你从最开始了解DIV+CSS[汇总|DZ部分第1讲更新]

本主题由 System 于 2008-5-1 05:00 解除限时置顶

水月あ无痕

小吕

运维组

Rank: 17

17DST PM

UID: 5359
精华: 1
声望: 153 点
金币: 393 枚
卓越: 2 值
注册时间: 2007-7-28
最后登录: 2008-4-11

1^# 大中小发表于 2007-12-11 10:11 只看该作者

网页设计教程-教你从最开始了解DIV+CSS[汇总|DZ部分第1讲更新]

为了能让广大新学习网页设计的朋友能够从最开始认识，所以本教程的书写过程是通过自己给几个新手朋友教学时的教案整理而成。因此本教程更新较慢，每周更新1-2讲。
各位对教程的建议请直接在本帖或相对章节帖子内提出...以便针对情况进行局部详细讲解

1-2讲请看本帖1-2楼
3-4讲进入http://www.17dst.com/thread-4128-1-1.html
第5讲进入http://www.17dst.com/thread-4311-1-1.html
第6讲进入http://www.17dst.com/thread-4500-1-1.html
第7讲进入http://www.17dst.com/thread-4565-1-1.html
第8讲进入http://www.17dst.com/thread-4619-1-1.html
第9讲进入http://www.17dst.com/thread-4735-1-1.html
DZ部分第1讲进入http://www.17dst.com/thread-4736-1-1.html

第一讲网页设计的基本认识
网页是由各种各样的元素组成，比如图片，文本，flash，流媒体等等。

网页的书写方式：
网页的书写方式分为两种，一种是所见即所得方式，一种是所见非所得方式。
所见即所得方式非常的简单。我们可以参考下DVBBS（论坛程序的发帖模式），这种模式非常的简单，易学，但是也是最没前途，最入门的方式。
我们这里主要学习的将是所见非所的方式，即XHTML代码及其语法模式，再配合上所见即所得方式的检测模式。

既然我们决定了一个制作网页的方法，我们就需要找一个个人顺手的软件。
目前比较通用的软件是Dreamwaver，通常我们简称它为DW，它的最新版本是CS3版本，这个版本加强了对XHTML中DIV+CSS以及脚本语言的书写方便性，非常适合制作网页。
当然，你如果能熟悉XHTML的标记，属性及语法模式，你也可以用一切可以书写文本的东西做出网页，比如说记事本，word什么的。

先普及两个基本概念。
第一个是标记
标记是由<>括起，中间含有标记识别字符的一种东西，它是网页的基本组成元素，相当于人体的细胞一样。它一般一对标记组成，以</>结尾，比如<title></title>，这个是网页标题标记。当然，也有特殊的，由一个标记组成，比如<img>图象标记。某些标记即可以单独出现又可以以对出现，比如换行<br>，换段<p>标记。HTML是一种开放的语言，这些都是可以识别的。当然，我们应该养成有开始就有结束的习惯，另外也要养成标记和属性一律用小写的习惯，虽然大小写在HTML和XHTML中并不会有分别，但是在XML一类严格的网页语言中，大小写是区分的。
第二个是属性
属性就是修饰标记的东西，比如修饰文字标记<font>的color属性，他们一般写在<>之间。

那么，下面我们需要知道的也就是网页的基本部分了。
网页有两个基本部分，写段简单的东西来说明网页的基本部分
<html>
<head><title>开始网页</title></head>
<body>


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

TOP

水月あ无痕

小吕

运维组

Rank: 17

17DST PM

UID: 5359
精华: 1
声望: 153 点
金币: 393 枚
卓越: 2 值
注册时间: 2007-7-28
最后登录: 2008-4-11

2^# 大中小发表于 2007-12-11 10:15 只看该作者

第二讲网页分析学---布局分析
网页是一个不断磨练的过程，而参考和分析经典的网页就是必不可少的东西了，现在的网页制作教学往往忽略这个东西，但是这个东西恰恰是最重要的。

网页分析学主要分为两个部分，一个是布局分析，一个是内容分析。
布局分析即观察一个网页，你能知道它的布局是怎么样的。

首先是水月小窝的主页(缩短了内容,便于观看)

第一眼看过,我们可以把小窝看做简单的布局,即,一页三层式(上,中,下布局)

然后再继续分析,中层部分为左右分栏布局,这样我们就可以初步划分了他的布局,写出了我们的制作走向.(数字为制作走向,即制作顺序)

1 上层--2 中层主框架--3 中层左栏--4 中层右栏--5 下层

再来我们看下暴雪的battle.net(缩短了内容,便于观看)

地址www.battle.net

首先我们可以分析出它是由左右分栏+底栏(这里可以看做是上下双层结构,然后上层分化为左右双栏)格式分化而来的

然后,在右栏由分化为上下双层结构

下层又分化为一个左右分栏

这样我们可以化出制作走向:(数字代表制作走向)

1 左栏--2 右栏主框架--3 右栏上层--4 右栏下层左栏--5 右栏下层右栏--6 底栏