Open Lab

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

  • 课程设计为期一周，本次设计难度较大，请各位同学从接到课程设计任务后开始分配好每一分钟时间。特别注意：网站每天都可能更新、升级甚至改版，接到题目后第一件事就是保存网页，即执行课程设计详细步骤1，2

    Dreamwave是Table设计时代的编辑器，对于DIV+CSS时代IDE推荐下列10个常用的代码文本编辑器，个人建议初学者使用notepad++编辑器，或者Sublime Text 3。

    特邀课程设计优秀获得者，互联网创新实验室成员：张芯蕊 做课程设计4步演示视频教学，点击左侧导航栏观看。

    点击察看课程设计9步分解详细方法。

    一、环境与工具

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

    二、设计目的

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

    三、基本要求

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

    常规难度题目
    学号 网站名 下载 H S R P
    01 中国审计学会 下载 1573 737 1020 791
    02 中国遗传学会 下载 1299 839 1099 793
    03 中国探月与深空探测网 下载 1489 888 1129 810
    04 工程建设交易信北京息网 下载 1650 746 1248 966
    05 浙江省教育技术中心 下载 1702 1047 1346 974
    06 建设工程企业资质行政审批专栏 下载 1834 686 1054 996
    07 中国昆虫学会 下载 1982 921 1115 1015
    08 中国煤炭经济研究会 下载 1413 4181 4395 1048
    09 中国煤炭信息网 下载 1319 1243 1599 1107
    10 中国国家图书馆 下载 1271 2614 4741 4106
    11 国图专题展览 下载 1247 2756 5320 5168
    12 中国园艺学会 下载 835 743 1320 1186
    13 江苏公众科技网 下载 1965 1412 1619 1233
    14 中国民间组织国际交流促进会 下载 951 924 1422 1312
    15 中国地球物理学会 下载 1417 913 1491 1461
    16 中国海洋工程咨询协会 下载 2380 1395 1575 1519
    17 中国绿色食品发展中心 下载 1317 1473 2097 1590
    18 吉林省住房和城乡建设厅 下载 1685 1650 2337 1600
    19 中国刑事科学技术协会 下载 2096 1168 2080 1605
    20 中国金融电子化公司 下载 1400 1552 1868 1638
    21 中华农业科教基金会 下载 1801 1039 1777 1690
    22 中国煤炭机械工业协会 下载 1449 4313 2074 1797
    23 中国中文信息学会 下载 1551 667 757 632
    24 中国造船工程学会 下载 1388 330 468 447
    25 中国国际交流协会 下载 1068 799 1167 763
    26 中国住房和城乡建设部 下载 2172 1475 2155 1983
    27 科技导报 下载 2013 5679 5895 5447
    28 中国自动化学会 下载 1237 1219 2331 2059
    29 大连市财政局 下载 1576 1650 2763 2342
    30 中国大坝工程学会 下载 2122 934 2582 2359
    31 中国警犬 下载 1670 1504 2514 2376
    32 中国动物学会 下载 1857 1910 2708 2457
    33 中国自然资源学会 下载 1870 1872 2607 2461
    34 吉林省财政厅 下载 2022 1967 2607 2467
    35 中国法医学会 下载 1695 660 788 606
    36 中国抗癌协会 下载 1707 2193 3018 2613
    37 国家国防科技工业局 下载 2169 3099 3656 2624
    38 中国经济导报 下载 2350 2987 3597 3307
    39 中国煤炭工业协会会员之家 下载 1604 1046 1417 765
    40 中国农业信息网 下载 2036 3428 4280 3348
    41 中国系统工程学会 下载 1647 1712 2902 2788

    挑战优秀难题区（自愿换题）
    学号 网站名 下载 H S R P
    A12 高分辨率对地观测系统专项网 下载 2361 1293 1331 1174
    A11 山西省科学技术协会 下载 2469 2221 2759 2582
    A10 中国地质学会 下载 2473 116 2889 2808
    A09 中国人民银行 下载 2481 2865 3905 3541
    A08 济南市科学技术协会 下载 2654 1508 2358 2054
    A07 中华人民共和国审计署 下载 2676 3479 4451 3208
    A06 天津市科学技术协会 下载 2687 2154 2714 1974
    A05 国家煤炭工业网 下载 2800 1690 2074 1816
    A04 杭州市科学技术协会 下载 2971 1108 1458 1167
    A03 长春科技工作者之家 下载 3219 2160 3129 2682
    A02 新华网黑龙江频道 下载 3253 1586 2007 1966
    A01 中国畜牧业协会 下载 4346 4561 5758 3605

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

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

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

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

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

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

    四、设计说明

    课程设计完成后，在下周星期4,5,6(时间待定)进行答辩，每人只有一次答辩计划。答辩时提交有关的源网页外观整页截图(保存为mht格式,或者JPG皆可）和设计网页(1个html文件,1个css文件,1个images文件夹,1个js文件夹)。

    五、课程答辩

    请各位同学将自己的源文档、设计文档打开，按学号依次提问答辩。


    通过答辩后，书写课程设计报告（格式：封面和报告格式），报告用A4纸张打印，交学习委员统一收齐后上交。

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

    附：课程设计步骤简析

    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.重构网页的完善。
    在重构的过程的中，遇到一些自己不能解决的问题，在网上搜索找到解决的办法，完善重构网页。