没有合适的资源?快使用搜索试试~ 我知道了~
【网页美工设计】教(学)案.doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 38 浏览量
2021-10-10
17:44:53
上传
评论
收藏 223KB DOC 举报
温馨提示
试读
31页
【网页美工设计】教(学)案.doc
资源推荐
资源详情
资源评论
《网页美工设计》课程教案
授课教师: 授课班级: 地点: 课时:
章节
容
网页设计基础知识
Dreamweaver 软件介绍及其基础操作
教学
目标
1) 使学生了解网页设计的相关基础知识;
2) 使学生熟悉 Dreamweaver 软件界面的基本操作方法。
重点
难点
1) 了解网页设计相关概念和网页的类型;
2) 熟练掌握 Dreamweaver 软件创建和管理站点的方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及容提要
时间
分配
备注
教
学
过
程
设
计
一、 引入
1、 相互认识,提出与本学科相关的知识,介绍本门课程情况、
教学容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营
造一种学习氛围,尊重同学,互帮互学,真正达到学以致用;
2、 提出问题:上过网吧?有谁自学过网页设计?听说过网页设
计三剑客吗?
二、 告知学生课堂任务
本 次 课 所 学 习 的 主 要 容 是 网 页 设 计 相 关 基 础 知 识 和
Dreamweaver 软件基础操作;
三、 逐步演示讲解分析教学容
1、 和网页的区别:
(1)网页是 Internet 基本元素;
(2)由网页组成;
2、 静态网页和动态网页:
静态网页:纯粹 HTML 语言格式的网页通常被称为静态网页,静
态网页的后缀名通常为.htm、.html、.shtml、.xml。
动态网页:许多人认为网页会动就是动态网页,这是个错误的观
点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的
动态罢了。真正的动态网页是指实际上并不是独立存在于服务器
上的网页文件,只有当用户请求时服务器才返回一个完整的网
页。也就是说,它是返回到了客户端上的网页。例如网页文件是
以 ASP、PHP、JSP、ASPX 为结尾就是动态的网页了。
静态网页的特点:
(1)容相对稳定,容易被搜索引擎检索到;
(2)没有数据库支持,在制作和维护方面工作量大;
(3)交互性差,在功能方面有很大的限制。
约 10 分钟
约 5 分钟
约 25 分钟
学生理解
动态网页的特点:
(1)以数据库技术为基础,可大大降低维护的工作量;
(2)可实现更多的功能,如用户注册、新闻发布、在线留言
等;
(3)不利于使用搜索引擎进行推广。
3、 常见网页类型:形象页、主页、栏目页、页、新闻详细页
等;
4、 网页设计原则:
(1)了解客户需求
(2)遵循 Web 标准
(3)运用形式美法则
5、 网页设计流程:
(1)手绘效果图:确定网页主题容和风格
(2)设计效果图:搜集、整合设计所需素材
(3)版面编辑:网页的制作与实现
(4)网页美化:动画设计,网页测试和发布
6、 网页设计的主要软件:
(1)Photoshop
(2)Dweamveawer
(3)Flash
(4)Firworks
7、 Dreamweaver 软件界面介绍:
(1)软件面板组成及基本操作方法
(2)软件参数设置
8、 Dreamweaver 站点创建:
站点 -> 新建站点 -> 设置站点名称 -> 设置站点默认图像文件
夹。
9、 学生实训操作:
Dreamweaver 站点创建与设置
10、 Dreamweaver 创建第一个网页:
(1) 名称:index.html
(2) 设置标题、输入文本、输入特殊字符
(3)页面属性设置
(4)预览网页
四、 学生实训及辅导;
创建第一个网页。
五、 课堂小结
本次课主要容:
1、网页设计基础知识;
2、Dreamweaver 基本使用方法;
3、Dreamweaver 创建第一个网页;
约 10 分钟
约 6 分钟
约 6 分钟
约 4 分钟
约 8 分钟
约 12 分钟
约 20 分钟
约 50 分钟
约 40 分钟
约 4 分钟
学生实践
学生实践
总结
后
记
《网页美工设计》课程教案
授课教师: 授课班级: 地点: 课时:
章节
容
Dreamweaver 表格操作;
CSS 样式表应用。
教学
目标
1) 掌握 Dreamweaver 中表格的设计方法;
2) CSS 样式表的使用方法和技巧。
重点
难点
1) 熟练掌握 Dreamweaver 中表格的基本操作方法;
2) 了解网页设计中 CSS 样式表的作用和设置方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及容提要
时间
分配
备注
教
学
过
程
设
计
一、 引入
1、 回 顾 上 次 课 所 学 习 的 容 : 网 页 设 计 基 础 理 论 知
识,Dreamweaver 软件使用初步;
2、 提出问题:对 Word 中表格操作还熟练吗?CSS 是什么?如
何设置网页中各种元素的显示效果?
二、 告知学生课堂任务
本 次 课 所 学 习 的 主 要 容 是 Dreamweaver 中 表 格 的 使 用 和
Dreamweaver 创建 CSS 样式表;
三、 逐步演示讲解分析教学容
1、 网页中表格的作用:
(1)容组织和定位;
(2)网页排版;
2、 表格布局和 Div 布局区别:
各有优势。
表格:简单,好用,学起来很容易上手。各种浏览器都支持!基
本上不会变形。但是代码冗余较多,维护起来也不怎么方便。
DIV+CSS 优点:代码冗余小,所以打开速度快一些。维护起来
非常方便。但是要兼容 IE6 IE7 火狐等浏览器的话,开始学就会
很头疼这个问题的。往往在 IE6 里面看着整个网页是好的,但是
到了 IE7 或者火狐里面就全乱了。
推荐:用 div 做框架,table 用来储存数据。
3、 Dreamweaver 中表格的基本操作:
(1)表格和单元格的选择及属性设置;
(2)行和列的添加和删除;
(3)单元格的合并和拆分;
(4)表格的嵌套;
约 4 分钟
约 6 分钟
约 30 分钟
学生理解
4、 实例演示讲解:使用表格制作一像素细线;
操作步骤:
(1)插入 1 行 1 列表格;
(2)设置单元格背景颜色;
(3)设置单元格高度为 1;
(4)转到代码视图;
(5)把单元格中的 删除。
5、 辅导学生实训操作;
6、 Dreamweaver 中 CSS 样式表的使用:
(1)CSS 样式表文件的创建;
(2)创建 CSS 样式:网页样式 2;
(3)创建 CSS 样式:网页凹下样式;
(4)创建 CSS 样式:类样式;
(5)创建 CSS 样式:滤镜样式。
7、 辅导学生进行 CSS 样式实训操作;
8、 案例演示讲解:个人主页首页布局设计
(1)创建网页;
(2)设置网页属性;
(3)使用表格布局网页(上中下型);
(4) 使用 Photoshop 制作页面头部 Banner 图片;
(5)制作导航栏渐变背景图片;
(6)制作页面主体(左侧公告跑马灯效果和友情,右侧资讯速
递及图片列表);
(7)页面底部设计。
四、 布置并辅导学生完成课堂作业;
五、 课堂小结
本次课主要容:
1、Dreamweaver 网页表格基本使用方法;
2、Dreamweaver 创建 CSS 样式;
约 10 分钟
约 15 分钟
约 35 分钟
约 15 分钟
约 40 分钟
约 40 分钟
约 5 分钟
学生思考
学生实践
学生理解
学生实践
学生理解
学生实践
总结
后
记
剩余30页未读,继续阅读
资源评论
HY840215
- 粉丝: 2
- 资源: 4万+
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功