作業是要做響應式網頁
(1)至少含七個自製之網站
(2)其中一個超連結點選後為網頁分析，分析自己喜歡的網站
(3)其中一個連結介紹本次製作網站之內容架構
期限到12/27 2300
還有12天 怕怕
day1
試著規劃了網頁的架構
和構思要做什麼網頁
最後決定做個惡搞的黑暗購物網站？
和設計了幾個網頁的UI
不過都幾乎是從課本的範例東拼西湊
會員和登入的部分是參考博客來的UI商品內容參考露天的UI
反正是作業不會公開也不會商用
應該是沒關係...吧？
我也沒挖他們ㄉ東西來用ouo
還差組織介紹跟網頁分析和這次的網頁分析的UI
不過這三個用同樣的UI應該就可以ㄌ..吧？
----------------
day.2
今天因為去了cwt
所以進度沒多新增多少
但今天總算是把所有的UI都構想完了
也順便整理了一下網頁的連結關係
整理成一個很不正統的流程圖...？
我覺得如果專業的看到應該會想殺了我xd
![]()
這次總共會有六個UI
會用到的都是課本有寫的bootstrap的元件
但教授講得慢還沒教到
所以我得自己研究一下
也順便為了期末考
期末考又是看圖說故事
看著圖做出跟他一樣的網頁
雖然翻書但時間又短
真D是可怕
果然還是用熟比較好
![]()
於是今天在研究bootstrap的導覽列
陪著兩個室友打LOL的聲音
我還能繼續研究還真是神奇
需要研究的還有幾個
大概會花掉三天左右吧(？
希望後面不要出什麼岔子
('・ω・')
--------------
day.3
![]()
廢話不多說先上圖
完成了我的首頁(的框架)啦!!!
把導覽列也完成了
離完成又更進一步了
----------
day.4
今天在首頁加了一點無用機關
剛好看到後面Js的部分就加上去了
![]()
![]()
![]()
本來想說寫無限迴圈直到他輸入yes不然不給他進網頁
但後來想說還是別這麼機車好了
做這個只是為了讓中二感增加
還有讓我後面組織內容打算放假文做背書的一個動作(參考SCP )
![]()
![]()
![]()
![]()
![]()
另外今天程設課教的我也都會了
所以就花了點時間把網頁都做了做
所有的模板都提早完成啦！！
接下來是內容和背景和細節的部分
希望我來得及生出來qq
——————————
final day
我延遲了幾天
因為天氣太冷我每天都處於好想睡覺的感覺
冬天就想下去中南部 夏天就想待在北部
當個候鳥好像比較適合我
廢話結束
總之我最後把他做完了
我把圖片都貼上來當作ending吧
![]()
首先是首頁
總之就是一個輪播結束
按鈕可以直接到瀏覽商品那邊
![]()
瀏覽商品的地方
先看上面的導覽列好了
因為我還沒厲害到能夠拆開bootstrap來修改有些東西
所以導覽列的hover功能我就沒有做出來了
但我放了下拉式選單來豐富一下我的功能性
旁邊的搜尋是裝飾用的
目前還不會動
我這裡放了四個商品
因為我想不到中二的台詞所以內文是用假文生產器做的
搭配上我的風格
應該就有那種scp的購物網站的感覺了吧XDD
開玩笑的 我還差的遠得很
不過當初直接把SCP的東西放成商品好像也很棒
我就不用自己想文了
![]()
按下開始訂購會跳出視窗
一樣是課本有的功能
按放入購物車會觸發JavaScript
跳出已經加入購物車
但實際上我沒有購物車的頁面就是了(因為懶)
這次也有看到別人有做購物網站
他就很用心的做出了一個有購物功能的
可是我不知道會不會動
因為只有前端
![]()
點進去詳細資料會到這裡
按下開始訂購的話效果一樣
![]()
下面是其它商品的推薦
按下去會轉跳到其它商品的同個頁面
![]()
QA這裡我很遺憾不能架後端
不然我可以用上次學到的留言板系統進去(雖然我還是沒有很懂他的實際運作)
![]()
訂購記錄也是一樣
沒有後端所以我只能放空殼
![]()
這裡本來是要做介紹組織還有組織的信仰
想營造出克蘇魯的感覺
但後來我很失敗的因為我懶所以失敗
本來有個小構想是做個像魔法陣的東西
然後上面有放三個圓圈圈可以點這樣
但我後來截止了才想起來
![]()
最後是登錄
跟首頁一樣的輪播
還有空殼的登錄系統
本來要做一個註冊的東西
但我好懶(尤其是好冷害我腦袋頓頓、身體頓頓)
我的人生那麼失敗一定是因為我懶(x)
總之就是這樣
這次的專案終於結束了
我覺得我的分數不會高分
因為其他人做的比我好
我覺得我的優點就是我的網站我試著努力的設計了
至少看起來像是現代會出現的網站
系上有很多人做出十年前等級的網站==
雖然是這樣
系上也是有很多人做得很棒
他們有人套用網路上的模板(高二被我們設計師大大洗腦到我很討厭)
也有人用CSS動畫(我太懶也不知道加在哪裡就沒用了)
總之大家都做得很好
我不確定我的分數會不會高分
以後再試著強化他吧
要是我有心力的話
謝謝各位收看
雖然我覺得沒多少人在關注這個xddd
創作內容
【記錄】bootstrap網頁專題—暗黑購物網—製作日記(結案)
自我介紹 (6)