DreamWeaver基本教程
- 格式:doc
- 大小:877.00 KB
- 文档页数:40
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在框架窗口的顶端打开超连接。
当然也可以通过站点窗口里的“指向文件”来建立连接
在站点内建立好链接后的站点窗口就可以看到树状的站点结构
第三节:表格在的网页中的应用
在网页制作中,通常用表格来进行布局,这样可以控制文本和图形在页面上出现的位置,使用表格进行定位。本节课以一个实例来说明表格的插入、表格属性的设制及表格在网页制作中的定位。请先看下面的网页及其在编辑状态中的式样。
在IE浏览器中浏览效果
在Dreamveaver编辑状态中样式
一、表格的插入及基本操作
表格的插入方法有多种,可以通过插入菜单中的表格来插入,也可以通过对象窗口中的表格对象来插入,操作如下:
1、将鼠标移到要插入表格的地方; 2、单击插入菜单中的表格 或单击对象窗口中的表格对象;
3、设置表格的行数、列灵敏、宽度以及边框粗细 4、单击“确定”,即可完成表格的插入。
表格的基本操作:选择表格、单元格、调整表格和单元格的大小
选择表格:单击表格的最处边框,或通过“修改->表格->选择表格”来完成;
选择单元格:在单元格内单击,然后平行或向下拖动选择多行或多列;
调整表格和单元格大小:(1)选择表硌;(2)拖动一个选择手柄,沿相应方向调整表格的大小。
二、行、列的插入和删除,单元格的合并和拆分
在表格处理过程中,经常遇到行、列的插入和删除,单元格合并、拆分的有关操作:
1、行、列的插入和删除
(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就是要求你填写你要登陆的服务器的地址,User Name 就是你的申请的用户名,Password就是你的密码,Port就是服务器开放的端口号,一般FTP服务提供的端口号都是21,填写完了就可以按Port旁边的连接按钮进行连接。
通过断开连接就可以断开与服务器的连接了。
登陆服务器操作
按下地址本打开地址本看到其中的个人主页空间连接如下:
在这个列表中我们可以看到我们学校提供的ftp空间地址是61.142.7.150,端口号是:21,如果你在学校申请了个人主页空间,你就可以在其中的用户名这一栏中填入你的用户名,在密码栏中输入你的密码,就可以连接了。
当你连接到了校园网上,就会看到类似的提示信息:
这说明你已经成功的登陆了服务器,当然也有可能没有相关的信息,这时我们可以通过观察服务器端的地址栏看到如果是"\"就是成功登陆了,如果什么都没有就说明还没有登陆。
文件的上传和下载:
文件上传很简单只要用鼠标双击要上传的文件或干脆把CuteFTP窗口左边本地文件列表中的文件或文件夹用鼠标拖拉到右边服务器端就可以了,这样你可以在下面的上传情况列表中看到上传的结果: