个人网站设计实例.docVIP

. . 1 内容： 设计并制作一个个人网站。 栏目设置： 因为时间的原因，仅包括以下几个栏目 1、个人简介 介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。 2、成长经历 介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。 3、兴趣爱好 介绍个人的兴趣爱好。 4、个人特长 介绍个人的特长，文字+图片+视频。 5、个人相册 版面设置 一般来说网站的结构为倒树的结构 网站 网站 栏目1 栏目2 栏目3 栏目3.1 栏目3.2 网页的类型可分为：首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。 对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。 网页的设计比较常用的方法是首先在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> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</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="3">&nbsp;</td> </tr> <tr> <td height="25" colspan="3">&nbsp;</td> </tr> <tr> <td width="130" rowspan="3">&nbsp;</td> <td width="213" height="31">&nbsp;</td> <td width="235">&nbsp;</td> </tr> <tr> <td height="117">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td height="81" colspan="2">&nbsp;</td> </tr> <tr> <td colspan="3">&nbsp;</td> </tr> </table> 方法2： 创建4行1列的表格，然后在第3行嵌入1个1行2列的表格，在这个表格的第列嵌入一个3行2列的表格，并合并其第3行。 <table width="600" border="1"> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td height="300" valign="top"><table width="600" border="1"> <tr> <td width="148" height="301">&nbsp;</td> <td width="436" valign="top"><table width="100%" border="1"> <tr> <td height="92">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td height="