網頁DIV+CSS布局和動畫美化全程實例

內容概要

網站的建站技術近幾年得到迅速的發(fā)展，網頁的布局與特效動畫技術層出不窮，網站建設已經從簡單的技術支持時代衍變到現(xiàn)在的視覺美化時代。但如何使設計的網頁高人一籌，達到讓人過目不忘的境界，如何追求以最簡單的特效讓網頁“亮”起來，這些都是新一代網頁設計者最關注的話題。本書詳細介紹了使用網頁DIV-+CSS布局的方法，詳解了國內外站點關于網頁特效實現(xiàn)的精華案例，并由資深設計師結合實際開發(fā)經驗，加以歸納、綜合而成網頁布局設計中特效實現(xiàn)的精彩實例。
《網頁DIV+CSS布局和動畫美化全程實例(附光盤)》由陳益材、何楚斌編著，《網頁DIV+CSS布局和動畫美化全程實例(附光盤)》涉及Web出編程的基礎知識、開發(fā)技術以及高級動畫特效的制作技巧，無論是具有Web編程經驗的中高級開發(fā)人員，還是網頁設計的初學者，本書都能成為其設計網頁時的好幫手。同時，本書也適用于網頁設計與制作人員、網站建設與開發(fā)人員閱讀，也可以作為高等院校相關專業(yè)和相關培訓機構的教學用書。

書籍目錄

第1章  動感網頁動畫的實現(xiàn)技術
  1．1 網頁動畫的重要性
    1．1．1 成功的網站所具備的特點
    1．1．2 快速發(fā)展的網頁特效動畫技術
    1．1．3 網頁動畫設計師必須掌握的技術
  1．2 掌握Web網頁標準的基礎
    1．2．1 網頁標準化的好處
    1．2．2 現(xiàn)階段使用的Web標準
    1．2．3 使用Web標準改善現(xiàn)有網站
  1．3 嵌入網頁的動畫技術
    1．3．1 GIF圖片動畫
    1．3．2 CSS樣式動畫
    1．3．3 JavaScript特效動畫
    1．3．4 Flash動畫
第2章  DIV+CSS網頁布局基礎知識
  2．1 DIV的基礎知識和操作
    2．1．1 層的基礎知識
    2．1．2 頁面中插入層
    2．1．3 創(chuàng)建嵌套層
    2．1．4 層屬性面板
  2．2 CSS層疊樣式表
    2．2．1 CSS的作用、類型與沖突
    2．2．2 編輯CSS層疊樣式表
    2．2．3 層疊樣式表規(guī)則意義
  2．3 DIV+CSS布局方法
    2．3．1 DIV標簽控制方法
    2．3．2 XHTML中的元素
    2．3．3 元素的樣式設置
    2．3．4 網頁寬度的設置
    2．3．5 水平居中的設置
    2．3．6 DIV的嵌套設置
    2．3．7 DIV的浮動方法
    2．3．8 網頁布局的實例
  2．4 列表元素布局
    2．4．1 列表元素布局導航
    2．4．2 導航條的超級鏈接
    2．4．3 導航條的互動設計
  2．5 CSS盒模型
    2．5．1 CSS盒模型概念
    2．5．2 外邊距的控制
    2．5．3 邊框的樣式設置
    2．5．4 內邊距的設置
    2．5．5 盒模型兼容問題
  2．6 元素的非常規(guī)定位方式
    2．6．1 CSS絕對定位
    2．6．2 CSS固定定位
    2．6．3 CSS相對定位
    2．6．4 CSS程序簡化
第3章  全程實例一：清新風格的攝影網站
  3．1 攝影網站的美工創(chuàng)意
    3．1．1 首頁的功能模塊
    3．1．2 規(guī)劃首頁的版面
  3．2 首頁的布局設計
    3．2．1 Photoshop分割圖片
    3．2．2 網站文件夾規(guī)劃
    3．2．3 搭建網站服務器平臺
    3．2．4 創(chuàng)建編輯站點
    3．2．5 轉換首頁布局結構
    3．2．6 CSS標準化網頁
  3．3 實例的動畫效果
    3．3．1 使用的動畫技術
    3．3．2 鏈接注釋動畫
    3．3．3 狀態(tài)欄跑馬燈
    3．3．4 隨機文本顏色
    3．3．5 滴水特效動畫
