项目一任务2站点的创建与管理

《前台页面设计》
项目一网页知识储备
任务2站点的创建与管理
图1-5创建一个静态网站应遵循的基本流程
2.网站的规划
确定网站的目标是是关键，明确谁是网站将来的访问者。

确定网站的主题、风格和创意点。

主题目选材要小而精，最好是选择自己
教学班级软件技术12-1 课时任课教师仝素梅
教学目标：
了解网站开发工作流程
了解站点的作用
掌握站点的创建与管理
1.
2.
3.
教学重点：
网站开发工作流程
站点的创建
站点的管理
路径
1.
2.
3.
4.
教学难点
1.站点的创建
2 •相对路径
教学环境机房+电子教室
教学过程教学内容
上节回顾
新课讲授
1.Internet 与WWW 的区别？
2.静态网页与动态网页的区别？
3.网页的基本结构包含哪几对标记？
一、网站开发工作流程
网站是多个网页的集合，包括一个首页和若干个子网页，网页这间存在一定的联系，用超链接方式将各个既有鲜明的风格又有完善内容的网页联系为一个有机整体。

1.创建一个静态网站应遵循的基本流程
授课课题
《前台页面设计》
擅长或感兴趣的内容。

确定网站的结构。

确定一个网站结构可以用树状结构先把每个页面的内容大纲列出来，规划结
构后，进行网站目录设置。

建立目录结构应遵循的原贝y：①不要将所有文件都放在根目录
下。

②按栏目内容建立子目录。

③在每个主栏目目录下建立独立的images目录，用于存放该
栏目下所用的图片；根目录下的images目录只是用来存放首页和一些次要栏目的图片。

④
目录
的层次不要太深。

目录的层次建议不要超过三层，便于维护管理。

⑤不要使用中文目录。

网页
是在互联网上传播的，互联网上的操作系统各式各样，
有些系统不认识中文字符，也就显示不了中文目录。

⑥ 目录和文件的名称
用英文字母、数字、和下划的组合，不要包含汉字、空格和特殊字符。

3.设置开发环环境
配备良好的计算机及相关设备，如扫描仪、数码相机和打印机等。

配置完善的系统环境，如操作系统、浏览器、素材制制作开发工具和网页开发工具等相应
的软件。

备齐常用的网站发布工具，如FTP文件传输软件等。

4.规则页面设计和布局
要设计出好的网页，应遵循3个原则：
有创意、新颖以及有自己的特色。

有充实的内容和浏览价值。

网页的布局有一定的艺术性。

5.创建内容资源
在设计网页时，千万不要让信息和图片填满网页，网页看起来必须是干净、有组织有条理的，使用很容易阅读的字体。

文字与图片。

在一个页面中，文字与图片的比例要适当，文字太多，会将低网站的吸引力；图
片太多，会使页面的浏览速度下降。

动画。

动画可以点缀网页，网页中常用的动画是GIF动画。

动画不能太多，否则不仅会降低
浏览速度，而且会给人一种眼花缭乱的感觉。

大型或复杂的动画，需要添加swf格式的动
画。

二、定义站点
站点是文件与文件夹的集合。

1.创建新站点
选择“站点”一一“管理站点”一一“新建（N ）…”,可通过“站点定义向导” 创建或可通过“高级”设置对话框创建。

如图1-6至图1-
图1-6设置编辑方式
站点文
您星SfjS哽用眼界*歿rh,如CJJTU'LHL, jcr.HT、Acr, rr 盛r-r?
EM；克:T赃ao黠探二'戲
o星■我理俺电IE雾豁：s；h, <Y>
K上一咨⑥［忡一涉血卸「硕港II.需fe I
图1-7定义使用的服务器技术
我的茹
3
我诵宜胞 网上■^隔
［口, nite
选释Q 〕
-
f M ］
at 魅站点 孚花两姑的丰tfue 文件夫;
列O 京□'
詡 拱总J G 政
君
蛊a
站点定文
图1-8选择站点本地根文件夹
fifiTfFi % 3 a ［知
在开却S 甲”恬打期（r'Hm 用您旳文件？ 述缺痂勺「「芫EEfe 血上£宝观锯＜
）
I ）
0 伽*Hi 邨HSMfehlAS 丄豊仃fflfe 型
■^将把址忙存tif 在i 十B 世上的什盘主e ?
＞］ifra&a
K 上1步圜］汴一步世」［粤消 ］［利土I
图1-9选择连接到远程服务器方式
jRirq祜的站虎定文为
K上一歩叩||作1出QL H [ 咖]- fffa
图1-10选择连接到远程服务器方式
站点宦51
曙囱点目合以下超•区1
丰KE且：
站圭芒称聲芯网W 丰堪抿艾
汀氏1 gg
远e住宜：
刁町Tife/RSS
远牖衣件鼻■ kZ 万回/恥出
已華用.
HUK^S-
込阿我格花以后耳成砒设§•
町U.佚用-諭点谨订谨1爭配壹.
阳上二生.电训兗同徑J 一菇一丨秦吐1
图1-11完成站点基本定义
管理姑点
［完咸@1 I
图1-12完成站点基本定义
2.编辑站点
选择“站点”一—“管理站点”- -—“编辑（E）…”
3.复制站点
选择“站点”一—“管理站点”- —“复制（P）…”
3.删除站点
选择“站点”一—“管理站点”- —“删除（R）”
4.导出站点
选择“站点”一—“管理站点”- —“导出（T）…”
5.导入站点
选择“站点”一—“管理站点”- —“导入（1）…”
三、路径
1 .绝对路径：
大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/site/img/photo.jpg 我们就知道photo.jpg 文件是在c 盘的site目录下的img子目录中。

