Quantcast
Channel: JinJin 的視覺設計專區 - 網頁設計與語法（HTML/CSS）
Viewing all 70 articles
Browse latest View live
↧

[講義] EDM/Newsletter製作 (no replies)

March 21, 2018, 9:55 am
$
0
0
  1. 1. EDM設計原則
  2. 2. HTML與CSS寫在同一個檔案裡
  3. 2.0.1 範例：
  4. 2.1 將css寫在head裡
  5. 2.2 css inline
  6. 2.2.1 範例：
  7. 2.2.2 css inline範例：
  8. 2.2.3 圖片絕對路徑：
  9. 2.3 EDM/Newsletter免費版型
  10. 2.4 課堂範例

1. EDM設計原則


EDM/Newsletter可將最新的活動訊息或欲發佈的消息，以網頁設計的設計內容，透過email寄送給指定對象。

但因為必須同時考慮各種郵件軟體(如outlook)、及各家線上郵件平台(如Google Gmail, Yahoo! Mail)的呈現, 加上郵件平台及軟體對css 的支援性較差、會強制剝除某些css設定，因此需考慮以下設計原則：

1.只需單一html檔案。
2.將css直接寫入html。

JavaScript、iFrame、Flash 等語言，大部分都是不支援的。
3.圖片使用絕對路徑。圖片需要上傳至網路空間，再將圖片網址貼上。
4.一般的情況下，建議使用單欄設計。


2. HTML與CSS寫在同一個檔案裡


1. 範例：

http://mepopedia.com/~jinjin/webclass/edm-3.html

1. 將css寫在head裡