第4章  全程實例二：個性化的博客網站
  4．1 博客網站美工設計
  4．2 網站的首頁布局
    4．2．1 圖片的分割
    4．2．2 配置本地站點
    4．2．3 創(chuàng)建編輯站點
    4．2．4 轉換首頁布局結構
    4．2．5 DIV+CSS布局首頁
    4．2．6 二級頁面的設計
  4．3 日記翻頁的動畫效果
    4．3．1 實現(xiàn)的動畫技術
    4．3．2 素材圖片的整理
    4．3．3 圖形元件的制作
    4．3．4 按鈕元件的制作
    4．3．5 日記頁面的制作
    4．3．6 向右翻頁的動畫
    4．3．7 向左翻頁的動畫
    4．3．8  圖層合成影片
    4．3．9 加入翻書的聲音
    4．3．10 加入動作命令
    4．3．11 嵌入網頁并應用
第5章  全程實例三：精致風格的美容網站
  5．1 雅麗美容網站的設計
    5．1．1 網站的欄目設計
    5．1．2 設計首頁的版面
  5．2 網站首頁布局設計
    5．2．1 切片網頁圖片
    5．2．2 搭建本地站點
    5．2．3 創(chuàng)建編輯站點
    5．2．4 轉換布局結構
    5．2．5 DIV+CSS布局網頁
  5．3 首頁加入動畫效果
    5．3．1 首頁的動畫效果
    5．3．2 滑動二級菜單
    5．3．3 Flash特效動畫
第6章  全程實例四：天真的樂園網站
  6．1 天真樂園網站的設計
    6．1．1 網站的欄目設計
    6．1．2 首頁的版面設計
  6．2 首頁的布局設計
    6．2．1 使用Photoshop分割圖片
    6．2．2 配置本地站點服務器
    6．2．3 創(chuàng)建編輯站點
    6．2．4 轉換首頁布局
    6．2．5 DIV+CSS布局網頁
  6．3 加入的動畫效果
    6．3．1 使用的動畫效果
    6．3．2 DIV+CSS滑動菜單
    6．3．3 Flash特效動畫效果
    6．3．4 顯示訪問時間
第7章  全程實例五：水墨風格的餐飲網站
  7．1 水墨風格的網站美工設計
    7．1．1 餐飲網站的欄目設計
    7．1．2 網站首頁的設計
  7．2 網站首頁的布局設計
    7．2．1 使用Photoshop切片圖片
    7．2．2 配置本地站點服務器
    7．2．3 創(chuàng)建編輯站點
    7．2．4 轉換首頁布局結構
    7．2．5 DIV+CSS布局網頁
  7．3 首頁加入動畫效果
    7．3．1 實例使用的動畫效果
    7．3．2 逐字變化文本顏色
    7．3．3 變化菜品的動畫效果
    7．3．4 發(fā)光燈籠和動畫菜單
第8章  全程實例六：淳樸風格的辦公用品網站
  8．1 辦公用品網站的美工設計
    8．1．1 網站的欄目設計
    8．1．2 設計首頁的版面
  8．2 網站首頁的布局設計
    8．2．1 Photoshop切片圖片
    8．2．2 配置本地站點
    8．2．3 創(chuàng)建編輯站點
    8．2．4 轉換首頁布局
    8．2．5 DIV+CSS布局首頁
  8．3 加入的動畫效果
    8．3．1 使用的動畫效果
    8．3．2 狀態(tài)欄時間顯示
    8．3．3 壁燈的動畫設計
    8．3．4 Flash滑動菜單
第9章  全程實例七：傳統(tǒng)風格的酒業(yè)網站
  9．1 葡萄酒網站的美工設計
    9．1．1 設計酒業(yè)網站欄目
    9．1．2 設計首頁的版面
  9．2 首頁的布局設計
    9．2．1 Photoshop切片圖片
    9．2．2 配置本地站點
    9．2．3 建立酒業(yè)編輯站點
    9．2．4 轉換首頁布局
    9．2．5 DIV+CSS布局首頁
  9．3 首頁加入動畫效果
    9．3．1 實例使用的動畫
    9．3．2 滾動字幕廣告
    9．3．3 Logo發(fā)光動畫
    9．3．4 發(fā)光酒杯動畫
