《Dreamweaver网页设计与制作(第二版)》教案完整版.docx
文本预览下载声明
课程教案(项目一)
授课内容
个人网页的简单美化——网页制作基础知识
授课班级
授课学时
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)色彩的合适性。色彩和网页表达的内容气氛相适合,如用粉色体现女性
显示全部