静态个人网站设计

1.1  概  述

         网站就是网页的有机组合体，网页的学名是HTML（Hyper Text Mark-up Language），翻译过来就是“超文本标记语言”，它定义了各种超文本在HTML文件中的组织方式，是一种可以在WWW上传输并被浏览器读取、翻译成页面的一种文件。而“超文本”是指大家在浏览信息的时候，不必按章节从头到尾阅读，可以从其中一个地方跳到另外一个地方，就是我们很熟悉的超链接。现在的网页就不仅仅是超文本了，已经在向超媒体的方向发展，比如我们经常看到的Flash、网页中的ASF电影文件等，都是超媒体。网站就是许许多多网页、文本、图片、声音、图像等在一起，按照一定方式组织起来的集合体。网站是上网查信息的窗口，是我们存放资料、图片、多媒体的网上展示厅，当然也是你展示个人魅力的大舞台啦

   1.1.1网页制作要用的软件

     网页制作要用的软件一般分为网页制作和图像处理两类，正确地选择它们将有利于提高我们的工作效率。  

1.对网页制作工具来说，首先，我们需要一个WYSIWYG的网页编辑工具，What You See Is What You Get（所见即所得）。常用的有Dreamweawer、Frontpage、Golive。  

首先说说Dreamweawer(见图1)，它由Macromedia公司开发，最新的版本是MX。Deamweaver采用浮动面版的设计风格，对于初学者来说可能会感到不适应，但当你习惯其操作方式后，就会发现Dreamweaver的直观性与高效性是其他网页设计软件所无法比拟的。Dreamweaver对于DHTML的支持特别好，可轻而易举地做出很多眩目的页面特

                         图一

效。插件式的程序设计也使其功能可以无限扩展。Dreamweaver与Flash、Firework并称为

Macromedia的网页制作三剑客（想必很多朋友都了解了吧！），由于是同一公司的产品，因而在功能上有着非常紧密的结合。而最新推出的Dreamweaver UltraDev更是支持ASP、JSP等动态网页的设计。由此看来，Dreamweaver可说是网页设计者的首选。

　　其次是Frontpage，它由Microsoft出品，是最简单、最容易、功能却又很强大的网页编辑工具。它采用典型Word界面设计，只要你会用Word，就差不多等于已经会用Frontpage了。当然就算你不会用Word也没关系，简单明了的操作方式会让你很快上手，而且你无须学习HTML语法，对网页元素的简单拼装也能取得好的效果。它的最新版本是XP，在操作界面上，新版本做得非常漂亮，色彩清新柔和，再配以阴影效果，在下级菜单弹出方面它还采用渐现方式，这也是.net时代Windows应用软件的发展趋势。  

2.图形处理软件我们有Fireworks和Photoshop两种选择，Photoshop可谓是平面设计方面的老大，在这个领域内“无人”能与之匹敌。自从Adobe公司推出了Photoshop 6.0之后，在网页图形处理方面的功能大大增强，不但增加了Slice割图工具，而且专门增加了图像网页输出功能，可以输出JPG、GIF、PNG三种格式的图片，而且在图片的大小优化上做得更方便、更简易，因此对于有Photoshop基础的人来说，这的确是个令人振奋的新功能。最新版本7.0（图14）更增加了许多新功能，使它在图像处理方面的优势进一步扩大，而且Photoshop有着丰富的插件支持，极大地扩展了它的功能。  

Fireworks也是一款非常优秀的图形处理软件，它是Macromedia公司专门为了网络图形而设计的一款软件，它可以非常方便地制作出下拉菜单、图片热区等效果，而且网页图形的优化也非常专业。但其图形处理功能稍微有些欠缺（同Photoshop对比来说），而且对于新手来说不容易入门，各种功能、菜单的设计不是很人性化。当然，这也是对我这个用惯了Adobe软件界面的人来说的，不同意的人可以反驳啊。萝卜青菜，各有所爱嘛。  

