《作品要求细则》word版.doc

Internet信息技术基础课程考核大纲1. 考核对象：本考核大纲适用于参与Internet信息技术基础课程学习的全体学生。2. 考核形式：利用本课程所学的网络信息表现技术制作具有一定工作量的静态网页作品。3. 基本要求：作品内容要能从以下方面综合考核学生掌握和使用本课程相关技术的能力：（1）用XHTML标记对信息进行标记的能力；（2）用CSS规范对标记信息进行样式设置和设计的能力；（3）用MathML对信息中的数理化符号及公式（包括化学方程式）进行标记的能力。（部分专业选用）4. 工作量要求：作品的工作量一般应具有约3-5张A4幅面左右的信息量。5. 递交成果：（1）标记文档打印稿（2页原稿）；（2）CSS样式文档打印稿；（3）网页显示结果打印稿（2页原稿）；（4）原件扫描文档、信息标记文档、样式表文档、各种引用文件等电子文档。上述（1）（3）项由每位学生采用统一封面装订成册；第（4）项以班级为单位进行汇总、规整，并制作成电子文档光盘（应当递交的电子文档要求参见课程作品要求细则）。6. 完成时间：课程结束后1-2周内（视具体情况而定，至少1周时间）7. 评分标准：（1）本课程以优秀、良好、合格、不合格作为最终考核结果；（2）评分依据：主要从以下四个方面进行考察，综合评分：A. 作品包含指定内容的完整性；B. 标记文档（包括XHTML及MathML标记）是否完整、规范、齐全；C. CSS文档设计是否规范、合理；D. 标记文档在浏览器中的显示结果是否美观、布局是否合理；8. 其它：（1）教师应针对每次课程考核编制详细的课程作品要求细则（详见附件1样例）；（2）课程考核任务应当在课程开课后最迟2周内布置到每位学生。部门：化学与生物工程学院编制人：鲁江日期：2009年3月20日附件1：考核细则样例Internet信息技术基础课程考核作品要求细则（2011春学期）1. 作品内容：本课程要求每位学生利用本课程所学的网络信息表现技术制作一定内容的静态网页作品，以此作为本课程最终成绩评定的主要依据。安排如下：（1）以班级为单位集体制作一本教材，具体为：B化工081班、B化工082班、BD化工081班集体制作化工原理教材（2）按学号及教材页数基本平均地全部分配给每位学生（承担前言、目录和附录的学生可以多1-2张纸的信息内容）（3）每位同学将各自领取的纸质材料扫描成电子图片（300DPI分辩率、彩色扫描），然后将扫描文件的内容制作成静态网页。（5）为减轻文字录入的工作量，可以对扫描文件进行OCR识别。但必须对识别形成的文字进行仔细校对，要求信息内容不得有误。2. 完成时间：课程结束后两周左右。3. 用机：完成作品所需的计算机由同学自行解决。4. 递交成果：（1）每位同学需递交的成果：A. 网页显示结果打印稿（2页原稿）；B. 标记语言文档打印稿（2页原稿）；C. CSS样式文档打印稿；D. 原稿的扫描文件（.jpg文件）、标记文件、CSS文件，及相关的图片文件和辅助文件的电子文档；上述A、B、C三项材料需要装订成册，并采用统一封面（见附件2）。（2）以班级为单位汇总的全部电子文档光盘：文档光盘由课代表（或学习班委）负责将全班同学的相关电子文档汇总。光盘中的内容包括：A. 全部原稿的扫描文件（分辨率为彩色、300DPI分辩率的.jpg文档）；B. 全部页面的标记文档（.html文档及.xml文档）；C. CSS样式表文档（通用样式表和专用样式表文档，.css文档）；D. 汇总的图片文档（标记文件中引用的图片文件，.jpg格式等）；E. 汇总的数学标记语言所需的xml转换文档（.xsl文档）；F. 其它文档（如教材内容任务分配表等）。注：教材的扫描文件单独放在1张光盘中，其余文档放在另一张光盘。5. 总体要求：（1）以XHTML标记语言对信息进行标记；（2）用CSS规范对标记文档进行样式设置和设计；（3）以MathML标记语言对数理化符号及公式（包括化学方程式）进行标记。6. 电子教材的文件夹结构：（1）主文件夹名：CE（Chemical Engineering）所有标记文档全部存放在此主文件夹中。（2）子文件夹名及其作用：css 存放css样式表文件images 存放标记文件引用的全部图片文件xsl 存放MathML引用的.xsl文件7. 文件命名规则：（1）文件扩展名：标记文件：除首页和序言页用.html外，其余均用.xml作为扩展名样式表文件：.css扫描文件：.jpg引用图片：.jpg、.gif、.png等（2）文件名：A. 标记文件、扫描文件等的命名规则主要按页码进行命名：前言页：f1、f2等，分别表示前言的第1页和第2页目录页：c1、c2等，分别表示目录的第1页和第2页内容页：p1、p219等，分别表示页面的第1页和第219页示例：标记文件：f2.html、c1.xml、p59.xml等扫描文件：f2.jpg、c1.jpg、p59.jpg等专用CSS文件：f2.css、c1.css、p59.css等B. 引用图片标记文件中引用的图片按图号命名，如：fig1-2.jpg表示第1章中的图1-2；fig5-9.jpg表示第5章的图5-9；figp5-2.jpg表示第5章习题（problems）中的第2幅图；figa-3.jpg表示附录（appendix）中的第3幅图8. 页面布局：（1）页面布局图示：建议网页采用如下图所示的布局：（2）页面基本布局：根据上图所示的页面布局，各个页面均包含以下几个区域：标语区（slogan）、导航区（navigation）、内容区（content）、页脚条（footer-bar）、页脚区（footer）等其结构如下所示：标语区：logo区，宽度100%导航区：nav区，宽度100%，居中内容区：content区，宽度100%页脚条：foot_bar区，宽度100%，居中页脚区：foot区，宽度100%，居中可将此页面布局用于教材的前言、目录等部分。（3）章节内容的布局：各章节中文件的布局将上述基本布局中的“内容区”分成左右两部分，左边用于显示本章内容的目录，右边用于显示页面的内容。如下所示：标语区：logo区，宽度100% 主导航区：nav区，宽度100%，居中内容左区：left区，宽度20%内容右区：right区，宽度80%页脚条：foot_bar区，宽度100%，居中页脚区：foot区，宽度100%，居中9. 标记文档的结构与命名：（1）主要区域的块标记：用块标记来架构页面的区域结构，采用如下层次结构：标语区内容导航区内容 内容左区内容 内容右区内容页脚条内容页脚区内容各块的样式由css文档设置。（2）路径表示法：标记文件中的所有引用文件（超链接、图片等）的路径均要求采用相对路径法进行描述。如：例：表示引用当前目录中images文件夹中的fig1-2.jpg图片；例：溶液表示向当前文件夹中的p0203.xml文件的超链接。（3）锚点命名：对教材中的各章节、图片、表格、公式等内容均必须用锚点标记进行命名，命名规则如下：A. 章节锚点命名：例：1.1 目的、意义和范围上例中chapter1.1表示第1章第1节。相应地，用contents、preface、chapter、problems、references、appendix等分别对目录、序言、章节、习题、参考文献、附录等各部分的锚点进行命名。B. 图片锚点命名：例：图1-2 均相封闭系统与非均相封闭系统上例中fig1-2表示第1章的图1-2。相应地，用figp1-2表示第1章习题中的图2；用figa-2表示附录中的图2。C. 表格锚点命名：各章节、习题、附录中表格的锚点命名规则与图片锚命名类似。例：表格标记D. 公式锚点命名：各章节、习题、附录中公式的锚点命名规则与图命名类似。例：公式标记10. CSS文档设计：（1）样式表文件种类CSS样式表文件分为通用样式表和专用样式表。样式表文件的存放位置在css文件夹中。A. 通用样式表文件名为：common.css；B. 专用于某个页面的样式表文件名为：.css。如：p59.css表示专用于第59页标记文件的样式表。（2）宽度表示：需要特别说明的是：为了使标记文档的显示效果不因文字缩放而改变宽度，所有标记的宽度属性设置应尽量使用百分数来表示；（3）CSS样式表设计示例：CSS样式表文档设计的重点是标记块的样式设计，本课程有综合样式表设计专题介绍。以下是根据前述标记文档的块结构而设计的部分样式示例：/* 1. 页面容器id样式 */#page width: 100%; /* 宽度：100% */margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 0px 0px 0px 0px; /* 上，右，底，左 */background: transparent; /* 背景：透明 */* 2. 标语块id样式 */#slogo width: 100%;margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 0px 0px 0px 0px; /* 上，右，底，左 */background-image: url(./images/slogan.jpg); /* 背景图 */* 3. 标语块中的中文样式 */#logo .pch /* 中文段落样式 */margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 20px 0px 0px 20px; /* 上，右，底，左 */color: red; /* 字体颜色 */font-size: 200%; /* 字体大小 */font-weight: bold; /* 字体加粗 */background: transparent; /* 背景：透明 */* 4. 标语块中的英文样式 */#logo .pen /* 英文段落样式 */margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 0px 0px 20px 20px; /* 上，右，底，左 */color: yellow; /* 字体颜色 */font-family: Times New Roman; /* 字体种类 */font-size: 140%; /* 字体大小 */font-weight: bold; /* 字体加粗 */background: transparent; /* 背景：透明 */* 6. 主导航id样式 */#nav width: 100%;margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 4px 0px 4px 0px; /* 上，右，底，左 */background-color: #383429; /* 背景色 */text-align: center; /* 文字居中 */color: #FFFFFF; /* 字体颜色 */* 7. 主导航中锚点样式 */#nav a margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 4px 6px 4px 6px; /* 上，右，底，左 */font-size: 90%; /* 字体大小 */color: #FFFFFF; /* 字体颜色 */text-decoration: none; /* 文字修饰：无 */* 8. 主导航中与锚点事件相关的背景样式 */#nav a:hover, #nav a:active, #nav #aactive background-color: #CC9900; /* 背景色 */* 9. 内容主容器id样式 */#content margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 0px 0px 0px 0px; /* 上，右，底，左 */width: 100%; /* 宽度 */background: transparent; /* 透明背景 */* 10. 内容样式 置入content容器中，实现通栏内容*/#content_inner margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 20px 5% 20px 5%; /* 上，右，底，左 */width: 90%; /* 宽度 */background: transparent; /* 透明背景 */* 10. 内容左块样式 置入content容器中，实现内容的左右分栏*/#left margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 20px 0px 20px 2%; /* 上，右，底，左 */width: 13%; /* 宽度 */text-align: left; /* 文字左对齐 */float: left; /* 浮动于左侧 */background: transparent; /* 透明背景 */* 11. 内容右块样式 置入content容器中，实现左右分栏*/# right margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 20px 4% 20px 0px; /* 上，右，底，左 */width: 80%; /* 宽度 */text-align: left; /* 文字左对齐 */float: right; /* 浮动于右侧 */background: transparent; /* 透明背景 */* 12. 标题样式 */h1, h2, h3, h4, h5, h6 color: #005A9C; /* 文字颜色 */font-weight: bold; /* 字体重度：加粗 */* 13. 标题1样式 */h1 font-size: 170%; /* 字体大小 */line-height: 150%; /* 行高 */* 14. 标题2样式 */h2 font-size: 140%; /* 字体大小 */line-height: 120%; /* 行高 */* 15. 标题3样式 */h3 font-size: 120%; /* 字体大小 */line-height: 110%; /* 行高 */* 16. 标题4、5、6样式 */h4, h5, h6 font-size: 90%; /* 字体大小 */* 17. 段落样式 */p text-indent: 2em; /* 首行缩进2字符 */font-size: 90%; /* 字体大小 */line-height: 150%; /* 行高 */* 18. 图片块class样式 */.fig margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 10px 0px 10px 0px; /* 上，右，底，左 */border: none; /* 无边框 */text-align: center; /* 文字居中 */font-size: 80%; /* 字体大小 */* 19. 方程块class样式 */.eq margin: 0px 0px 0px 0px; /* 上，右，底，左 */padding: 10px 0px 10px 0px; /* 上，右，底，左 */background: transparent; /* 透明背景 */* 20. 方程块中的table标记样式 */.eq table border: none; /* 无边框 */width: 100%; /* 宽度 */以上为CSS文件中的部分样式，全体同学应仔细消化以上各种样式设置，从中吸取有价值信息，在此基础上补充其余样式设置。11. 数学公式的布局与命名（1）布局：例：（1-2）10%宽80%宽，左对齐10%宽，居中（2）命名以对上述公式作锚点命名。（3）标记代码上述数学公式的标记代码如下： M = M T p     M = V U H S A G C p （1-2）12. 教师信息：教师姓名：鲁江联系电话：13814380607电子信箱：r01cn126.com或lujycit.cn上班时间：每周三下午2：30-5：30上班地点：化生学院办公室（化生学院办公楼二楼）附件2：作品递交材料封面盐 城 工 学 院Internet信息技术基础课程作品（部分）（2011春学期）院系化学与生物工程学院专业化学工程班级B化工08X学号XXXXXXXX姓名XXX指导教师鲁江日期2011年 5 月