计算机文化课件JC整理-8-1

1、第8章 网页设计基础第一部分人民邮电出版社使用使用frontpage制作主页制作主页 所有网页都是制作成html格式的文件 。 html称超文本标记语言（hypertext markup language）。 它的阅读过程不象传统的那样平面顺序结构，文档上的每一点，只要你点击它，就可能得到相应的详细信息。每个人可以随心所欲地跳来跳去，阅读自己感兴趣的内容，非常方便轻松。 人民邮电出版社使用使用frontpage制作主页制作主页 网页制作方法： 用html语言在编辑器下编写。 用网页工具编写。 用网页工具编写更方便、更直观，但有时也会受一些约束。 frontpage dreamwaver 对于简

2、单的网页可以通过word转换。人民邮电出版社第十三章第十三章 html语言语言 html meta http-equiv=content-language content=zh-cn meta http-equiv=“content-type” charset=gb2312 html html 举例举例 font size=“5” face=“ ”这是一个这是一个简单的网页简单的网页 / font meta元素用来描述元素用来描述html文档文档的自身信息。的自身信息。人民邮电出版社word转换网页人民邮电出版社word转换网页人民邮电出版社word转换网页 保存同名的文件和文件夹人民邮电出版

3、社frontpage2000 frontpage2000是当今最为流行的网页制作工具之一，它是微软公司office2000软件包中的一个主要软件。具有易学易用的特点，深受一般网页制作者的欢迎。 由于frontpage2000是微软公司office2000中的软件，其界面及操作与word较相似。 通过这部分内容的学习，要求大家掌握基本的网页制作方法，每个同学必须编制一个基本的网页。人民邮电出版社frontpage2000界面界面标题栏工具栏菜单项菜单栏工作区工作区视图栏显示方式状态栏人民邮电出版社frontpage2000界面界面 视图 网页视图：显示当前网页的内容； 文件夹视图：显示当前站点存

4、储的文件夹位置； 报表视图：列出当前站点的各项统计数据； 导航视图：显示当前站点与其它网页的链接关系； 超链接视图：显示网页的链接结构图； 任务视图：用于显示由工作组合作完成的大型网页编制的任务分配情况、。frontpage提供了建立网站的5个模板和3个站点向导，每个站点（模板）包含了多种网页。人民邮电出版社frontpage2000界面界面 显示方式 普通方式：以frontpage一般的方式显示制作的网页。 html方式：显示frontpage制作的网页的html语言文档。 预览方式：以浏览器的方式显示所制作的网页。人民邮电出版社简单网页的制作简单网页的制作编辑编辑 用frontpage20

5、00制作网页，其操作过程与word有一点相似。下面主要介绍网页编辑中基本的文字操作： 字体 字号 字型 颜色 修饰原则：原则： 先选中，后操作先选中，后操作人民邮电出版社简单网页的制作简单网页的制作编辑编辑 字体 先拖动鼠标选中要操作的文字 点击字体工具框，选择需要的字体人民邮电出版社简单网页的制作简单网页的制作编辑编辑 字号 先拖动鼠标选中要操作的文字 点击字体工具框，选择需要的字号人民邮电出版社简单网页的制作简单网页的制作编辑编辑 字体n字号人民邮电出版社简单网页的制作简单网页的制作编辑编辑 字型 选中文之后按 相应按钮与word相同人民邮电出版社简单网页的制作简单网页的制作编辑编辑 字颜

6、色这是普通文字 这是加粗文字这是加粗文字 这是倾斜文字人民邮电出版社简单网页的制作简单网页的制作编辑编辑 文字修饰 选中文字 点击“格式”菜单 选择“字体”命令 文字的字体、 字号、颜色、 字型都可以 在这里选择。人民邮电出版社简单网页的制作简单网页的制作编辑编辑 段落 文档是由许多段落组成的 ，frontpage中段落的概念与word相似，按下回车表示一段结束。 frontpage中段落之间，一般会空一行。 同时按下键和键，可取消空行。 正如在word中那样，字符的以上各种修饰效果可以都综合应用于同一文字上，应用的先后次序没有关系。比如，你可以将一段文字选定后，给其选择颜色、字体、大小。 根

