艺灵设计

全部文章
×

轻松学会div+css02必备神器(编辑器+浏览器+手册)

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-05-22 13:07:32 - 阅: - 评:0 - 积分:0

摘要:
  这是艺灵带你轻松学会div+css的第二节课:必备神器(编辑器+浏览器+手册)。这节主要推荐同学们在学习代码前需要以下三样东西,分别是:dreamweaver编辑器、360极速等非ie浏览器和一个css手册......

第二节:必备神器(编辑器+浏览器+手册)

2.1、编辑器

如果同学们想要学好代码,必须先要有一个编辑器才行!如果没有编辑器,只看不练,整天看着代码yy的话,那就呵呵了。

现在有很多编辑器,例如:HBuilderSublime TextEditplusnotepad++Zend studioDreamweaver等等。在这些众多编辑器中,我们推荐同学们使用Dreamweaver

有关Dreamweaver的下载及安装教程可移步于文章→→ 给DreamweaverCs6安装Emmet插件经验

安装完Dreamweaver后,我们需要去使用我们的软件了。

2.1.1、如何使用Dreamweaver

1、正常情况下,安装完后桌面上会有一个dw的图标,配图:安装成功后桌面上会有一个dreamweaver的图标 2、双击图标启动软件,点击主界面中新建下方的html创建一个html文档,配图:  您也可以通过点击左上方的文件--新建--创建来完成一个html文档; 
您还可以使用快捷键:Ctrl+n来创建一个html文档;
3、创建后我们需要对文件进行保存。点击左上角的文件--保存--选择保存位置--修改名字--保存即可。配图:  4、保存后我们就可以在我们的html文档中写我们的代码了。(一定要养成时时保存的好习惯哦~这个可不像ps6那样有恢复功能的哦~)
5、当我们写完代码后想要去看效果,可以点击上面的小球--选择浏览器即可。配图:点击dreamweaver中的小球可在浏览器中预览效果

2.2、浏览器

选择一个好的浏览器也是非常有必要的。在这里,艺灵推荐以下浏览器中的任意一种:chrome、火狐、360极速、360安全、猎豹、UC、百度、搜狗、淘宝等。总之不要用ie浏览器就行了。

上面提到的这些浏览器都具备开发者工具,我们通常会用到审查元素console调试功能,使用起来非常方便,可以大大提高我们学习代码的效率!

2.2.1、通过审查元素快速获取想要的代码

为了让同学们更好的理解艺灵的用心,接下来我们来简单的演示一个案例。

1、打开任意一个网页,比如:坑爹的百度。
2、如果是登陆状态,右侧默认会推荐一些垃圾新闻;我们现在想要获取这块的代码,怎么办呢?
3、鼠标放这块新闻上面--右键--审查元素--copy;配图:  4、将我们复制的代码粘贴到编辑器中即可得到源码。配图: 

上面的例子中,仅简单的4步我们就获取了几十行代码,是不是非常方便?!如果看官不使用审查元素功能,想要完整的获取这块代码的时间远远要大于使用审查元素的时间,不服者可以自己动手尝试下。

对于刚才演示的审查元素功能,很多同学会存在误解,说这是在盗代码,艺灵呵呵了。

水果刀可用来削果皮,你偏偏拿来打劫,你觉得是刀的错还是你的错?浏览器的这些工具,只是为了提高开发者的工作效率,而最终的结果取决于看官如何使用。

有关更多审查元素调试帮助我们修改代码的案例将在后面的课程中学到,如果同学们对此有兴趣,可跟着课程走。最后再来说下手册。

2.3、css手册

在我们学习代码时,手册也是非常有必要的。不知道的东西,不会的属性,不知道属性如何使用,我们都可以使用手册来进行查看及修正。手册也放到了网盘中,同学们可通过下载文件时一起进行下载。

如果同学们想下载更多的资料,可以前往导航栏上的资源下载进行下载。

2.4、录制视频

标题:艺灵带你轻松学会div+css02必备神器(编辑器+浏览器+手册)

视频备用地址:
淘宝:http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/38923483.swf
优酷:http://player.youku.com/player.php/sid/XMTU3Njc4NTMxNg==/v.swf
土豆:http://www.tudou.com/v/770lI8R9xv8/v.swf
腾讯:http://static.video.qq.com/TPout.swf?vid=k0301tm7msb&auto=0

如果看官想看更多视频,可在优酷、土豆、腾讯视频中搜索下:艺灵设计哦~

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/div/2016-05-22/399.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: div+css教程 div+css布局 html教程 Dreamweaver 审查元素 公开课 视频教程 css手册

上一篇: 轻松学会div+css01初步了解html   下一篇: 轻松学会div+css03常用html标签及用途

评论区