FrontPage 2003 1 1、常用网页制作软件介绍常用网页制作软件介绍 2 2、 WWW WWW 的基本知识的基本知识 3 3、 HTMLHTML语言简介语言简介 4 4、 FrontPage 2003FrontPage 2003 应用应用 主要内容 1.常用网页制作软件介绍 1.1 1.1 什么是网页什么是网页 用HTML语言编写的文件称为HTML文件，以页面的形式呈 现在用户的屏幕上。 （1） Dreamweaver：“所见即所得“的网页编辑工具； （2） Fireworks：针对网络图形设计的工具软件； （3） Flash：矢量图形编辑和交互式动画制作软件； 1.2 1.2 网页制作常用软件网页制作常用软件 网页三剑客 1 1.常用网页制作软件介绍 FrontPage 2003是微软公司最近推出的Microsoft Office System套装软件的重要组成部分。FrontPage是一 款所见即所得的网页制作软件，该软件以其强大的向导功 能和简单易用而著称； 1.2 1.2 网页制作常用软件网页制作常用软件 FrontPage 2003 2 1.常用网页制作软件介绍 2. WWW 的基本知识 2.1 2.1 网站网站 存放网页的服务器 。 2.2 2.2 网址网址 网页的地址。 基本结构：服务器目录文件名 2.3 2.3 常见的三种网页常见的三种网页 ASP（Active Server Pages) JSP (JavaServer Pages) PHP (Hypertext Preprocessor) 2. WWW 的基本知识 3.1 HTML3.1 HTML（超文本标记语言超文本标记语言） 是网页技术的基础，它使用一些约定的标记（tag）对文 本进行标注，定义网页的数据格式，描述Web页中的信息， 控制信息的显示。 HTML语言编写的文件称为HTML文件。用HTML语言编写的 网页实际上是一种文本文件，它以.htm或.html为扩展名， 可以使用任何文本处理软件（例如：记事本）编写。 3. HTML语言简介 例例1-1-文本布局示例文本布局示例 3. HTML语言简介 初识初识HTMLHTML：例：例3-3-表格示例表格示例 3. HTML语言简介 3.2 HTML3.2 HTML文件的基本构成文件的基本构成 （1）文本内容：含有需要展现的具体信息。 （2）HTML标记：负责控制文本显示的外观和版式。 3. HTML语言简介 3.3 HTML3.3 HTML标记的书写格式标记的书写格式 （1）标记名文本内容标记名 （2）标记名 属性1=值1 属性2=值2 文本内容 标记名 3. HTML语言简介 标记名写在“”内。多数HTML标记同时具有起始和结束标记，并且成对 出现。HTML标记不区分大小写。 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要 用空格分隔。 3.4 HTML3.4 HTML网页的结构网页的结构 （1）头部（Head）：由和标记定义。 （2）正文主体（Body） ：由和标记定义。 3. HTML语言简介 3. HTML语言简介 3.5 HTML3.5 HTML网页的文本布局标记网页的文本布局标记 一般HTML文件都是以开头，以结束。 1）头部（Head） HTML文件的头部由和标记定义。 ，它用于定义网页文件的标题。 2）正文主体（Body） 由和标记定义。 其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。 如果网页使用背景图像，格式如下： 3. HTML语言简介 1. 文本布局 1）段落标记 标记指定文档中一个独立的段落。 align属性，控制段落的对齐方式，其值可以是 left、center、right、justify，分别表示左对齐、居 中、右对齐和两端对齐，默认值为左对齐。 2）换行标记 标记可以强制文本换行。该标记只有起始标 记。 3）水平线标记 水平线标记用于在网页中插入一条水平线。 案例回顾 3. HTML语言简介 2. 文字格式 1）标题标记 标题文字内容 其中n取值范围为1到6的数字。其中h1 文字最大，h6文字最小。 2）字形标记 字形标记用于设置文字的粗体、斜体、 下划线、上标、下标等。 标记标记 格式字形结结果 粗体 斜体 下划线线 上标标 下标标 3. HTML语言简介 3）字体标记 （1）size属性：用来控制文字的大小 n的取值范围为17的数字，默认值为3。 标记和标记都可以控制文字的大小。一般情 况下，文章的标题最好由标记控制，而其余的文字由 标记控制。 （2）color属性：用来控制文字的颜色 其中n是一个十六进制的六位数。 （3）face属性：用来指明文字使用的字体 其中字体名的选择由Windows操作系统安装的字体决定。如： 宋体、楷体_GB2312、Times New Roman、Arial等。 3. HTML语言简介 3. 插入图片 标记将图片插入网页中，用于设置图片的大 小以及相邻文字的排列方式。 （1）src属性：指明图片文件所在的位置。 其中URL指图片文件存放的位置。 （2）alt属性：图片的文字说明，当鼠标指针指向图 片时，该图片的说明性文字弹出。 （3）width和height属性：设置图片显示区域的宽 度和高度。 其中width和height属性的取值n1和n2，可以是像 素数或百分比。 3. HTML语言简介 （4）border属性：设置图片文件的边框。 其中n为像素数。 （5）align属性：设置图片相对于文本的位置关 系。 对齐方式可以是： top（顶端对齐）、middle（相对垂直居中） 、bottom（相对底边对齐）、left（左对齐）、 right（右对齐）、texttop（文本上方）等。 3. HTML语言简介 4. 插入超链接 和标记用于设置网页中的超链接 ，href属性指明被超链接的文件地址。 超链接文本 用于表示超链接的文本一般显示为蓝 色并且加下划线。 若使用图片做超链接： 案例回顾 3. HTML语言简介 5. 使用表格 定义表格的有关标记如下： 定义表格区域。 定义表格标题。 定义表格头。 定义表格行。 定义表格单元格。 border属性用于设置表格边框的宽度； width、height属性用于设置表格或单元格的宽度、高度； cellspacing和cellpadding属性分别用于设置单元格之间的 间隙和单元格内部空白； align属性用于设置表格或单元格的对齐方式； bgcolor和background属性分别用于设置表格的背景颜色和 背景图像。 3. HTML语言简介 例例1-1-文本布局示例文本布局示例 例例2-HTML2-HTML网页的其它标记网页的其它标记 3. HTML语言简介 例例2-HTML2-HTML网页的其它标记网页的其它标记 3. HTML语言简介 初识初识HTMLHTML：例：例3-3-表格示例表格示例 3. HTML语言简介 4. FrontPage2003 应用 FrontPage2003 FrontPage2003 建站欣赏建站欣赏 4. FrontPage2003 应用 4.1 FrontPage20034.1 FrontPage2003的界面的界面 标题栏菜单栏常用工具栏格式工具栏 视图栏 标记栏 工作区 4. FrontPage2003 应用 FrontPage 2003提供了四种网页 视图模式： 设计视图 代码视图 预览视图 拆分视图 4. FrontPage2003 应用 4.2 4.2 创建站点创建站点 站点是指一个专门用来存放网站文件的 文件夹，需要一个名字和一个根目录，以后 所有站点的文件都将存放在这个根目录下。 4. FrontPage2003 应用 4.2 4.2 创建站点创建站点 站点的创建有以下几种方法： 利用向导创建 利用模板创建 1 2 自定义站点 3 4. FrontPage2003 应用 “文件”-“新建”-“新建”任务窗 格中-“新建网站”-“由一个网 页组成的网站”-“网站模板”- “指定新网站的位置”。 网 页 视 图 1 文 件 夹 视 图 2 报 表 视 图 3 导 航 视 图 4 超 链 接 视 图 5 任 务 视 图 6 4.3 4.3 网站视图网站视图 网页视图是 FRONTPAGE 最常用的视图 ，网页的创建 、编辑、预览 等都在该视图 中进行。 文件夹视图 下，站点显示 为一组文件和 文件夹，可在 此视图中创建 、移动和删除 文件或文件夹 。 报表视图可 以方便的了解 当前站点的文 件内容、更新 链接情况、组 件错误，所有 文件列表及变 化情况。 导航视图可 以方便地观察 站点的链接结 构，以层状组 织结构图得形 式显示。 超链接视 图将当前站点 显示为链接文 件的一个网络 ，它就象一张 地图，表明站 点中的超级链 接 任务视图 主要用来创建 和管理任务， 列出了当前站 点尚未完成的 任务。 4. FrontPage2003 应用 新建：“文件”-“新建”-“新建”任务窗格- -“新建网页”-“其他网页模板”。 打开：“文件”-“打开”或“常用”工具栏的“打开” 按钮，在弹出的“打开文件”对话框中选择相应的网页； 如需要打开的文件已在打开的网站中，在文件夹视图中双击 该网页图标即可将其打开。 保存：“文件”-“保存”或“常用”工具栏的“保存”按 钮，如需另存可使用“文件”菜单的“另存为”命令。 4.4 4.4 创建网页创建网页 4. FrontPage2003 应用 4. FrontPage2003 应用 设置文字格式： 选中文字-“格式”-“字体”命令。 虽然可以设置各种美观的字体，但是由于用户只能使用本 地计算机中安装的字体显示网页，因此还是使用常见的字体 为好。 查找、替换、复制、剪切！ 设置段落格式 按Enter键划分段落。段落之间插入了一个空行。 如果只是需要换行，而不是另起一个段落，按Shift+Enter键 即可。按Enter键在HTML代码中插入的是标记，而按 Shift+Enter键则插入的是标记。 4. FrontPage2003 应用 网页的属性设置 设计状态下“文件”-“属性” 单击右键选择“属性” 4.5 4.5 查看、编辑源代码查看、编辑源代码 4.6 4.6 预览所编辑的网页预览所编辑的网页 在FrontPage2003中预览网页1 在浏览器中预览网页2 4. FrontPage2003 应用 4.7 4.7 网页中元素的插入网页中元素的插入 插入水平线1 4. FrontPage2003 应用 “插入”-“水平线” 修改： u双击水平线 u选中水平线右键水平线属性 4.7 4.7 网页中元素的插入网页中元素的插入 插入图像 2 4. FrontPage2003 应用 “插入”-“图片” 设置图片属性 双击图片 选中图片-格式-属性 选中图片右键图片属性 编辑图片 利用图片工具栏旋转等 4.7 4.7 网页中元素的插入网页中元素的插入 插入字幕 3 4. FrontPage2003 应用 将插入点设置在要插入移动字幕的位置或者选中 作为移动字幕的文本 “插入”-“Web组件” -“插入Web组件” -“组 件类型”-“动态效果”-“字幕”-“完成” 4.7 4.7 网页中元素的插入网页中元素的插入 插入交互式按钮4 4. FrontPage2003 应用 “插入”-“Web组件”-“组件类型”-“动态效果” -“选择一种效果”-“交互式按钮”-“完成” 设置按钮 字体 图像 链接 4