1 内容：
设计并制作一个个人网站。
栏目设置：
因为时间的原因，仅包括以下几个栏目
1、个人简介
介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。
2、成长经历
介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。
3、兴趣爱好
介绍个人的兴趣爱好。
4、个人特长
介绍个人的特长，文字+图片+视频。
5、个人相册
版面设置
一般来说网站的结构为倒树的结构
网页的类型可分为：首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。
网页的设计比较常用的方法是首先在photoshop中作出效果图，然后再切片做成html网页。这里，我们用word表格来做设计。
首页的设计：
个人相册列表页
布局知识介绍
网页布局有两种方法：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）菜单
代码：
（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.内部样式表（位于
标签内部）iv.内联样式（在HTML 元素内部）
因此，内联样式（在HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。本文只介绍用到样式，详细的说明请参考相关资料。
1）css样式的三种写法
外部链接
将样式书写在扩展名为css的文本文件中，并通过link标签链接。
上述语句，链接了images目录下的文件名为css.css的外部样式文件。
内部样式表
在HTML内以标签定义的样式，例如：
内联样式
段落中为红色的字体
以style属性内联。
本文用于排版的样式
1、行高
line-height:150%;/*设置行高为字体的1.5倍*/
2、缩进
text-indent:2em;/*首行缩进2字符*/
3、内边距
Padding:10px 10px 5px 5px; 分别设置上、右、下、左的内边距为10像素、10像素、5像素、5像素。
4、设置字体
Font-size:13px; 大小13像素
Color:#000000; 字体为黑色
5、边框
Border-bottom:1px solid #ccc; 底部1像素的实心颜色为#ccc的边线。
Border:1px solid #ccc; 1像素的实心颜色为#ccc的边框。
其中Border-bottom为底部，Border-top为顶部，Border-left为左边，Border-right为右边。
2.3 列表形式的栏目页
Banner、menu和foot可以直接从首页的源文件复制，内容部分做成左右结构，其中左部可以放置图片、文字、链接等（视具体设计而定），右部为图片列表。根据设计图片列表以3*3的表格方式展示。
具体操作见视频。
2.4 栏目内容页
设计方法与单页形式的列表页相同。制作方法参考2.2,以及源文件。
3.文档资源
操作视频和源文件在生活百科网站处可以下载，地址：https://www.doczj.com/doc/4d12917950.html,/?p=935