类似于这样完整的描述文件位置的路径就是绝对路径。

我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

而在网站中类似以htt p://www. pcki ngs.
net/img/photo.j pg 来确定文件位置的方式也是绝对路径。

另外，在网站的应用中，通常我们使用"/"来表示根目录，/img/photo.jpg就表
示Photo.jpg文件在这个网站的根目录上的img目录里。

但是这样使用对于初学者来
说是具有风险性的，因为要知道这里所指的根目录并不是你的网站的根目录，而是你的网站所在的服务器的根目录，因此当网站的根目录与服务器根目录不同时，就会发生错误。

2.相对路径
让我们先来分析一下为什么会发生图片不能正常显示的情况。

举一个例子，现在有一个页面index.htm,在这个页面中联接有一张图片photo.jpg。

他们的绝对路径如
下：
c:/site/i ndex.htm
c:/site/img/photo.j pg
如果你使用绝对路径c:/site/img/photo.jpg，那么在自己的计算机上将一切正常，
因为确实可以在指定的位置即c:/site/img/photo.jpg上找到photo.jpg文件，但是当你
将页面上传到网站的时候就很可能会出错了，因为你的网站可能在服务器的c盘,
可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由会有
布置作业
1创建“个人网站”站点 2.简述网站制作的流程
c:/site/img/photo.jpg 这样一个路径。

那么，在
index.htm 文件中要使用什么样的路径
来定位Photo.jpg 文件呢？对，应该是用相对路径，所谓 相对路径，顾名思义就是自
己相对与目标位置。

在上例中index.htm 中联接的photo.jpg 可以使用img/photo.jpg 来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会 出错。

另外我们使用“ ../”来表示上一级目录， 再看几个例子，注意所有例子中都是
Photo.jpg 。

例：
c:/site/web/i ndex.htm c:/site/img/photo.j pg
在此例中index.htm 中联接的photo.jpg 错误写法：img/photo.j pg
这种写法是不正确的， 在此例中，对于 的绝对路径是：c:/site/web/img/photo.jpg ，显然不符合要求。

正确写法：使用../img/photo.jpg 的相对路径来定位文件 例: c:/site/web/xz/index.htm
c:/site/img/images/photo.j pg
在此例中index.htm 中联接的photo.jpg 应该怎样表示呢？ 错误写法：../img/images/photo.j pg 这种写法是不正确的，在此例中对于 index.htm 文件来说../img/images/photo.jpg
所代表的绝对路径是：
c:/site/web/img/images/photo.jpg 。

正确写法：可以使用../../img/images/photo.jpg 的相对路径来定位文件 例：
c:/site/web/xz/i ndex.htm c:/site/web/img/photo.j pg
在此例中index.htm 中联接的photo.jpg 应该怎样表示呢？ 错误写法：../../img/photo.j pg 这种写法是不正确的，在此例中对于 index.htm 文件来说../../img/photo.jpg 所代
表的绝对路径是：c:/site/img/photo.jpg 。

正确写法：可以使用../img/photo.jpg 的相对路径来定位文件
1.创建网站名为“鲜花网站”的站点，在 D 盘上新建文件夹“ site ”，作为网站的根 目录。

在网站根目录
下创建 "images”文件夹、“CSS ”文件夹、“ xiahua ”文件夹和 “ dangaoms "文件夹。

效果如图1-13所示。

图1-13
“鲜花网站”站点目录
本节主要讲述了网站的规划、站点的管理和路径的运用，通过本节课的学习,
学生对网站的开发工作流程有一个明确的思路，掌握管理站点、路径的使用方法。

“../../”表示上上级的目录，以此类推。

index.htm 文件中联接有一张图
片
应该怎样表示呢?
index.htm 文件来说 img/photo.jpg 所代表 随堂实训
3 ◎站点-鲜花一..
Illi H1I iin^iii ■
css
文件夹 • "“B duigaotns
文件夹
images
-Ki anEu-ft 文件夹
本节内容“网站规划”较为抽象，学生理解到熟练运用需要一个较长的过程，
教学后记
在以后的教学中还会反复运用。

网页中的路径在讲课时通过结合Windows资源管理
器中的文件夹进行讲解，取得了较好的效果。