3.动画制作，没得说，肯定是Flash。如今的Macromedia如日中天，一半江山都是Flash打下来的（另一半是Dreamweawer）。Flash是由交互式矢量图形组成的动画，文件体积很小，所以下载速度很快。可以用它来制作动画、创建互动性网页，它已经成为网上动画的霸主，最新的MX版本又增加了对视频、麦克风的支持，极大地扩展了Action Script的功能。无怪乎有人说，如果浏览器不安装Flash插件，将在21世纪的互联网上寸步难行！  

唯一可以称作是Flash竞争对手的是Adobe Live Motion，大多数读者可能对这个软件知之甚少，但在国外它却被称作“Flash杀手”。它的特色是继承了Adobe公司强大的图形处理功能，你可以轻松地在动画中增加动态模糊、浮雕等效果，而在Flash中就要颇费一番周折了，而且Live Motion可以使用Photoshop的滤镜，因此对Photoshop非常熟悉的人来说可谓是锦上添花。

1.2   网站的构思 

做网站有什么用处呢？可千万不要只是为了追求网站的效果。效果只是内容的表现方式，我们不要去刻意追求它，而是要让效果为内容服务，更好地实现我们制作网站的目标。做网站有很多作用，你可以用来它宣传自己，让大家都来了解你，并找到很多志同道合的朋友；你也可以用它来介绍你的最新成果：一个小发现或一个小程序，供大家观摩或下载使用，如果推广出去被哪一个软件公司看中，那可就前途无量了；大公司用它来实现电子商务，减少库存，降低成本，这可是公司发展的重要驱动力！等等，总之，这么多用处，我们一定要想清楚，建一个网站并用它来达到一个什么目标？这就是建立网站的初衷。我们都知道，网上世界丰富多彩，各种东东五花八门、琳琅满目、应有尽有，那么，如何根据自己的实际情况给网站定位呢？下面是对网站类别的大概划分，对我们确定网站的类型应该会有帮助。  

 

　　每个大类都可以继续细分，比如娱乐类再分为体育、电影、音乐类，而音乐又可以按格式分为MP3、WMA、VQF等，或者按表现形式分流行、古典、摇滚等。这些都是最基本的分类，你也可以选择一些偏的、怪的，或有特色的，比如你很喜欢电影海报，那就可以做个海报的交流网站；喜欢玩CS，那就做个你的CS战队网站，在网上联系比赛，同全世界的玩家们沟通；如果喜欢交朋友，就只建个论坛，制定几个你比较感兴趣的话题，让大家来一起讨论探索；或你在哪方面很有专长，比如美术好，那你可以做个你的作品展示网站，把你的作品扫描放到网站中去，让大家来欣赏。总之，选择一个有特色的类型不会很难，只要你稍微留意，细心想一想，就会发现有很多题材等待你去挖掘。  

　　但是，选择题材时一定要注意。首先，主题要小而精，定位小、内容精。如果你想做个像百货大楼一样的网站，把你觉着有用的，例如在线听歌、软件下载、交友论坛都放上去，那可能会事与愿违。给人的感觉是没有主题、没有特色，样样都有，却样样都很浅，因为你不可能有那么多的精力去维护它，而且类似的网站数不胜数。比如说，你想买一台SONY Walkman随身听，你是去超市买还是去SONY的专卖店买？同样在网络中，比如www.51lrc.com，它的定位就是lrc格式的歌曲歌词（优秀的Winamp插件LyricShow专用），应该说定位很小，但笔者想找一首歌的歌词绝对首先想到51lrc.com，尽管别的一些音乐网站也有，可是并不规范，分类也不专业，找到一个歌词要花很多时间，所以吸引力不大。这就是定位的重要性。其次，主题最好是你喜欢并且有兴趣的，比如你喜欢平面设计，就可以建立一个平面设计网站；喜欢乔丹，可以报道乔丹最新的动态，这样在以后维

