提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
第3节开始
哈喽!大家好,我是舒布启。
今天我们进入代码阶段,本来昨天晚上快写完了,结果没有保存。真尼玛蛋疼。。。(原来我这么简单粗暴的口头表述)
那么我们开始吧!
1. 认识装修工具
1.1 初识装修工具
下面为大家介绍两个装修工具(编辑器)。编辑器就是用来书写代码的工具,就想word是用来写文档的一样,是一个载体。我们的知道的网页html文档就需要支持纯文本格式的载体,有人说word可以么,当然不可以,因为word本身就带有很多的属性,样式在里面么,所以不支持。
好了,下面来认识一下我推荐的编辑器首推的是dreamweaver,Adobe家的老牌编辑器,编辑功能强大很智能,很多不用自己的写,自动生成。适用于新手,以及我这种略懂的设计。
这是dreamweaver的icon
这是它的界面
小白是不是看着有些头疼,是不是准备考虑买一本关于dw的书籍去啃,其实不用。因为我们暂时只要学会编辑就可以,后面的软件应用只是水到渠成的事情。正因为dw的功能不过强大,看似非常的臃肿。所以不建议开发者去使用,不利于开发的速度,会养成偷懒的行为。而且软件体积大,占内存。但是可视化的功能,对于小白来说,简直完美。
下面介绍第二个Subilme Text,这是一款轻量级的编辑器,界面简洁舒适。而且是永久试用,有钱也可以花70美刀(好像是这个价)购买激活,win和mac双系统兼容。相比较更适合开发人员使用。
这是一个sublime text的icon
这是一个Sublime text的界面
1.2 使用装修工具
基本上只要会打字就可以,我们现在还是刚开始学习,所以只需要会新建html的文件然后编辑就可以了,以后怎么教大家我也没想好,因为自己也还要学习,而且白天还要上班。我们就一步一步和我一起进坑吧。
2.认识html
2.1什么是html?
下面一段百度可得:
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页.
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,超文本标记语言(15张) 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果.
不理解的话,就可以把html当做网页,你看到的网页的直接输出格式就是html格式,就像上一节我告诉你们的index.html这个就是html格式的首页,我们的网站显示的也就是它.
2.2 html的构成
我们知道html是一种语言,语言就需要有最基本的笔画,或者 a啊 b波 c车 d得这样的字母组成,html的字母就是一个一个的标签。便签的构成是由<单词简写>
表示开始 </ 表示结束>。
举个例子:
意思就是:个人网站(标题的内容),尖括号的能容在网页中是不显示的
我面可以看见上面的标题是显示在我们的网站上面的部分,不是在内容区域,内容区用这个标签。
下面我们学习下基本构成,看下面一段html。
我们对它翻译一下就很好理解:
&it!doctype heml> 这是用html5格式写(html起初只有1.0 后来升级有了2.0 3.0 Xhtml,到现在的html5,Xhtml可以直接认为就是4.0,由于5.0的技术规范还没有正式出来,常用的还是Xhtml)他们的开头是不一样的,这里自己去百度。我们这个就是用h5格式写的。
<html> 网页开始,交代我们的网页开始了
<!head> 头部信息开始(头部内容里,交代网页的属性,用什么样式等等信息)
<meta charset=“UTF-8”> 的意识是指用的编码标准是UTF—8,就好比国标的GB一样,是一种编码的标准,不难看出来这个信息也是写在头部信息里面的,用 来交代网页的一些属性
<title> 标题开始 标题是:个人网站
</title>标题结束我们可以看见标题也是在头部信息里面的
<head>头部信息结束
<body>内容显示开始
body中间的内容这里我们暂时留在后面慢慢讲。先讲个干货
</body>内容结束
</html>网页结束
大家可以跟着打一下,我们用Sublime Text敲一敲,试试,敲完我们右击
open in Browser预览一下,我们可以看见
我们的网页又来这个标题和内容了。但是这只是预览,下面我们要做的就是保存为index(首页),第二节我有说过,用FTP上传(这个不知道回头看我的第二节)。然后我们的网站就有了门头和内容了,现在我们看看我们的门头好像少了点什么。
看看人家的门头,看看自己的
是不是觉得少了点什么,没错,没有logo,我们需要一个logo来代表自己,接下来教大家干货。
3.建自己的logo
3.1 绘制属于自己的logo
这一块姿势的解锁就必须要有一定的设计能力了,最起码基本的ps操作要会。一言不合,一波装逼。
舒布启个人logo欣赏:
好吧言归正传,自己设计好自己的logo。因为网站标题logo是需要ico格式的,我们打开百度搜索ico,
在线生成,我们把自己的logo生成16x16px的ico格式,命名为favicon.ico这个和index.html一样是默认的,不能写其它的。然后我们在我们的代码头部信息后面写上
然后一起上传到FTP,我们就可以得到
快去试试吧,好吧,今天就到这里,我们下次见,顺便说一句帮我的直直表情投下票53号,http://bosszhipin.ui.cn/s.html谢谢各位大爷!
有什么问题或者交流,可以加我QQ:921797362。
微信号:同QQ
或者关注我的个人公众号:superch123456
你的支持就是我前进的动力
10000小时成就天才,我是舒布启给我点个赞
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册