您所在的位置:厚朴〖HOPE〗工作室 >> 前端开发

2017级“化学多媒体软件设计”期末网站规范

开篇寄语:知易行难,万丈高楼平地起。纸上得来终觉浅,绝知此事要躬行。事到万难须放胆,宜於两可莫粗心。对事以真,精益求精。

答疑安排:2017级“化学多媒体软件设计”期末答疑安排
答疑记录:
化学多媒体软件设计FAQ2017版
地点:丰盛堂C301、C614
时间:2018年1月2日-2018年1月13日,早上8-12点,下午2点半-5点半,晚上19:00-22:00
备注现场答疑效果优于网络,建议带电脑及网站文件前往厚朴工作室请教

课程目标:理念与工具并行,规范与创意并重,科学与艺术融合
1. 超整理术,信息与思维的分类与提炼,实践语义化命名与模块化思想。
2. 文档驱动,需求分析,细化目标,规划进度,明确流程,量化指标。
3. 项目管理,统筹时间,控制项目周期,团队协作,提高效率,测试校对,保障品质。
4. 学以致用,熟练运用生产力硬件、软件工具,从Office起步,掌握排版、平面美工、网页设计与前端重构基础,制作化学科技类专题ppt、海报、论文插图、Slider、网站。
5. 搜索提炼,善用搜索引擎、科技数据库检索资料,分类整理,提炼信息。
6. 守正出奇,掌握规范。通过实践期末科技专题网站项目,深刻理解高内聚低耦合、表现与结构分离、模块复用的工程思维,熟练掌握信息的分类和序化,体会和实践模块化、标准化的高效率。
7. 展望未来,恢复应试教育背景下被削弱的探索学习和动手能力,重新激活对天地奥秘的兴趣,提升审美,掌握信息社会必备的基本技能和IT思维,考验逻辑和细节,为学习、生活及工作助力。

实施概要:
1. 规划先行,预留1个月项目时间,逐步迭代。
2. 形式为内容服务,内容和形式统一。
3. 教程统一采用厚朴网站设计基础教程2017版,布局和尺寸效仿厚朴文化网站类型,网页slider宽度1920 px、网页主体宽度1200 px
4. 页面重构,代码精简、完整,注释清晰。
5. 用户体验至上,网页兼容Chrome、Edge、Firefox最新版浏览器。
6. 建议使用ChemBioOffice等绘制分子式、结构式、3D模型,制作简约科技类Slider、banner,体现专业特色,丰富网站内容。

