Change History

[作業01] html-css基礎概念練習-歌詞篇

<h2>製作說明</h2>
歌詞作業範例：<a href="http://jinjin.mepopedia.com/~jinjin/hw/hw01" target="_blank">http://jinjin.mepopedia.com/~jinjin/hw/hw01</a>

1.請參考

<a href="http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-1.html" target="_blank"><b>[講義] html-css基礎概念練習-歌詞篇製作說明</b></a> 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

(1)認識基礎html網頁架構、標題設定、連結設定。
(2)認識css基礎語法，利用單純色彩搭配字體，設定設計出具有與歌詞意境吻合網頁。
(3)學會利用FileZilla上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

<h2>教學影片</h2>
1.HTML CSS基礎概念練習一 html架構與內容建置

<a href="https://youtu.be/Uq011dmJkv8" target="_blank">https://youtu.be/Uq011dmJkv8</a>

<iframe width="800" height="435" src="https://www.youtube.com/embed/Uq011dmJkv8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
2.HTML-CSS基礎概念練習（二） css視覺設定解析

<a href="https://youtu.be/sqEV6TSnxDw" target="_blank">https://youtu.be/sqEV6TSnxDw</a>

<iframe width="800" height="435" src="https://www.youtube.com/embed/sqEV6TSnxDw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h2>繳交作業方式</h2>
<h4>製作完成後，檔案命名方式：</h4>
第一個作業FTP上的資料夾為：hw01

