|
|||||||
|
培训内容
课程背景:
一个由DIV+CSS布局且结构良好的页面可以通过调整CSS的定义,在任何地方、任何智能设备(包括PDA、移动电话和计算机)上以任何外观表现出来,而且利用DIV+CSS布局方式构建的网页能够简化网页代码、加快网页显示速度,因此DIV+CSS已经成为目前流行的网页布局方式,也是网页设计和制作人员必需掌握的技能之一。
本课程结合大量网页结构分析、图片切割、网页布局、页面组装的操作细节图解,由浅入深地讲解网页制作的步骤与方法,同时介绍了Web标准以及使用目前流行的“层”布局方式,并结合多个实例介绍了使用DIV+CSS构建网页的方法,不仅介绍了Dreamweaver 8、Firework 8等常用软件的使用,更重要的是,结合实际网页制作中可能遇到的问题,提供了解决问题的思路、方法、技巧,使大家轻松掌握DIV+CSS布局方式,制作出精美的网页并搭建功能强大的网站。
学习基础:掌握电脑基本操作,了解办公软件的基本使用,有基本网页设计概念。
培训目标:熟练掌握网页设计技巧,掌握DIV+CSS网页布局方式,了解常用网站配色方案和技巧。
课程大纲:
1. 网页设计流程与工具的使用 Dreamweaver 8本课程详细讲述开发Web 站点的基本方法,内容涉及使用Dreamweaver 8创建、管理和维护Web站点;放置图形、格式样式、添加和修改表格、创建链接;利用表格、框架和层叠样式(CSS)设计页面外观;使用模板实现站点的统一外观和风络;利用JavaScrirpt和服务器添加交互性;创建表单;使用“标签选择器”、“代码提示”和“代码片段”等。
2. Flash8本课程详细讲述动画制作的基础知识和基本操作方法 主要内容包括Flash8基础知识、绘制图形、填充图形、输入文本、编辑图形、元件的使用、实例与库的使用、帧和图层的使用、制作逐帧动画、制作动作补间动画、制作形状补间动画、制作引导动画、制作遮罩动画、为动画添加声音、为动画添加Actions语句、用组件制作交互坳画、测试、优化、输出和发布动画等知识。
3. Fireworks8本课程详细讲述了Fireworks8的基本操作,矢量图形绘制及矢量路径操作 文本设计、图像设计,层与蒙版。滤镜和特效,动画制作和动画效果。制作按钮和导航。切片、热区及优化导出。
4. (DIV+CSS网页布局高级专题)
第1专题 Web标准与CSS布局概述
1.1 Web标准的历史及发展
1.1.1什么是Web标准
1.1.2 Web表现层技术
1.1.3 Web标准的历史
1.2 Web标准的构成
1.2.1结构(Structure)
1.2.2表现(Presentation)
1.2.3行为(Behavior)
1.3 Web标准有什么好处
1.4 CSS布局与table布局的区别
1.4.1 CSS 2.0的优势
1.4.2传统的table布局VS.CSS布局
1.5如何向标准过渡
1.5.1从HTML转向XHTML
1.5.2发挥CSS 2.0的作用
1.6常见问题
1.6.1什么样的网站才符合Web标准
1.6.2使用Web标准之后表格还有用吗.
1.6.3可以继续使用HTML来设计网页吗
1.6.4为什么不直接过渡到XMI
1.6.5学习CSS布局比表格难吗
1.6.6 CSS布局是不是意味着必须手写代码
1.6.7什么叫网站重构?
1.6.8使用Web标准之后就不再存在兼容性问题了吗
1.6.9有没有Web标准方面的优秀图书或网站
第2专题 XHTML与CSS基础
2.1 XHTML基础
2.2选择合适的doctype
2.3选择合适的标签
2.4.给CSS留下接口
2.5良好的XHTML编写习惯
2.6 CSS语法结构
2.6.1 CSS属性与选择符
2.6.2类型选择符
2.6.3群组选择符
2.6.4包含选择符
2.6.5 id及class选择符
2.6.6标签指定式选择符
2.6.7组合选择符
2.6.8伪类及伪对象
2.6.9通配选择符
2.7 CSS数值单位
2.8应用CSS到网页中
2.8.1行间样式表
2.8.2内部样式表
2.8.3外部样式表
2.9 CSS开发环境与调试环境
第3专题 CSS网页布局
3.1认识div
3.1.1 div是什么
3.1.2如何使用div
3.1.3理解div
3.1.4 div的并列与嵌套结构
3.1.5使用合适的对象来布局
3.2一列固定宽度
3.3一列自适应
3.4二列固定宽度
3.5二列宽度自适应
3.6两列右列宽度自适应
3.7二列固定宽度居中
3.8三列浮动中间列宽度自适应
3.9高度自适应
第4专题 CSS网站元素设计
4.1用CSS设计网站导航
4.1.1横向导航
4.1.2纵向导航
4.1.3下拉及多级弹出式菜单
4.1.4门户网站的导航设计(闪客帝国)
4.2背景控制
4.2.1背景色
4.2.2背景图片
4.2.3背景定位
4.2.4背景滚动
4.2.5背景属性缩写
4.2.6基于背景控制的导航优化
4.3列表元素使用
4.3.1 ul无序列表
4.3.2 01有序列表
4.3.3改变项目符号样式
4.3.4使用图片自定义项目符号
4.3.5使列表变为段落
4.3.6列表缩进排版
4.3.7复杂列表的排版
4.4表单设计
4.4.1改变输入框及文本域样式
4.4.2改变下拉列表样式
4.4.3改变按钮样式
4.4.4表单布局设计
4.4.5使用label标签提升表单可用性.
4.4.6表单设计的其他建议
4.5字体及段落样式设计
4.5.1应用字体样式
4.5.2应用段落样式
4.6图片样式设计
4.6.1图片定位
4.6.2图片剪切
4.6.3图片替代文本
4.7链接样式的控制
4.7.1链接控制
4.7.2 CSS按钮
4.7.3图片翻转链接
4.7.4面包屑导航链接
第5专题 CSS内容排版
5.1文字排版
5.1.1通栏排版
5.1.2分栏排版
5.2图文混合排版
5.2.1图片基础控制
5.2.2不规则文字环绕
5.3全图排版
5.4表格排版
5.4.1充分使用表格对象的标签
5.4.2表格样式控制
5.4.3表单表格设计
第6专题 CSS高级应用与技巧
6.1 id vs class
6.1.1什么是id
6.1.2什么情况下使用id
6.1.3什么是class
6.1.4什么情况下使用class
6.1.5 id使用与网站结构
6.2 div Vs span
613 CSS选择符的命名
6.3.1大小写敏感
6.3.2合法字符及组合
6.3.3命名建议
6.4 CSS文件结构的设计与优化
6.4.1导入
6.4.2结构
6.5 CSS缩写
6.5.1 font字体缩写
6.5.2 margin与padding边距缩写
6.5.3 border边框缩写
6.5.4 list列表缩写
6.5.5 background背景缩写
6.5.6 color颜色缩写
6.6 CSS代码优化
6.6.1增加代码重用率
6.6.2使用样式覆盖进行简化.
6.7园角样式设计
6.8滑动门技术
6.9小提示窗口
6.10折叠标签
6.11 CSS数据图表
6.11.1初级样式(进度条)
6.11.2复合样式(滑动条)
6.11.3柱状图
6.12切换样式表(网站换肤)
6.13 XHTML与CSS校验
6.13.1 XHTML校验器
6.13.2 CSS校验器
6.14 Flash如何符合标准
5、网页设计创意思想
6、电子商务网站案例分析
时间安排:
8月
9月
10月
11月
12月
1月
2月
脱产
2;12;23
2;12;22
1;10;20
1;12;25
2;12;23
1;8;20
2;12;22
业余
16;30
7;20
11;25
8;22
6;20
5;19
5;19
软件环境:网页三剑客Macromedia.Studio.8.0(Dreamweaver8.0,flash8.0,fireworks8.0),photoshop,cutftp上传软件。
参考教材:中文版DREAMWEAVER 8标准教程(一套3本定价35元/本),CSS网站布局实录(定价32元科学出版社)




