第七章网页制作
dreamweaver网页制作 第7章 表单
第7章表单在制作动态网页时，要实现信息交互，常常用到表单。
常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。
本章节将和大家一起探讨在表单的基本概念和各个元素，以及在Dreamweaver CS4中如何创建表单，并通过实例掌握表单制作的方法。
【学习目标】●了解Web服务器的作用。
●掌握IIS的安装和设置方法。
●掌握更改站点设置的方法。
●知道表单域的含义；熟练掌握各种表单栏目的插入与设置。
●能够综合使用各种表单栏目制作留言簿。
●知道发送表单结果的多种方法。
●掌握验证表单的方法。
7.1 关于表单表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。
表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。
表单内有多种可以与用户进行交互的表单元素，如文本框、单选框、复选框、提交按钮等元素。
在服务器端，信息处理由CGI （Common Gete Way Interface）、JSP （Javaserver Page）或ASP （Active Server Page）等应用程序处理。
下面是几个表单应用的例子，邮箱用户注册表单如图14.1所示，搜索引擎表单如图14.2所示，在线测试表单如图14.3所示。
7.2 表单元素表单域简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。
表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。
在建立表单网页之前，首先就要建立一个表单域。
在7.1节中详细介绍了表单的基本概念，使用Dreamweaver CS4可以创建各种表单元素，如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。
在“插入”工具栏的“表单”类别中列出了所有表单元素，如图14.4所示7.2.1 插入表单（1）将光标放在“编辑区”中要插入表单的位置；然后在“插入”工具栏的“表单”类别中，单击“表单”按钮；此时一个红色的虚线框出现在页面中，表示一个空表单，如图14.5所示（2）单击红色虚线，选中表单；在“属性检查器”中，“表单名称”文本框中输入表单名称，以便脚本语言Javascript通过名称对表单进行控制；在“方法”下拉列表框中，选择处理表单数据的传输方法，“Post”方法是在信息正文中发送表单数据，“Get”方法是将值附加到请求该页面的URL中；在“目标”下拉列表框选择服务器返回反馈数据的显示方式，这里选择“_blank”，即在新窗口打开；“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。
网页设计与开发第7章试卷及答案
<INPUT TYPE="CHECKBOX" NAME="ch2" VALUE="c2">电话交易
<INPUT TYPE="CHECKBOX" NAME="ch3" VALUE="c3">经纪人代理
B．<P><B>您用什么方式购买证卷？<B><P>
C)<inputtype="hidden"></input>
D)<inputtype="reset"></input>
答案:C
20.在HTML上，将表单中INPUT元素的TYPE属性值设置为（ ）时，用于创建重置按钮。
A.reset
B.set
C.button
D.Image
答案:A
21.阅读以下代码段，则可知（ ）。
答案:text、submit、reset、password、checkbox、radio、image、hidden、file
4.当type=text时，<input>标记除了有两个不可默认的属性_________和_________外，还有三个可选的属性：_________、_________和_________。
A.<input type=submit></input>
B.<textarea name="textarea"></textarea>
网页制作教程第7章
创建动态菜单效果，当用户鼠标悬停在菜单项上时，显示下拉菜单；当用户点击菜单项时，跳转 到相应页面。
THANKS
感谢观看
控制结构
JavaScript提供if...else、switch、for、 while等控制结构，用于实现条件判 断和循环执行。
DOM操作与事件处理机制
01
DOM（文档对象模型）操作
JavaScript可以通过DOM接口对HTML文档进行读取和修改，实现页面
元素的动态变化。
02
事件处理机制
JavaScript可以响应用户的各种操作，如点击、输入、滑动等，通过事
JavaScript基本语法规则
变量
使用var关键字声明变量，变量名可 以是字母、数字、下划线和美元符号
的组合，且区分大小写。
运算符
JavaScript支持算术运算符、比较运 算符、逻辑运算符等，可进行各种数
值计算和逻辑判断。
数据类型
JavaScript支持多种数据类型，包括 字符串、数字、布尔值、对象、数组 等。
使用`<object>`或`<embed>`标签在HTML中嵌入 Flash动画，并设置必要的属性，如`classid`、 `width`、`height`等。
兼容性考虑
由于Flash在某些浏览器中不再受支持，因 此需要提供替代方案，如使用HTML5动画 或视频。
案例：打造丰富多彩的多媒体网页
01
式等。
CSS优点
03
分离内容与表现、提高页面加载速度、易于维护和修改等。
常见布局方式及实现
固定布局
页面元素的位置和大小固定，不随浏览器窗口大小变化而 变化。实现方式包括使用像素值设置元素宽度和高度。
第7章 网页设计与制作-CSS样式使用
行内样式
这种样式是直接添加在HTML的标签里，语法如下：
<标签名 style=”样式规则的集合”>网页内容< /标签名>
【例】：
<p style=”color: blue; font-size: 10pt”>CSS实例</p>
代码说明：
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显 示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥 样式表的优势“内容结构和格式控制分别保存”。
案例（文字滚动效果） <marquee direction="up" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"> <div>文字内容</div></marquee>
div设置宽高 400*100 固定定位 top: 20% left: 25%;
复习
第7章 CSS样式使用
$ [知识目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
8 [能力目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
什么是CSS层叠样式表
• CSS（Cascading Stylesheets，层叠样式 表）是一种制作网页的新技术，也有的人称 之为层叠样式表（Cascading Stylesheet） ，现在已经为大多数的浏览器所支持，成为 网页设计必不可少的工具之一。
看看段落中的字体有什么变化？
语法规定
4．注释
你可以在CSS中插入注释来说明你代码的意思 ，注释有利于你或别人以后编辑和更改代码时 理解代码的含义。在浏览器中，注释是不显示 的。CSS注释以"/*" 开头，以"*/" 结尾。
网页设计与开发第7章试卷及答案
《网页设计与开发第７章》试卷一、选择题1、下列关于表单得说法不正确得一项就是( )。
A.表单元素可以单独存在于网页表单之外B。
表单中包含各种对象，例如文本域、列表框、复选框与单选按钮Ｃ。
get与poｓt方法就是浏览器将表单信息提交给服务器程序得两种主要方法Ｄ.表单由两部分组成:一就是描述表单得HTML源代码;二就是用来处理用户在表单域中输入得信息得服务器端应用程序客户端脚本答案： A2、下列不就是表单域得控件就是（).A。
单行文本框B。
复选框C.下拉菜单D。
图文框答案： D3、ＨTMＬ语言中表单得作用就是（)。
A。
显示图像B．设置超链接C.收集用户反馈信息Ｄ.显示网页信息答案： C4、有如下一行代码〈inpuｔtｙpe="text”name=”txｔ＂＞请问它得功能就是（).A.创建一个文本框B.创建一个密码框C.创建一个文本域D．创建一个按钮答案： A5、在HＴML中，<form ａctｉon＝？＞,aｃtion表示( )。
A.提交得方式B.表单所用得脚本语言C．提交得URＬ地址D。
表单得形式答案: Ｂ6、在HTML中,〈foｒm methoｄ=?＞，ｍetｈｏd表示（ ).A.提交得方式B。
表单所用得脚本语言C.提交得UＲＬ地址D.表单得形式答案: A７、增加表单得复选框得HTML代码就是( )。
Ａ。
<ｉnｐut typｅ＝sｕbｍit>B.<iｎpｕt ｔype=imaｇe ＞Ｃ.<input tyｐｅ＝ｔexｔ〉Ｄ.〈iｎpｕt type=ｃｈecｋｂox＞答案： D8、增加表单得密码域得ＨTML代码就是( )。
A。
<inｐut tyｐｅ＝sｕbmit〉Ｂ。
〈inｐut tｙpｅ=ｐａssｗoｒｄ〉C．<ｉnｐut type＝radio＞D。
＜iｎput tyｐe=chｅckｂox〉答案: B9、创建选项菜单应使用以下标记符( )。
Ａ。
第7章网页制作
7.2.4 利用表格设计网页版面
一、插入表格 二、选择表格对象 三、改变表格和单元格的大小 四、增加、删除行或列 五、拆分、合并单元格
7.2.5 利用框架和框架集组织网页页面
一、创建框架 二、选中框架或框架集 三、格式化框架与框架集 四、保存框架和框框架集文件
7.3 实例分析：帮助网页制作
本节以一个帮助类型的网站建设为例，介绍网 站的具体建设过程。帮助类网站的建设，大致 包括建立站点结构、网页的版面设计、组织内 容、编辑内容、调试与发布等几个主要环节 。
步骤
步骤1 创建本地目录 步骤2 启动Dreamweaver程序 步骤3 创建本地站点。 步骤4 启动文件面板 步骤5 编辑页面 步骤6 编辑左框架
步骤
பைடு நூலகம்
步骤7 编辑右框架 步骤8 设置框架链接 步骤9 相同方法编辑其他页面 步骤10 页面调试和修改 步骤11 发布站点
第7章 网页制作
本章内容
本章主要介绍网站建设的一般流程，使用 Dreamweaver进行网页基本元素处理，建立帮 助类网站。
学习目的
通过学习本章，了解网站建设的一般流程，掌 握使用Dreamweaver设计网页的基本操作，能 够制作帮助类网站。
7.1 网页制作概述
7.1.1 网页编辑软件 7.1.2 网站设计基本流程
7.1.1 网页编辑软件
本章以Macromedia公司开发的Macromedia Dreamweaver MX 2004中文版为例，介绍网 页编辑软件在网站开发和网页设计中的应用。
图7-1 工作区设置对话框
网页制作基础教程第七章
一种二维的布局方式，可以实现复杂的网页布局。
04
网页交互效果
JavaScript是一种脚本语言，用于实现网页的交互效果和动态功能。
JavaScript可以直接嵌入HTML代码中，也可以通过外部文件引入。
JavaScript可以用于控制网页元素的样式、响应用户事件、动态更新网页内容等。
DOM操作主要包括获取元素、修改元素属性、添加或删除元素等。
DOM操作是实现网页交互效果的重要手段之一，可以大大提高网页的互动性和用户体验。
01
02
03
04
DOM操作
AJAX（Asynchronous JavaScript and XML）是一种使用异步请求获取数据的技术，可以实现不刷新页面就能更新数据的效果。
可用性
良好的视觉效果可以吸引用户，提高网站吸引力。
美观性
适应不同设备和屏幕尺寸，提供良好的用户体验。
响应性
02
01
03
04
05
网页设计原则
对比色搭配
使用色轮上相对的颜色进行搭配，产生强烈的视觉冲击。
单色搭配
使用单一颜色系的不同色调进行搭配。
邻近色搭配
使用色轮上相邻的颜色进行搭配。
冷暖色搭配
使用冷暖色对比，营造不同的情感氛围。
03
关键词密度控制
在内容中合理分布关键词，避免过度堆砌。
04
元数据优化
提供丰富、准确的元数据信息，帮助搜索引擎理解网页内容。
05
标题标签优化
设置简洁、有吸引力的标题，反映页面主题。
06
描述标签优化
提供准确、有吸引力的描述，吸引用户点击。
网站SEO优化
将网站部署到互联网上，供用户访问。
第七章网页制作
修改水平线
初始绘制的水平线的格式往往不能 满足实际需要，此时可通过属性面板对 其进行修改。
插入日期
在制作网页时，有时需要插入当前的日 期，Dreamweaver 提供了快速插入日期和 时间的功能。
格式化文本
• • • • • • • 设置字体外观 设置字体大小 设置颜色 设置字体样式 设置对齐方式 设置标题格式 设置样式
7.1.6Dreamweaver 工作界面介绍
• • • • • • • • 插入栏 文档工具栏 文档编辑区 网页标签 扩展按钮 浮动面板组 属性面板 水平标尺和垂 直标尺
7.2 站点的基本操作
7.2.1规划站点结构
规划站点结构是设计站点的 必要前提，其操作是将不同的文件 分类存放在文件夹中以便于设计者 管理。合理地组织站点结构，可提 高工作效率，加快对站点的设计。
设置样式
属性面板中的“样式”下拉列表框可用 于显示当前应用于所选文本的样式。
项目列表的应用
• • • • • • 有序列表 无序列表 定义列表 为现有文本创建列表 创建嵌套列表 设置项目列表属性
有序列表
有序列表又称为编号列表，是有一定排 列顺序的列表，一般前面有数字前导字符， 其中前导字符可以是阿拉伯数字、英文字母 或罗马数字等。
图像与文本的对齐
选取图像后，在属性面板的“对齐”下拉 列表框中可设置处于同一行上的图像与文本 的对齐方式。
图像边距
选取图像在属性面板的“垂直边距”和 “水平边距”文本框中可以设置图像与页面 上方和左侧之间的距离，也可以设置图像与 其他网页元素之间的距离。
图像边框
选取图像后，在属性面板的“边框”文本 框中可以设置图像边框的宽度，单位为像素， “0”表示无边框。
第7章 网页设计工具简介
7.4 网页上传工具
7.4.1 CuteFTP CuteFTP是最早支持断点续传的FTP客户软件之一，是 一个集FTP上传下载、FTP搜索和网页编辑功能于一体的软 件包，其功能强大，使用方便，支持拖放。最新的CuteFTP 版本，为了更好地适合专业用户的使用，推出不少新的特色 功能，例如，目录比较上传、宏处理、远端文件直接比较操 作及IE风格的工具栏等。 CuteFTP的最新版本是CuteFTP 6.0 Pro，是一个全新的 商业级FTP客户端上传工具，提供了目录同步，自动排程， 同 时 多 站 点 链 接 、 多 协 议 支 持 （ FTP 、 SFTP 、 HTTP 、 HTTPS），智能覆盖，整合的HTML编辑器等功能，以及更 加快速的文件传输系统。
7.2 网页图形图像处理工具
7.2.2 Photoshop Photoshop是Adobe公司推出的功能强大的平面图像处理 软件，也是迄今为止世界上最畅销的图像编辑软件。Adobe Photoshop CS2（Creative Suite）是目前Photoshop的最新版 本，无论从性能的优越还是使用的方便等方面，Adobe Photoshop CS2都给人以耳目一新的感觉。由于Photoshop在 图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影 等各行各业中广泛应用，它已成为许多涉及图像处理的行业 的事实标准。 Photoshop中包含的ImageReady是用于网页图片制作的 工具，其缺点是体积庞大，操作比较复杂，非专业人士很难 熟练掌握。
7.2 网页图形图像处理工具
7.2.1 Fireworks Fireworks是Macromedia公司开发的一款优秀的网页图 形图像处理应用软件。Fireworks与多种产品集成在一起，包 括Macromedia的其他产品（如Dreamweaver、Flash、 FreeHand和Director）和其他用户喜欢的图形应用程序及 HTML编辑器，从而提供了一个真正集成Web解决方案，可 以帮助网页图形设计人员和开发人员解决所面临的特殊问题。 Fireworks的最新版本是Fireworks 8，利用Fireworks 8 中的新增功能，可以更方便地在网站上添加图形和交互元素， 这使得该应用程序越来越易于使用。对于有经验的Web设计 人员，需要与图形打交道的HTML开发人员，以及需要开发 包含大量图形图像的交互式网页但对代码编写或JavaScript 知之甚少或一无所知的Web开发新手来说，Fireworks 8都可 以最大限度地提高工作效率。
《网络信息编辑实务》(3版)-PPT 第七章网页制作
网络信息编辑实务
第七章 网页制作
实例2：网络视频的编排结构
分析：在网页的视频区域，左侧为视频播放区域，右侧为4个播放视频的缩略图及 简要文字说明的链接，即“[健康解码]什么是CUU？与ICU有什么区别”“[健康解 码] 乳腺癌可以不做乳腺全切吗？”“[健康解码]非母乳喂养会增加患乳腺癌风 险？”“[健康解码]肥胖会增加患乳腺癌的风险？”。单击右侧的链接，相应的视 频即可在视频播放区域播放。健康知识以三维动画的展现形式，全方位、立体化解 码人体健康的奥秘，对易被忽视的不良生活习惯进行预警，对广为流传的健康误区 去伪存真。
第七章 网页制作
任务1 了解网页基础知识
1．选择图像文件的格式
选择和使用图像的原则
如果需要图像保存透明的背景，应选择GIF图像文件格式。
如果希望图像在显示时能以交错图出现，应选择GIF图像文件 格式。
网络信息编辑实务
颜色不多、线条清楚的图像，如小图标、卡通图案等， 应选择GIF文件格式。
全彩的连续色调、没有明显边的图像、风景照等，适 合选择用JPEG文件格式。
网络信息编辑实务
第七章 网页制作
任务1 了解网页基础知识
2．选择动画文件的格式
通常用来完成简单的动态过程演示。目前常用的动画格式主要有：
FLA
GIF
Flash 动 画 是 一 种 矢 量 动 画 格式，具有体积小、兼容性 好、直观动感、互动性强大、 支 持 MP3音乐等优点 ，是 当 今 最 流 行 的Web 页 面 动 画格式。
网络信息编辑实务
第七章 网页制作
任务2 掌握HTML语言基础
2．熟悉HTML文件结构
HTML文件整体结构
<html> <head> 文件头 </head> <body> 文件主体 </body>
网页制作(第7章)
第7章表单【学习目标】（1）了解表单的功能（2）熟悉各种表单对象的功能（3）掌握各种表单对象的使用动态网页通常要实现信息的交互，表单（Form）是获取用户信息并和用户进行交互的有效方式，在网络中应用非常广泛。
本章将详细介绍表单的创建以及各种表单对象的制作方法。
7.1创建表单表单有多个表单对象组成，其中包括文本框、单选按钮、复选框等。
表单的主要功能是收集用户的信息，如用户名、密码、E-mail地址等。
图7-1所示的是淘宝网新会员注册的页面。
图7-1 会员注册在讲具体的表单对象制作之前，让我们先来学习如何创建表单和设置表单属性。
7.1.1制作表单域在Dreamweaver CS4中，创建表单可以采用如下两种方法来实现。
方法1：单击【插入】|【表单】命令菜单，然后在弹出的下拉菜单中选择表单对象，如图7-2所示。
方法2：在【插入】面板中选择【表单】选项，然后选择插入“表单域”，如图7-3所示。
图7-2 插入表单图7-3 【插入】面板7.1.2设置表单属性单击红色虚线，选中表单，在【属性】栏中：【表单ID】：设置表单名称。
【方法】：设置表单数据的传输方法。
【目标】：设置打开页面的方式。
【编码类型】：设置MIME编码类型”。
表单属性如图7-4所示。
图7-4 设置表单属性7.2 创建表单对象表单对象通常是插在表单域中，也即表单域可看作是表单对象的容器。
在本小节中，我们来学习各种表单对象的创建。
7.2.1制作文本域文本域用来输入文本，是表单中常用的对象之一，主要包含单行文本域、密码域和多行文本域。
制作文本域的具体步骤如下：第1步：将光标放在表单域中，单击【插入】|【表单】|【文本域】命令菜单，如图7-5所示。
第2步打开【输入标签辅助功能属性】对话框，如图7-6所示。
【输入标签辅助功能属性】对话框中各主要参数的含义如下：【ID】：文本域的名称。
【标签】：表单对象的提示文本，例如：用户名。
【样式】：针对代码视图中的label标签而言的，这里使用默认设置。
网页制作基础教程第七章.ppt
上一页 下一页
7.1 Flash MX 2004简介
（2）分离位图。 Flash中添加到文档中的位图图像是一个整体，我们只能对
其进行变形和移动操作，并不能对其局部进行修改。 如果要对其局部进行修改，则必须先对其进行分离位图操作，
将该图像转换为多个独立的填充区域线条，再使用套索工具 对其局部进行选择，然后再进行编辑。
以创建内容。 （4）空白帧。 空白帧中没有任何内容，它在时间轴中是一个白色背景的帧。
上一页 下一页
7.4 制作Flash动画
（5）动作帧。 动作帧也是一种关键帧，它表示在该帧中添加了动作脚本，
当动画播放到该帧后则执行该帧中的动作。 （6）过渡帧。 过渡帧是由Flash MX 2004计算生成的两个关键帧之间的
上一页 返 回
7.3 场景和图层
7.3.1 场景
场景好比电影中的镜头，一个导演在制作电影的过程中不可 能仅仅使用一个镜头就拍出电影，他在拍摄过程中往往将电 影分成若干个镜头分别进行拍摄。在拍摄完成之后，再根据 安排好的剧本将其按顺序播放。
Flash动画的制作也和拍摄电影相同，在制作过程中用户可 将动画的不同部分放置在不同的场景中，在电影发布中再将 其按顺序播放。
档选项卡”。
上一页 下一页
7.1 Flash MX 2004简介
7.1.2 浮动面板
Flash MX 2004有很多面板，默认状态下，在“舞台”的 正下方有三个比较常用的浮动面板，分别是“帮助”面板、 “动作”面板和“属性”面板，单击面板的“标题栏”，可 以依次展开它们，如图7-9所示。
1. “帮助”面板 “帮助”面板可以随时对软件的使用或动作脚本语法进行查
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
“插入”->“表单”
设置表单属性
22/23
7.5 发布站点
（略）
23/23
12/23
7.2 FrontPage 2003基本知识
7.2.1 启动与退出（略） 7.2.2 FrontPage 2003的视图 7.2.3 FrontPage 2003的基本操作
13/23
7.2.2 FrontPage 2003的视图
7种视图： • 网页视图 • 文件夹视图 • 报表视图 • 导航视图 • 超链接视图 • 任务视图 • 远程网站视图
8/23
常见的HTML中的标签
2)文本格式标签 • 标记名称：标题标记<hn>，双标签 • 标记实例：<h1>江雪</h1> • 说明：其中n为1到6的数字，表示字体大小。 • 标记名称：字体标记<font>，双标签 • 标记实例：<font size=1 color=#ff0000 face=宋体> 江雪</font> • 标记名称：字形标记<b>、<i>、<sup>、<sub>、 <u>，双标签，分别表示粗体、斜体、上标、下标、 下划线。
6/23
HTML标记的属性
2) 双标签 • 双标签必须成对使用才能完整地表达意思. • 这类标签的语法是：<标签>...</标签> • 如段落标记<p>...</p>，它表示在标签内部的内容 构成一个段落。 •3) 标签属性 • 始标记内可以包含一些属性，描绘不同的特性。 •其语法是：<标签 属性1 属性2 属性3 … > • 如<body background="images/bg.jpg">...</body>
5/23
HTML标记的属性
用“<”和“>”括起来的句子称为标签，是用来分 割和标记文本的元素，以形成文本的布局、文字的 格式及五彩缤纷的画面。 1) 单标签 某些标签称为单标签，因为它只需单独使用就能 完整地表达意思。 这类标签的语法是：<标签> 最常用的单标签就是<BR>，它表示换行，但并 不划分段落。
9/23
常见的HTML中的标签
3) 图片标签 • 标记名称：图片标记<img> • 标记实例：<img src= /img_menu/jnunamergss.gif height=200 width=60 align=center border=1> 4) 表格标签 <table>…</table> 5) 超链接标签 • 标记名称：超链接标记<a>…</a> ，双标签
7/23
常见的HTML标记
1)文本布局标签 • 标记名称：段落标记<p>，双标签 • 标记实例：<p align=center>江雪</p> • 说明：属性align取值为left、center、right，分别 表示左对齐、居中对齐、右对齐。 • 标记名称：换行标记<br> • <br>强制文本换行，但不划分段落，与<p>标记 不同，两行的间距不变。 • 标记名称：水平线标记<hr> • 说明：在网页中插入一条水平线
第7章 网页制作
济南大学· 信息学院
第7章 网页制作
7.1 网页制作概述 7.2 FrontPage 2003的基本知识 7.3 网页编辑 7.4 表单 7.5 发布站点
2/23
7.1 网页制作概述
7.1.1 HTML简介 7.1.2 网站制作的准备工作
3/23
7.1.1 HTML简介
HTML（超文本标记语言），是英文HyperText Markup Language的缩写。 它虽然称为“语言”，但实际上并不是一种编程 语言，不象C、C++、Java等编程语言那么复杂。 HTML描述的是文件中各个部分内容的结构，而不 是文件内容在显示器上出现的具体形式。 HTML定义了一组用来描述Web页的结构（如标 题、段落和表格等）的“命令”，这些命令在 HTML中称为标记或标签（Tag）。
字体、字形、字号、颜色、下划线等
17/23
网页的基本编辑
3．插入图片 点击常用工具栏上的按钮 在文件夹“images”中选择图片文件，点击“确定” 返回。 4．插入超链接 1）超级链接到外部网站 2）超级链接到站点内已有的网页 3）电子邮件超链接 4）建立图片热点超链接
18/23
网页的基本编辑
14/23
7.2.3 FrontPage 2003的基本操作
新建站点 新建网页文件 打开已有的网页文件 保存网页文件 预览网页
15/23
7.3 网页编辑
7.3.1 网页的基本编辑 7.3.2 编辑表格 7.3.3 框架
16/23
7.3.1 网页的基本编辑
1．设置网页属性 网页的属性包括网页的标题、位置、背景、页边 距等。 在空白页面单击右键，在弹出的快捷菜单中选择 命令“网页属性”，FrontPage 2003将显示“网页属 性”对话框。 2．文字修饰
19/23
7.3.2 编辑表格
插入表格 修饰表格
20/23
7.3.3 框架
使用框架将浏览器窗口分割为多个区域，在每个 区域中都可以显示一个独立的网页。浏览器窗口中 显示的网页实际是这些框架的集合，因此被称为框 架网页。框架网页并不包含显示内容，只是记录了 该框架网页包含几个框架、拆分以及每个框架中显 示那个网页（与其它网页的超链接）等。
11/23
准备工作
3. 选择网页设计制作工具 现在有很多现成的HTML编辑器，如微软公司开 发的FrontPage、Macromedia公司开发的 Dreamweaver等等，这些都是目前比较流行的“所见 即所得”式网页编辑器。但实际上，网页是用 HTML语言编写的文件，通常被存储在Web服务器 上，其本质是一种文本文件，以.htm或.html为扩展 名，可以用任何文本处理软件（如记事本、Word等） 创作或修改。
10/23
7.1.2 网站制作的准备工作
1. 网站结构的统筹 大致规划网站的组成、文档的层次结构及相互的链 接关系，做到统筹安排。 2. 素材的准备 为了使网站内容充实、页面美观漂亮，必需准备丰 富的多媒体素材。包括诗词文稿、背景图片、按钮 图片、声音文件等等。素材的来源可以是来自互联 网，也可以借助常见的图像处理工具，如PhotoShop、 Flash、Fireworks、COOL3D等等自己制作图像素材。
4/23
HTML文件的基本结构
HTML文件以<html>开始，以</html>结束，其 文件结构由头部和正文主体两部分组成。 <html>…</html>：网页开始、结束标记 <head>…</head>：头部标记 <body>…</body>：正文主体标记 在FrontPage中，新建网页，切换到“代码”视 图下查看源代码。
5．插入滚动字幕 “插入”，单击子菜单“Web组件”，选择组件类 型为“动态效果”中的“字幕”，输入文本，点击按 钮“确定”返回。 字幕效果要切换到预览视图方式才能看到。 6. 插入水平线 在网页中还可以插入水平线、悬停按钮、Flash 动画以及影音等各种类型的对象，只需单击菜单“插 入”，选择“Web组件…”、“高级控件”中选择。