尤川豪   ·  6年前
445 貼文  ·  275 留言

自學網頁の嬰兒教材:第6課 ── 在自己電腦上寫網頁

⚠️⚠️⚠️ 公告 ⚠️⚠️⚠️

📢📢📢 本課程已有更新版本:請前往新版網站瀏覽、討論、交作業 📢📢📢

👉 點我前往新課程網站


第6課 課程目標

正式在自己電腦上寫網頁

不再需要依靠jsfiddle來寫網頁

第6課 課程內容

前五課都是用jsfiddle來學習,先跳過了環境設定的問題。

這次的課程要練習正式在自己電腦上寫網頁。

其實,用記事本就可以寫網頁。只要把副檔名存成 .html 就可以了。

請閱讀這份教材:

HTML Editors

不習慣看英文,可以改看這裡:

HTML 编辑器

接著要回頭學一些基本知識,這些知識在前幾課我們先跳過了:

HTML Introduction

HTML Head

不習慣看英文,可以改看這裡:

HTML 简介

HTML 头部元素

全部唸完之後,請試著用計事本在自己電腦上做出一個網頁檔,然後用瀏覽器去打開它

第6課 作業

這次的作業要做所謂的 landing page

landing page 是網站的門面,給客戶的第一印象

請參考下列網址,了解更多 landing page 的概念

實例網站解說什麼是 Landing Page ?

本次的作業內容如下:

假設你打算在近期內創業,請替你的公司建立一個漂亮、有效的 landing page

如果想不到的話,就請替你目前任職的公司,建立landing page

作業條件如下:

請尋找並下載一張大圖片,當作網頁的背景圖片

參考圖庫:https://unsplash.com/

請建立一個獨立的 css 檔,不要在 html 檔內寫任何一行 css

試著用計事本在自己電腦上做出這個 landing page,然後用瀏覽器去打開它

完成這些,你就完成這次的課程目標了!

  分享   共 5,338 次點閱
共有 18 則留言
   ·  5年前
0 貼文  ·  7 留言

寫了一小時多會太久嗎?很多明明前面學過的東西都會忘記,都要邊查邊寫,這樣是不是學得不夠紮實啊? 奉上簡陋的作品: https://docs.google.com/document/d/1zU1GK3w-oyF3Rt__EQZFRzE3S-aE34M3i6Q3AKhC4CE/edit

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

不會太久~邊查邊寫很正常~

慢慢寫即可,寫過很多網頁之後,有經驗才會越寫越快~這沒關係~

你那個是 Google 文件哦~ 用瀏覽器打開變成是文件檔,應該要打開之後直接是網頁才對~

有辦法把你在本機寫好的 html 網頁檔,直接上傳到 Google Drive 或是 Dropbox 嗎?

css 檔也要獨立出來~整包打包上傳~


前幾課都是直接用線上環境練習,是為了快速開發~能馬上看到效果

這一課則是練習在自己電腦上開發,這比較接近實務上真正寫網頁的流程,感受一下真正寫出 html 檔、css 檔是什麼感覺

所以要能用瀏覽器真正的打開這些檔案~

 
按了喜歡:
   ·  5年前
0 貼文  ·  7 留言

謝謝版主的回應,下面網址是我直接把檔案上傳的連結,可是我有點不理解要把CSS獨立出來怎麼做?分成另一個檔案嗎?https://drive.google.com/file/d/1PWLsj-RvyRNujuzzjEc2hbjqLlmZfjRJ/view?usp=sharing

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好,我看到你的作業囉,寫得很好,你已經做出一個瀏覽器能讀取的 html 網頁檔!

本課目標已完成 90%,還差把 css 檔獨立出來。

沒錯,要分成另一個檔案,裡面只含 css。

參考 https://www.w3schools.com/html/html_head.asp 裡面的小節

The HTML <link> Element

你需要把 css 的部份獨立寫在一個 css 檔內,然後在 html 檔裡面用 <link> 去引入它!

多提供一個連結給你參考:http://www.pcnet.idv.tw/pcnet/css/css9.HTM

