WebDev Party 現代化網站前端基礎 CSS3 (下）

網頁版面流程：


  1. 網頁規劃：一開始規劃網站草稿，決定網站大小、導覽列、網頁流程、網頁地圖。 ※ 但不包含顏色、字型
  2. 視覺與程式：決定共用名詞（變數）以及目錄與檔名規則
  3. 產品與視覺：決定ID與CLASS，並且找出固定區塊以及可延伸區塊（高度會改變）
  4. javascript規範：視覺與程式討論，要做什麼特效
與客戶溝通，確定之後，網頁風格設計：
  1. 每一個網頁要有一致的網站風格（色系）
  2. 特效延伸
  3. 決定每一個區塊尺寸、大小、位置、顏色(並列出一張表格，以利CSS切版)
  4. 使用英文字體可以用[Google Font API](若是使用Google Font，建議在少數某些區塊，例如：導覽列，因為它會造成網頁字體延遲載入的跡象)可下載至本地端，若是使用中文字，盡量使用安全字體[就是字（中文字型）]
  5. 盡量不要用太複雜的背景（不好切版）
  6. 製作網頁內容，避免無法延伸區塊（內容，例：留言板）

手持裝置：


  1. 只放最重要的內容
  2. 手機網頁要怎麼呈現
  3. Responsive 也支援iframe
  4. [App]與[網頁]的差別 ※ 若對手持裝置有興趣，可找[kuro]助教
  5. [Flash]不支援ios ※ 若對Flash有興趣，可找高見龍助教

切版

把列出網頁區塊、內容、位置、顏色的那一張表格拿出來，並且利用photoshop或firework切版，並且將切出版面的尺寸、內距、間距、x軸與y軸，列在表格上，若有單純的色塊或css就可達到的效果，請用css實做（以後換位置，調整顏色，較好維護）

CSS 3

-o- :Opera瀏覽器
-ms- :IE瀏覽器
-moz- :Mozilla Firefox瀏覽器
-webkit-:Safari/Chrome瀏覽器
圓角的圓弧：boder-radius:20px 30px 40px 50px;
20px 指 左上角
30px 指 右上角
40px 指 右下角
50px 指 左下角
  1. [The Shapes of CSS]
  2. [CSS3 Shapes]

建議使用較新的瀏覽器觀看，內容～css3 圓角在左上角，2層圖層重疊



文字陰影：text-shadow:1px 2px 3px red;
1px 指 正數指右邊陰影，負數指左邊陰影
2px 指 正數指下邊陰影，負數指上邊陰影
3px 指 陰影模糊度
red指陰影顏色
  1. Google Web Fonts
  2. CSS3 Fonts

  1. CSS3 2D Transforms
  2. 3D Transforms

JavaScript

瀏覽器Loading動態網頁越久 ，JavaScript 越晚載入越好（寫在Body結束之前）

< a onclick="return myFunction();" >
維護頁面會變多（造成維護上的不變），建議html動作與javascript行為分離

Document Object Model

每一個html tag都是一個節點（node），JS 可以針對每一個node去操作。例： p或h1.........

LiveReload browser plug
CSS3 Generator提供css 3一些特殊效果
CSS3 Radius and Box Shadow
15+ Responsive CSS Frameworks to Kickstart Your Responsive Website Project
Responsive Web Design Testing Tool 看各個不同尺寸手持式裝置網頁
Media Query Snippets 針對不同手持裝置(機型)css語法
Media Queries for Standard Devices針對不同手持裝置(範例)
Resizer // A responsive design bookmarklet 模擬各種不同螢幕大小（瀏覽器plugin）
Responsive Design Bookmarklet模擬ipod螢幕大小，出現鍵盤時的樣子(功能較少)，瀏覽器plugin
template手持裝置樣板
jquery download CDN Hosted jQuery 外部載入 jquery檔案
jquery api 特殊效果 effects
jquery 速記片
jquery ui
jquery 教學
A tale of two viewports — part two
PROJECT TYPES

參考資料：

WebDev Party 現代化網站前端基礎 當天錄影檔

電子郵件發布

留言

張貼留言

熱門文章