技巧拾遗:
1. 网络图片抓取小白教程
2. 网页布局中的常见的兼容性问题
3. 目前比较全的CSS重设(reset)方法总结
4. Photoshop网页设计技巧汇总(for 2016级)
5. Slider消失问题的解决
6. 化学多媒体软件设计_期末网站htm内嵌sytle回归css指南
7. 图片压缩工具:TinyPNG(https://tinypng.com/)  智图http://zhitu.isux.us/


项目禁忌:
1. 离题。
2. 非切片作品。
3. 非Dreamweaver设计作品。
4. 非页面重构,使用table布局。
5. 站点目录和文件使用中文命名。
6. 套用非原创模板。
7. 盗版非原创,如沿用高年级作品。
8. 套用清洁生产等旧版网站,网站尺寸不足。

备注:以上情况均不计分。

问题
集合
1. 2017级“化学多媒体软件设计”期末网站规范bug集
2. 2016级“化学多媒体软件设计”期末网站项目Bug集
3. 化学多媒体软件设计FAQ2016版
4. 化学多媒体软件设计FAQ2015版
5. 化学多媒体期末网站常见设计错误2014版 
6. 2011级“化学多媒体软件设计”期末网站点评
7. 2009级期末网站高频bug集
8. 2008级化学多媒体软件设计FAQ    


一、基本要求

1. 主题
       选题健康、具体而微,避免大而全、空泛无物。限化学、化工、材料、能源、医学、药学专题,联系到人类社会的各个领域,可结合基础研究、前沿热点、应用实践、科普环保、可持续发展等。
备注:
       避免选用宏观主题,如一级学科、二级学科:化学与人类、无机化学、有机化学、分析化学、仪器分析、物理化学、生物化学、基因、药物化学、结构化学、环境化学、绿色化学、绿色食品、清洁生产、境保护、环境治理、大气污染治理、水污染治理、化学与能源、化学与医学、新能源、新材料、高分子材料、纳米材料若新能源建议选具体的燃料电池、汽车电池、太阳能、氢能等。

2. 个人原创作品。

3. 类型:纯静态页面(htm或html),无数据库后台。

4. 网页设计流程:一画二切、三建站四重构 
详见图解教程:厚朴静态网站设计基本流程v1.0

(1)一画:使用Fireworks/Photoshop设计首页、栏目首页、内容页模板源图,添加完整的内容文字图层,图层根据页面布局结构分组,图层和图层分组语义化命名。
(2)二切:Fireworks或者Photoshop隐藏源图中内容文字图层,精确选择页面框架必须的区域切片,导出HTML和图像 ,切片图片归入images目录;根据各区域的划分,语义化命名导出的切片。
(3)三建站:围绕导出的切片和页面所在的目录,Dreamweaver建立站点。
(4)四重构:Dreamweaver打开切片导出的网页,以index.htm首页为例,删除body内table代码,利用插入工具栏输入构建页面基本区域的html代码div,用class或id语义化命名div;继续在代码模式下录入ul、li等,根据层次结构缩进排版代码,每个区域起始部分添加注释。
  
5. 基本模版:首页、栏目首页、内容页各一。

6. 各级模板png或psd源图包含切片,图层不合并;图层不少于4-5个分组,图层分组按网站自上而下的结构语义化命名,名称和和网页重构代码中div的class、id对应;每个源图不少于20个图层,图层语义化命名,无冗余图层。

7. 切片采用精确切片模式,只导出页面框架和主体所需的切片,再根据页面布局各区域div名称,语义化命名导出的切片图片。

8. 所有页面采用(x)htm+CSS重构,js实现交互行为,页面框架消除table代码。


                                                              图-1 WEB标准

9. 录入页面内容文字时,doc或网页来源的文字先拷贝到写字板中消除冗余代码。
基础规则:厚朴排版规范
排版工具:文字自动排版 文本在线排版  (消除来自word和网页等各类冗余代码)

10. DW站点网页链接及内容录入指南

二、网站项目方案
1. 内容
(1)封面,列出完整题目、作者、时间
(2)目录,导航窗格生成的自动目录页,pdf版带书签。
(3)缘起,简述立项缘由,阐述主题含义。
(4)作者,列出个人信息:姓名、学号、专业、相片、特长。
(5)软件工具,列出软件名称、版本和图标。
(6)项目计划进度,Visio绘制甘特图。
(7)风格,描述格调类型,如清新简约、沉稳大气。
(8)布局,插入手绘的首页、栏目首页、内容页布局图,参考“危险废物管理系统首页界面布局示意”,标注各区域英文名称及尺寸,名称和网页重构代码中div的class、id对应。
(9)配色,列出所采用的配色工具及配色方案,用色块和代码表示主色调、辅助色、特征色。
(10)栏目结构,树状目录列出各级栏目名称,参考“环境治理专题学习网站栏目结构规划”。
(11)项目流程,mindmanager等绘制项目的基本流程。
(12)网站特色,自评网站设计、内容及技术特色。
(13)工作日志,列表记录实际的实施过程,精确到每天,正常实施周期3周左右,正负1周。
(14)项目监理,列出项目监理姓名、学号和相片,列表记录监理问题集及处理结果。
(15)项目小结,列出个人教训、经验,自评绩效。
(16)课程感悟,盘点笔记和每周概论,回顾学习过程,涵盖理念、理论到应用(不少于500字,末尾标明字数
(17)生产力工具篇:分别逐条总结生产力硬件工具、生产力软件工具(含笔记软件、奇妙清单等APP)在本学期学习、工作和生活3方面的应用情况,以及相关技巧心得。(不少于1000字,末尾标明字数


2. 格式:doc+ pdf

3. 基本样式
(1)封面简约如Word自带封面模板,或可参考中国国家地理杂志、华夏地理等科普杂志
(2)word建立导航窗格,生成自动目录页;pdf版带书签。
(3)页眉显示题目,页脚显示页码。
(4)封面不显示页码,目录页和正文页码分列,目录页使用小写罗马数字页码,正文使用阿拉伯数字页码。
(5)统一页眉、页边距。
(6)正文行距1.5倍。

4. 排版标准
       区分封面、目录页、正文、章节目录/标题、正文版式,包括字体、字号、颜色等:
(1)排版工整规范。
(2)章的题名建议采用小二号黑体,居中。
(3)节的题名建议采用小三号宋体,加粗,左起空两格。
(4)正文建议采用小四号宋体。
(5)公式符号、上标或下标书写正确。
(6)标点句读正确,无错别字,消除多余空格和断行。
(7)世纪、年份一概用阿拉伯数字书写,并写全数,例如20世纪90年代、1998年不能写成98年;公式均需标注公式号,公式号用圆括号,阿拉伯数字表示,按章编排。
(8)图、表、公式等,一律用阿拉伯数字按章顺序编号。如图1-1、图2-2,表1-1、表2-1,公式(1-1)等。图序及图名置于图的下方,居中排列;表序及表名置于表的上方,居中排列。

三、软件工具
1. 网页设计:Dreamweaver CC 2018
2. Office:Word 2016、写字板、Visio 2016、印象笔记/OneNote、MindManager 2017
3. 图像处理:Fireworks CS6、Photoshop CC 2018、ACDSee Pro 8、Lightroom Classic CC......
4. 化学图像绘制:ChemBioOffice 2015
5. PDF:Acrobat 2018
6. 浏览器:Chrome、Firefox(Firebug、YSlow)、Edge
7. 解压缩:WinRAR/7-Zip
8. ftp工具:FileZilla/Cuteftp

四、设计原则
1. 网站结构:以DW站点为核心,根据栏目结构建立子目录。
2. 语义化命名:文件夹、文件(html、图片、css、js)、Title(网页标题)。
3. 范例参考:厚朴厚朴文化学院zicasso梨山宾馆芝加哥大学上海外国语大学LyndaFitbit surge青朴等。
4. 版式布局:通栏设计,结构完整、导航清晰。
5. 配色:利用Adobe Color等配色工具,首选单色配色模式。
6. 设计:创意美工、自成格调、特效适当。

五、网站结构
1. 网站中,站内链接相对于文档,链接无误。
2. 网站根目录统一命名为“web”,首页“index.htm”位于根目录。
3. 网站CSS保存于根目录。
4. 网站图片文件统一保存于“images”目录,重复利用公用文件。
5. 网站不少于6个一级栏目,每个一级栏目建立1个子目录,目录用英文全称或缩写语义化命名,避免夹杂中文或空格;每个栏目包含3个内容页;加上images,网站不少于7个一级子目录。
    备注:不再出现htm一级目录,避免将栏目目录嵌套到到htm一级目录变成二级栏目。
6. 网站含“网站地图”、“关于作者”功能网页,保存到根目录,但不计入一级栏目。
7. 整站内网页数量≥27。

8. 各级网页具备基本结构(banner、导航条、内容区域、底部等),首页还包括slider区域,非首页具备栏目banner。
9. 除首页外,各级页面在导航条下方具备站内导航,标示当前所在位置。

六、技术规范
提示:统一参考厚朴文化网站,除slider宽度1920 px、页面主体宽度1200 px相同外,其余区域尺寸尤其避免高度雷同,例如slider高度至少和厚朴文化的相差1px。
1. 用户体验:布局平衡、页面简约、打开流畅。
2. 配色和谐,推荐采用单色配色模式,统一格调。
3. 页面尺寸:源图包括页面背景,
(1)画布宽度1920 px,页面主体宽度1200 px。
(2)首页高度800~1200 px。
(3)栏目首页、内容页高度自适应,不少于800 px。

4. 设计要点
(1)遵循规范,文档驱动。
(2)回归版式、配色、字体。
(3)守正出奇,减法优先,舍弃一切无关的元素、特效。
(4)配置软件专业工作界面,标尺+辅助线。
(5)网页效果源图
(6)熟练应用抠图、快速选择、填充内容识别、污点画笔修复、居中、对齐、描边、1px实线和虚线、圆角矩形、边框、右下灰度投影、纹理填充、金属质感、玻璃磨砂、轻质感等技巧。
5. 切片
(1)FW输出时设置jpg品质80左右,PS输出时设置jpg品质高或中等控制图片大小,优化实现逐行显示。
(2)切片输出的图片,在DW站点中根据实际需求删除或保留,再重新语义化规范命名。
6.网页属性正确
(1)语义化命名title(标题),尤其是切片输出的各级模板网页title(标题)默认常为“index.jpg”、“index.gif” ,DW中均重新命名为和内容对应的中文,语义化命名。
(2)字符集UTF-8,语言简体中文,英文、繁体中文可选。
(3)CSS定义网页背景、链接颜色。
(4)左边界和上边界为0。
7. html代码
(1)结构完整,meta元数据keywords、description录入content。
(2)顶部保留Dreamweaver新建html页面带来的DOCTYPE声明
8. CSS代码
(1)CSS注释详细,开头标明年月日、保留作者、增加修改者,各区域注释开头和结尾。

(2)CSS开头定义网页的公用部分,如页面背景、链接颜色、边距、边框、文字和超链接样式等。
(3)CSS文件语义化命名,整站推荐使用1个CSS,实现代码复用。
(4)CSS锁定文字大小,导航条字号14-16 px,标题16 px加粗,正文14px,行距150%
(5)超链接无下划线、光标悬停变色。
9. 版式
(1)网页整体左右居中。
(2)网页顶部和底部无多余空白行。
(3)图文间距、文字和表格间距合理,统一量化,在规划书中准确标明。
(4)文字齐头散尾,每段首行空两个汉字、段落之间空一行。
(5)公式、符号、上标、下标、特殊字母等书写正确。
6)统一同类图片文件尺寸和样式,兼顾文件大小和品质。
(7)边框、表格应用1像素细线或虚线等。
10. 主体图片清晰,抠图干净、去除水印,灵活应用各类效果。
11. 兼容Chrome、Edge、Firefox最新版浏览器
12. 站点内部链接全部相对于文档,无任何绝对路径。

七、推荐效果
1. 图文交互的轮播焦点幻灯slider4-6张
2. jQuery应用:导航条下拉菜单、Smart Menu弹出菜单。
3. 附件显示文件格式图标。
4. 锚点定位、字幕文字、超链接表格背景变色、超级链接提示、滚盖图......
5. 参考zicassoLynda青朴的交互特效,如滚动视差、鼠标悬停卡片动效、卡片加载动效、图文交替动效等。
6. 规划书中网站设计流程可视化,效仿“A Web Site Designed 一个网站是如何制作而成的”。

八、
测试技巧

1. DW CC 2018站点内批量测试链接,DW站点内移动文件可自动更新链接。
2. Chrome开发者工具模拟1920 px、2560 px宽度浏览网站,测试全高清、2K分辨率下效果。
3. Chrome开发者工具
或Firefox(F12或Firebug+Yslow,前提需安装IIS发布网站)测试网页性能。
4. 本机安装IIS,发布网站,互访测试。(进阶备选)
5. 低分辨率笔记本用户(常见分辨率1336×768),建议用1920×1080 px、2560*1440 px全高清分辨率/2K分辨率显示器测试,在全高清分辨率/2K分辨率下浏览,避免网页顶部空白行、偏左偏右不居中、错位等布局问题;可参考实例教程中margin、padding、float、position、clear等参数。
备注:欢迎到厚朴工作室使用24寸的Dell U2412、Dell U2414H和27寸的Dell U2715H(2K分辨率)、Dell U2718Q(4K分辨率)等显示器测试。
6. 检查工作目录、网站目录结构,严格按规范分类,避免穿越。
7. 测试Chrome、Edge、Firefox最新版兼容性,避免错位、链接无效。
8. 避免使用360等国产浏览器测试效果。

参考:IE下超链接无效、加saved from url 解决"IE限制网页访问脚本或ActiveX控件"的提示问题

九、基础教程
)需求分析
1. 环境治理专题学习网站栏目结构规划
2. 基于动易网站频道、栏目首页类型分析
3. 小小美工(2005级)
4. 整体平衡感的调整_以环境学院网站为例
5. 网页的栅格系统设计
6. 世界Web设计最新潮流
7. 2015年网页设计七大趋势:扁平化,响应式,视觉滚动,大图,设计成前端,信息图等
8. 透视色轮、 《透视色轮》拾遗
9.  英国广播公司BBC的网站设计规范手册
10. 2016级“化学多媒体软件设计”期末网站项目规范
  
(二)HTML和CSS
1. w3school HTML教程
2. w3school CSS教程
3. CSS2.0盒模型层次平面示意图和3D示意图
4. 第六-七章HTML+CSS基础课件v1.1.pptx
5. 第十一章HTML+CSS基础课件(中级).pptx
6. CSS定位布局初步
7. 
详解CSS position属性
8. 
那些年我们一起清除过的浮动
9. CSS语言详解——读书笔记
10. 法学院网站2009版CSS代码(增加浏览器兼容)

(三)网页重构
1.  页面重构常见问题
2. 专题网站:
http://www.divcss5.com/
3.  
网页的!DOCTYPE声明及对网页起何作用
4.  凤凰网网站重构与CSS编程进阶教程
5. 关于页面重构的一些心得 (附页面重构ppt教程)
6. 关于《重构七年》的一点点总结
7. 2010学院网站秋季版首页重构过程 

(四)效果实例
1. 导航条
(1)JQuery应用:仿三思科学导航条
(2)Smart Menu v3.0 (jQuery)
(3)地球科学系2011版之Navigation教程 (难度系数:高)
(4)化院网站2011版下拉菜单制作教程

2. Slider
(1)中山大学环境化学网站Slider 
(2)中山大学清洁生产与循环经济研究中心Slider (期末网站改为4张图片)
(3)简约学术型slider设计教程
(4)科研学术Slider设计手册
(5)中山大学化学学院网站首页科技动态slider制作及发布流程v1.0

3. 文章列表:简单滑动门的制作

(五)网页设计
1.  页面设计及切片基础_入门篇
2.  页面设计及切片基础(中级篇)
3.  网站制作实例教程_初级篇
4.  网站制作实例教程(中级篇)
5. 厚朴网站设计基础教程2011版
网站:中山大学清洁生产与循环经济研究中心
规格:网页slider、主体宽度960 px。
(1)清洁生产与循环经济研究中心网站效果图
(2)网页设计教程_清洁生产与循环经济研究中心
(3)网页重构教程_清洁生产与循环经济研究中心
(4)清洁生产与循环经济研究中心_栏目首页重构简介
备注:清洁生产系列教程仅用于理解网站设计和制作流程,严禁模仿作为期末网站

十、厚朴网站设计基础教程2017版(本学期以此为准
网站:厚朴文化2017版
规格:网页slider宽度1920px,网页主体宽度1200px
导航:厚朴网站设计基础教程2017版指南

(一)厚朴网页设计基础教程

1. 厚朴网页设计基础教程2017版概况篇

2. 厚朴网页设计基础教程2017版banner篇

3. 厚朴网页设计基础教程2017版nav篇

4. 厚朴网页设计基础教程2017版slider篇

5. 厚朴网页设计基础教程2017版content篇

6. 厚朴网页设计基础教程2017版footer篇

7. 厚朴网页设计进阶教程2017版logo篇

8. 厚朴网页设计进阶教程2017版icon篇

9. 厚朴网页设计进阶教程2017版banner篇

10. 厚朴网页设计基础教程2017版首页篇

 厚朴网页设计基础教程_厚朴文化2016版_首页设计篇(上)

厚朴网页设计基础教程_厚朴文化2016版_首页设计篇(下)

11. 厚朴网页设计基础教程2017版栏目页篇

厚朴网页设计基础教程_厚朴文化2016版_栏目页设计篇

12. 厚朴网页设计基础教程2017版内容页篇

13. 厚朴网页设计基础教程2017版网站地图篇


)厚朴网页重构基础教程

1. 厚朴网页重构基础教程2017版概况篇

2. 厚朴网页重构基础教程2017版规范篇

3. 厚朴网页重构基础教程2017版公用部分篇

4. 厚朴网页重构基础教程2017版slider篇

5. 厚朴网页重构基础教程2017版首页篇

6. 厚朴网页重构基础教程2017版栏目页篇

7. 厚朴网页重构基础教程2017版多级栏目页篇

8. 厚朴网页重构基础教程2017版内容页篇


)厚朴网页重构基础教程

    化学多媒体软件设计FAQ2017版


