Frontpage网站制作

第六讲 Frontpage2000进行物理“浮力”网站的开发 活动1 建立物理“浮力”网站 活动说明 网站是由一个一个的网页有机结合而成的。本活动通过利用FrontPage2000建立一个初二物理中的“浮力”网站，如图4.76所示，学会网站的制作过程。 图4.76 “浮力”网站框架 制作步骤 1．启动FrontPage2000。 单击任务栏上的“开始”→“程序”→“Microsoft FrontPage”，打开应用程序窗口。Microsoft FrontPage应用程序窗口由菜单栏、工具栏、视图栏、文件夹列表区域、编辑区等构成。 2．建立站点。 单击菜单栏中的“文件” → “新建”→“站点”，打开“新建”对话框。 选择“个人站点”图标，在“指定新站点的位置”框中，输入D:\my webs\fuli，单击“确定”按钮，得到如图4.77所示的站点。 图4.77 新建的个人站点 提示：在“新建”对话框的“站点”标签中，列出了FrontPage提供的各种站点模板和向导，可以根据自己的需要选择用来创建站点的模板或向导图标。 3．设置网站主题。 双击“文件夹列表”中的index.htm，打开网站的主页。在编辑区中鼠标右键单击，在弹出的快捷菜单中选择“主题”，弹出“主题对话框”。选中“主题对话框”中的“所有网页”、“工业型”，单击“确定”，为我们的网站加入主题，统一页面的整体风格。 提示：（1）“文件夹列表”中列出了站点中所包含的所有网页、图片以及其他文件。为了网站的安全性，各种网页文件、图片及其它文件的命名均为英文。双击“文件夹列表”中各页面文件可以打开相应的页面。打开的每个页面如图4.78所示，主要包含下面几个部分：①网页的标题；②两个导航栏：导航栏是一个包含了同该站点其他Web页的超级链接的文本或按钮的集合，它的作用在于建立各网页之间的相互联系；③网页内容（包括文字、图片和超链接等）。 图4.78 页面的基本构成 （2）主题是指页面中的文本、图像图形、颜色等页面元素一致的风格。风格一致的网站会给浏览者带来视觉上美的享受和吸引力。可以为所有网页加入同一主题，也可以根据自己的爱好或网站的特点对各个网页的主题进行单独设置。 （3）在FrontPage中，中括号中的文字（如图4.78中上部的导航栏）仅起注释作用，在浏览器中不会显示。 4．设置网页标题。 单击视图栏中的“网页”按钮，将网站切换到“网页”视图。 鼠标单击“网页标题”，网页标题的四周出现8个黑色方块，表示被选定。单击鼠标右键，在弹出的快捷菜单中选择“网页横幅属性”，即弹出“网页横幅属性”窗口（图4.78）。选中“属性”部分的“图片”，在“网页横幅文本”部分输入“浮力”。单击“确定”，这样即将网页标题由“主页（图4.77）”改为“浮力（图4.76）”。 图4.78 “网页横幅属性”窗口 注意： “网页横幅属性”窗口中的“属性”部分可以确定该网页横幅是否含有图片；“网页横幅文本”部分输入的则是网页的名称。 用上面的 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 将“相册”、“兴趣”、“喜好站点”三个网页标题分别改为“浮力产生的原因”、“阿基米德原理”、“物体沉浮的条件”。我们可以看到，主页左边导航栏的内容也随之改变，表明该超级链接的内容发生了变化。 5．添加和删除网页。 单击视图栏中的“导航”按钮，将网站切换到“导航”视图，如图4.79所示。单击“浮力”图标，即选定主页，再右键单击选择“新建网页”，这样就在主页下增加了一个子页，默认为“new page1”。单击“new page1”，选定，右键单击选择“重命名”，输入“浮沉条件应用”，即将网页标题设置为“浮沉条件应用”，这与步骤4中对网页标题的设置效果是一样的。按照同样的方法，新建子页“综合实践”。 单击选中“文件夹列表”中的“my fav3.htm”，再右键单击选择“删除”，即将该网页删除。 分别单击选中“文件夹列表”中各网页的名称（主页index.htm除外），右键单击→重命名，将其与网页的标题一一对应，分别为“csyy.htm”、“ ajmd.htm ”、“cftj.htm”、“cftjyy.htm”、“zhsj.htm”。 图4.79 导航视图 提示：（1）在导航视图中能够更方便的组织和调整网页，实现站点导航结构的设计：在要添加新建网页的图标下单击鼠标右键，从快捷菜单中选择“新建网页”、“外部超链接”、“重命名”、“删除网页”等命令即可实现相应功能操作。 （2）index.htm是网站的主页，即登录我们的网站后所见的第一个网页。每个网站都有主页，习惯上命名为index.htm或default.htm。 6．设置网页的导航栏。 双击“文件夹列表”中的index.htm，打开主页。将鼠标移到左侧的导航栏上，单击鼠标右键，在打开的快捷菜单中选择“导航栏属性”，弹出“导航栏属性”窗口。选中“子层”，“垂直”、“按钮”，将主页的导航栏设置成垂直排列的按钮（如图1）。 将鼠标移到上面的导航栏，同样单击鼠标右键，在打开的快捷菜单中选择“导航栏属性”，在弹出的“导航栏属性”窗口中选中“同一层”、“主页”，“水平”、“按钮”，将子页的导航栏设置成水平排列的按钮。 提示：导航栏是由一组文本或超链接构成的，用来快速浏览站点的主要网页。用户可以在站点任何网页的任何位置创建导航栏。将插入点置于要放置导航栏的位置，选择菜单栏中的“插入” →导航栏，在弹出的“导航栏属性”中设置导航栏的参数，单击“确定”即可。 7．站点的保存。 单击菜单栏中的“文件” →“保存文件”，将对网站的编辑保存到我们的站点中。 注意：对于网站的保存，要做到随做随存，避免因为一些原因使得自己的劳动成果付之东流； 8．预览效果。 单击编辑区域左下方的网页视图切换标签“预览”，或选择菜单栏中的“文件” →“在浏览器中预览”， 查看网页效果，对不符合设计的地方进行修改。 提示：在FrontPage网页视图下有三种显示方式：①普通方式：实现了网页编辑时的“所见即所得”的编辑方式，适用于各种用户对网页的创建、编辑、设计和维护；②HTML方式：显示网页的HTML代码；③预览方式：用于在制作网页的过程中随时查看实际效果。 9．发布站点。单击“文件”→“发布站点”，在弹出的对话框中“指定发布站点的位置”栏中填入发布网站服务器的地址，对于发布网页的高级选项，请单击“选项”按钮，所有设置完成后，单击“发布”按钮即可。 注意：网站服务器的地址需要和校园网或局域网的管理员联系。 活动2 设计网站主页“浮力” 活动说明 通过对图4.80主页的页面设计，学会如何进行网页的规划、创意与设计，如何在网页中添加文本、图片、滚动字幕、图片交换以及一些其他特殊效果等。 图4.80 主页index.htm 制作步骤 1．打开建立的站点。选择菜单栏中的“文件” →“打开”，弹出“打开文件”对话框，按照D:\my webs\fuli路径找到我们在活动1中已经建立的“浮力”站点，选择“index”，单击“打开”，即打开网站的主页，这样就可以直接对主页进行编辑了。 注意：主页通常作为一个网站的目录或索引。因此，主页的设计要体现一种风格，要拥有好的页面设计和引人入胜的内容，应用到教学中尤其重要。 2．制作滚动字幕“欢迎光临浮力专题研究网站”。 将光标置于上面的导航栏，单击菜单栏中的“插入” →“组件” →“字幕”，弹出“字幕属性对话框”，在“文本”框中输入“欢迎光临浮力专题研究网站”，并进行参数设置。单击“确定”按钮，则在当前位置插入滚动字幕。单击“预览”标签，切换到预览视图中查看字幕的效果。 3．插入表格。将光标至于“网页内容”编辑区，选择菜单栏中的“表格”→“插入”→“表格”，在插入点所在的行插入一个4行2列的表格。将光标置于表格内，右键单击弹出“表格属性”对话框，将边框粗细设置为“0”，建立隐藏式表格。 注意：在网页制作中，表格主要的作用是进行网页的规划。 4．在单元格中插入图片。将光标移至第一列第一行的单元格中，选择菜单栏中的“插入”→“图片”→“来自文件”，在弹出的“图片”对话框中单击“从计算机上选择一个文件”按钮，选择保存在光盘“素材→图片素材”中 “chuan2.jpg” 图片，单击“确定”即可。 5．“图片交换”效果。单击选中插入的图片“chuan2.jpg”，选择菜单栏中的“格式”→“动态HTML效果”，弹出“DHTML效果”对话框，选择一种事件（鼠标悬停）→选择一种效果（交换图片）→选择设置→选择图片→找到图片“fuli5.jpg”。将刚刚进行设置进行保存，预览效果（将鼠标放到图片位置就可以观察到图片交换效果）。 6．在单元格中插入文本。在FrontPage网页制作中，在表格中输入和编辑文本与Word是相似的，同时还可以将在Word文档中编辑好的艺术字插入到网页中来。 7．插入超链接。在表格下一行的中间位置输入“欢迎提出宝贵意见”，并拖动鼠标将其选中，选择菜单栏中的“插入”→ “超链接”，出现“创建超链接”对话框。单击“制作发送电子邮件的超链接”按钮，输入电子邮件地址，创建一个用于传送电子邮件消息的超链接。 提示：超链接的载体可以是文本或者图片。超链接可以指向万维网、文件系统中的网页或文件、新网页等。 8．加入背景音乐。单击菜单栏中的“文件” →“属性”，弹出“网页属性”对话框，在“常规”选项卡中设置“背景音乐”区域的位置栏处，单击“浏览”按钮，在“背景音乐”对话框中，单击“从计算机上选择一个文件”按钮，在“选择文件”对话框中，选择光盘“素材→声音素材”中的“back.mid” 声音文件，作为网页的背景音乐。 9．单击“文件” →“保存”。预览效果。 注意：保存时为了网站文件夹的整齐以及网站维护的方便，要把图片、音频、视频等分别保存在站点文件夹中的专门的文件夹中，如将图片都保存在站点中的image文件夹中。 保存图片步骤：单击“保存”，首先弹出“保存嵌入式文件”对话框，再单击“改变文件夹”，又会弹出“改变文件夹”对话框，单击选中image文件夹后，连续单击确定即将图片保存在image文件夹中。 网页标题 网页内容 导航栏 PAGE 1