search

ccccourse / wp108b

網頁設計 -- 108 學年度下學期 (陳鍾誠的課程作業)
2 stars 43 forks source link

期中作業：請建置一個『個人，組織，公司』網站！ #4

Open ccckmit opened 4 years ago

ccckmit commented 4 years ago

特別注意：請先閱讀 繳交報告與程式的注意事項！

  1. 網站內容愈豐富愈好，盡可能把 HTML/CSS/JavaScript 都用上。
  2. 最好有功能表單與側欄。
  3. 能夠用 responsive 支援手機檢視更好。
  4. 注意網頁佈局 (沒佈局好會整個畫面亂掉）
  5. 請加上說明，盡可能證明該網站是你自己寫出來的。
    • 使用技術與原理。
    • 設計圖 （手繪）
    • 程式加註解。(HTML, CSS, JavaScript 都可以加）

請在 5/24 之前繳交完畢！ （請盡量早一點把題目傳上來）

基本上不分組，全部自己寫，一個人一份，當我有疑問的時候會進行口試。

ccckmit commented 4 years ago

範例: 陳鍾誠的個人網站

描述：有功能表，側欄，表單，會根據裝置大小做 responsive 調整，裡面還有一些 JavaScript 的特殊功能。

專案網址： 完成後會上傳！ 檢視網址： 完成後會上傳！

AIONLin commented 4 years ago

資工一 110810521 林妍汝 作業:台灣風景

描述:功能表、側欄、圖片瀏覽、連結、responsive，程式碼有部分註解 專案網址 檢視網址

FUYUHSUAN commented 4 years ago

資工一110810505 傅于軒 主題:長春藤美與新埔分校首頁(組織網站)

描述: 1.有功能表 2.側攔(結合圖片) 3.右方的固定連結(熊熊是拉出側欄的按鍵) 4.可介紹式的圖片(在教學環境那) 5.表格(小一上學去那邊) 6.結合css,js,html(幾乎所有都結合) 7.結合第二次作業，表單功能(登入登出) 8.有支援手機功能(RESPONSIVE) 9.有版面配置layout功能(在側攔中的小一新天地) 10.期末，如果要做網頁的話，會更注重LAYOUT及程式碼部分 程是參考及自己寫之說明 專案網址： 程式碼 檢視網址： 網頁 設計圖:設計圖 補充:圖片來自長春藤新埔分校，請勿將圖片任意轉發。

eggwu96007 commented 4 years ago

作業：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

JesusDick commented 4 years ago

廖振鈞的餐飲公司網站

描述：有功能表，側欄，表單， responsive ,table, JS，其他較詳細的在說明網址

專案網址： https://github.com/JesusDick/wp108b/tree/master/homework/midTest 檢視網址： https://jesusdick.github.io/wp108b/homework/midTest/midTest2.html 說明網址 : 讀我

SMH642800 commented 4 years ago

謝孟澔的個人網站

描述 : 有功能表、測欄、表格、連結、背景圖片，加入一些CSS，讓他更好看一點

專案網址： https://github.com/SMH642800/wp108b/tree/master/medium%20exam%20homework 檢視網址： https://smh642800.github.io/wp108b/medium%20exam%20homework/HomePage.html

kalen2019 commented 4 years ago

蔡文宏的個人網站

描述：有功能表、側欄、超連結、表格、表單、上傳圖片及預覽， responsive 調整等。

專案網址： homework4 檢視網址： Homepage 設計構想：homework4.jpg

NubletZ commented 4 years ago

Simple online store based on local storage Shop title : "Jardin De La Mémoire"

描述：

  1. responsive
  2. mobile friendly
  3. warm design
  4. smooth animation and transition
  5. simple login function (save nickname data and check password)
  6. welcome alert depend on user nickname
  7. sidebar menu
  8. online shop function (add product to shopping cart -> checkout)
  9. shopping cart function including count total price and remove selected item from shopping cart list

專案網址：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.

xiaotsai commented 4 years ago

蔡宗樺的個人網站

描述：個人網站，包含超連結，我家的狗，功能表，表單，驗證碼，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

kun68 commented 4 years ago

林坤毅的個人網站

描述 : 個人介紹網站，包含超連結、上傳 照片、css、html、js、responsive等。 專案網址：https://github.com/kun68/wp108b/tree/master/kunWeb 查看網址：https://kun68.github.io/wp108b/kunWeb/2.html

Bob-1231 commented 4 years ago

資工二 110710549 翁子麒 遊戲網站

描述：功能表、顯示現在時間、側欄、圖片輪放、音樂 專案網址：程式碼 查看網址：Go to page

weiian000 commented 4 years ago

國際一 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

ZKX-0326 commented 4 years ago

陳彥翔的個人網站 描述：有側欄、功能表、支援手機檢視 專案網址：https://github.com/ZKX-0326/wp108b/tree/master/%E8%87%AA%E4%BB%8B 查看網址：https://zkx-0326.github.io/wp108b/%E8%87%AA%E4%BB%8B/AboutMe.html 設計草圖：https://github.com/ZKX-0326/wp108b/blob/master/%E8%87%AA%E4%BB%8B/IMG_20200519_211239.jpg

nohano1l commented 4 years ago

作業:張佑豪的個人網站

描述:有側欄、功能表、支援手機檢視、子頁.......等 專案網址： 程式碼 檢視網址：Personalweb 設計草圖

ChiaYunn commented 4 years ago

資工一 110810535 張嘉芸

主題 : 介紹狗狗網站 描述 : 有功能表，側欄，表單，支援手機檢視...

專案網址：https://github.com/chia-yun-chang/wp108b/tree/master/midterm 檢視網址： https://chia-yun-chang.github.io/wp108b/midterm/index.html

07Nick-kciN21 commented 4 years ago

作業:徐仁鴻的個人網站

描述:左邊有側欄，側欄內有社群網站鏈接，右邊有愛用網站功能表，裡面有圖片做鏈接，中間是個人資訊表格和自我簡介，還有一個大頭，表格和簡介是半透明，滑鼠移過去會顯示，大頭會變大

專案網址：程式碼 檢視網址： 徐仁鴻的網站 網站說明 設計圖

laiy790 commented 4 years ago

作業: 陳艾葳的個人網站

描述：有功能表，側欄...大概就這樣

專案網址：https://github.com/laiy790/2020 檢視網址：https://laiy790.github.io/2020/we01.html

chenimim commented 4 years ago

作業：陳霈君的個人網站

描述：功能欄，側欄，超連結。

專案網址：https://github.com/chenimim/wp108b/tree/master/homework/%E6%9C%9F%E4%B8%AD2 查看網址：http://localhost:52330/homework/%E6%9C%9F%E4%B8%AD2/%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD.html

www-abcdefg commented 4 years ago

作業:柯泓吉的個人網站 描述:有功能表，中間有關於我的表格和照片，測欄(網頁連接) ……等等功能

專案網址： 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

yichien1019 commented 4 years ago

作業:劉怡謙的個人網站 描述:功能欄,側欄,表格,圖片,超連結，內容包含對貓咪的介紹和關於我。 專案網址(包含設計圖)： https://github.com/yichien1019/wp108b/tree/master/homework/myweb 檢視網址： https://yichien1019.github.io/wp108b//homework/myweb/aboutme.html

WWW-Jack commented 4 years ago

資工一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.全部理解

qweasd049564 commented 4 years ago

範例:蘇乾羽的個人網站

描述：有功能表、側欄。側欄上有兩個連結，可連結到關於我或者加入我。功能表上可連結到首頁或者其餘的分頁。三個分頁都分別有不同的背景音樂。可支援手機查看。有部分程式碼參考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

cycyucheng1010 commented 4 years ago

作業：陳昱誠的個人網站

描述：主頁: 有側欄(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 使用到了 回上一頁、打開、關閉、跳轉、時間等

專案網址：

1.主頁: https://github.com/cycyucheng1010/wp108b/blob/master/homework/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD.html

2.自我介紹: https://github.com/cycyucheng1010/wp108b/blob/master/homework/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E5%80%8B%E4%BA%BA%E4%BB%8B%E7%B4%B9.html

3.個人照片: https://github.com/cycyucheng1010/wp108b/blob/master/homework/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/photos.html

4.表單: https://github.com/cycyucheng1010/wp108b/blob/master/homework/%E8%A1%A8%E5%96%AE%E7%B7%B4%E7%BF%92.html

查看網址(主頁)：https://cycyucheng1010.github.io/wp108b/homework/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%9C%9F%E4%B8%AD%E4%BD%9C%E6%A5%AD.html

設計圖網址：https://github.com/cycyucheng1010/wp108b/blob/master/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E8%8D%89%E5%9C%96.jpg

Chen-Chun commented 4 years ago

範例:陳淳的個人網站

主題:ChunChun wants to keep moving

描述： 1.有功能表 有測欄 2.有精美圖片 3.在study的頁面 希望結合期末作業 4.運用到的功能註解全部寫在程式碼中

專案網址：程式碼 檢視網址：淳淳欲動 設計圖網址:設計圖

yuexialiuye commented 4 years ago

範例: 黃羽溱的個人網站

描述：有側欄、連結、圖片、影片。

專案網址： https://github.com/yuexialiuye/wp108b/blob/master/homework/ex.html 檢視網址： https://yuexialiuye.github.io/wp108b/homework/ex.html

owen4096 commented 4 years ago

範例: 城市戰場的公司網站

描述：主頁有功能表及側欄，包含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

jifkavnb0205 commented 4 years ago

範例: 李安博的個人網站

描述：有側欄、功能表、超連結、表格。功能表上面有當下時間，還有前往其他網站的連結(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

zxc21949049 commented 4 years ago

範例: 曾智暐的個人網站

描述：想到啥做啥(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

victor0520 commented 4 years ago

汪建同的個人網站

描述：有功能表和側欄，功能表選項有(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

tenkai0812 commented 4 years ago

範例: 連思凱的個人網站

描述：側欄.icon.image.嵌入式頁面,還沒寫完

專案網址：https://github.com/tenkai0812/wp108b/tree/master/WB/html 檢視網址：https://tenkai0812.github.io/wp108b/WB/html/home.html

KMC1911 commented 4 years ago

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

專案網址 檢視網址

akito1129 commented 4 years ago

資工一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

404HK416 commented 4 years ago

土木一110810403蘇彥華 作業:個人網站 描述:功能表，側欄 專案網址:https://github.com/404HK416/wp108b/blob/master/homework/testwork/testwork.html 檢視網址:https://404hk416.github.io/wp108b/homework/testwork/testwork.html

yuanxiii commented 4 years ago

資工一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 補充:圖片及音樂來自網路，請勿將資源任意轉發。

boy20100619 commented 4 years ago

資工一 110810524 梁齊恆 作業：個人網站 描述：側欄、功能表、音樂撥放、超連結 專案網址：https://github.com/boy20100619/wp108b/tree/master/homework/midtest 檢視網址：https://boy20100619.github.io/wp108b/homework/midtest/website.html

hung890202 commented 4 years ago

資工一 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

mark456tung commented 4 years ago

資工一 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

設計圖:無，有大概想出要做怎樣的網頁，邊做邊想，覺得缺什麼就補什麼慢慢堆疊起來(以自己能做到的為主)

404HK416 commented 4 years ago

土木一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

Pengbowei commented 4 years ago

資工一 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

austin362667 commented 4 years ago

範例: 劉立行的個人網站

描述：會根據裝置大小做 responsive 調整，裡面還有一些 JavaScript 的特殊功能。

專案網址：Code 檢視網址：Link

s9158010 commented 4 years ago

資工三110610517李學翰 遊戲介紹網站 https://github.com/s9158010/wp/tree/master/homework/110610517%E6%9C%9F%E4%B8%AD 描述:站內跳轉功能、自動循環播放圖片

ccckmit commented 4 years ago

作業：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

要求權限後，還是出現網頁找不到的畫面！

eggwu96007 commented 4 years ago

EFFDA8C9-B559-41B8-B2E4-F318F094AD01 老師這是連結的資料