个人网站设计实例

1 内容：

设计并制作一个个人网站。

栏目设置：

因为时间的原因，仅包括以下几个栏目

1、个人简介

介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。

2、成长经历

介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。

3、兴趣爱好

介绍个人的兴趣爱好。

4、个人特长

介绍个人的特长，文字+图片+视频。

5、个人相册

版面设置

一般来说网站的结构为倒树的结构

网页的类型可分为：首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。

网页的设计比较常用的方法是首先在photoshop中作出效果图，然后再切片做成html网页。这里，我们用word表格来做设计。

首页的设计：

个人相册列表页

Banner

800*150

Menu

800*30

侧栏相片相片相片

相片相片相片

相片相片相片

Foot

800*30

布局知识介绍

网页布局有两种方法：1、div+css 2、用table标签布局。

本文采用第2种方法，这也早期的网站常用的布局方式。特点是简单易学。缺点是代码冗余，不易于修改。

table标签的用法

首先我们来看一个九宫格的代码。

1	2	3
4	5	6
7	8	9

用table布局的方法：

1、单个table，行列合并

2、table的嵌套

用table的嵌套操作方法，易于修改和维护。

方法1：创建一个6行3列的table，然后合并3、4、5行的第1列，合并1、2、6行的所有列，合并第5行的2、3列。

代码如下：

方法2：

创建4行1列的表格，然后在第3行嵌入1个1行2列的表格，在这个表格的第列嵌入一个3行2列的表格，并合并其第3行。

2、网页制作步骤及要点

2.1首页

（1）banner的设计与制作

（2）菜单

确定各栏目页的文件名和站点主页的文件名。

栏目名称文件名

首页index.html

个人简介grjj..html

成长经历czjl..html

兴趣爱好xqah.html

个人特长grtc.html

相册xc.html

菜单为一级栏目导航，点击对应项可跳转到对应栏目首页。

代码：

首页

个人简介

成长经历

兴趣爱好

个人特长

相册

（3）主体部分

放置一个欢迎动画。操作方法非常简单，点击“插入》媒体》flash”（快捷方式ctrl+alt+f）插入制作好的flash即可。

（4）页脚部分

输入一些版权或者联系方式等信息。

2.2 单页形式的栏目页

Banner、menu和foot可以直接从首页的源文件复制，内容根据设计修改。

要点：

（1）通过嵌套的表格布局。

（2）图文排版（css样式控制）

CSS 概述：