在大學就讀完後跟第一份工作中發覺還有一些可以學習的東西,然後在網路上看到跟政府配合的就業方案,覺得很有興趣,便來到聯成電腦拿取簡介。
目前在聯成電腦學習的3個多月,學程也快告一個段落,也找到了自己喜歡的工作,目前白天上班並配合聯成電腦的課程。
本篇文章要分享的是自適應網頁設計
網站內容是一家彰化的老餅鋪,因為跟店家有認識,所以才借此機會,幫商家架設網站(http://jimingfing.web.fc2.com/)
總共切了3種版型 有手機板、平板版跟電腦版
主要是要有個設計版型 然後大圖Banner(可以設計多張圖片滑動需要會一些網頁語法)
然後還有標籤選項 要跟你的版面做連結就是你選個標籤做連結可以連到該地方
還有要設計一個店家的LOGO
還有一些美編圖片還有一些店家的資料
自於 html語法可以自己連到網站欄後看程式碼
接下來 來看網站的圖片吧!
這是電腦版
這是首頁
會有商家的識別LOGO
跟一個Banner 大圖可以加點花樣 看個人
跟選項標籤 本網站是四個標籤選項
又注意到右下角有個綠色的圓圈嗎?
點這個可以回到首頁
然後是該店家的創立緣起跟圖片
然後是新聞的部分 當然之後還可以在增加
這是商品介紹
還有店家的位置是用Google的地圖崁入
最後是版權宣告
接下來是手機板
大家有發現大圖Banner變小了
因為我是頁面比例縮放%
是不是切版切的很漂亮呢?
學習心得:
這堂課又線上入門版Dreamweaver的基礎課程
這是網頁課程的第二階段 就會教你怎麼架網站
老師首先會教你你一些基礎的html語法
h1 h2 img class id .....之類的
然後一開始使用的軟體是Codepen
這個還蠻好上手的 有一些外掛 CHT-mune emmet 可以使用
介面上可以該成中文 當然程式語法還是英文字母囉!不過還蠻好理解的
用習慣就好了 當然可以到網路上找資源自學 w3school可以參考
不過有老師教還是比較快 必竟有老師可以問麻!不會馬上可以馬上問老師 馬上可以解決
因為語法這些是很複雜的要自己理解 有一定的難度
然後基本的語法學完了
會用一個比較正式 也是業界會使用的免費軟體 Atom
這個雖然稍微有些難度 不過在老師的教導下
可以很快的上手 在實作上真的會碰到蠻多問題的
所以老師的很重要
當然我們上課也有使用教材
在這邊分享一下
老師也是作者之一
在學完之後再來翻課本 好像比較了解課本寫的是什麼了~
最後是覺得自己會架網站了~覺得自己好厲害喔~讚喔~
雖然這不難但需要很多耐心去學習
祝福大家囉~也要感謝聯成電腦的老師們