羅德興老師的教學歷程檔案 - 111-2 多媒體整合實作 - 以網站展示自己的作業
 

企業資訊與管理系
助理教授/日導
羅德興

 歷程檔案 Portfolio

    以網站展示自己的作業

    以網站展示自己的作業

    (期中作業一) 以網站展現本學期的作業 (請在下方留言 自己的 網址)

    (以下取材自  溫瑞烘教授  教學網頁  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>
     
     
     
     

     
    全部共 17則留言
    03-27 14:20:http://xiaochengrui.lovestoblog.com/
    03-27 14:20:http://qwe08sky.lovestoblog.com/
    04-10 11:51:aaaa.42web.io
    04-10 13:12:file:///C:/Users/user/Desktop/index.html
    04-10 13:32:http://lrhdeqizhongzuoye.epizy.com/
    04-10 13:33:jack0935866117.epizy.com
    04-10 13:38:http://vincent.rf.gd/
    04-10 13:54:留言...
    04-10 13:54:http://llz.rf.gd/
    04-10 13:59:11
    04-10 14:00:http://10914d020.epizy.com/
    04-14 15:45:angeljiun.epizy.com
    04-17 11:28:peggy.epizy.com
    04-17 13:25:https://youtu.be/3VQCUk9z9qw
    04-17 13:51:https://youtu.be/W74ApA3wMXA
    蕭宇廷04-17 14:15:https://amy96198.wixsite.com/leagueoflengend10914
    05-01 11:45:https://youtu.be/TbalbDk9sbA
    登入帳號密碼代表遵守學術網路規範

    		文章分類 Labels

    		最新文章 Top10

    中華科技大學數位化學習歷程 - 意見反應