网页制作基础1课件

网页制作基础

HTML语言认识认识FrontPage2000创建站点建立网页网页的设计框架网页设计动态网页设计交互式表单站点的发布认识FrontPage2000Frontpage2000介绍启动FrontPage2000认识FrontPage2000窗口

FrontPage的主要功能

FrontPage2000集成了两大功能模块——网页制作模块和网站管理模块。

FrontPage2000网页制作模块主要有以下一些功能：（1）强大的编辑功能（2）制作编辑表格功能（3）图片处理功能（4）超级链接自动修复功能（5）制作表单（6）使用网页框架（7）提供丰富的组件（8）插入外部程序。（9）使用数据库（10）支持动态HTML和CSS样式表启动FrontPage2000在“开始”菜单中选择“程序”级联菜单，单击“MicrosoftFrontPage”命令，启动FrontPage。

FrontPage的窗口由标题栏、菜单栏、工具栏、视图栏、编辑窗口（工作区）、显示网页的方式及状态栏组成。正常编辑环境自动生成的HTML语句预览网页效果基本内容区文本图象表格背景声音超级链接用FrontPage2000制作网页“所见即所得”的网页编辑普通：“页面视图”，所见即所得的编辑环境；HTML:“源代码视图”，直接通过修改HTML标记命令编辑网页；预览：“打印预览视图”，查看IE浏览器窗口中显示的效果。FrontPage的网站管理功能FrontPage2000属于Office2000家族的成员,易于上手:FrontPage“所见即所得”的网页编辑环境可进行与文件和文件夹有关的操作，如新建、复制、删除、重命名等。可从网站的总文件数目、超链接数、慢速网页、断开的超链接等不同的角度了解网站的情况。记录站点的结构，即站点内各网页的层次结构图。可以任意网页为参考点，形象地指示出通过超链接相联的其他网页为各个成员分配任务，协调成员之间的工作等任务。认识FrontPage2000窗口

FrontPage有6种视图模式，这为网页的编写、站点的管理提供了极大的方便。可以使用不同的视图方式来浏览站点、编辑和修改站点的结构。

1．“网页”视图

“网页”视图

2．“文件夹”视图

“文件夹”视图

3．“报表”视图

“报表”视图

4．“导航”视图“导航”视图

5．“超链接”视图

“超链接”视图

单击视图栏中的“任务”按钮，切换到“任务”视图模式。将需要做的工作以任务分配形式显示出来，进行简单的管理。

6．“任务”视图创建站点

新建站点站点的基本操作

建立新的网站需求分析规划网站收集内容创建WEB站点制作网页测试网站及网页发布网站维护与更新1、创建网站的一般过程选择主题规划网页（结构与链接关系）组织素材选择视觉外观设计有效的页面布局制作具体网页发布网站信息建立新的网站网站的设计原则及标准一、设计的原则

1.总体原则

2.主题鲜明、结构合理

3.组织网页：将丰富的内容和多样的形式组织在一个统一的结构中，表达出设计者的思想和情感，实现形式和内容的统一。

4.设计网站的主页二、设计标准首先整个网站应该保持一致的风格，给浏览者以整体的美感。多样化的格式和标志会使网页更生动，但要把握一个“度”。其次要控制网页的大小，如果文件过大、图片过多会使网页的浏览很慢，而使浏览者失去耐心，整个网站的吸引力也就随之下降。最后网站的全部内容都要紧扣网页设计的目标，使网站的主题鲜明。准备工作要设计一个网站首先要准备好以下项目：申请域名；申请空间；网站规划；选择配色方案；准备素材及选用设计工具；设计网站。具体设计和规划一、确定网站建立的目的二、涉及的内容三、收集资料四、安排布局五、绘制流程图网站基本结构网站是由网页组成的，网页之间是由超链接来连接的，其链接方式三种：线性网站、树状网站、非线性网站线性网站：一页连接一页树状网站：分层排列非线性网站：上述两种网站的结合最简单的方法：直接在网页视图中制作每一个网页文件最常用的方法：本地机中的某个文件夹指定为FrontPage站点，利用Frontpage管理这些网页最好的方法：使用真实的站点服务器……网站创建的基本方法新建站点

1．站点概念

2．新建站点

3．修改站点

站点实际上是一个文件夹，这个文件夹和普通的文件夹相比，具有了一些特殊的属性，它是计算机上的一个站点，而不是单纯的文件夹。

1．站点概念

启动FrontPage，单击“文件”菜单，选择其中的“新建”级联菜单，单击“站点”命令，打开“新建站点”对话框。

2．新建站点“新建站点”对话框

单击“工具”菜单，选择“站点设置”命令，打开“站点设置”对话框（或在导航视图中单击鼠标右键，从弹出的快捷菜单中选择“站点设置”命令，也可以打开此对话框）。在“常规”选项卡中可以改变站点的名称。

3．修改站点“站点设置”对话框站点的基本操作1．打开和关闭站点2．删除站点