<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>[2018年全國校際設計行銷創意競賽活動]</title> <style type="“text/css”"> 此部分寫css語法 </style>
<style type="text/css"> body {background: #ffffff; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; color:#444; margin:0; padding:0;} p,li {margin-bottom:14px; margin-top:0; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; color:#999999; line-height:150%;} td, div {font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px; } a {color:#013275; text-decoration: none; font-weight: bold;} a:hover{color: #3695B0;} h1 {margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體", Arial, sans-serif;} h2 {margin-top:0; color:#D70000; font-size:18px; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:normal;} h3 {margin:0; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;} </style>

2. css inline



由於部分 email clients 會無視電子郵件中的 head 和 style 標籤，因此如果你在測試時發現內容設定不符合預期，或是有跑版的情況，可以試著將 css inline。

Inline 小工具



html

<h1>三、競賽辦法</h1>


css

h1 { margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; }
合併

<h1 style="“color:#D70000;" font-family: neue arial sans-serif font-size:25px font-weight:400 line-height:34px margin-top:15px padding:0>三、競賽辦法</h1>

1. 範例：

http://mepopedia.com/~jinjin/webclass/edm1.html

以表格作為框架
….

2. css inline範例：


<tr> <td align="center" valign="middle" style="“font-family:微軟正黑體;" color: font-size:24px> <i>第十二屆威尼斯拉古納藝術獎</i></td> </tr>

3. 圖片絕對路徑：


先將圖片上傳至網路空間。
如上傳至hw02資料夾後，貼上圖片絕對路徑。

如：http://mepopedia.com/~web106-2b/hw02/hw02-105/img/001.jpg 



<tr> <td align="center" valign="middle" style="padding-top:15px;"><img style="display:block;;height:auto;;position:inherit !important;" indx="16414643" rank="60" irank="738587089" atitle="[講義] EDM/Newsletter製作 (no replies)" alt="" data-src="//www.cute.edu.tw/dvcd/master/img/mainpic.jpg" data-srcset="" class="rs-article-img-src do-lazy"></td> </tr> <tr> <td align="center" valign="middle" style="padding-bottom:15px; padding-top:15px;"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="60" irank="766647948" atitle="[講義] EDM/Newsletter製作 (no replies)" alt="" data-src="//www.cute.edu.tw/dvcd/master/img/divider.gif" data-srcset="" class="rs-article-img-src do-lazy"></td> </tr>

3. EDM/Newsletter免費版型


可從免費版型中挑選適合的版型修改。
1.Free newsletter templates 
http://templates.cakemail.com
2.Free Newsletter Templates 
https://www.templatesbox.com/newsletters/index.htm


4. 課堂範例


(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html
↧
Search

[講義] RWD-OnePage設計 概念篇 (no replies)

March 28, 2018, 11:22 am
$
0
0
  1. 1. 圖示字體(icon font)
  2. 2. 使用圖示字體(icon font) Font Awesome
  3. 3. Font Awesome基本操作
  4. 4. Font Awesome5新增樣式
  5. 5. FontAwesome CDN
  6. 6. 舊版Font Awesome練習
  7. 7. OnePage一頁式網頁概述
  8. 8. 免費版型資源
  9. 9. 免費圖庫資源
  10. 10. 應用類型
  11. 10.1 畢業專題網站應用
  12. 10.2 活動網站
  13. 10.3 品牌與導覽網站設計
  14. 11. favicon介紹

7. OnePage一頁式網頁概述


一頁式的設計越來越多變化，一頁式的好處在於瀏覽方式單純而直覺，使用者只需用滑鼠不斷向下捲動，就可以從頭到尾欣賞完整個網站的內容像在翻閱雜誌的感覺，因為捲動的情境，很多設計師開始加入了有趣的創意，無論是動畫、場景變換、翻頁等效果，都讓一頁式網站的瀏覽體驗變得更加豐富。

1.整個網站只有一頁網頁，類似公司或產品的網路電子型錄，設計簡單、平坦化
2.選單的項目只是捲動到(scroll)這一頁網站的某個區塊，一般都是使用HTML中的錨點(anchor)連結
3.會應用許多特效，多半和捲動(scroll)、燈箱(lightbox)相關的Javascript特效。
4.必定會使用"響應式網頁設計(RWD)，這是指網頁可以依照螢幕解析度，自動調整大小或給定觀看的內容


8. 免費版型資源


在經過基礎html及css語法的洗禮後，是否期待能製作更多不同的版型？
以應用在更多不同的設計上，因應更多的需求。
目前網路上有許多免費的版型可供下載製作。
接下來同學們可以瀏覽與尋找自己喜歡與適合的版型，試著做做看接下來的主題。
DreamTemplate

http://www.dreamtemplate.com

tooplate

http://www.tooplate.com/free-templates

templatemo

http://www.templatemo.com/page/1

Free CSS Free CSS Templates, CSS Layouts & More! 

http://www.free-css.com/free-css-templates

HTMLl5UP

https://html5up.net

W3.CSS Templates

https://www.w3schools.com/w3css/w3css_templates.asp

Free Responsive HTML5 CSS3 Website Templates 

https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9


OnePage免費版型資源

https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/


9. 免費圖庫資源


https://www.pexels.com
https://pixabay.com
https://visualhunt.com
https://www.pakutaso.com
http://cc0photo.com
https://bossfight.co
https://unsplash.com
http://images.google.com/hosted/life
https://www.flickr.com/photos/britishlibrary/sets/
https://picjumbo.com
http://publicdomainarchive.com
https://mmtstock.com


10. 應用類型


以下是未來可應用的設計型態，期待在畢業專題的設計上能看到大家設計的網頁！

1. 畢業專題網站應用



http://mepopedia.com/~jinjin/buzzwordstar/

http://mepopedia.com/~jinjin/buzzwordstar1/



OnePage

http://mepopedia.com/~css105-2a/lion_candy/

2. 活動網站



http://www.cute.edu.tw/dvcd/master/

3. 品牌與導覽網站設計



http://ccnt1.cute.edu.tw/cpland/4e/
http://www.cute.edu.tw/dvcd/lieyu/


11. favicon介紹


favicon介紹
Favicon是favorites icon的縮寫，亦被稱為website icon（網頁圖示）、page icon（頁面圖示）或urlicon（URL圖示）。Favicon是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將favicon顯示於瀏覽器的位址列中，也可置於書籤列表的網站名前，還可以放在標籤式瀏覽介面中的頁標題前。

Favicon線上製作轉換工具

favico.js
http://lab.ejci.net/favico.js/
FavIcon Cheat Sheet
https://github.com/audreyr/favicon-cheat-sheet
了解Favicon（2013/1/24新增）
http://www.jonathantneal.com/blog/understand-the-favicon/
Favicon＆App Icon Generator - 可以產生多平台的圖標
https://www.favicon-generator.org
favicon.ico Generator -極力推薦！
http://www.favicon.cc/
Favicon線上製作轉換工具
http://tw.faviconico.org/
↧
↧

[講義] 使用圖示字體(icon font) Font Awesome (no replies)

March 28, 2018, 11:49 am
$
0
0
  1. 1. 圖示字體(icon font)
  2. 2. 使用圖示字體(icon font) Font Awesome
  3. 3. Font Awesome基本操作
  4. 4. Font Awesome5新增樣式
  5. 5. FontAwesome CDN
  6. 6. 舊版Font Awesome練習

1. 圖示字體(icon font)


網頁設計常需要設計小ICON作為辨識內容與增加美觀之用，也為一般所稱之 UI（User Interface - 使用者介面）。
通常網站設計的過程中，由美編人員設計ICON，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：

1.ICON風格都不大一樣，造成美觀上會有落差。
2.製作速度慢，因為所有的ICON都要蒐集或是交由美編人員去製作。
3.所有ICON都是使用圖示的方式，所以網站的流量較大，甚至有可能較慢。
4.因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真。

有鑑於此，目前出現了一些將ICON製作成文字字型，解決上述問題，以 Font Awesome 為例，原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS或javascript的技術將圖示ICON呼叫出來，它擁有以下優點：

1.圖示放大、縮小不失真
2.呼叫使用相當簡單，可變化多種模式
3.一個字型卻擁有超過400個圖示ICON
4.免費使用，不必擔心版權問題
5.語法簡單


2. 使用圖示字體(icon font) Font Awesome


Font Awesome

https://fontawesome.com

FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。

透過 JS 來載入 SVG 圖示
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。

請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在


內：

<!-- 一次載入所有的圖示 -->

完整語法，接下來請於body內練習

<meta charset="UTF-8"> <title> Font Awesome </title>

在 HTML 中透過 <i> </i>標籤同時給予不同的 class 就會產生不同的圖示

<i class="fas fa-camera-retro"></i>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 
分別代表 Solid, Regular, Light 和 Brands




3. Font Awesome基本操作



如果只是要調整基本的樣式，可以在圖示外面的
給一個樣式
<div style="font-size:4em; color:blue"> <i class="fas fa-camera-retro"></i> </div>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：

<!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x --> <i class="fa fa-camera-retro fa-xs”&gt;&lt;/i&gt;&lt;/xmp&gt; &lt;br /&gt; &lt;br /&gt; &lt;xmp&gt;<!-- 旋轉動畫： .fa-spin --> &lt;div class=" fa-3x> <i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> </i>


4. Font Awesome5新增樣式


透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：

<!--- 縮放： grow-# 或 shrink-# --> <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i> <i class="fas fa-magic" data-fa-transform="grow-6" style='“background:MistyRose"'></i>
<!-- - 位置：left-#, right-#, up-#, down-#--> <i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i>

<!-- - 旋轉：rotate-# - 翻轉：flip-v, flip-h --> <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：

<!-- - 遮罩： data-fa-mask --> <i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：

<!-- - 圖層：fa-layers - 文字：fa-layers-text - 計數：fa-layers-counter --> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-calendar"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span> </span>

5. FontAwesome CDN



<div class="fa-4x"> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-calendar"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span> </span> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-certificate"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span> </span> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fa fa-envelope"></i> <span class="fa-layers-counter" style="background:Tomato">1,419</span> </span> </div>

6. 舊版Font Awesome練習


舊版Font Awesome，請以下面網站為例

http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html

搭配

http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf

修改Font Awesome圖示
↧

[講義] OnePage網頁實作解析(一） (no replies)

April 11, 2018, 10:17 am
$
0
0
  1. 1. 前置設定html lang / meta tag
  2. 1.1 html lang 語系與字元編碼設定
  3. 1.2 什麼是 meta tag ?
  4. 2. 輪播圖Flexslider / Jumbotron
  5. 2.1 Flexslider－－方便好用的圖片輪播、滑動切換套件
  6. 3. Grid system 網格系統
  7. 3.1 Grid system 網格系統概述
  8. 3.2 960 網頁格線排版系統
  9. 4. Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化

1. 前置設定html lang / meta tag



1. html lang 語系與字元編碼設定


在HTML5的中可增加lang=來標註網頁的語系，讓瀏覽器能更正確的解析與編碼。
在台灣的完整的寫法就是 
 其他語言的標示法：
en 英文
zh-Hans 簡體中文
zh-Hant 繁體中文
zh-Hant-TW 臺灣使用的繁體中文

2. 什麼是 meta tag ?


是網頁中的一個標籤，主要是用在 head 的區段，告訴訪問者的瀏覽器關於這個網頁的一些資訊，常見的有：
charset：定義這個網頁的語言，通常繁體中文的網頁是 big5,簡體是 gb2312,但現在常用 UTF-8
description：對這個網頁的敘述，可以寫一段文字來敘述本頁的一些說明。
keywords：關鍵字，與這個網頁相關的關鍵字有哪些。



 <meta charset='“utf-8"'> 
 語言編碼

 

<meta name="viewport" content="width=device-width, initial-scale=1”&gt;
 &lt;/xmp&gt; 螢幕解析度寬度

 &lt;br /&gt; 
 &lt;xmp&gt;&lt;meta name=" description>
 網站描述



 <meta name="author" content='“"'>
 作者


2. 輪播圖Flexslider / Jumbotron


1. Flexslider－－方便好用的圖片輪播、滑動切換套件


大圖輪播已經是許多網站的常見功能了，除了在剛進入網站的時候能夠立即吸引使用者的目光以外，還可以搭配炫目的動畫達成一定的互動效果。
此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js，可以到Flexslider官網下載資料夾。
https://woocommerce.com/flexslider/


廣告大屏幕 (Jumbotron)


一款輕量極的、靈活的元件，可視情況擴張到整個區域以顯示您網站的關鍵行銷資訊。
請依尺寸規格，可以自行增加適當的輪播圖片，修改文字描述等。並可試著修改輪播語法。


3. Grid system 網格系統


1. Grid system 網格系統概述


Bootstrap 提供了一套響應式、行動裝置優先的網格系統，隨著螢幕（viewport）尺寸的增加，系統會自動分為最多12列。它是一種用於快速創建一致的佈局和有效地使用HTML 和CSS 的方法。

Grid system 其實是一種平面設計方法與風格，它藉由固定的格子切割版面來設計佈局方法。
運用在網頁則是把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙。grid system 主要是由欄（column）與間隙（ gutter ）所組成，另外為視覺舒適度，不會將元素填滿整個頁面，會在兩旁留白（grid padding），最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。

超小設備（手機，小於768px） */
Mobile – xs ( < 768px )/*
.col-xs-
/* 小型設備（平板電腦，768px 起） */
Tablet – sm ( 768~991px )
.col-sm-
/* 中型設備（筆記型電腦，992px 起） */
Desktop – md ( 992~1200px )
.col-md-
/* 大型設備（大台式電腦，1200px 起） */
Large Desktop - lg ( >= 1200px )
.col-lg-


2. 960 網頁格線排版系統



https://960.gs
PHOTOSHOP
新增【網格】參考線方法
https://tips.zoego.tech/archives/422
ILLUSTRATOR
新增【網格】參考線方法
https://tips.zoego.tech/archives/441


4. Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化



網頁設計的標準（HTML & CSS）是由 W3C 協會所制定的，然而，各大瀏覽器為了展現自身的強大，都自行加入一些有的沒有的設定，造成網頁設計師在排版的時候，就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法。
「reset CSS」是世界知名的 CSS 大師「Eric A. Meyer」所整理出來的檔案，該檔案主要是針對各瀏覽器最常發生不一致的樣式進行調整，讓網頁在各瀏覽器的呈現上能有同樣的效果。
下載： http://meyerweb.com/eric/tools/css/reset/reset.css
來源： http://meyerweb.com/eric/tools/css/reset/
只要在寫的 CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決各大瀏覽器的差異了！
↧

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

April 18, 2018, 9:03 am
$
0
0
  1. 1. 相片分類與燈箱效果
  2. 2. 地圖設定

1. 相片分類與燈箱效果



html


  • Show All
  • We Design
  • Printing
  • We Development
  • SEO Optimization


  • 
 Eligendi optio cumque

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


    style.css
Ctrl+F 搜尋 Grid 或 workArea 
 

    #workArea ul#Grid li a {
 display: block; color: #fff; background: #E67E22; font-weight: 700; text-transform: uppercase; 
} #workArea ul#Grid li a:hover img { opacity: 0.2;
 }
    圖片設定連結後之底色設定：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/


    2. 地圖設定



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

    html

    
 <div style="margin-top:-30px;"> <iframe class="gmap rs-article-iframe-src do-lazy" style="width:100%; height:500px; margin:0px; border:0px;" width="600" height="450" frameborder="0" allowfullscreen data-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" data-srcset=""> </iframe> <br> 地圖區域高度設為500px，寬度100%</div>
    ↧
    ↧

    [講義] Figma資源分享 (no replies)

    March 21, 2019, 10:49 pm
    ↧

    [講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video (no replies)

    November 19, 2019, 7:19 am
    $
    0
    0
    1. 1. 本單元範例下載
    2. 1.1 head需修改之項目
    3. 1.2 skins/css/網頁主色設定
    4. 1.3 等待動畫page-loader
    5. 1.4 Toggle navigation行動版導覽列/桌機版logo圖檔
    6. 1.5 導覽列設定/navbar/dropdown
    7. 1.6 首頁video影片設定 / videowrap影音區塊 / script

    1. 本單元範例下載



    ✱ 範例下載

    學長姐參考範例：
    http://mepopedia.com/~jinjin/ex/final-1055445017

    1. head需修改之項目


    請於下列標示部分，替換成自己的設計元素



    2. skins/css/網頁主色設定




    skin / mycolor.css 網頁主色設定


    使用搜尋快速鍵Ctrl+F(或搜尋與取代Ctrl+shift+F) 將原來色碼替換成欲取代的色碼





    3. 等待動畫page-loader


    等待動畫，可自行設計gif動畫後替換

    <div class="page-loader"> <img alt="" style=";height:auto;;position:inherit !important;" indx="16414643" rank="66" irank="952214683" atitle="[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video (no replies)" data-src="//mepopedia.com/assets/img/loader.gif" data-srcset="" class="rs-article-img-src do-lazy"> </div>

    4. Toggle navigation行動版導覽列/桌機版logo圖檔




    行動版導覽列logo文字及圖示設定



    5. 導覽列設定/navbar/dropdown





    導覽列原始碼位置










    6. 首頁video影片設定 / videowrap影音區塊 / script




    html /script導覽列原始碼位置





    html 影片代碼位置修改
    ↧

    [講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 / (no replies)

    November 25, 2019, 8:13 am
    $
    0
    0
    1. 1. 期末範例
    2. 2. 網站基本架構
    3. 3. 須製作之頁面
    4. 4. 麵包屑breadcrumb
    5. 5. 圖片列表頁
    6. 6. 上課影音

    1. 期末範例


    上課期末作業範例線上瀏覽
    http://mepopedia.com/~jinjin/web/final/


    上課期末範例下載


    2. 網站基本架構





    3. 須製作之頁面


    1.首頁，包含導覽列之介紹頁、列表頁、文章頁、相簿列表頁等
    2.介紹頁：了解大概的內容
    3.列表頁（分為圖片列表頁與文字列表頁）：介紹內容之列表頁面
    4.文章頁（分為有圖片與無圖片）：為介紹之內容主頁
    5.相簿列表頁（點開放大、幻燈輪播）
    6.聯絡我們





    4. 麵包屑breadcrumb



    麵包屑提供了導航功能，提供網頁間之關係路徑，並增加網頁親和性
    在文章內容主頁中，通常會有麵包屑breadcrumb，提供文章路徑，說明所在位置，並方便返回前面位置

    如：
    列表頁：https://www.gvm.com.tw/category/world_focus


    文章頁與麵包屑
    https://www.gvm.com.tw/article/69594





    html語法



    5. 圖片列表頁






    6. 上課影音


    [講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
    https://youtu.be/K5Eol6qjXCE
    ↧
    Search

    [講義] RWD多頁網頁編輯 (四) 相簿設定 (no replies)

    December 9, 2019, 6:09 pm
    $
    0
    0
    1. 1. 期末範例
    2. 2. 網站基本架構--相簿篇
    3. 3. 相簿
    4. 3.1 滿版型相簿（四欄）
    5. 3.2 一般型相簿（四欄）

    1. 期末範例


    上課期末作業範例線上瀏覽--相簿
    http://mepopedia.com/~jinjin/web/final/gallery.html

    上課期末範例下載


    2. 網站基本架構--相簿篇





    3. 相簿


    選擇其中適合的相簿頁設計型式，作為期末作業相簿頁設計

    1. 滿版型相簿（四欄）


    http://mepopedia.com/~jinjin/web/final/gallery.html


    html+css語法解析









    2. 一般型相簿（四欄）


    http://mepopedia.com/~jinjin/web/final/gallery-4.html


    html+css語法解析

    ↧
    ↧

    [講義] Google Fonts 網路中文字型應用 (no replies)

    December 10, 2019, 5:15 am
    $
    0
    0
    1. 1. Google Fonts 網路中文字型
    2. 2. 使用Google fonts黑體（思源黑體）
    3. 3. 使用Google fonts圓體字型
    4. 4. 使用Google fonts仿宋字型

    1. Google Fonts 網路中文字型


    Google Fonts https://fonts.google.com
    Google 推出 5 款免費的中文網頁字型
    1. cwTeXKai (Chinese Traditional) 楷體字體
    @import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
    font-family: "cwTeXKai", serif;
    2. cwTeXYen (Chinese Traditional) 圓體字體
    3. cwTeXFangSong (Chinese Traditional) 仿宋體字體
    4. Noto Sans TC (Chinese Traditional) 黑體字體（思源黑體）
    5. cwTeXMing (Chinese Traditional) 明體字體

    不過，目前在  Google Fonts 網站上還找不到這 5 個字體 ，因為這 5 個字型目前是被放到 Google Fonts Early Access （測試版）的地方。
    下載網址：https://fonts.google.com/earlyaccess
    目前可以正常的在網頁上使用這些新的中文網路字型。
    以下我們就為大家介紹如何使用這些 Google 推出的新的中文網路字型。

    2. 使用Google fonts黑體（思源黑體）


    思源黑體是 Adobe 和 Google 共同開發的開放原始碼字型，發佈時就已支援繁體中文、簡體中文、日文及韓文，因此深受許多使用者喜愛。
    Google Fonts 本身不會對流量或次數額度有所限制，且無須註冊或下載檔案，只要依照服務提供的字型 CSS 程式碼，套入自己的網站後稍作調整即可使用，非常簡單！

    網站名稱：Google Fonts: Early Access
    網站鏈結：https://fonts.google.com/earlyaccess
    開啟 Google Fonts: Early Access 頁面，找到 Noto Sans TC（Chinese Traditional），就能看到網站提供的程式碼，使用方法很簡單，只要把 Google Fonts 提供的那段 CSS 程式碼放入網站的 ，或style.css檔案中，修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。



    Google fonts：Noto Sans TC (Chinese Traditional) 黑體（思源黑體）

    @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
    font-family:"Noto Sans TC", sans-serif;








    3. 使用Google fonts圓體字型


    Google fonts：cwTeXYen (Chinese Traditional) 圓體字型

    @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
    font-family: "cwTeXYen", sans-serif;










    4. 使用Google fonts仿宋字型


    Google fonts：cwTeXFangSong (Chinese Traditional) 仿宋體字型

    @import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
    font-family: "cwTeXFangSong", serif;




    ↧
    Viewing all 70 articles
    Browse latest View live
    Search