Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

1. 前置設定html lang / meta tag



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


在HTML5的中可增加lang=來標註網頁的語系,讓瀏覽器能更正確的解析與編碼。
在台灣的完整的寫法就是 
 <html lang="zh-Hant-TW"> 其他語言的標示法:
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”>
 螢幕解析度寬度


<meta name="description" content=“">
 網站描述



 <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」的語法,就可以輕鬆解決各大瀏覽器的差異了!