(四)高难度进阶 (响应式设计网站及UI库)
1.  何为响应式设计网站
2.  青朴响应式网站UI框架概述
3.  响应式网站栏目首页UI框架 
4.  厚朴工作室Slider规范2017版
5.  2016年学院Slider设计与发布规范
6.  青朴网站优化小记
7.  Material-UI
8.  TealUI | 打造小而精的专业前端组件库

十一、提交指南
1. 工作目录:
工作目录名=小写班级+学号+姓名,如1班17543210孙悟空
备注:班级前无需标注年级。
(1)Web(网站):分类目录、网站文件 (页面数量不少于21)。
(2)Source(源图):3个psd或png源图,包括首页、栏目首页、内容页面(显示完整图文内容、图层分组、图层和图层分组语义化命名)。
(3)Doc(网站项目方案):doc+pdf文件,含课程生产力硬件+软件工具应用情况及技巧心得。
(4)Visio:甘特图vsd源图、jpg效果图。
可选加分项目
(1)宿舍、实验室、教室任选,Visio平面图(vsd源图+jpg效果图),放到Visio子目录.
(2)本学期任一课程知识的思维导图(MindManager源图+jpg效果图,放到source子目录)。
(3)团队作品项目RACI图(Excel文件,放到Doc子目录)。
(4)运用Chrome/Firefox的开发者工具测试网站性能,附录到项目方案文档。
(5)响应式设计网站。(高难度)
(6)运用雪碧图减少网页请求数。(高难度)
 评分比例:Web60分,Doc网站设计规划书20分,生产力工具篇8分,Source10分(首页4分+栏目首页3分+内容页3分),Visio2分。

