Open ccckmit opened 4 years ago
範例: 陳鍾誠的個人網站
描述:有功能表,側欄,表單,會根據裝置大小做 responsive 調整,裡面還有一些 JavaScript 的特殊功能。
專案網址: 完成後會上傳! 檢視網址: 完成後會上傳!
資工一110810505 傅于軒 主題:長春藤美與新埔分校首頁(組織網站)
描述: 1.有功能表 2.側攔(結合圖片) 3.右方的固定連結(熊熊是拉出側欄的按鍵) 4.可介紹式的圖片(在教學環境那) 5.表格(小一上學去那邊) 6.結合css,js,html(幾乎所有都結合) 7.結合第二次作業,表單功能(登入登出) 8.有支援手機功能(RESPONSIVE) 9.有版面配置layout功能(在側攔中的小一新天地) 10.期末,如果要做網頁的話,會更注重LAYOUT及程式碼部分 程是參考及自己寫之說明 專案網址: 程式碼 檢視網址: 網頁 設計圖:設計圖 補充:圖片來自長春藤新埔分校,請勿將圖片任意轉發。
作業:eggwu的個人網站
描述: https://coggle.it/diagram/XrQI1MShyyOYpFS/t/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88 (心智圖:可能還要麻煩老師要求一下權限)
專案網址: https://github.com/eggwu96007/wp108b/tree/master/personalPage 檢視網址: https://eggwu96007.github.io/wp108b/personalPage/home.html
廖振鈞的餐飲公司網站
描述:有功能表,側欄,表單, responsive ,table, JS,其他較詳細的在說明網址
專案網址: https://github.com/JesusDick/wp108b/tree/master/homework/midTest 檢視網址: https://jesusdick.github.io/wp108b/homework/midTest/midTest2.html 說明網址 : 讀我
謝孟澔的個人網站
描述 : 有功能表、測欄、表格、連結、背景圖片,加入一些CSS,讓他更好看一點
專案網址: https://github.com/SMH642800/wp108b/tree/master/medium%20exam%20homework 檢視網址: https://smh642800.github.io/wp108b/medium%20exam%20homework/HomePage.html
蔡文宏的個人網站
描述:有功能表、側欄、超連結、表格、表單、上傳圖片及預覽, responsive 調整等。
專案網址: homework4 檢視網址: Homepage 設計構想:homework4.jpg
Simple online store based on local storage Shop title : "Jardin De La Mémoire"
描述:
專案網址:go to the project (the project contains of 9 HTML, 1 CSS, and 1 JavaScript files)
檢視網址:go to the website
To see the website design and structure scheme, refer to this page.
蔡宗樺的個人網站
描述:個人網站,包含超連結,我家的狗,功能表,表單,驗證碼,css,html,js 專案網址:https://github.com/xiaotsai/wp108b/tree/master/mid 查看網址:https://xiaotsai.github.io/wp108b/mid/home.html 初步設計圖:https://github.com/xiaotsai/wp108b/blob/master/mid/design.jpg 我家的狗:https://github.com/xiaotsai/wp108b/blob/master/mid/mydog.jpg
林坤毅的個人網站
描述 : 個人介紹網站,包含超連結、上傳 照片、css、html、js、responsive等。 專案網址:https://github.com/kun68/wp108b/tree/master/kunWeb 查看網址:https://kun68.github.io/wp108b/kunWeb/2.html
資工二 110710549 翁子麒 遊戲網站
描述:功能表、顯示現在時間、側欄、圖片輪放、音樂 專案網址:程式碼 查看網址:Go to page
國際一 110813110 李維晏 主題: 個人網站
描述:側欄, 功能表, responsive, 超連結, 圖片, css , html, js。 專案網址:https://github.com/weiian000/wp108b/tree/master/homework/midterm 查看網址:https://weiian000.github.io/wp108b/homework/midterm/personalWebpage.html 設計圖;https://weiian000.github.io/wp108b/homework/midterm/%E8%A8%AD%E8%A8%88%E5%9C%96.jpg
作業:張佑豪的個人網站
描述:有側欄、功能表、支援手機檢視、子頁.......等 專案網址: 程式碼 檢視網址:Personalweb 設計草圖
資工一 110810535 張嘉芸
主題 : 介紹狗狗網站 描述 : 有功能表,側欄,表單,支援手機檢視...
專案網址:https://github.com/chia-yun-chang/wp108b/tree/master/midterm 檢視網址: https://chia-yun-chang.github.io/wp108b/midterm/index.html
作業: 陳艾葳的個人網站
描述:有功能表,側欄...大概就這樣
專案網址:https://github.com/laiy790/2020 檢視網址:https://laiy790.github.io/2020/we01.html
作業:柯泓吉的個人網站 描述:有功能表,中間有關於我的表格和照片,測欄(網頁連接) ……等等功能
專案網址: https://github.com/www-abcdefg/wp108b/tree/master/homework/html/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD 查看網址: https://www-abcdefg.github.io/wp108b/homework/html/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E9%A6%96%E9%A0%81.html 設計圖:https://github.com/www-abcdefg/wp108b/blob/master/homework/html/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E8%A8%AD%E8%A8%88%E8%8D%89%E5%9C%96/%E8%8D%89%E5%9C%96.jpg
作業:劉怡謙的個人網站 描述:功能欄,側欄,表格,圖片,超連結,內容包含對貓咪的介紹和關於我。 專案網址(包含設計圖): https://github.com/yichien1019/wp108b/tree/master/homework/myweb 檢視網址: https://yichien1019.github.io/wp108b//homework/myweb/aboutme.html
資工一110810503張凱証 主題 : 夜市 描述 : 有側欄、功能表、responsive 支援手機檢視 設計圖 : https://github.com/WWW-Jack/wp108b/blob/master/homework/hwm/IMG_20200519_215535.jpg 專案網址 : https://github.com/WWW-Jack/wp108b/tree/master/homework/hwm 查看網址 : https://www-jack.github.io/wp108b/homework/hwm/advantagePersonal.html 1.有部分非原創 2.部分參考 : https://github.com/ccccourse/wp/blob/master/code/05-js/menu.htm 3.大幅修改 4.全部理解
範例:蘇乾羽的個人網站
描述:有功能表、側欄。側欄上有兩個連結,可連結到關於我或者加入我。功能表上可連結到首頁或者其餘的分頁。三個分頁都分別有不同的背景音樂。可支援手機查看。有部分程式碼參考w3school 由於不知道可以放甚麼,所以就把前兩次的作業整合起來。
專案網址: 主頁:https://github.com/qweasd049564/wp108b/blob/master/homework/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD.html 關於我: https://github.com/qweasd049564/wp108b/blob/master/homework/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E9%97%9C%E6%96%BC%E6%88%91.html 加入我: https://github.com/qweasd049564/wp108b/blob/master/homework/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E5%8A%A0%E5%85%A5%E6%88%91.html 查看網址:https://qweasd049564.github.io/wp108b/homework/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD.html
作業:陳昱誠的個人網站
描述:主頁: 有側欄(About Me、Connect Me、Social Platform、Others) 。 點擊細項可跳轉至其他頁面。 主畫面上有表格,有簡單個人資料(有連結)、漂亮的背景。 About Me 的子頁們都具有功能列(可跳回主頁 or 跳往其他頁面)。 Connect Me 的表單具有Button(回上一頁以及送出)。 Social Platform 包含 我的git hub 、Instagram、Facebook的個人主頁(可點擊前往)。 Others 包含 我的手機號碼 、 個人電子信箱 、現在的即時時間、最近更新日期。 部分子頁具有背景音樂(韓劇「愛的迫降」here I am again),同時與主頁相同 有漂亮的背景圖片。
使用的技術有:
HTML的標題、表單、文字、圖片、音樂等
CSS 使用了大小、字體、顏色、背景等
Java Script 使用到了 回上一頁、打開、關閉、跳轉、時間等
專案網址:
範例: 黃羽溱的個人網站
描述:有側欄、連結、圖片、影片。
專案網址: https://github.com/yuexialiuye/wp108b/blob/master/homework/ex.html 檢視網址: https://yuexialiuye.github.io/wp108b/homework/ex.html
範例: 城市戰場的公司網站
描述:主頁有功能表及側欄,包含about us 還有收費標準等點擊擊可跳轉至其他的分頁或是官網等 還有幻燈片當作門面,程式碼目前還在摸索中 幻燈片參考資料:http://blog.shihshih.com/pure-css-slider/
專案網址: https://github.com/owen4096/wp108b/tree/master/homework/middle 檢視網址: https://owen4096.github.io/wp108b/homework/middle/homepage.html
範例: 李安博的個人網站
描述:有側欄、功能表、超連結、表格。功能表上面有當下時間,還有前往其他網站的連結(Youtube、Facebook、W3school),非常方便;主頁背景圖片是我畫的圖,側欄有我的Github連結,也可前往其他頁面;關於我的表格裡有圖和我的fb,Instagram連結。
專案網址: https://github.com/jifkavnb0205/wp108b/tree/master/midtest 檢視網址: https://jifkavnb0205.github.io/wp108b/midtest/%E9%A6%96%E9%A0%81.html
範例: 曾智暐的個人網站
描述:想到啥做啥(0美觀 簡潔)
專案網址: https://github.com/zxc21949049/wp108b/tree/master/homework/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD%EF%BC%9A%E8%AB%8B%E5%BB%BA%E7%BD%AE%E4%B8%80%E5%80%8B%E3%80%8E%E5%80%8B%E4%BA%BA%EF%BC%8C%E7%B5%84%E7%B9%94%EF%BC%8C%E5%85%AC%E5%8F%B8%E3%80%8F%E7%B6%B2%E7%AB%99%EF%BC%81 檢視網址: https://zxc21949049.github.io/wp108b/homework/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD%EF%BC%9A%E8%AB%8B%E5%BB%BA%E7%BD%AE%E4%B8%80%E5%80%8B%E3%80%8E%E5%80%8B%E4%BA%BA%EF%BC%8C%E7%B5%84%E7%B9%94%EF%BC%8C%E5%85%AC%E5%8F%B8%E3%80%8F%E7%B6%B2%E7%AB%99%EF%BC%81/%E9%A6%96%E9%A0%81.html
汪建同的個人網站
描述:有功能表和側欄,功能表選項有(home,myself,school,signupc和login),myself裡面有自我介紹的表格,臉書、IG、LINE的icon有連結(另開分頁);school裡有國中高中大學的連結(另開分頁);signup裡有之前作業的表單,按"註冊"後會回到HOME頁;Login的submit 鍵也是按了會回首頁。 側欄前兩個是CNN官網和中央氣象局的連結(另開分頁);comment 頁按提交後也是會回首頁;picture裡有放照片 版面最下面有加footer 專案網址:https://github.com/victor0520/wp108b/tree/master/homework/midtermhomework 查看網址:https://victor0520.github.io/wp108b/homework/midtermhomework/home.html
範例: 連思凱的個人網站
描述:側欄.icon.image.嵌入式頁面,還沒寫完
專案網址:https://github.com/tenkai0812/wp108b/tree/master/WB/html 檢視網址:https://tenkai0812.github.io/wp108b/WB/html/home.html
110710545 資工二 陳楷茗 作業: 航空公司的網站 主要內容為航空購票系統、會員登入註冊及其他相關資訊。 描述: 主頁有功能表(Home 、Flight Information、Online Booking、Member:Sign In & Registered、Contact)、側欄為功能表的翻譯版為中文,以上欄位點擊後可跳轉至該選項之內容,主頁主要內容為航空公司的簡介及飛機介紹。 子頁也有功能表及側欄方便快速跳轉,Home及Flight Information皆使用layout佈局header、section、article、nav及footer,而Flight Information多使用了nav導向連結內容,主要為航空公司的相關規定及說明,Online Booking則為訂票系統使用了table並加上表單功能,表單上方有單程及來回的button,點擊來回按鍵會在出發日期選項列中多一個回程日期可以選擇,功能表列中的Member使用了Dropdown Navbar整合了會員的登入及註冊頁面選項,Registered使用了表單功能提供使用者輸入基本資料以便註冊帳號,Sing in也是使用了表單功能進行登入的選項,為了避免未註冊的使用者一開始點擊Sing in,Sing in表單下方多設置了註冊button連結至Registered以便快速跳轉至註冊頁面。 功能表中的Contact選項則使用form來建構彈跳小視窗以供使用者傳送私訊。 各頁面左上角的圖片點擊即可跳回至首頁,選項列上方也有跑馬燈提供優惠資訊,而下方皆有使用footer來提供更多聯絡資訊。
參考資訊: 長榮航空相關規定 台灣高鐵購票系統 免費圖庫相片 Pexels
資工一110810520鄒耀文 作業:動漫官網 描述:功能表、一些超連結、圖片轟炸 參考資料: https://youngjump.jp/kaguyasama/ https://ani.gamer.com.tw/
專案網址: https://github.com/akito1129/wp108b/tree/master/%E5%85%AC%E5%8F%B8%E5%AE%98%E7%B6%B2 檢視網址: https://akito1129.github.io/wp108b//%E5%85%AC%E5%8F%B8%E5%AE%98%E7%B6%B2/Kaguya.html
土木一110810403蘇彥華 作業:個人網站 描述:功能表,側欄 專案網址:https://github.com/404HK416/wp108b/blob/master/homework/testwork/testwork.html 檢視網址:https://404hk416.github.io/wp108b/homework/testwork/testwork.html
資工一110810512 林元璽 作業:個人網站 描述:功能欄,側欄,幻燈片,表格,表單,判斷移動/pc端,音樂撥放器,圖片超連結 專案網址:https://github.com/yuanxiii/wp108b/tree/master/wp108 檢視網址:https://yuanxiii.github.io/wp108b/wp108/%E6%9C%9F%E4%B8%AD.html 設計圖:https://github.com/yuanxiii/wp108b/blob/master/wp108/67942.jpg 補充:圖片及音樂來自網路,請勿將資源任意轉發。
資工一 110810524 梁齊恆 作業:個人網站 描述:側欄、功能表、音樂撥放、超連結 專案網址:https://github.com/boy20100619/wp108b/tree/master/homework/midtest 檢視網址:https://boy20100619.github.io/wp108b/homework/midtest/website.html
資工一 110810533 洪嘉駿 作業:個人網站 描述:側欄、功能表、影片撥放、超連結 專案網址:https://github.com/hung890202/wp108b/tree/master/page 檢視網址:https://hung890202.github.io/wp108b/page/1.html 設計圖:https://github.com/hung890202/wp108b/tree/master/design
資工一 110810547 董長茂
作業:商品展示網站
描述:有topnavbar、彈出sidenavbar、dropdown、超連結、表單、彈出視窗(登入用)、table、responsive等,以css.html為主 js只有用在側欄及登入的彈出視窗及引入html用到(引入html為網路上找的資料只會應用並不知道其原理)。 另外用的圖片是從 https://burst.shopify.com/ 裡找的免費、免版稅、可商用的圖片 css.html.js都有加註解 專案網址:https://github.com/mark456tung/wp108b/tree/master/homework/project1
檢視網址:https://mark456tung.github.io/wp108b/homework/project1/homepage.html
設計圖:無,有大概想出要做怎樣的網頁,邊做邊想,覺得缺什麼就補什麼慢慢堆疊起來(以自己能做到的為主)
土木一110810403蘇彥華 作業:個人網站 描述:功能表,側欄 專案網址:https://github.com/404HK416/wp108b/blob/master/homework/testwork/testwork.html 檢視網址:https://404hk416.github.io/wp108b/homework/testwork/testwork.html 設計圖網址:https://github.com/404HK416/wp108b/blob/master/homework/testwork/100368996_587179655529407_225548386483306496_n.jpg
資工一 110810531 彭柏瑋 作業:公司網站 描述:側欄、功能表、介紹金門、超連結、介紹自己、介紹武漢肺炎 專案網址:https://github.com/Pengbowei/wp108b/tree/master/%E5%A4%A7%E9%9B%9C%E7%87%B4 檢視網址:https://pengbowei.github.io/wp108b/%E5%A4%A7%E9%9B%9C%E7%87%B4/%E5%85%AC%E5%8F%B8%E7%B6%B2%E7%AB%99.html
資工三110610517李學翰 遊戲介紹網站 https://github.com/s9158010/wp/tree/master/homework/110610517%E6%9C%9F%E4%B8%AD 描述:站內跳轉功能、自動循環播放圖片
作業:eggwu的個人網站
描述: https://coggle.it/diagram/XrQI1MShyyOYpFS/t/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88 (心智圖:可能還要麻煩老師要求一下權限)
專案網址: https://github.com/eggwu96007/wp108b/tree/master/personalPage 檢視網址: https://eggwu96007.github.io/wp108b/personalPage/home.html
要求權限後,還是出現網頁找不到的畫面!
老師這是連結的資料
特別注意:請先閱讀 繳交報告與程式的注意事項!
請在 5/24 之前繳交完畢! (請盡量早一點把題目傳上來)
基本上不分組,全部自己寫,一個人一份,當我有疑問的時候會進行口試。