網(wǎng)頁DIV+CSS布局和動(dòng)畫美化全程實(shí)例

內(nèi)容概要

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

書籍目錄

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

章節(jié)摘錄

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

編輯推薦

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

圖書封面

評(píng)論、評(píng)分、閱讀與下載

---

    網(wǎng)頁DIV+CSS布局和動(dòng)畫美化全程實(shí)例 PDF格式下載

---