7、据不同的需要，段落有各种各样的格式 +空行人民邮电出版社简单网页的制作简单网页的制作编辑编辑 段落 frontpage中没有行距和段间距的控制。 在需要明显间隔的地方可以增加“分隔线”水平线人民邮电出版社简单网页的制作简单网页的制作编辑编辑 设置水平线n在光标处插入了默认格式的水平线。原光标处人民邮电出版社简单网页的制作简单网页的制作编辑编辑 修改水平线鼠标单击选中水平线，单击右键，从弹出的快捷菜单中选“水平线属性”。人民邮电出版社简单网页的制作简单网页的制作编辑编辑 水平线属性n宽度：既可以取相对百分比值；也可取绝对像素质n高度：水平线高度n水平线对齐方式n水平线颜色人民邮电出版社简单网页的

8、制作简单网页的制作编辑编辑 段落对齐 概念与word相同这是左对齐这是居中这是右对齐人民邮电出版社简单网页的制作简单网页的制作编辑编辑 例：人民邮电出版社frontpage网页模板网页模板 frontpage与word相似，提供了一系列网页模板，你可以利用它更方便的制作网页。 选用模板 人民邮电出版社frontpage网页模板网页模板 打开的网页模板人民邮电出版社网页模板 空白页 书目：按字母顺序来排列参考书目，每个书目都有自己的书签，可能时可链接到相关的文本内容。 意见反馈表单：一种表单形式，用来调查、收集用户或读者的信息 常见问题：用来为浏览者提供常用信息的网页，其中包括了一个问题的索引和

9、一些常问的问题 狭窄的左对齐的正文：左边文字，右边插入图片。 狭窄的右对齐的正文：右边文字，左边插入图片。 用户注册：提供类似网站用户注册的功能。 人民邮电出版社网页模板 “狭窄的右对齐的正文”模板示例人民邮电出版社超链接 构成网页的html（超文本标记语言），最显著的特征就是超链接。对感兴趣的内容，只需用鼠标点击它，就可以得到进一步的详细信息。 无论是文字还是图片，都可以成为超链接的对象。 被链接到的地方可以是另一个超文本文件，也可以是当前文件的某指定位置（书签 ）。人民邮电出版社超链接 文字上的超链接1. 选中文字2. 单击“超链节”按钮人民邮电出版社超链接 3. 创建超链接1. 选中要链

10、接的文件3. 也可以填入网站地址，如：2. 或点击该按钮，选择其它位置的html网页文档。人民邮电出版社超链接 4. 创建好的文字链接颜色改变了，且有下划线。 5. 当鼠标移到存在链接的文字上时，鼠标形状变成了手的样子，单击后能实现链接，打开所指示的网页文件。人民邮电出版社超链接 6. 按照上述设置超链接，打开的链接文档是在原来网页窗口上，如果想保留原来窗口，可把单击链接网页打开到新窗口上。人民邮电出版社超链接 7. 也可以建立一个电子邮件地址的链接 。1. 点击邮件地址链接按钮2. 填上邮件地址人民邮电出版社超链接 修改超链接 选择需要修改链接的文字。 单击工具栏中的“超级链接” 按钮，打开

11、“编辑超级链接”对话框。 输入新站点的地址，或新文件名。人民邮电出版社超链接 取消超链接 选择需要修改链接的文字。 单击工具栏中的“超级链接” 按钮，打开“编辑超级链接”对话框。 删除“url”栏中的地址，或文件名。人民邮电出版社超链接 设置书签及建立链接 书签：是网页文档中的位置标志。 作用：供标识一个网页文档中的链接跳转位置。 例：同一个文档的目录与具体内容的对应。目录1目录2目录3内容1内容2内容3书签1书签2书签3超链接1网页文档网页文档人民邮电出版社超链接 设置书签 选择要作为书签的文本 在“插入”菜单上，单击“书签”。 打开“书签”对话框，填入书签名。nforntpage中被加上书签的文字，下面显示一条点下划线。但用浏览器浏览时，页面上并无任何不同。 人民邮电出版社超链接 建立到书签的超链接 选中文本 单击工具“超链接”按钮，打