网站建设、制作与维护

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