《網頁設計與制作案例教程》是從事Dreamweaver課程教學的教師和兩位經驗豐富的企業設計師合作編寫而成。全書分為16章,第1~2章介紹了網頁及網站建設流程、網頁基本語言HTML、網頁版式設計與色彩搭配;第3~15章介紹了網頁設計軟件Dreamweaver CS3的主要功能及網頁設計與制作方法;第16章從DiV+CSS作為技術架構,介紹基于HTML語言的企業網站前臺。
《網頁設計與制作案例教程》內容均以任務驅動、案例學習為主線。通過學習任務來掌握必需的、常用的知識和技能。案例學習目標明確、設計精巧、代表性強。通過學習一系列“由簡到繁、由易到難、承前啟后”的階梯式案例,使讀者真正掌握網頁設計與制作的方法與技能,提高解決實際問題的能力,并起到了舉一反三的作用。
《網頁設計與制作案例教程》形式新穎、內容翔實、案例豐富、操作講解詳盡、步驟完整、重點突出、淺顯易懂,設計編排符合高職高專學生的認知水平。
《網頁設計與制作案例教程》任務驅動教學,編寫體系合理,內容安排科學、恰當。
“由簡到繁、由易到難、承前啟后”階梯式案例、目標明確、舉一反三。
由多年從事見面設計教學的教師和經驗豐富的企業設計師共同編寫而成。
配有素材、電子課件、教學建議、習題解答和實例等,登錄華信教育資源網免費下載。
第1章 網頁設計與制作綜述
1.1 學習任務:認識網頁
1.1.1 什么是網頁
1.1.2 網頁類型
1.2 學習任務:認識網站
1.2.1 什么是網站
1.2.2 網址與域名
1.2.3 網頁的基本構成元素
1.2.4 網頁制作常用軟件和技術
1.3 學習任務:網站建設基本流程
1.3.1 網站的需求分析
1.3.2 規劃網站結構
1.3.3 收集素材
1.3.4 設計與制作網站
1.3.5 網站的發布
1.4 學習任務:HTML語言基礎知識
1.4.1 HTML簡介
1.4.2 常用文本標簽
1.4.3 列表標簽
1.4.4 超鏈接標簽
1.4.5 圖像標簽
1.4.6 表格標簽
1.4.7 表單標簽
1.4.8 框架標簽
1.4.9 其他標簽
1.5 實訓
1.5.1 實訓一 制作滾動圖片鏈接
1.5.2 實訓二 應用文本標簽排版文本
1.5.3 實訓三 列表標簽的使用
1.6 習題
第2章 網頁版式設計與色彩搭配
2.1 案例分析:不同風格網頁作品欣賞與解析
2.2 學習任務:網頁版式設計
2.2.1 版式設計概述
2.2.2 網頁版式的尺寸和構成要素
2.2.3 網頁版式設計原則
2.2.4 網頁的版式設計風格
2.3 學習任務:色彩的基本理論及其視覺效果
2.3.1 色彩的基本理論
2.3.2 色彩的視覺效果
2.4 學習任務:網頁中的色彩及配色
2.4.1 網頁色彩
2.4.2 網頁配色原理
2.4.3 網頁配色技巧
2.5 實訓——瀏覽著名網站并歸納版式設計與色彩搭配技巧
2.6 習題
第3章 Dreamweaver CS3入門
3.1 學習任務:全面認識Dreamweaver CS3
3.1.1 Dreamweaver CS3的主要功能
3.1.2 Dreamweaver CS3的安裝需求
3.2 學習任務:Dreamweaver CS3操作環境介紹
3.2.1 啟動Dreamweaver CS3
3.2.2 Dreamweaver CS3工作界面介紹
3.3 案例1 創建并保存簡單HTML文檔
3.3.1 創建網頁文檔
3.3.2 設置頁面屬性
3.3.3 保存并瀏覽網頁文檔
3.4 學習任務:本地站點的規劃與創建
3.4.1 站點的概念
3.4.2 規劃站點
3.4.3 創建本地站點
3.4.4 管理站點
3.5 實訓
3.5.1 實訓一 熟悉Dreamweaver CS3操作環境
3.5.2 實訓二 創建本地站點及簡單個人網頁
3.6 習題
第4章 網頁文本和圖像
4.1 案例1 制作文本網頁
4.1.1 在新建文檔中直接輸入文本
4.1.2 復制添加其他文檔中的文本
4.1.3 導入其他文檔中的文本
4.1.4 設置文本屬性
4.2 案例2 修飾文本網頁
4.2.1 打開文檔
4.2.2 設置項目符號或編號
4.2.3 插入特殊符號、水平線和日期
4.3 學習任務:文本標簽
4.3.1 文本標簽及源代碼分析
4.3.2 在標簽選擇器中設置文本標簽的屬性
4.4 學習任務:網頁圖像與網頁圖像處理工具
4.4.1 網頁中常見的圖像格式
4.4.2 常用網頁圖像處理軟件
4.5 案例3 制作圖像網頁
4.5.1 插入圖像
4.5.2 設置圖像屬性
4.5.3 編輯圖像
4.5.4 插入圖像占位符
4.5.5 插入鼠標經過圖像
4.6 案例4 制作圖文混排網頁
4.7 實訓——制作卡片新機介紹網頁
4.8 習題
第5章 網頁超鏈接
5.1 案例1 為網頁創建超鏈接
5.1.1 超鏈接概述
5.1.2 創建超鏈接
5.2 案例2 創建各類超鏈接
5.2.1 創建錨點鏈接
5.2.2 創建E-mail鏈接
5.2.3 創建空鏈接
5.2.4 創建腳本鏈接
5.3 案例3 創建圖像地圖
5.4 實訓
5.4.1 實訓一 制作“黃金十二宮”介紹網頁
5.4.2 實訓二 制作母親節網頁
5.5 習題
第6章 表格
6.1 案例1 使用表格制作學生成績單
6.1.1 在頁面中插入表格
6.1.2 設置表格屬性
6.1.3 編輯表格
6.2 學習任務:表格標簽
6.2.1 使用表格標簽制作網頁表格
6.2.2 在標簽選擇器中設置表格的屬性
6.3 案例2 利用表格布局網頁
6.3.1 使用表格進行網頁布局
6.3.2 導入和導出表格數據
6.3.3 導入和導出表格式數據
6.3.4 排序表格
6.4 案例3 利用表格的布局模式實現復雜的頁面布局
6.4.1 在表格布局模式下繪制表格或單元格
6.4.2 利用布局表格布局網頁
6.5 實訓
6.5.1 實訓一 制作健康美食網
6.5.2 實訓二 制作時尚禮品網
6.6 習題
第7章 框架
7.1 案例1 利用框架布局網頁
7.1.1 認識框架與框架集
7.1.2 創建框架和框架集
7.1.3 保存框架和框架集
7.1.4 向框架中添加內容
7.2 案例2 制作復雜的框架網頁
7.2.1 選擇框架
7.2.2 拆分框架
7.2.3 設置框架和框架集屬性
7.2.4 鏈接框架
7.3 學習任務:框架標簽
7.4 案例3 創建浮動框架網頁
7.5 實訓——花園式樓盤網
7.6 習題
第8章 使用AP Div布局網頁
8.1 學習任務:AP Div基礎知識
8.1.1 AP Div概述
8.1.2 創建AP Div元素工具欄
8.1.3 AP Div元素的“屬性”面板
8.1.4 AP元素面板
8.2 案例1 創建AP Div元素并在其中添加文字和圖像
8.3 學習任務:AP Div與表格相互轉換
8.3.1 將AP Div元素轉換為表格
8.3.2 將表格轉換為AP Div元素
8.4 案例2 使用Div制作網頁下拉菜單
8.4.1 Div標簽
8.4.2 使用Div制作下拉菜單
8.5 實訓——利用AP Div布局網頁
8.6 習題
第9章 CSS樣式表
9.1 學習任務:認識CSS樣式表
9.1.1 CSS的基本概念
9.1.2 CSS基本語法
9.1.3 CSS樣式的引用
9.1.4 CSS樣式面板
9.2 學習任務:CSS樣式的創建與屬性設置
9.2.1 創建CSS樣式
9.2.2 設置CSS屬性
9.2.3 通過CSS樣式面板設置CSS屬性
9.3 學習任務:應用CSS樣式
9.3.1 鏈接和導入外部CSS樣式
9.3.2 編輯和刪除CSS樣式
9.3.3 在文檔中應用CSS樣式
9.4 案例1 利用CSS樣式美化網頁
9.5 實訓
9.5.1 應用CSS樣式制作投影文字
9.5.2 使用CSS樣式設計導航菜單
9.6 習題
第10章 使用行為制作網頁特效
10.1 學習任務:認識行為
10.1.1 行為概述
10.1.2 行為面板
10.1.3 事件
10.1.4 Dreamweaver CS3的標準行為
10.2 案例1 制作網頁加載時彈出公告頁
10.3 案例2 利用JavaScript實現關閉網頁
10.3.1 認識JavaScript
10.3.2 利用JavaScript實現關閉網頁
10.4 案例3 使用行為設置圖像特效
10.4.1 交換圖像
10.4.2 設置導航欄圖像
10.5 案例4 通過行為設置文本
10.5.1 設置狀態欄文本
10.5.2 設置容器的文本
10.6 案例5 通過行為設置跳轉菜單效果
10.7 案例6 制作網頁拼圖游戲
10.8 實訓——使用“效果”行為設置圖像增大/收縮特效
10.9 習題
第11章 使用表單
11.1 學習任務:表單和表單對象
11.1.1 表單
11.1.2 表單對象
11.2 案例1 制作留言簿
11.2.1 留言簿界面設計
11.2.2 創建文本域
11.2.3 創建按鈕
11.3 案例2 會員注冊
11.3.1 會員注冊界面設計
11.3.2 創建單選按鈕
11.3.3 創建復選框
11.3.4 創建列表/菜單
11.4 案例3 HTML的表單標簽
11.5 案例4 在網頁中使用Spry布局對象
11.5.1 插入Spry菜單欄
11.5.2 插入Spry選項卡式面板
11.5.3 插入Spry折疊式控件
11.5.4 插入Spry可折疊面板控件
11.6 實訓
11.6.1 實訓一 網上報名表單
11.6.2 實訓二 客戶調查表單
11.6.3 實訓三 制作QQ聊天室
11.7 習題
第12章 制作多媒體網頁
12.1 案例1 創建時間軸動畫
12.1.1 時間軸及“時間軸”面板
12.1.2 使用時間軸創建動畫
12.2 案例2 創建圖像動畫
12.2.1 編輯時間軸
12.2.2 創建圖像動畫
12.3 案例3 在網頁中插入Flash對象
12.3.1 插入Flash動畫
12.3.2 添加Flash按鈕
12.3.3 插入Flash文本
12.4 案例4 插入音頻
12.4.1 音頻文件格式
12.4.2 在網頁中嵌入音頻
12.4.3 為網頁添加背景音樂
12.5 案例5 插入視頻
12.5.1 視頻文件格式
12.5.2 插入視頻
12.6 學習任務:插入其他多媒體對象
12.6.1 插入Shockwave影片
12.6.2 插入Applet
12.6.3 插入ActiveX控件
12.7 實訓
12.7.1 實訓一 為寶貝相冊網頁添加背景音樂
12.7.2 實訓二 制作網頁導航菜單
12.7.3 實訓三 制作美食展示網
12.8 習題
第13章 模板和庫
13.1 案例1 創建基于模板的網頁
13.1.1 模板概述
13.1.2 創建模板
13.1.3 定義模板的可編輯區域
13.1.4 創建基于模板的網頁
13.1.5 管理模板
13.2 案例2 使用庫更新網頁
13.2.1 庫概述
13.2.2 創建庫項目
13.2.3 設置庫屬性
13.2.4 在網頁中應用庫項目
13.2.5 更新庫文件
13.3 實訓
13.3.1 實訓一 使用模板制作網頁
13.3.2 實訓二 向網頁中添加庫項目
13.4 習題
第14章 Dreamweaver與ASP協同工作
14.1 學習任務:動態網頁及實現技術
14.1.1 認識動態網頁
14.1.2 常見的動態網頁實現技術
14.2 學習任務:搭建動態網頁平臺
14.2.1 安裝IIS
14.2.2 配置IIS
14.3 學習任務:ASP基礎
14.3.1 ASP文件的組成
14.3.2 ASP的內置對象
14.4 案例1 在Dreamweaver中制作簡單ASP動態網頁
14.4.1 創建虛擬目錄
14.4.2 創建動態網頁文檔
14.4.3 瀏覽動態網頁
14.5 實訓——制作注冊確認網頁
14.6 習題
第15章 測試、發布、管理和維護站點
15.1 學習任務:測試站點
15.1.1 測試瀏覽器的兼容性
15.1.2 測試鏈接
15.1.3 使用報告測試站點
15.1.4 輔助功能測試
15.2 學習任務:注冊域名、申請空間及發布站點
15.2.1 注冊域名
15.2.2 申請空間
15.2.3 發布站點
15.3 學習任務:網站的宣傳
15.3.1 提交搜索引擎
15.3.2 友情鏈接
15.3.3 網絡廣告
15.3.4 郵件廣告
15.3.5 使用留言板、博客
15.4 實訓——注冊免費域名空間并提交搜索引擎
15.5 習題
第16章 綜合應用實例
16.1 網站建設的前期準備工作
16.1.1 網站整體需求分析
16.1.2 確定網站風格
16.1.3 網站板塊劃分
16.1.4 網站素材搜集
16.2 創建站點
16.3 網站主頁制作
16.3.1 使用AP Div布局頁面
16.3.2 設置頁面屬性
16.3.3 插入圖片
16.3.4 添加導航條
16.3.5 輸入文本
16.4 子頁面的制作
附錄A index.css參考代碼
第1章 網頁設計與制作綜述
Internet的迅速發展與普及,為人們提供了更方便、快捷的信息交流平臺。上網已經成為很多人工作、生活中必不可少的一部分,這主要是由于網頁承載了其他任何一種媒介都無法比擬的豐富資源。要制作出令人滿意的網頁,不僅要熟練掌握計算機網絡、網頁開發工具、網頁美工設計以及作為網頁基本結構的HTML標簽語言等多方面的基本知識,而且還要了解網頁和網站的實質、網頁組成元素等。 。
本章學習要點:
·網頁和網站
·網頁類型
·網頁的基本構成元素
·網頁制作常用軟件和技術
·網站策劃與設計流程
·HTML語言基礎知識
1.1 學習任務:認識網頁
互聯網是一個蘊藏著無窮資源的寶庫,在資源共享和信息交互方面具有得天獨厚的優勢,網頁正是這些資源和信息的重要傳遞載體。網頁不但可以提供文字、圖片、多媒體信息的瀏覽,而且在娛樂、商務等領域的應用(例如電子郵件、聊天室、搜索引擎、網上交易、電子政務等)都離不開網頁。
本節學習任務
認識什么是網頁,了解網頁的類型,為學習網頁設計與制作打好基礎。
1.1.1 什么是網頁
網頁是一種可以在互聯網上傳輸、能被瀏覽器識別和翻譯成頁面并顯示出來的文件,網頁是網站的基本構成元素。在聯網的計算機上安裝瀏覽器后,在瀏覽器的地址欄中輸入網址,即可在瀏覽器中打開網頁,如圖1.1所示。該網頁是一個網站的主頁(即Homepage),具有呈現整個網站主題以及頁面導航的門戶功能。
一般網頁上都會有文本和圖片等信息,復雜一些的網頁上還會有聲音、視頻、動畫等多媒體內容。在網頁上單擊鼠標右鍵,選擇“查看源文件”,可以查看網頁的代碼結構。用戶可以使用記事本對網頁中的文字、圖片、表格、多媒體等頁面內容進行編輯,并通過超文本標記語言HTML對這些元素進行描述和控制,最后由瀏覽器對這些標簽進行解釋并生成最終呈現在用戶眼前的豐富多彩的網頁。
……