你可以下个原码http://down.chinaz.com/
目 录
前言 1
第1章 需求分析 2
1.1 计划与分析 2
1.2 硬件平台 2
1.3 软件平台 2
第2章 网站总体设计 7
2.1 网站简介 7
2.2 资料搜索 8
2.3 链接设计 8
2.3.1 链接的颜色 8
2.3.2 利用HTML标记控制页面链接颜色 8
2.4 创建链接 9
2.4.1 链接文档 9
2.4.2 模块间的链接结构 10
第3章 网站的详细设计过程 10
3.1 网站首页的制作 10
3.2 “流行时尚”子页面的制作 15
3.3 留言版的制作 16
第4章 网站的测试、上传、维护与更新 17
4.1 网站的测试 17
4.1.1 检测浏览器的兼容性 17
4.1.2 检测并修复文档间的错误链接 18
4.2 上传文件 18
4.3 网站的维护与更新 18
第5章 设 计 总 结 19
参考文献 20
附件 21
前言
随着社会的发展，人类的不断进步，信息技术逐渐深入了人们的日常生活，工作和学习中。网络技术和现代通讯技术得到了日新月异的展。众所周知，INTERNET（互联网）的魅力已风靡全球，在中国更是得到了十分迅速的发展。如今上网成了时髦事，他在人们的工作和学习中，起着巨大的影响。
利用网络，人们可以扩展视野，加强交流，他为人们提供各种服务。像新闻，游戏，娱乐，购物，尤其是互动式交流技术更是深受广大网民朋友的欢迎。所以随之而来的是如雨后春笋般大大小小的网站。分门别类，百花齐放，大至企业的产品营销，小到个人生平简介，无不争奇斗艳，好不热闹。
如果你想要快速获取最新信息，或是想把信息快速的传播出去，无疑，因特网是最佳的选择，它不仅是个信息的载体，还是个战士个人才华的大舞台，许多人设计个人主页，介绍自己的兴趣爱好，个人情况或是展示一些相关的图片，文字信息。这一切，都是因特网得以飞速发展的重要原因。
编者：xxx
2007年4月1日
第1章 需求分析
1.1 计划与分析
随着现代社会发展的日新月异，时尚已逐渐成为人们生活中不可缺少的部分。而服饰几乎成为时尚的代名词，它是对时尚这一概念的最好表证。在国外，如号称浪漫之都的法国巴黎，每年都要举行很多次的时尚发布会，来展示最新的流行趋势，其实就是一些时下最新颖、最时髦的服饰秀。当然，这并非我以“时尚服饰”这一主题作为我设计课题的主要原因。首先，我是一个喜欢时尚，热爱新颖的女孩，我想有很多人会跟我一样，其次，也是最重要的一点，就是我对服饰特别感兴趣，因此就自然而然的将“时尚服饰”作为我此次设计的主题。并将其划分为几个版块来一一阐释，具体为：流行时尚、穿着艺术、夏日来袭、婚纱之梦。
本次设计采用了美国MACROMEDIA公司的网站制作利器——DREAMWEAVER MX、FIREWORKS MX和FLASH MX及等多种中外优秀软件。
一、 DREAMWEAVER MX简介
Dreamweaver 是一种所见即所得的网页编辑器。他操作简单，可进行多个站点的管理设置和HTML语言编辑器，支持DHTML和CSS，分类提供了页面对象，可净化Microsoft Word 生成的HTML文件，可导入Microsoft Excel 和Microsoft Access建立的数据文件，导入和编辑Fireworks制作的HTML源代码和图象以及导入FLASH 动画，按钮和文字等等。
Deamweaver MX是专业网站设计和生产的解决方案。用它可以制作非常好的站点，更好的网站。
无论你是喜欢可视化的网页开发环境还是喜欢手写代码，Dreamweaver MX都能满足你的要求。更振奋人心的是，你可以在Dreamweaver MX中直接制作Flash的文字和按钮。
1. Dreamweaver MX 的新增功能
1) 代码与设计同屏显示
2) JAVASCOR IPT 调试器
3) 整合O‘REILLY代码参考
4) 排版显示
5) FLASH按钮和文本
6) 资源面板
7) 双向图形编辑
8) 与Microsoft Visual SourceSafe 和Webdav协作
9) 站点报告
10) Macromedia对于Dreamweaver 的服务
2. Dreamweaver MX 的工作界面
菜单栏
1) 文件
在该菜单内，包含了对文件和模版操作，打开，新建，关闭，导入，导出和检查链接等的各种菜单命令。
2) 编辑
在该菜单内，包含了操作步骤的撤消与重复，剪贴板的剪切，复制，粘贴和清除，选择，查找与替换，参数选择对话框的调用等各种菜单命令。
3) 查看
在该菜单内，包含了查看（是否显示）Head内容，不可见元素，标尺，网络，层边界等，以及载入图像和调整图像位置等的各种菜单命令。
4) 插入
在该菜单内，包含了插入图像，表格，层，按钮，复选框，单选钮，日期和其他组件等各种菜单命令。
5) 修改
在该菜单内，包含了修改页属性，库，模板，链接目标，层和热点（链接点）等的各种菜单命令。
6) 文本
在该菜单内，包含了各种文本处理的菜单命令。例如：缩进，文本位置，字体，字大小，颜色，风格，HTML风格，CSS风格以及检查英文拼法是否正确等。
7) 命令
在该菜单内，包含了对Dreamweaver设置进行修改的命令。
8) 站点
在该菜单内，包含了建立站点和编辑站点的各种菜单命令
9) 窗口
在该菜单内，包含了打开或关闭各种窗口（状态栏，对象面板，快捷面板，属性栏，库CCS风格，模板，层，结构，历史，位置文件和位置图等）的菜单命令。
10) 帮助
在该菜单内，包含了Dreamweaver 的版本介绍，Dreamweaver扩展功能介绍，交互式帮助信息，网络在线帮助等各种菜单命令。
二、 FIREWORKS MX简介
Fireworks 是 Macromedia 三套网页利器之一，它是用来画图用的，它相当于结合了 Photoshop( 点阵图处理 )以及CorelDraw(绘制向量图 ) 的功能。网页上很流行的阴影、立体按钮...等等的效果，也只需用鼠标点一Fireworks 是 Macromedia 三套网页利器之一，它是用来画图用的，它相当于结合了 Photoshop( 点阵图处理 )以及CorelDraw(绘制向量图 ) 的功能。网页上很流行的阴影、立体按钮...等等的效果，也只需用鼠标点一下，不必再靠什么KPT之类的外挂滤镜。而且 Fireworks很完整的支持网页 16 进制的色彩模式，提供安全色盘的使用和转换，要切割图形、做影像对应( Image Map )、背景透明，要图又小又漂亮，在Fireworks 中做起来都非常方便，修改图形也是很容易的 。不需要再同时打开Photoshop 和 CorelDraw...等等各类软体，切换来切换去的了。
Fireworks MX新功能有:
1、 执行效率的提高
2、 用户界面的改进
3、 内建FTP登陆和版本控制
4、 新的特效
5、 自动图形
6、 新的照片修饰工具
7、 服务器端代码的支持
8、 系统反锯齿和自定义反锯齿
9、 双字节支持
10、提供了JavaScript API接口
三、 HTML语言
HTML（Hyper Text Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。
HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。生成一个HTML文档主要有以下三种途径：
1.手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2.通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3.由Web服务器（或称HTTP 服务器）一方实时动态地生成。
第2章 网站总体设计
2.1 网站简介
我设计的网站主要是以时尚服饰这个题材为中心而展开的，并命名为《时尚服饰网》。可想而知，这也是一个关于时尚服饰的最详实的资料库。当然，这个网站更多的是面向那些对时尚服饰感兴趣的朋友们，但既然有那么多人对时尚服饰感兴趣，我想以此为主题做出的网站应该也是趋于大众化的！在此希望那些喜欢服饰并对时尚服饰感兴趣的朋友们多多地提出宝贵的意见和建议，欢迎那些对此兴趣不是很浓厚的朋友们也加入到我们的行列中来，让我们一起走进服饰的魅力世界！
我设计的《时尚服饰网》网站是由以下几方面组成的：
1. 《时尚首页》是一个模板网页，直观上很简洁，主要提供整个网站的导航。
2. 《流行时尚》主要以时尚为中心，从时装快讯、名品故事、时尚品牌这三个方面介绍了相关内容。
3. 《穿着艺术》很明显，这是一个有关穿着和艺术方面的介绍，主要从女人、饰界、内酷几个方面介绍，使人们从中可以了解到如何搭配服装才能穿出美，如何塑身美体，给人们视觉上的享受。
4. 《夏日来袭》主要从T恤靓影、T恤衫局部风情、T恤衫保养这三个方面介绍。
5. 《婚纱之梦》主要是一些婚纱的精典图片欣赏。
6. 《时尚留言》是为用户提供了发表自己意见的平台，让用户对网站提出宝贵意见！
下图为网站的结构图：
2.2 资料搜索
素材的搜集：
资料收集通常是最耗时、最困难的一部分。网站如果要有特色，一定要有独特的东西。但一个人的精力是有限的，读者的要求是无限的。需要在这个矛盾之间权衡。
1、字的收集：模块中的文字资料是从相关图书资料中查找和相关的网站上下载的。
2、片的收集：模块中的使用的图片来自相关的网站和各种书籍、光盘中搜集而来的。
素材的加工：
素材搜集完成后，下面的工作就是要对素材进行加工和处理。素材不能不变的使用在作品中。因为我们的素材在作品中要体现作品的思想信息和我们创作的感情，只有经过我们加工处理过的素材才能够很好的传达出这种感情来。
对于图形素材的加工，主要使用的工具是FIREWORKS MX 2004、Photoshop7.0。从图片的大小上来看，我们要把图片统一为一个大小，统一成为我们作品规定的大小尺寸；从色彩上看，我们所搜集的素材色彩就不统一，所以要通过对色调、饱和度、色彩平衡等方面使图片在色调上保持统一；从图片的外观上看，我们可以对图片素材进行剪切、组合等的变化，还可以利用特效的修饰来使图片更能够适合需要。
网站标题及一些按钮图片和Flash动画是采用FIREWORKS MX 2004和SWFText制作而成。下面简单介绍其制作过程：
2.3 链接设计
2.3.1 链接的颜色
文本链接的链接文字有以下几种颜色状态：
①未访问的链接颜色
②已访问的链接颜色
③正在打开的链接颜色
④鼠标悬停处的链接颜色
2.3.2利用HTML标记控制页面链接颜色
在标记中可以附加link属性来设计未访问链接的颜色，用a link属性来设置正在打开的链接的颜色，用v link属性来控制已访问链接的颜色，如a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999900;
}
a:hover {
text-decoration: none;
color: #cc0033;
}
a:active {
text-decoration: none;
color: #cc33cc;}
2.4 创建链接
2.4.1 链接文档
大多数的链接都是指向文档的，可以用多种不同的方式设置目的文档的地址，Dreamweaver中默认情况下，链接的文档打开在当前窗口或框架中，要使被链接的文档显示在其他地方，则需要从属性检查器的目标下拉列表框中选择合适的选项：
_blank ：将链接文档载入到新的未命名浏览器窗口中；
_ parent： 将链接文档载入到父框架集或包含该链接的框架窗口中；
_self： 将链接文档载入与该链接相同的框架或窗口中，此目标是默认的选项。
_top ：将链接文档载入到整个浏览器窗口并删除所有框架。
2.4.2 模块间的链接结构
链接（称超链接）是WWW的魅力所在，为了把INTERNET上众多的网站与网页联系起来，构成一个有机整体，就是在网页上加一个超链接才能让互联网为我们提供更多的信息，使这么多的信息相互关
联，使信息的寻找更加方便，超链接把世界联系的更加紧密。
要正确的链接，必须了解链接与被链接文档之间的路径，每个网 页都有唯一的地址，又称资源定位符（URL）。
主页的导航条可以链接到五个副页面，五个副页面的导航条不仅要和主页面相链接又要和下一级文件相连,整个网站各个网页环环相套,总之，无论你处在任何页面，都可以轻松的返回上一页面。
第3章 网站的详细设计过程
本章讲述了此网站的几个主要页面的详细制作过程，包括网站首页的制作,“流行时尚”子页面的制作，“时尚留言”子页面的制作。通过此章的具体描述，可以详细的了解网站的制作过程。
3.1 网站首页的制作
本网站采用三层链接式的结构，在用户进入本站之后首先进入的是第一个主页面，第一个主页面就好象是一本书的目录，只是进入网站的一个门户，通过它可以了解整个网站的整体架构，以及它基本所函概的内容，而其他的页面则是网站的二级次页面及三级页面，它们也就是网站的主体内容。这样做会使本网站的结构更为清晰，令浏览者一目了然。下面就一一介绍这主要页面的制作过程，首先介绍的是主页面的制作过程：
本页是《时尚服饰网》站点的主页，他将这一版块的主要内容以超级链接的方式显示出来，供用户实现跳转，本网页整体布局采用Dreamweaver MX进行了开发制作，部分图片采用了Fireworks进行了优化和修改。如下图所示：
图
首先，为了使这个网页的布局整齐规范，我采用了表格的方式进行网页布局的控制。将这个网页上的全部组成元素都放在我所建立的表格中。
表格的作用
无论我们从事什么工作，一定会和各个表格打过交道。填写个人资料，或者申请某项服务你必须填写相应的表格，而在这里的表格作用是分割不同的数据，使得相关人员能更好的查看和收集信息，那么，做为以电脑为载体的表格，他此时的作用就格式化数据，他的作用和填写表格是一样的。在制作网页中，表格出现了另一种作用，就是安排和定位文本和网页的相关对象，比如图片，视频等等。
过去利用表格制作网页是有一定难度的，因为人必须记住相关的表格HTML 代码，自从所见即所得网页编辑工具出现后，表格逐渐显示出了他在网页制作过程中的独特作用，目前大多数网站都是利用表格来制作网页，利用表格最大的好处是，能很方便的编辑对象，而不会影响到其他表格或单元格里的对象。
表格的特点
（1）格式化数据
（2）在网页制作中，安排和定位网页文本和对象.
这个主页是一个大的表格组成的。
图
从上图依稀可以看出这个表格的布局，当这个表格制作完毕后就该设背景和图片了。
1． 整个表格的背景色为黑色，只要在标记内加入代码bgcolor="#000000"就会使整个页面的背景都变成了黑色。
2． 在表格中再次插入一个小一点的表格，如下图所示：
图
3． 然后设置背景图，背景图是一副图片用Firework分割后嵌入到表格中的，由于这个页面是借用别人的模板，所以在此就不多做介绍！
4． 另外页面中的文字简介使用的是跑马灯的效果，方向是从下往上，其代码如下：
