第一章 网站开发基础知识、 网站运行环境配置及代码编辑工具介绍 - 代码编辑工具

三、代码编辑工具

    Dreamweaver是一款专业的网站开发软件，它可以方便的编写HTML、CSS、JavaScript、ASP、PHP、JSP、.NET等代码。推荐该软件的原因有三：一是上手容易，二是该软件有代码快速补全功能，三是支持前端控件的快速插入和后端代码的编写（除非在分工明确的大公司里，否则往往是一个技术员身兼数职：做图、前端代码、后端代码、上传维护等）。本教程使用Dreamweaver CS5版本，请自行安装该版本或更高版本的Dreamweaver软件。
    Dreamweaver CS5安装完成后的图标如下：

图1-8

    编程软件用熟了，编程开发效率就可以得到提高。各款编程软件虽有一定的差别、优劣，但主要还是看个人习惯和喜好。假如让关羽拿丈八蛇矛、张飞持青龙偃月刀，必使不出最强的威力。如果问什么样的网页代码编辑软件最好用，还真没有确切的答案，习惯最重要，习惯最好用。
    网站开发工具就像笔。网站开发工具有很多种，就像有铅笔、钢笔、毛笔等，学会网站开发工具的操作并不等于学会网站开发，就像会拿笔不代表会写字，但想开发网站则必须至少熟练掌握一种开发工具。再打个比方来说：剑是工具，剑法是能力，真正的剑客，即使只使用竹竿，也一样能使出剑法（威力小）。Frontpage、Dreamweaver、Eclipse、Notepad++、Visual Studio等等只是编写网站代码的工具（软件），编写代码才是能力。优秀的程序员，即使只用操作系统自带的记事本软件，也一样可以编写网站程序（编程效率低）。所以并不是能够用Frontpage 或Dreamweaver等工具编辑出几个页面，就会网站编程了。需要学习掌握网站开发使用到的各种技术和知识，如：HTML、CSS、JavaScript等，直至无论使用什么工具软件都能规划网站逻辑、编写网站代码，才算掌握了网站编程的能力。除了Dreamweaver，适合PHP网站开发的编程软件还有：eclipse、Notepad++、Zend Studio等，学会网站开发以后，可以尝试这些或其它的网站代码编写软件。
    Dreamweaver由两个英文单词构成：Dream（梦想）和Weaver（纺织者）。在百度中分别搜索“Dream”和“Weaver”,可看到这两个单词的释义及读音，在读音边上有喇叭状按钮，点该按钮可听到准确的发音。英文不太好的同学，请类似的善用百度搜索。

（一）、使用Dreamweaver创建一个新的网页

    打开您电脑里已经安装好的Dreamweaver软件，点软件左上角的“文件”→“新建”→选择“空白页”的“HTML”，“布局”选择“无”，“文档类型”选“HTML5”，点“创建”按钮。这样一个新的网页就创建出来了。网页是单个的页面，网站是许多个网页的集合。
    在Dreamweaver软件界面上，有“代码”“拆分”“设计”三个功能按钮，如下图：

图1-9

    当要编辑代码时选择“代码”状态，要设计网页元素时点“设计”状态，而“拆分”则能看到代码和网页设计效果。由于Dreamweaver的设计预览效果与实际网页效果有差别，通常我们开发网页都处在“代码”状态下，如果要预览网页效果，则将网页保存后通过浏览器访问测试服务器的网址来查看。

 

（二）、使用Dreamweaver的代码补全功能

    当我们在Dreamweaver里编辑代码，输入HTML标签名或属性名时，Dreamweaver会提示相关的代码，我们能够方便的直接选择使用，而不需要全部手工输入，从而提高代码编写效率。
    以刚才新建的网页为例，在之后，我们输入“<”符号：

图1-10

    Dreamweaver会弹出提示，列出了相应的可用标签。我们用鼠标下拉滚动条后双击某个标签，便自动完成输入。但使用鼠标来选择标签的这种方法并不推荐，我们在编写代码的时候，应尽量只使用键盘而少用鼠标，减少手在键盘与鼠标之间的切换，使编程效率更高。在弹出该提示的时候，使用键盘的上、下方向键，能够在这些提示之间选择，当选择到了所要的标签时，按回车即可自动完成输入。编写代码时，假如要输入“

”这个标签，我们可以输入“

    自动闭合标签功能：假如我们在“”之后输入了“

”标签，代码为“

”，我们在“

”之后输入“”，最终代码如下：“

”。
    除了输入标签能够获得补全提示，输入属性一样可以获得属性的补全提示。以刚才的代码为例，我们对div标签增加样式属性，在“

图1-11

    这些下拉列表中所提示的关键字，都是div标签能够使用的属性名。选择和使用属性名与刚才的方法一样，可以用键盘输入属性的前几个字符，也可以用键盘的上、下方向键选择需要的属性名，然后按回车以自动完成输入。因为我们要设置样式，所以输入“sty”回车，结果如下：

图1-12

    如（图1-12）所示，Dreamweaver不但帮我们自动完成“style”属性名称的输入，还帮我们自动添加了“=""”这三个符号，并且把光标定位在双引号之间，以使我们能够继续编写样式代码，并且同时还将样式代码也提示出来了。
    请多练习自动完成输入的操作方法，直到熟练掌握。
    注意点：有时候一个页面编辑久了，会发现Dreamweaver不会帮我们自动提示，这是网页标签嵌套太多导致Dreamweaver提示功能出错。可以先保存并关闭页面，然后再重新打开该页面继续编辑，自动提示又会恢复。

 

（三）、Dreamweaver 常用快捷键

常用快捷键	效果
Shift+回车	等同于快速输入： +换行
Shift+Ctrl+空格	等同于快速输入转义空格符：
ctrl+f	调出查找替换面板
ctrl+s	保存当前编辑的网页
ctrl+j	调出页面属性设置面板

 

（四）、Dreamweaver 常用设置

    菜单栏：查看→代码视图选项→行数，若勾选则可显示行数（建议勾选）。
    菜单栏：查看→代码视图选项→自动换行，若勾选则一行很长的代码在超出Dreamweaver的显示区域时，会换到下一行显示（建议去除勾选）。