Dreamweaver网页设计制作
Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页,利用它可以轻松的组织、编辑网页并将其发布到指定的站点上,而且在发布之后还能对更新情况进行监控以更新站点的内容。
现在流行的网页制作软件有很多,如Macromedia公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架,表单和Image map 图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页,利用它可以轻松的组织、编辑网页并将其发布到指定的站点上,而且在发布之后还能对更新情况进行监控以更新站点的内容。
工具准备好了,可根据你的个人喜好来选择一些素材,如图片、喜欢的文章等。现在就让我们从第一步的建立站点来踏上建造网上家园之旅。
  用DREAMWEAVER创建站点是很容易的。首先,我们来看一下创建一个只包含一个网页的站点。 选择“文件”菜单的“新建”选项,单击“站点”命令,这时新建站点对话框就弹出来了,在“
指定新站点位置”文本框中输入新站点的位置,单击“只有一个网页的站点” 图标,单击“确定”按钮。这就建立好站点了,我们现在来看一下新的站点里有什么,单击“视图”工具条的“文件夹”按钮。 在文件夹列表里有一个网页文件,名字叫做“index.htm”。我们知道,每一个站点都要有一个主页,这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时,DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的,我们可以向里面添加内容。 
  在文件列表里除了主页之外,还有文件夹。新建站点时,DREAMWEAVER都会在站点所在位置下新建两个文件夹,一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。 private”文件夹比较特殊,其中的文件对浏览者来说是隐含的,我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里,比如:我们可以在这个文件夹里存放注册用户的个人信息。 
  尽管每一个站点都要有一个主页,不过创建站点时我们仍然可以从一个空站点开始:选择“文件”菜单的“新建”命令,单击“站点”选项,在“新建站点”对话框里,我们可以选择“空站点”
图标来创建一个空站点。“新建站点”对话框中还有许多其他图标,这是DREAMWEAVER提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点,都是从头开始来创建一个站点,这就好像盖房子一样,首先画图纸。然而,有许多的房子都具有相似的结构和用途,所以我们可以用一张图纸盖很多相似的房子,这样就节省了许多工作。
  同样的,尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的,如果我们从头开始建立站点的话,就要做许多重复劳动,这时,我们就可以使用模板或向导来建立站点。模板和向导的作用就好像盖房子的图纸一样,我们不必每次建立站点时都从头开始。 我们单击“个人站点”图标, 用它可以迅速创建一个个人站点,输入站点所在的位置,单击“确定”按钮, 这样我们刚就创建了个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。 现在我们点击一下“文件夹”按钮, 双击index.htm图标, 
      哎,好象有许多文字都不对,没关系,这些文字都是可以改变的,现在写的是文字的用途,比如“主题”文字就是用来写网站标题的地方,我们只要把它改为自己喜欢的标题就可以了。返回到“文件夹”模式,双击photo.htm 也可以把风景图片换成自己的照片,只要在新建站点的基础上进一步修改就可以做出自己的个人站点了。 这不仅节省了许多力气,同时也给了初学者一个良好的出发点。
  那么模板和向导有什么区别呢?我们安装软件时,一步步的用对话框提示我们完成安装过程的程序就是一个向导。在DREAMWEAVER里,向导也是一种模板,不过它是一种特殊的模板,它会以对话框的形式辅助你完成站点的创建过程。
  现在我们选择“文件”菜单的“新建”选项,单击“站点”命令, 
你看,DREAMWEAVER提供了两个向导:公司展示向导、讨论站点向导,使用起来都很方便,你有兴趣也可以利用向导建立一个站点。
创建页面最简单的方法就是单击DREAMWEAVER“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头,它是用来选择要新建什么,可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。
如果要新建网页,可以不用向下箭头键选择,而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令,选择“新建网页”,在“新建”对话框里,可以看到DREAMWEAVER提供的许多网页模板,我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页,
这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑,这样就省力很多。
网上几乎所以的网页都使用图片加以点缀,在网页中插入适当的图片,能够产生图文并茂的效果。
  如果有一个图形,怎么把它放到网页上呢?
  首先要看你的图形是什么格式的,也就是它扩展名是什么 网页制作网站设计只有扩展名为GIFJPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛,而且有利于节省存贮空间。如果图形不是这种格式,使用了其它格式的图形文件,在保存网页时DREAMWEAVER会提示做格式转换,DREAMWEAVER可以自动进行格式转换。 
  现在可我们看看怎么插入图形 选择“插入”菜单的“图片”命令,单击“来自文件”按钮。
