《网页制作基础教程2.docVIP

第1章 使用Dreamweaver建立网站 本章的教学目标为： （1）了解网页和网站的概念，特别是主页的概念；能够分析网站的结构。 （2）了解Dreamweaver 的操作界面。 （3）学会规划网站的结构；能够画出网站结构图。 （4）熟练掌握建立网站的方法。 （5）能够创建网站地图；能够更改网页的标题。 本章的教学建议： 本章的教学核心是创建一个网站。这包括了解网站的相关概念，熟悉制作网站的工具，规划出网站结构草图，到最后创建出一个网站的全过程。对于网站、网页等概念性的东西，可以根据实际情况进行删减，毕竟对于计算机专业的学生来说，这些不是新的概念。而对于Dreamweaver操作界面的讲述需要花一些心思。怎样通过一个巧妙的例子，将Dreamweaver的操作特点讲清楚是一个难点，如果仅仅是依次介绍，就显得太枯燥了。 本章还要向学生传达一个信息：制作网站前的准备工作与制作网站的操作同样重要，尤其是素材的搜集与网站结构草图的规划。要认识到制作一个网站是一个复杂的体系工程，这与使用Word制作一个文档是存在区别的。 对于具体的操作步骤，教材介绍的非常详细，建议让学习者按照课本自己操作。 课时安排：2课时 本章的教学内容： 1.1网页与制作工具 1.1.1认识网页 简单地说，网页就是把文字、图形、声音、影片等多种媒体形式的信息，以及分布在因特网上的各种相关信息，相互链接起来而构成的一种信息表达方式。 在浏览网站时看到的每个页面则是这本书中的一页，我们称之为“网页”。 在进入网站后显示的第一个页页，我们称其为“主页”。主页就像一本书的目录，它是所有网页的索引页。通过单击主页上的超级链接，可以打开这个网站中的其他网页。 1.1.2 HTML HTML语言， Hyper Text Markup Language，即超文本标识语言。 HTML语言是一种超文本标记语言，它用来描述某个事物应该如何合理地显示在计算机屏幕上。 用文本文件编辑软件可以打开HTML文件或编辑HTML文件。 显示HTML文件的内容必须借助因特网浏览器。 用HTML语言来编辑网页存在许多缺点。 1.1.3网页制作工具 网页制作软件可以实现主页制作者与HTML语言的分离，我们只需在编辑器中输入文本或图片，网页制作软件将帮助我们将这些文本或图片转换成相应的HTML语言代码。 在众多网页制作软件中，FrontPage是一种比较简单的软件。除了Frontpage 以外，还有许多制作网页的软件，如Hotdog等，其中最著名的是ADOBE公司的Dreamweaver，它和该公司的另外两个产品Flash（动画制作工具），Fireworks（图像编辑工具）一起称为“网络三剑客”。 1.2使用Dreamweaver建立一个网站 1.2.1 Dreamweaver的操作界面 Dreamweaver，的“插入”面板共有12个独立的选项卡，在网页编辑的过程中，可通过单击面板上的按钮来为网页添加相应的元素，如图片、表格、框架、Flash等；“属性”面板则用于显示所选中的网页元素的属性，并可在属性面板上修改。 如果觉得网页的显示区域太小，可以单击浮动面板左侧的，关闭浮动面板，此时该按钮变成，单击可再次打开浮动面板。 Dreamweaver的其它面板都在窗口右半部分，并采用了展开与折叠功能，单击可以展开面板，同时该按钮变成状，单击它可以将面板折叠起来。 用鼠标单击菜单栏上的“文件”，在弹出的菜单中选择“关闭”，可以关闭打开的网页。 1.2.2 画出网站结构图 为全面地展示一个主题，往往需要制作若干个网页，把这些网页互相链接起来，就构成了一个网站，也称为Web站点。 在开始建立网站之前，首先要确定网站的主题，根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等画出结构图，这样不但可以帮助规划网站结构，使网站条理清楚、主题鲜明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。 1.2.3建立一个网站 在Dreamweaver MX工作窗口中，单击“站点”菜单中的“新建站点”命令，打开“未命名站点1的站点定义为”对话框。 在“未命名站点1的站点定义为”对话框中，选中“基本”选项卡，在“您打算为您的站点起什么名字？”文本框中，输入新站点的名称。 然后选择是否需要使用服务器技术。 接着选择在何处编辑网页，单击右侧的可以更改保存位置，也可以直接输入保存的位置。 选择如何连接到远程服务器和打算将文件存储在服务器上的什么文件夹中 选择是否让别人和你同时编辑同一个网页。 最后单击，完成新建网站的操作，返回Dreamweaver MX工作窗口。 1.2.4在网站中添加网页 在浮动面板“文件”项的“站点”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”，站点文