个人网站设计实例.docVIP

1 内容： 设计并制作一个个人网站。 栏目设置： 因为时间的原因，仅包括以下几个栏目 1、个人简介 介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。 2、成长经历 介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。 3、兴趣爱好 介绍个人的兴趣爱好。 4、个人特长 介绍个人的特长，文字+图片+视频。 5、个人相册 版面设置 一般来说网站的结构为倒树的结构 网页的类型可分为：首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。 对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。 网页的设计比较常用的方法是首先在photoshop中作出效果图，然后再切片做成html网页。这里，我们用word表格来做设计。 首页的设计： Banner 800*150 Menu 800*30 Flash 800*600 Foot 800*30 栏目和内容单页 Banner 800*150 Menu 800*30 侧栏 内容 Foot 800*30 个人相册列表页 Banner 800*150 Menu 800*30 侧栏 相片 相片 相片 相片 相片 相片 相片 相片 相片 Foot 800*30 布局知识介绍 网页布局有两种方法：1、div+css 2、用table标签布局。 本文采用第2种方法，这也早期的网站常用的布局方式。特点是简单易学。缺点是代码冗余，不易于修改。 table标签的用法 首先我们来看一个九宫格的代码。 table width=200 border=1 tr td1/td td2/td td3/td /tr tr td4/td td5/td td6/td /tr tr td7/td td8/td td9/td /tr /table 用table布局的方法： 1、单个table，行列合并 2、table的嵌套 用table的嵌套操作方法，易于修改和维护。 布局1： 方法1：创建一个6行3列的table，然后合并3、4、5行的第1列，合并1、2、6行的所有列，合并第5行的2、3列。 代码如下： table width=600 border=1 tr td height=37 colspan=3nbsp;/td /tr tr td height=25 colspan=3nbsp;/td /tr tr td width=130 rowspan=3nbsp;/td td width=213 height=31nbsp;/td td width=235nbsp;/td /tr tr td height=117nbsp;/td tdnbsp;/td /tr tr td height=81 colspan=2nbsp;/td /tr tr td colspan=3nbsp;/td /tr /table 方法2： 创建4行1列的表格，然后在第3行嵌入1个1行2列的表格，在这个表格的第列嵌入一个3行2列的表格，并合并其第3行。 table width=600 border=1 tr tdnbsp;/td /tr tr tdnbsp;/td /tr tr td height=300 valign=toptable width=600 border=1 tr td width=148 height=301nbsp;/td td width=436 valign=toptable width=100% border=1 tr td height=92nbsp;/td tdnbsp;/td /tr tr td height=100nbsp;/td tdnbsp;/td /tr tr td height=95 colspan=2nbsp;/td /tr /table/td /tr /table/td /tr tr td height=29nbsp;/td /tr /table 2、网页制作步骤及要点 2.1首页 （1）banner的