Syllabus
本課程主要講義 https://iottalk.vip/6
本班各同學網頁的網址
* 🅶vm亞歷克羅斯:程式、跨領域、終身學習,是未來成功關鍵
第十一週習題
好消息 .. 慶祝即將到來的母親節,
這週也做一個簡單的靜態網頁就好了..
關於母親節的網頁 :-)
就是說, 在你之前網頁基礎上持續擴充你的"網頁",
加入一新的網頁(Web Page),
這個新網頁放你的 /static/mother/ 子目錄下,
但是, 要可以用 你的網址/week11 和 你的網址 /mother 連到該網頁 !
對啦, 就是跟之前的 /week08, /week09, 和 /week10 一樣做法,
在你 Python 的 Web 程式碼內用 return redirect( 真正網址 ) 達成轉址,
只是這次要把 /mother 和 /week11 都轉到同一個網頁 !
|
網頁內容呢 ?
很簡單啊,
既然網頁內容就是要和母親節有關, 你可上網找來拼拼湊湊,
最好是整理一些變成自己寫的文章(不用很多字:-)
或者也可以寫一些感想(例如媽媽總有讓你感動的時刻或事情吧:-)
還有, 也要加入一些連結, 也可以加入圖片, 影片等都可以 !
例如,
以下是我寫的"懂我的媽媽", 改編自張韶涵隱形的翅膀
說明:
之所以改寫這首歌詞是因為那時我女兒和她媽媽(對啦就是我老婆)吵架阿都不講話好幾個月了, 所以我就想到改寫這首歌並且叫她幫忙唱 :-)
歌詞裡面所以扯到胡自強是因為改寫這歌詞時前一年胡自強(當了十幾年台中市長)和他老婆的車出車禍,
他老婆差一點掛掉, 還好醫師用葉克膜救了回來, 過了幾個禮拜有位年輕人車禍很嚴重, 他媽媽叫救護車把兒子送到那家救了胡自強老婆的醫院,
碰到護士或醫生就大聲問說要找葉醫師救她兒子 !!! 醫院人員一直說我們這沒有葉醫師, 找遍名冊都沒有姓葉的醫師和護士!
可她就一直說不相信! 最後她終於大聲說就是上次救了胡自強老婆那位葉醫師啊 !? 怎麼沒有 !? 這個新聞使很多人知道啥是"葉克膜":-)
* 胡自強老婆邵曉鈴年輕時是知名演員, 也曾經競選中國小姐 !
* 對啦, 葉克膜就是柯 P 的專長!
* 如果你跟媽媽吵了架或因一些小事還在嘔氣 ...
正好趁著母親節回家跟媽媽撒嬌 修補關係 :-)
這位老師用自己的手機,讓學生打給自己的媽媽,跟媽媽說"母親節快樂"。
也許妳會覺得「我一點都不像我媽媽!」
可是,妳有沒有想過?
和妳最不一樣的人,其實才是和妳最像的...
|
以下兩張圖片其時是偷指到別人的網址 :-)
你可以在圖片上按滑鼠右鍵, 選"在新分頁開啟圖片"就可看到圖片的網址 !
* 關於網頁的基本製作, 只要懂基本的八招左右就可以把網頁弄得有模有樣,
請點我們課程綱要 iottalk.vip/600 第一週最後一列開頭"簡單網頁設計教學"稍微看看就會了 !
* 建議在看課程綱要(/600)網頁時, 點滑鼠右鍵選"檢視網頁原始碼"看看就可學到基本招式 !!
* 如果你想用工具, 最佳選擇當然是 Adobe 的 DreamWeaver 網頁製作軟體, 進階的也要看這+PHP
在該 www.cg.com.tw 教學網頁內有些連結似乎已經沒效, 關於 DreamWeaver 官方教學可以點這
* 另一種簡單做法是利用線上的 HTML 編輯器,
這在我們主要講義 iottalk.vip/6裡面,
敲 CTRL_F 然後搜尋 HTML, 應該第四次出現 HTML 的地方有提供一個很好用的連結 !
這是我專為不認真的同學寫的歌詞 ! 奇怪的是對每一屆同學都適用 :-)
我以為我會哭 .. 但是我沒有 .. 我只是呆呆望著我的分數 ..
想著你給分的殘酷 .. 這何嘗不是一種領悟 !?
改編自辛曉琪唱的"領悟",
總是希望太混的同學在某些時間點可以有一點點"領悟" !
詞曲原作是知名音樂人李宗盛, 他自己也有唱 ! (還是辛曉琪唱的好聽)
不過我覺得他最佳作品應該是和林憶蓮合唱的《當愛已成往事》。
可是點閱率卻遠遠落後共匪"冷漠"(和楊小曼)唱的《我愛你勝過你愛我》。(八年一千多萬次 vs. 三年四千多萬次)
"冷漠"在2016年演唱《 沒有你陪伴真的好孤單 》獲得十大金曲獎 。
不過, 似乎"夢然"唱的版本比較受歡迎(兩年八千多萬次), 很多人不知道其實這首歌原唱是"冷漠" !
最厲害的則是共匪"大壯"的《我們不一樣》(一年多就破億次)
只有田馥甄的《小幸運》可以跟它比。
點這看其他我以前上傳的影片 :-)
Q: 如何把 youtube 的影片嵌入到網頁內呢?
A:很簡單啊, 當你在看 youtube 影片時, 點影片右下方的 "分享",
這時會彈出一個小窗,
如果你只是要複製網址去給 <a href="...用, 點"複製"即可;
如果要像上面影片這樣, 點 "嵌入", 這時會彈出另一小窗, 點"複製"即可!
然後把複製到的"<iframe ..."這 HTML 碼放到你網頁內就好了,
最好在該句代表嵌入影片前後各加一個 <br> 代表換列(換行),
還有, 建議在影片下方寫一些說明 !
對了, 不論是複製網址還是複製嵌入影片網頁碼, 都可以勾選指定影片要從幾秒處開始播放 !
再次提醒, 看網頁時可以按滑鼠右鍵選"檢視網頁原始碼" 偷看別人網頁內容 !
|
以下是 2019/04/19 上課過程 ...
還原現場 .. ( 04/19 上課過程 )
( 可以按滑鼠右鍵選檢視網頁原始碼看看網頁內容 )
注意, 用 <font size=8 或 比 8 大的都被看作 7,
如要更大的字必須用 CSS 例如 In Line CSS 的 style="font-size:88px;" 取代 font 的 size= 參數 !
本週的練習題請用之前最後版的網頁(例如 w6.py)來修改, 可以改為 w9.py 或自己喜歡的名稱 !
這次要增加三個網頁, 放在 /static 之下, 但要用轉址方式變方便使用,
注意這裡說的 /static 其實是在我們 Web Root 目錄(這次上課我們用 ggyy 目錄做 Web Root)之下;
在 /static 目錄之下的各子目錄名稱可以自取, 為了方便解說,
以下我在 /static 之下建立三個子目錄: 08, money, 和 wk10 用來放這三個網頁
: 1.) /week08 轉址到 /static/08/index.html
說明: 這網頁要放與第八週上課主題有關, 就是和辦公室用的軟體相關的,
你可以看看 Syllabus 內第八週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!
2.) /week09 轉址到 /static/money/index.html
說明: 這網頁要放與第九週上課主題有關, 就是和利用 Google 來賺錢有關的,
你可以看看 Syllabus 內第九週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!
3.) /week10 轉址到 /static/wk10/index.html
說明: 這網頁要放與第十週上課主題有關, 就是和 Web 應用以及網路有關的,
你可以看看 Syllabus 內第十週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!
以下是上課操作Demo 本週要做的習題之大略過程:
(1)開啟一個 CMD 命令視窗, 建立一個目錄 ggyy 當作網站根目錄 (Web Root)
(2)進入(cd)該 ggyy 目錄, 在 ggyy 目錄內建立 templates 和 static 子目錄備用;
以前只用到 templates 子目錄, 這次主要是要用到 static 子目錄 !
(3)參考 w3.py 建立一個檔案 w9.py (注意, 做習題則要用你上次的版本來改)
(上課為了方便, 我只複製 w3.py 內一部份來用)
C:\User\user>mkdir ggyy
C:\User\user>cd ggyy
C:\User\user\ggyy>mkdir templates
C:\User\user\ggyy>mkdir static
C:\User\user\ggyy>copy con w9.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def webRoot( ):
return '<font color=Red size=7>Hello World! 這是網站喔 !'
if __name__ == "__main__":
app.run( '0.0.0.0' , port=33888) # <== 注意這改用 33888 喔!
^Z # <== 注意這是敲 CTRL_Z 表示 w9.py 到此結束
C:\User\user\ggyy>python w9.py
|
(4)執行 python w9.py 後出現錯誤, 說發現說有怪字, 那表示我們檔案的編碼不是 UTF-8
怎辦?
很簡單, 用記事本(notepad) 開啟 w9.py 然後另存新檔, 選擇編碼 UTF-8 存檔即可 !
(注意看是否存回原檔案喔! 因有時它會改存到 文件(Documents)資料夾內 !!!)
(5)利用 notepad 把 w9.py 的編碼改為 UTF-8 之後, 重新執行 python w9.py
又說有錯誤 !? 仔細看發現事說缺了 flask
太簡單了, 阿就立馬用 pip install 把 flask 安裝進去囉 ..
C:\User\user\ggyy>pip install flask
. . . (出現安裝 Flask 的信息)
. . . . . .
C:\User\user\ggyy>python w9.py
|
(6)可以了ㄟ
趕快開瀏覽器打入 127.0.0.1:3388
奇怪 !? 怎說沒網頁 !?
仔細看, 靠餐ㄟ.. 發現要打 33888 才對啦
趕快重新打入 127.0.0.1:33888
喔 ! Yeah ! 有網頁了ㄟ !
(7)接下來, 修改 w9.py, 先加入給 /week08 用的:
@app.route("/week08")
@app.route("/week08/") # 理論上後面有 / 和沒 / 該一樣, 但 Flask 似乎有 Bug
def webPage_08( ):
return redirect "/static/08/index.html"
### 注意要加入在 w9.py 中間, 不要加到最後喔 !
|
(8)到 CMD 命令窗敲 CTRL_C 砍死 python 併重新執行 python w9.py
又出現錯誤, 說 return redirect 那句有錯 !?
(9)上網問 Google, 查詢 python + flask + redirect 找範例
發現原來我們少了刮號 ( ), 趕快修改並存檔重新執行
return redirect("/static/08/index.html")
|
(10)重新執行 python w9.py 發現又有錯, 說不認識 redirect
這也簡單, 要在 w9.py 檔案內很前面處加入以下這句即可:
from flask import redirect
|
(11)改好 w9.py 後重新執行 python w9.py
喔 ! Yeah ! 成功執行了,趕快測試網頁 !
(12)先測原先的網頁, 用瀏覽器打入 127.0.0.1
奇怪, 怎沒出現網頁 !?
仔細看, 發現漏掉了 :33888 啦 ! 重新打入 127.0.0.1:33888
果然好了, 又出現網頁了, 接著來測試 /week08
(13)改打入 127.0.0.1:33888/week08
出現 404 錯誤說找不到網頁ㄟ !?
這是因為我們還沒建立檔案 /static/08/index.html
注意瀏覽器的網址列, 有沒發現變了 !?
變成 127.0.0.1:33888/static/08/index.html
所以, 知道 redirect 的功用了吧, 就是轉址啦 !
幹嘛要轉址 !?
廢話, 當然是讓使用者不必打那麼長的網址啊 !
(14)趕快在 ggyy/static/08/ 這子目錄下建立一個網頁 index.html 即可,
要注意, 檔案編碼也要選 UTF-8
你可以把 w9.py 複製到 static/08/index.html 然後再修改其內容,
因為剛剛 w9.py 已經改為 UTF-8, 複製過去當然還是 UTF-8
先把該 static/08/index.html 內容改為簡單如下:
<html>
<font color=red style="font-size:68px;">這是 Week08
關於辦公室軟體
</font>
<hr style="border-top: 2px solid blue;">
<font color=blue size=6>
<a target=_blank href="http://www.nthu.edu.tw">點這會連到清華大學</a>
</font>
<br>
<img src="abc.jpg">
|
(15)把 ggyy/static/08/index.html 存檔之後, 回到網頁 127.0.0.1:33888/week08
按 F5 刷新網頁
喔 ! Yeah ! 有網頁了ㄟ !
但怎網頁中有個怪怪的圖 !?
因為在 ggyy/static/08/ 子目錄下沒有 abc.jpg 啊 !?
到網路上用 google 找一張林志玲的圖片另存新檔選擇存到該子目錄且黨名指定 abc.jpg
再測試看看, 真的有林志玲了喔 !
*好了, 其他 /week09 和 /week10 也可以依樣畫葫蘆做出來 !
只是要注意, 三個網頁要各自與該週上課主題相關 !
原則上就自己蒐尋相關網頁來略作整理成自己的網頁,
在自己的網頁內必要時讓讀者可以點了連過去原先你找來參考的網頁看更詳細內容 !
*至於網頁相關語法, 其實只要懂大約七句左右就很夠用了,
請
點這裡看 簡單網頁設計教學 by tsaiwn@cs.nctu.edu.tw(在 Syllabus 的第一週就給過了)
(先仔細看過該簡單教學, 其他的就偶爾用滑鼠右鍵點選檢視網頁原始碼 偷看別人網頁 !)
或是在我們主要講義內也列了很多可學習網頁製作的連結
Q: 如果希望網址列打 /money 和 打 /week09 有相同效果那要如何改 w9.py ?
就是說, 希望
127.0.0.1:33888/money 和 打 127.0.0.1:33888/week09 相同 !
Hint: 很簡單, 只要加入一列喔 ! (若考慮最後可能打斜線 / 則再多加入一列 !)
Google 有 GMail, GoogleDrive, Googol Doc, 到底還有哪些服務 ?
G Suite vs Gmail Comparison Chart
國立交通大學G Suite 及 o365 帳號申請系統
您的身分為: 教職員
您的G Suite帳號為 tsaiwn@nctu.edu.tw
您的o365帳號為 tsaiwn@o365.nctu.edu.tw
|
Google G Suite Login
MicroSoft MS o365 Login
The Benefits of G Suite...
|
|