|
羅德興老師的教學歷程檔案 - 111-2 多媒體整合實作 - 以網站展示自己的作業 |
|
|
|
|
以網站展示自己的作業以網站展示自己的作業(期中作業一) 以網站展現本學期的作業 (請在下方留言 自己的 網址) (以下取材自 溫瑞烘教授 教學網頁 http://alliance.cust.edu.tw/portfolio/myPortfolio?path=410705&tag=105-1-資料庫程式設計) 請先備好工具: (1) 網站 Server + PHP + MySQL, 如 Appserv, (2) 編輯軟體， 如 Notepad ++, (3) 資料庫操作軟體，如 HeidiSQL. 1. 網站架構 (1) 在本機 (localhost) C:/AppServ/www/index.html 為網站入口、 (2) 在學校主機 http://cc.cust.edu.tw/~dsluo/ http://ccs.cust.edu.tw/~s10614d019/ (3) 外部申請虛擬主機 (已申請完成者請在本頁下方留言你的外部網址) 如：infinityfree, 000webhost, byethost, ...... http://luo123.byethost17.com/ http://db2023.rf.gd Server: (Terminal 可以 WinSCP 連線處理) sftp 連接埠 22 2. 以 ftp, winscp, ...上傳以下 4 個 檔案到主機上的 C:\AppServ\www 資料夾內 index.html 設定三欄式 Frame：頂端 top.html、 左側選單 left.html 、中間顯示區 middle.html <!-- index.html 此為註解 --> <!-- This is by 學號 XXXXX L.D.S on 2016/11/23 --> <FRAMESET rows='20%,*' bordercolor='#ff00ff'> <FRAME name='top' SRC='top.html' > <FRAMESET cols='20%,80%' bordercolor='#ff00ff'> <FRAME name='left' SRC='left.html'> <FRAME name='middle' SRC='middle.html'> </FRAMESET> </FRAMESET> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <!-- top.html --> <h1>班級 XXX 學號 YYY 姓名 ZZZZ 的網站作業 </h1> <!-- middle.html --> <h1>班級 學號 姓名 </h1> <!-- left.html --> <a href='/db1/db1-1.php' target='middle'> 期末作業練習 1</a><br> <a href='/db1/all9.php' target='middle'> 期末作業練習 2 TEXT-新增-查詢-刪除-更新</a><br> ***** 3. 看網站運作 // 執行 http://localhost/index.html 作業： 在 C:\AppServ\www 資料夾內 新增一個 Pictures 資料夾以便放置圖片和 html 以下的圖片和 html 來源都 在 Pictures 資料夾內。 1. 請修改 left.html 讓它 在 middle 區 show 出一張蛋糕的圖片 2. 請修改 left.html 讓它 在 middle 區 show 出一個 html 該 html 有 10 張 你喜歡的 LOGO 的圖片，並加上簡單的文字說明， 可參考以下 html 程式 <!DOCTYPE html> <!-- logo.html 此為註解 --> <html> <head> <title>我的網頁</title> <style> /* 設定圖片的樣式 */ img { width: 300px; height: auto; } </style> </head> <body> <div class="container"> <div class="text">圖片 1 Starbucks LOGO</div> <img src="Starbucks_logo.jpg" alt="圖片 1"> <BR><BR><BR> <div class="text">圖片 2 TOYOTA LOGO </div> <img src="Toyota_logo.svg" alt="圖片 2"> </div> </body> </html>
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 中華科技大學數位化學習歷程 - 意見反應 |  |
