Open Course (Flash)开放式课堂 (Flash)

Open Lab

Web设计与编程导论 2011年课程设计任务书

第九至十一周进行课程设计，其中第十周整周停课，本次设计难度较大，请各位同学从接到课程设计任务后开始分配好每一分钟时间。

特邀课程设计优秀获得者，复杂系统与电子商务创新实验室一期成员：钱婧（东方电子商务2班）做课程设计步骤视频演示，演示文件下载，时长26分钟，共32M，分辨率：1024*768。点击察看课程设计详细步骤。

一、环境与工具

可以任选web编辑软件实现课程设计要求。

二、设计目的

通过xhtml和CSS的学习，掌握基于标准的网站编写方法，加深对web设计的了解，并掌握设计方法。

三、基本要求

1.对以下网址的网站首页(1个页面)进行网站重构，即采用xhtml＋css进行重新设计

1班题目
学号	网站名称	难度系数(5分制)
1	中国政府网	4
2	新华网北京频道	4
3	中国平安网	4
4	新华网天津频道	4
5	中国记协网	4
6	新华网河北频道	4
7	中国招标投标网	4
8	新华网山西频道	4
9	中国投资协会	4
10	新华网辽宁频道	4
11	人民银行	3
12	中共中央对外联络部	3
13	新华网吉林频道	4
14	新华网上海频道	4
15	国家外汇管理局	4
16	新华网江苏频道	4
17	中国发明网	4
18	中国证监会	4
19	中国普法网	4
20	新华网安徽频道	4
21	法制网	4
22	中国银监会	4
23	中国青年网	4
24	金黔在线	4
25	中国保监会	4
26	中华人民共和国卫生部	4
27	中华人民共和国财政部	4
28	国资委	4
29	新华网河南频道	4
30	新华网山东频道	4
03	全国社会保障基金理事会	4
15	国家统计局	4
19	新华网湖南频道	4
2班题目
学号	网站名称	难度系数(5分制)
1	求是杂志社	3
2	发改委	4
3	中国民航信息网	4
4	新华网广西频道	4
5	中央编办	4
6	新华网海南频道	4
7	中国高考招生网	4
8	中国自考网	4
9	山西黄河新闻网	4
10	国家粮食局	3
11	国家信息中心	4
12	新华网贵州频道	4
13	中国产业发展促进会	4
14	中国开发区网	4
15	中国产业海外发展和规划协会	4
16	新华网西藏频道	4
17	新华网黑龙江频道	4
18	新华网陕西频道	4
19	中国经济信息网	3
20	新华网甘肃频道	4
21	中国宏观经济信息网	3
22	新华网青海频道	4
23	中国经济导报	4
24	新华网宁夏频道	4
25	中国改革报	4
26	中国招标投标协会	4
27	中国工程咨询网	3
28	新华网内蒙古频道	4
29	中国信息网	4
30	教育新闻网	4
东方题目
学号	网站名称	难度系数(5分制)
01	中国普法网	4
02	法制网	4
03	中国银监会	4
04	中国青年网	4
05	金黔在线	4
06	中国保监会	4
07	中华人民共和国卫生部	4
08	中华人民共和国财政部	4
09	国资委	4
10	全国社会保障基金理事会	4
11	中国政府网	4
12	中国平安网	4
13	中国记协网	4
14	中国招标投标网	4
15	中国投资协会	4
16	人民银行	3
17	中共中央对外联络部	3
18	国家外汇管理局	4
19	中国发明网	4
20	中国证监会	4
21	国家统计局	4
22	求是杂志社	3
23	发改委	4
24	中国民航信息网	4
25	中央编办	4
26	中国高考招生网	4
27	中国自考网	4
28	山西黄河新闻网	4
29	国家粮食局	3
30	国家信息中心	4
31	中国产业发展促进会	4
32	中国开发区网	4
33	中国产业海外发展和规划协会	4
34	中国经济信息网	3
35	中国宏观经济信息网	3
36	中国经济导报	4
37	中国改革报	4
38	中国招标投标协会	4
39	中国工程咨询网	3
40	中国信息网	4
10	教育新闻网	4

2.重构的网页中不得出现table系列标记用于网站布局

3.重构的网页中不得出现<img>标记，图片可以从对方网站上选取

4.重构后的网页显示必须和原网页样式相同，在firefox和ie浏览器有相同的显示结果。

5.重构的网页中不能出现错误和警告信息，必须通过w3c验证，或者使用firefox的调试工具html Validator（推荐）

6.文件由一个xhtml文件、一个css文件和若干图片、js构成

7.每人的学号对应相同编号的题目，网址皆从知名门户、电子政务、政府网站中选取

四、设计说明

课程设计完成后，在星期四和星期五进行答辩，每人只有一次答辩计划。答辩时提交有关的原网页（保存为mht格式）和设计网页。

学院	班级	周次	答辩时间	答辩地点
信息院	商务09-1	10	周五1-4节 8:30-11:30	6教413
信息院	商务09-2	10	周五5-8节 2:00-5:00	6教303
东科院	商务09	11	周四5-8节 2:00-5:00	6教417

五、课程答辩上传