2. 使用WinRAR或7-Zip将工作目录压缩打包成RAR格式文件,通过ftp 上传到本班目录。
(1)周四上课班作品,请上传到“周四”目录。
(2)周五上课班作品,请上传到“周五”目录。
 IP:202.116.83.77 (限中大校内IP访问)
用户名:2017
密   码:ideal
ftp客户端:FileZilla或Cuteftp。
(ftp权限:可写、不可读、不可追加、不可删除、不可创建目录,由工作室网管组设置)
文件大小:压缩包<80M
备注:严禁使用360压缩、快压、好压等非指定压缩软件打包。

3. 有备无患,消除侥幸心理,设计过程随时备份数据。

4. 遵循设计规范、守正出奇,严格自测+互测。

5. 截止时间:2018年1月14日中午12点整

6. 提交后,若有修改请在文件名标注版本,加小写的v和版本数字,如“16123456张三丰v1.1.rar,再上传。

附录1:相关链接
1. 2017级“化学多媒体软件设计”第一周概论
2. 2017级“化学多媒体软件设计”第二周概论
3. 2017级“化学多媒体软件设计”第三周概论
4. 2017级“化学多媒体软件设计”期中作品规范
5. 2017级“化学多媒体软件设计”第四周概论
6. 2017级“化学多媒体软件设计”第五周概论
7. 2017级“化学多媒体软件设计”第六周概论
8. 2017级“化学多媒体软件设计”团队作品要求
9. 2017级“化学多媒体软件设计”第七周概论
10. 2017级“化学多媒体软件设计”第八周概论
11. 2017级“化学多媒体软件设计”第九周概论
12. 2017级“化学多媒体软件设计”第十周概论

