|
羅德興老師的教學歷程檔案 - 112-1 數位內容(夜企資二) - 以網站展示自己的作業 |
|
|
|
|
以網站展示自己的作業以網站展示自己的作業(期末作業一) 以網站展現本學期的作業 (請在下方留言 自己的 網址) (以下取材自 溫瑞烘教授 教學網頁 http://alliance.cust.edu.tw/portfolio/myPortfolio?path=410705&tag=105-1-資料庫程式設計) 請先備好工具: (1) 網站 Server + PHP + MySQL, 如 Appserv, (2) 編輯軟體， 如 Notepad ++ 1. 網站架構 (1) 在本機 (localhost) C:/AppServ/www/index.html 為網站入口、 (2) 在學校主機 http://cc.cust.edu.tw/~dsluo/ http://ccs.cust.edu.tw/~s10614d019/ (3) Server:da.cust.edu.tw (Terminal 可以 WinSCP 連線處理) (欣華樓 4 樓內部IP: 192.168.124.8) ID:abc PW:%abc123 可連線 http://da.cust.edu.tw/abc 下載工具 瀏覽網址例： http://da.cust.edu.tw/abc/1091AD999/ (3) 外部申請虛擬主機 如：000webhost, byethost, ...... http://luo123.byethost17.com/ 2. 以 ftp, winscp, ...上傳以下檔案到主機上 三欄式 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 4. 以 html 展示 文字、圖片 <html> <head> <title>我的網頁</title> <style> /* 設定外層的 div 元素的樣式 */ .container { display: flex; flex-direction: column; align-items: center; } /* 設定文字的樣式 */ .text { background-color: yellow; padding: 10px; font-size: 24px; } /* 設定圖片的樣式 */ img { width: 300px; height: auto; } </style> </head> <body> <div class="container"> <div class="text">圖片 LOGO 1 Starbucks 的 品牌故事：有一天，當海神 ......</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> 5. 網頁表單練習 (***.html ) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Form</title> </head> <body> <h1>Login Form 此為 XXX 羅老師的 登入表單</h1> <!-- Input fields for ID and PASSWORD --> <label for="idInput">ID 帳號:</label> <input type="text" id="idInput"><br> <label for="passwordInput">PASSWORD 密碼:</label> <input type="password" id="passwordInput"><br> <!-- Buttons to pass messages and clear inputs --> <button onclick="passMessages()">Pass Messages 送出訊息 </button> <button onclick="clearInputs()">Clear Inputs 清除輸入</button> <script> // Function to pass the messages function passMessages() { // Get the values from the input fields var idValue = document.getElementById("idInput").value; var passwordValue = document.getElementById("passwordInput").value; // You can replace the following line with your logic to pass the messages to another program // For example, you can use JavaScript to make an API call or communicate with another script. alert("Hi, ID: " + idValue + "\n 您已輸入 密碼 PASSWORD: " + passwordValue); } // Function to clear the input fields function clearInputs() { document.getElementById("idInput").value = ""; document.getElementById("passwordInput").value = ""; } </script> </body> 9. 修改後的 left.html <!-- left.html --> <a href='./Pictures/basic.jpg' target='middle'> 作業0-基本設計</a><br> <a href='./Pictures/diy.jpg' target='middle'> 作業1-蛋糕</a><br> <a href='./Pictures/DIY.jpg' target='middle'>作業1-蛋糕 (wrong IF)</a><br> <a href='./Pictures/logo9.html' target='middle'> 作業2-以網頁展示 LOGO 圖片 1</a><br> <a href='./Pictures/video9.html' target='middle'> 作業3-以網頁展示 影片、動畫，和聲音 2</a><br> <a href='./Pictures/水行俠.mp4' target='middle'> 作業4-以網頁展示 影片</a><br> <a href="https://youtu.be/ArOXDehJgyk?si=qXWzwLQmQiS6dgiZ" target='_blank'> 作業4-另開網頁訪問其他網站 展示影片</a><br> <a href='./form/form2.html' target='middle'> 作業5-網頁表單練習 </a><br> 10. 作業3 的 video9.html 供參考 <!DOCTYPE html> <html> <head> <title>我的網頁</title> </head> <body> <h1>歡迎來到我的網頁</h1> <p>以下是我的影片：</p> <video width="320" height="240" controls> <source src="bear.mp4" type="video/mp4"> </video> <p>以下是我的動畫 1： Cat</p> <img src="cat.gif" alt="我的動畫"> <p>以下是我的動畫 2： CLIP</p> <video width="320" height="240" controls> <source src="animation-clip.mp4" type="video/mp4"> </video> <p>以下是我的音樂 stomping-rock：</p> <audio controls> <source src="stomping-rock.mp3" type="audio/mpeg"> </audio> <p>以下是我的 特殊音效 Rain：</p> <audio controls> <source src="rain.mp3" type="audio/mpeg"> </audio> <p>這裡是我的說明</p> </body> </html>
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 中華科技大學數位化學習歷程 - 意見反應 |  |
