《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）色彩的合适性。色彩和网页表达的内容气氛相适合，如用粉色体现女性
显示全部