《[精选]网站建设、制作与维护32979.pptx》由会员分享，可在线阅读，更多相关《[精选]网站建设、制作与维护32979.pptx（26页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、计算机网络应用基础计算机网络应用基础 第十章第十章建立自己的网站建立自己的网站计算机网络应用基础计算机网络应用基础1计算机网络应用基础计算机网络应用基础 主主 要要 内内 容容o网站建设概述网站建设概述 o网页制作网页制作 o网站的管理与维护网站的管理与维护2计算机网络应用基础计算机网络应用基础 课时安排课时安排o本章总计教学时数为4课时，其中n理论课时：2n实验课时：2o本章实验内容：n实验十六 用HTML语言制作简单的网页 3计算机网络应用基础计算机网络应用基础 10.1 网站建设概述网站建设概述 o网站的概念 n网站大体包括个人网站、企业网站、学术机构及政府团体网站等n将大量网页放置在服
2、务器中供Internet上的人浏览，就构成了一个网站。n网页就是在浏览器上看到的一页，网页也称为Web页。n每个网站都有一个最基本的网页，称为主页，主页通常是进入网站首先浏览到的网页，具有引导用户浏览整个网站内容的作用。4计算机网络应用基础计算机网络应用基础 10.1 网站建设概述网站建设概述o网站的组建方法 n空间租赁：适合内容不太多的小型网站。它费用低廉，管理方便，手续简便。n主机托管：适合访问量大，内容多的中型网站，它的费用高昂，需专门技术人员安装及设置服务器。但管理的自由度较大，访问速度较快。n申请专线：可以使用户对网站拥有最大限度的管理权，可以放置多台服务器，甚至可以对外租赁空间。但
3、它技术要求高，安装设置复杂，还需要专门的技术人员维护。5计算机网络应用基础计算机网络应用基础 10.1 网站建设概述网站建设概述o网站的组建步骤 n构建网站框架：构建网站框架就是要在自己的计算机中新建一个存放网站所有文件的文件夹，并根据网站网页的结构和文件的类型新建此文件夹的子文件夹结构。n设计网页版面：设计网页版面就是设计网页的布局，包括网站标志、导航条、正文内容的摆放位置、相互之间的大小比例、样式等。一个网站的大部分网页应该具有相似的版面，这样才能体现统一的风格。n创建模板：n制作主页：o主页文件的文件名必须是index.htm。n制作普通网页：n添加更多功能6计算机网络应用基础计算机网络
4、应用基础 10.1 网站建设概述网站建设概述o网站的发布 n申请空间：就是向提供Internet服务器的网站申请一个个人主页空间。n上传网站：方法主要有3种 o 采用FTP软件 o借助网页制作工具软件的上传功能 o 使用空间所在网站提供的FTP上传服务 n宣传网站 7计算机网络应用基础计算机网络应用基础 FrontPage是是Microsoft公司的公司的“拳头产品拳头产品”Office的一个重的一个重要组件，是一个较为优秀的网页制作和网站管理工具，基本上实要组件，是一个较为优秀的网页制作和网站管理工具，基本上实现了现了“所见即所得所见即所得”的工作方式。使用的工作方式。使用FrontPage
5、可以很方便地输可以很方便地输入、编辑和调试用入、编辑和调试用HTML语言编写的脚本代码，是一个很好的网语言编写的脚本代码，是一个很好的网页编辑器。当然，对于不懂页编辑器。当然，对于不懂HTML语言的人，使用语言的人，使用FrontPage也也能制作出专业效果的网页。能制作出专业效果的网页。它是常用、最简单的网页制作工具之一，它的大部分操作与它是常用、最简单的网页制作工具之一，它的大部分操作与WordWord类似。类似。10.2 网页制作网页制作FrontPage简介简介8计算机网络应用基础计算机网络应用基础 Frontpage的基本操作的基本操作p启动和退出启动和退出pFrontpage界面简
6、介界面简介p基本操作基本操作9计算机网络应用基础计算机网络应用基础 编辑区编辑区视图模式视图模式网页查看网页查看方式方式默认文件名默认文件名Frontpage的基本操作的基本操作10计算机网络应用基础计算机网络应用基础 1.1.1.1.网页视图网页视图网页视图网页视图2.2.2.2.文件夹视图文件夹视图文件夹视图文件夹视图3.3.3.3.报表视图报表视图报表视图报表视图4.4.4.4.导航视图导航视图导航视图导航视图5.5.5.5.超链接视图超链接视图超链接视图超链接视图6.6.6.6.任务视图任务视图任务视图任务视图用于编辑网页，网页默认文件名为用于编辑网页，网页默认文件名为用于编辑网页，网
7、页默认文件名为用于编辑网页，网页默认文件名为new_page_#.htmnew_page_#.htmnew_page_#.htmnew_page_#.htm打开打开打开打开WebWebWebWeb站点时，用于组织站点中的文件和文件夹站点时，用于组织站点中的文件和文件夹站点时，用于组织站点中的文件和文件夹站点时，用于组织站点中的文件和文件夹打开打开打开打开WebWebWebWeb站点时，报告站点中的文件和超链接的状态站点时，报告站点中的文件和超链接的状态站点时，报告站点中的文件和超链接的状态站点时，报告站点中的文件和超链接的状态打开打开打开打开WebWebWebWeb站点时，显示站点的导航结构站
8、点时，显示站点的导航结构站点时，显示站点的导航结构站点时，显示站点的导航结构打开打开打开打开WebWebWebWeb站点时，显示站点中的每一页的超链接状态站点时，显示站点中的每一页的超链接状态站点时，显示站点中的每一页的超链接状态站点时，显示站点中的每一页的超链接状态打开打开打开打开WebWebWebWeb站点时，显示站点中要完成的任务站点时，显示站点中要完成的任务站点时，显示站点中要完成的任务站点时，显示站点中要完成的任务Frontpage的基本操作的基本操作11计算机网络应用基础计算机网络应用基础 查看网页的三种方式：查看网页的三种方式：查看网页的三种方式：查看网页的三种方式：1.1.1.
9、1.普通方式：普通方式：普通方式：普通方式：2.HTML2.HTML2.HTML2.HTML方式方式方式方式3.3.3.3.预览方式预览方式预览方式预览方式 用于编辑网页，在内部自动产生有用于编辑网页，在内部自动产生有用于编辑网页，在内部自动产生有用于编辑网页，在内部自动产生有HTMLHTMLHTMLHTML标志语言产生的标志语言产生的标志语言产生的标志语言产生的网页文件。网页文件。网页文件。网页文件。提供了直接用提供了直接用提供了直接用提供了直接用HTMLHTMLHTMLHTML标志语言编写网页的途径标志语言编写网页的途径标志语言编写网页的途径标志语言编写网页的途径用于查看所设计的网页在浏览
10、器内的效果用于查看所设计的网页在浏览器内的效果用于查看所设计的网页在浏览器内的效果用于查看所设计的网页在浏览器内的效果Frontpage的基本操作的基本操作12计算机网络应用基础计算机网络应用基础 1.1.1.1.新建网页新建网页新建网页新建网页 2.2.2.2.打开网页打开网页打开网页打开网页 3.3.3.3.保存网页保存网页保存网页保存网页 单击工具栏的单击工具栏的单击工具栏的单击工具栏的“新建新建新建新建”按钮按钮按钮按钮 “文件文件文件文件”“新建新建新建新建”“网页网页网页网页”选择选择选择选择“模板模板模板模板”“确定确定确定确定”“文件文件文件文件”“打开打开打开打开”网页的保存
11、类型：选网页的保存类型：选“网页文件网页文件”如果网页有图片，会弹出如果网页有图片，会弹出“保存嵌入文件保存嵌入文件”对话框，对话框，用于指定图片的保存位置和文件名。用于指定图片的保存位置和文件名。Frontpage的基本操作的基本操作13计算机网络应用基础计算机网络应用基础 pp网页中的文本编辑网页中的文本编辑网页中的文本编辑网页中的文本编辑pp插入特殊对象插入特殊对象插入特殊对象插入特殊对象pp图形处理图形处理图形处理图形处理网页设计操作网页设计操作14计算机网络应用基础计算机网络应用基础 1.1.1.1.文本的输出与编辑文本的输出与编辑文本的输出与编辑文本的输出与编辑网页中的文本编辑网页
12、中的文本编辑网页中的文本编辑网页中的文本编辑同同同同WordWordWordWord编辑编辑编辑编辑 提供提供提供提供6 6 6 6级不同大小的标题级不同大小的标题级不同大小的标题级不同大小的标题 提供提供提供提供7 7 7 7种不同大小的字体，默认种不同大小的字体，默认种不同大小的字体，默认种不同大小的字体，默认3 3 3 3号号号号 建议：制作网页使用比较常见的字体建议：制作网页使用比较常见的字体建议：制作网页使用比较常见的字体建议：制作网页使用比较常见的字体网页设计操作网页设计操作15计算机网络应用基础计算机网络应用基础 插入特殊符号插入特殊符号插入特殊符号插入特殊符号(1)(1)(1)
13、(1)水平线：水平线：水平线：水平线：用于分割段落用于分割段落用于分割段落用于分割段落 操作：操作：操作：操作：“插入插入插入插入”“水平线水平线水平线水平线”编辑：双击水平线，在弹出的对话框中设置编辑：双击水平线，在弹出的对话框中设置编辑：双击水平线，在弹出的对话框中设置编辑：双击水平线，在弹出的对话框中设置 (2)(2)(2)(2)注释注释注释注释：有利于以后的维护和管理：有利于以后的维护和管理：有利于以后的维护和管理：有利于以后的维护和管理 “插入插入插入插入”“注释注释注释注释”只有在普通模式下可见，在预览下就不显示只有在普通模式下可见，在预览下就不显示只有在普通模式下可见，在预览下就
14、不显示只有在普通模式下可见，在预览下就不显示(3)(3)(3)(3)时间戳时间戳时间戳时间戳：使网页自动更新时间信息：使网页自动更新时间信息：使网页自动更新时间信息：使网页自动更新时间信息 “插入插入插入插入”“日期和时间日期和时间日期和时间日期和时间”设置日期和时间设置日期和时间设置日期和时间设置日期和时间格式格式格式格式网页设计操作网页设计操作16计算机网络应用基础计算机网络应用基础 图形处理图形处理图形处理图形处理(1)(1)(1)(1)插入图片插入图片插入图片插入图片 操作：操作：操作：操作：“插入插入插入插入”“图片图片图片图片”“来自文件来自文件来自文件来自文件”选择网络资源或本机
15、资源选择网络资源或本机资源选择网络资源或本机资源选择网络资源或本机资源 图片格式：图片格式：图片格式：图片格式：*.jpg,*.gif*.jpg,*.gif*.jpg,*.gif*.jpg,*.gif 提醒：最好将图片和网页文件放在同一目录下提醒：最好将图片和网页文件放在同一目录下提醒：最好将图片和网页文件放在同一目录下提醒：最好将图片和网页文件放在同一目录下 (2)(2)(2)(2)编辑图片编辑图片编辑图片编辑图片 右击网页的图片，在属性窗口中设置右击网页的图片，在属性窗口中设置右击网页的图片，在属性窗口中设置右击网页的图片，在属性窗口中设置(3)(3)(3)(3)背景的设置背景的设置背景的
16、设置背景的设置 右击网页右击网页右击网页右击网页 “网页属性网页属性网页属性网页属性”“背景背景背景背景”网页设计操作网页设计操作17计算机网络应用基础计算机网络应用基础 表格：把文本、数据、图像精确有效的联系在一起。表格：把文本、数据、图像精确有效的联系在一起。表格：把文本、数据、图像精确有效的联系在一起。表格：把文本、数据、图像精确有效的联系在一起。(1)(1)(1)(1)建立表格建立表格建立表格建立表格 表格表格表格表格“插入插入插入插入”或或或或“手绘表格手绘表格手绘表格手绘表格”(2)(2)(2)(2)格式化表格格式化表格格式化表格格式化表格 选定表格或单元格区域选定表格或单元格区域
17、选定表格或单元格区域选定表格或单元格区域 “表格菜单表格菜单表格菜单表格菜单”“表格属性表格属性表格属性表格属性”或或或或“单元属性单元属性单元属性单元属性”进行相应的设置进行相应的设置进行相应的设置进行相应的设置表格处理表格处理表格处理表格处理网页设计操作网页设计操作18计算机网络应用基础计算机网络应用基础 (1)(1)(1)(1)创建超链接创建超链接创建超链接创建超链接 选定作为超链接的文字或图像选定作为超链接的文字或图像选定作为超链接的文字或图像选定作为超链接的文字或图像 选择选择选择选择“插入插入插入插入”“超链接超链接超链接超链接”命令命令命令命令 在对话框中设置要链接的目标在对话框
18、中设置要链接的目标在对话框中设置要链接的目标在对话框中设置要链接的目标 定义超链接点的颜色定义超链接点的颜色定义超链接点的颜色定义超链接点的颜色 (2)(2)(2)(2)链接方式链接方式链接方式链接方式 链接到网页链接到网页链接到网页链接到网页 链接到本地文件链接到本地文件链接到本地文件链接到本地文件 链接到电子邮件链接到电子邮件链接到电子邮件链接到电子邮件 图片或区域热点链接图片或区域热点链接图片或区域热点链接图片或区域热点链接(使用绘图工具栏设计热区使用绘图工具栏设计热区使用绘图工具栏设计热区使用绘图工具栏设计热区)超链接超链接超链接超链接网页设计操作网页设计操作19计算机网络应用基础计算
19、机网络应用基础 书签是使网页中被标记的位置或标记文本，起到定位的作用。书签是使网页中被标记的位置或标记文本，起到定位的作用。书签是使网页中被标记的位置或标记文本，起到定位的作用。书签是使网页中被标记的位置或标记文本，起到定位的作用。步骤：步骤：步骤：步骤：(1)(1)(1)(1)插入书签插入书签插入书签插入书签 移动光标到插入书签的位置移动光标到插入书签的位置移动光标到插入书签的位置移动光标到插入书签的位置 “插入插入插入插入”“书签书签书签书签”输入书签的名称输入书签的名称输入书签的名称输入书签的名称 (2)(2)(2)(2)设置书签的超链接设置书签的超链接设置书签的超链接设置书签的超链接
20、选中设置超链接的文本选中设置超链接的文本选中设置超链接的文本选中设置超链接的文本 在弹出的对话框中的在弹出的对话框中的在弹出的对话框中的在弹出的对话框中的“书签书签书签书签”下拉列表框中选择书签下拉列表框中选择书签下拉列表框中选择书签下拉列表框中选择书签 书签书签书签书签网页设计操作网页设计操作20计算机网络应用基础计算机网络应用基础 网页设计操作网页设计操作21计算机网络应用基础计算机网络应用基础 HTMLHTMLHTMLHTML语言：语言：语言：语言：可以用于创建与系统平台无关的网页文档，是一种解释语言可以用于创建与系统平台无关的网页文档，是一种解释语言可以用于创建与系统平台无关的网页文档
21、，是一种解释语言可以用于创建与系统平台无关的网页文档，是一种解释语言1.HTML1.HTML1.HTML1.HTML语言结构语言结构语言结构语言结构 标题标题标题标题 头部信息头部信息头部信息头部信息 文档主题，正文部分文档主题，正文部分文档主题，正文部分文档主题，正文部分 包括文字、图片、包括文字、图片、超链及格式超链及格式描述。描述。网页设计操作网页设计操作22计算机网络应用基础计算机网络应用基础 网页设计操作网页设计操作23计算机网络应用基础计算机网络应用基础 “文件文件”“新建新建”“网站网站”选选“导入站点向导导入站点向导”，并指定已建网页的位置，并指定已建网页的位置1.1.1.1.
22、建立网站建立网站建立网站建立网站“文件文件”“新建新建”“网页网页”“框架网页框架网页”“目录目录”设置每个框架包含的文件设置每个框架包含的文件保存框架网页保存框架网页2.2.2.2.建立框架网页建立框架网页建立框架网页建立框架网页动态动态HTMLHTML效果效果网页过度效果网页过度效果网页添加滚动文字网页添加滚动文字网页添加计算器网页添加计算器3.3.3.3.设置网页的动画效果设置网页的动画效果设置网页的动画效果设置网页的动画效果选择要查看的网页选择要查看的网页再再选选择择“超超链链接接”视视图图方方式式4.4.4.4.检查链接检查链接检查链接检查链接10.3 网站的管理与维护网站的管理与维
23、护24计算机网络应用基础计算机网络应用基础 (1)(1)安装安装InternetInternet信息服务信息服务 “开始开始”“设置设置”“控制面板控制面板”“添加添加/删除程序删除程序”“添加添加/删除删除WindowsWindows组件组件”根据提示操作即可根据提示操作即可(2)(2)WebWeb服务器服务器 “开始开始”“设置设置”“控制面板控制面板”“管理工具管理工具”“InternetInternet服务管理器服务管理器”选选“默认默认WebWeb站点站点”，右击选择，右击选择“属性属性”选选“主目录主目录”标签，设本地路径为标签，设本地路径为FrontPageFrontPage的站点目录的站点目录 选选“文文档档”标标签签，设设“启启用用默默认认文文档档”，添添加加“index.htm”index.htm”为为启动首页启动首页(3)(3)IEIE浏览器浏览器 启动本机启动本机IEIE浏览器，在浏览器，在“地址栏地址栏”输入本机输入本机IPIP或或localhostlocalhost5.5.5.5.发布网站发布网站发布网站发布网站10.3 网站的管理与维护网站的管理与维护25计算机网络应用基础计算机网络应用基础 演讲完毕，谢谢观看！