My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
MettingOne  
Updated Mar 20, 2011 by Dr.Pingj...@gmail.com

# 一个简单静态网站演示

引入

每一个WEB开发者最先梦寐以求的就是拥有一个自己的网站,记录自己生活中的点点滴滴,我们现在学习它,当然首先要满足我们自己的愿望了。

需求分析

导航菜单

这是一个网站必须要有的,一个设计良好的导航菜单会给用户带来很好的体验。

日志

这是一个个人网站,我们需要记录自己学习生活中的各种问题,所以我们要有一个位置专门显示我们的文章,如果有可能我们还应该在下面添加一个评论的功能,但是这里时间有限就不做了。

相册

我们可以做一个简单的相册来展示我们收藏的图片。

友情链接

为了方便访问我们好友的个人网站,我们需要设计一个简单的友情链接,方便平时访问好友的网站,也方便用户访问你好友的个人网站。

留言版

为了和用户相互交流,我们可以设计一个简单的留言版。主要是为了学习使用表单,因为动态网站我们将主要和表单打交道。

功能实现

这里我们使用迭代开发的方式来实现这个网站,所谓迭代,就是不断的完善整个网站的功能。

首先我们可以确定整个网站的布局,设计一个通用的模板,由于是一个静态网站,我们需要手动的复制这个模版产生新的页面。
接下来可以实现一个导航菜单。这里我们将用到HTML,CSS,Javascript来实现整个功能。这里我们将体验网页设计的一个原则:内容,表现,行为分离,我们使用一个列表来表示菜单,通过CSS来表现,使用Javascript来控制交互,这样会为我们日后更新这个菜单带来莫大的好处。
再接下来我们可以实现一个友情链接,就是一个简单的列表,当然可以精心的修饰一下。
下面我们可以随便编写一篇文章做为我们网站的第一篇日志,让后显示在上面。
日志做好之后我们可以做一个留言版,让用户表发建议和意见。
最后我们将实现一个相册,用来展示我们收藏的图片。
到此整个网站就完成了,但是我们的任务还没有完成,我们还需要让我们的网站通过各种浏览器的测试,只有这样才能保证所有的用户都能够顺利的访问我们的网站。

总结

整个网站非常的简单,但是它代表了大部分静态页面的设计流程,这里我们简化了很多,比如布局的设计,原则上我们应该先时候设计软件设计出整个网站的效果图,但是由于网站功能简单,这里就直接开始编码了。

下载源代码

http://lxynetwork.googlecode.com/files/metting1.tar.gz

Comment by project member Dr.Pingj...@gmail.com, Mar 21, 2011

可以在这里发表评论的!

Powered by Google Project Hosting