网页制作基础教程

·1·第1章使用Dreamweaver建立网站本章的教学目标为：（1）了解网页和网站的概念，特别是主页的概念；能够分析网站的结构。（2）了解Dreamweaver的操作界面。（3）学会规划网站的结构；能够画出网站结构图。（4）熟练掌握建立网站的方法。（5）能够创建网站地图；能够更改网页的标题。本章的教学建议：本章的教学核心是创建一个网站。这包括了解网站的相关概念，熟悉制作网站的工具，规划出网站结构草图，到最后创建出一个网站的全过程。对于网站、网页等概念性的东西，可以根据实际情况进行删减，毕竟对于计算机专业的学生来说，这些不是新的概念。而对于Dreamweaver操作界面的讲述需要花一些心思。怎样通过一个巧妙的例子，将Dreamweaver的操作特点讲清楚是一个难点，如果仅仅是依次介绍，就显得太枯燥了。本章还要向学生传达一个信息：制作网站前的准备工作与制作网站的操作同样重要，尤其是素材的搜集与网站结构草图的规划。要认识到制作一个网站是一个复杂的体系工程，这与使用Word制作一个文档是存在区别的。对于具体的操作步骤，教材介绍的非常详细，建议让学习者按照课本自己操作。课时安排：2课时本章的教学内容：1.1网页与制作工具1.1.1认识网页简单地说，网页就是把文字、图形、声音、影片等多种媒体形式的信息，以及分布在因特网上的各种相关信息，相互链接起来而构成的一种信息表达方式。在浏览网站时看到的每个页面则是这本书中的一页，我们称之为“网页”。在进入网站后显示的第一个页页，我们称其为“主页”。主页就像一本书的目录，它是所有网页的索引页。通过单击主页上的超级链接，可以打开这个网站中的其他网页。1.1.2HTMLHTML语言，HyperTextMarkupLanguage，即超文本标识语言。HTML语言是一种超文本标记语言，它用来描述某个事物应该如何合理地显示在计算机屏幕上。用文本文件编辑软件可以打开HTML文件或编辑HTML文件。显示HTML文件的内容必须借助因特网浏览器。用HTML语言来编辑网页存在许多缺点。1.1.3网页制作工具网页制作软件可以实现主页制作者与HTML语言的分离，我们只需在编辑器中输入文本或图片，网页制作软件将帮助我们将这些文本或图片转换成相应的HTML语言代码。在众多网页制作软件中，FrontPage是一种比较简单的软件。除了Frontpage以外，还有许多制作网页的软件，如Hotdog等，其中最著名的是ADOBE公司的Dreamweaver，它和该公司的另外两个产品Flash（动画制作工具），Fireworks（图像编辑工具）一起称为“网络·2·三剑客”。1.2使用Dreamweaver建立一个网站1.2.1Dreamweaver的操作界面Dreamweaver，的“插入”面板共有12个独立的选项卡，在网页编辑的过程中，可通过单击面板上的按钮来为网页添加相应的元素，如图片、表格、框架、Flash等；“属性”面板则用于显示所选中的网页元素的属性，并可在属性面板上修改。如果觉得网页的显示区域太小，可以单击浮动面板左侧的，关闭浮动面板，此时该按钮变成，单击可再次打开浮动面板。Dreamweaver的其它面板都在窗口右半部分，并采用了展开与折叠功能，单击可以展开面板，同时该按钮变成状，单击它可以将面板折叠起来。用鼠标单击菜单栏上的“文件”，在弹出的菜单中选择“关闭”，可以关闭打开的网页。1.2.2画出网站结构图为全面地展示一个主题，往往需要制作若干个网页，把这些网页互相链接起来，就构成了一个网站，也称为Web站点。在开始建立网站之前，首先要确定网站的主题，根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等画出结构图，这样不但可以帮助规划网站结构，使网站条理清楚、主题鲜明，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。1.2.3建立一个网站在DreamweaverMX工作窗口中，单击“站点”菜单中的“新建站点”命令，打开“未命名站点1的站点定义为”对话框。在“未命名站点1的站点定义为”对话框中，选中“基本”选项卡，在“您打算为您的站点起什么名字？”文本框中，输入新站点的名称。然后选择是否需要使用服务器技术。接着选择在何处编辑网页，单击右侧的可以更改保存位置，也可以直接输入保存的位置。选择如何连接到远程服务器和打算将文件存储在服务器上的什么文件夹中选择是否让别人和你同时编辑同一个网页。最后单击，完成新建网站的操作，返回DreamweaverMX工作窗口。1.2.4在网站中添加网页在浮动面板“文件”项的“站点”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”，站点文件夹被展开，同时自动建立了一个名为“untitled.htm”的网页。1.2.5更改网页名称网页建立以后，名称栏中的“untitled.htm”处在选定状态，可直接输入网页文件名。1.3创建网站地图·3·1.3.1创建网站地图创建网站地图可以规划和管理网页之间的关系，同时实现网页之间的导航。单击“站点”选项卡中的“展开/折叠”按钮，按住“站点地图”按钮，从弹出的菜单中单击“地图和文件”，打开“站点地图”窗口。在窗口右侧文件列表中找到“index.htm”，用鼠标右键单击该文件名，在弹出的快捷菜单中单击“设为首页”。在左侧窗口中单击“index.htm”网页文件图标，使其右边出现标志符号，拖动该标志到右侧窗口中的文件上。松开鼠标，网页文件图标出现在左侧窗口中“index.htm”图标的左下方，并与“index.htm”相连接。用同样的方法，使其他网页图标出现在左侧窗口中。1.3.2在网站地图中更改网页标题在“站点地图”窗口中双击网页文件图标，打开这个网页。在窗口顶端的“标题”栏中单击，将其中的“无标题文档”删除，输入网页的标题。单击“文件”菜单中的“保存”命令，保存所做的修改。在浮动面板“文件”项的“站点”选项卡中，单击“展开/折叠”按钮，再次打开“站点地图”窗口。单击“视图”菜单中的“显示网页标题”命令。1.3.3退出Dreamweaver单击“文件”菜单中的“关闭”命令，或者单击网页编辑窗口右上角的，关闭这些网页窗口。单击DreamweaverMX工作窗口右上角的，退出DreamweaverMX。作业：课后123小题。制作一个学网站布局图。课后记：展示网页效果图让学生先了解网页、网站的概念，充分了解后再谈得上学动手制作。·4·第2章网页的布局本章的教学目标为：（1）知道网页设计中的几种常见布局和风格。（2）熟练掌握插入表格，对表格进行设置的方法。（3）知道布局模式；能够用布局模式完成网页的布局。（4）掌握表格布局与布局模式的区别。（5）知道框架的含义，掌握插入框架的方法本章的教学建议：本章的重点是学习网页的风格和布局，这要比具体的操作重要的多。建议在学习的过程中熟练讲出课本中介绍的几种布局结构，并举出相应的实例，最好这些例子与课本上的例子不一样。网页制作的技能，作为纯技术AP元素面，本教材要求并不高。而要做出一个优秀的网站，重要的一点是对网页的感觉，也就是网页的布局、颜色的搭配、文字的大小等等，这些素养的培养需要多观摩优秀的网页，吸取其精华。教材中用大量的篇幅介绍相关内容的寓意就在于此，在教学设计上要体现出这一点。作为操作技能，本章主要涉及表格和布局模式。由于Word等软件的使用，表格应该不是难点。所以要对布局模式着重介绍，最好通过比较使学生认识到表格布局与布局模式的区别。课时安排：2课时本章的教学内容：2.1网页布局实例2.1.1网页的风格针对不同的网页风格，大体可以将网页分为两大类：商业网页和个人网页。商业网站一般都有比较统一的布局设计，而个人主页的形式更灵活，更容易创造出美感。主页风格没有优劣之分，网站的性质与风格有着根本的区别。2.1.2网页布局实例1.“厂”字型结构，这种结构的特点是内容清晰，一目了然。网页最顶端是徽标和图片（广告）栏，下半部分的左边是导航链接，右边是信息发布区。这种结构非常常见。2.“同”字型结构，这是大型网站最常用的一种结构，特点是超链接多、信息量大。网站的顶端是徽标和图片（广告）栏，下部分分为三列，或者更多。两边的两列区域比较小，一般是导航超链接和小型图片广告等，中间是网站的主要内容，最下面是网站的版权信息等。3.标题正文型结构，这种结构顶端是网站标识和标题，下面是网页正文。内容非常简单。4.分栏型结构，这种结构一般分为左右（或上下）两栏，也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页，导航链接栏的内容不会发生变化。在WEB型的电子邮箱中多见这种结构。5.Flash型结构，这种结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。6.封面型结构，这种结构往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不·5·同，这种结构并不是在Flash中完成的，而是在网页制作软件中完成的。2.1.3网页布局注意事项1.平衡性：2.对称性3.对比性4.疏密度5.反复性6.韵律感2.1.4画出网页布局草图确定网页布局。画出网页布局草图。2.2使用表格2.2.1插入表格单击“插入”面板的按钮，输入行数和列数。2.2.2制作不规则表格单击表格使光标出现在某行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单，在下一级菜单中单击“插入行或列”，选中“行”，在“行数”右端的栏位中输入1，然后选中“所选之下”。单击，在图片所在行的下面将插入一行。插入列与插入行方法相同。单击鼠标，使光标出现在该行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单，在下一级菜单中单击“删除行”，该行被删除。2.2.3合并与拆分单元格拖动鼠标指针选中多个单元格，移动鼠标指针到“属性”面板上，单击“合并单元格”按钮，单元格被合并。单击鼠标，使光标出现在单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，选中“拆分为行”，在“行数”右端的栏位中输入“2”。单击，该单元格被分为两个单元格。2.2.4表格的嵌套单击鼠标，将光标出现在单元格中，单击“插入”面板的按钮，打开“插入表格”对话框，输入行列数，单击。2.2.5使用“表格属性”对话框对表格进行设置，主要是在属性面板中进行，注意的是选取表格与选取单元格时，属性面板的内容是不同的。在该属性面板中，能够设置框线的宽度、单元格间距，以及背景色等。2.2.6设置表格框线·6·更改表格框线的宽度为0，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏。2.3布局模式2.3.1布局模式工具栏布局模式是DreamweaverMX增强的一个功能，使用它可以非常方便地对网页布局进行规划。在完成规划后，还可以返回到表格这一大家熟悉的形式上。熟悉掌握它，非常有益。在插入面板中，单击“布局”选项卡，单击按钮，切换到布局模式。2.3.2使用布局模式规划网页布局单击绘制布局表格按钮，编辑区顶端出现“布局模式”几个字。移动鼠标到编辑区，指针变成状，按住鼠标指针拖动，画出一个绿色的表格。用同样的方法，再画布局表格。在插入面板中单击绘制布局单元格按钮，移动鼠标指针，画出单元格。2.4使用框架2.4.1框架概述我们可以这样理解框架：一个框架由几个独立的页面组成。在一般情况下，这些页面只显示全部内容的一部分，我们可以通过滚动条浏览页面的全部内容。或者也可以说，框架实现了在一个窗口中浏览多个页面。2.4.2框架文件的建立与保存单击菜单栏上的“插入”，弹出“插入”菜单，移动鼠标指针到该菜单的“框架”上，最后在其下一级菜单中选择“上方及左方框架”命令。网页被分为三部分。在顶端中单击鼠标，可以发现Dreamweaver的标题栏中网页名字变为“UntitledFrame-2”，而左下方的网页名字为“UntitledFrame-3”，右下方的网页名字为原来的