附录2:典型Bug
1. 工作目录不全,或结构混乱。
2. 目录和文件未完整语义化命名,例如项目方案书、源图文件、Visio文件未标明网站项目名称栏目目录使用数字、字母、拼音缩写或column等,出现多余的Article目录。
    出现极高
3. 工作目录下文件不全,如网页数量不足、项目方案缺pdf版。
4. 网站无子目录结构,未建立至少6个一级栏目子目录,网页全部集中于1个子目录。
    出现机率:
5. 首页命名错误、位于子目录。
6. 网站目录、网页、图片、JS等站内文件及代码中的ID、Class用中文名称命名
   出现频率:中
7. 网站目录、网页、图片、JS等站内文件及代码中的ID、Class用拼音缩写或夹杂空格、中横线命名
    出现机率:中
8 网页未语义化命名,文件名untitled。
9. 网页无标题(title标签写成未命名文档)。
10. 网页标题(title标签)命名错误(index.jpg、index.gif、首页等)。
     出现频率:中
11. 栏目页、内容页、功能页的标题(title标签)和首页标题全部雷同
      出现机率:
12. 网页尺寸不符合设计规范,偏窄或偏宽。
13. 页面撑破。
14. 网页出现页面内部纵向滚动条。
15. 网页文件偏大,打开缓慢,例如直接插入未裁剪压缩的图片。
16. 网页布局冲突,重心不稳,或结构不全、底部有多余空白行。
17. 网页贴左边或右边,页面错位。
      出现机率:中
