HTML+CSS编写静态网站-02 开发环境的搭建

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

今天我们来讲解开发工具的安装和使用，一般我们在编辑HTML的时候，习惯用的是Dreamweaver，它的版本有很多，有04版的，有8版的，cs版的，cc版的等等，版本有很多，那么在这里，大家下载哪个都可以，这里我们用Dreamweaver8，当然我也用过cs,cc。用哪个都没有问题，我们是代码的编写者，打开Dreamweaver以后呢，你只是把它当做像word一样的编辑工具，我们在里面直接写代码就好了。所以我们说，你下载哪个版本都没有关系。在这里我给大家展示的是Dreamweaver8的这样一款工具，在这里已经给大家下载好了，你只需要登录我们的网站，搜索Dreamweaver，然后下载即可。下载完成后，直接点击安装即可。然后，我们还需要输入注册码。输入完成后，我们就可以正常使用了，还有一个就是这里我们要选择代码编写者而不是设计者。

那么，如何来新建你的第一个网页文件呢？我们首先在桌面上新建一个文件夹，把它命名为oxoxwork，以后我们所有关于本课程所创建的HTML文件都将放在这个文件夹中。然后我们来到Dreamweaver中，选择文件=》新建：

然后点击基本页中的HTML：

这就是一个普通的网页，你在这看到的是代码。它给了你一个初始的代码：

在这里我们先删除所有这些代码，以后我们会一步一步的讲解清楚。Dreamweaver有一个文件变化的检查功能，当文件变化时，这里会显示*号，然后我们按下键盘的Ctrl+S组合键来保存这个文件，接着它会弹出一个另存为对话框：

那么一般我们的首页都叫做index页面，所以我们命名为index.html，那么这里我们保存到刚刚我们在桌面上创建的oxoxwork文件夹中。所以这个文件会被保存到我们计算机的硬盘中，我们可以直接双击它用浏览器打开的。当然现在这个页面里面什么都没有，因为它是空的，所以你在网页里看不到任何的效果，当然也看不到任何的文字。那么，接着，我们输入h1元素：

 
 
<h1></h1>
然后在中间输入我们的网址：

 
 
<h1>I Love www.oxox.work</h1>
现在，我们保存这个文件，然后来预览这个页面，所以来到oxoxwork文件夹中，双击index.html，我们可以看到这段文字就在Chrome浏览器中显示了。这里推荐大家使用Chrome浏览器，因为它是我用过的最好用的浏览器，也是当今世界上用户最多的浏览器，而且，因为它是Google开发的，所以，非常有利于我们使用Google搜索，观看Youtube视频，自由自在学知识。如果大家有需求，可以在我们网站中搜索虚幻账号，来了解更多详细的信息。关于Chrome浏览器的一些使用技巧，你也可以搜索我们的网站，或者在网易云课堂中搜索虚幻大学，就可以找到我们发布的视频教程。

现在我们来把这里的网址改为我的名字：bangge，然后我们按下Ctrl+S保存，接着来到chrome中，点击刷新按钮，你看，文字就变为bangge了。

然后我们切换回Dreamweaver，我们想切换为之前的网址应该怎么做呢？这里教大家一个快捷键Ctrl+Z，用于撤销修改。所以网址又切换回来了。我们保存，然后来到浏览器中，我们要刷新网页来查看刚刚的更新，我可以像之前一样，按下刷新按钮来刷新网页，但对于要求效率的程序员来说，我们使用Ctrl+R来刷新，熟练这样的操作将有助于我们提高效率。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/ide-download/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/ide-download/