文档详情

《Dreamweaver网页设计与制作(第二版)》教案完整版.docx

发布:2022-09-19约字共169页下载文档
文本预览下载声明
课程教案(项目一) 授课内容 个人网页的简单美化——网页制作基础知识 授课班级 授课学时 6课时 教学方法与手段 讲授法、演示法、讨论法。多媒体教学 项目内容 本项目的主要工作内容是对一个简单个人网站首页的网页标题、背景颜色、字体大小等基本要素做简单修改,要求在熟悉网站的基本知识、认识网页的基本元素基础上,利用HTML语言完成。 教学目标 学生通过本项目的学习,能: 认识网页和网站 掌握IP地址、网址等基本概念 理解静态网页与动态网页的区别 掌握简单HTML文件的编写方法 教学重点与难点 教学重点: 什么是网页? 网页内容组成; 网页编写语言种类及特点。 Dreamweaver CS3功能简介。 教学难点:   创建HTML文档,掌握简单HTML文件的编写方法。 教学过程设计 【任务一】认识网站与网页(2课时) (一)网页的概念 网页:是组成WWW(World Wide Web:万维网)的基本元素,也被称为页面或Web页。不同的网页通过超链接联系在一起,构成了WWW纵横交织结构。 网站:就是一个相互链接的网页的集合,它们可以共享。大的网站页面数量多达几十万,甚至上百万页,小的个人网站也可以只包含数个页面。 主页:是网站中的一个特殊网页,它是在WWW上进入网站的第一个网页,其中包含指向其他网页的超链接,通常主页的名称是固定的。 (二)网页中的常见元素 文本 图像:JPG、PNG、GIF 超链接 表单 表格 动画 (三)IP地址、域名和网址 IP地址:由4个小于256的数字组成,数字之间用点间隔 域名:独一无二,例如: 网址:又称URL,由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。 (四)动态网页与静态网页 动态网页(DHTML):后缀名为.asp、.jsp、.php、.cgi等 静态网页(HTML):后缀名.htm、.html、.xml等 (五)任务实施:制作个人网站 【任务二】使用HTML语言修改简单网页(4课时) 小贴士:什么是HTML语言 HTML(Hypertext Markup Language,超文本标记语言)不是一种编程语言,而是一种描述性的标记语言,用于描述超文本中内容的显示方式。其最基本的语法就是:标记内容/标记。标记通常都是成对使用的,一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器从服务器接收到 HTML文件后,就会解释里面的标记符,然后把标记符相对应的功能表达出来。 (一)创建HTML文件 (1)选择“开始”,然后依次选择“程序”→“附件”→“记事本”命令。 (2)在打开的记事本窗口中写入代码: html head titletest/title /head body b 互联网,我来了 ! /b /body /html 保存该文档。 双击该HTML文件,会自动打开浏览器,显示文件内容。 (二)HTML文件结构 1.?html 标记 html标记放在HTML文件的开头,并没有实质性的功能,只是一个形式上的标记,但要形成一个良好的编写习惯,在HTML文件开头使用html标记来做一个形式上的开始。 2.?head 标记 head也称为头标记,一般放在html标记里,其作用是放置关于此HTML文件的信息,如提供索引、定义 CSS 样式等。 3.?title 标记 title称为标题标记,包含在head标记内,它的作用是设定网页标题,可以看见在浏览器左上方的标题栏中显示这个标题,此外,在Windows任务栏中显示的也是这个标题。 4.?body 标记 body又称为主体标记,网页所要显示的内容都放在这个标记内,它是HTML文件的重点所在。它并不仅仅是一个形式上的标记,它本身也可以控制网页的背景颜色或背景图像。 (三)简单的HTML案例 1.设置标题 2.设置文字颜色 3.设置加粗、倾斜及文字颜色 4、插入图片 5、注释标记 (四)任务实施:对个人网站首页做简单修改 【知识拓展】网页美化常识 (一)、网页颜色的选择与搭配 设计网页时,可根据以下原则确定网页的背景色和主色调,并进行颜色搭配。 (1)网页背景颜色最好选择白色或黑色。 (2)可根据网站的性质或网站标志(Logo,又称站标)的颜色确定网页的主色调,并且该主色调应贯穿于网站中的全部网页。 (3)设计网页时可充分利用同类色、邻近色和对比色,以增强网页的层次感、丰富网页的色彩或突出某些重要内容(如导航条或版块标题)。 网页色彩搭配的原理包括以下几点。 (1)色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。 (2)色彩的独特性。要有与众不同的色彩,使得大家对网页的印象强烈。 (3)色彩的合适性。色彩和网页表达的内容气氛相适合,如用粉色体现女性
显示全部
相似文档