单击“文件”菜单中的“打开站点”命令，打开“打开站点”对话框。1．打开和关闭站点图7.2.3“打开站点”对话框

单击“编辑”菜单栏中的“删除”命令。打开“确认删除”对话框。2．删除站点如果要将整个站点删除，则选中“删除整个站点”单选按钮；如果不想将该站点下的文件删除，则可以选中“只删除此站点中的FrontPage信息，保留所有的其他文件和文件夹”单选按钮，然后单击“确定”按钮。采用后一种方法删除站点后，该站点将变为一个普通的文件夹。“确认删除”对话框建立网页新建网页网页的基本操作

新建网页创建一个新的网页有三种方法：使用空白页、使用向导和使用模板。单击“文件”菜单，从下拉菜单“新建”的级联菜单中选择“网页”命令，打开“新建”对话框。

单击“常规”选项卡，在列表框中显示了FrontPage提供的创建网页的26种模板，使用各类模板可以创建不同类型的网页。“新建”网页对话框网页的基本操作

1．打开网页2．保存网页

⑴从本地磁盘或局域网中打开网页。

1．打开网页单击“文件”菜单中的“打开”命令，或单击工具栏上的“打开”按钮。打开“打开文件”对话框。在“查找范围”下拉列表框中选择站点，从文件列表中选定要打开的文件。“打开文件”对话框

⑵从Web站点中打开网页。

单击“搜索Web”图标按钮，打开IE浏览器窗口，从中选择所需的网页。

⑶打开最近使用过的网页。单击“文件”下拉菜单中的“最近使用的文件”级联菜单，从中选择最近访问过的网页即可。

单击“文件”菜单中的“保存文件”命令，打开“另存为”对话框，可以选择网页文件的“保存位置”，输入网页文件的“文件名”，选择网页文件的“保存类型”。单击“更改”按钮，在打开的“设置网页标题”对话框中可以更改网页的标题。

2．保存网页“另存为”对话框

网页的设计

文本编辑设置网页背景与插入图像表格超级链接文本编辑1．编辑文本2．图像列表3．可折叠列表4．水平线

FrontPage中经常使用的编辑操作有：选中文本、删除、剪切、复制、粘贴、查找、替换、文本插入等。文字格式设定有：字体、字型、字号、字体颜色、字符间距及各种字体修饰等。段落格式设定有：行间距、段间距、左右缩进、对齐方式等。

1．编辑文本文本输入示例

图像列表就是将普通项目符号列表中的项目符号用图像代替。

2．图像列表“项目符号和编号方式”对话框图像列表

通过折叠列表可以使列表像资源管理器中的文件夹一样，用鼠标单击才能显示下一级列表，再用鼠标单击又折叠起来，从而使页面清晰整洁。

3．可折叠列表可折叠列表

水平线用于分割网页中的不同内容，可以把网页划分成不同的主题部分。通常用于划分标题和主体部分。

4．水平线“水平线属性”对话框设置网页背景与插入图像

1．设置网页背景2．插入图像

网页背景包括：背景颜色和背景图片。

1．设置网页背景⑴背景颜色鼠标右击网页编辑区，从弹出的快捷菜单中单击“网页属性”命令，打开“网页属性”对话框。单击“背景”选项卡，在“颜色”区中，可以从“背景”下拉列表中选择一种背景颜色，也可以进一步从“其他颜色”中选取自定义的颜色。“网页属性”对话框⑵背景图片

在“网页属性”对话框中，选中“格式”区中的“背景图片”复选框，再单击“浏览”按钮，从打开的“选择背景图片”之“选择文件”对话框中查找满意的图片，或单击“剪贴画”按钮，可以从Microsoft剪贴画库中获取喜欢的图案。“选择背景图片”对话框

与背景图片类似，插入图片的具体方法：单击“插入”菜单，选择“图片”级联菜单中的“来自文件”命令，打开“图片”对话框，查找合适的图片文件，单击“确定”按钮。也可以在“图片”对话框中的“URL”中输入网址，从网上搜索适合的图片；或单击“剪贴画”按钮，选择适合的图案。

2．插入图像表格

在FrontPage中对表格的操作与Word中的操作方法基本一致，有四种创建表格的方法：“插入表格”命令、“插入表格”按钮、手动绘制和文本转换为表格。鼠标右击表格区，单击“表格属性”命令，打开“表格属性”对话框，可以设置“布局”的对齐方式、单元格边距与间距；“边框”的粗细、颜色；“背景”的颜色及使用背景图片等。

制作表格的样例“表格属性”对话框超级链接

1．创建指向站点内的网页或文件夹的超链接2．创建指向Web站点上的网页或文件夹的超链接3．创建指向电子邮件的超链接4．删除超链接

1．创建指向站点内的网页或文件夹的超链接在网页视图模式下，先选中需要创建超链接的对象，单击工具栏上的“插入超链接”按钮，再从已经建立的网站中搜索网页文件。“创建超链接”对话框2．创建指向Web站点上的网页或文件夹的超链接

