Dreamweaver MX全新接触(下)

　　经过对Dreamweaver MX(DW MX)一番初步的了解，我们现在来分析几个实例，领略一下DW MX在设计网页时的便利。

　　编辑CSS样式

　　选择菜单“File→New”，在弹出的“New Document”对话框中的“General”选项卡
中选择“Css Style Sheets”，就能够看到DW MX默认已配置好的各种样式表，而且每一种样式表都在“Description”中给出了简短说明，并可在“Preview”中看到预览效果。单击“Create”，即能够看到样式表的完整代码，假如觉得符合需要，将他们拷贝到我们的个人主页的HTML文档的＜style＞＜/style＞之间，再把他们放在＜head＞和＜/head＞之中即可使用(如图1)。

图1

　　假如我们想自己定义合适的CSS样式，DW MX也给出了优秀的解决方案，在“Design”选项中找到“Css Style”子选项，单击右下角的“New Css Styles”按钮，在弹出的对话框中选择“Make Custom Style”，并输入样式名称(注意：名称前要有“.”号)，确定并配置好样式表文档的保存路径后，接着能够看到样式表属性框，使我们能按照自己的各个需求来定义合适的样式。

图2

　　以我们最常见的文字修饰样式为例，在样式表属性框“Category”中选择“Type”，能够自定义文字修饰的字体、大小、颜色，有无下划线等等属性。配置好后“确定”，就会发现我们配置好的样式名称已出现在“Css Style”子选项中(如图2)。

　　回到网页编辑的主窗口，用鼠标选择我们要应用样式表来修饰的文字，然后在“Css Style”子选项中单击我们刚刚配置好的样式表，随后单击“F12”预览，即能够看到在网页中应用了我们刚才自定义样式表的效果。

　　但是，我们要清楚，以上两种应用样式表的方法，样式表在网页中的优先级别是不相同的，第一种直接把样式表代码拷贝在文档原代码之首，是对整个网页文档都应用同一种样式表格式，优先级较高；而第二种方法首先是生成一个拓展名为.css的样式表外部文档，随后在网页中针对需要修饰的文字，有选择地引用样式表文档，优先级较低。

　　拓展网页特效接口

　　DW MX吸引人的地方还在于他的无限可伸缩性。尽管他本身的功能已足够强大，但他同时还能够引入很多第三方为DW MX特别量身定做的插件，使得一些原本需要很强的编程功底才能写出的网页特效，如今只要轻轻点几下鼠标便能够完成。

　　比如说，我们很熟悉的飘浮图片特效，被大家公认为是广告宣传，网络互动的好方法。首先我们从www.macromedia.com上下载floating.mxp插件，随后在DW MX的程式组中，启动DW MX的Extension Manager。接着在“File”的下拉菜单中点击“Install Extension”，选择我们刚才下载的插件，单击“Install”选项会看到许可协议框，点击“Accept”之后看到安装好的插件，同时，插件被激活，文档名、版本号、类型及作者给出说明(如图3)。

图3

　　那么，如何在DW MX中应用插件呢？插件的类型一般有Object、Command和Behavior三种，刚才我们已在Extension Manager中查看到floating.mxp的类型为“Object”，打开DW MX的“Insert”选项，在“Common”子选项中即可看到“Floating Image”的小图标，单击之后，弹出对话框，需要配置飘浮图片名称、图片路径、图片链接的对话框，一一配置完后单击“确定”。预览一下效果，是不是能够看到网页中有一飘浮的图片？

　　同理，我们还能够引入更多的特效插件，实现更丰富的网页特效。

　　连接网页后台数据库

　　在前文中我们已说过，DW MX提供了对网页后台数据库操作的功能，这是原来不可能在DW 4中实现的，现在，我们来分析一个使用DW MX来定义站点并连接MySQL数据库的实例。

　　关于如何建立MySQL数据库在本文中就不多作讨论了，假设数据库名为blueidea，表结构为：

　　CREATE TABLE member (

　　id int(11) NOT NULL default '0',

　　name char(1) NOT NULL default '',

　　gender char(1) NOT NULL default '',

　　mail text NOT NULL,

　　PRIMARY KEY (id)

　　) TYPE=MyISAM COMMENT='';

　　然后如我们前文所指出的，在“File”选项中点击“Define a Site”，站点向导启动，因为要连接后台数据库，我们选择“Sever Mode”，在“Sever Techology”中选择最后一项“PHP MySQL”，然后是询问数据库在服务器的哪个目录下？我们是在本地测试数据库还是直接连接到远程服务器来测试数据库？一般而言，我们是在本地先做连接数据库的测试，成功以后再上传到服务器中。再往后，是浏览器访问站点的路径。假如我们是直接在服务器上测试，那么URL能够填入服务器在互连网中的地址，假如是在本地测试，则可填入localhost/，同时，别忘了用“Test URL”来测试一下浏览器是否能够正确识别刚才所填的URL地址。最后是询问，数据库还会传到另一台主机上使用吗？一般选择“YES”(如图4)。

图4

　　站点定义完毕后，回到“Application”选项中的“Databases”子面板，这时能够看到加号已被激活，点击加号，选择“MySQL Connection”，这时，使用PHP连接数据库，我们要提供几个关键信息(如图5)：

图5

　　Connection Name：连接名称(可随便填写)

　　MySQL Server：假如是本地就是用127.0.0.1或localhost.假如是远程连接就需要提供提供服务器IP地址。

　　User Name：MySQL数据库的用户名。

　　Password：MySQL数据库的密码。

图6

　　Datebase：数据库，就是我们刚才建立的blueidea数据库(如图6)。

　　确定以后，我们就能够看到数据库已连接成功，“Databases”子选项中以树状结构展开了数据库中任何的表连同字段。这为我们后续对数据库进行操作的工作打下了基础(如图7)。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有