架網站所要知道的那些

小事

一個網站需要些什麼

  • 一台電腦
    • 資料庫
    • 伺服器
    • 網頁介面
  • 一個實體位址
    • IP 位址
  • 一個網址
    • domain

舉例來說

 

 

  • 放在 Windows 上的 EazyPHP
    • MySQL
    • Apache+PHP

    • HTML、CSS、Javascript

  • 學校給學生的伺服器

    • 140.129.13.240

  • 學生的伺服器網址

    • ​homepage.ttu.edu.tw

 

我知道你們計概沒學好

那我只好從頭開始了

好啦投影片其實沒啥內容

大部份還是我直接講這樣

網路到底是啥鬼?

簡單來說,就是可以讓你上網的東西

自己讀:
鳥哥:http://linux.vbird.org/linux_server/0110network_basic.php#whatisnetwork

維基:http://zh.wikipedia.org/wiki/互聯網

網頁又是啥鬼?

簡單來說,就是你上網之後看到的頁面

通常以 HTML 呈現,CSS 修飾,Javascript 變魔術

自己讀:

維基百科:http://zh.wikipedia.org/wiki/網頁

IP跟網址又是什麼?

IP簡單來說,就像是你家的經緯度

網址簡單來說,就像是你家的門牌

自己讀:

維基百科:
http://zh.wikipedia.org/wiki/TCP/IP協議族

http://zh.wikipedia.org/wiki/域名
 

EazyPHP 是啥?

其實不是啥,他只是個套件包

其他有名的套件包像是 XAMPP、WAMPP 等等

所謂套件包也就是幫你把假一個伺服器所需要的東西都包好

自己讀:

維基百科:
http://zh.wikipedia.org/wiki/XAMPP

其他的?

更底層的東西相信在上次社長大人的社課中已經介紹過了,

大家可以去翻翻當時的投影片

http://slides.com/miso/deck-11#/

還是不懂DNS嗎

沒關係,換一張圖再看看

還是不懂DNS嗎

沒關係讓我們看段影片

How the DNS works

為什麼有家裡IP卻不一定連得到

嘛,你忘了你家的IP分享器/路由器了嗎?

終於要開始架網站了

  • HTML
  • CSS
  • Javascript

HTML

HyperText Markup Language

  • 超文本
  • 給瀏覽器看的文字
  • XML 格式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>標題</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>標頭1</h1>
    <h2>標頭2</h2>
    <p>段落</p>
    <img src="" alt="圖片">
</body>
</html>

HTML

看起來就像這樣

CSS

Cascading Style Sheets

  • 決定檔案的顏色字型排版等顯示特性
  • 加強檔案可讀性與結構化
  • 階層式架構

CSS

看起來就像這樣

footer.page-footer {
  margin-top: 0px;
}

#card {
  margin-top: 6%;
}

#register {
  float: right;
  left: -50%;
  position: relative;
}

Javascript

一種直譯的語言

  • Javascript 跟 Java 的關係就跟狗與熱狗一般
  • 弱型別
  • 通常是在瀏覽器上運行

Javascript

看起來就像這樣

var form = document.querySelector('form')
form.onsubmit = function(submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, function(err, response, body) {
    var statusMessage = document.querySelector('.status')
    if (err) return statusMessage.value = err
    statusMessage.value = body
  })
}

那接下來就來試試看吧

網頁兩三事

By Albert Hsieh

網頁兩三事

到底架一個網站,寫一個網頁,需要具備哪些前置知識呢?

  • 1,163