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

时间:2022-12-14 07:56:38

视频教程观看地址:​​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来刷新,熟练这样的操作将有助于我们提高效率。

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