护时才不会觉得没意思、没动力。兴趣是做事情的动力，有了兴趣，才能把网站建好。最后，主题要有特色，特色是网站的灵魂，没有特色，主题太滥太广，很难给别人留下深刻印象。就像现在的软件下载、音乐信息等类型网站，太多，能给人留下深刻印象的却没几个。除非你有足够信心能超过其他网站，否则还是要三思，永远记住：网站排名只认第一，没有第二。  

 

1.2.1 设计思想

我们要做的是静态的个人网站，因此主要应该要体现个人特色。我们的水平自然是有限的，所以上面的有些东西都是从网上优秀的个人网站上借鉴来的，例如布局和样式。总体来说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。

整个网站大体分四部分：首页、相册、音乐盒、留言板。另外网站中的动态效果，一些是从网上借鉴来的，算是给自己的网站锦上添花吧，取长补短。

1.2.2 网站素材

（1）网站素材的整合与网站的完善

一个成功的网站既要美观、精细又要有使用的价值。所以，它的建设需要大量的素材。根据我们网站的设计构思，我们需要搜集大量的相关的素材，其中包括：图片、音乐、文章、小的flash动画和flash游戏、以及动态的小图片、网页特效等。基本素材经过加工和整理后根据不同的需要成为网页的一部分，而动态的图片和一些网页特效则可以使我们的网页更加美观！

我们首先将收集到的材料逐一分类汇总，然后按照不同部分的不同需求决定使用的具体素材是哪些，然后，我们按照初步设计思想输入文本资料，设置动画效果，切换效果，建立相关链接，预览后察看网页的制作效果如何在决定细节方面的设计。网站初步完成后，我们对整个设计作品进行了整体修饰和完善，添加网页特效，使网战显得更加灵动，具有吸引力！ 

1.2.3开发工具及环境：

Dreamweaver MX软件：Dreamweaver MX是Macromedia公司推出的一个“所见即所得”的可视化网站开发工具，在最新的MX版中，对Dreamweaver的代码控制和后台功能作了进一步增强，新增功能有：

1、新的集成工作区布局，用多文档界面（MDI）提供了用户较为熟悉的工作环境，包括完全可停靠的面板和选项卡式的文档窗口

2、面板管理，根据需要将可折叠、可停靠的面板组合在一起并折叠或扩展这些面板，以实现顺畅、高度可配置的工作流程

3、预设计的示例Web组件，包含专业质量的页面布局，使用户在设计方面取得领先的优势

4、对模版功能做了很大的增强，允许用户设置高级的规则，以便让撰写人在不损坏站点设计的情况下输入内容

5、站定定义向导，可快速而方便地设置站点

6、代码提示，在代码视图中进行编辑时，这些菜单将显示适当的标签属性、方法属性、函数参数和CSS样式

7、可自定义的插入栏，让用户可以快速的访问对象和行为

8、文件浏览器，现在集成在“站点”面板中，使用户可以浏览桌面和网络卷上的资源和文件

9、增强的表编辑和操作功能，为在布局视图和标准视图中的表生成了一更完善的代码，从而优化了属性处理并确保所有布局尽可能精简，而不损坏跨浏览器的兼容性

10、语法颜色，可完全按照用户个人的需要进行配置和自定义

11、标准工具栏，用户能够快速的访问常用的文件命令和剪贴板命令

12、从代码视图打印，现在允许用户打印出应用了适当格式设置的源代码

Fireworks软件：Fireworks是用来设计和制作专业化网页图形的应用软件，它提供了一个制作环境，可以在一个专业化的环境中创建和编辑网页图形，对其进行动画处理，添加高级交互功能以及优化图像。它们使Fireworks从概念到集成上成为网页设计和开发过程的一个重要组成部分。

 

1、“数据驱动图形向导”使你可以为文本、图像、热点和切点指定变量，然后根据原稿生成多个文档，其中每个文档包含取自一个以逗号的或XML数据库文件的独特信息

2、导航栏创建器使用方便的Fireworks MX按钮元件自动完成快速创建导航栏的过程。你可以在一个集成的对话框中选择按钮元件实例，然后选择要生成的份数以及垂直或水平方向与间距，最后指定按钮标签和URL