在默认情况下,DREAMWEAVER认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下,我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然,我们也
可以在这个目录下建立其他的子目录,再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。
  如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。选择好文件以后,单击“确定”按钮,回到“图形”对话框。单击“确定”按钮,图形就插入了。现在单击“常用”工具栏的“保存”按钮。 在“另存为”对话框中输入新的web页文件的名字,单击“保存”按钮。出现了一个对话框, 因为我们刚才插入的文件不在站点内,现在DREAMWEAVER要把它复制到站点内,可是使用什么名字,放在站点的哪个目录下呢,就要在这设置了,单击“改变文件夹”按钮,另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮,在默认情况下,图形被保存在站点的主目录下,现在我们选择IMAGE目录,单击“确定”按钮。回到“嵌入式文件”窗口,再单击“确定”。这样,图形就保存在站点内了
我们还可以从INTERNET上插入一个图形。选择“插入”菜单的“图片”命令, URL栏内输入图片的地址,单击“确定”按钮。由于是插入网上的图片,因此在插入图形以后,应该保存一下网页,使图形存到站点内。
  您可能说,我不会画画,插入图片容易,可是编辑图片就不容易了。没关系,DREAMWEAV
ER自己带有许多剪贴画,你可以把它们插入到自己的网页。 选择“插入”菜单的“图片”命令, 选择“剪贴画”。 你看,各种剪贴画都分类放好了。你可以自由地选择。不过,插入后别忘了保存网页,把剪贴画复制到站点目录下。 
一般我们插入的图形总是和文本在一起的,所以调整图形和文本的对齐方式很重要。 在默认情况下,图形自动与文本的底部对齐。这一个网页,由于默认的对齐效果,页面出现了大量的空白。这时就要调整图形的对齐属性。在图形上单击鼠标右键,选择“图片属性”,选择“外观”选项卡我们把对齐方式调整为“左对齐”。 使用图形可以使网页更加丰富多彩,而且我们还可以用图形来建立超链接,使网页相互联系起来。怎么用图形来建立链接呢? 其实图形超链接只要在建立超链接时选择图形就可以了。首先选中超链接的图形,单击箭头图形,单击“常用”工具栏“超链接”按钮,选择主页文件“页面1.htm”,单击“确定”按钮. 在普通模式中,按住CTRL键,单击箭头图形,就跳到主页页面了。
如果我们要在图片上加上文字,单击图形工具栏“文本”按钮,现在图形中就出现了一个文本框,输入:“计算机软件”按一下Esc键,取消文字编辑,就选中文字框了,调整文本框到合适的位置,单击页面其他区域,文字就添加成功了。
  如果我要修改 单击一下要修改的文字,这时文字作为一个整体被选中了,再点一下文字,这时文本框里有光标闪烁,你可以编辑文本了,重新输入:“计算机硬件”,在页面其他区域单击。 文字就修改完成了。 
  怎样使文字更丰富、活泼呢?一个简单的方法就是使用“格式”工具栏。
字体设置:选上文字,打开格式工具栏的“字体”下拉列表框,在里面选择相应的字体就可以了。如果浏览网页的人使用的计算机没有设置的字体?浏览器会用系统默认的字体代替你设置的字体。不过,使用常用字体是一个好习惯。
字号设置:在“格式”工具栏“字号”下拉列表框中选择相应字体就可以了
工具栏上的BIU图标的作用是:
按下B按钮,被选中的文字就会变为粗体
按下I按钮,被选中的文字就会变为斜体
按下u按钮,被选中的文字就会带下画线
字的颜:单击“格式”工具栏“字体颜”按钮旁的向下箭头,选择适当的颜,字的颜就改变了。 
还可以对字体进行一些其他设置。选择“格式”菜单的“字体”命令,在这里我们还可以作进一步的设置。这里除了“格式”工具栏可以做的设置以外,还可以设置许多效果。
“字符间距”选项卡:它是用来设置文字的间距的。单击“间距”下拉列表,可以选择字符的间距是普通、扩充还是紧缩的。选择扩充,这时预览框的文字间距就变大了。也可以调整间距大小来改变间距,输入10,文字的间距就更大了。
“定位”下拉列表:在DREAMWEAVER中每一行都有一个底线,定位就是指文字相对于底线的距离。也就是把文字上下移动,现在选择“上移”,文字就向上移动了。预览框中的黑线就是行的底线。
设计好的页面,应该检查它在浏览器中是否显示正常。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。