实训实训 13 13 网站建设、发布与维护网站建设、发布与维护

1.1 1.1 网站的建设网站的建设1.2 1.2 网站的发布网站的发布1.3 1.3 网站的维护网站的维护

网站建设流程网站建设流程为：策划网站→准为：策划网站→准备素材→规划网站布局→设计网站备素材→规划网站布局→设计网站目录→规划网站导航→搭配网站色目录→规划网站导航→搭配网站色彩 →创建网站 →发布网站→维护 。彩 →创建网站 →发布网站→维护 。

1.1 1.1 网站建设网站建设

图图 1 1 网站的建设流程网站的建设流程

网站建设

网站发布

网站维护

网站策划网站策划 1) 1) 网站的主题网站的主题 (( 即题材和标题即题材和标题 ))

22 ）网站的对象）网站的对象 33 ）网站的内容）网站的内容

策划网站逻辑图策划网站逻辑图

网站题材选择的一般原则网站题材选择的一般原则• 一般来说，个人主页的选材定位一般来说，个人主页的选材定位

要小，内容要精。要小，内容要精。

•对于个人网站，题材最好是自己对于个人网站，题材最好是自己擅长或者喜欢的内容。擅长或者喜欢的内容。

•不要太滥或者目标太高。不要太滥或者目标太高。

网站标题设置的一般原则网站标题设置的一般原则• 名称要正，即要合法、合情及合理名称要正，即要合法、合情及合理•名称要易记，最好使用中文名称要易记，最好使用中文•名称要有特色，最好能体现一定的内名称要有特色，最好能体现一定的内

涵，同时给浏览者更多的视觉冲击和涵，同时给浏览者更多的视觉冲击和空间想象力。如空间想象力。如““ ee 书时空书时空””

网站资料网站资料 (( 素材素材 )) 收集收集•素材的类型：文字、图片、动画及素材的类型：文字、图片、动画及

声音、影像等多媒体文件。声音、影像等多媒体文件。•素材的获取途径：素材的获取途径： 11 ）自己编制）自己编制 22 ）报刊杂志和光盘等传统媒体。）报刊杂志和光盘等传统媒体。

33 ）网络。）网络。

•网上资料使用的注意事项：网上资料使用的注意事项： 11 ）版权问题）版权问题 22 ）健全性）健全性

• 内容的完整性与正确性内容的完整性与正确性• 链接的正确性与完整性链接的正确性与完整性

33 ）合法性）合法性

网页的布局规划网页的布局规划•网页布局是设计在网页上放些什么

内容，以及这些内容放在网页的什么位置。

•即网页结构的设计，其实就是合理地设计页面中的栏目和板块，以及将其合理地分布在页面中。

•主页的基本构成内容主页的基本构成内容11 ）页面标题）页面标题22 ）网站标志）网站标志33 ）页眉）页眉44 ）导航栏）导航栏55 ）主内容区）主内容区66 ）页脚）页脚

对网页内容的一个概括性描述，作用是引对网页内容的一个概括性描述，作用是引导访问者清楚地知道所要浏览网站的内容导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。，不至于迷失方向。

如同一个商品的商标，应集中体现网站的如同一个商品的商标，应集中体现网站的特色、内容及其内在的文化内涵和理念。特色、内容及其内在的文化内涵和理念。

指页面上端的部分，该位置吸引注意力较高，指页面上端的部分，该位置吸引注意力较高，故大多网站在此处放置网站的宗旨、宣传口号故大多网站在此处放置网站的宗旨、宣传口号、广告语或设置为广告席位来出租、广告语或设置为广告席位来出租。。

导航条的位置常见的有：在页面的左侧、右导航条的位置常见的有：在页面的左侧、右侧、顶部和底部侧、顶部和底部。。

是页面设计的主体元素。在首页中，它一般是是页面设计的主体元素。在首页中，它一般是二级链接内容的标题、或内容提要、或内容的二级链接内容的标题、或内容提要、或内容的部分摘录。布局通常是按网站内容的分类进行部分摘录。布局通常是按网站内容的分类进行分栏或划分板块分栏或划分板块。。

