首页 | 诚聘英才 | 在线报名 | 英雄会 | 联系方式
您当前的位置:珠峰培训 >>特色培训>>CSS+DIV核心课程专业讲座       招生电话:010-62863298 15010063597

珠峰培训CSS+DIV网页制作课程(1.0 版)大纲(学费1200元)


写在前面:珠峰培训的CSS网站前端开发2.0课程已经非常完善了,为什么还要开1.0版的课程

一、在此课程中,增强了对基础知识的讲解和练习。
二、此课程降低了招生的门槛,了解一些HTML的标签,会简单的网页制作就可以学习的(零基础的也可以,先免费补基础知识)。
三、 我们的CSS2.0的课程是绝对超级的课程,可以说是国内绝无仅有的课程,尤其是这里面的前瞻性和可扩展性知识,你学生将来做前端开发或进一步学习javascript、javascript框架打下了非常好的基础。但是,很多新手并不明白什么叫网站前端开发,也不知道框架和javascrpt的好处,不能理解2.0课程的实质

总体介绍:1.0课程比2.0课程更突出对基础知识的讲解。其主要内容如下

一、CSS基础知识
1. CSS布局与table布局的区别和优势。XHTML基础,选择合适的doctype,选择合适的标签(HTML标签血统论)。
2. CSS语法结构,CSS属性与选择符,类型选择符,id及class选择符。
3. 应用CSS到网页中,行间样式表,内部样式表,外部样式表。
二、CSS语法结构
三、CSS网页布局
1. 认识div,div是什么,如何使用div。
2. div的并列与嵌套结构。
3. 使用合适的对象来布局 ,一列固定宽度,一列自适应,高度自适应。
四、CSS网站元素设计
1. 用CSS设计网站导航,横向导航,纵向导航,下拉及多级弹出式菜单。
2. 门户网站的导航设计
3. 表单设计,改变输入框及文本域样式,改变下拉列表样式。
五、CSS内容排版
1. 文字排版,通栏排版,分栏排版,图文混合排版,图片基础 控制,不规则文字环绕,全图排版,表格排版。充分使用表格对象的标签,表格样式控制,表单表格设计。
六、CSS高级应用与技巧
1. id 与 class
2. 什么是 class,什么情况下使用class
3. id使用与网站结构,div Vs span
七、CSS文件结构的设计与优化
1.CSS缩写,font字体缩写,margin与padding边距缩写, border边框缩写,list列表缩写,background背景缩写,color颜色缩写。
2. CSS代码优化,增加代码重用率,使用样式覆盖进行简化。
八、DreamWeaver CS4使用技巧
1.CSS代码优化,增加代码重用率,使用样式覆盖进行简化。
2.XHTML与CSS校验,XHTML校验器,CSS校验器

以下的2.0课程和1.0课程的比较 ,红字部分是2.0课程包括,但1.0的课程中去掉的那一部分

课程知识分为三类:一为原理性知识,二为应用性知识。1.0的课程里去掉了前瞻性和扩展性的知识技能

第一部分(第一部分课程为原理性知识)

先导: HTML血统论

  1. 真正理解HTML的血统,才能正确使用HTML标签,用好HTML标签是做好网页的基础。
  2. 万物皆盒子。能做布局的不只是DIV,所有的标签都可以做布局。用DIV,是因为它一穷二白,没什么默认值。

一、盒子原理:

边距,填充,边框,默认宽度,填充对背景的影响

二、标准流,浮动(float)和定位(position)

浮动的开始位置、浮动元素对兄弟元素的影响,清除浮动。
浮动会对弟弟产生影响,弟弟元素会视此元素为不见,但弟弟元素内的内容不会与浮动元素内的内容
重叠。

三、行内元素和块级元素。

块级元素和行内元素 了解那些是块级元素,那些是行内元素。两种元素的转化方法(display)

四、初步了解background的复杂用法(优其是CSS SPRITE这个知识点)

五、了解溢出(overflow),理解clear和overflow的重要性

六、布置作业,分析作业

今天的实践练习作业:用CSS+DIV的方式完成复杂的表格效果,目地在于强化盒子原理和用CSS+DIV做网页的整体布局。

第二部分知识点:原理性知识第二讲

一、定位position的全面了解

例子:不用图片的三角菜单,带说明信息的菜单。

二、应用背景属性的复杂用法:

九宫格 CSS SPRITE

三、Z-index原理

四、深入理解ID选择器、类选择器其不同的样式的作用强度

实例:三角菜单,圆角菜单,折角菜单,会跳动的多彩菜单等。

五、CSS调试工具,CSS浏览器兼容性测试工具使用。

实践练习:仿公司宣传网站首页

第三部分知识

上午:学员讲练习,讨论课分析课。(准备好奖品)

3。1 讲滑动门 伪类,CSS发展趋(去掉了CSS发展趋势这一前瞻性知识的介绍)

做出两层滑动门做的玻璃导航菜单

3。2:制作纯CSS的实用菜单

有实际意思的CSS菜单(综述了定位和z-index特性的菜单),在此讲中着重讲解了伪类和在将来的CSS发展趋势中的伪类的重要性
布置作业:通过网络了解面向客户体验的网站设计、栅格化设计、UED、UCD

第四部分:课程重点是CSS的综合技能、CSS框架和JS基础知识(这一部分主要是javascript特效,在1.0课程中去掉,在2.0的课程里有)

4。1 上午讲面向用户体验的网页设计、栅格化设计(去掉了)

开放性课程,讨论课
面向用户体验的网页设计、栅格化设计原理及应用

4。2 讲SPRY框架,tab面板和折叠面板(其中tab面板是重点)

在讲解SPRY框架时要求学生理解什么是CSS、JS框架,要求了解SPRY所能实现的网页特效。
对SPRY框架的JS部分不做讲解,对SPRY的CSS要求学生熟练掌握如何做出自定义的几种特效。
对学生说明为什么要选择SPRY来讲解:SPRY和DW无缝集成,不需要写任何的JS代码就可以图形化的设计特效,这是其它框架所不具备的。
在更高级的课程中(javascript网页编程课程中),我们会讲解功能更强大,更通用列流行的JQuery框架。

练习,有tab面板的综合网页练习
布置作业:用spry完成综合的网站首页功能

4。3:

JS入门,JS语法,方法定义,基本的语句:条件,循环,用JS控制CSS
用JS做的下拉菜单

第五部分:以综合练习和扩展技能为主,重点是CSS的高级应用和JS(1.0课程中去掉了JS这一部分)

第七天,变宽布局 和圆角(上午)

下午:javascript进阶一(去掉)

第八天,javascipt进阶二(去掉)

注意:SPRY框架和JS是扩展知识,尤其是JS。最后一个作业只要求做出CSS效果来,满分七十分,如果把JS效果能独立做出来,是140分

最后评出本期优秀学员,合影留念。