每位同學請將自己的資料夾命名為：hw01-學號
這個作業的網址則為：(http://cute.mepopedia.com/~web108a/hw01/hw01-108xxxxxxx)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：
<xmp><a href="作業一網址" target="_blank">作業一網址</a></xmp>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" /cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" .com/~t109a/hw01/hw01-108xxxxxxx (A班)
http://cute.mepopedia.com/~t109b/hw01/hw01-108xxxxxxx (B班)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：
<xmp><a href="作業一網址" target="_blank">作業一網址</a></xmp>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/</a>

[作業01] html-css基礎概念練習-歌詞篇

<h2>製作說明</h2>
歌詞作業範例：<a href="http://jinjin.mepopedia.com/~jinjin/hw/hw01" target="_blank">http://jinjin.mepopedia.com/~jinjin/hw/hw01</a>

1.請參考

<a href="http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-1.html" target="_blank"><b>[講義] html-css基礎概念練習-歌詞篇製作說明</b></a> 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

(1)認識基礎html網頁架構、標題設定、連結設定。
(2)認識css基礎語法，利用單純色彩搭配字體，設定設計出具有與歌詞意境吻合網頁。
(3)學會利用FileZilla上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

<h2>教學影片</h2>
1.HTML CSS基礎概念練習一 html架構與內容建置

<a href="https://youtu.be/Uq011dmJkv8" target="_blank">https://youtu.be/Uq011dmJkv8</a>

<iframe width="800" height="435" src="https://www.youtube.com/embed/Uq011dmJkv8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
2.HTML-CSS基礎概念練習（二） css視覺設定解析

<a href="https://youtu.be/sqEV6TSnxDw" target="_blank">https://youtu.be/sqEV6TSnxDw</a>

<iframe width="800" height="435" src="https://www.youtube.com/embed/sqEV6TSnxDw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h2>繳交作業方式</h2>
<h4>製作完成後，檔案命名方式：</h4>
第一個作業FTP上的資料夾為：hw01

每位同學請將自己的資料夾命名為：hw01-學號
這個作業的網址則為：(http://cute.mepopedia.com/~web107a/hw01/hw01-108xxxxxxx)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：(http://cute.mepopedia.com/~web107a/hw01/hw01-107xxxxxxx)

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" target="_這個作業的網址則為：(http://cute.mepopedia.com/~web108a/hw01/hw01-108xxxxxxx)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：
<xmp><a href="作業一網址" target="_blank">作業一網址</a></xmp>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" .com/~t109a/hw01/hw01-108xxxxxxx (A班)
http://cute.mepopedia.com/~t109b/hw01/hw01-108xxxxxxx (B班)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：
<xmp><a href="作業一網址" target="_blank">作業一網址</a></xmp>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/</a>

[作業01] html-css基礎概念練習-歌詞篇

<h2>製作說明</h2>
歌詞作業範例：<a href="http://jinjin.mepopedia.com/~jinjin/hw/hw01" target="_blank">http://jinjin.mepopedia.com/~jinjin/hw/hw01</a>

1.請參考

<a href="http://jinjin.mepopedia.com/~jinjin/webde<a href="http://jins-1n.mep#hw01" " edia.com/~jinjin/webdesign-notes/homework-1.html" target="_blank"><b>[講義] html-css基礎概念練習-歌詞篇製作說明</b></a> 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

(1)認識基礎html網頁架構、標題設定、連結設定。
(2)認識css基礎語法，利用單純色彩搭配字體，設定設計出具有與歌詞意境吻合網頁。
(3)學會利用FileZilla上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

<h2>教學影片</h2>
1.HTML CSS基礎概念練習一 html架構與內容建置

<a href="https://youtu.be/Uq011dmJkv8" target="_blank">https://youtu.be/Uq011dmJkv8</a>

<iframe width="800" height="435" src="https://www.youtube.com/embed/Uq011dmJkv8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
2.HTML-CSS基礎概念練習（二） css視覺設定解析

<a href="https://youtu.be/sqEV6TSnxDw" target="_blank">https://youtu.be/sqEV6TSnxDw</a>

<iframe width="800" height="435" src="https://www.youtube.com/embed/sqEV6TSnxDw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h2>繳交作業方式</h2>
<h4>製作完成後，檔案命名方式：</h4>
第一個作業FTP上的資料夾為：hw01

每位同學請將自己的資料夾命名為：hw01-學號
這個作業的網址則為：(http://cute.mepopedia.com/~web107a/hw01/hw01-108xxxxxxx)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：(http://cute.mepopedia.com/~web107a/hw01/hw01-107xxxxxxx)

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" target="_這個作業的網址則為：(http://cute.mepopedia.com/~web108a/hw01/hw01-108xxxxxxx)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：
<xmp><a href="作業一網址" target="_blank">作業一網址</a></xmp>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" .com/~t109a/hw01/hw01-108xxxxxxx (A班)
http://cute.mepopedia.com/~t109b/hw01/hw01-108xxxxxxx (B班)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

<h4>以FileZilla上傳至FTP</h4>
<h4>回覆本篇文章</h4>
(1).作業網址：
<xmp><a href="作業一網址" target="_blank">作業一網址</a></xmp>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

<hr>
學長姐範例：
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/</a>
<a href="http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/" target="_blank">http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/</a>

[作業01] html-css基礎概念練習-歌詞篇

製作說明

歌詞作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw01

1.請參考

[講義] html-css基礎概念練習-歌詞篇製作說明 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

(1)認識基礎html網頁架構、標題設定、連結設定。
(2)認識css基礎語法，利用單純色彩搭配字體，設定設計出具有與歌詞意境吻合網頁。
(3)學會利用FileZilla上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

教學影片

1.HTML CSS基礎概念練習一 html架構與內容建置

https://youtu.be/Uq011dmJkv8

---

2.HTML-CSS基礎概念練習（二） css視覺設定解析

https://youtu.be/sqEV6TSnxDw

繳交作業方式

製作完成後，檔案命名方式：

第一個作業FTP上的資料夾為：hw01

每位同學請將自己的資料夾命名為：hw01-學號
這個作業的網址則為：(http://cute.mepopedia.com/~web107a/hw01/hw01-108xxxxxxx)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

以FileZilla上傳至FTP

回覆本篇文章

(1).作業網址：(http://cute.mepopedia.com/~web107a/hw01/hw01-107xxxxxxx)

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

---

學長姐範例：
http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/
作業一網址

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

---

學長姐範例：
http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/
http://cute.mepopedia.com/~t109b/hw01/hw01-108xxxxxxx (B班)

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

以FileZilla上傳至FTP

回覆本篇文章

(1).作業網址：
<a href="作業一網址" target="_blank">作業一網址</a>

(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

---

學長姐範例：
http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/
http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/