1、1 内容：设计并制作一个个人网站。栏目设置：因为时间的原因，仅包括以下几个栏目1、个人简介介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。2、成长经历介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。3、兴趣爱好介绍个人的兴趣爱好。4、个人特长介绍个人的特长，文字+图片+视频。5、个人相册版面设置一般来说网站的结构为倒树的结构网站栏目 1 栏目 2 栏目 3栏目 3.1 栏目 3.2网页的类型可分为：首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。网页的设计比较常用的方法是首先
2、在 photoshop 中作出效果图，然后再切片做成 html 网页。这里，我们用 word 表格来做设计。首页的设计：Banner800*150Menu800*30Flash800*600Foot800*30栏目和内容单页Banner800*150Menu800*30侧栏 内容Foot800*30个人相册列表页Banner800*150Menu800*30相片 相片 相片相片 相片 相片侧栏相片 相片 相片Foot800*30布局知识介绍网页布局有两种方法：1、div+css 2、用 table 标签布局。本文采用第 2 种方法，这也早期的网站常用的布局方式。特点是简单易学。缺点是代码冗余，
3、不易于修改。table 标签的用法首先我们来看一个九宫格的代码。123456789用 table 布局的方法：1、单个 table，行列合并2、table 的嵌套用 table 的嵌套操作方法，易于修改和维护。布局 1：方法 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 的设计与制
4、作（2）菜单确定各栏目页的文件名和站点主页的文件名。栏目名称 文件名首页 index.html个人简介 grjjhtml成长经历 czjlhtml兴趣爱好 xqah.html个人特长 grtc.html相册 xc.html菜单为一级栏目导航，点击对应项可跳转到对应栏目首页。代码：首页个人简介成长经历兴趣爱好个人特长相册（3）主体部分放置一个欢迎动画。操作方法非常简单，点击“插入媒体flash” （快捷方式 ctrl+alt+f）插入制作好的 flash 即可。（4）页脚部分输入一些版权或者联系方式等信息。2.2 单页形式的栏目页Banner、menu 和 foot 可以直接从首页的源文件复制，
5、内容根据设计修改。要点：（1）通过嵌套的表格布局。（2）图文排版（css 样式控制）CSS 概述： CSS 指层叠样式表 ( Cascading Style Sheets) 样式定义 如何显示 HTML 元素 样式通常存储在 样式表 中 把样式添加到 HTML 4.0 中，是为了 解决内容与表现分离的问题 外部样式表 可以极大提高工作效率 外部样式表通常存储在 CSS 文件 中 多个样式定义可 层叠 为一样式表极大地提高了工作效率样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS
6、 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。多重样式将层叠为一个样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。层叠次序当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一
7、般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。i. 浏览器缺省设置ii. 外部样式表iii. 内部样式表（位于 标签内部）iv. 内联样式（在 HTML 元素内部）因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值） 。本文只介绍用到样式，详细的说明请参考相关资料。1）css 样式的三种写法外部链接将样式书写在扩展名为 css 的文本文件中，并通过 link 标签链接。上述语句，链接了 images 目录下的文件名为 css.css
8、 的外部样式文件。内部样式表在 HTML 内以标签定义的样式，例如：a font-size:19px; /*设置超链接的字体大小*/内联样式段落中为红色的字体 以 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、边框B
9、order-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.文档资源操作视频和源文件在生活百科网站处可以下载，地址：http:/