３、弹出菜单编辑器增强功能为Fireworks MX中最常用的新功能增加了富有创造性的控件。现在你可以创建水平或垂直弹出菜单，直接确定边框特性、单元格间距和单元格大小而无须考虑文本的大小。你还可以设置菜单相对于触发器对象的位置以及子菜单相对于触发器菜单项或主弹出菜单的位置。Fireworks自动为你生成JAVAScript代码，导出的菜单与Dreamweaver MX完全兼容

４、实例级按钮元件编辑使你可以创建一个按钮元件，然后使用属性面板通过惟一的文本、URL和目标将各按钮轻松区分开。同时，你可以在元件级别编辑其他图形特性，并在所有按钮实例中应用编辑更新，而不会影响实例级属

1.3 制作一个完整的网站

3.3.1 网站筹划

界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：

①栏目与板块编排

构建一个网站就好比写一篇论文，首先要列出题纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。 网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是：

●尽可能删除那些与主题无关的栏目；

●尽可能将网站内最有价值的内容列在栏目上；

●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。 另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。举个例子：ENET硅谷动力（www.enet.com.cn）的站点分新闻、产品、游戏、学院等板块，每个板块下面又各有自己的主栏目。一般来说，个人站点内容较少，只要分个栏目也就够了，不需要设置板块。如果有必要设置板块的，应该注意：

●各板块要有相对独立性；

●各板块要有相互关联；

●各板块的内容要围绕站点主题；

②目录结构与链接结构 网站的目录是指建立网站时创建的目录。例如：在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排，比如：

●不要将所有文件都存放在根目录下。有网站制作者为了方便，将所有文件都放在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。

●按栏目内容建立子目录。子目录的建立，首先按主栏目建立。友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：网站简介、站长情况等可以合并放在一个统一目录下。所有程序一般都存放在特定目录，例如：CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在一个目录下，便于维护管理。

●在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单，就是方便维护与管理。 其它需要注意的还有：目录的层次不要太深，不要超过3层；不要使用中文目录，使用中文目录可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。

一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接结构有两种基本方式：

●树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。

●星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。

1.3.2   素材准备

准备做网站的素材是最重要的一环，不仅要收集许多内容各异的文字图片，还要设计各种网站的排版格式与美工。

这个网站的排版格式是我自己用Dreamweaver画出来的，其中的图片有的是自己处理的，也有些是从网上下载后自己用photoshop、fireworks处理的。具体的网站有：www.yuhou.net、华军软件园、萧湘书室等。

3.3.3 首页制作

现在才是真正用到Dreamweaver的时候

先把素材整理成一些整齐的目录，最好就在网页需要放置的目录下，我把它放在文件夹“网页/image和flash”下。定义站点是选择这个目录，这样素材就全位于站点以内，处理比较方便。

1、定义站点

（1）启动Dreamweaver。

（2）打开“站点”菜单，选择“新建站点”命令。

（3）在弹出的“站点定义”对话框中的“站点命令”文本框中输入“个人网站”，在

下面的“本地根目录文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。

（4）随即在组合面板中弹出“站点”面板，现在可以在其中添加页面了。

（5）右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为”index.html”。

（6）双击index.html，进入页面编辑状态。

（7）首先划分整个页面的布局。点击“布局”按钮进入布局模式，划分页面，将整个页面划分为五部分：上面横幅部分，用来表明页面的主题；接着横幅部分是一小块链接部分，用来链接其他的几个页面；左面较为狭窄的部分，是一些链接，算是修饰部分吧；右面是主要部分，页面的主要内容放在这里；最底下的小块部分，说明网站的制作者和联系方式。

（8）然后在页面头部添加背景图片，<table border="0" width="760" cellspacing="0" cellpadding="0" id="table28" background="images/header-bg.gif" height="108">。

（9）在头部右侧写好自己网站的各个部分名称，并且设置好背景图片设置好链接。

<table border="0" id="dh" cellspacing="0" cellpadding="0" class="daohang" height="28">

<tr>

<td background="images/menu1.gif" width="70" align="center" onClick="location.href='index.htm'">

首页</td>

<td background="images/menu1.gif" width="70" align="center" onClick="location.href='music.htm'">

音乐盒</td>

<td background="images/menu1.gif" width="70" align="center" onClick="location.href='photo.htm'">

相册</td>

<td background="images/menu1.gif" width="70" align="center" onClick="location.href='book.htm'">

留言板</td>

</tr>

 </table>

（10）然后在页面中部的左侧设置上背景和相关CSS设置，写上些自我介绍的文字。

（11）在页面的下部插入10张图片，放入事先设置好的表格。运用javascript的代码，做一个走马灯效果。代码如下：

<table width="1700" height="116"  border="0" cellpadding="0" cellspacing="0">

            <tr>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo1_show.htm">

<img border="0" src="photo1/1.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo1_show.htm">

<img border="0" src="photo1/4.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo1_show.htm">

<img border="0" src="photo1/5.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a thref="photo1_show.htm">

<img border="0" src="photo1/7.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo1_show.htm">

<img border="0" src="photo1/8.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo2_show.htm">

<img border="0" src="photo2/1.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo2_show.htm">

<img border="0" src="photo2/6.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo3_show.htm">

<img border="0" src="photo3/1.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

  <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo3_show.htm">

<img border="0" src="photo3/3.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

  <td width="170" background="images/200789134819940.jpg" align="center">

<a href="photo3_show.htm">

<img border="0" src="photo3/4.jpg" οnlοad="DrawImage(this,200,90)"></a></td>

              </tr>

          </table>

function DrawImage(ImgD,iwidth,iheight){

 var image=new Image();

 //var iwidth    定义允许图片宽度

 //var iheight    定义允许图片高度

 image.src=ImgD.src;

 if(image.width>0 && image.height>0){

 flag=true;

 if(image.width/image.height>= iwidth/iheight){

  if(image.width>iwidth){   

  ImgD.width=iwidth;

  ImgD.height=(image.height*iwidth)/image.width;

  }

  else{

  ImgD.width=image.width;

  ImgD.height=image.height;

  }

  ImgD.alt=image.width+"×"+image.height;

  }

 else{

  if(image.height>iheight){   

  ImgD.height=iheight;

  ImgD.width=(image.width*iheight)/image.height;   

  }else{

  ImgD.width=image.width;   

  ImgD.height=image.height;

  }

  ImgD.alt=image.width+"×"+image.height;

  }

 }

}

//********************************iframe高度自动调整

 var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]

 //extra height in px to add to iframe in FireFox 1.0+ browsers

 var FFextraHeight=getFFVersion>=0.1? 16 : 0

 function Htiao(iframename) {

   var pTar = null;

   if (document.getElementById){

     pTar = document.getElementById(iframename);

   }

   else{

     eval('pTar = ' + iframename + ';');

   }

   if (pTar && !window.opera){

     //begin resizing iframe

     pTar.style.display="block"

     

     if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){

       //ns6 syntax

       pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight-50;

     }

     else if (pTar.Document && pTar.Document.body.scrollHeight){

       //ie5+ syntax

       pTar.height = pTar.Document.body.scrollHeight-50;

     }

   }

 }

//****************************************音乐列表

var songs_num=-1;

var song_list=new Array();

var songer_list=new Array();

var songurl_list=new Array();

function music_list(song,singer,song_url){

songs_num++;

song_list[songs_num]=htmltt(song);

songer_list[songs_num]=htmltt(singer);

songurl_list[songs_num]=song_url;

}

var mypage=1;

