个人网站设计与制作

个人网站设计与制作

白璐  3050603018

（江苏大学计算机学院      计算机0501 ）

指导老师：刘欣

【内容提要】    

随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以刚好的展示自己，而且可以提高自己在计算机应用方面的能力。故本次作业，我选择制作个人网站。 

个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。 

在网页制作中，我借鉴了韩国个人网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用了fireworks强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用Flash进行片头动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由Dreamwave完成的。 

【关键词】

网站设计   网络三剑客    Dreamweaver      Flash      Fireworks     动漫

【正文】

一、概述

需要使用的网页工具

　　Adobe网页制作三剑客，也就是人们普遍称之的“网络三剑客”。它们分别是：

　　1、Adobe Dreamweaver 8

　　网络三剑客之一，出色的网页代码编辑和网页架构设计工具。也是现今网友用得最多的网站设计工具。

　　主要功能:

　　Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。

　　2、Adobe Flash 8

　　网络三剑客之一，swf奠定了网络流媒体的一个标准，也是网络上最活跃的影音传播手段，同时它也尽最大可能地使一批网虫过了一回导演瘾。

主要功能:

flash是Macromedia公司推出辅助网页的动画制做工具。

　　3、Adobe Fireworks 8

　　网络三剑客之一，强大的像素图处理软件，因为Photoshop的光辉使它不再那么闪耀，不过熟悉网页制作的人还是蛮了解它的。

　　主要功能:

　　  Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。 

二、结构图 

三、站点主题选择 

由于网络上各种各样的信息很多，别人可以轻易的各大知名网站上了解自己想要的信息。所以，我的关注的便是怎样让自己的网站更具有个性魅力，使个人擅长的信息更全面的反映于浏览者。以上便是我个人站点主题选择的指导思想。 

站点的主体内容由动漫首页、动漫公告、动漫音乐、动漫视频和动漫壁纸五个模块组成。从各个方面全方位展示动漫信息。 

除主要内容之外，还设有留言给我、关于白璐这两个个模块。这部分内容将我个人信息展现给大家，也可以让浏览者给我发邮件。

四、模块介绍 

（一）index 

使用Fireworks制作的图片进入主页，给人一种耳目一新之感。画面简洁，点击Enter进入首页，或10秒后页面自动跳转到动漫首页。

（二）动漫首页

首页是用模板制作的，主要是制作页面标题和开头的flash。首页整体的色彩搭配很大胆的采用了黑色和蓝色基调，

页面标题是用Fireworks做的，组合了用艺术字写的“动漫社”三字。

    Flash动画是一个倒计时逐帧动画。

    中间分热播剧集、动漫快递和动漫专辑三个部分。但并没有任何链接。

左侧列有人气排行前十位的动漫。下面是友情链接。链接了包括优酷网、土豆网、迅雷在线及看动漫的网站。

    下方留有动漫首页、留言给我和关于白璐三个链接。最后是一些网页设计信息，包括设计者姓名、电话、QQ、邮箱，以及网页最后修改时间。

（三）动漫公告

动漫公告是最近正在热播的剧集的简介。内容与报纸的头版头条有异曲同工之妙。使用了模板来设计网页，使每一页的公告整齐一致。

（四）动漫音乐

这一页设计的比较简单，只是超链接了几个优酷网上的音乐视频。

（五）动漫视频

链接了优酷《吸血鬼骑士》和《叛逆的鲁鲁修》的视频。

（六）动漫壁纸

Dreamweaver中的“创建网络相册”命令使用户能够自动生成一个Web站点，该站点将显示给定文件夹中图像的“相册”。此命令使用JavaScript来调用Fireworks，后者为该文件夹中的每个图像创建一个缩略图以及一个较大尺寸的图像。然后，Dreamweaver创建一个Web页，它包含所有缩略图以及指向较大图像的链接。

五、创建新的样式表

首先，您将创建包含 CSS 规则（定义段落文本样式）的外部样式表。在外部样式表中创建样式时，可以在一个位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面分别设置样式。

1.选择“文件”>“新建”。 

2.在“新建文档”对话框中的“类别”列中选择“基本页”，在“基本页”列中选择“CSS”，然后单击“创建”。 

空白样式表将出现在“文档”窗口中。“设计”视图和“代码”视图按钮已被禁用。CSS 样式表是纯文本文件，其内容将不会用于在浏览器中查看。

3.将该页保存（“文件”>“保存”）为 cafe_townsend.css。 

保存样式表时，请确保将其保存到 cafe_townsend folder 文件夹（您的 Web 站点的根文件夹）中。

4.在样式表中键入以下代码： 

p{

font-family: Verdana, sans-serif;

font-size: 11px;

color: #000000;

line-height: 18px;

padding: 3px;

}

当您键入代码时，Dreamweaver 将使用代码提示为您建议一些选项，以帮您完成输入。当看到希望 Dreamweaver 为您完成键入的代码时，请按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

不要忘记在每行结尾处的属性值后面加上一个分号。

完成后的代码类似于下面的示例：

5.保存样式表。 

接下来，将该样式表附加到 index.html 页面中。

六、总结

不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Flash、Dreamwave、Fireworks、Html语言、CSS、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。 

整个网站的制作是我一个人完成的。虽然整个网页的结构还有很多不足，但是我的确能够感到在我制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望今后能再设计一个可以动态网站，从而弥补自己在动态网络语言方面的不足。

【参考文献】

【01】杨长兴等著，《网页制作与设计教程(第二版)》

【02】 天蓝工作室著，《网站架构与美工黄金组合》

【03】伍梵华著，《网页设计与网站开发——HTML网页制作网站开发完全实战》

【04】朱印宏，熊利荣 编著，《Dreamweaver8完美网页设计:ASP动态网页设计篇》