《第六章 网页制作基础.ppt》由会员分享，可在线阅读，更多相关《第六章 网页制作基础.ppt（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、大学计算机基础大学计算机基础大学计算机基础大学计算机基础第六章第六章 网页制作基础网页制作基础大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础网络的应用，不仅使计算机世界发生了日新月异的变化，而且改变了人们工作、学习和生活的方式。说起上网，最熟悉的操作就是打开浏览器，在地址栏中输入地址，然后就能看到要访问信息，这些信息通常是图片、文字、声音、动画、视频或者超链接等多媒体信息，包含这些信息的页面文件就叫做网页。网页的制作在过去可能是一件非常复杂的事情，但是现在利用网页工具来制作，就能事半功倍。本章主要网页制作的基本概念、基本工具，并以FrontPage 2003为例来介绍设计
2、和制作网页的基本方法。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础本章主要内容6.1基本概念介绍基本概念介绍6.2网页制作工具介绍网页制作工具介绍6.3 FrontPage 2003的使用的使用大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.1基本概念介绍6.1.1网页6.1.2网站大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.1.1网页网页网页包含文字、图片、声音、动画、视频以及超级链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。一般说来，网页可以分为静态网页和动态网页。静态网页是指不使用数据库而直接
3、或间接制作成Html的网页，这种网页的内容是固定的，修改和更新都必须要通过专用的网页制作工具。动态网页是指采用动态网页技术，将网站内容存储到数据库，通过读取数据库来动态生成网页。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.1.2网站网站网站是众多网页的集合，如果把网页看成一页纸，那么网站就是一本书。当然也有特殊的情况，有些网站就只有一个页面。通常在浏览器地址栏中输入网址后首先看到的是该网站的首页，通过单击首页上的链接可以访问到其它的网页，这样反映一个中心或一个主题的多张网页有序组合到一起，就称为网站。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基
4、础6.2网页制作工具介绍6.2.1超文本语言HTML概述6.2.2Dreamweaver6.3.3FrontPage大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.2.1超文本语言超文本语言HTML概述概述Html（Hyper Text Mark-up Language），即超文本标记语言，是用于创建从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建Web页面。Html文件的基本格式如下： 标题部分 正文部分 大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.2.2DreamweaverDreamweaver是Macromedia
5、公司的产品的一款“所见即所得”的网页编辑工具，采用了多种先进技术，用户不必编写复杂的HTML源代码。因此，Dreamweaver是一款可以满足多层次需求、功能强大的可视化专业网页制作工具。目前常用的版本为 Dreamweaver 2004和Dreamweaver 8。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.2.3FrontPageMicrosoft Office FrontPage 2003是Microsoft Office组件之一，利用它可以直接生成HTML代码而不用手工输入，是最简单、最容易，却又功能强大的网页编辑工具。FrontPage采用典型的 Word
6、 界面设计，制作网页的过程就是加入网页元素，并对它们格式和属性进行定义。只要你懂得使用 Word，就差不多等于已经会使用 FrontPage。FrontPage 2003与早期的版本比较，有许多增强功能和新增的功能。FrontPage 2003的确是最好的入门级网页编辑工具。目前常用的版本为 Frontpage2000 和 Frontpage 2003。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.3 FrontPage 2003的使用6.3.1视图方式6.3.2创建站点6.3.3编辑网页6.3.4超链接6.3.5表单制作6.3.6特殊效果6.3.7站点发布与维护大学
7、计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.3.1视图方式视图方式FrontPage 2003有两类视图：网页视图和网站视图。大多数情况下，处理单个页面时，应使用“网页视图”；处理整个网站时，应使用“网站视图”。1、网页视图设计视图：这是制作网页的最基本方式，也是一种所见即所得的编辑方式。用户可以像编辑Word一样编辑编辑页面，不需要考虑代码，软件自动将设计转换为Html代码。拆分视图：把工作区分成两部分，一部分显示代码视图，另一部分显示设计视图。代码视图：显示Html代码，可以编辑或修改代码。预览视图：模拟网页在浏览器中的显示，用户可以预览网页的实际效果。大学计算机基
8、础大学计算机基础 第六章第六章 网页制作基础网页制作基础2、网站视图文件夹视图：在次视图中，站点为一组文件和文件夹，并显示了当前文件夹下保安的子文件夹和网页文件的一些信息，如名称、标题、笑答、类型、修改日期、修改者和注释等。远程站点视图：当要发布站点时，就需要使用此视图。它能将整个网站和单独的文件和文件夹发布到任何位置，同时显示本地网站和远程网站中的文件。而且图标和说明性文本会指示文件和文件夹的状态，同步功能有助于确保不会意外地覆盖任何文件或文件夹。报表视图：可统计当前站点的情况，并以表格的显示出来。包括：大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础导航视图：用于显示网
9、站的网页层次结构，用户可清晰的看到各页面之间的逻辑连接关系。在此视图中，可以新建、修改、删除的网页结构和逻辑关系。超链接视图：将当前站点显示为一个连接文件的网络，它们表示了站点中页面之间的相互链接关系。双击其中的超链接，将自动进入与之对应的网页。任务视图：主要用来创建和管理任务，显示了当前站点中创建的所有未完成的和已完成的任务，帮助用户了解工作情况。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.3.2创建站点创建站点所谓站点，就是多个相关的网页通过各种链接关联起来的集合，即站点是网页的集合。在使用FrontPage开发网页之前，应建立一个本地站点，用来管理创建的网页。
10、FrontPage的站点有两种类型：基于磁盘的站点和基于服务器的站点。1.单击“文件”菜单中的“新建”命令，在工作区的右侧将显示新建任务的窗格，如图6-3所示。其中有“新建网页”、“新建网站”、“模板”3个选项组，选择“新建网站”下的任一选项。2.单击“常用”工具栏上“新建普通网页”按钮后的下拉按钮，在弹出的下拉菜单中选择“站点”命令。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.3.3编辑网页编辑网页1、新建网页2、保存网页3、网页布局1)表格布局2)框架布局4、文字操作5、图形处理6、表格处理大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.
11、3.4超链接超链接1、超链接到同一网页的不同位置2、超链接到另一张网页或地址3、超链接到文件4、超链接到邮箱5、图片上的热点链接大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.3.5表单制作表单制作1、新建表单2、编辑表单3、提交表单6.3.6特殊效果特殊效果1、动态效果组件2、计数器组件3、图片库大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础6.3.7站点发布与维护站点发布与维护1、与局域网或Internet连接2、网页存放空间3、发布软件4、发布站点4、站点的维护大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础本章小结本章主要网页制作的基本概念、基本工具，并以FrontPage 2003为例来介绍设计和制作网页的基本方法。大学计算机基础大学计算机基础 第六章第六章 网页制作基础网页制作基础练习题用FrontPage或Dreamweaer制作一网页文件，内容是介绍自己的学校，其中要插入相关的图片和文字，另外要插入一幅剪贴画（或学校风景）小图片，并设置浏览网页时，单击该图片可链接到你所在学校的首页或的超级链接，用文件名DJKS1.HTM（或（或DJKS1.HTML）保存到考试文件夹中。