学习网考试学习资料

Gzu521.com

Dreamweaver 8 新功能图文实例讲解-实例讲解(1)(1)

Dreamweaver教程   点击:次   发布时间:2006-7-13   【字体: 】   来源:Gzu521.com
Gzu521.com我的学习网

第二部分:Dreamweaver 8 新功能实例讲解

  我们以制作一个网站首页文件的过程来体验dreamweaver8的新功能。 &znW 8%?*9*4\/tJ [ 本 资 料 来 源 于 贵 州 学 习 网 网页设计Dreamweaver教程 http://Www.gzU521.com ] &znW 8%?*9*4\/tJ

  一、建立站点

  启动dreamweaver 8,执行“站点/新建站点”菜单命令,在弹出的对话框中单击“高级”选项卡,在本地信息中设置站点名称和本地根文件夹,然后设置远程信息,如图1所示。这些功能和dreamweaver 2004相比基本没有太大变化,只是其中多了一个“维护同步信息”的选项,当我们制作完成网页以后,会同步更新到服务器上,这样可以确保网站上的内容总是最新的。服务器的信息一定要设置正确,否则在后面登陆更新服务器的时候会出现错误。

图1

  二、设计首页

  站点建立完毕以后,就可以设计首页了。如图2所示为软件的启动对话框,在创建新项目里多了xml/xslt两个选项。

图2 (友佳网络信息中心 www.jztop.com)

  关于xml,大家可能都比较熟悉了,而xslt则是xml家族的另一种语言,它类似html中的CSS,但是比css功能要强大的多。它更偏向是一种程序语言,但没有常见程序语言复杂,甚至比js等脚本语言还简单。将xml转换为html,是目前xslt最主要的功能。选择创建xslt(整页)新项目以后,弹出对话框询问如何定位xml源,可以选择“附加我的计算机或局域网上的本地文件”或“附加互联网上的远端文件”,如图3所示。

图3

  在dreamweaver8中还提供了一个新的创建范例集“starter pages”,我们可以从中选择自己需要设计的风格类型,如图4所示。

图4 (友佳网络信息中心 www.jztop.com)

  1.辅助线的使用

  我们选择基本页的html文档,单击创建按钮,进入空白文档的编辑页面,如图5所示。首先你会发现在文档周围默认有标尺出现,在dreamweaver 2004中虽然也有标尺功能,但是在使用的过程中实际用途并不大,现在结合dreamweaver8新提供的辅助线(图中绿线所示)可以更方便地确定网页元素的位置或大小了。

图5 (友佳网络信息中心 www.jztop.com)

  执行“查看/辅助线”菜单命令,你会看到如图6所示的辅助线控制菜单。S) ]`X9"7$v#%k/[ 此文转贴于我的学习网网页设计Dreamweaver教程 http://www.Gzu521.com]S) ]`X9"7$v#%k/

图6

  确定已经勾选了“显示辅助线”选项,然后在文档的标尺上纵向或横向拖动鼠标就会显示出默认的绿色辅助线。当然你还可以选择菜单中的“640×480,默认”等选项,以生成适合相应页面大小的辅助线,如图7所示。

图7 (友佳网络信息中心 www.jztop.com)

  将鼠标指针移动到辅助线分割的方格中,然后按“ctrl”键,可以显示此方格的高度和宽度,如图8所示。

图8 (友佳网络信息中心 www.jztop.com)

  如果要锁定辅助线,可以执行“查看/辅助线/锁定辅助线”菜单命令。如果选中“靠齐辅助线”选项,在网页中插入元素时,会自动贴近辅助线。如果选中“辅助线靠近元素”,则拖动辅助线时会自动贴近网页中的元素。要删除一条辅助线,可以拖动它到网页的顶部或左侧就会自动消失;而要删除所有辅助线,可以执行“查看/辅助线/清除辅助线”菜单命令。
执行“查看/辅助线/编辑辅助线”菜单命令,弹出“辅助线”对话框,如图9所示。我们可以在这里设置辅助线的颜色,距离的颜色等等属性。

下一页
本文共3页: 第 1 [2] [3]

责任编辑:gzu521

网页设计分类
HTML教程
CSS教程
Javascript教程
Dreamweaver教程
FrontPages教程
FireWorks教程
Flash教程
PhotoShop教程
建站知识
分类推荐信息
更多...
大类最新文章
更多...