计算机文化-第8章-网页设计基础课件.ppt

《计算机文化-第8章-网页设计基础课件.ppt》由会员分享，可在线阅读，更多相关《计算机文化-第8章-网页设计基础课件.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、出版社第十三章第十三章 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转换网页 保存同名的文件和文件夹人民邮电出版社FrontPage2000Frontpage2000是当今最为流行的网页制

3、作工具之一，它是微软公司Office2000软件包中的一个主要软件。具有易学易用的特点，深受一般网页制作者的欢迎。由于Frontpage2000是微软公司Office2000中的软件，其界面及操作与Word较相似。通过这部分内容的学习，要求大家掌握基本的网页制作方法，每个同学必须编制一个基本的网页。人民邮电出版社FrontPage2000界面界面视图网页视图：显示当前网页的内容；文件夹视图：显示当前站点存储的文件夹位置；报表视图：列出当前站点的各项统计数据；导航视图：显示当前站点与其它网页的链接关系；超链接视图：显示网页的链接结构图；任务视图：用于显示由工作组合作完成的大型网页编制的任务分配情

4、况、。Frontpage提供了建立网站的5个模板和3个站点向导，每个站点（模板）包含了多种网页。人民邮电出版社FrontPage2000界面界面显示方式普通方式：以Frontpage一般的方式显示制作的网页。HTML方式：显示Frontpage制作的网页的HTML语言文档。预览方式：以浏览器的方式显示所制作的网页。人民邮电出版社简单网页的制作简单网页的制作编辑编辑字体先拖动鼠标选中要操作的文字点击字体工具框，选择需要的字体人民邮电出版社简单网页的制作简单网页的制作编辑编辑字体n字号人民邮电出版社简单网页的制作简单网页的制作编辑编辑字型选中文之后按 相应按钮与Word相同人民邮电出版社简单网页的

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

6、age中没有行距和段间距的控制。在需要明显间隔的地方可以增加“分隔线”水平线人民邮电出版社简单网页的制作简单网页的制作编辑编辑设置水平线n在光标处插入了默认格式的水平线。原光标处人民邮电出版社简单网页的制作简单网页的制作编辑编辑修改水平线鼠标单击选中水平线，单击右键，从弹出的快捷菜单中选“水平线属性”。人民邮电出版社简单网页的制作简单网页的制作编辑编辑段落对齐 概念与Word相同这是左对齐这是居中这是右对齐人民邮电出版社简单网页的制作简单网页的制作编辑编辑例：人民邮电出版社Frontpage网页模板网页模板FrontPage与Word相似，提供了一系列网页模板，你可以利用它更方便的制作网页。选

7、用模板 人民邮电出版社网页模板空白页书目：按字母顺序来排列参考书目，每个书目都有自己的书签，可能时可链接到相关的文本内容。意见反馈表单：一种表单形式，用来调查、收集用户或读者的信息常见问题：用来为浏览者提供常用信息的网页，其中包括了一个问题的索引和一些常问的问题狭窄的左对齐的正文：左边文字，右边插入图片。狭窄的右对齐的正文：右边文字，左边插入图片。用户注册：提供类似网站用户注册的功能。人民邮电出版社网页模板“狭窄的右对齐的正文”模板示例人民邮电出版社超链接文字上的超链接1.选中文字2.单击“超链节”按钮人民邮电出版社超链接3.创建超链接1.选中要链接的文件3.也可以填入网站地址，如：2.或点击

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

9、链接选择需要修改链接的文字。单击工具栏中的“超级链接”按钮，打开“编辑超级链接”对话框。删除“URL”栏中的地址，或文件名。人民邮电出版社超链接设置书签及建立链接书签：是网页文档中的位置标志。作用：供标识一个网页文档中的链接跳转位置。例：同一个文档的目录与具体内容的对应。目录1目录2目录3内容1内容2内容3书签1书签2书签3超链接1网页文档网页文档人民邮电出版社超链接设置书签选择要作为书签的文本在“插入”菜单上，单击“书签”。打开“书签”对话框，填入书签名。nForntpage中被加上书签的文字，下面显示一条点下划线。但用浏览器浏览时，页面上并无任何不同。人民邮电出版社超链接建立到书签的超链接 选中文本单击工具“超链接”按钮，打开“创建超链接”窗口。选择书签人民邮电出版社超链接到书签的超链接：可以是另一个网页文档的书签，先在“URL”栏中输入要链接文件的路径和名字，再在“书签”栏中，选择相应的书签。人民邮电出版社超链接去掉书签选中书签文本在“插入”菜单上，单击“书签”。打开“书签”对话框，选中要删除的书签名点击“清除”按钮在定义书签中，多个书签不能重名。人民邮电出版社