当前位置:首页 >> 其它课程 >> 《网页设计基础》完整教案(201309版)

《网页设计基础》完整教案(201309版)


武汉城市职业学院教学教案 《网页设计与制作》

院 专 班 教 学

系: 业: 级: 师: 年:

信息技术系 多媒体技术专业 11 多媒体技术 胡文鹏 2012-2013 学年上学期

1

一、课程整体教学设计
建议: 1、说课,介绍课程内容设计 2、介绍相关的概

念和软件,学会赏析网页 3、介绍基本工具 DW 的使用,制作简单的文本网页、图文混排网页,使学生有一定的 DW 基础。 4、网站规划和设计流程 5、网页配色方案,效果图设计, 6、切片、布局等 一、课程信息 课程名称:网页设计与制作 学分:4 学时:68 学时 课程类型:专业课程 授课对象:11 多媒体 先修课程:《Photoshop》《Flash》《计算机基础》《美术基础》。 、 、 、 、 后修课程: 《网站开发与建设》《动态网页制作》等 、 二、课程设计 1.课程目标 本课程的教学目标是: 培养学生静态网页网站开发与维护的实际工作能力, 使学生具备 计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技 能,初步形成解决实际应用问题的能力,为以后的相关专业课学习和工作打下基础,为以后 发展的软件新技术提供平台,并注意渗透思想教育,逐步培养学生的辩证思维,加强学生的 团队精神和职业道德观念。 2.教学目标

(1)知识目标 了解网页设计行业的总体特征,并能说出网页设计师的基本技能要求; 能说出网页设计与制作的一般方法和流程; 能陈述相关的基本概念; 能欣赏和分析各种类型的网页; 能陈述网页设计中的色彩应用理论; 能正确素材在网页制作中的作用; 能说出网页布局的几种典型形式; 能熟练说出切片时的几个要点;
2

能陈述书写网站策划书应注意的问题; 能说出在网上申请域名的具体步骤;

(2)能力目标 能书写网站策划书; 能手绘网页草图,并在 Photoshop 中制作效果图; 能利用网络工具收集需要的各种素材; 能使用 Photoshop 设计网页界面中的 LOGO、页面效果图和页眉等; 能利用 Flash 等软件制作简易的 gif 与 swf 动画,并插入到网页中; 能熟练使用 Fireworks 进行网页切片,并导入到 Dreamweaver; 能熟练使用 Dreamweaver 的基本功能制作网页; 能利用表格或单元格工具进行网页布局与版式设计; 能制作框架网页; 能在网页中添加合适的超级链接; 能看懂并编写简单的 HTML 代码,能修改复杂的 HTML 代码; 能使用 CSS 工具修饰网页; 能熟练管理站点; 能在网上申请域名; 通过多种工具上传网站;

(3)素质目标 培养学生的沟通能力和协作精神; 培养学生勤于思考、认真做事的良好作风; 培养学生勇于创新、敬业乐业的工作作风; 培养学生具有良好的职业道德和较强的工作责任心; 培养学生自主学习能力和知识应用能力; 培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力; 训练和培养团队协作精神和共同开发网站的综合能力;

3

3.模块化教学内容设计

学时 序号 工作流程 典型工作任务 理论 相关的基本概念 1 网页制作基础 各种网站赏析 网站开发工作流程 2 网站规划 网站策划书的书写 了解并收集素材 网页配色与布局 设计与制作网站 LOGO 设计与制作网站页眉 3 网页设计 设计与制作网页动画 设计与绘制主页效果图 设计与绘制子页效果图 效果图切片与导入 用表格和单元格进行网页布局 制作框架网页 4 网页制作 添加超级链接 Html 代码 CSS 样式表修饰网页 1 2 2 1 2 2 1 2 2 3 1 2 3 2 2 5 3 2 26 1 2 1 1 2 1 1 1 1 2 3 3 24 6 1 2 4 实践 总学时

5

网站管理

站点管理

1

1

2

6

期末考核 总

检查各组的网站完成情况 计 28

2 36

2 64

4

三、教学材料 教 材:文东, 《Dreamweaver CS3 网页设计基础与项目实训》 ,北京:科学出版社,2010

年4月 参考资料:张洪斌 等, 《基于工作过程的网页设计与制作教程》 ,北京:机械工业出版社, 2010 年 4 月

四、教学组织形式 集中授课与分组训练相结合,课内授课、校外实习与观看录像相结合。 采用模块化教学模式, 课堂教学与现场教学相结合, 课内项目训练与实习项目训练相结 合,任务驱动,学、练同步,做到理论与实践一体化。既考虑理论知识体系,又紧紧围绕能 力目标与综合项目组织教学,通过项目分解和提炼,以项目练习实现能力目标和知识目标。

五、考核方案 本课程采用形成性考核和终结性考核相结合的方法进行考核。 形成性考核(平时成绩):占 40%;出勤、听课情况、上课提问回答情况、作业完成情况等。 终结性考核(作品考核成绩):占 60%;根据各小组的网站质量进行考核。 总评 = 平时成绩×40% + 期终考核成绩×60%

附 1: 《网站设计与制作》期末考核标准 重要时间:网站完成时间为**月**日,期末考评时间为**月**日 评价等级 优
4 4 20 4 4 4 5 5 25 5 5 5 20 4 4

评价项目
站点主题鲜明

评价内容

分值

良 及格 不及格
3 3 3 3 3 4 4 4 4 4 3 3 2 2 2 2 2 3 3 3 3 3 2 2 1 1 1 1 1 2 2 2 2 2 1 1

内容丰富健康,实用性强 主题 页面元素丰富(有文字、图片、动画等) 页面数目不少于 5 张 页面内容清晰,语言文字有特色 标题精炼,Logo 标志新颖 整体布局合理,美观,一致 外观 色彩选用得当,搭配和谐 图片或动画处理效果好,无变形 有独特的设计风格 技术应用 表格运用恰当,无错位现象 子页页面含图片字节不超过 60K, 全尺寸 banner 不超过 14K

5

使用了 CSS 对文字或表格、链接进行修饰 超级链接完善,无错误链接,少量空链接 首页和子页之间互相访问方便 站点文件夹中文件归类清晰,用英文或字母命名 站点管理 图片放在 images 文件夹中,动画放在 Flash 文件夹中 主页以 index.html 命名,其他页面根据内容命名 小组分工明确,任务完成良好 陈述者语言流畅、表述清晰,时间控制在 20 分钟内 小组陈述 使用 PPT 介绍本小组任务完成情况 陈述者讲述了制作过程中成员们的心得体会 陈述者讲述了对网站开发过程的理解 组员能给陈述内容进行补充 25 10

4 4 4 4 3 3 5 3 5 5 4 3

3 3 3 3 2 2 4 2 4 4 3 2

2 2 2 2 1 1 3 1 3 3 2 1

1 1 1 1 0 0 2 0 2 2 1 0





100

附 2: 《网页设计与制作》考核流程 1、 每小组选 1 名同学作为评审员; 2、 评审员集中坐在一起,为评审员的电脑中拷贝考核标准一份; 3、 给评审员每人一张白纸,用于打分; 4、 每小组派一名同学进行作品展示,并按照要求进行陈述; 5、 评审员为每小组打分; 6、 指定 1 名同学收集分数条, 指定 2 名同学进行总分; 计分方法是: 去掉最高分和最低分, 求其他分数的平均值。 7、 公示分数。 附 3: 《网页设计与制作》考核汇报 PPT 制作标准 1. 介绍小组成员,以及成员的分工; 2. 站点名称、主题、内容、建站目的等; 3. 讲述网站制作方法及介绍制作过程; 4. 网页上使用了哪些元素; 5. 演示各页面上的主要链接,页面间的跳转是否有效、是否方便; 6. 网站有何特色和创新之处? 7. 在制作网站的过程中遇到了什么困难?是如何解决的? 8. 网站还存在哪些不足之处是现在无法解决的? 9. 通过课程的学习,小组成员对网站开发是怎么理解的? 10. 对这门课程的这种学习方式有何建议? 11. 其他成员还有哪些需要补充说明的?

6

二、教学大纲
(1)理论教学模块: 网页设计概述 了解网页制作所需的元素; 了解基本术语; 了解网页的基本特征; 了解网页的基本构成元素; 了解网页设计的基本原则; 网站设计制作的基本流程 了解前期策划和内容组织; 了解网站页面的设计制作; 在网页设计中色彩搭配 了解网页色彩的基本知识 了解网页设计中的配色方法 网页界面设计 了解用户界面的要求 了解网页界面的实用性设计 了解网页的版式 (2)实践教学模块: Photoshop 网页设计基础 掌握 Photoshop 的基本操作方法; 掌握选区工具的使用; 掌握切片工具的使用; 掌握图像渲染工具的使用; 掌握 Photoshop 图层与色彩调整; 掌握 Photoshop 蒙版、路径的使用; Dreamweaver 使用基础 掌握 Dreamweaver 使用入门; 掌握 Dreamweaver 中建站与框架的使用; 掌握网页布局设计; Flash 动画设计基础 了解 Flash 动画设计的基本知识; 了解透明动画的使用; 网页开发实例 通过网页制作与网站设计综合实例掌握网站的制作方式; 通过网页制作与网站设计综合实例掌握网站的开发方式; 网站设计 了解网站设计各个阶段的目标; 了解网站设计各个阶段的问题; 网站管理 了解网站的稳定性; 掌握空间申请与网页上传

7

三、课程模块化教案
NO:1
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页制作中基本概念的学习 基本概念 授课时间 课型 讲授 授课教师 课时 2

了解网络中的基本概念,了解网页结构,熟悉网页制作步骤 学生分组、学习方法介绍 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 网页设计中的基本概念,网页制作步骤,设计师的认知规律 掌握网页设计中的界面的借鉴与创新方法 培养与同学分工合作、共同参与意识及团队精神

教学目标

能力点 职业素质 渗透点

教学方法 教学回顾 教学过程及 时间分配 组织教学 导入新课

讲授法、演示法、分组教学法 Photoshop 的基本操作方法 教学内容 采用的教学方法

安排学生整理座位,清点人数。 1、介绍本课程的性质,包括为什么开《网页设计与制作》 讲授法 课程?学习的内容有哪些?学习以后能达到什么目标? 与该课程相关的职业岗位有哪些?这些岗位在市场的需 求量如何?(说课) 注意: 说课的目的是告诉学生学了这门课后能做什么, 能 在什么岗位上用。 2、PPT1:要成为一名网页设计师,你要学会的知识:美 PPT 演示法 术(结构素描、光影素描、速写、设计素描、户外写 生) 、静态网页(DW、Flash、Photoshop、Fireworks) 、 动态网页(数据库、ASP.net 等) 、网页美工(三大构 成、美工配色、设计) (介绍网页设计师的国家标准) : 网页设计的重点是: 站点内容+界面=网页 3、PPT2:介绍几组重要概念 WWW、客户端/服务器、超文本文件、超媒体、HTML、 PPT 演示法
8

讲授新课

Http、浏览器、URL、网页和网站、静态网页和动态网页。 4、PPT3:网页界面的设计方法:借鉴和创新 第一步:采用抓图法进行优秀网页界面的搜索、分类与积 累 第二步:网页界面的分析:1、平面构成 2、色彩 第三步:网页界面的创新处理 第四步:网页效果图导出成网页,进行后期修饰 6、PPT4:网页的版式有哪些? 13 种典型网页版式的介绍 PPT 演示法

项目准备:

7、我们的教学方法介绍: 本课程将采用项目教学法、探究讨论法、分组实 训法等方法进行教学。将本课程分成七个大项目,其 分组教学 中包含 14 个具体任务。 具体教学方法是: 1、教师呈现 本次课的 任 务,并向学生 说明任务 的要求。对于比较复杂的任务,教师应告诉学生完成 任务的具体步骤。 2、学生接受任务后,小组内讨论,并形成文稿, 要求署名。 3、各小组派 1-2 人将本组讨论的结果在全班范 围内进行宣读、演示,并说明设计意图。 4、进行小组 间的评论 , 打分,教师进 行点评。 在这个过程中不必规定对或错。 5、小组根据 全班讨论 的 结果进行修改 ,形成最 后的作品。 8、分组 班级内自由分组,3 人为一小组,并指定扮演客户和 网页设计人员的学生。 9、每组在课后收集各种类型的网站界面,并进行分析, 下节课进行讲评。

分组 布置作业

学生学习 情况检测 课后分析

9

NO:2
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 各类典型站点赏析 网站分类与赏析 授课时间 课型 讲授与实训 授课教师 课时 2

网页项目的制作过程,网站的分析与赏析 使用 Dreamweaver 制作网页,了解网站的分类与网页的结构 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 认识网页元素、了解网站分类和网页结构 能制作一个简单的页面,能分析页面构成 培养与同学分工合作、共同参与意识及团队精神

教学目标

能力点 职业素质 渗透点

教学方法 教学回顾 教学过程及 时间分配 组织教学 情境呈现

案例教学法、讲授法、分组教学法、头脑风暴法 几个重要概念,如何借鉴网页设计界面 教学内容 采用的教学方法

安排学生整理座位,清点人数。 1、回顾上节课的内容:基本概念、网页设计的借鉴方 法、网页的版面设计等 2、PPT4:了解网页页面的结构。教师介绍 A. 标题 B. LOGO 标志 C. 页面尺寸 D. 页眉页脚 E. 导航栏 F. 文本 G. 图片 H. 多媒体 I. 超链接 分组教学法 案例教学法

分组讨论

3、打开几个页面,请学生谈谈哪些有哪些元素? 4、PPT4:网站是如何分类的? 根据技术分类:静态网站、动态网站、Flash 网站 根据服务方式分类:门户网站、普及型网站、办公事物 管理网站、电子商务类网站、媒体信息服务类网站和商
10

务管理网站等。 门户网站:信息量大,频道众多,功能全,访问量达。 页面设计以实用功能为主, 注重视觉元素的排布, 简洁、 清晰。 普及型网站:宣传自己,树立网上形象,内容全面; 办公型网站:内部网站、功能特定; 讲授法 根据单位性质分类:个人网站、企业网站和政府网站; 5、根据网站的分类,分组讨论哪些常见的网站,他们 分属哪种类型? 新浪、搜狐、雨晨视觉网站、电脑公司网站、淘宝网、 武汉大学网、教学管理网、 6、教师呈现几个典型的精品网站页面,引导学生进行 赏析。 可以从以下几个方面进行讨论: A. 框架结构 B. 色彩搭配 C. 文字颜色 D. 图片处理 E. 多媒体处理 F. 布局 G. 超级链接 7、介绍网页制作的一般步骤:网站需求分析、确定网 站主题、规划网站、收集素材、设计页面、网站发布、 网站推广等 8、了解网页制作工具 DW 在 Dreamweaver 中新建新 HTML 项目,制作一个 简单的个人主页页面。 要点:预先用 Photoshop 制作好了主页界面,现只 导入图片即可,添加网页标题 注意:在网页编辑之前先将网页保存,这是一个良 好的习惯,并且应该为文件取一个英文名称或汉语拼音 名称(不要命名为汉字名称) ,如果网页为主页可以命 名为 index.html 或者为 default.html。

小组讨论

集体讨论

头脑风暴法

学生练习

学生学习 情况检测 课后分析

11

NO:3
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网站规划 网站开发流程 授课时间 课型 讲授 授课教师 课时 2

熟悉网站建设的基本流程,网站项目规划 掌握网站策划、草图设计、站点结构设计和页面制作的方法 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 网站策划的方法、站点规划 能手绘页面草图、能用 PS 制作效果图 培养与同学分工合作、共同参与意识及团队精神

教学目标

能力点 职业素质 渗透点

教学方法 教学回顾 教学过程及 时间分配 组织教学 项目呈现

讲授法、演示法 页面元素有哪些?不同类型的站点特点?网站的色彩与布局 教学内容 采用的教学方法

任务分解

安排学生整理座位,清点人数。 1、复习回顾网站的建设流程:前期策划与内容组织、效 果图设计、网页编辑与动画设计、代码融合、发布测试。 讲授法 2、PPT1 获得项目:老师给学生安排网站的设计范围:课 程网站、院系网站、学习网站、专业网站等。 3、小组商量并确定网站的类型和名称。 4、PPT2 网站策划阶段: 教师讲解:策划的重要性、如何进行策划、学写策划 书; 注 意:网站设计人员应和客户充分沟通,了解客 户的需求,并写出策划书,主要任务是为网站安排功能模 块,形成网站的结构图。 签订合同:策划书写作完成后,客户认可并签字。 (给学生提供一份策划书案例:淮安旅行社) 网站定位:定义网站的位置 PPt 演示法 A、做什么类型的网站; B、网站的功能是什么(商品展示?会员功能?信息 搜索?) C、定位网站的主题和名称(主题多种多样,但选题 要是自己熟悉的内容, 目标不要太高; 名称简练、 有特色) D、定位网站的 CI 形象(标志 logo、标准色彩、标 准字体、 )
12

E、确定网站的栏目(网站的索引:新闻通过、网站 地图、论坛、下载、 ) F、站点目录结构规划: 1)不要将所有文件都存放在根目录下。 2)按栏目内容建立子目录。子目录的建立,首先按主 菜单栏目建立。 3)在每个主目录下都建立独立的 images 目录。 4)目录的层次不要太深,目录的层次建议不要超过 3 层。 5、PPT3 演示教师指导:如何规划网站的链接结构(树状 结构和星状结构) 。 第一步:学会看网页,从网页中获得网站的主要板块; 第二步:结合自己的站点题目,参考网上相似网站的内容 模块,设计本站点的主要板块。 教师的讲解方法: 网站主页 课堂总结 学生的设计方法: 网站主页 树形结构图 树形结构图

教师示范

6、学生根据教师的方法,进行讨论和设计。 7、教师检查各组学生的设计情况,并提出要求。 8、草图设计:根据策划书的要求,为每个网页绘制一个 草图,向客户勾画出所有需要展示的内容,然后将它详细 的描述交给美工人员,让美工根据草图设计效果图。 PPT4 教师展示:给学生呈现草图的例子,指导学生如 何绘制草图。 10、学生小组讨论:通过上网查阅,形成自己的规划图 11、教师总结:策划书的重点是把网站的栏目和导航内容 确定

学生学习 情况检测 课后分析

13

NO:4
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 用 PS 绘制首页的效果图
网站策划

授课时间 课型 讲授与实训

授课教师 课时 3

学会和客户沟通,掌握策划书的结构,能写策划书 与客户沟通,讲解策划需求,了解策划书内容,写策划书 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 策划书的要点、网站内容规划、小组作业 能书写策划书、能规划站点内容、能设计网页界面 培养与同学分工合作、共同参与意识及团队精神

教学目标

能力点 职业素质 渗透点

教学方法 教学回顾 教学过程及 时间分配 组织教学

讲授法、角色扮演法、分组讨论法 网站制作的流程 教学内容 采用的教学方法

分组,并安 排角色与任 务

1、安排学生整理座位,清点人数。 2、复习上节课的内容:如何写策划书,策划书的重点 是对网页页面的规划,导航内容的规划。 3、教师讲解:草图完成之后,要将草图变成效果图。 4、教师演示:如何使用 photoshop 制作效果图。 提供视频资料和相关文字资料,作为学生参考 5、小组展示效果图。 6、学生设计子页。

角色扮演法 小组讨论法

教师点评 课后作业

学生学习 情况检测 课后分析

14

NO:6
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页设计
网页的配色与 布局

授课时间 课型 讲授与实训

授课教师 课时 4

学习网页配色,在网页中布局 色彩的基本理论,配色原则,常用的配色方法,版式布局要点与方法 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 掌握色彩的基本理论、配色方法、布局理论和布局方法 能进行网页配色、能进行网页布局 培养与同学分工合作、共同参与意识及团队精神

教学目标

能力点 职业素质渗 透点

教学方法 教学回顾 教学过程及 时间分配 组织教学 情境设置

分组教学法、讲授法、讨论法、项目驱动法、演示法 网页素材的种类及其特点 教学内容 采用的教学方法

安排学生整理座位,清点人数。 1、以某书法家的个人网站界面为例,学习网站配色的方 分组教学法 法以及网站布局的技巧。 提出学习目标 给学生呈现网页界面,并分析界面的元素及主色调。 2、关键知识点 1-------色彩的基本理论 (1)RGB 颜色:红、绿、蓝 所有的颜色都是由这三色调和而来 (2)颜色三要素:
色相:颜色的相貌,如红色、橙色等。 饱和度:是指颜色的鲜艳程度,即颜色的色素含量。 亮度:颜色的明暗程度,是各色相中白色的含量。白色是明 度最高的色调,白色的明度为 100%,黑色的明度为 0%。

基本理论学 习

讲授法

(3)色环:一条从红到紫的色谱带。 (4)颜色的含义:见 ppt 色彩带有丰富的感情和含义,不通功能的网站应选 择不通的主色彩,色彩的搭配也是很重要的。 3、关键知识点 1--------网页配色的原则

15

网页配色是一件不容易的事,如果没有对颜色的认识 和视觉的把握能力,就无法做好网页配色。良好的配色 也是吸引网民眼球的重要因素。 (1)强调特色,个性鲜明

(2)总体协调,局部对比

(3)遵循艺术规则,合理搭配

4、关键知识点 3------网页的配色方法 (1)底色与图形要协调 (2)需要考虑整体色系(暖色和冷色的特征与区别) (3)善用色彩的调和 (4)善用色彩的对比 5、各小组客户方和设计人员进行讨论,定义本组网站的 主色调,以及可以用到的色彩,特别是在配色中应注意 的问题。 讨论完毕后,每组选一名同学进行陈述。 讨论法

16

6、关键知识点 4------网页版式布局的要点
(1)实用功能:主次区分,重点突出,导航清晰,布局合理; (2)审美功能:整体性、一致性,分割板块,对比合适。

7、关键知识点 5----网页布局类型的确定方法
在确定网页布局类型时,最重要的是网站的内容结构和性质。 网页内容:影响网页布局和导航结构; 内容性质:影响网页外观风格; 第一种方法:首先进行优秀网站的搜索,发现了好的布局后, 可以将网站中的内容修改成自己所需要的内容,同时观察网页的 变化,并根据要求修改网页; 教师演示方法 第二种方法:草绘出几个不通类型的模板,然后根据不通类型 网页布局的特点和视觉效果差异,选择最合适的布局类型。 教师呈现演示一个网站的四种参考方案

演示法

8、项目计划:现有某书法家的个人网站建设项目,布局 草图如下: 项目计划与 决策

项目实施

9、项目实施:网站页面设计与制作步骤(Photoshop 的 使用) 背景----参考线调整----插入图片和文字----效果图出 来。 10、各小组根据自己的网站规划,形成布局效果图 要求:留有页眉、banner、logo、图像框等空格 教师巡视指导 项目驱动法

项目初步完 成,并评价

11、各小组将效果图传送到教师机,进行班级展示与现 场评价。 12、小组利用课后时间进行修改。

课后任务

学生学习 情况检测 课后分析

17

NO:7
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页设计 主页效果图的 设计与绘制 授课时间 课型 讲授与实训 授课教师 课时 4

在 Photoshop 中制作主页的效果图 渐变工具使用,图像色调与色彩调整,图像混合 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 了解图层混合模式的功能、渐变工具、色彩与色调的调整 能够熟练使用渐变工具与填充工具以及属性的设置等; 能够理解直方图并通过色阶、对比度、颜色自动调整图像; 能够手工调整色阶、掌握曲线调整的技巧; 掌握图像色相与饱和度的调整技巧。 培养与同学分工合作、共同参与意识及团队精神

教学目标

能力点

职业素质 渗透点 教学方法 教学回顾 教学过程及 时间分配 组织教学

项目驱动法、讲授法、演示法、讨论法 制作 GIF 动画的方法、制作 banner 的方法 教学内容 采用的教学方法

安排学生整理座位,清点人数。 1、今天做一个书法家的个人网站首页效果图。个人网站 项目主要是通过网络媒体使本人知名度进一步提高。 网站 建设中主要包含个人简介、国画作品、书法作品、联系方 式等。

项目目标

项目驱动法

知识点呈现

2、关键知识点 1----渐变工具的使用法 3、关键知识点 2----色调与色彩的调整 色调不是指颜色的性质,而是对一幅绘画作品的整体 颜色的概括评价。色调是指一幅作品色彩外观的基本倾
18

讲授法

教师案例演 示

向。在明度、纯度、色相这三个要素中,某种因素起主导 作用,我们就称之为某种色调。一幅绘画作品虽然用了多 种颜色,但总体有一种倾向,是偏兰或偏红,是偏暖或偏 冷等等。这种颜色上的倾向就是一副绘画的色调。通常可 以从色相、明度、冷暖、纯度四个方面来定义一幅作品的 色调。 A.教师讲解“色阶”和“曲线”两个工具来调整色 调,两个工具功能相似。 B.亮度和对比度的调整 C.色相和饱和度的调整 3、关键知识点 3----图像混合方式的使用 网页设计效果图制作过程中混合图像时,涂层的混合 模式是最为有效的技术之一,能轻松制作出图像相互隐 藏、叠加,混融一体的效果。 Photoshop 将混合模式分为 6 大类 23 种混合形式。 教师通过几个实例讲解如何使用图像混合方式制作特 效。 4、教师通过项目实例讲解如何制作个人网站的主页效果 图。 注意:要求学生一定要根据前期手绘的草图布局制作 效果图。要求学生注重色彩的处理以及布局的合理性。 要求效果图简洁、明了、清晰、内容都包含在内。 5、任务布置:各小组内部讨论,在课后拿出一套主页的 设计方案: A.收集素材 B.对素材进行处理 C. photoshop 中制作效果图, 在 注意图层的综合使用。 D.一定保存为.psd 文件。

演示法

教师案例演 示

演示法

教师案例演 示

演示法

布置任务

小组讨论法 提问:为什么要保存为.psd 文件? 参考资料: 1、在显著位置放置主导航区域,导航区域的词应该简单 提问 明了。 2、尽量使链接更容易阅读,尽量用带下划线的文字便是 链接。用不同的颜色来表示链接状态。 3、使用用户关注的词语,避免冗余内容。不要使用成语、 行话,否则用户很难明白您在说什么。尽量少用命令式语 言。避免使用感叹号。为强调效果,要避免不恰当的使用 提问法

19

空格和停顿。 4、在一个独立的区域组织好公司的信息。在主页上建立 一个“关于我们”的链接,给用户一个公司的大致印象。如 果想要发布公司新闻,可在主页上放置一个专门的链接。 5、在显著的位置,以适当的大小显示公司名称或标志。 从用户观点出发,强调站点的价值,以及公司和主要竞争 对手的区别。强调最重要的任务或工作,以便用户对主页 有清晰的第一印象。 6、为每一个网站明确设计一个主页。设计主页时,要是 主页和站点上所有其它页面有明显的区别, 可以考虑使用 一个稍微不同的外表设计 (仍要和整个网站的视觉风格保 持一致) ,或者在导航部分,有一个显著的位置指示器。 界面上的差别和导航标志可保证用户在探索了部分子站 点并返回后,还能认识站点的起始位置。

学生学习 情况检测 课后分析

20

NO:8
学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页设计 子页效果图的设 计与绘制 授课时间 课型 讲授与实训 授课教师 课时 4

根据主页来设计子页,制作子页效果图 主页和子页的关系,子页特点,在 ps 中制作效果图 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点

教学目标

能力点 职业素质渗透点 培养与同学分工合作、共同参与意识及团队精神

教学方法 教学回顾 教学过程 及时间分 配 组织教学 回顾旧课 教学内容 采用的教学方法

安排学生整理座位,清点人数。 1、各小组展示主页设计效果图,并派一名同学进行说明。 作业点评法 2、教师评价,学生评价:优点和缺点 教师要确定每一小组的主页效果图 3、 教师给出今天的教学目标: 根据主页效果图来设计子页。 教师呈现一组主页和子页图片,并传给学生。 4、 任务布置: 小组讨论每一组主页和子页之间有什么联系, 可以从色彩、布局、结构等方面进行说明,讨论完毕后, 小组发言。 教师将各组发言内容写在黑板上, 将相同的内容写在一 分组讨论法 起,合并同类项。形成结论。 5、关键知识点------子页和首页的区别和联系 教师总结讲解在设计子页中注意的要点: 每一个子页都是用于显示指定的内容, 因此要留有较大 的空间放置这些内容。
21

呈现教学 目标

任务布置

讲授法

知识点解 说

版式:和主页明显不同,但有相似之处。为主要内容流出 较大空间,一般相同内容的子页要设计为相同的版式; 色彩:和主页相似; 内容:子页中的内容占主体,因此在一个子页中放置相似 的内容,图片和文字最好分别放置。这样方便更新内容; 导航:能方便回到主页,方便访问其他子页,位置和首页 类似,也可以单独安排子页内的导航菜单。 固定区

导航菜 单

可变内容区

固定区

6、项目实施 1----子页布局设计 在设计子页之前还要对子页进行布局设计。
无名山人作品集(白色) 大小 996×65 背景褐色 背景褐色

项目演示

国画效果 网站导航 文字白色 背景褐色 宽 160px

动画大小 996×185 书法家作品

宽 836px , 高 度 可 变 , 作 品 居 中 , 作 品 大 小 440x*440px,画布大小 480x*480px (文字白色,背景褐色)

演示法

版权信息(文字白色,背景褐色)高 100 px

设计好之后,就可以在 ps 中进行效果图制作了。 7、根据教师给出的子页案例以及本组的主页效果,小组讨 论,设计并制作出每个版块的子页效果图。 教师指导学生进行 PS 制作 分组实践 8、作品完成后,各小组展示成果,全班进行评价,教师总 结。 要点:从结构、色彩、形式等方面进行评价 9、各小组根据评价修改。可以在课后完成。 分组讨论法

评价与总 结

评价法

22

NO 8 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页制作 素材准备与 效果图切片 授课时间 课型 讲授与制作 授课教师 课时 8

建立新的站点,在 PS 中对效果图切片,并导入到 DW 中 新建站点,站点命名,PS 切片,切片的要点,处理切片,导入切片,网页布 局 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点

教学目标

能力点 职业素质 渗透点 培养与同学分工合作、共同参与意识及团队精神

教学方法 教学回顾 教学过程及 时间分配 组织教学 任务呈现 教学内容 安排学生整理座位,清点人数。 1、本节课主要内容是如何将效果图转换为网页文件。 2、知识讲解:网页中的素材 文字:网上下载或者自己写 图片:网上下载后经过适当处理 动画:自己制作或者下载 Logo:自己设计(P33) Banner:自己设计 网站 Logo 设计规范:Logo 的应用一直是 CIS 导入的基础和 最直接的表现形式,网络标志的设计尤其如此。 广告形象区域(Banner)设计:Banner 的英文翻译有网幅广告 的含义,指网幅广告、旗帜广告、 横幅广告。 3、学生自己设计网页的 logo 与 banner。 练习书本上的知识“淮信科技”logo、 “淮安科技”logo、网 站页眉设计。 4、网站效果图转变成网页结构图 PPT2 讲解为什么要切片? ? 切片后,网页页面变成小片,加快了网页打开速度 讲授法 教学方法

知识点讲解

演示法

23

? 获得网页设计打表格的数据 步骤:做设计图----切图----获得表格数据 5、教师演示切片的步骤: ? 把一张大图裁切成多张小图 ? 在 fireworks 中打开图片 ? 选择切片工具(切成矩形工具) ? 将图片分成 16 张小图 ? 有两种情况:导出所有图片和导出单张图片 ? 导出单张图片方法: 选择一个切片---右键选择导出所 选切片----保存在桌面 ? 导出所有图片方法:右上角选择“快速导出按 钮”---DW---HTML(设置文件名、选择类型、导出切 片) ? 查看图片,解释文件名的规律 ? 使用多边形切片工具: ? 选择多边形切片工具 ? 导出切片:还是一张矩形图像 6、切片的要点: ? 先切大图,后切小图 ? 将素材和内容区分开裁切 ? 有文字的部分先隐藏文字再切 3、关键知识点 2----切片的导出
切片(Slice)就是将一幅大图像分割为一些小的图像切片,然后在 网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼 接起来,成为一幅完整的图像。这样做可以减低图像的大小,减少网页 的下载时间,并且能创造交互的效果,如翻转图像等,还能将图像的一 些区域用 html 来代替。Fireworks 在网页切片制作方面有很强的优势。 A.创建矩形切片 B.创建多边形切片 C.编辑切片 D.命名切片:自动命名切片文件、自定义命名切片文件和更改默 认的自动命名惯例 E.导出切片:执行“文件”→“存储为 Web 和设备所用格式”命 令 。

资料补充

教师说明:切片的技巧,另附页面

切片补充资料:
切片前,先要仔细对设计进行分析,考虑要因设计制宜;切片时, 可不断放大缩小设计观察精准度,可以根据辅助线进行切片;切片后, 要对导出的切片进行审核是否符合要求, 比如大小颜色图片质量透明背

24

景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。 1、 输出背景 观察背景:如果是单一颜色的,则不需要切片,网页制作的时候设 置背景 RGB 即可. 如果是有规律的图片,那么按最小单位切一条几个像素的切片,单 独优化输出, 制作时不是插入图片而是作为背景图片可以横向平铺达到 设计效果. (为什么不是全部切片完了再输出呢,因为,背景图片上一般还 会叠加其他的图片,如 LOGO,就要输出透明背景的前景图片;有时切 片会有重叠现象,所以采用分别输出的方法能达到比较好的效果.) 2、前景图片(包括 网站标识,特殊字体的标题,导航,中英文切换的 文字连接,特殊的小图标,特殊的边角) 观察背景上的网站标识: 如果直接插入切片输出会连带背景图案一 起输出, 那样以后制作也面的时候可能标识部分的图和背景对接不好产 生错位.切片的时候隐藏背景单独优化输出.如果一张网页里面有重复用

教学视频学 习

到的一张图,只需要切一个一次就可以了. 3、线:如果是直角的单色的边框,可以表格边框设置,就不需要切片; 如果是不规则角(圆角,图案),可以单单切下框的角,然后观察剩余的 线:按照如切片背景图案的方法进行切片.

视频教学法

学生实践练 习

4、切片命名:切片单独输出,可以按照其用途重新命名,如背景可以 为 MAIN_BG.GIF,网站标识为 LOGO.GIF 等,切记不要用中文命名, 任务驱动法 那样在制作的时候插入图片的图片名可能就是一大串乱码. 5 切片保存: 首页和内容页的切片可以放在同一个站点下的 IMAGE 文

课后作业

件夹下面,但是如果素材图片多时,最好另起一个文件夹单独保存,以 便制作和修改的方便. FW 切片导出时设置为"只要切片输出",如果按照"HTML 和图像"输出 会有很多的废代码,所以手动设置布局比较理想.

4、教师放一段切片的视频,供学生学习。要求学生认真看, 认真记笔记。 教师随时讲解要点 5、项目实践 今天主要以“主页”为例,进行切片练习。每个小组的每 个组员都要求选择一张效果图进行练习。 PS 和 DW 的综合运用。教师巡视指导。 6、课后作业: 各小组组长在课后安排成员完成对子页的切片任务。并收 集组员在进行网页切片的过程中遇到的难点问题,留待下节 课讨论。 下节课检查。

25

NO 9 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页制作---多媒体元素 Dreamweaver 基础 1 授课时间 课型 用表格布局,用单元格布局 插入表格,调整表格属性,绘制布局表格和布局单元格 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室
掌握表格的插入方法

授课教师 讲授与实训 课时 4

知识点 教学目标 能力点 职业素质 渗透点 教学方法 教学回顾 教学过程及 时间分配 组织教学 复习上节课 内容

掌握表格的属性设置 掌握利用表格制作 1 像素细线

培养与同学分工合作、共同参与意识及团队精神

教学内容

采用的教学方法

安排学生整理座位,清点人数。 1、检查上节课布置的作业: ? 网页效果图 jpg 格式和 psd 格式 ? 借鉴网站的效果图 ? 实训指导书的填写情况 2、Dreamweaver 基础知识 1:认识软件界面 菜单栏、工具栏、属性面板、面板组、编辑视图方式 3、Dreamweaver 基础知识 2:创建本地站点: 教师演示, 学生练习:建立一个站点。

分组讨论法

开始新课

知识点讲解

4、Dreamweaver 基础知识 3:创建网站的文件目录结构 讲授法 好处:其一是制作网页时方便制作链接;其二是让制作 者保持清晰的设计思路 一级目录的创建:一般有 about、error、images、media、 styles 等文件夹,或者其他你觉得需要的文件夹。 二级目录的创建: 在一级目录的文件夹中建立更小分类 的文件夹,如在 images 中建立 logos、banners、buttons 等。
26

教师演示项 目

目录结构规范 ? 站点根目录一般只放置 index.htm 以及其他必须的系 统文件,不要将所有网页都放置在根目录下; ? 每个一级栏目创建一个独立的目录; ? 根目录下的 images 用于存放各页面都使用的公用图 片,子目录下的 images 目录存放各栏目的私有图片; ? 所有 CSS 文件存放在 styles 文件夹中; 项目演示法 ? 目录不要太深,建议不超过 3 层; ? 不使用过长的目录名。 学生练习:建立站点中的目录结构 5、Dreamweaver 基础知识 4:新建网页,即 html 文件。 完成之后要修改文件名。 提示:首页一般命名为 index.htm。 6、Dreamweaver 基础知识 5:对文件和文件夹的操作 教师演示:移动、修改、删除、重命名 提示 1:如果被修改的文件或文件夹和其他文件或文件夹 有关联, 系统会要求用户自动更新链接, 否则会出现断链。 提示 2:文件或文件夹的命名规范:不使用中文名、用小 写、 不使用特殊字符、 不推荐拼音命名、 合理使用斜划线。 常见文件名头部 头部名称 Bnner Logo Button Pic 文件用途 放置在页面顶部的广告 标志性图片 带有链接的按钮 照片

学生项目实 践

作品评价

7、Dreamweaver 基础知识 6:使用文本 教师演示操作:设置样式、选择字体、对其方式、字符缩 任务驱动法 进、设置颜色、设置换行、首行缩进、使用列表。 知识点提示: ? 字体列表中每行课容纳多种字体,以逗号隔开,好处 是能防止所选择字体不存在,后面的是替代字体;因 此,建议尽量使用系统默认安装的字体。如果确实需 要,则先把文字制作成图像,再插入网页; ? 网页中的字体有两种方法定义,一种是数值,一种是 文字。一般网页中字体使用单位点数(pt) ,因为用 像素(px)定义的文本会随着分辨率变化而变化。 ? 网页中的正文一般使用 9pt,一般的标题文本使用 12pt,16pt,18pt; ? 颜色代码由三部分组成,即#ff ff ff,分别为红、绿、 蓝。
27

? 网页中的换行有三种情况:自动换行、段落换行、换 字符换行。段落换行会出现一个空行,如果不希望出 现空行,可以按 shift+enter 换行; ? 设置首行缩进 2 个字符时, 可以将工具栏选为 “文本” —“字符” --“不换行字符” 。不使用“空格键”

来是因为浏览器会忽略代码中的空格。 ? 列表分为无序列表(就是项目符号列表)和有序列表 (就是编号列表) 。如果要修改列表的外观,可以先 “右键”点击列表内容,在弹出的菜单中选“编辑标 签”----常规----类型---修改。 学生练习:新建一个网页,在上面写三短文字,文字使用 12pt;每段文字首行缩进两个字符,段间距不能有空格; 在第三段后做一个 4 行的列表 (可以是无序的或有序的) , 但用 I 作为标签。三段文字分别使用三种不同的颜色。

28

NO 10 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页制作-----表格 1 Dreamweaver 基础 2 授课时间 课型 用表格布局,用单元格布局 插入表格,调整表格属性,绘制布局表格和布局单元格 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 教学目标 能力点 职业素质 渗透点 教学方法 教学回顾 教学过程及 时间分配 组织教学 教学内容 采用的教学方法 培养与同学分工合作、共同参与意识及团队精神
图像、Flash 动画、背景音乐

授课教师 讲授与实训 课时 4

知识点讲解

1、Dreamweaver 基础知识 7:插入图像 教师演示方法和步骤 注意要点: 分组讨论法 ? 如果图像在站点外, 软件会提示将图像复制到站点内 保存; ? 改变图像的大小:设置文本框、拖动 ? 设置图像替代文本:当鼠标指针放在图片上时,会出 现文本提示。这就是替代文本。 ? 图片和文本的对其方式: 左对齐、 右对其、 图像边距; 学生练习:输入一段文字,并插入一个图像;文字和 图像水平排列,图像上有文字提示。图文之间相隔 20 像 素。 2、Dreamweaver 基础知识 8:Flash 动画、插入 Flash 文 字、Flash 按钮等元素。 教师演示如何插入动画,如何制作文字和按钮 学生练习:添加动画元素 提示信息: Flash 动画的后缀名是 swf。 如何防止在添加了 Flash 原件之后出现提示信息。可以在

学生练习

讲授法

学生练习

29

代码最前面加上:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0046)http://www.net130.com/tutorial/ciscojc/021.htm -->

3、Dreamweaver 基础知识 9:用 CSS 设定网页属性 ? 修改页面属性: “修改”菜单---“页面属性” ,设置: 项目演示法 ? 页面字体:指定默认字体 ? 文本颜色:指定默认文本颜色 ? 背景颜色:指定网页背景颜色 ? 背景图像:指定背景图像 ? 页边距:网页内容和浏览器之间的空白区域 ? 链接方式:为网页中的超级链接元素设置属性 ? 标题:单独设置网页中标题的属性。 ? 跟踪图像:用于专业网站建设中,作为网页布局的参 照物。不会出现在浏览器中,可以不删除它。 4、Dreamweaver 基础知识 10:使用表格 ? 插入表格 教师演示,将切片后得到的图片在表格中填充。 ?边框粗细:指定表格边框的宽度(单位为像素) ?单元格边距:单元格边框和内容之间的像素数 ?单元格间距:相邻单元格之间的像素数 ?如果不显示表格边框,必须设置为 0;不显示表格 中的边距和间距,必须设置为 0. ? 选择表格与调整表格属性 ?表格的宽度:建议直接输入数值(单位可选像素或 百分比) ?边框:用于布局的表格边框都设为 0。 ?填充:单元格中的对象与表格边框间的距离; ?间距:两个单元格之间的距离; ?表格的 “对齐” 属性可以设置表格的水平对其方式; 任务驱动法 ?在表格布局时,可以设置表格“居中” 。 ?背景颜色、边框颜色和背景图像:教师演示 学生练习:利用表格的单元格填充留空白 学生练习

教师演示

?日常行政工作[综合办公室] ?全校房地产产权管理[综合办公室] ?公用房分配和管理[房地产管理办公室] ?家属用房分配和管理[房地产管理办公室] ?教工集体宿舍分配与管理[房地产管理办公室]
1 NO 11

学习领域

网页制作-----表格 2
30

学习单元 授课班级 主要行为 部分行为 目标群体 教学环境

Dreamweaver 基础 2

授课时间 课型 讲授与实训

授课教师 课时 4

用表格布局,用单元格布局 插入表格,调整表格属性,绘制布局表格和布局单元格 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点
图像、Flash 动画、背景音乐

教学目标

能力点 职业素质渗透点 培养与同学分工合作、共同参与意识及团队精神

教学方法 教学回顾 教学过程 及时间分 配 复习 教师演示 开始新课 教学内容 1、点名 2、回顾上节课的内容:添加表格、表格属性设置 3、表格和单元格:如何选择表格或者单元格 选择“Table”或者“tr” “td” 能快速准确地选择表格或单元格。 4、Dreamweaver 基础知识 11:使用表格 ? 调整表格的行列结构和单元格属性 ?表格的行列删减: ?表格的拆分与合并(注意:排版时,插入的行列可以多一 点,然后合并。拆分比较麻烦。 ) ? 嵌套表格:网页排版的帮手 ? 大表格控制网页整体的布局,一般使用像素值固定宽 度;嵌套表格一般使用百分不设置宽和高,防止和总表格 发生冲突。 采用的教学 方法

分组讨论法

知识点讲 解

讲授法

教师演示

? 教师示范: 1、让两个表格并排 先插入一个 1 行 2 列的表格, 然后在每个单元格中嵌套新表 格
31

项目演示法

项目 学生制作:四个表格成品字形。 2、利用嵌套表格留空白 先插入一个表格,再在其中出入一个表格 学生制作:标题和一个内容列表 ? 格式化表格:利用模板快速设置表格的外观 方法:选择表格----命令---格式化表格 ? 表格排序:对表格中的数据进行排序 方法:选择表格----命令---排序表格 ? 制作细边框表格 第一种步骤:插入 1 行 1 列,宽 300px,高 100px 的表格,背景 设为黑色,边框 0,填充 0,间距 1----选择单元格,背景设为网 页颜色---ok 第二种步骤:插入 1 行 1 列,宽 300px,高 100px 的表格---表格 背景设为黑色,边框 0,填充 1,间距 0-----嵌套一个新表格, 背景白色,宽 100%,高稍大,填充 0,间距 0------ok 两者对比:教师引导,学生归纳总结。 提示:前者为间距的颜色,后者为内容和边框之间的距离的颜 色 学生练习 1:制作两个并列的细边框表格(颜色不一样) 学生练习 2:制作细线的导航条(利用间距设置为 1)

教师演示

?

学生练习

制作水平细线 步骤:插入 1 行 1 列,宽 400 像素表格,背景黑色----创建间隔 图像(编辑—首选参数—布局模式—间隔图像—任选图像—创 建为 spacer.gif)----插入间隔图像-----确定 (知识点:表格背景决定了细线的颜色) 学生练习:制作三行文字间的细水平线

任务驱动法

教师演示

?
学生练习

制作垂直细线 步骤:插入 1 行 3 列表格----左右背景蓝色,中间为浅色---设置 好高度---左右侧各插入间隔图像,宽度设为 1 像素---确定。 学生练习:制作标题和内容列表,左右是垂直竖线

NO 12 学习领域 网页制作

32

学习单元 授课班级 主要行为 部分行为 目标群体 教学环境

布局表格和布 局单元格

授课时间 课型 讲授与实训

授课教师 课时 4

用表格布局,用单元格布局 插入表格,调整表格属性,绘制布局表格和布局单元格 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点
掌握百分比布局的技巧

教学目标

能力点 职业素质 渗透点 培养与同学分工合作、共同参与意识及团队精神

教学方法 教学回顾 教学过程及 时间分配 教学内容 1、点名 2、回顾上节课的内容:表格插入、表格属性、嵌套表格、 细边框表格的制作 3、知识点一:利用表格进行布局 教师讲解: (以湖州高职教育网为例) (1) 认识网页的结构:头部、导航条、banner 条、正 文部分、版权部分 (2) 分别设计各个部分的布局,利用嵌套表格、细边 框、细线等方式完成。 学生练习:将湖州高职教育网效果图转换成网页结构文 件。 4、知识点二:布局视图排版 教师讲解: ? 布局视图 ? 绘制布局表格 注意点: 由于浏览器显示内容时是下载完整个表格后才显示 此表格中的所有内容,因此应尽可能将表格活分为多个 独立的表格,这样可以加快显示速度,而不应将所有的 页面内容都放置在一个大表格中。 A、表格下方的数字是宽度值 B、空白网页上绘制的表格会自动调整到网页顶端; C、 如果表格之间的间距小于 8 个像素, 会自动吸附。ALT ( 取消) D、绘制外部表格时应绘制完整的宽度,即网页的最大宽
33

采用的教学方法

度。 ? 绘制布局单元格:在布局表格中进行 注意:按住 ctrl 键,可连续绘制多个单元格;按 ALT 键 可以禁止表格靠齐。 ? 嵌套布局表格:在表格中布局表格 注意:在布局表格里面绘制布局单元格,布局单元格 不能在绘制布局单元格和布局表格, 但布局表格既可以绘 制布局单元格也可以嵌套布局表格 ? 标尺和网格:查看—标尺—显示 ? 调整布局表格和布局单元格 A、先选择表格,然后可在属性中调整表格大小; B、拖动边框也可以调整; C、外层表格不能移动,嵌套在其他布局表格中的布局表 格能移动; 注意:如果要对表格或单元格进行进一步的调整,最好 在绘制完了布局表格和单元格后,把视图切换会“标准 视图” ,在标准视图里处理表格,因为在布局视图里,有 时绘制单元格时一不小心会弄得表格比较混乱。 注意问题: A、在一个空文档中绘制表格时,表格总能自动捕捉到页 面窗口上的左上角 B、布局单元格都包含在布局表格中,布局单元格不能重 叠或交叉;不能在表格的右边画表格 C、 如果页面已经存在内容, 布局表格只能在内容的下方, 也就是说表格不能是平行的,不能在布局表格的右边再 画布局表格 学生练习:学生使用“布局表格和布局单元格”的方法 对湖州高职教育网进行重新布局 5、知识点三:子页的制作 教师:讲解子页的结构、子页和首页的联系。 布置作业:小组设计一个子页的模板。

34

NO13 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 网页制作 CSS 样式表设计 授课时间 课型 用 Css 样式表修饰网页效果 修饰背景、文字、超级链接 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 教学目标 能力点 职业素质 渗透点 教学方法 教学回顾 教学过程及 时间分配 组织教学 教学内容 采用的教学方 法 培养与同学分工合作、共同参与意识及团队精神 掌握 CSS 的基本理论 掌握 CSS 的相关属性的设置方法 掌握 CSS 的应用方法 讲授与实训 授课教师 课时 4

安排学生整理座位,清点人数。 1、复习检查:各小组的首页完成情况。将好的进行展示, 提出表扬。 提问法 2、针对各小组在主页制作中的问题进行集中解决。

任务展示 提出问题

呈现教学目 标

3、给学生展示一张页面文件(从一个小组中选择) ,并请各 组同学讨论在这一张页面中出现了哪些问题。 问题提示: (1)背景色单调,网页顶端有空隙。 (2)表格中的文字大小不合适,文字之间行间距太小。 讲授法 (3)图片的样式不好看。 4、提出本节课的学习内容: 使用 CSS 的优点: (1)首先就是能保持风格的一致性。 (2)CSS 样式表可以共享,便于调整修改。 3、关键知识点 1----CSS 的概念 CSS 就是“层叠样式表”,简称样式表,它是一种制作

知识点讲解

35

学生实践

项目演示

项目实践

网页的技术,CSS 可以对页面中的文本、段落、图像、页面 背景等实现更加精确的控制, 而且, 通过修改 CSS 样式表文 件就可以修改整个站点的风格。 A.CSS 样式的分类: css 的三种类型及其含义: 类是用户完全自定义,针对任何元素;定义样式后必须 在需要用的地方应用它,否则不起作用。 标签是对原有的 html 样式进行重新定义, 即修改原有的 样式。它不需要专门“应用” ,会自动更改。 高级是针对超级链接进行设置。 B.存放样式的位置 其一是放在每个页面的头部,即 head 和/head 之间,只 作用于一个页面。 其二是作为外部文件*.css, 可以将网页和样式表链接起 来,也可以分离。 学生实践法 C.CSS 选择器样式:link(正常链接状态) 、active(点 击鼠标左键状态) 、visited(点击链接后的状态) 、hover (鼠标放在链接上的文字效果) 演示法 4、关键知识点 2----创建新的样式表 “窗口”—“CSS 样式” ,界面右边出现 CSS 样式面板, 可以在这里新建、附加、编辑和删除样式表。 分组实践法 5、关键知识点 3----CSS 样式表规则定义 教师演示类型、背景、区块、方框、边框、列表等规则 的定义方法。 文字样式: A.名称前以“.”开头; B. “定义在”的选择中, “新建样式表”是指重新建立 一个 css 文件保存该样式,如果选择已经存在的样式名称, 则将新建的样式保存到已有的样式表中, “仅对该文档”是 将新的样式表直接写到该网页中。 背景样式:可以精确固定背景图像的位置。 教师在讲解此节是,可以先为一个表格中直接插入背景 图像,在利用 CSS 添加背景样式,并通过修改位置的值进 行微调。两者进行对比 区块: 对一块被选择的内容提供样式表, 如多个单元格。 方框:用于设置图片、表格以及空白区域的属性。没有 属性面板方便,故少用。 边框:设置多种边框的组合。 列表:设置项目符合的样式或位置。 6、学生练习 CSS 样式表的定义规则 教师提供几个页面文件供学生练习

36

7、综合项目的演示:针对刚才给学生展示的网页中发现的 几个问题进行修改。 教师演示过程,并讲解。 8、小组讨论:如何使用 CSS 样式表来优化本组网站中的网 页。 A.组内讨论,制定好每个网页中可以优化的目标; B.分配好任务及完成时间; C.任务完成。

37

NO14 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 教学目标 能力点 职业素质渗透 点 教学方法 教学回顾 教学过程及 时间分配 组织教学 导入新课 教学内容 采用的教学方法 培养与同学分工合作、共同参与意识及团队精神 掌握创建模板的方法; 掌握应用模板的方法; 网页制作 库和模板 授课时间 课型 讲授与实训 授课教师 课时 4

知识点讲授

1、安排学生整理座位,清点人数。 2、为什么要使用库和模板:如果多张页面都有相同的栏 目或者区域。 我们可以将相同的栏目或者相同的区域制作 成一个固定板块,或者公用板块。随用随取。 3、关键知识点一:创建库---将建好的网页转换为库文件 教师演示:制作一个网页头文件 top,将其保存到库中, 讲授法 命名为 top。 步骤:窗口---资源---库面板---打开网页头文件----修改--库---增加对象到库。 注意:如果原网页文件中使用了 css 样式表,那么在新的 网页中也要应用该样式表,使其格式保持一致。 学生练习:打开本小组的网站“主页”文件,将头文件、 导航文件、版权页,以及其他需要公用的板块设置成库文 件。 4、关键知识点二:插入库文件----在新的页面中使用库文 件 教师演示:新建一个子页面,命名为“子页 1”-----库--选择 top 文件----“插入”按钮。 注意:为了保证插入的库文件能出现在指定的位置,请先 用表格进行布局。 学生练习:利用库文件快速制作子页面。

38

教师用演示 案例

5、关键知识点三:修改库文件-----对库文件进行修改 在“库”面板中双击库 top 文件,该文件出现在编辑窗口 中,教师对 top 文件进行修改。保存----更新库项目 学生练习:对库文件进行适当修改。 6、关键知识点四:创建模板 概念: 如果在相同的栏目中, 页面大部分内容都是相同的, 只有一个区域是不同的, 可以将相同的页面部分整体作为 一个对象进行保存,只让部分区域可以进行修改。 教师演示:打开一个页面文件,该文件已经完成了头部分 和左边的菜单部分,右边为空白。-----文件----另存为模板 ---输入模板名称---进入模板的编辑状态----在右侧空白区 域点击鼠标右键-----模板---新建可编辑区域---为可编辑区 域命名(可以为多个区域设置可编辑区域) 学生练习:打开一张页面文件,适当修改后设置为模板文 件,并设置可编辑区域。 7、关键知识点五:利用模板创建网页 教师演示:打开一张已经建好的页面文件, 8、为了提高制作子页的效率,同时也能使子页保持相同 的风格,我们今天学习一种方法:框架

演示法

学生实践

任务驱动法

作品评价 另一个项目 讲授

9、关键知识点 1----创建预定义框架
新建一个空白文档,执行“查看”→“可视化助理”→“框架边框” 命令,在文档窗口中显示边框,将光标移动到边框,其会变成双向 箭头形状。用光标左键拖动文档窗口中的框架边框,将其拖动到所 需的位置上,释放光标左键,即可创建框架集。

评价法

讲授法

10、关键知识点 2----创建自定义框架 新的知识点 说明
(1)创建自定义框架的方法是:执行“文件”→“新建”命令,在 弹出的“新建文档”对话框中选择“示例页”→“框架集”选项, 在“示例 页列表中”根据需要进行选择,单击“创建”按钮,即可创建框架集。 (2) “修改”—“框架页”—拆分框架

教师演示

4、关键知识点 3---框架的多种选择方法
(1)执行“窗口”→“框架”命令,在打开的“框架”面板中单击需 要选择的框架,则框架集的边界就会被虚线包围。

案例演示法

学生实践 评价

(2)按住<Alt>键,再单击文档窗口中需要选择的框架,即可 选中框架。

分组练习法 评价法

5、关键知识点 4—设置框架和框架集的属性 打开框架面板:窗口----框架---右边可选框架

39

6、使用框架集给学生演示制作网页: 首先准备 4 个目标网页文件,然后制作框架结构,并 给框架的各部分命名, 然后制作各个部分。

功能型网站多采用框架结构,采用“上方固定、左侧嵌套”的框架布 局结构。网页布局将上方框架存放网站的页眉,包括网站名称与网 站地址,左侧部分包括“课堂学习”、“实验实训素材下载”、“学生答 疑”、“学习交流”、“电子作业批改”、“作业上传”、“公告栏”和教师 的工作模块, 右侧主窗口包括“实用教程”、 “课外提高”和“视频教程” 等模块。

教师演示步骤 A.根据草图,选择框架形式 B.建立框架 C.给每个框架中添加页面 D.保存 特别提醒:框架之间要建立超级连接,因此,教师可 以给学生讲讲关于“如何建立超连接”的知识点。 7、小组实践练习
各小组认真讨论后,选择 1-2 个子页作为框架页面实践。由组 长分工,先规划好框架集的内容,然后分工完成各个页面,最后集 中到一个框架中。建议做好超级连接。

8、各小组展示作品,教师评价,学生评价。

40

NO 15 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 教学目标 能力点 职业素质渗透 点 教学方法 教学回顾 教学过程及 时间分配 组织教学 导入新课 教学内容 采用的教学方法 培养与同学分工合作、共同参与意识及团队精神 掌握创建超级链接的方法; 掌握应用 css 优化超级链接的方法; 网页制作 超级链接与 css 设 计 授课时间 课型 讲授与实训 授课教师 课时 4

安排学生整理座位,清点人数。 1、任务模拟:现有一个网站的各个页面已经做好,但是, 各页面之间还没有建立起联系, 也就是说页面间的跳转还 没有实现。利用超级连接功能就能实现这一点。 教师呈现一个网站,并演示说明。 讲授法 2、关键知识点 1----文件地址
绝对地址:指某个文件在网络上的完整路径,包括协议、WEB 服务器、路径和文件名等,简单的说,如果在浏览器的地址栏中输 入就能访问的文件地址就是绝对地址。如:http://www.sina.com.cn/ 就是绝对地址。 但是我们不建议使用绝对地址。 相对地址:文件相对地址和目录相对地址

知识点讲授

3、关键知识点 2----外部连接 链接载体一般是文本获图片,注意链接目标的选择。 教师演示 4、关键知识点 3----内部连接
41

选择文件(指站点中的文件)的方式以及拖动定位图 标的方式 教师演示 教师用演示 案例 5、关键知识点 4---Email 连接 mailto:feedback@163.com 教师演示 6、关键知识点 5----锚点连接和热点连接 如果某个网页中的内容很多,页面较长,使用锚点链 接可以方便用户浏览网页内容。 A.添加锚点; B.创建到锚点的链接 教师演示 热点链接就是利用 HTML 语言在图片上定义一块形状 的区域,然后给这些区域加上链接。 教师演示 7、教师给学生提供案例文件包,学生练习超级链接的添 加。 任务指导: A.在有些需要链接页面但暂时没有建立链接的地方 可以使用空链接; B.最好将所有页面都放在站点以后再进行链接; 演示法

学生实践

任务驱动法

作品评价 另一个项目 讲授

评价法 9.关键知识点 6:css 中的超级链接 教师给学生展示用了 css 的网页链接和没有用 css 的 网页链接,看看其区别。 讲授法 教师制作给学生看:这里是一个完整的 css 样式表。 包括 body、table、titlefont、footfont、两种超级链接等。 将文件包发给学生, 让学生自己做一做。 教师检查效 果。 项目呈现:现建设“**职业技术学院高职高专教学工作水 平评估网” 网站主要包括 , “组织机构” 、 “评估文件” 、 “评 建动态” 、 “迎评简报” 、 “评建知识” 、 “他山之石” 等模块, 网站中应包含“学院主页”与“教务在线”链接,网站风 案例演示法 格要简介、清爽。 将网页界面给学生展示。 分组练习法 10、关键知识点 7----HTML 语言简介 HTML 是 用来 描 述超文 本 文档 的标 记语 言。它 由 评价法 HTML 标记和用来表示信息的文本组成。使用 HTML 语 言描述的文件,需要通过浏览器显示效果。

新的知识点 说明

教师演示

学生实践 评价

42

所有的网页都可以以 HTML 格式的文件为基础,再加 上一些其他语言(如 Javascript、VBScript 等)编写的代 码。这些文件除了一些基本的文字外还包含一些标记,这 些标记均由“<”和“>”符号以及一个字符串组成。 而浏览器 的功能是对这些标记进行解释,显示出文字、图像、动画 并播放声音等。 11、关键知识点 8----HTML 的基本结构 (1)HTML 概述与编写方法 HTML 文件是分层组织的,最外层是<html>标记,在 此标记内一般有两层:head 层(文档头)和 body 层(文档 体)。这两部分内容都包含在<html>和</html>之间 。在这 些标记内可以嵌套其他标记。 一般情况下文档头存储网页 的信息,比如网页标题存放在<title>标记中,网页关键字 存放在<meta>标记中。文档体是网页内容的显示部分。主 要由表格标记、段落标记、图像标记等组成。 教师演示 Html 建网的效果 (2)HTML 标记 A.单标记 <br>换行标记, <hr>插入水平线标记 B.双标记 <标记>内容</标记> C.标记属性 <标记名称 属性 1=属性值 1 属性 2=属性值 2 属性 3=属性值 3?> 12、关键知识点 9-----HTML 的常用标记 基本标记: (1)html 标记 (2)head 标记 (3)title 标记(4)body 标记 网页布局与文字设计: (1)标题 (2)换行 (3)段 落标记 (4)文字的字体和样式 列表: (1)无序号列表 (2)序号列表 TABLE 表格 文件之间的链接:<a href="资源地址">链接文字</a> 插入图像: href ="资源地址"><img src="图像文件地 <a 址"></a> 播放音频:<a href ="音乐地址">乐曲名</a> 13、项目演示:网站的整体风格以橙色或天蓝色的渐变为 背景,主体颜色以橙色或天蓝色和黑色、白色、 灰色搭配,局部使用草绿色。网站采用虚线对各个模块实 现划分,使整个网站格调清晰、明朗。 教师将网站结构图呈现给学生。 教师用 PPT 演示制作 Html 网页的步骤。 14、教师给学生提供一个页面效果图“淮安信息职业技术

43

学院教学工作评建网.psd” 要求学生用学到的方法制作一 , 个 Html 网页。P125. 教师先教基本步骤,然后学生练习制作。 基本原理:一个一个部分分别制作,没完成一个部分 要在代码中做标识,使代码具有可读性。 15、检查学生练习情况。 16、

NO 14 学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境 制作超级连接 了解绝对地址和相对地址,制作外部连接、内部连接、E-mail 连接、锚点连 接、热点连接 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点 教学目标 能力点 职业素质 渗透点 教学方法 教学回顾 教学过程及 时间分配 教学内容 采用的教学方法 培养与同学分工合作、共同参与意识及团队精神 网页制作 CSS+DIV 授课时间 课型 讲授与实训 授课教师 课时 2

44

组织教学 任务呈现

安排学生整理座位,清点人数。

知识点讲解

讲授法

教师演示制 作过程

演示法

教师提供任 务包 学生练习

任务驱动法

45

项目实践

学习领域 学习单元 授课班级 主要行为 部分行为 目标群体 教学环境

网页制作 编写 HTML 代码 授课时间 课型 编写 HTML 代码 看 Html 的结构,记常用的 Html 标记,编写简单的 Html 代码 多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 了解 HTML 语言简介 掌握 HTML 的基本结构 掌握 HTML 的常用标记 掌握使用 HTML 编写网页页面的方法 能够熟练浏览并修改 HTML 代码
46

授课教师 讲授与实训 课时 4

教学目标

知识点

能力点 职业素质 渗透点 教学方法 教学回顾 教学过程及 时间分配 组织教学 项目呈现 教学内容 采用的教学方法 培养与同学分工合作、共同参与意识及团队精神

知识点讲解

讲授法

教师演示每 一个步骤

演示法

47

教师完成制 作流程 项目展示法

学生实践练 习

分组练习

学习领域 学习单元 授课班级 主要行为 部分行为

网站管理 网页上传与站点管理 授课时间 课型 讲授与实训 授课教师 课时 2

网页管理,网站测试,域名申请,空间申请,网页上传 编辑站点,检查网页链接,创建网站结构图,申请域名和空间,上传网页
48

目标群体 教学环境

多媒体专业二年级学生,已经学习了 Photoshop、flash 等 图像处理实训室 知识点

教学目标

能力点 职业素质 渗透点 培养与同学分工合作、共同参与意识及团队精神

教学方法 教学回顾 教学过程及 时间分配 组织教学 提出教学目 标 教学内容 采用的教学方法

安排学生整理座位,清点人数。 1、到现在为止,网站建设基本完成。但是要将网页上传 到网上,让别人能在网络上看到自己的页面,就必须完成 以下的几项工作。 今天的主要任务就是学习如何进行站点 的上传以及需要注意的几个问题。 讲授法 2、关键知识点 1----站点文件管理 使用“站点”----“管理站点”工具能对网站进行好的 管理。 创建网站结构图有利于使网页之间的关系一目了然, 以便于组织网站结构。 在折叠的 “文件” 面板中, “站 选择 点视图”弹出式菜单中的“地图视图” 。 教师演示 3 关键知识点 2----网站测试 网站测试是为了使网页实用、安全、稳定,能正常工 作,符合用户需求。测试可以从以下几个方面进行: ? 功能是否完整,是否达到了客户要求; ? 网页内容是否正确,有无错误; ? 网页之间的链接是否正确; ? Html 代码编写是否规范 教师演示 4、关键知识点 3----站点名称和域名 要想让网友访问自己的网站,首先得让他们记住自己 的网站名称。网站名称的要求:简单明了,内涵丰富。 如新浪、雅虎、搜狐等 域名是网站在因特网上的网址,如 www.sina.com,域 名的申请有具体的步骤。

知识点讲解

教师演示

演示法

49

教师用 PPT 演示 5、关键知识点 4----站点空间申请 申请主页空间的程序不复杂,打开那些提供主页空间 的网站,选择该网站主页空间的类型(就是根据主页空间 的容量,技术支持情况、是否提供邮箱以及收费标准等划 分的级别) ,然后根据网站提示,填写申请表格,其中用 户名以后就是你网站名的一部分了,上交申请表格,网站 即有回复给你,告诉你一些相关事宜。 网站建议用户使用 WS-FTP 软件上传主页。 项目实践 6、学生实践:到网上申请一个网站空间,然后按照空间 提供商提供的 FTP 登陆管理信息。 实践法

添加的内容: 1、 如何将页面进行整合,保证链接的完整-----相对路径链接 2、 如何进行页面修改

50


更多相关文档:

《网页设计基础》完整教案(201309版)

《网页设计基础》完整教案(201309版)_其它课程_初中教育_教育专区 暂无评价|0人阅读|0次下载|举报文档 《网页设计基础》完整教案(201309版)_其它课程_初中教育_...

网页设计基础教案

网页设计基础教案_计算机软件及应用_IT/计算机_专业资料。网页设计基础教案 网页设计电子教案 2016-2017 学年第一学期 主讲——田小宇 教实训内容 实训时间 授课...

《网页设计与制作》教案

《网页设计制作》教案_工学_高等教育_教育专区。教 案 2012 ~ 2013 学年...Dreamweaver 来创建和设计一个网站,为以后学习 Web 动态 网页的开发奠定基础。 ...

网页设计教案

网页设计教案_工学_高等教育_教育专区。《网页设计制作》课程 网页设计与制作...出版的的《网页设计与 web 编程》 ,共包含有 4 个部 分,即基础篇、图形...

大作业(网页设计基础)

广州大学华软软件学院 作业题目 作业题目 课程名称: 课程代码: 计划学时: 课程性质: 网页设计基础 NN1017 72 必修、考试 学分: 4 面向专业: 网络专业 课程负责...

201309学期网页设计作业4

201309学期网页设计作业4_能源/化工_工程科技_专业资料。201309 学期网页设计作业 4 单项选择题 第 1 题 主机域名 center. nbu. edu. cn 由四个子域组成,其中...

网页设计基础课作业

网页设计基础课作业_工学_高等教育_教育专区。《网页设计基础》结课作业要求刘立伟 一、内容 结课作业主要包括两个部分,即网页平面设计(JPG 图片)和网站设计(html...

《网页设计》教案

网页设计教案吴静 第 1 页共 30 页 教案课程名称: 章次名称 授课学时 总学时: 6 网页设计 授课教师: 吴静 第一章 网页与网站基础 课堂讲授: 4 试验: 上...

《网页美工设计》教案

第1页 《网页美工设计》课程教案授课教师: 章节 内容 教学 目标 重点 难点 教学 方法 教学 环境 授课班级:网页设计基础知识 Dreamweaver 软件介绍及其基础操作 1)...

网页设计基础

80页 免费 《网页设计制作》第二章... 28页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...
更多相关标签:
基础会计教案 完整版 | 完整的钢琴基础教案 | 最完整的小学体育教案 | 完整的教案 | 描绘清晰完整的我教案 | 舞蹈教案完整 | 完整队列训练教案 | 狼牙山五壮士完整教案 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com