第10章  全程實例八：溫馨風格的家俱網站
  10．1 溫馨風格的家俱網站美工
    10．1．1 家俱網站的欄目設計
    10．1．2 設計首頁的版面
  10．2 家俱首頁的布局設計
    10．2．1 首頁圖片的切片
    10．2．2 配置家俱站點服務器
    10．2．3 創(chuàng)建編輯站點
    10．2．4 轉換首頁布局結構
    10．2．5 DIV+CSS布局網頁
  10．3 首頁加入動畫效果
    10．3．1 使用的動畫技術
    10．3．2 圖片的自動切換
    10．3．3 滑動的導航菜單

章節(jié)摘錄

版權頁：   插圖：   30 執(zhí)行菜單欄上的“插入”|“新建元件”命令或者按Ctrl+F88R合鍵，在打開的“創(chuàng)建新元件”對話框中輸入名稱“l(fā)ine5shan”，選擇“影片剪輯”下拉列表項，具體設置如圖7—96所示。 31 單擊“確定”按鈕，進入“l(fā)ine5shan”影片剪輯文檔編輯窗口，從“庫”面板中把“l(fā)ine5”圖形元件拖放在文檔編輯區(qū)內，具體設置如圖7—97所示。 32 執(zhí)行菜單欄上的“插入”|“新建元件”命令或者按下Ctrl+F8組合鍵，在打開的“創(chuàng)建新元件”對話框中輸入名稱為shan，選擇“影片剪輯”下拉列表項，具體設置如圖7—98所示。 33 單擊“確定”按鈕退出。接著進入shan影片剪輯文檔編輯窗口，從“庫”面板中拖入以上制作的圖形和影片剪輯元件，制作出一個發(fā)光的動畫效果。由于此步驟較繁瑣，因此這里就不做詳細介紹，讀者可以參考配書光盤中的相關文件，最后效果如圖7—99所示。 34 制作按鈕元件，首先執(zhí)行菜單欄上的“插入”|“新建元件”命令或者按下Ctrl+F8組合鍵，在打開的“創(chuàng)建新元件”對話框中輸入名稱為“爿寺效圖片”，選擇“圖形”下拉列表項，具體設置如圖7—100所示。 35 單擊“確定”按鈕，進入“特效圖片”圖形元件文檔編輯窗口，單擊工具箱中的“矩形工具”按鈕鐮，然后在舞臺中繪制一個矩形。在“屬性”面板中設置“寬”為59.4像素、“高”為12.85像素、“顏色”為白色，其他保持默認，具體設置如圖7—101所示。 36 然后再次執(zhí)行菜單欄上的“插入”|“新建元件”命令或者按下Ctrl+F8組合鍵，在打開的“創(chuàng)建新元件”對話框中在“名稱”文本框中輸入“特效”，選擇“按鈕”下拉列表項，具體設置如圖7—102所示。 37 單擊“確定”按鈕退出。接著進入“特效”按鈕元件文檔編輯窗口，從“庫”面板中把“特效圖片”圖形元件拖放在該按鈕元件的“彈起”幀狀態(tài)上，并在“屬性”面板中設置它的“透明度”為0，其他設置具體見圖7—103所示。 38 選中“指針經過”幀，按下快捷鍵F6創(chuàng)建一個關鍵幀，在“屬性”面板中設置它的“透明度”為30％，其他設置如圖7—104所示。 39 選中“按下”幀，按下快捷鍵F6創(chuàng)建一個關鍵幀，在“樣式，，下拉列表框中選擇“色調”選項，設置RGB顏色值分別為：204、0、0、“色調”為100％，其他設置如圖7—105所示。 40 選中“點擊”幀，按下快捷鍵F6創(chuàng)建一個關鍵幀，在“樣式”下拉列表框中選擇Alpha選項，設置Alpha為100％，其他設置如圖7—106所示。

編輯推薦

　　《網頁DIV+CSS布局和動畫美化全程實例》詳細介紹了使用網頁DIV+CSS布局的方法，詳解了國內外站點關于網頁特效實現(xiàn)的精華案例，并由資深設計師結合實際開發(fā)經驗，加以歸納、綜合而成網頁布局設計中特效實現(xiàn)的精彩實例。

圖書封面

評論、評分、閱讀與下載

---

    網頁DIV+CSS布局和動畫美化全程實例 PDF格式下載

---