1、个人网站设计与制作白璐 3050603018（江苏大学计算机学院 计算机 0501 ）指导老师：刘欣【内容提要】随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以刚好的展示自己，而且可以提高自己在计算机应用方面的能力。故本次作业，我选择制作个人网站。 个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。 在网页制作中，我借鉴了韩国个人网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用了 fireworks 强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用 Flash 进行片头
2、动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由 Dreamwave 完成的。 【关键词】网站设计 网 络 三 剑 客 Dreamweaver Flash Fireworks 动 漫【正文】一、概述需要使用的网页工具Adobe 网 页 制 作 三 剑 客 ， 也 就 是 人 们 普 遍 称 之 的 “网 络 三 剑 客 ”。 它 们 分 别 是 ：1、 Adobe Dreamweaver 8网 络 三 剑 客 之 一 ， 出 色 的 网 页 代 码 编 辑 和 网 页 架 构 设 计 工 具 。 也 是 现 今 网 友 用 得 最 多 的 网 站设 计 工 具 。主 要 功 能 :
3、Dreamweaver 在 多 媒 体 方 面 颇 有 建 树 的 Macromedia 公 司 推 出 的 可 视 化 网 页 制 作 工 具 ， 它 与Flash、 Fireworks 合 在 一 起 被 称 为 网 页 制 作 三 剑 客 ， 这 三 个 软 件 相 辅 相 承 ， 是 制 作 网 页 的 最 佳 选择 。 其 中 ， Dreamweaver 主 要 用 来 制 作 网 页 文 件 ， 制 作 出 来 的 网 页 兼 容 性 比 较 好 ， 制 作 效 率 也 很高 ， Flash 用 来 制 作 精 美 的 网 页 动 画 ， 而 Fireworks 用 来 处 理 网
4、 页 中 的 图 形 。2、 Adobe Flash 8网 络 三 剑 客 之 一 ， swf 奠 定 了 网 络 流 媒 体 的 一 个 标 准 ， 也 是 网 络 上 最 活 跃 的 影 音 传 播 手 段 ，同 时 它 也 尽 最 大 可 能 地 使 一 批 网 虫 过 了 一 回 导 演 瘾 。主 要 功 能 :flash 是 Macromedia 公 司 推 出 辅 助 网 页 的 动 画 制 做 工 具 。3、 Adobe Fireworks 8网 络 三 剑 客 之 一 ， 强 大 的 像 素 图 处 理 软 件 ， 因 为 Photoshop 的 光 辉 使 它 不 再 那 么
5、 闪 耀 ， 不过 熟 悉 网 页 制 作 的 人 还 是 蛮 了 解 它 的 。主 要 功 能 : Fireworks 是 Macromedia 公 司 发 布 的 一 款 专 为 网 络 图 形 设 计 的 图 形 编 辑 软 件 ， 它 大 大 简化 了 网 络 图 形 设 计 的 工 作 难 度 ， 无 论 是 专 业 设 计 家 还 是 业 余 爱 好 者 ， 使 用 Fireworks 都 不 仅 可以 轻 松 地 制 作 出 十 分 动 感 的 GIF 动 画 ， 还 可 以 轻 易 地 完 成 大 图 切 割 、 动 态 按 钮 、 动 态 翻 转 图 等 ，因 此 ， 对 于
6、 辅 助 网 页 编 辑 来 说 ， Fireworks 将 是 最 大 的 功 臣 。 二、结构图 三、站点主题选择 由于网络上各种各样的信息很多，别人可以轻易的各大知名网站上了解自己想要的信息。所以，我的关注的便是怎样让自己的网站更具有个性魅力，使个人擅长的信息更全面的反映于浏览者。以上便是我个人站点主题选择的指导思想。 站点的主体内容由动漫首页、动漫公告、动漫音乐、动漫视频和动漫壁纸五个模块组成。从各个方面全方位展示动漫信息。 除主要内容之外，还设有留言给我、关于白璐这两个个模块。这部分内容将我个人信息展现给大家，也可以让浏览者给我发邮件。index动漫首页 动漫公告 动漫音乐 动漫视频
7、 动漫壁纸关于白璐留言给我动漫首页四、模块介绍 （一） index 使用 Fireworks 制 作 的 图 片 进入主页，给人一种耳目一新之感。画面简洁，点击 Enter 进入首页，或 10 秒后页面自动跳转到动漫首页。（二） 动漫首页首页是用模板制作的，主要是制作页面标题和开头的 flash。首页整体的色彩搭配很大胆的采用了黑色和蓝色基调，页面标题是用 Fireworks 做 的 ， 组 合 了 用 艺 术 字 写 的 “动 漫 社 ”三 字 。Flash 动画是一个倒计时逐帧动画。中间分热播剧集、动漫快递和动漫专辑三个部分。但并没有任何链接。左侧列有人气排行前十位的动漫。下面是友情链接。
8、链接了包括优酷网、土豆网、迅雷在线及看动漫的网站。下方留有动漫首页、留言给我和关于白璐三个链接。最后是一些网页设计信息，包括设计者姓名、电话、QQ、邮箱，以及网页最后修改时间。（三） 动漫公告动漫公告是最近正在热播的剧集的简介。内容与报纸的头版头条有异曲同工之妙。使用了模板来设计网页，使每一页的公告整齐一致。（四） 动漫音乐这一页设计的比较简单，只是超链接了几个优酷网上的音乐视频。（五） 动漫视频链接了优酷吸血鬼骑士和叛逆的鲁鲁修的视频。（六） 动漫壁纸Dreamweaver 中的“创建网络相册”命令使用户能够自动生成一个 Web 站点，该站点将显示给定文件夹中图像的“相册”。此命令使用 Ja
9、vaScript 来调用 Fireworks，后者为该文件夹中的每个图像创建一个缩略图以及一个较大尺寸的图像。然后，Dreamweaver 创建一个 Web 页，它包含所有缩略图以及指向较大图像的链接。五、创建新的样式表首先，您将创建包含 CSS 规则（定义段落文本样式）的外部样式表。在外部样式表中创建样式时，可以在一个中央位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面分别设置样式。1. 选择“文件”“新建” 。 2. 在“新建文档”对话框中的“类别”列中选择“基本页” ，在“基本页”列中选择“CSS” ，然后单击“创建” 。 空白样式表将出现在“文档”窗口中。“设计”视图
10、和“代码”视图按钮已被禁用。CSS 样式表是纯文本文件，其内容将不会用于在浏览器中查看。3. 将该页保存（“文件”“保存” ）为 cafe_townsend.css。 保存样式表时，请确保将其保存到 cafe_townsend folder 文件夹（您的 Web 站点的根文件夹）中。4. 在样式表中键入以下代码： pfont-family: Verdana, sans-serif;font-size: 11px;color: #000000;line-height: 18px;padding: 3px;当您键入代码时，Dreamweaver 将使用代码提示为您建议一些选项，以帮您完成输入。当看
11、到希望 Dreamweaver 为您完成键入的代码时，请按 Enter 键 (Windows) 或 Return 键 (Macintosh)。不要忘记在每行结尾处的属性值后面加上一个分号。完成后的代码类似于下面的示例：5. 保存样式表。 接下来，将该样式表附加到 index.html 页面中。六、总结不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了 Flash、Dreamwave、Fireworks、Html 语言、CSS、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。 整个网站的制作是我一个人独立完成的。虽然整个网页的结构还有很多不足，但是我的确能够感到在我制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望今后能再设计一个可以动态网站，从而弥补自己在动态网络语言方面的不足。【参考文献】【01【 杨长兴等著， 网页制作与设计教程(第二版)【02【 天蓝工作室著， 网站架构与美工黄金组合【03【 伍梵华著， 网页设计与网站开发HTML 网页制作网站开发完全实战【04【 朱印宏，熊利荣 编著， Dreamweaver8 完美网页设计:ASP 动态网页设计篇