18. 图文排版拥挤,例如行距不足、图文重叠。
19. 配色冲突。
20. 主体和背景反差不足。
21. 图片品质低、比例变形。
      出现机率:中
22. 图片和文字模糊,夹杂水印。
23. 图片无法显示或直接插入未经压缩的大图。
24. 超链接失效或无法打开,夹杂包含盘符或乱码的绝对路径。
      出现机率:中
25. 错别字、多余空格。
      出现机率:
26. 上标、下标、公式、符号、字母错误。
27. 中英文标点混杂。
28. 文章中途断行。
29. 正文每段首行未缩进两个汉字,段落之间未空一行。
      出现机率:
极高
30. 滥用特效,运行出错。
31. 网页文字内容区域用切片输出的图片替代。
32 字号未锁定,偏大或偏小,各区域字号不符合规范。
33. 整站未集中使用1个CSS文件,使用多个CSS文件;或htm代码含内部样式表、内嵌CSS、内联样式
      出现机率:中
34. html、CSS代码开头未标明年月日、修改者注释。
35. html、CSS各区域注释不全。
36. 网页未全部通过IE11/Edge、Firefox和Chrome最新版浏览器兼容测试。
37. 网页效果图源图只有1个图层或合并图层),无图层分组。
      出现机率:
38. 网页效果图源图图层分组、图层未语义化命名。
39. 网页效果图源图夹杂冗余图层。
40. 网页效果图内容不全,未体现网页最终效果。
41. 网页效果图和网页实际效果不符。
42. 项目方案书结构不全,封面、目录和正文未分开。
      出现机率:中
