学 号：
黄石理工学院
《网页制作与网页规
划》
制作说明书
网站名称
手机世界
教 学 院
计算机学院
专 业
计算机科学与技术
班 级
10 级专升本
姓 名
指导教师
伍红华
一、 网站简介
本网站主要是为广大手机玩家提供手机资讯、手机软件、手机铃声、手机图片、
手机主题、等手机娱乐及应用服务。
当今世界人们的生活是越来越离不开手机，随着手机通讯的技术的日益革新，手机
的早已不局限于当年那个只能打电话、发短信的功能。现在的手机已经进入 3G 时代，
有了智能机的崛起。我们可以用手机来上网、用手机来看视频、用手机来玩网游、用
手机来拍照等等。
在著名的 GOOGLE 以及百度等搜索引擎上，有关手机的关键词（比如手机、手机
软件、手机号码、手机报价等）是与日俱增，人们对手机的认识、需求也是越来越大。
现在人们购买一款手机，不再只局限于通话质量、外观，更看中手机的其它功能方面
的应用。比如购买手机时会考虑它的像素、操作系统、网速、存储空间等等。
对于对手机相关知识尚且陌生的群体，我希望通过我所做的网站，能够让每个仔细
看过这些介绍的网站浏览者来说，对手机有着或多或少的了解。从而知道如何去选购
物一款真正适合自己的手机，如何通过相关手机软件、手机主题、手机图片等让自己
手机炫起来
我所做的网站是一个静态网站。静态网页都有一个固定的网址。静态网站不需要通
过数据库的支持，所以静态网页的访问速度较快且便于维护。静态网页的内容相对稳
定，容易被搜索。全部由 HTML 代码格式页面组成，所有的内容都包含在网页文件中。
比如网页上有一些如 GIF 动画、滚动图片、模板、库文件等。当然，由于本人水平有
限，不足之处，望予以赐教。
2010
年
11
月
10
日
2
二、网站功能说明
1．整体规划
（1）策划主题和确定风格
我所创建的网站是一个介绍手机、为手机提供娱乐及应用的网站。本网站的风格是大
众化，更多的使用表格来实现提供，这样可以提高浏览速度。网页的颜色一般以蓝、白为
主。
（2）网站的基本结构：
基本结构如图 1：
图 1
网站的目录结构及其主要存放的文件类型如下表 1：
文件夹名称 存放的文件类型
CSS
CSS 样式文件
flash
动画文件
js
外部脚本文件
Library
库文件
Templates
模板文件
image
图像文件、照片
表 1
手机世界
网站首页 手机资讯 手机铃声 手机图片 软件大全 选机中心
3
（3）设计主要页面的布局
其中以主页的布局为例如表 2 所示：
Logo 和相关链接
导航栏
（动态图片） 手机要闻 手机咨询
手机观察 产业新闻 热门主题模块
品牌手机图片及相关链接
友情链接
版权区
表 2
2.每个页面的功能
本网站共 17 个页面，以下为主要页面的说明。
（1）index 页面
图 2
如图 2Index 页面是主页。通过该主页浏览者可以对手机世界网有一个初步的了解。比
如对手机的相关新闻、相关机型的报价、业内的一些行情有所了解。在这里我采用了 div
和表格的嵌套来布局，并运用了 CSS 样式表、超链接、对图像的相关操作来进行对网页的
设计。其中的相应链接对应的网页有注册->注册页面、手机主题->手机主题页面、手机
盘->手机 U 盘页面、手机资讯->手机资讯页面、手机铃声->手机铃声页面、手机图片->手
机图片页面、软件大全->软件大全页面、选机中心->选机中心页面、iPhone 之争 3G 用户争
4
夺的标志性事件-> iPhone 之争 3G 用户争夺的标志性事件页面、联通 iPhone 新政属于被动
防御->联通 iPhone 新政属于被动防御页面、网友痛批手机体验五宗罪:软件应用吸金->页
面、称国内 3G 手机单月销量首次突破 500 万台->称国内 3G 手机单月销量首次突破 500 万
台页面、支持 WiFi 魅族 M9 接受预订->支持 WiFi 魅族 M9 接受预订页面、洋品牌或发力
TD 中高端集采->洋品牌或发力 TD 中高端集采页面、NOKIA 图片->NOKIA 页面。
导航条的应用：先把导航栏嵌套在一个 DIV 中，并居中，再嵌套两个 DIV，便于改
变样式，最后用 UL,LI 标签，进行调用样式，调用样式处理导航条。功能是每到一个相关
页面，颜色以黄色显示如：进入首页：则网站首页显示为黄色。
2)手机资讯网页
图 3
手机资讯网页如图 3。其功能是用户可以从听、看、读这三个方面对手机的相关资讯
有初步的了解。比如在媒体部分可以观看步步高手机的视频，这样并可以通过导航栏、相
关文字链接、图片来进入相关页面去了解所需信息。
在实际操作中，要想将每个表格对齐总是容易出问题，这时就要用到相关属性来控
制 。 如 style 、 valign 、 align 、 cellpadding 、 cellspacing 等 来 控 制 。 如 语 句 ：
<table width="250" height="257" align="center" cellpadding="0"
cellspacing="0" id="q2A1" >就是运用 cellSpacing 属性可设置或返回在表格中的单
元格之间的空白量（以像素为单位），cellPadding 属性可设置或返回单元格边框与单元
格内容之间的空白量（以像素为单位）。在表格嵌套中，如果想要某个表格置顶，则要用
到 valign 属性，将其设为 top 即可。
调整表格颜色则要用到 border-bottom、border-top、border-left、border-right
属性。
5
评论2