| 网页设计与前端实现课程大纲 | |||||
| 阶段课程教学目标：学员掌握WEB端整体设计思路与流程，项目制作标准规范并用设计软件实现；通过不同类型和风格的页面设计学习，创意和设计能力得到 | |||||
| 课程目标 | 课程内容 | 重点 | 难点 | 设置原因 | 应对企业的需求点 |
| 学员对WEB端课程安排了解，明确学习目标；学员个人独立原创图标思维与意识得到提升 | 1. 阶段课程安排介绍 2. GUI概要介绍 | 1. 课程安排理解 2. 草图绘制技巧 | 1.草图中抓图形外形特征（夸张特征） 2.网格草图的指导用法 | 学员对阶段课程内容了解，知道重难点及目标；发散思维的培养训练， | 图标设计与制作 |
| 剪影单色图标软件ps（ai）中绘制 | 1.对PS形状工具中路径操作（ai中路径查找器）的使用 | 1.图形绘制过程中形态控制 2.绘图形状工具，图形辅助形状风格统一性处理 | |||
| 拟物化写实图标设计（唱片盒） | 1.PS图层样式、滤镜对纹理的处理 2.混合模式对色调变化的影响 3.剪贴蒙版的使用 | 1.细节光影的处理，阴影真实感 2.纹理质感处理 | |||
| 通过对写实图标的设计与制作，来培养学员对不同质感写实图标的设计与制作 | 拟物化写实图标设计 | 1.形状工具，图层蒙版 2.图层透明度制作玻璃质感 | 镜头上高光质感的表现 | 掌握多种设计制作图标的思路与方法；同时对前面学习软件的复习回顾 | |
| 1.使用形状工具，变形工具绘制阴影和高光 2.五大调子的应用 | 1.光影对图标体积感的影响 2.透视关系的把控 | ||||
| 了解不同导航类型，掌握网页的结构组成部分和基础规范 | 1. 网页界面的基础组成结构，载体环境（PC电脑）及规范、 2. 网页中的视觉布局规范和操作习惯； 3. 导航的作用、风格解析与绘制下拉导航 | 1.网页界面的基础组成结构 2.PC平台的尺寸(17——24寸)对应的屏幕分辨率 3.网页的安全值尺寸、字体及文字大小、单位 | 1.网页的安全值尺寸、字体及文字大小、单位 | 基础规范的掌握和导航风格的了解是做好网页设计的基础 | 网页设计规范和流程掌握 |
| 1.导航类型及不同风格导航鉴赏分析 2.导航在网页中的地位与作用，导航的安全值 3.WEB UI中导航四种链接的状态 | 1.导航尺寸的安全范围设置 2.导航的四种链接状态把控 | ||||
| 巩固平面构图知识，提高个人设计技巧与水平 | 构图、字体、版式、配色 | 1.设计美学 2.构图技巧及演示 3.版式原理规则 4.配色技巧 | 1.版式处理 2.设计中细节处理 | 个人设计理论水平巩固与提高 | 设计能力提升 |
| banner广告图的设计的排版构成及合成处理 | 1. Banner知识讲解（在网页中的视觉比重）， 2. 各类构图解析（黄金比例，对角构图，透视构图，对比构图） 3. 环境光对图像的影响 | 1.构图在实际中的应用 2.图像合成，突出画面主题，视觉中心突出 | 1.版式构图方式 2.光影处理 2.环境光和透视 | BANNER设计制作是网页设计中常用的，也是容易出彩的地方 | 网页设计与制作 |
| 掌握banner广告图合成设计 | BANNER广告图合成技法 | 1.合成上的融合 | 1.不同素材合成画面 2.构图调色技巧 | ||
| 1.构图在实际中的应用 2.图像合成中光影和透视的影响 | 1.版式构图的合理运用 2.光影处理 2.环境光和透视 | ||||
| 掌握完整网页页面设计制作的思路和方法；对不同类型的分类和风格有了解 | 完整网页页面设计制作（个人主页） | 1.网页整体设计制作的思路，规范和方法。 2.设计布局最终代码可行性的概念讲解 3.将个人设计的图标作为元素 | 1.整体综合构图排版 2.网页规范 | 网页的分类和风格是设计师必须了解和掌握的能力；同时个人站的制作也可以为学生积累个人作品做准备， 并对前面学习内容进行检验 | |
| 网页的分类与风格 | 1.各类风格网页的特质特色（从特色文化元素，视觉心理及构图方面的分析） | 各类风格网页解析的思路和关键特质细节理解 | |||
| 掌握古典中国风的特点及制作方法 | 中国风网页设计制作（中国风格文字设计；版式构图；画面处理） | 1.抓住风格特色（中国文化元素） 2.有书法字体和无书法字体的不同处理手法 3.素材的选用和收集 4.多软件结合设计效果图 | 1. 风格特色的把控 | 适应设计游戏、传统节日的网页制作 | 多种风格的网页设计与制作 |
| 掌握时尚风格的特点与制作 | 时尚类网页设计思路与制作技巧 | 1.时尚类网页风格 2.字体、素材元素的应用 | 1.版式构图细节 | 适应于日常工作中设计时尚的网页界面 | |
| 掌握网页中场景处理与合成 | 设计图中环境搭建和细节处理（雨雪天气、光源环境的塑造） | 1.画面中的透视关系处理 2.光源对视觉氛围的处理 3.合成创意图 | 1.设计中环境氛围的烘托 2.场景合成 | 适合制作环境氛围强烈的网页页面 | |
| 独立完成个人设计 | 1.设计完成个人（主页+内页不少于3个页面） | 检验之前学习效果，符合岗位要求 | 网页设计师 | ||
| 了解HTML代码、CSS的原理，形式和组成结构; 理解布局尺寸对页面布局的作用 | HTML基础概念和在DW中新建站点 | 1.HTML的结构 2.新建站点的作用和好处 3.文件间链接的关系（关联路径的理解） | 1.HTML组成结构的理解 2.新建站点与路径的关系 | 结构及规范的了解掌握是学习代码的基础 | HTML和CSS代码的掌握 |
| HTML标签分类，特性和命名 | 1.标签的分类与特征（块状标签；内嵌标签） 2.常用标签说明 3.标签命名（class与id） 4.标签的命名与建议 | 1.块状标签与内嵌标签的特征 | |||
| CSS的组成结构与作用；CSS浮动布局的原理和作用 | 1.CSS的作用（原理与标签的关系） 2.CSS的组成结构（选择符、属性、值） 3.CSS规则面板介绍 4.控制标签代码（如何关联HTML） 5. 浮动的作用及何时选用浮动布局 | 1.CSS的作用及格式运用 2.CSS与HTML的关联理解 3.浮动与页面布局的关系 | |||
| 掌握导航代码的做法，理解CSS盒模型的概念和用法 | CSS盒模型的概念和用法 | 1.理解盒对象概念 2.内容(content)、填充(padding)、边框(border)、边界(margin)的理解 | 1.盒模型概念和对布局的影响 | 理解代码布局的基础原理 | |
| 导航的制作 | 1.列表标签（ul、li） 2.CSS控制导航的布局 3.包含选择符 4.链接伪类 | 1.CSS与html的关联 2.盒模型 3.包含选择符 | |||
| 掌握CSS背景属性的用法及在不同页面中的列表形式并使用HTML代码重构 | CSS的继承与优先 | 1.CSS的继承性（文字属性与文本属性的继承性） 2.CSS的优先（a.之后样式具有优先；b.!important标准优先；c.id选择符优先于class选择符） | 1.CSS继承性对布局的影响 2.CSS优先对样式的覆盖作用 | 前端问题的一些解决技巧 | |
| CSS背景属性 | 1.background属性及属性中背景定位 2.导航背景修饰 3.Fireworks软件介绍和使用 | 1.背景定位设置 | |||
| 掌握不同页面中的列表形式使用HTML代码重构；掌握CSS对文本文字的控制表现 | 列表元素 | 1.标签代码结构布局讲解 2.ul、ol、li、dl、dt、dd标签讲解 3.网页各类列表区域结构解析 | 1.复杂列表标签代码结构的划分 | 掌握不同页面中的列表形式使用HTML代码重构 | |
| 文字及段落样式设计 | 1.font属性及缩写 2.text-属性 3.CSS伪对象 | 1.行高对文本的影响 | |||
| 理解表单的作用，掌握不同表单元素的使用及页面设计 | 表格与表单 | 1.表格标签（table） 2.表单及表单元素（form） 3.表单布局设计 | 1.CSS对表单的控制 | 掌握页面中的表单元素代码设计 | |
| 掌握页面中图文字混排的技巧 | CSS内容排版 | 1.文字排版 2.图文混排 3.图片文本 | 1.文本属性的利用 | ||
| 巩固代码基础知识点,掌握整张单页页面重构的思路和方法 | 整张单页页面重构 | 1.整张单页面代码重构的思路 2.CSS选择符技巧（群组选择符） 3.CSS样式的共用和覆盖简化 4.class命名增加代码重用率 | 1.页面布局的划分 2.无效样式多 | 巩固加深对布局的理解 | |
| 1.页面布局的划分 2.无效样式多 | |||||
| 掌握页面中定位布局的使用 | 定位布局 | 1.定位、相对定位、固定定位的概念及使用环境 | 1.对不同定位位移参照的区别 | 定位布局在网页中常用 | |
| 导航下拉菜单（定位属性） | 1.定位属性 2.伪类的使用 2.dispaly与visibilty属性和区别 | 1.样式穿插的相互关系 | |||
| 掌握CSS缩写的写法和css中display的用法，理解定位在页面中的提示框的做法 | CSS缩写 | 1.font缩写 2.margin与padding缩写 3.border缩写 4.background缩写 5.color缩写 | 1.font文字属性缩写 | 交互代码常用实例 | |
| 折叠菜单 | 1.display属性中block和none的应用 2.盒模型特性的应用 3.a标签包含子结构，代码兼容问题 | 1.盒模型尺寸算错 | |||
| 小提示窗口 | 1.定位的使用 2.visibilty属性的使用 | 1.IE兼容问题 | |||
| 了解浏览器兼容的作用，掌握不同浏览器兼容的用法 | 浏览器兼容 | 1.CSS HACK技巧（不同浏览器的特定写法） 2.IE条件注释 3.常见兼容问题和解决办法 | 1.CSS HACK与样式的优先问题 | 网页的不同浏览器的兼容 | |
| 掌握HTML5中音视频标签的使用和CSS3中音视频标签的使用 | HTML5新特征 | 1.HTML5新标签和用法 2.HTML5音频和视频标签 | 1.HTML5标签应用的兼容性 | H5与CSS3的新功能掌握 | |
| CSS3新属性 | 1.CSS3新属性（文字投影、圆角、对象投影） 2.CSS3过度属性 3.CSS3中2D、3D转换属性 4.CSS3动画属性 | 1.定义动画，转换属性需定义定位 1.动画属性的不同浏览器兼容 ★★ | |||
| 理解响应式页面的制作思路原理，掌握响应式页面的写法和制作 | 响应式布局 | 1.CSS3 Media Query 响应式媒体查询的应用 | 1.针对不同浏览器尺寸定义不同样式 | 与现市场上一套网页兼容多平台的需求 | 响应式页面制作技术 |
| 学会并精通图标字体的作用和使用方法 | 图标字体应用 | 1.Ai制作矢量svg格式图标 2.将SVG图标转为图标字体文件 3.图标字体的使用 | 1.图标字体制作使用 | ||
| 具备前端静态页面的独立制作能力 | 整站的制作 | 1.公用样式表 2.整站制作技巧与方法 3.SE0技巧 | 1.代码对SE0的影响（标签合理，代码简洁具有语意化） | 综合设计能力考验 | 整站设计与制作 |
| 掌握JS基础作用和语法及使用方法 | JavaScipt基础 | 1.作用和用途 2.实现、输出 3.语法和注释 4. 函数语法（ function） | 1.js基础语法的记忆 2.语法格式 | 网页常用交互效果基础 | 交互脚本制作技术 |
| 1.变量 2.JS外部调用文件的写法（window.onload） 3.改变CSS | 1.外部JS写法和语法格式 | ||||
| 掌握js中条件判断的写法 | Js鼠标事件效果 | 1.鼠标事件 2.onmouseover与onmouseout事件 | 1.改变CSS中多样式写法 | 脚本判断的使用方法 | |
| 1.onclick事件 2.条件语句if..else | 1.条件判断 | ||||
| 理解jQuery的原理和语法并掌握jQuery中事件和选择器的用法作用 | jQuery基础及选择器和事件 | 1.jQuery库简介 2.引入jQuery的方法 3.jQuery的基本语法 4.选择器 5.事件中的事件常用方法 | 1. jQuery语法 2. 选择器的使用 | 网页中JQ库的用法 | |
| 掌握jQuery中的获取类名、css控制的方法；掌握Jquery的动画、滑动、隐藏方法 | jQuery HTML | 1.获取并设置 CSS 类（addClass()、removeClass() ） 2.jQuery css方法(jQuery对CSS操作的方法) | 1.添加/删除CSS类 2.jQuery对音频的控制 | JQ动效效果的掌握 | |
| jQuery效果 | 1.隐藏与显示 2.淡入淡出 3.滑动 4.动画 | 1.jQuery animate() | |||
| 掌握jQuery中元素过滤及遍历的用法；掌握手机端JQuery库的用法 | jQuery元素遍历 | 1.向下遍历/向上遍历 2.同级遍历/过滤 | 1.遍历的使用技巧 | 脚本内容的补充及其实脚本库介绍 | |
| Bootstrap介绍 | 1.Bootstrap框架介绍 | 1.Bootstrap框架开源文件的使用 | |||
| jQuery Mobile | 1.jQuery Mobile介绍 2.jQuery Mobile基础与使用 | 1.jQuery Mobile引用安装与设置 | |||
以上就是网页设计培训课程的全部内容介绍，如需了解更多的网页设计培训班、课程、价格、试听等信息，也可以点击进入 网页设计 相关频道，定制专属课程，开始您的学习之旅。
温馨提示
温馨提示