请各位同学将自己的设计文档通过ftp上传，在对应的班级下建立"学号最后两位+姓名"的文件夹，如"03+张三"，上传包含mht文件和重构rar压缩文件。

通过答辩后，书写课程设计报告（格式：封面和报告格式），报告用A4纸张打印，电子文档、原网页（保存为mht格式）和设计网页整理后放入文件夹（文件夹命名规则：学号＋姓名，如“03号张三” ），分别建立“报告电子文档”、“原网页”和“重构网页”三个子文件夹并放入相应的文件，交学习委员。统一收齐后上交。

设计参考文档：CSS2中文手册、CSS Cheat Sheet.mht(点击右键下载)

历年课程设计题目：2007年、2008年、2009年

附：课程设计步骤简析

1.将原网页保存为.mht格式
打开所要重构的网页，点击文件，单击另存为…，在弹出的对话框中选择保存类型－web档案，单一文件（*.mht），选择适当的存放路径，点击保存。

2.将原网页保存为.html格式
链接到首页，点击文件，单击另存为…，在弹出的对话框中选择存放的合适位置，然后点击保存。

3.了解相关基础知识
阅读web设计与编程导论教材第二章创建WEB页面：XHTML及第六章控制页面样式：级联样式表。认识和了解HTML的基本元素、实体、声明方法和语法及CSS的基本调用方法等。

4.分析和读懂所要重构的网页
第一步，现在Macromedia Dreamweaver 中打开原网页。
第二步，点击拆分，这样界面就分成了两个部分，上部分为源代码，下部分为设计框架。
第三步，在下部分中，按从上至下的顺序选中一个框（即原网页中的表格），此时上部分对应的此表格部分的源代码的背景色就变成蓝色。第四步，读懂该对应源代码，知道其每条语句表示的含义，如：表格的高度和宽度，是否设置了背景色和边框等。第四步，提取出重构网页所需要的信息，如：文字信息，相关链接，脚本语言等。

5.建立网页重构文件夹
文件夹命名最好为英文，此后，将重构网页涉及到所用原网页和自己写的css，js，及图片素材都放入对应的文件夹中。（如.css文件放入css文件夹，图片放入images文件夹等。这一步骤要特别注意，文件位置放置的不正确，可能导致css不能调用，图片显示不出来等问题）

6.设计重构网页的框架
1）读懂须重构网页的主要框架，一般可将其分成三大块：头部（head），主要内容部分（content）及尾部（foot）。
2）在草稿纸上画出与原网页相对应的块，先画出三大块，然后又根据原网页的内容将每一大块细分成小块，并给每一个块取一个相应的名字，即给每一块一个相应的编号或名称，以便于css的调用。（如头部块命名为head，内容部分中左边有导航栏的可以命名为sidebar等等）

7.网页重构代码编写用记事本或者dreamweaver进行代码编写。
1）首先，进行头部申明（若使用dreamweaver，程序将会自动生成代码），编写出网页的基本框架：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>

2）将重构网页需要用到的css和js文件链入网页代码中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0039)http://hn.vnet.cn/hnvnet/html/index.htm -->
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312" />
<link href="index.files/index.css" type=text/css rel=stylesheet />        
//链入css
//注意:文件路径一定要链接正确，否则css布局将不会显示出效果
<title>欢迎访问 互联星空</title>
<script language=JavaScript type="text/javascript">    //链入js
</script>
</head>
<body>
</body>
</html>

3）打好HTML框架，按照步骤（6）的框架图和草稿上的块布局，在body中建立DIV块元素。

<body>
<div id="head"></div>>
<div id="content">  //建议id名称使用有意义的标识
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     ……
</div>
<div id="foot"></div>
</body>

4）根据步骤（4）的方法，找出相应的代码对应的网页内容（文字，连接或脚本语言的代码），然后将其粘贴在重构代码相应的块元素中，（此步可与步骤（3）同时进行）。注意提取的原代码内容中不应出现与table有关的标签，对应的内联图片img标签也应该去掉，使用css将图片链入正确的位置。

5) 用CSS进行页面布局。编写CSS，设置页面类样式，将图片用css链入，控制块元素的大小，位置。如：

<div id="bb">……</div>
//CSS:
#bb{
          width:500px;
          margin:0 auto;
          padding-left:118px;
          padding-top:272px;
          background:url(image/header.png);
    } //图片image位置一定要放置正确，否则不能显示

6）设置基本元素的风格设置。给某个块元素或某个P元素设置和原代码相对应的风格，如加上背景色，文本对齐方式，字体颜色大小，块元素的高度和宽度等等。如：

<p style=”align:right; font-weight:normal;background-Color:#fff;”>
</p>
//除非外联式css和内联式style标签无法控制样式，才使用行内样式法

7）与原页面进行详细对比，将重构页面的位置和设置进行局部详细调整，直到与原网页基本相似。

8.在火狐中进行W3C的验证。
修改页面中出现的错误，对火狐和IE的兼容性问题进行调整。常用的兼容元素！important，用法：如：

#content{
		      float:left;
		      width:600px;
		      height:1090px;
		      margin-left:5px !important;
		      margin-left:2px;
}

9.重构网页的完善。
在重构的过程的中，遇到一些自己不能解决的问题，在网上搜索找到解决的办法，完善重构网页。