function list_page(m_p){

if((m_p-1)*music_page_num>songs_num | m_p<=0)m_p=1;

mypage=m_p;

document.all.music_l.innerHTML="";

var i;

for(i=(mypage-1)*music_page_num;i<=songs_num & i<mypage*music_page_num;i++){

document.all.music_l.innerHTML+="<font style=\"cursor:hand;\" id=\"song_font"+(i+1)+"\" οnclick=\"javascript:s_ing_id="+(i+1)+";to_play("+(i+1)+",'song_img"+(i+1)+"');\"><img id=\"song_img"+(i+1)+"\" src=\"images/music_b.gif\" name=\"song_img\" border=\"0\" />"+(i+1)+"."+song_list[i].substr(0,16)+"-"+songer_list[i].substr(0,7)+"</font><br>";

}

document.all.music_l.innerHTML+="<hr width=\"100%\" size=\"1\" color=\"#aaaaaa\"><font style=\"cursor:hand;\" οnclick=\"list_page("+(mypage-1)+")\">上一页</font>  <font style=\"cursor:hand;\" οnclick=\"list_page("+(mypage+1)+")\">下一页</font> &nbsp;    ";

var select_str="";

var i,maxpage;

if(songs_num%music_page_num==0)maxpage=songs_num/music_page_num;

else maxpage=songs_num/music_page_num+1;

select_str+="跳<select size=\"1\" name=\"D1\" οnchange=\"list_page(this.value)\">";

for(i=1;i<=maxpage;i++){

if(mypage==i)select_str+="<option value=\""+i+"\" selected>"+i+"</option>";

else select_str+="<option value=\""+i+"\">"+i+"</option>";

}

select_str+="</select>页";

document.all.music_l.innerHTML+=select_str;

}

var player1="<object id=\"myPlayer\" classid=\"clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95\" id=\"MediaPlayer1\" width=\"100%\" height=\"400\"><param name=\"AudioStream\" value=\"-1\"><param name=\"AutoSize\" value=\"0\"><param name=\"AutoStart\" value=\"-1\"><param name=\"AnimationAtStart\" value=\"-1\"><param name=\"AllowScan\" value=\"-1\"><param name=\"AllowChangeDisplaySize\" value=\"-1\"><param name=\"AutoRewind\" value=\"0\"><param name=\"Balance\" value=\"0\"><param name=\"BufferingTime\" value=\"5\"><param name=\"CaptioningID\" value><param name=\"ClickToPlay\" value=\"-1\"><param name=\"CursorType\" value=\"0\"><param name=\"CurrentPosition\" value=\"-1\"><param name=\"CurrentMarker\" value=\"0\"><param name=\"DefaultFrame\" value><param name=\"DisplayBackColor\" value=\"0\"><param name=\"DisplayForeColor\" value=\"16777215\"><param name=\"DisplayMode\" value=\"0\"><param name=\"DisplaySize\" value=\"2\"><param name=\"Enabled\" value=\"-1\"><param name=\"EnableContextMenu\" value=\"-1\"><param name=\"EnablePositionControls\" value=\"-1\"><param name=\"EnableFullScreenControls\" value=\"0\"><param name=\"EnableTracker\" value=\"-1\"><param name=\"filename\" value=\"";

var player2="\"><param name=\"InvokeURLs\" value=\"-1\"><param name=\"Language\" value=\"-1\"><param name=\"Mute\" value=\"0\"><param name=\"PlayCount\" value=\"1\"><param name=\"PreviewMode\" value=\"0\"><param name=\"Rate\" value=\"1\"><param name=\"SelectionStart\" value=\"-1\"><param name=\"SelectionEnd\" value=\"-1\"><param name=\"SendOpenStateChangeEvents\" value=\"-1\"><param name=\"SendWarningEvents\" value=\"-1\"><param name=\"SendErrorEvents\" value=\"-1\"><param name=\"SendKeyboardEvents\" value=\"0\"><param name=\"SendMouseClickEvents\" value=\"0\"><param name=\"SendMouseMoveEvents\" value=\"0\"><param name=\"SendPlayStateChangeEvents\" value=\"-1\"><param name=\"ShowCaptioning\" value=\"0\"><param name=\"ShowControls\" value=\"-1\"><param name=\"ShowAudioControls\" value=\"-1\"><param name=\"ShowDisplay\" value=\"0\"><param name=\"ShowGotoBar\" value=\"0\"><param name=\"ShowPositionControls\" value=\"-1\"><param name=\"ShowStatusBar\" value=\"-1\"><param name=\"ShowTracker\" value=\"-1\"><param name=\"TransparentAtStart\" value=\"0\"><param name=\"VideoBorderWidth\" value=\"0\"><param name=\"VideoBorderColor\" value=\"0\"><param name=\"VideoBorder3D\" value=\"0\"><param name=\"Volume\" value=\"-40\"><param name=\"WindowlessVideo\" value=\"0\"></object>";

