网页设计教案首页Word格式.docx
《网页设计教案首页Word格式.docx》由会员分享，可在线阅读，更多相关《网页设计教案首页Word格式.docx（43页珍藏版）》请在冰豆网上搜索。
例如：
title>
这是一个HTML文件<
/title>
3.HTML属性（Attribute）
——属性是元素具有的，用来告诉浏览器如何控制或显示元素内容的。
ahref="
"
target="
_blank"
>
sohu网站<
/a>
1.3Dreamweaver介绍
-一款用于设计、开发网站和Web应用程序的专业HTML编辑器
-用户可以选择使用布局单元格或框架来设计页面的布局
-可用于创建文本、插入动态图像、提供网页超链接、创建Flash文本和Flash按钮等
-可用于组合由某些软件（如Photoshop、ImageReady和Flash等）制作的图形、动画和按钮
二、总结
年月日第周
第2章创建HTML文件
2.1创建HTML文件
2.2HTML的组织规范
2.3HTML基本标记
第3章文档格式化
3.1文字格式化
3.2超链接和锚站
1理解HTML文件的基本结构
2掌握文字格式化和超链接
教学重点
1<
html>
、<
head>
body>
2<
a>
如何控制文字格式和建立超链接
一、复习
二、新授课
-注释以<
!
--开始，以-->
结束
-html元素
head元素
文档标题
样式和脚本
body元素
浏览器显示的页面内容
-开始标记：
元素名>
-结束标记：
/元素名>
所有的HTML文档都遵循由W3C规定的HTML规范。
-结构标记<
-头标记<
-文档标题标记<
-内容标记<
-字体标记<
font>
-使用属性检查器中的字体类型、字体大小、字体颜色等设置格式化文本：
-链接到其他资源（如XHTML文档和图像）
三、学生随堂练习
四、总结
3
3.2超链接和锚站
3.3段落格式化
3.4使用列表
1掌握内部链接的使用
2掌握段落格式化和使用列表
内部链接和列表
列表
一、引入
HTML的基本标记，组织规范。
-内部链接：
在同一个文档的不同位置之间进行跳转
-命名锚站的一般语法格式为：
aname="
书签名"
锚站A<
“书签名”用来标示“锚站A”在HTML文档中的位置
-要找到上述锚站，需要编写如下代码：
#书签名"
点击此处将使浏览器跳到锚站A处<
注意：
href属性赋的值若是锚站的name属性值，则必须在书签名前边加一个“#”号。
-email链接：
mail:
URL
-<
p>
标记：
最常用段落标记
-其他段落标记：
div>
span>
address>
blockquote>
-预格式化段落标记:
<
pre>
-标题：
h1>
~~<
h6>
-换行与空行：
br>
-水平线：
hr>
<
hrwidth=”宽度”align=”对齐方式”size=”粗细”noshade>
3.4使用列表
-有序列表
-无序列表
-定义列表
实验
4
实验一：
超链接与列表
1会使用HTML创建Web页面
2学会标记信息列表和超链接
超链接的建立、列表的使用
嵌套列表
上机实验
实验报告
一、复习理论
二、布置实验任务
1实验目的
会使用HTML创建Web页面
学会标记信息列表和超链接
掌握列表在实际问题中的应用
2实验任务
创建有序列表“有序列表.html”
创建嵌套列表“嵌套列表.html”
创建有序列表和无序列表之间的超链接
三、指导学生上机实验
针对学生普遍存在的问题进行集体讲解和指导。
四、总结这次实验存在的问题
五、布置作业：
5
第4章使用图像和背景
4.1常用网络图像格式
4.2使用图像
4.3创建图像地图
1、掌握<
img>
标签各种属性的使用
2、会创建图像地图
灵活使用<
标签的各种属性
一、复习引入
图像和背景可以大大增强网页的吸引力和易用性，一个优秀的网页设计者必须善于合理运用图像和背景以突出网页所要表现的内容。
4.1常见网络图像格式
-GIF（GraphicsInterchangeFormat）图像
-JPEG（JointPhotographicExpertsGroup）图像
-PNG（PortableNetworkGraphics）图像
4.2使用图像img-
-src属性设置为要插入图像文件的URI
-height和width属性
-align属性
-hspace和vspace属性
-border属性、background属性
-创建图片链接
-使用缩略图
4.3创建图像地图：
一个图像地图中设置多个链接
热点：
整张图片被分成的多块活动的区域。
用户自己定义这些热点，把它们分别链接到各自独立的URI地址。
图像地图的基本类型包括两种：
1.客户端图像地图：
该地图直接被浏览器处理
2.服务器端图像地图：
该地图将被Web服务器上的一段程序负责解析处理
img标签属性的使用
创建图像地图
6
第5章表格布局
5.1创建表格
5.2设置表格格式
5.3高级表格标记
1学会创建带有数据行和数据列的表格
2学会控制表格格式
表格的定义；
表格行的控制；
单元格的控制；
表格的分组
控制表格格式
HTML网页可以看做是一个二维空间，可以使用表格对这个二维空间进行划分，然后对要表现的内容进行合理的布局，表格是一种重要的布局方式。
-基本表格标记：
table>
/table>
-设置表格行：
tr>
/tr>
-设置表格列：
th>
/th>
td>
/td>
是tablehead的简称，用来设置表头
是tabledata的简称，用来标记表头以外的其他单元格
-添加标题：
caption标记
“align”属性：
指定表格的标题位置
-调整表格尺寸：
width（宽度）和height（高度）属性
-对齐方式align：
属性值有left、right、和center三种，默认为left
-设置表格背景颜色：
bgcolor属性
、<
（或<
）标记中使用
-在表格中插入图片：
可放入某一个单元格内，也可作为表格背景
加背景图片：
标记中加入background属性
在一个单元格中加入图片：
在（<
或<
）之间加入<
标记
-调整单元格大小：
width属性
-单元格内容的对齐方式：
align和valign属性
-设置单元格间距和边距：
cellspacing属性和cellpadding属性：
-扩展行和列：
rowsapn属性和colspan属性
-行编组：
赋予表格行特殊的含义
包括<
thead>
，<
tbody>
tfoot>
三种标记
：
表示该行定义为当前表格的题注
表示该行定义为当前表格的尾注
表示表格的主体部分
标记必须出现在<
标记之前和<
标记之后举例讲解
-列编组：
colgroup>
三、学生练习
7
实验二：
链接、图像与表格
1学会创建跨行、跨列的表格
2会控制表格格式，使用表格进行合理布局
3学会使用img标签
会创建表格，使用图像
使用表格进行合理的布局
超链接、图像、表格
1实验目的：
●学会创建跨行、跨列的表格
●学会使用img标签
●会控制表格格式，使用表格进行合理布局
2实验任务：
●习题一：
创建跨行和跨列的表格
●习题二：
创建嵌套表格如下图所示，并在此基础上加入图像和超链接，网页围绕一个主题合理布局
8
链接、图像与表格（续）
●在上次习题二的基础上发挥主观能动性加入图像和超链接，网页围绕一个主题合理布局
9
第6章框架布局
6.1框架的概念
6.2创建含有框架的HTML文档
1学会使用frameset元素在单一浏览窗口显示多个Web页面
2使用框架进行布局
框架的创建和使用
使用框架创建符合需求的页面
窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。
6.1框架
框架能够同时显示多个HTML文档，框架之间可以互相联系，触发一个框架中的事件可以改变另一个框架中的内容和行为。
6.2创建含有框架的HTML文档
1.基本框架标记：
frameset
-不使用body标记
-cols属性：
垂直框架，指定框架的宽度
-rows属性：
水平框架，指定框架的高度
-frame标记：
没有结束标记
定义单个框架中的显示内容及其外观样式
src属性：
指定要显示的页面的URL
单个标记，无需结尾
-noframes标记:
浏览器无法显示框架时，显示此标记中的内容
举例演示多框架和弹性框架
2.框架集嵌套:
frameset>
标记中嵌套使用另外一个<
框架目标：
一个框架内的链接目标在另一个框架中显示
命名框架：
frame>
标记的name属性
设置锚站目标：
中使用target属性设置
三、学生进行课堂练习
10
6.3框架格式化
6.4浮动框架
1学会设置框架的各种属性
2学会使用浮动框架
浮动框架的使用
框架的实际应用
框架的frameset、frame标签
6.3框架格式化
1.边框设置：
框架边框的属性：
-frameborder:
0表不要边框，1表示显示边框
-border:
设定边框宽度
-bordercolor：
设置边框颜色
-<
标记和<
标记中都可以使用
2.页白设置：
框架边框到框架内容的空白区域
-Marginweidth:
控制左右页白
-marginheight:
控制上下页白
3.大小设置
-noresize属性:
禁止浏览者调整框架的大小
4.滚动设置：
scrolling属性
-yes:
不管是否需要都使用滚动条
-no:
不使用滚动条
-auto:
根据需要显示滚动条
6.4浮动框架
浮动框架:
iframe>
-创建一个内嵌的框架区或窗口
-与<
同样的属性设置：
name、src、marginwidth、marginheight、frameborder及scrolling
-与图形类似属性设置：
height、width和align
-遵循与普通框架一样的target原则：
通过name属性来指向它
11
第7章使用表单收集数据
7.1表单初步
7.2表单元素
1、理解<
form>
input>
标签；
下拉菜单select/option；
2、理解多行文本框textarea；
3、掌握表单在网页中的应用。
各种表单元素
多行文本框textarea
随着Internet的迅速发展，用户的要求越来越高。
他们不仅希望能从Web服务器中获得信息，而且还希望能向Web服务器反馈信息。
HTML是利用表单（Form）来设计交互界面的。
7.1表单初步
-填充式的表单使用户可以提交更复杂的信息，进行更复杂的交互
-表单是HTML标记中较为复杂的部分，它往往与脚本、动态页面和数据处理等功能相结合，制作动态网站
-表单元素包括：
文本字段
复选框
单选按钮
>
按钮
下拉菜单/列表框
7.2表单元素：
1.<
标记可以看作是一个包含许多表单控件的容器
-排列各种表单控件的布局，让表单以一种友好的界面呈现在浏览者面前
-控件是用来收集用户信息的域。
表单中的每一个控件都有名称（name）和值（value）。
当用户填写好表单并提交时，可用这些“名/值”对处理表单。
-把整个最终处理数据结果发送到目标程序上，这个数据结果是由许多对名称和数据值的统一体（即“名/值”对）组成的
-method属性：
指定表单数据以什么方式发送到Web服务器
method=“post”：
将表单数据添加到浏览器请求
method=“get”：
将表单数据直接添加到URL的结尾
action属性：
指定位于Web服务器上的脚本的URL
formaction="
url"
method=“get|post”>
表单元素<
/form>
2.<
限定表单内的输入区域，不同的输入方式由属性type指定
type属性的值可为text、radio和checkbox等
举例说明
三、课堂练习
12
7.2表单元素
7.3表单标记访问控制
7.4处理表单
7.5设计方法
1表单的各种元素
2表单标记访问控制
表单元素及访问控制
表单的实际应用
表单的各种元素
标签：
-文本域：
type=“text”
-密码域：
type=“password”
-单选按钮：
type=“radio”
-复选框：
type=“checkbox”
-文件上传：
type=“file”
-隐藏域：
type=“hidden”
-提交和重置按钮：
type=“submit”、type=“reset”
-图像提交按钮:
type="
image"
-下拉菜单：
select>
option>
选项编组标记:
optgroup>
-多行文本框：
textarea>
-表单区域fieldset和legend
举例演示
-控制Table键的次序：
tabindex属性
-快捷键：
accessskey属性
-控件的禁用和只读状态：
disabled、readonly
-工具提示与表单域：
title属性
-method属性：
get和post
-action属性：
指定表单数据提交到哪个地址进行处理
-enctype属性
表单必须便于使用，使访问者能够很方便的回答问题。
13
实验三：
框架与表单的设计
1学会创建和使用表单
2学会使用框架进行布局
表单和框架
表单的使用，灵活使用框架进行布局
表单和框架的使用
●学会创建和使用表单
●学会使用框架进行布局
四、
升级会员 