您的位置:網站首頁 > 新聞原創 > 桃源網頁制作

網頁制作那些事兒

日期: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
下一篇:沒有資料