43. 项目方案书封面显示页码或夹杂无关文字。

44. 项目方案书封面、目录和正文连续,目录页码未采用小写罗马数字,正文页码未重新开始,或页码错乱。
      出现机率:中
45. 项目方案书无导航窗格和自动目录页,pdf版缺书签
      出现机率:
46. 项目方案书内容不全。
47. 项目方案书抄袭。
48. 项目方案书课程感悟字数不足。
49. 项目方案书生产力工具篇字数不足。
50. Visio缺源图。
51. htm、CSS代码中,class、id语义化命名错误,直接拷贝教程中ce、hope、culture等,应全部更换为自己网站的名称。
52. 项目方案写成项目规划书。
      出现机率:
53. 厚朴写成厚普。
54. 网站切片或内容图片未经优化精简大小,例如slider图片一张超过400K、一个图标几十K。
55. 软件图标从电脑桌面截图。
56. 网站的栏目目录名夹杂column。
57. RACI表格缺RACI不同字母的定义说明、不同字母颜色未区分。
58. 首页slider和主题无关。
59. 首页slider缺点题文字。
60. 表格文字垂直不居中。
61. 内容页全部集中到错误的Article目录,未放到对应的栏目目录。
      出现机率:中
62. 栏目首页全部集中到错误的column等目录,缺各栏目目录。
      出现机率:中
