您的位置:网站首页 > 新闻原创 > 桃源网页制作

网页制作那些事儿

日期:2016-12-21 10:12:56 人气: 标签:
分享到:
从网页制作开始
作为21世纪的好青年
祖国的花朵
民族的栋梁
没有十八般武艺傍身怎么行!

今天就让小编带大家从一个简单的页面做起吧!
成品在这里:

是不是显得很高端zhuangX呢?

Talk Is Cheap
Let's Go!

zhun bei gong zuo
准备工作
做网页其实很简单
所有你需要的
其实
只是一台带“记事本”的电脑

That's 因纳夫!


Round 1
捏身体写结构
做网页就像DIY玩偶,你先要给它个大体身体形状,然后再给它穿上各种衣服

结构如身体,样式如衣服。
身体决定了“是什么”

第一步:网页基本结构
新建一个记事本,输入


这是网页
。。。


别急别急
我们先将记事本保存,然后把扩展名改为“.html"

Magic~
记事本是不是变成网页了呢~

现在我们可以直接在浏览器中打开它

。。。

怎么还是什么都没有啊

都说了刚刚只是“网页”的结构,我们还得给网页加入自己的内容

PS:“<xxx>”叫“标签”,是html文件的基本元素(大多数“标签”有对应的“结束标语”</xxx>你注意了吗?)

第二步:加内容
1.网页叫啥?
----“律动中南”好了
在<title>标签中加入“律动中南”文字

打开浏览器看看有什么变化~

Bong!~

。。。
TMD没有变化!!




“<head>”标签里的信息是不直接表现在网页内容中的,比如刚刚添加进“<title>”中的“律动中南”就是作为网站的名字出现的。

2.网页里有什么?
---加个标题试试
在<body>标签中加入新的一行:
“<h1>学校简介</h1>”

看看效果~


“<h1>”(heading)代表的是“一级标题”,所有在它之中的文字语义上都作为标题存在。当然,不止“<h1>”,还有“<h2>,<h3>,<h4>等标题的存在”
还可以用“<p>”(paragraph)段落标签加入“段落”内容!

---再来张图片~

插入图片需要用到“<img />”标签,其中“src”标明图片路径,高宽就不用解释了吧~

看看效果:

是不是高大上了许多呢?


最后让我们把内容写完:
具体内容请百度学校官网

最 终 版!

是不是感觉还缺点什么?
文字图片没对齐内容没有居中
颜色难看正文太挤......
——>>>不太好看


不好看是当然的啦,它还没“穿衣服”呢
你看有人买luoti的芭比吗
接着让我们给它“穿上衣服”吧!


Round 2
穿衣服写样式

给网页“穿衣服”的就是这个<style>标签,在里面可以写入网页“样式”——字体大小、边框间距、内容排版啥的,由于时间原因小编就不介绍了,把写好的贴出来~


用浏览器打开看看~

大功告成!!!
0
0
0
0
0
0
0
0
网友评论 Comments
下一篇:没有资料