《网页制作》公选课 基本概念Word下载.docx
《《网页制作》公选课 基本概念Word下载.docx》由会员分享，可在线阅读，更多相关《《网页制作》公选课 基本概念Word下载.docx（63页珍藏版）》请在冰点文库上搜索。
–网页文件、首页
–网页缓存文件夹
网页元素•多媒体元素：
文字、图形、图像、动画、音频、视频——（视听元素）
•超文本：
以文本的方式，链接多媒体文件，描述、构成多媒体媒体信息
•表现形式：
文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等
２ 网页制作基础知识
1）网页制作的目的和任务内容、功能、形式三方面的统一表现网络信息内容
Ø
实现页面功能
美化版面、布局、元素的形式2）信息的概念
客观性：
信息是指一切事物存在方式和运动规律的表征。
主观性：
信息是指人们对世界的认识所形成的各种知识、学问、消息等。
信息的载体：
（多媒体数据形式）包括——文字、图片、图形、广播、电视、电话通话、语音、音乐、影视、数据库等等。
3）美学基础•美：
符合科学的视觉规律、人们的价值取向
•美学：
通过绘画、色彩和版面展现自然美感的学科
•美学表现手段：
绘画、色彩构成、平面构成
4）网页制作、信息和美学设计的关系
•网页制作的目的和任务是表现信息的内容，做到内容、功能、形式三方面的统一
•信息的形式必须符合美学的要求，美学是网页的客观要求
•美学平面艺术设计的理论是网页设计的重要方法
5）网页制作的有关概念•网页制作：
•网页设计：
平面设计
•网页编程：
程序设计
•网站建设：
综合设计6）网页制作的程序•网页设计：
平面设计
–版面设计
–色彩搭配
•技术制作：
软件应用网页制作三剑客
–网页制作软件
–图像制作软件
–动画制作软件
–脚本语言7）网页制作软件
•网页制作软件：
DreamweaverMX
FrontPage
•图像制作软件：
FireworksMX
Photoshop
•动画制作软件：
FlashMX
•脚本语言：
HTML、XML、JavaScript、VBScript8）电子商务网站开发（教学）
•服务器操作系统：
Windows2000Server
•服务平台：
IIS5.0（ASP）
•数据库系统：
Access2000
•Web开发工具：
DreamweaverMX
•编程语言：
–客户端：
JavaScript
–服务端：
VBScript
2.1HTML语言基础知识
2.1.1什么是HTMLHyperTextMarkupLanguag，超文本标记语言HyperText“超文本”，指“超级链接”
Markup标记，如：
title>
网页制作<
/title>
，起始标记，结尾标记
Language语言，脚本语言1）HTML起源
1.1991年TimBerner-Lee建立HTML
2.1993年Berner-Lee和Connolly完成HTML1.0版
3.目前版本为HTML4.0版
2）HTML的组成：
由数量固定的标准标记和文本组成。
3）HTML标记的作用：
每对标记（由起始标记、结尾标记及它们中间的文本构成）代表一条计算机指令，主要是描述网页中元素的显示信息，边下载边解释边执行。
2.1.2标记
1）标记的构成：
标记用符号“<
”和“>
”括起，如：
html>
、<
/html>
1.起始标记：
2.结尾标记：
3.双标记：
一对起始标记和结尾标记，构成一个双标记
4.单标记：
只有起始标记，没有结尾标记，如：
br>
hr>
2）标记的作用：
每对标记（由起始标记、结尾标记及它们中间的文本构成）代表一条计算机指令，描述页面元素或对象（包括标题、段落、字体、图像、表格等）在浏览器中的显示效果。
3）HTML标记的特点：
1.描述信息的显示效果、缺乏语义表达。
数量固定、标准化、不能扩展。
不区分大小写。
2.1.3网页文件结构1）基本结构：
<
head>
..文件头....<
/head>
body>
...文件体..<
/body>
1.网页文件标志：
创建一个HTML文档
2.文件头：
设置文档标题以及其他不在WEB网页上显示的信息
•主要组成：
–标题：
无标题文档<
–字符集:
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
>
–关键字：
metaname=“keywords”content=“新闻"
–刷新：
refresh"
5;
URL="
–背景音乐、链接、脚本语言程序、CSS、网页切换效果等文件体：
设置文档的可见部分2.1.4网页基本元素文本
2.图像
3.链接
4.表格
5.框架集
6.层
7.表单
8.样式
9.行为2.2HTML语言语法简要2.2.1标记的语法要点HTML脚本语言语法简单，所的标记是标准化的且数量固定，常用的标记数量不多，无需专门记忆，只要理解语法的几个要点便可灵巧地应用。
1.标记的构成：
多数由始标记和尾标记成对构成，如：
H1>
/H1>
，<
标记相当于一个指令，告诉浏览器文字显示成“最大的标题”。
2.单标记：
BR>
HR>
。
3.回车：
回车不分行。
4.连续空格：
只显示一个空格。
5.标记不区分大小写；
例：
Br>
的意义完全相同。
6.注释标记：
!
—与--!
之间的文字，都传统被浏览器略过不予解释。
2.2.2区段的概念HTML为层次结构，每对双标记组成一个“区段”，区段间嵌套结构不能交叉，如：
2.2.3标记的属性1）标记的构成：
1.符号“<
”，表示：
标记的开始。
2.标记名称，表示：
描述网页元素的显示格式。
标准化、数量固定。
3.标记属性，网页元素的显示格式分量信息。
某个标记可有多个属性，标记名称与属性间，以及属性与属性间要以一个或多个空格进行分隔。
如果标记中没有书写属性，并不说明该标记没有属性，只是该标记的属性采用了默认值。
4.符号“>
标记的结束。
2）属性的格式：
属性名=”属性值”
属性名=’属性值’
属性名=属性值//不严格3）实例：
•<
bodybgcolor="
#FF0000"
link="
#FFCC00"
2.1DreamWeaverMX简介DreamweaverMX是Macromedia公司发布的集网页设计、代码开发、网站创建和管理于一体的软件。
1）主要特点：
所见即所得
支持各种动态网页及Web应用程序开发，例如：
ASP、JSP、ASP.NET、PHP等
站点管理方便
对汉字的支持还没有完善2）DM的界面安排对比WORD软件介绍DM的界面，比较两者的异同点。
•界面安排：
（是所见即所得的保证条件之一）
–使编辑区最大化
–窗口大小（编辑>
参数选择>
状态栏）
–显示工具栏、属性面板
–关闭不常使用的浮动面板、组合面板
•代码界面显示的设置
–自动换行
–语法颜色
–自动缩进
•文件命名规则（网页文件、图像文件等）
–以英文字母或数字开头、不采用汉字、不含空格
–原则：
•分类原则：
便于分类组织管理
•意义原则：
能体现文件的作用
•时间原则：
体现网页文件的时间效益
–首页：
index.htm、default.htm
–框架集：
（在后面介绍）
2.2网页文件的组织管理•目的：
–所有文件都保证能够保存在一起
–能共用相同的图像文件
–安全可靠
1.建立网站文件夹，组织结构如图所示：
–网页文件夹
–图像文件夹
–动画文件夹
v数据库文件夹
2.站点设置（在动态网页部分介绍）
2.3网页文件的创建
1）创建网页文件
启动DreamweaverMX，系统自动创建一个空白的网页文件。
操作：
【文件】【另存为】，重命名网页，等待编辑。
在DreamweaverMX启动的情况下，选择【文件】【新建】命令，创建新网页，并重命名网页，等待编辑。
2）打开已有的网页
在DreamweaverMX启动的情况下，选择【文件】【打开】命令，打开已有网页。
在资源管理器或我的电脑文件夹中，鼠标右击已有网页文件，弹出下拉菜单，选择【使用DreamweaverMX编辑】命令，打开已有网页。
3）设置网页的页面属性
页面属性设置对话框如下图所示，主要设置项有：
标题：
其内容将在浏览器的标题栏上显示；
背景：
设置网页的背景颜色（默认背景颜色为白色）；
背景图像：
一般采用经过处理的对称图像作为背景，背景图像将自动重复充满整个网页。
左边界、顶部边界：
整个网页与浏览器左侧边界和顶部边界的距离，默认值有几个像素宽，一般设为0。
边界宽度、边界高度：
一般设为0。
3.1文字的输入文字是网页中的重要元素，但Dreamweaver对于特殊字符的支持没有完善。
1）文字的输入方法：
键盘录入
（从别的文本源中）复制，粘贴过来。
文本导入2）特殊字符的输入方法：
从插入菜单中只能插入少量特殊字符；
一般的特殊字符需从Word文档中复制，粘贴过来。
3）空格的输入方法：
键盘空格：
多个连续空格只显示一个空格。
预格式：
当设置为预格式状态，可输入多个连续空格。
不换行空格替代符——&
nbsp;
（在代码窗口中输入空格替代符，表示一个空格）
全角汉字输入状态空格：
在设计窗口中，可输入多个连续空格。
3.2文字分段与换行•段落
–<
p>
……<
/p>
–回车
–段落间的间隔宽
–双标志
•换行
–Shift+回车
–行间的间隔窄–单标志
3.2文字属性设置Dreamweaver中文字属性面板是文字格式设置的有效工具，见下图所示：
格式：
标题<
h1>
~<
h6>
字体：
font，默认字体
字体风格：
strong（加粗）、em（斜体）等
字号大小：
size
对齐：
align
颜色：
color，red、black；
十六进制：
#ff6600
1）字体：
中文字体一般采用默认值（宋体）。
2）字号：
字号大小的单位为七个级别，是一个相对的单位，不能设置准确的字号。
因为用户可在浏览器的菜单中设置字号大小级别。
一般不设置文字的字号。
由CSS定义字号大小
3）段落操作：
缩进：
使段落文字往中间缩进（使段落文字与左右边界添加空隙），增强网页文字的美观。
凸出：
缩进的逆操作。
列表：
li>
/li>
–项目列表:
ul>
/ul>
ultype="
square"
–编号列表:
ol>
/ol>
oltype="
i"
4.1常用图像格式图像在网页设计的作用：
美化页面（背景图像、装饰图像）
直接表达网页主题或传递信息
1）GIF图像：
–216-256色，适合颜色少、色调不连续变化
–小图片、文件小；
大面积单调颜色
–直接显示——速度快
–图标、按钮
2）JPEG图像：
–224色，颜色丰富（多）、色调连续变化，清晰
–大图片；
压缩比，可调整
–解压显示
–照片4.2源文件地址——图像的位置图像文件和网页文件都是相互独立的，它们之间的关系是链接关系。
网页制作时，只要在网页中表示出图像文件的地址（称为源文件地址）；
在网页浏览时，浏览器（IE）会根据图像文件的源文件地址，把图像在网页中显示出来。
所以，在网页中添加图像，主要是确定图像文件的源文件地址。
1）相对地址
–相对于网页文件
images/instrall.gif、../images/instrall.gif
2）绝对地址
–本机（地）硬盘上的位置
file:
///D|/wwwroot/images/wel025.gif–远程主机的位置
4.3网页中添加图像的步骤建立图像文件夹——images
2.拷贝图像文件到图像文件夹中
3.新创建网页文件后需要先保存网页文件
4.插入图像
5.保存网页文件
6.浏览网页（注意刷新）1）步骤解剖：
步骤1~3为关键步骤：
主要作用是确定本网页文件与链接对象之间的相对位置。
步骤3~5，利用属性面板，添加链接。
步骤6，验证添加链接是否正确。
2）注意事项：
图像文件夹须放在网站文件夹内。
这样可以获取相对地址。
图像文件名最好是采用英文、数字和下划线组合而成。
不能采用汉字、空格或其它特殊字符构成，因为，在Dreamweaver图像属性面板的源文件地址中会产生乱码，造成图像的地址解析错误。
先完成关键步骤，才能在Dreamweaver内添加图像的操作。
作为美化页面的图像主要是添加表格的背景图像——在表格的应用中介绍。
4.4图像的属性设置
通过图像属性面板进行图像的属性设置，如下图所示，设置的内容有：
源文件——相对地址（路径）
图像大小——宽、高、重设大小
替代——鼠标停靠，显示文字
边框——保持图像的完整性
对齐方式
–垂直方向对齐：
对齐（A）下拉列表。
–水平方向对齐：
三个对齐按钮
链接、热点、对象名称（链接部分介绍）
4.5图像占位符•操作：
【插入】【图像占位符】
•作用：
在图像文件下载完成之前
–提前预示图像信息
–使图像与其它元素的相对位置稳定
–保持网面的完整性
5.1链接的有关概念链接是Web的（三大）关键技术之一，也是网络信息的主要组织方式。
通过链接把网站上相互独立网页或其它资源联系起来，构成一个有机的整体，并延伸到整个网络。
链接关系：
指从一个网页指向一个目标对象的连接关系链接的作用：
–通过点击链接点，使用户可以访问与该网页有链接关系的对象，从而体现了网页的操作性。
–使各个独立的网页或其它元素形成一个有机的整体。
链接对象——链接中的目标对象
链接点——含有链接（关系）的网页元素（如文字、图像、表格等几乎所有网页元素都可以链接点）或图片中的某个区域（称为热区）。
链接目标——打开链接对象的目标窗口。
1）链接地址（路径）：
绝对路径——URL
相对路径
–站点根目录相对路径
–网页相对路径
2）链接目标——打开网页的目的地窗口：
–Blank新窗口
–Self原窗口
–Parent父窗口
–Top顶窗口
3）链接分类按网页链接对象的相对位置来分类：
外部链接：
链接指向本网页以外。
–其它网页
–其它元素
–E-mail
–热区（图片）
内部链接：
链接指向本网页的内部。
–锚点
5.2添加链接的步骤拷贝链接对象到相应文件夹中新创建网页文件后需要先保存网页文件选取链接点
4.添加链接
5.设置链接目标
6.保存网页文件
7.浏览网页（注意刷新）1）步骤解剖：
链接对象文件夹须放在网站文件夹内。
链接对象文件名最好是采用英文、数字和下划线组合而成。
不能采用汉字、空格或其它特殊字符构成，因为，在Dreamweaver属性面板的源文件地址中会产生乱码，造成链接的地址解析错误。
先完成关键步骤，才能在Dreamweaver内添加链接的操作。
5.3锚接如果是同一网页中的不同位置之间的链接关系，称为锚接。
链接对象称为锚点。
锚点的分类：
–未命名锚点——网页顶端与其它位置之间的链接–命名锚点——网页中某一位置与其它位置之间的链接1）未命名锚点的操作步骤：
–选取链接点
–链接地址：
#
–链接目标：
无
2）命名锚点的操作步骤：
–插入锚点——给锚点命名
#+锚点名
3）锚点的命名–由字母和数字构成
–区分大小字
5.4链接点外观设置链接点颜色
–未访问过的链接
–已访问过的链接
–活动链接
下划线（css）
鼠标形状（css）
6.1框架与框架集的有关概念框架是网页的版面布局的重要技术，包括框架和框架集两种技术。
框架（frame）：
把网页窗口分割成多个区域，形成多个小窗口，每个小窗口就是一个框架，每个框架对应一个独立的网页文件。
框架集（frameset）：
定义一组框架的数目、大小、位置、及各个框架页面文件的地址等属性的网页文件。
框架集并不在浏览器中显示它的本身，只是存储所属框架的有关信息和显示所属框架网页。
框架是框架集的组成元素，各框架页面的关系是平等的。
框架的作用：
1、拆分窗口和网页布局（手段）
–把一大窗口划分为相对独立的若干小窗口（区域），每个小窗口可以装载一个独立的页面，各个页面既各自独立又相互联系，是网页信息结构的组织方式。
–通过对窗口平面的拆分，使网页版面结构得到合理的布局。
2、加快网页的传输速度、使网页间的切换更加顺畅（目的）
–对于同一个栏目的网页，有很多结构和内容是一样的，如：
标志、导航、某些版块、页底等，从网页的传输和切换来看，这些网页内容是不必要更新的。
6.2框架集的创建和保存任何复杂的框架结构都有可以由简单的顶部框架和左右框架组合而成。
创建框架集的步骤：
1.新建网页文件
2.插入面版>
框架>
顶部框架（或左右框架）保存框架集的步骤：
保存次序：
先框架，后框架集1.选取上框架>
文件>
保存框架>
命名为：
f-u.htm
2.选取下框架>
f-d.htm
3.选取框架的边框>
保存框架页>
f.htm结果：
框架集文件为：
f.htm
上框架文件为：
f-u.htm、下框架文件为：
f-d.htm
6.3框架与框架集属性的设置
框架集的属性设置
•行：
rows="
95,*"
•列：
cols="
*"
•边框宽度：
border="
0"
•边框：
frameborder="
yes"
•边框颜色：
bordercolor="
#990000“•边框间隔：
framespacing="
框架的属性设置•框架名称：
name="
u"
•地址：
src="
u.htm"
frameborder="
bordercolor="
#009900"
•滚动条：
scrolling="
NO"
•能否调整框架窗口大小：
noresize
6.4框架集中的链接设置
链接地址（与非框架结构链接地址一样）
链接目标——打开网页的目的地窗口：
–Blank 新窗口
–Self 原框架窗口
–（本框架名） 原框架窗口
–（其它框架名） 其它框架窗口
–Parent 父窗口
–Top 顶窗口非框架结构中的链接目标：
Self、Parent和Top作用相同。
框架结构中的链接目标主要以框架名来标示。
第八章网页视听元素——多媒体
8.0 视听元素概述
•视听元素使信息的表达更加形象生动；
•视听元素以多媒体文件的形式独立存在；
•视听元素比文本和图像更大的数据量，不利于信息的检索，且数据量大、占据网络传输带宽大、传输下载速度更慢；
•多媒体文件在网页中的播放一般需要专门的播放软件（也称为浏览器插件），如果系统中没有安装多媒体播放插件，多媒体将不能播放。
8.1 网页中视听元素
•Flash动画：
–swf
•声音：
–wav、mp3
•视频：
–realPlayer格式：
rm、rmvb等
–MediaPlayer格式：
avi、asf等
•JAVA小程序
–Applet
•视听元素特点：
–表示的信息量大，形象生动；
–数据量大，需压缩与解压缩；
–文件格式多，不同类型的文件需专门的播放软件。
•视听元素在浏览器中播放的特点：
–浏览器（IE）主要功能是解释HTML脚本代码，不能播放网页中链接的多媒体文件；
–可调用专门的多媒体播放软件——插件；
8.2 插件
•插件
–浏览器插件
–DW插件
•浏览器插件
–浏览器中运行（播放）这些（多媒体）文件时所需的软件——称为浏览器插件。
–有些多媒体文件无需其他程序就可以播放，而有许多多媒体文件需要外部程序才能播放。
–如果浏览器没有安装这种外部程序，那么浏览器会不能正常播放这些多媒体文件。
•DW插件
–用于拓展DreamWeaver的功能
•Command命令
•Object对象
•Behavior行为
•DreamWeaverExchange
升级会员 