1 内容：
设计并制作一个个人网站。
栏目设置：
因为时间的原因，仅包括以下几个栏目
1、个人简介
介绍个人的基本情况，年龄、学历、学位、毕业院校、所学专业、身高、体重等等。
2、成长经历
介绍个人的成长经历，从初中起学习、社会实践和获得荣誉情况。
3、兴趣爱好
介绍个人的兴趣爱好。
4、个人特长
运算符中优先级最高的是
介绍个人的特长，文字+图片+视频。
5、个人相册
版面设置
一般来说网站的结构为倒树的结构
网页的类型可分为：首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。
对于个人网站，除了个人相册是列表页外，各栏目基本上都是单页类型的栏目。
网页的设计比较常用的方法是首先在photoshop中作出效果图，然后再切片做成html网页。这里，我们用word表格来做设计。
首页的设计：
Banner
800*150
Menu
800*30
Flash
800*600
Foot
800*30
栏目和内容单页
java集合foreach
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>
html个人网页完整代码div+css用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"> </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>uniontech
            <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>
js 跳转页面
  </tr>
  <tr>
    <td height="29"> </td>
  </tr>
</table>
2、网页制作步骤及要点
2.1首页
（1）banner的设计与制作
（2）菜单
确定各栏目页的文件名和站点主页的文件名。
栏目名称
文件名
unicode编码转换10进制
首页
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。