指页面底端部分，通常用来标注站点所属的单指页面底端部分，通常用来标注站点所属的单位的地址、位的地址、 e-maile-mail 链接以及版权所有或导航链接以及版权所有或导航条条

22

11

33

44

55

66

网站目录设计网站目录设计•网站目录设计的作用网站目录设计的作用：便于站点的上传和：便于站点的上传和

维护，以及内容的扩充和移植。维护，以及内容的扩充和移植。•规划规范规划规范

目录建立的原则：以最少的层次提供最目录建立的原则：以最少的层次提供最清晰简便的访问结构。清晰简便的访问结构。 目录结构：目录结构：• 根目录根目录•根文件：通常包括主页文件以及其他必须的根文件：通常包括主页文件以及其他必须的系统文件。系统文件。

•每个主要功能（导航栏目）建立相应目录。每个主要功能（导航栏目）建立相应目录。

–根目录下的根目录下的 imagesimages 目录存放公用图片，目录存放公用图片，每个目录下私有图片存放于各自独立每个目录下私有图片存放于各自独立imagesimages 目录下。目录下。

–根据需要分别在根目录下设置根据需要分别在根目录下设置 mediamedia目录存放目录存放 flashflash 、、 aviavi 等多媒体文件。等多媒体文件。

– 所有的脚本文件存放在根目录下的所有的脚本文件存放在根目录下的scriptscript 目录；所有目录；所有 CSSCSS 文件存放在根文件存放在根目录下的目录下的 csscss 目录。目录。

• 目录的层次不要太深，目录的层次不要太深，一般不要 一般不要 超过去超过去 33层，便于维护层，便于维护和管理。和管理。• 不要使用中文目录不要使用中文目录• 尽量使用意义明确的目尽量使用意义明确的目录名称录名称

链接设计链接设计•链接设计是指设计页面之间相互链链接设计是指设计页面之间相互链

接的拓扑结构。接的拓扑结构。•链接结构类型：链接结构类型： 11 ）线性结构：指子页面由父页面所扩展）线性结构：指子页面由父页面所扩展而来的；打开页面是由父页面一级一级而来的；打开页面是由父页面一级一级向下展开，而退出页面则由子页面一级向下展开，而退出页面则由子页面一级一级往回收缩。一级往回收缩。

（续上）（续上）

22 ）非线性结构：）非线性结构：•树状链接结构：指一级页面链接指向多个二树状链接结构：指一级页面链接指向多个二级页面。级页面。

•星状链接结构：指每个页面相互之间都建立星状链接结构：指每个页面相互之间都建立有链接。有链接。

•树状、星状混合链接结构：在实际的网站设树状、星状混合链接结构：在实际的网站设计中，通常是使用这种混合结构。此方案是计中，通常是使用这种混合结构。此方案是首页面和一级页面之间用星状链接结构，一首页面和一级页面之间用星状链接结构，一级页面和以下各级页面之间用树状链接结构。级页面和以下各级页面之间用树状链接结构。

网站导航的规划网站导航的规划•网站导航的设计，其实就是对网站网站导航的设计，其实就是对网站

链接结构的设计。链接结构的设计。•导航分类：导航分类： 11 ）导航栏）导航栏

(( 续上续上 ))

22 ）下拉菜单导航：包括隐藏类和不可隐）下拉菜单导航：包括隐藏类和不可隐藏类（如折叠式）。藏类（如折叠式）。

可隐藏式下拉菜单可隐藏式下拉菜单

折叠式下拉菜单折叠式下拉菜单

（（续上续上）） 33 ）分类列表式导航：通常用于集锦类网）分类列表式导航：通常用于集锦类网

站中。站中。

（（续上续上）） 44 ）关键词导航：通常是在文本中将某）关键词导航：通常是在文本中将某

些关键文字设置成超链接，常出现在帮些关键文字设置成超链接，常出现在帮助类和产品说明类的网页中。助类和产品说明类的网页中。

55 ）其他类导航：如使用图像或动画来）其他类导航：如使用图像或动画来引导一个网站的导航。引导一个网站的导航。