var mark=true;

var songimging_id;

function to_play(song_id,song_imging){

if(song_id%music_page_num==0)list_page(parseInt(song_id/music_page_num));

else list_page(parseInt(song_id/music_page_num)+1);

document.all.player_td.innerHTML=player1+songurl_list[song_id-1]+player2;

document.all.myPlayer.play();

var s_t=" "+song_list[song_id-1].substr(0,39)+" - "+songer_list[song_id-1].substr(0,15);

document.all.song_title.innerHTML=s_t;

var img_id=document.getElementById(song_imging);

if(mark==true){

img_id.src="images/music_ing.gif";

songimging_id=img_id;

mark=false;

}

else{

mark=true;

songimging_id.src="images/music_b.gif";

to_play(song_id,String(song_imging));

}

}

（12）最后在页面的中部加上个人简介 并且设置好CSS样式

3.3.4 其它页面的设计

其他页面是在此页面的设计好的框架上，订好的css样式，添加一些内容和各页面该有的内容。

如音乐页面

这样我的个人网站已经制作完成。

3.3.5网页中特效的运用

网页特效的运用在整个网站中并不是最重要的，但也是不可取少的，它在一定程度上起到了画龙点睛的作用！也许你会说，有没有特效无所谓，只要网页构思好，网页页面设计的得好就可以了！这种想法是不对的，过多的网页特效会使得页面显得杂乱而且不整洁，但是适度的网页特效却能使网页更具有灵动性，更能吸引人的眼球！

在我们的网站的不同页面中分别运用了一些网页特效，是从网上下载的网页特效的代码，具体如下：

1、走马灯灯效果

效果：该特效的效果和幻灯片播放效果类似，多个图片循环出现，不停互换。

在所有页面中都有体现。

   

3.3.6整理站点

网页做完以后往往不能马上发布，还需要检验下网页之间的链接是否准确，文件是否冗等，有时还需要掌握整个站点的结构以备日后的修改。

1.查看站点地图

站点地图用查看链接关系和导航关系，在小型站点和整齐有序的站点中一般不起太多的作用。

（1）在Dreamweaver MX窗口菜单下的“站点地图”命令，打开“站点”面板。

（2）单击“站点”面板的展开/折叠按钮，Dreamweaver会显示出站点的结构图。

2.检查超链接情况

链接检查不仅仅在此外使用，当在站点窗口中移动一个文件的时候，Dreamweaver也会问我们是否需要扫描结果显示出来，还会询问是否要更新链接。

在“站点”面板中选择“站点”菜单下的“检查站点范围的链接”命令。

Dreamweaver会弹出“链接检查器”面板。检查完毕后，可让用户查看不同类型的链接情况，还可以保存链接检查结果。

1.4 网站的上传与发布

1.4.1 网站的上传与发布

在网站发布到互联网之前，先去运营商上申请域名和空间，域名是别人访问网站的地址，如何找到你的网站就靠它。空间是放网站页面的地方。

启动leapftp实现网站上传,建立新的连接，输入服务器的IP地址，用户名和密码

然后将文件中的文件上传的服务器的文件夹

 

3.4.2 网站的维护

        网站的维护更多是页面和内容的更新。定时上传图片和文件。就可以了。