在网页视图模式下，先选中需要创建超链接的对象，单击工具栏上的“插入超链接”按钮，再从URL下拉列表框中输入或选择要链接的Web站点地址，如站点。3．创建指向电子邮件的超链接

在网页视图模式下，先选中需要创建超链接的对象，打开“创建超链接”对话框，在URL下拉列表框中输入mailto:，或单击“制作发送电子邮件的超链接”按钮，打开“创建电子邮件超链接”对话框，然后输入电子邮件地址。

“创建电子邮件超链接”对话框

在网页视图模式下，先选中已建立超链接的对象，单击工具栏上的“插入超链接”按钮，打开的“编辑超链接”对话框，将URL下拉列表框中的链接地址删除。或鼠标右击已建立超链接的对象，从弹出的快捷菜单中单击“超级链接”级联菜单中的“取消超级链接”命令。4．删除超链接框架网页

创建框架网页

保存框架网页

创建框架网页

FrontPage为创建框架网页提供了10种网页模板，学习其中的“嵌套式层次结构”框架模板来创建框架网页的方法。

框架网页样例：“嵌套式层次结构”框架网页示例

⑴单击“文件”下拉菜单中的“新建”，从级联菜单中选择“网页”命令，打开“新建”对话框，单击“框架网页”选项卡。

“新建”之“框架网页”对话框

⑵选择“嵌套式层次结构”框架模板。创建了框架网页中各框架的初始网页后，就可以编辑、修改网页元素，添加超链接等。

“嵌套式层次结构”框架网页保存框架网页在网页视图模式下，先选中要保存的框架网页，然后单击工具栏上的“保存文件”按钮，打开“另存为”对话框。要将每一个框架中所涉及到的网页都要保存。

框架网页“另存为”对话框

设计动态网页

在网页中加入一些动态元素，如动态按钮、滚动字幕、计数器等，可以使网页生动、活泼。这种含有动态元素的网页称为动态网页（DHTML）。

1．动态字幕2．悬停按钮3．横幅广告4．站点计数器

创建水平滚动的文本消息字幕。

1．动态字幕

⑴在网页视图模式下，将光标放在要插入字幕的位置，或选择要显示在字幕中的文本。

⑵单击“插入”菜单中的“组件”菜单，从级联菜单中选择“字幕”命令，打开“字幕属性”对话框。在“文本”框中输入字幕的内容，文本内容的长度没有限制（也可以在网页中选择文本，将其设置成字幕）。“字幕属性”对话框

⑴在网页视图模式下，将光标置于要插入悬停按钮的位置。单击“插入”菜单中的“组件”菜单，从级联菜单中选择“悬停按钮”命令。2．悬停按钮

⑵在“按钮文本”文本框中，输入将显示在悬停按钮上的文本内容。在“按钮颜色”下拉列表框中为按钮选择一种前颜色。还可以在“背景颜色”下拉列表框中为按钮选择一种背景颜色。

⑶设置按钮的悬停效果。包括：“效果”（共有七种）及“效果颜色”等参数值。“悬停按钮属性”对话框

⑴在网页视图模式下，将光标置于要创建横幅广告的位置。单击“插入”菜单中的“组件”菜单，从级联菜单中选择“横幅广告管理器”命令，打开“横幅广告管理器属性”对话框。

3．横幅广告

⑵在“宽度”、“高度”文本框中输入横幅广告显示区域的大小，其大小应该与广告图片的最大尺寸一致，该数值以像素为单位。在“过渡效果”下拉列表框内选择横幅广告中每个图片之间切换的效果，并在“每幅图片显示（秒）”文本框中输入每张图片在横幅广告中显示的秒数。

⑶若希望横幅广告具有超链接功能，则在“链接到”文本框中输入超链接的目标URL。

⑷单击“添加”按钮，从“添加横幅广告图片”对话框中选择要添加的图片文件。按照同样的方法，将其他的图片也添加到列表框中。通过“上移”、下移“按钮可以改变列表框中图片文件的显示顺序，这个顺序也是横幅广告中图片的显示顺序。“横幅广告管理器属性”对话框“添加横幅广告图片”对话框

在网页视图模式下，将光标移到要放置计数器的位置，单击工具栏上的“插入组件”按钮，从下拉菜单中选择“站点计数器”命令，打开“站点计数器属性”对话框。在“计数器样式”列表栏中，可以选择自己喜欢的计数器类型。

4．站点计数器“站点计数器属性”对话框设计交互式表单

对于初学者，创建表单首选的方法是使用表单向导。启动表单向导的方法是：单击“文件”菜单中的“新建”菜单，从级联菜单中选择“网页”命令，在打开的“新建”对话框中双击“表单网页向导”模板。

“表单网页向导”对话框之一“表单网页向导”对话框之二申请电子信箱表单示例站点的发布

发布一个站点就是将已制作完成的站点上的文件复制到已经存在的某个站点文件夹中