《网页美工设计》教案.doc

《《网页美工设计》教案.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页美工设计》课程教案授课教师：授课班级：地点：课时：章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作教学目标1)使学生了解网页设计的相关基础知识；2)使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1)了解网页设计相关概念和网页的类型；2)熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、引入1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互

2、帮互学，真正达到学以致用；2、提出问题：上过网吧？有谁自学过网页设计？听说过网页设计三剑客吗？二、告知学生课堂任务本次课所学习的主要内容是网页设计相关基础知识和Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容1、网站和网页的区别：（1）网页是Internet基本元素；（2）网站由网页组成；2、静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。

3、真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；（2）没有数据库支持，在网站制作和维护方面工作量大；（3）约10分钟约5分钟约25分钟学生理解交互性差，在功能方面有很大的限制。动态网页的特点：（1）以数据库技术为基础，可大大降低网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。1、常见网

4、页类型：形象页、主页、栏目页、内页、新闻详细页等；2、网页设计原则：（1）了解客户需求（2）遵循Web标准（3）运用形式美法则3、网页设计流程：（1）手绘效果图：确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布4、网页设计的主要软件：（1）Photoshop（2）Dweamveawer（3）Flash（4）Firworks5、Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法（2）软件参数设置6、Dreamweaver站点创建：站点->新建站点->设置站点名称->设置

5、站点默认图像文件夹。7、学生实训操作：Dreamweaver站点创建与设置8、Dreamweaver创建第一个网页：（1)名称：index.html（2)设置标题、输入文本、输入特殊字符（3）页面属性设置（4）预览网页一、学生实训及辅导；创建第一个网页。二、课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver基本使用方法；3、Dreamweaver创建第一个网页；约10分钟约6分钟约6分钟约4分钟约8分钟约12分钟约20分钟约50分钟约40分钟约4分钟学生实践学生实践总结后记《网页美工设计》课程教案授课教师：授课班级：地点：课时：章节内容Dreamw

6、eaver表格操作；CSS样式表应用。教学目标1)掌握Dreamweaver中表格的设计方法；2)CSS样式表的使用方法和技巧。重点难点1)熟练掌握Dreamweaver中表格的基本操作方法；2)了解网页设计中CSS样式表的作用和设置方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、引入1、回顾上次课所学习的内容：网页设计基础理论知识，Dreamweaver软件使用初步；2、提出问题：对Word中表格操作还熟练吗？CSS是什么？如何设置网页中各种元素的显示效果？二、告知学生课堂任务本次课所学习的主要内容是Dreamwe

7、aver中表格的使用和Dreamweaver创建CSS样式表；三、逐步演示讲解分析教学内容1、网页中表格的作用：（1）内容组织和定位；（2）网页排版；2、表格布局和Div布局区别：各有优势。表格：简单，好用，学起来很容易上手。各种浏览器都支持！基本上不会变形。但是代码冗余较多，维护起来也不怎么方便。DIV+CSS优点：代码冗余小，所以网站打开速度快一些。维护起来非常方便。但是要兼容IE6IE7火狐等浏览器的话，开始学就会很头疼这个问题的。往往在IE6里面看着整个网页是好的，但是到了IE7或者火狐里面就全乱了。推荐：用div做框架，tabl