Re: [作業02] EDM/Newsletter製作

週四, 四月 19. 2018


(1).網址: :http://mepopedia.com/~web106-2c/hw02/hw02-1055445150
(2).設計概念與製作心得:一開始搞不太清楚圖片要怎麼放,然後現在是不知道怎麼改背景顏色

Re: [作業02] EDM/Newsletter製作

週四, 四月 19. 2018


(1).網址: :http://mepopedia.com/~web106-2c/hw02/hw02-1055445039
(2).設計概念與製作心得:找不到被景色的色碼所以就沒改嘞~且選到一個td裡面又包一個td的東西 看的很一頭霧水:S~~~~
這次選用自己之前畫的小角色來使用 沒有版權問題~~文創 文創啦~(tu)

Re: [作業03] Font Awesome字型練習與應用

週四, 四月 19. 2018


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055443135
(2).設計概念與製作心得:

Re: [作業03] Font Awesome字型練習與應用

週四, 四月 19. 2018

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445177
(2).設計概念與製作心得: 覺得加了圖示變得比較趣味.不過圖示的顏色想了一下才知道是哪裡改。

Re: [作業02] EDM/Newsletter製作

週四, 四月 19. 2018


(1).網址: :http://mepopedia.com/~web106-2c/hw02/hw02-1055445087
(2).設計概念與製作心得:因為覺得蠟筆小新很可愛,所以繼續使用蠟筆小新!

Re: [作業03] Font Awesome字型練習與應用

週四, 四月 19. 2018


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-10555443135
(2).設計概念與製作心得:根据作业一改的,放假加生病作业欠了好多,哈哈~

Re: [作業04] OnePage網頁實作/slider/Grid system

週四, 四月 19. 2018

(1).網址: :http://mepopedia.com/~web106-2b/hw04/hw04-1055445068
(2).版型網址:
 mepopedia.com
(3).主題、風格:原住民主題的網站
(4).設計概念與製作心得: 還沒編排完,還亂亂的 原本的版本上課給老師看好了@@...(找不到原網址

Re: [作業04] OnePage網頁實作/slider/Grid system

週四, 四月 19. 2018

(1).網址: :http://mepopedia.com/~web106-2b/hw04/hw04-1055445095

(2).版型網址:
 mepopedia.com
(3).主題、風格:
 個人介紹/簡單明瞭
(4).設計概念與製作心得: 快速讓人瀏覽我的作品/很有趣。

Re: [作業03] Font Awesome字型練習與應用

週四, 四月 19. 2018


視傳2A 1055445148 陳毅珊
(1).網址: :http://mepopedia.com/~web106-2b/hw03/hw03-1055445148
(2).設計概念與製作心得:很方便有趣

Re: [作業04] OnePage網頁實作/slider /Grid system

週四, 四月 19. 2018

(1).網址: :http://mepopedia.com/~web106-2c/hw04/hw04-1055445021

(2).版型網址: https://onepagelove.com/grand

(3).主題、風格:風格是簡單不複雜然ˊ後用黑白灰的顏色為主,主題的第四種顏色代表作品的顏色。

(4).設計概念與製作心得:

感覺看完語法都可以當偵探了。
老師,如果你說這不難的話把我X了吧。

Re: [作業03] Font Awesome字型練習與應用

週四, 四月 19. 2018

1).網址: http://mepopedia.com/~web106-2c/hw03/hw03-1055445111
(2).設計概念與製作心得:好像沒有櫻花的圖示好可惜qq
但是多了圖示蠻好玩的
然後我明明有改圖片檔名還有把圖片縮小但是為什麼沒辦法像第一次作業一樣讀出來orz

[講義] OnePage網頁實作解析(二)

週四, 四月 19. 2018

相片分類與燈箱效果



html


<ul class="controls"><br /> <li class="filter" data-filter="all">Show All</li><br /> <li class="filter" data-filter="webdesign">We Design</li><br /> <li class="filter" data-filter="printing">Printing</li><br /> <li class="filter" data-filter="development">We Development</li><br /> <li class="filter" data-filter="seo">SEO Optimization</li><br /> </ul>


<li class="mix webdesign col-sm-4"><br /> <a href="images/image_820x620.jpg" data-rel="prettyPhoto">
 <img alt="" src="images/image_550x480.jpg" class="img-responsive"><span>Eligendi optio cumque</span></a><br /> </li>

webdesign為分類。
col-sm-4為分欄大小,目前為三欄。
準備兩張照片,一為顯示大小550x480,一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片,圖片會隨著螢幕大小縮放。


style.css
Ctrl+F 搜尋 Grid 或 workArea 
 

#workArea ul#Grid li a {
<br /> display: block;<br /> color: #fff;<br /> background: #E67E22;<br /> font-weight: 700;<br /> text-transform: uppercase; <br /> 
}<br /> <br /> #workArea ul#Grid li a:hover img {<br /> opacity: 0.2;
<br /> }

圖片設定連結後之底色設定:background: #E67E22;
圖片設定連結後,滑鼠移過後所顯示之底色透明度設定: opacity: 0.2;




prettyPhoto-jCarousel和lightbox的混合應用套件

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

jCarousel網站圖片展示

https://sorgalla.com/jcarousel/

https://www.tellustek.com/web-design/163-jquery-slide-jcarousel
lightbox燈箱效果

http://lokeshdhakar.com/projects/lightbox2/



地圖設定



https://www.google.com.tw/maps/@24.2201031,120.9558744,10z?hl=zh-TW

html

<div style="margin-top:-30px;"><br /> <iframe class="gmap" style="width:100%; height:500px; margin:0px; border:0px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3618.367960538061!2d121.05275031483811!3d24.919531849024906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468303d0cc14615%3A0x63a5462452de09bb!2z5Lit5ZyL56eR5oqA5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1524065033383" width="600" height="450" frameborder="0" style="border:0" allowfullscreen><br /> </iframe>

地圖區域高度設為500px,寬度100%

課程影片


https://youtu.be/aGO1GQxbwTI