第1章网站的建立

主编黄洪杰幻灯制作黄洪杰电子工业出版社《网页制作基础教程》中等职业学校电子信息类教材（计算机技术专业）电子教案第1章网站的建立1.1网页与制作工具

如果把因特网上的每个网站看成一本书，那么在浏览网站时看到的每个画面则是这本书中的一页，我们称之为“网页”。而在进入网站后显示的第一个画页，我们称其为“主页”。主页就像一本书的目录，它是所有网页的索引页。通过单击主页上的超级链接，可以打开这个网站中的其他网页。

网站就是由一个个网页构成的。

1.1.1认识网页1.1.2加入INTERNET大家庭个人主页是你的数字化化身，你可以通过它把你的个性、爱好表露出来，不必担心别人的哂笑。

一个介绍茶艺的个人网页

1.1.3HTML语言

HTML语言是一种超文本标记语言，它用来描述某个事物应该如何合理地显示在计算机屏幕上。也可以这么说，HTML就是以特殊的标记形式存储为通常的文本文件。

HTML文件并不难于读懂，只是比较繁琐。

<center><b><fontface="黑体"><fontsize=18>欢迎参观我的主页</font></font></b></center>

在网页上实现“欢迎参观我的主页”这句话为黑体18号字并居中显示，相应的HTML语句为：

1.1.4网页制作工具

网页制作软件可以实现主页制作者与HTML语言的分离，我们只需在编辑器中输入文本或图片，网页制作软件将帮助我们将这些文本或图片转换成相应的HTML语言代码。

Dreamweaver被认为是更专业的网页制作工具，它和Macromedia公司的另外两个产品Flash，Fireworks一起称为“网络三剑客”。拥有更广泛的网页制作者群，

1.2使用Dreamweaver建立一个网站

DreamweaverMX是一种“所见即所得”的网页制作工具，它也是目前最常用的网页制作工具之一。DreamweaverMX对于DHTML(动态网页)的支持非常好，可以制作出许多精彩的互动页面特效。

1.2.1Dreamweaver的工作界面

“插入”面板网页编辑区“属性”面板菜单栏浮动面板组“插入”面板共有12个独立的选项卡，在网页编辑的过程中，可通过单击面板上的按钮来为网页添加相应的元素；“属性”面板则用于显示修改所选中的网页元素的属性。

1.2.2画出网站结构图

为全面地展示一个主题，往往需要制作若干个网页，把这些网页互相链接起来，就构成了一个网站。在开始建立网站之前，首先要确定网站的主题，根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等。在制作网站之前应该先画出结构图，这样不但可以规划网站结构，使网站条理清楚、主题鲜明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。

1.2.3建立一个网站

在DreamweaverMX工作窗口中，单击“站点”菜单中的“新建站点”命令，打开“未命名站点1的站点定义为”对话框

。输入新站点的名称。

选择是否需要使用服务器技术。

选择在何处编辑网页。

更改保存位置。

选择如何连接到远程服务器。

选择是否让别人和你同时编辑同一个网页。

单击完成，返回DreamweaverMX工作窗口。

1.2.4在网站中添加网页

在浮动面板“文件”项的“站点”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”，站点文件夹被展开，同时自动建立了一个名为“untitled.htm”的网页

。1.2.5更改网页名称

网页建立以后，名称栏中的“untitled.htm”处在选定状态，可直接输入网页文件名。

用同样的方法可以建立多个网页。

1.3创建网站地图

创建网站地图可以规划和管理网页之间的关系，同时实现网页之间的导航。1.3.1创建网站地图

单击“站点”选项卡中的“展开/折叠”按钮

按住“站点地图”按钮，从弹出的菜单中单击“地图和文件”，打开“站点地图”窗口。

在窗口右侧文件列表中找到“index.htm”，右击该文件，在弹出的快捷菜单中单击“设为首页”，把“index.htm”设置为这个网站的主页。左侧窗口中单击“index.htm”文件图标，使其右边出现链接标志，拖动该标志到右侧窗口中的文件上。松开鼠标，该文件图标出现在左侧窗口中并与“index.htm”相连接。

用用同样的方法，完成网站地图。

1.3.2在网站地图中更改网页标题

网页标题指的是浏览该网页时显示在浏览器标题栏中的名字，而不是这个网页的文件名。

打开网页，在窗口顶端的“标题”栏中单击，将其中的“无标题文档”删除，输入网页的标题，

单击“文件”菜单中的“保存”命令，保存所做的修改。

在浮动面板“文件”项的“站点”选项卡中，单击“展开/折叠”按钮，再