网网页色彩的搭配页色彩的搭配原则：原则： 11 ）保持网页的色彩搭配的协调性）保持网页的色彩搭配的协调性 22 ）保持不同网页色彩的一致）保持不同网页色彩的一致

性性 33 ）根据页面的主题、性质及）根据页面的主题、性质及 浏览者来规划整体色彩。浏览者来规划整体色彩。

网站创建网站创建 1) 1) 网页的制作网页的制作 22 ）网站的优化）网站的优化 33 ）网站的测试）网站的测试

13.2 13.2 网站发布网站发布域名和空间的申请域名和空间的申请 在网上收索可提供在网上收索可提供域名和空间的网域名和空间的网

站，如站，如 http://www.kudns.com可可提供免费空间申请，根据网站的申请提供免费空间申请，根据网站的申请流程进行申请即可流程进行申请即可

申请示例申请示例

网站上传网站上传 11 ）使用）使用 Dreamweaver Dreamweaver 上传上传

•定义远程站点定义远程站点•上传网站或网页上传网站或网页

22 ）使用）使用 FTPFTP 软件软件 (( 如如CuteFTP)CuteFTP)

13.3. 13.3. 网站的维护网站的维护 指即时更新网站内容，将网站中指即时更新网站内容，将网站中

的废旧文件即时清除以及调整网站的废旧文件即时清除以及调整网站的功能和服务等活动。的功能和服务等活动。

综合实训综合实训

准备工作准备工作

站点规划 “水族世界”网站的导航草图如图所示，主要分为 8 个栏目。

准备工作准备工作

素材收集 制作网页的相关素材和资料可通过网络或其他途径获得，网页中的一些图像素材，如导航按钮等可以利用 Photoshop 或 Fireworks 等图形图像软件制作。

网站 logo 图像

制作思路分析制作思路分析

本案例是综合案例，因此应从站点创建与管理的操作开始，首先制作“ index.html” 页面，并利用该页面制作“ xinwen.html” 页面，依次类推。需注意的是，除首页外，其他页面的基本结构大致相同，因此制作时可通过复制已有资源的方法来提高制作效率。

操作过程操作过程

创建“水族世界”站点 为了更好的管理网站中的各种文件并方便网页制作，应首先创建站点，并在站点中创建各种文件和文件夹。

操作过程操作过程制作网站首页（ 1 ）插入表格 利用表格可以很好地布局页面，也是初学者最常使用的布局网页的方法。

操作过程操作过程制作网站首页（ 2 ）输入文本并插入图像 完成表格和嵌套表格的插入后，即可在各单元格中输入需要的文本并插入需要的图像。

操作过程操作过程制作网站首页（ 3 ）创建并设置外部 CSS 样式文件 由于站点包含多个网页，且各网页中相同类型的对象格式应尽量保持一致，因此可通过创建外部 CSS样式文件的方法统一设置网页中的对象格式。

操作过程操作过程制作网站首页（ 4 ）设置超链接和图像热点区域 接下来将对导航栏上的各图像创建超链接并取消超链接格式的图像边框效果，然后在“ bg.jpg” 图像上使用热点工具创建图像热点区域。

操作过程操作过程制作网站首页（ 5 ）创建并设置 AP Div 下面将通过绘制 AP Div 来创建鼠标经过图像效果。

操作过程操作过程制作“水族新闻”页面（ 1 ）布局页面 下面通过复制网站首页中的对象并适当进行修改来快速布局“水族新闻”页面。

操作过程操作过程制作“水族新闻”页面（ 2 ）编辑外部 CSS 样式 为方便快速对网页中不同对象的格式进行设置，下面链接制作首页时创建的外部 CSS样式文件，并在其中添加适当的规则。

操作过程操作过程制作“水族新闻”页面下面将利用嵌套表格、文本和图像等对象来丰富“水族新闻”网页的内。

练习题练习题打开提供的“打开提供的“ luntan.html”luntan.html” 网页，利用嵌套表格、文本和图像网页，利用嵌套表格、文本和图像

等对象设置网页内容。等对象设置网页内容。