搜索
睢宁县李集中学校本课程材料主编：徐善新DreamWeaver建设网站第一节：专门制作网页的工具有很多种，比较有名气的有FrontPage和DreamWeaver两个，由于这两个工具是不同公司的产品，所以他们的风格有着很大的区别，其中FrontPage的风格和我们前面学过的Word的风格非常相似，在我们已经学习过Word的基础上使用FrontPage来制作网页也会非常容易上手，你会发现做网页原来如此简单，但是我们现在却来学习DreamWeaver，可能有的同学会觉得刚开始的时候有点难，我们的目的正是在于，不但要学习网页的制作，更要培养使用不同风格的软件的能力。第二节：一切从站点开始--建立个人站点站点的定义与设置定义站点也就是建立网站，可以将已建立的网页转换成网站，也可以从零开始建立一个全新的站点。在DreamWeaver里面站点的定义可以通过文档窗口中的“站点”-“新建站点”来进行定义。上图中三个红色框框的地方都可以开始定义站点=====也可以通过文档窗口右下角的显示站点按钮打开站点窗口，然后从站点窗口中的“站点”下拉单中选取“定义站点”在定义站点对话框中通过“新建”按钮打开站点定义对话框在定义站点的对话框中：通过①分类信息设置站点的各种相关信息，在②的文本框中输入站点的名称，在③的文本框中输入你的站点要保存的位置，或着通过④的文件夹按钮在你的电脑里选择一个位置。设置好以后按确定就完成了一个简单的站点的定义，这时可以在站点窗口里的“站点”下拉单中看到刚才定义的站点，选中了我们定义的站点后旧可以在站点窗口右半边的文件夹视图中看到站点的内容了从我们刚建立的站点上点击鼠标右键，在弹出菜单中选择新建文件或文件夹来建立我们网站里的内容。从已经建立的网站开始建立你的首页建立好站点后我们就要来建立我们站点内的网页了，在站点窗口中右边文件夹视图上点击鼠标右键--新建文件网站里面有一个很重要的页面，称为首页，也就是通常网站看到的第一个页面，别人通过首页提供的链接来访问站点里面的其他页面。首页一般都会有一个约定的名称，例如常见的名称为index.htm或default.htm等。我们把刚建立的文件改名为index.htm，作为网站的首页接下来我们就可以编辑首页，通过鼠标双击站点窗口中的index.htm这个文件就可以在文档窗口中打开这个文件，然后我们就可以去编辑他，先来做一个简单的页面，参考下图所示自己建立一个我们给我们的首页起一个名称，在文档窗口里的标题文本框中输入我们喜欢的名称设置好的标题会出现在标题拦中这个网页的编辑工作可以参考我们前面所学的内容。站内资源的管理建立完首页以后我们可以用同样的方法建立起其他一些页面，来充实我们的网站，例如根据首页上的内容我们可以建立作者简介（intro.htm）、最爱收藏（mylove.htm）、好文共赏（article.htm）、友情链接（link.htm）等页面，然后一个个页面去编辑处理。由上图可以看到，在站点窗口中我们可以方便的对我们网站内的资源进行管理，就好象windows里面的资源管理器一样。透过站点窗口中的站点地图按钮，我们可以看到整个站点的树状结构超级链接超级连接是HTML的灵魂，在DreamWeaver里面我们可以非常容易的建立超级连接：在文档窗口中通过属性工具栏进行超级连接的设置，直接在属性工具栏的链接着一栏中输入你要连接的文件名称就可以了。也可以通过属性工具栏连接这一栏后面的“指向文件”按钮来直接建立超级连接，或者通过打开文件夹来建立连接超级连接有一个属性：“目标”它有几种取值，分别是_blank：通过建立一个新的窗口来打开这个超连接，_parent在父窗口中打开，_self在同一个窗口里直接打开连接_top在框架窗口的顶端打开超连接。当然也可以通过站点窗口里的“指向文件”来建立连接在站点内建立好链接后的站点窗口就可以看到树状的站点结构第三节：表格在的网页中的应用在网页制作中，通常用表格来进行布局，这样可以控制文本和图形在页面上出现的位置，使用表格进行定位。本节课以一个实例来说明表格的插入、表格属性的设制及表格在网页制作中的定位。请先看下面的网页及其在编辑状态中的式样在浏览器中打开效果Dreamweaver在编辑状态一、表格的插入及基本操作表格的插入方法有多种，可以通过插入菜单中的表格来插入，也可以通过对象窗口中的表格对象来插入，操作如下：１、将鼠标移到要插入表格的地方；２、单击插入菜单中的表格或单击对象窗口中的表格对象；３、设置表格的行数、列灵敏、宽度以及边框粗细４、单击“确定”，即可完成表格的插入。表格的基本操作：选择表格、单元格、调整表格和单元格的大小选择表格：单击表格的最处边框，或通过“修改-表格-选择表格”来完成；选择单元格：在单元格内单击，然后平行或向下拖动选择多行或多列；调整表格和单元格大小：（1）选择表硌；（2）拖动一个选择手柄，沿相应方向调整表格的大小。二、行、列的插入和删除，单元格的合并和拆分在表格处理过程中，经常遇到行、列的插入和删除，单元格合并、拆分的有关操作：１、行、列的插入和删除（1）选择要插入或删除的行或列；（2）选择“修改-表格”，然后根据需要选择相应的项；2、单元格的合并：首先选择要合并的单元格，然后单击属性窗口中的合并单元格,或通过修改-表格-合并单元格来完成；3、单元格的拆分：首选选择要拆分的单元格，然后通过“修改-表格-拆分单元格”,或属性窗口中的拆分单元格,然后选择是拆分为行还是列,再输入行数或列数来完成.三、表格属性的设置在使用表格进行网页设制中，我们可以通过对表格背景、表格线的粗细、单元格背景等属性的设置来进一步美化表格，对表格属性的设置可以通过属性窗口的有关项目来完成。（1）选择整个表格，设置表格属性（2）选择要设置属性的单元格，然后设置单元格属性（内容类似于整个表格的属性）四、表格在网页制作中的定位作用在网页制作中，常使用表格来进行定位，因为单元格中又可以插入表格，通常先用一个大表格规划好整个网页的结构，在每一栏目中又用表格来具体定位。本节课课件首页样例的定位方法如下：1、插入一个3行1列的表格整体定位；（1）（2）（3）2、将（3）拆分成两列；（1）（2）（3）（4）3、在（1）中插入如右表格；4、在（2）中插入如右表格；5、在（3）中插入如右表格；6、在（4）中插入如右表格；7、在相应的表格单元格中插入有关的图片或文字。表格的插入及其操作单元格的合并与拆分表格、单元格属性的设置表格在网页中的定位作用第四节：申请个人主页空间，开始建立你的个人站点同学们，前面我们已经学习了如何建立站点以及通过站点来建立和管理我们的网页，这样我们已经能够通过DreamWeaver来建立一些简单的网站了，当我们建立了我们的站点以后最希望的事情就是把他放到网上去让大家一起来欣赏。为了把我们做的网页放到网上去我们首先就要申请一个主页空间，那么主页空间如何申请呢？在网上有哪些网站提供了免费的个人主页空间呢？申请了空间以后我们又如何才能把自己做的网页上传到自己的个人主页空间里去呢？这些都是我们这节课要解决的问题。当我们申请了个人主页空间以后，提供空间的网站一般都会让你通过FTP的方式来上传你的主页，FTP是一个非常有用的文件传输协议，有很多提供FTP功能的软件可以使用，例如比较有名的CuteFTP就是其中之一，下面我们来看看这个软件是如何使用的：CuteFTP使用教程先让我们来熟息一下CuteFTP的界面吧，工具栏上的各个工具：其中：地址本中帮我们记录下一些有用的FTP站点，让我们可以便捷的进行连接。快速连接方便我们进行快速的连接，按下它就可以看到下面的工具栏：其中的URL就是要求你填写你要登陆的服务器的地址，UserName就是你的申请的用户名，Password就是你的密码，Port就是服务器开放的端口号，一般FTP服务提供的端口号都是21,填写完了就可以按Port旁边的连接按钮进行连接。通过断开连接就可以断开与服务器的连接了。登陆服务器操作按下地址本打开地址本看到其中的个人主页空间连接如下：在这个列表中我们可以看到我们学校提供的ftp空间地址是61.142.7.150，端口号是:21,如果你在学校申请了个人主页空间，你就可以在其中的用户名这一栏中填入你的用户名，在密码栏中输入你的密码，就可以连接了。当你连接到了校园网上，就会看到类似的提示信息：这说明你已经成功的登陆了服务器，当然也有可能没有相关的信息，这时我们可以通过观察服务器端的地址栏看到如果是\就是成功登陆了，如果什么都没有就说明还没有登陆。文件的上传和下载：文件上传很简单只要用鼠标双击要上传的文件或干脆把CuteFTP窗口左边本地文件列表中的文件或文件夹用鼠标拖拉到右边服务器端就可以了，这样你可以在下面的上传情况列表中看到上传的结果：文件的下载和文件的上传操作方法差不多：当然，CuteFTP还有很多功能，比如比较本地文件与服务器文件差别，建立服务器端文件夹等等功能，同学们可以自己探索一下。第五节：图像的插入及属性的设置图像在网页中通常起到画龙点睛的作用，本节课我们来学习在网页中插入图像、插入鼠标经过图像、图像属性设置及图像热区设置的方法。一、插入图像１、插入普通图像插入鼠标经过图像可以通过：点击菜单［插入］－［图像］来插入或插入对象窗口中的“插入图像”按钮；在出现的对话框中，选择所要插入的图像文件，然后单击“选择”按钮。或２、插入鼠标经过图像插入鼠标经过图像可以通过：单击菜单［插入］－［交互式图像］来插入或插入对象窗口中的“插入鼠标经过图像”按钮；在出现的对话框中，选择所要插入的图像文件，然后单击“选择”按钮（同上）。二、图像属性的设置插入图像后，单击要设置属性的图像，然后通过属性窗口的有关栏目设置相应的属性。三、图像热区设置１、在网页中选择要创建图像热区的图像；２、从属性窗口选择相应的工具：椭圆形热点工具、矩形热点工具、多边形热点工具；３、在选定图像上拖动鼠标指针，创建相应形状的热区；４、对热区创建超链接、为热区设置替代文字等。四、实践在网页中插入图像，练习创建图像的热区，对不同的热区创建不同的链接。第四节：层的应用，层的显示与隐藏层是一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层可以放置在页面的任意位置。可以在层里放置文本、图像等对象甚至其他层。层对于制作网页的部分重叠效果更具有特殊作用。把页面元素放入层中，可以控制元素的显示顺序，也能控制是那个显示、哪个隐藏。利用层的这些特点我们可以用层来建立下拉菜单，浮动广告或对页面元素绝对定位。先来让我们了解一下层的建立以及层的基本操作。你看见我们这个页面上的红色印章其实就是使用了层的方法来实现的。了解了层的建立和基本操作，接下来我们就可以通过使用层来建立起一些特殊效果，例如制作“超级连接”的说明，制作个性的下拉菜单等。当然层还有很多效果，例如我们上网的时候看到的一些浮动的广告等，让我们一起去探索层的美妙效果吧。第五节：框架在网页设计中的应用框架是网页设计中常用到的设计方式，用于在一个浏览器窗口中显示多个HTML文档。本节课来学习框架的创建及框架在网页设计中的应用。下面这个网页就是应用框架的一个例子。一、框架概述框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，显示时，每个区域可以有自己的滚动条、背景、标题等，使网页的版面更友好。但也有其缺点：不是所有的浏览器都支持框架，如IE3.0就不支持，浏览时，不支持框架的浏览器把所有网页中的内容在每一个区域中重叠显示，达不到预期的效果，另外，由于框架的实现实际是把几个HTML文件在同一个页面内显示，因此，在下载网页时，框架结构的网页会比普通网页要多下载几个文件，速度要慢。虽然，框架存在一些缺点，但是，它还是目前较受欢迎的一种网页结构。二、框架的创建和删除（1）在创建框加之前，先单击“查看”“可视化助理”“框架边框”，使框架边框在文档编辑中可见。（2）框架的创建，可以用下列之一方法创建：A、单击“修改”“框架页”选择拆分的方式将光标所在