63. IT写成IE。
64. Slider套用教程的响应式代码,导致图片不显示。
65. 栏目图片未居中,偏左或偏右。
66. 附录的网站测试报告只有截图,缺文字说明。
67. 顶部导航条、表格文字未垂直居中。
68. footer区域缺半边文字,打破布局平衡。
69. banner中图片偏多,导致无重点,头重脚轻。
70. 提交作品压缩文件名夹杂空格。
71. 栏目首页卡片数量不足,第一行卡片仅1、2个,未铺满页面中间主体。
      出现机率:中
72 行距不一。
73. 字号不一。
      出现机率:中
74. 文字贴边。
      出现机率:中
75. 各段落页边距不一。
76. 甘特图缺文字内容,或文字偏小模糊难辨。建议单独放一页,版面横向。
77. 项目监理写成项目经理。
78. CSS路径错误,网页无法加载CSS导致页面版面错乱。
79. Slider下方出现空白。
80. Slider图片数量不足、无动画效果。
81. Slider轮播焦点不显示。
82. 网页顶部出现大片空白。
83. 未实现通栏效果,导航条、footer区域未贯穿页面。

84. 配色工具写Kuler。而Kuler早已被Adobe升级,若装新版PS,对应在线版的Adobe Color。 
      出现机率:中
85. 作者页用非作者相片。
86. 项目方案pdf版目录夹杂多余文字。
87. 项目方案pdf版目录显示错误!未定义书签。
88. 网页标题(title)夹杂多余的.html。
89.  banner图片突兀,一个矩形图片未抠图或融入背景。
90.  配色无色块。
91. 内容网页文字贴边。
92. 网页在2K分辨率下贴左边。
93. 网站地图页空白、无标题文档。
94. 工作日志过简略。
95. 项目监理无具体内容。
96. 缺布局图、项目小结、课程感悟等内容。
97. 工作目录出现多余的images目录。
98. 网页乱码,采用GB-2312编码。
99. 网页内容单列布局导致右边空泛。
100. 网页内部链接全部用虚拟链接#代替,无法打开对应页面。
101. 作品压缩包命名顺序错误。

文章录入:hope 责任编辑:hope
分享本文: