第1章 网页设计基础 熟记站标、导航条、广告条、按钮等网页构成要素,以及教学目标与要求 网页、网站、IP地址、域名、网址等概念;了解网页的本质和网页的布局类型和HTML文档的基本结构,熟练掌握网站建设的基本流程。 教学重点 重点:站标、导航条、广告条、网页、网站、IP地址、域名、网址等概念,以及网站建设的流程 难点: IP地址、域名、网址,HTML文档的基本结构及其常见标签 提问、启发、图示、情景教学、案例、课堂讨论 2课时 教学难点 教学方法 教学课时 第1章 网页设计基础 教学 提示 导入课程:大家会输入文字、制作和处理图像、以提问的方式引入课程 设计动画,如何把这些作品放到internet中,让更多的人去查阅和欣赏呢?---DW就可以制作网页。 1.网页的构成要素和组成元素 ?网页的构成要素:站标、导航条、广告条、标题栏和按钮; 采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结构成要素和组成元素。 打开一个搜狐主页,保存成不?网页的组成元素:文字、图片、动画(gif、同的类型,让大家看保存的效flash)、表单(交互功能)、音频、视频、超链接、表格、框架、导航等。 2.网页相关知识简介 ?基本概念: ?网页的本质 ?网页、网站、主页、互联网 ?动态网页、静态网页 ?IP地址、域名、网址(url)、浏览器等概念 ?网页布局 果,加深对网页本质的理解; 先打开一个网页的源文件,结合网络常识,详细讲解网页的定义,然后略讲网站和主页的概念。并提醒同学理解并记忆这些概念。 以注册和登录邮箱为例,对比?网页布局的相关概念 ?常见的布局类型 ?网站管理与网页制作相关软件 ?制作和管理网页工具; ?制作和优化网页图像工具; ?制作网页动画工具; 讲解动态网页和静态网页的特点和区别。 以平顶山学院和搜狐网站的IP地址与域名为例,简要讲述?其中Dreamweaver、 fireworks、 这两个概念。通过查看分析知flash这三个软件合称为网页“三名网站的网址引入url的定义剑客”。 ?其他小工具软件。 ?HTML语言 ? HTML的概念 ? HTML文档的基本结构 和组成,其它概念略讲。提醒学生理解并记忆上述概念。 打开一网页(详细讲解网页布? 几个常见的html标签: html、局效果的教程)让学生讨论、head、title、style、script、link、meta、body、img、p、font等。 ?XHTML语言简介 ?脚本语言简介 3.网页的设计理念和配色方案 ? 网页的设计理念 ? 色彩的三要素 ? 网页中的色彩心理与网页表现 ? 色彩搭配应遵循的原则 4.网站的开发流程 ① 网站需求分析 ② 设计制作网站页面 ③ 空间和域名申请 ④ 测试和发布网站 ⑤ 网站推广 分析总结布局类型。 根据学生特点简要讲解ps、flash、fw等软件在网页设计中的功能。 打开搜狐主页的源代码,让学生认识一下html语言及其结构,然后分别用记事本和dw创建2个最简单的网页,让学生细看其源代码,并详细讲解8个基本标签及其结构关系,最后根据时间酌情讲解其它几个常见标签。 5.典型网站分析 第一阶段:网站需求分析 ? 页面结构 规划网站 准备素材 第二阶段:创建站点,设计制作各级页面 定义站点 设置页面属性 制作页面 ? 色彩运用 简要讲解这两个概念,然后创建一个网页,复制无缝循环的代码并粘贴到网页的body标签,让学生了解脚本语言的功能。 让学生欣赏插入后的效果,吸引学生dw的相关代码。 结合上网的经验,让学生总结网页的设计理念。 色彩的三要素和心理表现学生在上学期的ps课程中学习过,采用提问法,进行复习;然后打开几个典型网站,分析其配色方案,最后总结网页中色彩运用的原则。 根据设计的先后顺序和学生一起分析总结网站的开发流程,并用图加以解释,重点讲解网站的需求分析,以加深学生对重点知识的掌握。 采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方案。 作业布置: 1.察看并对比分析大型网站(如中国网、着名学校网、着名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、着名出版社网、cctv网站、sohu、yahoo、IBM、微软等)的风格、色彩搭配与布局。 2 .察看的同时下载自己需要的文章、图片、软件等资源。 3.课后习题。 小结:通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用,提高了学生的学习兴趣,从学生的反应看,授课效果很好。 提问 第2章 Dreamweaver基础知识 熟悉Dreamweaver 8工作界面 ,熟记几个常用的工具按钮教学目标与要求 和菜单命令;熟练掌握站点的创建步骤,能快速规范地创建站点;能够快速创建、打开、保存网页文档;能熟练设置页面的属性。 教学重点 教学难点 教学方法 教学课时 1.创建站点并组织站点的结构;2. 在站点中创建网页3.页面的属性设置 HTML基础 举例为主,适当讲授操作要领,提问以测试课题效果。 2课时 第2章 Dreamweaver基础知识 我们一贯都是浏览网页,想自己动手做网站吗?Dreamweaver网页制作工具。 2.1 熟悉Dreamweaver 8工作界面 2.2 网站创建与管理 2.2.1 站点的定义、组成和结构 2.2.2 网页文档与文件夹命名规则 2.3 网页文档基本操作 新建、保存、预览、打开、关闭 2.4 基本页面属性设置 教学 提示 抛出问题,引入新课 用什么工具做网站?怎样做呢?--- 启动dw,详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用,区分标签检查器、标签选择器、标记选择符3个概念及其作用 详细讲解站点的定义、组成、结构,以及文件和文件夹的命名规则。 演示站点的创建过程和步骤,着重提出保存和站点文件夹的命名。 详细讲解站点结构的组织方制定文档标题和边距、网页背景颜色和背景法和原则。 图像,为网页设置文本属性、链接属性和跟通过dw设计视图分别创建1踪图像的属性,总结页面的使用的技巧: 个网页,分别演示文档标题分别演示这几个操作 和边距、背景颜色和背景图像、文本和链接属性,以及跟踪图像的属性的设置方法和步骤,帮助学生掌握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。 作业:习题一第1,2, 3 题 小结:本次课内容操作性很强,经过学生自己上台操作,发现大多数学生都能创建并组织好一个站点,还能快速地设置网页的属性,达到了教学目标的要求。 第3章 网页中的基本元素 1.熟练操作网页中的文本; 教学目标与要求 2.熟练插入各种格式的图像并设置其属性; 3.了解图像切片的作用; 4.熟练制作图像切片,并插入到dw中 1.文本对象的插入和格式设置; 教学重点 2.GIF、PNG和JPEG三种图像格式 的异同点和使用环境; 3.用fireworks制作网页切片的方法; 1.设置文本标题;段落的设置效果; 教学难点 2.GIF、PNG和JPEG三种图像格式的异同点和使用环境; 3.Dreamweaver 8.0中使用图像的一些基本方法和技巧; 4. 在dreamweaver中插入用fireworks制作的切片 教学方法 教学课时 课堂讲授为辅,多媒体演示为主,适当举例,提问以测试课题效果,实验式教学。 4课时 第3章网页中的基本元素 复习上节内容: 1. 2. 如何创建站点? 如何站点结构的组织 教学提示 以提问的方式复习上次课内容 结合WORD,通过复习的方式,总3.1网页中文本的操作 3.1.1 认识文本按钮及属性面板 ?
思考题:根据以前所学知识说出文本的编辑和设置属性各结dw中文本的