close

    在大學就讀完後跟第一份工作中發覺還有一些可以學習的東西,然後在網路上看到跟政府配合的就業方案,覺得很有興趣,便來到聯成電腦拿取簡介。
目前在聯成電腦學習的3個多月,學程也快告一個段落,也找到了自己喜歡的工作,目前白天上班並配合聯成電腦的課程。

    本篇文章要分享的是自適應網頁設計

網站內容是一家彰化的老餅鋪,因為跟店家有認識,所以才借此機會,幫商家架設網站(http://jimingfing.web.fc2.com/)

總共切了3種版型 有手機板、平板版跟電腦版

主要是要有個設計版型 然後大圖Banner(可以設計多張圖片滑動需要會一些網頁語法)

然後還有標籤選項 要跟你的版面做連結就是你選個標籤做連結可以連到該地方

還有要設計一個店家的LOGO

還有一些美編圖片還有一些店家的資料

自於 html語法可以自己連到網站欄後看程式碼

接下來 來看網站的圖片吧!

這是電腦版

自適應網站

這是首頁

會有商家的識別LOGO

跟一個Banner 大圖可以加點花樣 看個人

跟選項標籤 本網站是四個標籤選項

又注意到右下角有個綠色的圓圈嗎?

點這個可以回到首頁

 

2

 

然後是該店家的創立緣起跟圖片

 

3

 

 

然後是新聞的部分 當然之後還可以在增加

 

4

 

這是商品介紹

 

 

5

 

還有店家的位置是用Google的地圖崁入

最後是版權宣告

 

 

 

接下來是手機板

 

Screenshot_2016-06-29-19-19-46

 

 

大家有發現大圖Banner變小了

因為我是頁面比例縮放%

 

Screenshot_2016-06-29-19-19-56

是不是切版切的很漂亮呢?

 

Screenshot_2016-06-29-19-20-02

 

 

 

 

Screenshot_2016-06-29-19-23-58  

 

學習心得:

這堂課又線上入門版Dreamweaver的基礎課程

這是網頁課程的第二階段 就會教你怎麼架網站
老師首先會教你你一些基礎的html語法

h1  h2  img   class  id  .....之類的

然後一開始使用的軟體是Codepen

這個還蠻好上手的 有一些外掛 CHT-mune  emmet 可以使用

介面上可以該成中文 當然程式語法還是英文字母囉!不過還蠻好理解的

用習慣就好了 當然可以到網路上找資源自學 w3school可以參考

不過有老師教還是比較快 必竟有老師可以問麻!不會馬上可以馬上問老師 馬上可以解決

因為語法這些是很複雜的要自己理解 有一定的難度

然後基本的語法學完了

會用一個比較正式 也是業界會使用的免費軟體 Atom

這個雖然稍微有些難度 不過在老師的教導下 

可以很快的上手 在實作上真的會碰到蠻多問題的

所以老師的很重要

當然我們上課也有使用教材

在這邊分享一下

老師也是作者之一

 

課本  

 

在學完之後再來翻課本 好像比較了解課本寫的是什麼了~

 

最後是覺得自己會架網站了~覺得自己好厲害喔~讚喔~

雖然這不難但需要很多耐心去學習

祝福大家囉~也要感謝聯成電腦的老師們

 

 

 

 

arrow
arrow
    創作者介紹
    創作者 小哲哲 的頭像
    小哲哲

    哲學家的部落格

    小哲哲 發表在 痞客邦 留言(1) 人氣()