1 内容：设计并制作一个个人网站。
栏目设置：因为时间的原因，仅包括以下几个栏目1、个人简介介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。
2、成长经历介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。
3、兴趣爱好介绍个人的兴趣爱好。
4、个人特长介绍个人的特长，文字+图片+视频。
5、个人相册版面设置一般来说网站的结构为倒树的结构网页的类型可分为：首页、栏目页、内容页三种。
其中栏目页又可分为单页和列表页两种。
对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。
网页的设计比较常用的方法是首先在photoshop中作出效果图，然后再切片做成html网页。
这里，我们用word表格来做设计。
首页的设计：个人相册列表页Banner800*150Menu800*30侧栏相片相片相片相片相片相片相片相片相片Foot800*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：创建一个6行3列的table，然后合并3、4、5行的第1列，合并1、2、6行的所有列，合并第5行的2、3列。
代码如下：<table width="600" border="1"><tr><td height="37" colspan="3"> </td></tr><tr><td height="25" colspan="3"> </td></tr><tr><td width="130" rowspan="3"> </td><td width="213" height="31"> </td><td width="235"> </td></tr><tr><td height="117"> </td><td> </td></tr><tr><td height="81" colspan="2"> </td></tr><tr><td colspan="3"> </td></tr></table>方法2：创建4行1列的表格，然后在第3行嵌入1个1行2列的表格，在这个表格的第列嵌入一个3行2列的表格，并合并其第3行。
<table width="600" border="1"><tr><td> </td></tr><tr><td> </td></tr><tr><td height="300" valign="top"><table width="600" border="1"><tr><td width="148" height="301"> </td><td width="436" valign="top"><table width="100%" border="1"><tr><td height="92"> </td><td> </td></tr><tr><td height="100"> </td><td> </td></tr><tr><td height="95" colspan="2"> </td></tr></table></td></tr></table></td></tr><tr><td height="29"> </td></tr></table>2、网页制作步骤及要点2.1首页（1）banner的设计与制作（2）菜单确定各栏目页的文件名和站点主页的文件名。
栏目名称文件名首页index.html个人简介grjj..html成长经历czjl..html兴趣爱好xqah.html个人特长grtc.html相册xc.html菜单为一级栏目导航，点击对应项可跳转到对应栏目首页。
代码：<tr bgcolor="#eee"><td align="center" width="136"><a href="index.html">首页</a></td><td align="center" width="136"><a href="grjj.html">个人简介</a></td><td align="center" width="136"><a href="czjl.html">成长经历</a></td><td align="center" width="136"><a href="xqah.html">兴趣爱好</a></td><td align="center" width="136"><a href="grtc.html">个人特长</a></td><td align="center" width="136"><a href="xc.html">相册</a></td></tr>（3）主体部分放置一个欢迎动画。
操作方法非常简单，点击“插入》媒体》flash”（快捷方式ctrl+alt+f）插入制作好的flash即可。
（4）页脚部分输入一些版权或者联系方式等信息。
2.2 单页形式的栏目页Banner、menu和foot可以直接从首页的源文件复制，内容根据设计修改。
要点：（1）通过嵌套的表格布局。
（2）图文排版（css样式控制）CSS 概述：•CSS 指层叠样式表 (C ascading S tyle S heets)•样式定义如何显示 HTML 元素•样式通常存储在样式表中•把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题•外部样式表可以极大提高工作效率•外部样式表通常存储在CSS 文件中•多个样式定义可层叠为一样式表极大地提高了工作效率样式表定义如何显示HTML 元素，就像HTML 3.2 的字体标签和颜色属性所起的作用那样。
样式通常保存在外部的.css 文件中。
通过仅仅编辑一个简单的CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上WEB 设计领域的一个突破。
作为网站开发者，你能够为每个HTML 元素定义样式，并将之应用于你希望的任意多的页面中。
如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个样式表允许以多种方式规定样式信息。
样式可以规定在单个的HTML 元素中，在HTML 页的头元素中，或在一个外部的CSS 文件中。
甚至可以在同一个HTML 文档内部引用多个外部样式表。
层叠次序当同一个HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
i.浏览器缺省设置ii.外部样式表iii.内部样式表（位于<head> 标签内部）iv.内联样式（在HTML 元素内部）因此，内联样式（在HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。