NBA总决赛网站设计开发文档.docx
- 文档编号：4253716
- 上传时间：2023-05-06
- 格式：DOCX
- 页数：20
- 大小：1.53MB
NBA总决赛网站设计开发文档.docx
《NBA总决赛网站设计开发文档.docx》由会员分享，可在线阅读，更多相关《NBA总决赛网站设计开发文档.docx（20页珍藏版）》请在冰点文库上搜索。
NBA总决赛网站设计开发文档
NBA网站设计开发文档
专业：
软件工程
年级：
2009级2班
学号：
************
**************
完成时间：
2011年6月24日
1、网站的主题、定位
此次WEB程序设计的验证体系课，本人做的是一个关于NBA篮球总决赛的主题。
由于最近刚刚落下帷幕的NBA总决赛是众多篮球迷的关注焦点，而且本人对篮球的喜爱，对NBA的关注，因此选择对NBA的总决赛进了一个简单的网页设计。
该网页的风格是很随意的，主要介绍了NBA总决赛6场中，小牛与热火的精彩对决，每场比赛的新闻关注，每场比赛的精彩镜头，以及场内场外的各种关于NBA的新闻，让读者能对2011年NBA的总决赛有个深刻的印象。
网页主页看上去还是比较舒适的，布局紧凑，内容也都填充完整，读者看了会觉得跟真的网页有比较相似的地方。
在编写网页时，由于对WEB程序设计学习不够多，只是用一些简单的代码进行了编写，很多地方还不到位。
直接设计的话可能起不到学习的效果，因此此次选择用代码去进行编写。
2、网站的规划
网页的结构只要是一个主网页，还有若干个通过超链接进入的网页，大概有18个页面左右。
主页主要展示了NBA总决赛的一个大致信息，通过每个标题还可以点链接到各个网页了解到详细的信息。
比如说，在主网页上有总决赛第一场——第六场的标题，点击进去就可以看到每一场的详细信息，对每一个新闻也是如此的，点击其标题，便可以进入浏览它的详细内容。
3、网站素材的准备
制作NBA总决赛的网站，需要提供了大量的新闻以及精彩抓拍图片，要求美化网页还找了大量的图片做背景优化网页。
下面介绍各素材在网页当中的布局：
图片
说明
banner2
首页的头部
U5665P1117T29D17F470DT20110528133818
首页的头部
nba08；
用于导航上部
U5297P1117T29D7F420DT20110418171154
用于导航上部
U5662P1117T29D4F420DT20110418145244
用于导航上部
11cn_nav_divider
导航栏的背景图片
2149110_550x550_0
主页插图
U6418P1117T7D12697F57DT20110610121411
主页插图
283532_728-90
主页插图
2148601_550x550_0
标题块插图
U5661P1117T7D12499F57DT20110603103045
标题块插图
U5661P1117T29D17F422DT20110606112319
子网页插图
U6418P1117T7D12698F57DT20110610121451
子网页插图
U5661P1117T7D12499F57DT20110603103045
子网页插图
U5661P1117T7D12506F57DT20110603103352
子网页插图
U6418P1117T7D12697F57DT20110610121411
子网页插图
51810802
子网页插图
51809495
子网页插图
Img310061465
子网页插图
2149033_550x550_0
子网页插图
2147289_550x550_0
子网页插图
2146687_550x550_0
子网页插图
U5662P1117T29D17F424DT20110610115801
子网页插图
2149103_550x550_0
2149029_550x550_0
2149316_550x550_0
2149106_550x550_0
51809495
2154012_550x550_0
51810802
子网页插图
U6418P1117T7D12697F57DT20110610121411
2148596_550x550_0
U5661P1117T7D12506F57DT20110603103352
U6168P1117T7D12583F57DT20110606093424
子网页插图
2154268_550x550_0
子网页插图
2149316_550x550_0
子网页插图
4、网站页面的设计
4.1首页的基本布局
4.2子网页基本布局
5、页面设计的主要技术介绍
5.1XHTML的介绍与背景。
XHTML是TheExtensibleHyperTextMarkupLanguage（可扩展超文本标识语言）的缩写。
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
2000年底，国际W3C组织（WorldWideWebConsortium）组织公布发行了XHTML1.0版本。
XHTML1.0是一种在HTML4.0基础上优化和改进的的新语言，目的是基于XML应用。
XHTML是一种增强了的HTML,XHTML是更严谨更纯净的HTML版本。
它的可扩展性和灵活性将适应未来网络应用更多的需求。
XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。
因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。
所以，建立XHTML的目的就是实现HTML向XML的过渡。
目前国际上在网站设计中推崇的WEB标准就是基于XHTML的应用（即通常所说的CSS+DIV）。
5.2XHTML的关键标记元素、设计中常用的标记元素
基本结构标志
----------表示该文件为HTML文件
----------包含文件的标题，使用的脚本，样式定义等----------的结束标志
其它主要标志以下所有标志用在
中
----------换行标志
----------分段标志
----------采用黑体字
----------采用斜体字
----------水平画线
----------字体样式标志
属性的用法：
属性是用来修饰标志的，属性放在开始标志内。
例如：
属性bgcolor="BLACK"表示背景色为黑色。
引用属性的例子：
常用属性：
对齐属性范围属性
ALIGN=LEFT左对齐（缺省值）WIDTH=象素值或百分比对象宽度
ALIGN=CENTER居中HEIGHT=象素值或百分比对象高度
ALIGN=RIGHT右对齐色彩属性
COLOR=#RRGGBB前景色参考色彩对照表
BGCOLOR=#RRGGBB背景色
5.3CSS的介绍
CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。
页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。
将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目
（4）你可以轻松地控制页面的布局。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？
我们一般使用HTML标签来实现，代码非常烦琐。
很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪说的实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。
CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。
式样单放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。
6、页面设计的实现
6.1关于首页的设计实现
6.1.1首页顶部的设计
图1
图1主要部分代码如下：
《安全在我心中生命在我手中》主题班会教案.docx
