Download presentation
Presentation is loading. Please wait.
1
第四章 网页制作
2
知识网络图 html css 页面语言 javascript 网页制作 php xml 用模板生成个人网站 设置字体 设置图片 设置超链接
frontpage制作页面 用模板生成个人网站 设置字体 设置表格 php xml 设置图片 设置超链接 设置表单 设置声音、视频
3
重点、难点 网站由网站服务器和相关网页构成，本章将介绍常用的页面语言，以及所见即所得的页面制作工具Frontpage，并配合实例讲解页面的制作过程。 重点:用frontpage制作页面，frontpage使用方法。 难点:页面语言HTML 。
4
4.1 页面语言简介 HTML语言是页面制作的基础语言
4.1 页面语言简介 HTML语言是页面制作的基础语言 页面语言如CSS、JAVASCRIPT、PHP、ASP、JSP都是以HTML为基础，嵌入到HTML页面中 按照服务器端和客户端分类 HTML、CSS、JAVASCRIPT是基于浏览器的客户端语言 PHP、ASP、JSP是基于WEB服务器的服务器端语言。
5
1．Html语言 HTML（Hyper Text Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言
它能独立于各种操作系统平台（如UNIX，WINDOWS等）。 自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述网页的格式设计和它与WWW上其它网页的连结信息。
6
HTML语言是通过各种标记（tags）来标识文档的结构以及标识超链接的信息。
最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。
7
2. CSS层叠样式表 CSS（Cascading Style Sheet 层叠样式表）是用于增强、控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 使用CSS格式化页面、控制字体、布局、颜色等，可以快捷、灵活设置页面中文本的字体、对齐方式以及其他格式。 CSS可以将文本和图形融合在一起，使Web站点表现更加丰富，更易于管理和维护。
8
3．Javascript语言 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 目的：与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。
9
通过嵌入或调入在标准的HTML语言中实现的。
优点：弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有简单性、动态的、与操作系统无关性等特点。
10
4．Php语言 PHP(PHP: Hypertext Preprocessor，超文本预处理器的字母缩写)是一种嵌入在 HTML 并由服务器解释的脚本语言。 用于管理动态内容、支持数据库、处理会话跟踪，甚至构建整个电子商务站点。 支持许多流行的数据库，包括 MySQL、PostgreSQL、Oracle、Sybase、Informix 和 Microsoft SQL Server等。
11
PHP 能够用在所有的主流操作系统上，支持大多数的WEB服务器，包括Apache、IIS等。
类似的服务器端语言还有ASP、JSP等。
12
5．XML语言 XML（eXtensible Markup Language，扩展标记语言）是近年来十分热门的标记(Markup)语言，它是HTML的补充，并不是HTML的升级替代版 XML是用来描述数据的，而HTML则是用来解决如何显示数据的，也就是说它们之间是合作的 与HTML一样也是文本文件，以.xml为扩展名。
13
XML数据处理能力很强大，因此自从XML规格于1996年底被提出后，就一直成为网络上处理电子商务，数据仓库，数据交换，多媒体传输，化学及其他专业领域应用程序的主要解决方案。
14
4.2 编辑软件Frontpage简介 FrontPage是微软公司推出的一个“所见即所得”的网页制作工具。无论是创建单个Web页面，还是规划、建设和维护大型网站，FrontPage都非常方便 。
15
Frontpage 编辑时有四种视图： “设计”视图：用来编辑设计网页内容； “代码”视图：用来观看Frontpage自动生成的HTML代码； “拆分”视图：把窗口分为两部分，一部分为代码视图，一部分为设计视图； “预览”视图：演示网页效果。
16
FrontPage所提供的功能有： 创建页面的向导和摸板、可导入各种模式的已有文件、可导入各种类型的图形文件、可随时插入表单、组件并进行控制、随时查看并运行页面框架和表格。
17
使用FrontPage提供的网站模板建立一个个人网站
18
4.3 HTML基本语法 HTML语言是页面制作的基础语言，FrontPage所制作的页面，是以HTML语言为基础。
HTML文档由标记(Tag)和被标记的内容组成。 常见的标记有文本、图片、超链接、动画、音乐、表格、表单等 HTML的标记是封装在由小于号（<）和大于号（>）构成的一对尖括号之中。
19
1. 标记及其属性 HTML标记的格式为：<标记>内容</标记>
标记属性的语法是：<标记 属性1=〝属性值1〞 属性2=〝属性值2〞 … > 标记只是规定这是什么信息，如文本、图片、表格等，但是如何控制这些信息，就需要相关的属性值来表示。 各属性之间无先后次序，属性也可省略（即取默认值）， 例如单标记<HR>表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。
20
2. HTML页面框架 每个HTML都有一个基本的框架结构，其格式为： <HTML> <HEAD>
<TITLE> 页面标题 </TITLE> </HEAD> <BODY> 浏览器正文信息和相关的标记在这里.... </BODY> </HTML>
21
<HTML>在最外层，表示这对标记间的内容是HTML文档，<html> </html>标记作为文件的起点和终点，浏览器只对两个<html> </html>之间的文字和标记进行解释，并显示有相应的效果。 <HEAD>之间包括文档的头部信息，如文档总标题、用户信息、关键词等。 <body> </body>标记设置html文件的主体信息，包括正文、图形、表格、链接、表单等信息。
22
3. 常用的HTML标记 1). 字体 2). 图像 3). 链接 4). 表格 5). 表单 6). 多媒体文本
23
1). 字体 字体设置有两种格式，标题字体和普通正文字体 标题字体:<hn> …</hn> 正文字体:<font >…</font>
24
2). 图像 <img> 用来设置在页面中显示的图像，它比较特殊，只有开始，没有结束标记， 格式为：<img src=〝图像文件名〞>
25
3). 链接 链接格式的格式为： <a href=〝URL或网页文件名〞> 链接文字 </a>
26
4). 表格 一对<TABLE>标记指明里面要显示的内容以表格的形式出现，<TR>标记定义行，<TD>标记定义列 表格格式的格式为： <TABLE> <TR> <TD>单元格内容</TD> </TR> </TABLE>
27
表单可以在页面间实现交互操作，由一对<FORM>标记组成， 其格式为：
5). 表单 表单可以在页面间实现交互操作，由一对<FORM>标记组成， 其格式为： <FORM METHOD=POST ACTION="URL"> </FORM> 表单提供的交互界面由<INPUT>标记、<TEXTAREA>标记、<SELECT>标记设置，可以定义出文本框、单选框、多行编辑区域、下拉框等效果。
28
6). 多媒体文本 <EMBED>标记可以在主页中嵌入多媒体文本，如电影、声音、动画等 格式为：<embed src="URL" >
29
4.4 用Frontpage设计页面 使用FrontPage设计页面时，要先准备好页面内容的文字材料，图片、视频等多媒体文件，规划好存放页面的文件夹。 例如下面的例子将统一把页面放在D盘WEB文件夹， 图片、视频文件放在WEB文件夹下一级的images文件夹 在设计网页前，要先把文件夹建好。
30
1. 建立新网页 选择“文件”|“新建”项，然后选“空白网页”，弹出如图4-1所示的界面，FrontPage自动生成HTML文档的框架，具体内容根据需要来设计。
31
在输入页面内容前，一个良好的习惯是先起好文档的名字，在指定的位置保存，选择“文件”|“保存”项
指定保存的文件夹MYWEB，文件名introduce.htm，更改网页标题为“我的大学”，然后按“保存”。
32
2. 文本内容 在FrontPage设计视图编辑页面，跟word的使用方法一样，可以利用格式菜单或者格式工具条，来设置文字大小、改变字体、颜色、行距等格式，还可以利用编辑菜单或编辑工具条方便地进行文字的复制、移动、删除等操作。
33
3. 图像 在页面设计时添加一些图片来丰富内容、美化页面 常用的图片格式为JPG格式和GIF格式。
图片文件一般放在images文件夹下，与网页文件分开放，方便管理。 页面的图片有两种用途，一种是放在页面特定的位置来丰富内容，另一种图片时作为整个文档的背景。
34
添加一般图片的操作过程是： (1) 把光标移动的要插入图片的文字处；
(2) 选择“插入”|“图片”|“来自文件”项，打开图片对话框（如图4-8）； (3)在d:\myweb\images文件夹下，找到相应的图片文件bg_header.jpg，单击“插入”，就可以在指定位置出现需要的图片了
35
添加背景图片的操作过程是： (1) 选择“文件”|“属性”，打开“页面属性对话框”（如图4-9所示）； (2) 在格式选项处，选中“背景图片”，通过浏览项找到相应的背景图片bg_g1.gif文件，按“确定”后，图片bg_g1.gif会平铺在整个网页上
36
注意事项： 因为涉及到页面文件和多张图片文件，设计好网页后，如果需要把页面复制到其他机器，应该把页面文件和图片文件同时复制。
为了在页面位置改动后，仍能正常显示图片，在添加图片或背景时，要先确定文件已经起名并保存在正确的位置，这样添加到页面里的图片使用的是相对地址，格式为IMAGES/bg_g1.gif，复制到其它位置，仍能正常显示图片；否则，添加到页面里的图片文件使用的是绝对地址，格式为：file:///D:/MYWEB/IMAGES/bg_g1.gif，复制到其它位置后，除非仍保存在d盘MYWEB文件夹下，否则不能正常显示图片。
37
4. 超链接 用Frontpage建立超链接的步骤如下： (1) 选中要建立链接的文字或图片等内容，例如选中标题文字“广东外语外贸大学”；
(2) 选择“插入”|“超链接”项，打开“编辑超链接对话框”（如图4-11所示），在地址栏输入“ (3) 单击“目标框架”，在目标框架对话框（图4-12），选择“新建窗口”，然后按确定。
40
5. 表格 在用HTML语言设计页面时，表格不但可以显示数据，还可以用作页面布局，以调整页面上各个网页元素的位置，使页面更加美观、整齐。
41
用Frontpage建立表格的步骤如下：
(1) 选择“表格”|“插入”|“表格”菜单项，弹出图4-13插入表格对话框； (2) 设置表格的行数和列数，对齐方式，单元格衬距，单元格间距，边框粗细，颜色等，然后按确定，页面上出现一个空白表格； (3) 在相应的位置输入图4-14的成绩表。
43
6. 表单 表单元素为网站和浏览着交互信息提供桥梁，常见的表单类型有：文本框、单选框、复选框、密码框、文件框、按钮框、多行编辑框、下拉框。
44
(1) 打开Frontpage，建立新的空白页面，保存为myform.htm。
(2) 选择“插入”|“表单”|“表单”菜单项，页面出现一个虚线框，里面有“提交”、“重置”两个按键，下面建立的内容要保证在虚框的里面，最后提交信息时才能全部提交。 (3) 为了方便文字的位置的排列，在虚线框插入一个10行2列的表格，设置表格的相关属性，第一行合并单元格后，输入文字“注册个人信息”，调整字体大小。
45
(4) 学号、姓名的输入方式类似，选择“插入”|“表单”|“文本框”菜单项，就可以建立单行文本输入框。
(5) 密码框输入，先按(4)建立一个文本框，双击文本框后，弹出图4-17的文本框对话框，在密码域选中“是”的单选项，按确定后，就可以建立一个密码输入框
46
(6) 性别单选框是多选一的情况，选择“插入”|“表单”|“选项按钮”菜单项，页面出现一个单选按钮，在按钮后，输入文字“男”，重复操作，再建立一个“女”单选框。双击弹出“选项按钮属性”对话框，对于每一组单选框，要保证组名称相同，再根据需要设置初始状态为“选中”或“未选中”。
47
(7) 爱好复选框是多选项，选择“插入”|“表单”|“复选框”菜单项，页面出现一个复选按钮，在按钮后，输入文字“音乐”，重复操作，依次建立“美术”、“体育”、“舞蹈”复选框。双击弹出“选项按钮属性”对话框，对于每一组复选框，要保证名称不相同，根据需要设置初始状态为“选中”或“未选中”。
48
(8) 照片是文件输入项，选择“插入”|“表单”|“文件上载”菜单项，页面出现如图4-20的文件上载对话框。
49
(9) 学院项属于下拉选项，选择“插入”|“表单”|“下拉框”菜单项，页面出现一个下拉框按钮，双击该按钮，弹出图4-21下拉框属性对话框，选“添加”按钮，一个个增加学院名称，然后按“确定”。
50
(10) 个人介绍属于多行编辑区域，选择“插入”|“表单”|“文本”菜单项，页面出现一个文本编辑区域，双击该按钮，弹出图4-22文本框属性对话框，修改宽度和行数项，改变文本编辑区的大小，然后按“确定”。
51
(11) 建立重填和发送按钮，选择“插入”|“表单”|“按钮”菜单项，页面出现一个下拉框按钮，双击该按钮，弹出图4-23按钮框属性对话框，在“值/标签”处输入“重填”，按钮类型选“重置”，就可以建立一个“重填”按钮；如果在“值/标签”处输入“发送”，按钮类型选“提交”，就可以建立一个“提交”按钮。
52
7. 多媒体对象 Frontpage可以很方便地在网页内插入声音文件，当作背景音乐或一段语音，或放置一些视频文件，即使播放。
(1) 背景音乐文件 设置背景音乐后，当网页一打开，就自动播放指定的音乐文件。设置方法为：选择“文件”|“属性”菜单项，弹出“页面属性”对话框，在“常规”选项页，选择要播放的背景音乐文件名，设置循环次数，然后按“确定”按钮。
54
(2) 声音文件 在页面上播放声音文件时，用户可根据自己的需要设置播放、暂停、停止等操作，操作方法是：“插入”“高级”“插件”，弹出“插件属性”对话框，如图4-27，选择数据源，即要播放的音乐文件名，设置播放器高度、宽度，然后按“确定”按钮。
55
(3) 视频文件 在页面添加flash文件或其他视频文件，操作方法是：选择“插入”|“图片”|“Flash影片”菜单项，选择要播放的swf文件，页面上出现一个矩形区域用来播放flash文件，双击该区域，弹出“Flash影片属性”对话框，根据播放需要可以修改相应的参数。
Similar presentations