加油摟~請試著搞定最後這個小部份~!

 
按了喜歡:
   ·  5年前
0 貼文  ·  7 留言

透過這個過程才了解原來CSS可以分三種寫法,感謝!搞定~~~要邁入做自己的網頁了 https://drive.google.com/drive/folders/15uW43h_Fhe0TQFVwlywojWnSM8JEM_WG?usp=sharing

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好,恭喜完成本課目標!你現在已經可以在自己電腦上寫網頁、把 css 樣式檔分離出來囉!

實務上就是這樣,html 檔擺放內容,css 檔擺放樣式,各司其職,這樣程式碼變多之後,比較好維護、修改!

做得非常好,期待看到你的下一份作業摟~

 
按了喜歡:
feifeitzu   ·  5年前
0 貼文  ·  21 留言

你好,這次的作業終於完成了!但上傳到google雲端後網頁卻只能顯示HTML,因此除了雲端網址,這次也附上了截圖。謝謝你的分享~雲端網址:https://drive.google.com/drive/folders/1xA1MeS2gZTfnj1A7hfntk_Tn0nvYMnJc?usp=sharing

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好 因為 google drive 只是提供雲端硬碟 並沒有提供 web hosting 的功能 所以它只會把檔案顯示給你看 不會以網頁方式呈現 這很正常 不用擔心!

我看到你做的 地下皮革工作室 網頁了 非常出色!

事實上 你目前所做的全部作業 都非常出色 請繼續保持!

按了喜歡:
Clucky Lai   ·  5年前
0 貼文  ·  7 留言

老師好,這次試著上傳到drive上,在匯入css的時候試了好幾次,邊google邊試,總算有點懂了。 google-drive文件檔:https://drive.google.com/drive/u/0/folders/1UBuHDF-kdauOMXqXN1G1F6BatqEn8AVG

Glitch專案連結:https://glitch.com/~daisy-cocoa-1

網頁直接連結:https://daisy-cocoa-1.glitch.me/selflearn.html

另外有個問題: 圖1裡 h1的style沒有套用上去,但是其它的都有正常顯示。

圖2裡 加了一個<p>的測試,一樣是沒有顯示style,把h1的style剪下貼到下方箭頭處就有正常顯示style了,請問這是bug嗎?

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

css 檔裡面不需要以下這行

<style type="text/css">

拿掉試試看唷~

Clucky Lai   ·  5年前
0 貼文  ·  7 留言

謝謝老師,拿掉後就正常了。 有時候看人家code裡有,卻不太知道是為什麼要這樣用,以及可以用在哪裡。 看來只能多看多寫累積經驗了。

按了喜歡:
   ·  5年前
0 貼文  ·  6 留言

你好~謝謝版主分享的資源,讓我一課一課的跟著教材練習,這次作業花了比較久的時間去做, 請版主幫我看作業有過關嗎~謝謝^-^

雲端網址:https://drive.google.com/drive/folders/1WoqqlHerkOcn5K-I_-StJtiyXXmSNady?usp=sharing

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

山米飯丸的網頁,我看到囉!

寫得非常棒喔!簡潔有力,也滿漂亮的,可能比花錢找人幫你做網頁還漂亮!

非常出色喔!學習目標都達成嚕~!

陳楚瑜  ·  5年前
0 貼文  ·  9 留言

https://drive.google.com/drive/folders/1sU7RybzMJEedRAIXDLVwkyo2ltmR8udy?usp=sharing 版主您好,這是我這次的LandingPage功課,請幫我看一下,謝謝

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

百種濾鏡就在GraphShare

我看到囉,寫得非常之好!

恭喜順利完成本課程~!

按了喜歡:
   ·  4年前
0 貼文  ·  2 留言

6課學習完,試著完成這次 LandingPage 作業。 https://drive.google.com/drive/folders/1jEMGssdZBt9WrBhFgKRjwLUY6OKy_saS?usp=sharing

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

哈哈哈,你做得非常好!恭喜順利學會基礎 html 與 css!

   ·  4年前
0 貼文  ·  2 留言

謝謝版主,想找更多練習的案例,請問哪裡可以練習呢?

您的留言