第8章 网页制作软件FrontPage 2003,任务一 创建站点、网页，插入相关元素 点击进入 任务二 网页布局及发布、表单的创建 点击进入 尾声 点击进入,返回目录,任务一 创建站点、网页，插入相关元素,会FrontPage 2003的启动与退出。 能掌握FrontPage 2003的编辑方式与视图。 能熟练掌握创建站点和网页编辑的方法。 能熟练掌握插入对象和创建超链接的方法。 能理解HTML的基本概念。,窦文轩成了老板的红人，大家也日渐对他恭敬起来。 宣传部主任亲自跑到窦文轩的办公桌前。 “老弟，求你点儿事？” “主任，您这么客气我可不敢当，有话就直说吧！”窦文轩挺客气。 “上午老板说了，让我搞一个关于节日的网站，”主任的脸红的像斗牛士手中的布，“你也知道老哥的水平，我可弄不了。” “要不我替你做一下？”窦文轩小心地试探。 “那太好了，今天晚上你没事吧，咱们好好喝两杯。”主任高兴得不得了。 “别跟我客气啊，客气我可就不帮了。”窦文轩言不由衷。 窦文轩胸有成竹，关键是他最近可没少补习计算机知识，把从学校带的那本书都快背过了。,要创建一个介绍关于“中国节日”专题的网站，其中包括关于“春节”、“元宵节”、“清明节”、“端午节”的四个网页，首先要进行的工作就是先创建站点，再分别制作四个节日网页，下面以“春节”网页为例介绍创建简单网页并插入相关元素的方法，其设计完成后的界面如图所示。,步骤一：启动FrontPage 2003 步骤二：创建站点 点击进入 步骤三：在站点中新建网页 点击进入 步骤四：网页中文本的编辑 点击进入 步骤五：设置网页属性 点击进入 步骤六：插入对象 点击进入 步骤七：创建超链接 点击进入,返回章目录,步骤二：创建站点,（1）在“文件”菜单中选择“新建”命令，弹出“新建”任务窗格，如左图所示。 （2）在“新建网站”选项区域中选择“由一个网页组成的网站”选项，弹出“网站模板”对话框，如右图所示。,“新建”任务窗格 “网站模板”对话框,新建站点,（3）在对话框中的“指定新网站的位置”文本框中输入存储站点的文件夹。 （4）双击“只有一个网页的网站”模板，新建站点，如图所示。,返回任务实施,步骤三：在站点中新建网页,（1）在“文件”菜单中选择“新建”命令，弹出“新建”任务窗格。 （2）在“新建”任务窗格中选择“其他网页模版”选项，弹出“网页模版”对话框，如图所示。,（3）选择“普通网页”模板，单击“确定”按钮，新建的网页显示在FrontPage 2003窗口中，可以对其进行编辑和修改等操作，如图所示。 （4）选择“文件”|“另存为”命令，弹出“另存为”对话框。在对话框的“文件名”文本框中输入网页文件名“春节”，在“保存在”下拉列表框中选择存放位置，设置完成后单击“保存”按钮。,返回任务实施,步骤四：网页中文本的编辑,1输入文本 2设置文字格式,设置字体格式,3设置段落格式,返回任务实施,步骤五：设置网页属性,返回任务实施,选择“文件”菜单中的“属性”命令，或者在网页的任意区域右击，在弹出的快捷菜单中选择“属性”命令，都可以弹出“网页属性”对话框，如图所示。,“网页属性”对话框,步骤六：插入对象,1插入水平线,2插入图片,“图片”对话框,设置图片属性,3插入字幕 将插入点定位在要插入移动字幕的位置，选择“插入”|“组件”|“字幕”命令，弹出“字幕属性”对话框，如图所示。,4插入交互式按钮 交互式按钮是一种动感按钮，当访问者将鼠标指向该按钮时就会改变颜色或形状。将插入点定位在要插入交互式按钮的位置，选择“插入”|“组件”|“交互式按钮”命令，弹出“交互式按钮”对话框，如图所示。,“交互式按钮”对话框,返回任务实施,步骤七：创建超链接,返回任务实施,选定要定义超链接的文本或图片，单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令，打开“编辑超链接”对话框，如图所示。,“编辑超链接”对话框,1HTML简介 2HTML文件的基本构成 3FrontPage 2003的主要功能 4FrontPage 2003中的视图 （1）网页视图 （2）文件夹视图 （3）报表视图 （4）超链接视图 （5）任务视图 （6）导航视图,返回章目录,任务二 网页布局及发布、表单的创建,能熟练掌握FrontPage 2003的表格的创建和使用。 能熟练掌握FrontPage 2003的框架的创建和使用。 能熟练掌握FrontPage 2003的表单的创建和使用。 会FrontPage 2003的网页的发布和维护。,“兄弟，搞的怎么样了？”主任一脸的堆笑。 “快完了，我已经做了四个网页了，”窦文轩边跟一叶知秋聊天，边回答。“把它们合并起来，稍微修饰一下就彻底完成了。” “那就好，你忙吧。”主任满意地走了。,要创建一个介绍关于“中国节日”的专题网站，已经设计了关于“春节”、“元宵节”、“清明节”、“端午节”的四个网页，下面要进行工作就是把各个网页组织在一起，进行整体布局，并创建一个征求反馈意见的网页，最后进行发布。这样首先就要建立一个带表格的网页作为目录，然后创建一个表单页面，再通过创建框架把这些网页进行整体的布局，最后进行发布。网站设计完成后的界面如图所示。,步骤一：创建表格 点击进入 步骤二：创建表单 点击进入 步骤三：创建框架 点击进入 步骤四：网页的发布 点击进入,返回章目录,步骤一：创建表格,使用菜单命令“插入”|“表格”，弹出如左图所示的对话框，可以对插入的表格进行精确的设置，包括行和列的数目、边框尺寸以及单元格宽度等。根据实际情况，选择表格为4行1列，背景颜色为水绿色。然后在插入的表格中输入文字，并最后在“表格属性”对话框中调整表格，完成后的表格界面如右图所示。,返回任务实施,步骤二：创建表单,首先在需要添加表单的位置单击；选择“插入”|“表单”|“表单”命令，如图所示。,首先输入文字“姓名”，在其后插入“文本框”表单域，然后输入文字“性别”，在其后插入两个“选项按钮”表单域，并在对应的“选项按钮”位置输入文字“男”、“女”，最后输入文字“建议”，并在其后插入“文本区”表单域。完成后的界面如图所示。,返回任务实施,步骤三：创建框架,1创建网页模板 选择“文件”|“新建”|“网页”命令，打开“新建”窗格，如左图所示。 选择“其他网页模板”选项，弹出“网页模板”对话框，如右图所示。,“新建”窗格 “网页模板”对话框,选择“横幅和目录”的框架网页，打开如图所示的界面。,“横幅和目录”的框架网页,2创建框架超链接 首先单击横幅区的“设置初始网页”按钮，弹出如图所示的对话框。,选择已准备好的横幅网页，单击“确定”按钮，网页就变成图所示的界面。,用同样的方法插入目录网页，网页就变成如图所示的界面。,返回任务实施,步骤四：网页的发布,1设置远程网站属性 首先，选择“FTP”作为远程Web服务器，如图所示。然后在“远程网站位置”文本框中输入主机名称，如“ftp:/ftp.czc.net.cn”。如果网站需要上传到指定目录则需要在“FTP目录”文本框中输入目录名。 2选择需要上传的文件,返回任务实施,网站和网页设计的一些基本原则。 1目标明确，重点突出 2主题鲜明，层次清晰 3合理设置栏目 4正确定位整体风格 5页面布局合理 6色彩搭配，和谐统一 7多媒体功能使用得当,返回章目录,尾声,窦文轩把班主任要的数据库复制到优盘上，就直奔学校了。 他今天特意打扮了一下：小分头打上了嗜喱，一身的西装革履，皮鞋擦得锃亮。窦文轩要让一向瞧不起自己的班主任看看，他是怎样出人头地的。 窦文轩闭上眼也能找到班主任的办公室，他在这里呆的时间几乎和上课时间一样多，因为班主任经常让他在门边上站岗（窦文轩自己是这么认为的）和谈心。 “报告！”不知不觉他喊了一嗓子，顿时脸红了。他这才想起来自己已经不是学生了，哪里还用喊报告呢？ 窦文轩还是很小心地来到班主任的办公桌旁边，一看没人，电脑开着。 QQ的小企鹅在屏幕右下角乱蹦。 “哈哈，原来你也聊天！”窦文轩抓住班主任的软肋了，“平时不让我们聊，你自己不也聊么？” 窦文轩习惯地打开聊天窗口，一下子惊呆了。 “一叶知秋！”她就是“一叶知秋！”这怎么可能？ “呵呵，还是让你发现了。”班主任不知不觉已经来到了窦文轩的身后。 “这是怎么回事？”窦文轩以为自己是在做梦，差点就要咬自己一口。 “你啊，其实是很聪明的学生，就是不肯用功，”班主任说，“所以我就打听来你的QQ号，跟你聊天。希望能帮助你！” “哦！原来是这样啊！”窦文轩的脑袋开始有点转弯了。 “我给你介绍的几个面试单位，其实都是我的熟人。就是为了让你明白自己的不足！激发你的学习动力。” “” “最后这家报社的社长是我同学的父亲，我把你的事跟他说了，他对你也很感兴趣。” 窦文轩最后的骄傲也没了，原来自己的工作竟然是被安排好的。 “不过，你现在已经凭着自己的实力赢得了这份工作。”班主任说，“社长对你的工作非常满意，你已经是报社的正式员工啦！” “真的吗？”窦文轩不敢相信自己的耳朵。 “当然。” 窦文轩走出校门的时候，还在回味着刚才发生的事情，心里感觉有股暖流在汹涌。他回头望着渐渐朦胧的校园，忽然有一些咸咸的液体竟然流到他的嘴里。,实 验 指 导 实验一 创建站点、网页，插入相关元素 实验二 网页布局及发布、表单的创建 习 题,返回章目录,返回目录,参考文献,