《《网页制作教程（第二版）》-齐建玲-电子教案 CH2 创建站点》由会员分享，可在线阅读，更多相关《《网页制作教程（第二版）》-齐建玲-电子教案 CH2 创建站点（50页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： FrontPage 2003和Dreamweaver 8的基本操作 利用FrontPage 2003和Dreamweaver 8创建站点的方法 利用FrontPage 2003和Dreamweaver 8管理站点的方法 能够为站点添加网页 导入文件到当前站点的方法 发布站点的方法,第2章 创建站点,21世纪之初，微软公司推出了Office的升级版本Office 2003。FrontPage2003是其中的一个重要组件，也是目前市场上最为优秀的网页制作软件和开发工具之一。它继承了FrontPage 2003等以前版本的传统功能，采用了与Office 2003其他
2、组件一致的工作界面，在站点与网页向导、网页编辑、表单与框架、动态HTML技术等多方面进行了改进，并且新增了许多功能，是适合初学者使用的优秀软件。,2.1 FrontPage 2003概述,2.1.1 FrontPage 2003简介,1）设计网站 FrontPage 2003 具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户实现网站创意，而无需任何HTML知识。 （1）经过改进的工作环境和更大的设计区域 FrontPage 2003 集中了所有 Web 设计功能，并让用户可以全景查看整个网站，从而使得网站和网页设计比以前更容易。更大的设计区域还减少了滚动操
3、作。,1FrontPage 2003的新增功能,（2）布局表格和单元格 通过使用布局表格和单元格，可以创建具有专业外观的网页布局。布局表格是为网页创建的框架。布局单元格是该框架内的区域，其中包含网页中的内容（包括文本、图像、Web部件和其他元素）。可以选择预定义的布局列表，也可以自己绘制，总之，在做出最后决定前可以尝试多种布局。 （3）图像描摹 在使用图像描摹时，可以在图形程序中创建网页的外观模型图像，并将其作为直观参照，以便在FrontPage 中创建或描摹网页设计。可以显示或隐藏图像、将其设置为不透明以及更改其位置。,（4）动态Web模板 通过将动态Web模板附加到网页上，可以快速创建共享
4、相同布局的HTML网页。可以指定模板内的某些区域可以编辑，而将其他区域保护起来。 （5）网页标尺和布局网格 只要有好用的定位参照（如网页标尺和背景布局网格），精确设计和布置就会变得十分容易。通过选择测量单位、线条样式和颜色以及间距选项，可以自定义标尺或网格。,（6）设计阶段层 在FrontPage 2003中，层可以包含HTML元素，如文本和图形。在“层”任务窗格中，可以查看网页上所有层的详细列表。可以重叠、嵌套、显示或隐藏网页上的层。也可以通过使用“行为”任务窗格使层具有动画效果。 （7）经过改进的主题 FrontPage 2003使用级联样式表而不是HTML来应用主题，所以文件变得更小、更
5、透明并且更容易控制和修改。,2）开发网站 FrontPage 2003具有改进的创作环境、新的图形功能、强大的编码工具、以及创建交互式脚本的工具。此外，FrontPage 2003可以生成有效和干净的HTML，能让用户更好地控制代码。 （1）网页视图 用户在利用FrontPage 2003设计网页时，可以在下列任何网页视图中处理网页： “设计”视图 在“设计”视图中设计并编辑网页。此视图可以提供与使用设计工具创建网页一样的近似“所见即所得”的创作体验。,“代码”视图 亲自查看、编写和编辑HTML代码。使用 FrontPage 2003中的优化代码功能，可以创建干净的HTML，并且可以更容易地删
6、除任何不想要的代码。 “拆分”视图 以拆分的屏幕格式检查并编辑网页内容，该视图能让用户同时访问代码视图和设计视图。 “预览”视图 在无需保存网页的情况下，显示与网页在Web浏览器中的外观相近似的视图。使用此视图可以查看创建网页时所做的更改。,（2）图形工具 改进的图形支持能够更容易处理来自其他程序的图形。新的界面清楚地解释了将图像导入网站时的默认行为，以及在编辑这些图像时将会出现的行为。这使用户可以更好地控制图像的显示和保存方式。 （3）脚本和编码工具 行为是脚本选项，可用来向网页中的文本或其他元素快速添加交互性或增强功能。,（4）专业编码工具 现在，FrontPage 2003 在代码视图中
7、提供了智能感知技术，以减少代码中的错误。智能感知包括语句完成，并显示正在编写的代码的可用参数。智能感知可用于下列环境：HTML、级联样式表（CSS）、可扩展样式表语言（XSL）、JScript或JavaScript、VBScript以及ASP.NET。,标题栏是Windows应用程序所共有的，主要用来显示应用程序的文件名称，如果尚未赋予名称，FrontPage会自动命名为new_page_1.htm、new page_2.htm、。,2. FrontPage 2003工作界面,（1）标题栏,菜单栏位于标题栏的下方，它由11个菜单按钮组成。FrontPage 2003中包含的所有命令都可以在这1
8、1个菜单中找到。,（2）菜单栏,常用工具栏提供了最常用命令的快捷按钮，如保存、打开、新建文档，移动、复制数据，撤消或恢复操作等，使用户执行这些命令的时候更方便快捷且易学易记。,（3）常用工具栏,格式工具栏提供了最常用设置格式命令的快捷按钮，比如设置数据的字体、对齐方式，设置单元格的背景色等，使用户设置这些格式的时候更方便快捷。,（4）格式工具栏,在 Microsoft FrontPage 2003中，可以使用几种不同方法来查到网站内容，以便帮助用户有效地设计、发布和管理网站。,（5）窗口栏,用来显示FrontPage 2003正在完成的任务，一般位于窗口的右侧，点击任务栏右边向下的箭头，可以打
9、开一个任务下拉列表框，从中选择相应的任务项就可打开所需要的任务窗格。,（6）任务窗格,网页视图是进行网页编辑的操作界面。在网页视图中还有几种显示状态，一般情况下包括“设计”视图、“代码”视图、“拆分”视图和“预览”视图以及其他编辑状态。,3. FrontPage 2003的视图,（1）“网页”视图,可以使用“文件夹”视图来直接处理文件和文件夹，并组织网站内容。与 Microsoft Windows 资源管理器相似，还可以在此视图中创建、删除、复制和移动文件夹。,（2）“文建夹”视图,可以使用“远程网站”视图发布整个网站，或有选择地发布个别文件。还可以在两个或更多个位置之间同步文件，即确保包含相
10、同内容的网站都包含最新的更改。,（3）“远程网站”视图,通过“报表”视图，可以在运行报表查询后分析网站内容。可以计算网站中文件的总大小，指出哪些文件没有与其他文件链接，标识出慢速网页或过期网页，按负责处理文件的任务或人员对文件进行分组，等等。,（4）“报表”视图,“导航”视图提供了网页的分层视图。通过此视图，可以添加新的导航网页，也可以通过鼠标的拖动修改导航网页所处的层或者导航网页之间的相互关系。,（5）“导航”视图,在FrontPage中，“超链接”视图可以将网站中超链接的状态显示在一个列表中，此列表既包括内部超链接，又包括外部超链接，并用图标指示超链接已通过验证或已中断。,（6）“超链接”
11、视图,“任务”视图以表格形式显示网站中的所有任务，并在各个标题下提供有关各项任务的当前信息。在制作一个网站时，由于工作量大，所以在网站制作之前往往需要预先制作一个计划，这样就可以有条不紊地进行网站设计。“任务”视图就是为此目的而设计的。在“任务”视图中，可以方便地建立任务或查看任务完成情况等。,（7）“任务”视图, 选择“文件”| “新建” 命令，打开“新建”任务窗格； 单击 “新建站点”下“其他网页模版”超级链接，打开“网页模板”对话框; 单击站点模板中的“空白站点”图标，在“指定新站点的位置”文本框中输入新站点的位置。单击“确定”按钮.,1. 创建新站点,2.1.2 创建站点,注意：在创建
12、站点选择路径时，最好选择某个文件夹作为站点，而不要选择某个磁盘分区（例如F盘）作为站点，否则可能会导致整个磁盘分区瘫痪。,2导入一个已存在的站点 首先选择“文件”菜单下的“导入”命令，然后根据提示，依次选择需导入的站点即可。 3将文件夹转换为站点 FrontPage 2003中可以将一个已经存在的文件夹转换为站点。,1打开站点 单击工具栏中的“打开”按钮，弹出“打开文件”对话框，在“打开文件”对话框中选择要打开得网页，选中之后，单击“打开”按钮。 2重命名站点 在创建站点时，如果没有为站点创建一个好的名称，可以重新为站点命名。重命名Web站点时，FrontPage 2003会用新站点名称自动更
13、新所有内部超链接以及其他站点设置。,2.1.3 管理站点,3删除站点 在FrontPage 2003中选择“文件夹”视图，并选择要删除的站点，单击“Delete”键，或右击鼠标，从弹出的快捷菜单中选择“删除”命令。 注意：应用手动方式删除文件，删除的文件会自动放置于“回收站”中，而应用“删除”命令方式删除文件，被删除的文件直接从磁盘中删除，是不可恢复的。,在FrontPage 中，为站点添加网页的方法有两种。一种是：单击工具栏中的“新建网页”按钮或者按快捷键“CtrlN”，打开一个空白网页，设计者可以在网页编辑区编辑自己的网页；另一种是：选择“文件”|“新建”命令，打开“新建”任务窗格，单击“
14、新建站点”下的“其他网页模板”超级链接，打开“网页模板”对话框，利用网页模板创建网页。,2.1.4 为站点添加网页,站点设计者可以通过导入一个页面而减轻自己的工作量，并吸收别人成功的经验（当然要得到版权的许可）。导入方法与导入站点的方法类似。,2.1.5 导入文件到当前站点,网站制作完成之后，就可以将站点上传到服务器了。,2.1.6 发布站点,1设置浏览器的兼容性,在因特网上浏览网页时，可能会出现网页中的某些元素无法正常显示的情况，这是因为访问者使用的浏览器不支持网页中的某些技术（例如框架、动态HTML、JavaScript和Java小程序等），即浏览器不兼容这些功能。为了避免在不同类型和版本
15、的浏览器中出现某些元素不能正常显示的现象，在站点发布前必须设置浏览器的兼容性,（1）查看站点中的所有内部超链接 （2）验证各个外部超链接的有效性 （3）修复断开的超链接 （4）更新超链接,2测试站点,如果在访问或打开一个服务器上的站点时遇到一些问题，则可以通过测试网络连接来检查主机名称、本地主机、IP地址、TCP/IP协议等设置。,3测试网络连接,在本地计算机上发布站点，可以将站点发布到本地文件系统的文件夹中，也可以通过将站点发布到新磁盘驱动位置上，来制作一份整个站点的备份。,4在本地计算机上发布站点,在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精心制作的站点了。
16、 （1）申请域名和主页空间 （2）测试网页 （3）上传网页到Internet,5在服务器上发布站点,Dreamweaver 8是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。,2.2 利用Dreamweaver 8创建站点,2.2.1 Dreamweaver 8简介,1Dreamweaver 8的主要功能,（1）创建和编辑网页元素 （2）编辑HTML代码 （3）管理站点 （4）插入Fireworks文件和Flash动画 （5）强大的模板功能 （6）启动和编辑外部媒体 （7）定制和扩展功能,2Dreamweaver 8的工作界面,（1）标题栏 标题栏位于程序窗口的顶端，主要显示Dreamweaver 8的图标、名称、当前文档的标题和名称等按钮。 （2）菜单栏 菜单栏提供了所有的菜单命令，是提供软件最完
