本書主要講解網(wǎng)頁設計的基本流程、Dreamweaver CS5的基本操作,編輯頁面元素,布局網(wǎng)頁頁面,使用CSS+DIV統(tǒng)一頁面風格,使用庫、模板、行為和表單,制作動態(tài)網(wǎng)頁效果,Photoshop CS5的基本操作,使用Photoshop CS5處理圖像,使用Flash CS5制作動畫等知識。本書最后還安排了一個綜合案例,進一步提高學生對知識的應用能力。
本書采用項目式、分任務講解,每個任務主要由任務目標、相關知識和任務實施3個部分組成,然后再進行強化實訓。每章最后還總結(jié)了常見疑難解析,并安排了相應的練習和實踐。本書著重于對學生實際應用能力的培養(yǎng),將職業(yè)場景引入課堂教學,因此可以讓學生提前進入工作的角色。
本書適合作為職業(yè)院校網(wǎng)頁設計專業(yè)以及計算機應用等相關專業(yè)的教材,也可作為各類社會培訓學校相關專業(yè)的教材,同時還可供網(wǎng)頁設計者、網(wǎng)頁美工人員自學使用。
1、知識難度適中,符合中職學校教學特點 2、案例豐富,操作步驟詳盡,符合中職學生學習特點 3、配套資源到位,有利于教師授課
項目一 網(wǎng)頁設計基礎
任務一 購物網(wǎng)站賞析
一、任務目標
二、相關知識
(一)網(wǎng)站、網(wǎng)頁、主頁概念
(二)網(wǎng)頁常用術(shù)語
(三)常用網(wǎng)頁制作軟件
(四)HTML標記語言
三、任務實施
任務二 規(guī)劃“蓉錦大學”網(wǎng)站
一、任務目標
二、相關知識
(一)網(wǎng)頁設計內(nèi)容
(二)網(wǎng)頁設計原則
三、任務實施 項目一 網(wǎng)頁設計基礎
任務一 購物網(wǎng)站賞析
一、任務目標
二、相關知識
(一)網(wǎng)站、網(wǎng)頁、主頁概念
(二)網(wǎng)頁常用術(shù)語
(三)常用網(wǎng)頁制作軟件
(四)HTML標記語言
三、任務實施
任務二 規(guī)劃“蓉錦大學”網(wǎng)站
一、任務目標
二、相關知識
(一)網(wǎng)頁設計內(nèi)容
(二)網(wǎng)頁設計原則
三、任務實施
(一)前期策劃與內(nèi)容組織
(二)搜集和整理資料
(三)網(wǎng)頁效果圖設計
(四)網(wǎng)頁中動畫設計
(五)網(wǎng)站頁面設計制作
(六)網(wǎng)站測試與發(fā)布
實訓 規(guī)劃“果蔬網(wǎng)”網(wǎng)站
常見疑難解析
拓展知識
課后練習
項目二 Dreamweaver CS5的基本操作
任務一 創(chuàng)建“果蔬網(wǎng)”站點
一、任務目標
二、相關知識
(一)認識Dreamweaver CS5的工作界面
(二)Dreamweaver CS5參數(shù)設置
(三)命名規(guī)則
三、任務實施
(一)創(chuàng)建站點
(二)編輯站點
(三)管理站點和站點文件夾
任務二 制作“學校簡介”頁面
一、任務目標
二、相關知識
三、任務實施
(一)新建與保存網(wǎng)頁
(二)設置頁面屬性
(三)輸入文本
(四)設置文本格式
(五)插入網(wǎng)頁其他元素
實訓一 創(chuàng)建“蓉錦大學”站點
實訓二 編輯“招生就業(yè)概況”網(wǎng)頁
常見疑難解析
拓展知識
課后練習
項目三 編輯網(wǎng)頁元素
任務一 制作“蓉錦大學”首頁頁面
一、任務目標
二、相關知識
(一)音頻文件格式
(二) 視頻文件格式
三、任務實施
(一)插入與編輯圖像
(二)優(yōu)化圖像
(三)設置鼠標經(jīng)過圖像
(四)添加背景音樂
(五)插入SWF動畫
任務二 為“果蔬網(wǎng)”網(wǎng)頁創(chuàng)建超鏈接
一、任務目標
二、相關知識
(一)超鏈接的組成
(二) 超鏈接的種類
三、任務實施
(一)插入文本超鏈接
(二)創(chuàng)建圖像超鏈接
(三)創(chuàng)建熱點圖片超鏈接
(四)創(chuàng)建錨點超鏈接
(五)創(chuàng)建電子郵件超鏈接
(六)創(chuàng)建外部超鏈接
(七)創(chuàng)建空鏈接
(八)創(chuàng)建腳本鏈接
實訓一 制作果蔬網(wǎng)首頁
實訓二 為果蔬網(wǎng)創(chuàng)建超鏈接
常見疑難解析
拓展知識
課后練習
項目四 布局網(wǎng)頁頁面
任務一 制作“果蔬網(wǎng)優(yōu)惠區(qū)”頁面
一、任務目標
二、相關知識
(一)認識“表格”屬性面板
(二)認識“單元格”屬性面板
三、任務實施
(一)創(chuàng)建表格
(二)調(diào)整表格結(jié)構(gòu)
(三)設置單元格屬性
(四)在表格中添加內(nèi)容
任務二 使用框架布局“蓉錦大學首頁”頁面
一、任務目標
二、相關知識
(一)版式設計基本類型
(二)版式設計準則
(三)框架和框架集
三、任務實施
(一)創(chuàng)建框架與框架集
(二)保存框架集與框架
(三)制作框架網(wǎng)頁
實訓一 制作“蓉錦大學導航”頁面
實訓二 使用框架布局果蔬網(wǎng)
常見疑難解析
拓展知識
課后練習
項目五 使用CSS+DIV統(tǒng)一頁面風格
任務一 制作“享受生活”頁面
一、任務目標
二、相關知識
(一)認識CSS樣式
(二)CSS樣式的各種屬性設置
三、任務實施
(一)創(chuàng)建并應用CSS樣式
(二)編輯CSS樣式
任務二 使用CSS+DIV制作蓉錦大學教務處網(wǎng)頁
一、任務目標
二、相關知識
(一)認識CSS+Div盒子模式
(二)盒子模型的優(yōu)勢
三、任務實施
(一)插入Div標簽
(二)插入AP Div
(三)使用CSS+DIV控制整個頁面風格
(四)使用Spry制作導航欄
實訓一 制作“公司文化”頁面
實訓二 制作“招生就業(yè)”頁面
常見疑難解析
拓展知識
課后練習
項目六 庫、模板、表單、行為的應用
任務一 配置動態(tài)網(wǎng)頁數(shù)據(jù)源
一、任務目標
二、相關知識
(一)認識動態(tài)網(wǎng)頁
(二)動態(tài)網(wǎng)頁的開發(fā)流程
(三)Web服務器
三、任務實施
(一)安裝與配置IIS
(二)使用Access創(chuàng)建數(shù)據(jù)表
(三)創(chuàng)建與配置動態(tài)站點
(四)創(chuàng)建數(shù)據(jù)源
任務二 制作登錄數(shù)據(jù)管理頁面
一、任務目標
二、相關知識
三、任務實施
(一)創(chuàng)建記錄集
(二)創(chuàng)建插入記錄
(三)插入重復區(qū)域
(四)分頁記錄集
實訓一 制作“加入購物車”頁面
實訓二 制作蓉錦大學“用戶登錄”動態(tài)頁面
常見疑難解析
拓展知識
課后練習
項目七 實現(xiàn)動態(tài)網(wǎng)頁效果
任務一 制作“蓉錦大學館藏資源”頁面
一、任務目標
二、相關知識
(一)了解庫的概念
(二)“資源”面板
三、任務實施
(一)創(chuàng)建庫文件
(二)應用庫文件
任務二 制作“果蔬網(wǎng)聯(lián)系我們”頁面
一、任務目標
二、相關知識
三、任務實施
(一)創(chuàng)建模板
(二)創(chuàng)建可編輯區(qū)域
(三)應用與管理模板
任務三 制作會員注冊頁面
一、任務目標
二、相關知識
(一)認識表單屬性面板
(二)行為的基礎知識
三、任務實施
(一)創(chuàng)建表單
(二)使用行為檢查表單
(三)為網(wǎng)頁添加彈出信息
(四)為網(wǎng)頁添加打開瀏覽器窗口效果
實訓一 完善蓉錦大學首頁的登錄版塊
實訓二 制作“蓉錦大學合作交流”頁面
常見疑難解析
拓展知識
課后練習
項目八 Photoshop CS5的基本操作
任務一 制作“蓉錦大學首頁”背景效果圖
一、任務目標
二、相關知識
(一)網(wǎng)頁中的圖片格式
(二)位圖、矢量圖、分辨率
(三)認識Photoshop CS5的工作界面
三、任務實施
(一)新建圖像文件
(二)創(chuàng)建參考線
(三)創(chuàng)建并填充選區(qū)
(四)描邊選區(qū)
(五)復制并裁剪圖像
(六)保存圖像文件
任務二 制作“七月”首頁背景
一、任務目標
二、相關知識
三、任務實施
(一)使用漸變工具填充顏色
(二)多種摳圖方法摳取圖像
(三)使用畫筆工具
實訓一 制作“登錄”界面
實訓二 制作網(wǎng)頁懸浮廣告效果圖
常見疑難解析
拓展知識
課后練習
項目九 使用Photoshop CS5處理圖像
任務一 調(diào)整“果蔬網(wǎng)——時令果蔬”頁面圖片
一、任務目標
二、相關知識
(一)圖像的色彩模式
(二)網(wǎng)頁色彩搭配技巧
(三)網(wǎng)頁色彩搭配注意事項
三、任務實施
(一)使用“色階”調(diào)整圖片
(二)使用“曲線”調(diào)整圖片
(三)使用“色相/飽和度”調(diào)整圖片
任務二 制作“蓉錦大學Logo”
一、任務目標
二、相關知識
(一)認識路徑
(二)認識“路徑”面板
三、任務實施
(一)使用形狀工具繪制并編輯路徑
(二)添加文字
任務三 制作“果蔬網(wǎng)”網(wǎng)頁按鈕
一、任務目標
二、相關知識
(一)圖層的作用和類型
(二)認識“圖層”面板
三、任務實施
(一)新建并分組圖層
(二)添加圖層樣式
(三)設置圖層混合模式
(四)使用濾鏡制作質(zhì)感效果
任務四 切片“果蔬網(wǎng)”局部效果圖
一、任務目標
二、相關知識
三、任務實施
(一)創(chuàng)建切片
(二)保存切片
實訓一 美化蓉錦大學網(wǎng)頁圖片
實訓二 制作果蔬網(wǎng)網(wǎng)頁標志區(qū)
常見疑難解析
拓展知識
課后練習
項目十 使用Flash CS5制作動畫
任務一 制作“果蔬網(wǎng)banner”動畫
一、任務目標
二、相關知識
(一)認識Flash CS5工作界面
(二)認識時間軸中的圖層
(三)認識時間軸中的幀
三、任務實施
(一)新建Flash文件
(二)導入圖像
(三)創(chuàng)建圖層和插入關鍵幀
(四)保存Flash文件
任務二 制作“蓉錦大學首頁”百葉窗動畫
一、任務目標
二、相關知識
三、任務實施
(一)創(chuàng)建元件
(二)繪制并編輯形狀
(三)編輯元件
(四)測試動畫
(五)發(fā)布動畫
任務三 制作“果蔬網(wǎng)”圖片輪顯動畫
一、任務目標
二、相關知識
(一)變量
(二)數(shù)據(jù)類型
(三)ActionScript語句的基本語法
三、任務實施
(一)制作圖片輪顯背景
(二)添加輪顯動作
實訓一 制作飛機動畫效果
實訓二 制作百葉窗動畫
常見疑難解析
拓展知識
課后練習
項目十一 微觀多肉世界網(wǎng)站建設
任務一 前期規(guī)劃
(一)分析網(wǎng)站需求
(二)定位網(wǎng)站風格
(三)規(guī)劃草圖
(四)收集素材
任務二 使用Photoshop CS5設計網(wǎng)頁界面效果圖
(一)設計頁面效果圖
(二)切片效果圖并導出
任務三 使用Flash CS5制作圖片輪顯動畫
(一)制作元件
(二)添加動作并測試動畫
任務四 使用Dreamweaver CS5進行頁面編輯
(一)制作主頁
(二)制作其他頁面
常見疑難解析
拓展知識
課后練習