《網(wǎng)頁設計與制作DreamWeaver》教案
網(wǎng)頁設計與制作DreamWeaver教案,網(wǎng)頁設計與制作DreamWeaver,網(wǎng)頁,設計,制作,dreamweaver,教案
第一講優(yōu)秀網(wǎng)站賞析授課日期班級名稱授課地點教學課題第一講優(yōu)秀網(wǎng)站賞析課時2學時教學目的(1)了解各種類型網(wǎng)頁的布局結構、色彩搭配(2)對網(wǎng)頁有一個初步的印象,激發(fā)學習網(wǎng)頁制作的興趣知識目標(1)賞析各種經(jīng)典網(wǎng)頁(2)對網(wǎng)頁的布局結構、色彩搭配形成初步印象能力目標(1)對網(wǎng)頁的設計與制作形成感性認識(2)激發(fā)學習興趣素質(zhì)目標培養(yǎng)學生的創(chuàng)新能力與獨立思考能力,并使其具有分析問題、解決問題的能力。重點(1)網(wǎng)頁的布局結構(2)網(wǎng)頁的色彩搭配難點(1)如何使學生對網(wǎng)頁設計感興趣課型講授型演示型教學方法邊講解、邊展示、邊欣賞教學手段多媒體教學教參網(wǎng)站設計與網(wǎng)頁配色教學環(huán)節(jié)及板書設計時間安排1復習提問了解本班學生以前是否有網(wǎng)頁設計方法的基礎,對網(wǎng)頁設計與制作是否有興趣52新課引入設計網(wǎng)頁并不是一個十分復雜的過程,但是想要設計出合理而精美的網(wǎng)頁作品,需要經(jīng)過嚴謹?shù)睦硇苑治?、敏銳的觀察,以及感性的審美與創(chuàng)意技巧。信息是網(wǎng)站核心,是網(wǎng)站設計的依據(jù),分析和理解信息內(nèi)容是設計的起點也是終點。色彩是網(wǎng)頁設計的靈魂之一,是最先也是最持久地印記在瀏覽者腦海中的網(wǎng)站印象。它對形成網(wǎng)站風格設計、網(wǎng)站氣氛等感覺性設計的作用非常大。合理的網(wǎng)站布局結構給瀏覽者賞心悅目的感覺,增強網(wǎng)站的吸引力。53知識技能目標說明54網(wǎng)頁展示瀏覽優(yōu)秀的網(wǎng)站,對這些網(wǎng)站的主頁進行分析,了解優(yōu)秀網(wǎng)頁的布局結構、色彩搭配、導航欄的設計、動畫效果等。155網(wǎng)頁賞析對各個網(wǎng)站的信息內(nèi)容、網(wǎng)頁布局結構、色彩搭配進行分析、說明256課堂實踐157課堂討論組織學生討論,對所展示的網(wǎng)站發(fā)表自己見解58.疑難解析59課堂小結(1)網(wǎng)站是信息內(nèi)容的存儲空間模式,它像一個放置信息的“柜子”,有著很多“格子”和“抽屜”,網(wǎng)站還是信息空間的外包裝,是“柜子”本身。(2)色彩搭配是頁面中刺激記憶最初、最持久的元素,失去色彩,人們會失去快樂的心情、娛樂的氣氛,色彩是人們生活多姿多彩的表現(xiàn),是互聯(lián)網(wǎng)生機的來源。(3)合理的網(wǎng)站布局結構給瀏覽者賞心悅目的感覺,增強網(wǎng)站的吸引力。導航是引人注目的,瀏覽者進行網(wǎng)站,首先尋找導航條510作業(yè)布置5總計90新授內(nèi)容網(wǎng)頁展示(1)軟件項目化精品課程(2)C語言程序設計精品課程(3)剪紙社團網(wǎng)站(4)書法協(xié)會網(wǎng)站(5)我行我攝影網(wǎng)站課堂實踐瀏覽幾個網(wǎng)站,對所瀏覽網(wǎng)站首頁的特色和不足進行賞析說明,主要包括頁面布局結構、顏色搭配、導航欄、文字效果、圖片效果、動畫效果等。從以下網(wǎng)站中選擇兩個網(wǎng)站進行賞析。(1)海爾集團網(wǎng)站:www.haier.com(企業(yè)網(wǎng)站)(2)旅游類網(wǎng)站:www.fhvip.com(旅游網(wǎng)站)(3)中國大眾體育網(wǎng):www.chinasfa.net(體育網(wǎng)站)(4)新東方教育:www.neworiental.org(教育網(wǎng)站)(5)武漢理工大學海事二班:www.haishi0302.com(班級網(wǎng)站)疑難解析問題1:如何上網(wǎng)瀏覽網(wǎng)站?問題2:如果不知道某個網(wǎng)站的網(wǎng)址,怎樣獲得該網(wǎng)站的網(wǎng)址或瀏覽該網(wǎng)站?課外拓展1.瀏覽以下網(wǎng)站,分析這些網(wǎng)站首頁的物色和不足。(1)天津大學網(wǎng)站:www.tju.edu.cn(2)易趣網(wǎng):www.ebay.com.cn(3)木葉之家個人網(wǎng):zhangrui.haocool.net(4)求職網(wǎng):www.51job.com(5)開心購物網(wǎng):www.aroundsuzhou.com(6)湖南張家界旅游網(wǎng):www.zjjok.com(7)曙光人才網(wǎng):www.twinssusccess.cn2.利用搜索引擎查找四川長虹集團、深圳TCL集團、九天音樂網(wǎng)的網(wǎng)址。課后作業(yè)上網(wǎng)找5個風站,說明其信息類型、色彩搭配、網(wǎng)站布局結構課后評析第二講網(wǎng)頁制作基礎授課日期班級名稱授課地點教學課題第二講網(wǎng)頁制作基礎課時2學時教學目的(1)了解網(wǎng)頁制作的基礎知識和相關概念(2)熟悉Dreamweaver CS3的界面布局和工作環(huán)境知識目標(1)萬維網(wǎng)、網(wǎng)頁、網(wǎng)站、主頁和HTML的基本概念(2)熟悉Dreamweaver CS3的界面布局和工作環(huán)境能力目標(1)熟悉Dreamweaver CS3的界面布局和工作環(huán)境素質(zhì)目標培養(yǎng)學生的創(chuàng)新能力與獨立思考能力,并使其具有分析問題、解決問題的能力。重點(1)萬維網(wǎng)、網(wǎng)頁、網(wǎng)站、主頁和HTML的基本概念難點(1)Dreamweaver CS3幫助系統(tǒng)的使用課型講授型操作型教學方法邊講、邊練、講練結合教學手段多媒體教學教參網(wǎng)頁設計與制作教程 人民郵電出版社教學環(huán)節(jié)及板書設計時間安排1復習提問請列出你經(jīng)常上過的幾個網(wǎng)站22新課引入你知道WWW代表什么嗎?什么是網(wǎng)頁的源代碼嗎?一般包含那些元素?33項目展示展示各類經(jīng)典網(wǎng)站的網(wǎng)頁74知識技能目標說明要學習網(wǎng)頁制作,先要了解網(wǎng)站和網(wǎng)頁的基礎知識55網(wǎng)站和網(wǎng)頁的基礎知識網(wǎng)頁的基本構成元素456問題探討怎樣使用Dreamweaver CS3的幫助系統(tǒng)搜索特定短語?57課堂實踐128提問與討論69.課堂小結310作業(yè)布置2總計90新授內(nèi)容一、網(wǎng)站和網(wǎng)頁的基礎知識1、WWW2、URL3、Server與Browser4、網(wǎng)頁5、網(wǎng)站6、Hypertext7、HTTP8、HTML9、CSS二、網(wǎng)頁的基本構成元素1、文本2、圖像3、超級鏈接4、導航欄5、動畫6、表格7、框架8、表單三、制作網(wǎng)頁的工具概述(1)制作網(wǎng)頁的專門工具:(2)圖像處理工具:(3)動畫制作工具(4)圖標制作工具(5)抓圖工具(6)網(wǎng)站發(fā)布工具四、初識Dreamweaver CS3中文版1、Dreamweaver CS3簡介2、Dreamweaver CS3工作環(huán)境3、Dreamweaver CS3的幫助系統(tǒng)課堂實踐(1)啟動Dreamweaver CS3,認識Dreamweaver CS3的工作環(huán)境。(2)在Dreamweaver CS3主窗口中觀察其各個菜單、工具欄、面板的組成。(3)利用Dreamweaver CS3的幫助,查找有關“JavaScript”的內(nèi)容,請分別利用“目錄”、“索引”、“搜索”三種途徑完成。疑難解析問題1:什么是URL?問題2:URL格式是什么形式?課外拓展實踐熟悉Dreamweaver CS3的工作環(huán)境熟練使用Dreamweaver CS3的幫助系統(tǒng)作業(yè)使用Dreamweaver CS3的幫助系統(tǒng)搜索CSS課后評析第三講站點創(chuàng)建與管理授課日期班級名稱授課地點教學課題第三講站點的創(chuàng)建與管理課時2學時教學目的掌握站點的創(chuàng)建與管理知識目標(1)掌握“文件”面板的使用方法(2)掌握站點的創(chuàng)建方法(3)掌握站點的管理方法能力目標熟記創(chuàng)建站點的流程,掌握站點管理的方法素質(zhì)目標培養(yǎng)學生的獨立思考能力,通過思考管理站點及布局美觀的網(wǎng)頁,培養(yǎng)學生分析問題、解決問題的能力重點(1)站點的創(chuàng)建與管理難點(1)站點的創(chuàng)建與管理課型講授型操作型教學方法采用啟發(fā)示的教學方式循序漸進的講解新課內(nèi)容教學手段多媒體教學教參網(wǎng)頁設計與制作教程 人民郵電出版社教學環(huán)節(jié)時間安排1復習提問:網(wǎng)頁的基本構成元素有哪些?52新課引入通過講述上網(wǎng)的知識,引出上網(wǎng)時要用的網(wǎng)站,從而把本次課要學的知識點帶給學生53知識技能目標說明:介紹本次課要掌握的知識目標64講解各知識點:具體講述本次課新課內(nèi)容425課堂實踐156問題探討:與學生一起引申問題留作思考57.疑難解析:58歸納總結:本節(jié)學習了如何創(chuàng)建站點和管理站點,同時也分析了網(wǎng)頁文檔的基本操作和“資源”面板、“文件”面板的使用方法。59作業(yè)布置2總計90新授內(nèi)容1、站點的創(chuàng)建(1)認識“文件”面板(2)創(chuàng)建本地站點2、站點管理切換、編輯、復制、刪除、導入站點3、管理網(wǎng)站中的文件和文件夾創(chuàng)建文件夾和文件、移動和復制文件、重命名文件夾和文件、刪除文件夾和文件。4、用案例介紹本地站點的創(chuàng)建方法動手操作在Dreamweaver CS3中創(chuàng)建站點5、使用“資源”面板管理網(wǎng)站中的資源(1)使用“資源”面板(2)在頁面中使用資源(3)選擇和編輯資源(4)頁面的屬性設置6、網(wǎng)頁文檔的基本操作(1) 創(chuàng)建網(wǎng)頁文檔(2) 打開網(wǎng)頁文檔(3) 關閉網(wǎng)頁文檔案例1:創(chuàng)建我的足球網(wǎng)操作步驟:1. 規(guī)劃站點1) D:myfootball。2) 網(wǎng)站名“我的足球網(wǎng)”,包括3個欄目“我與足球”、“足球新聞”、“足球明星相片”,分別存放在根目錄下的aboutme、news、photo文件夾中。3) 圖像素材放在image中。2. 新建站點1) 站點/新建站點2) 站點定義:myfootball3) 選擇默認選項“否,我不想使用服務器技術”4) 站點路徑:D:myfootball5) 在“您如何連接到遠程服務器”選擇“無”選項3. 在“文件”面板中管理文件1) 在“文件”面板中的“站點-myfootball”,右鍵/新建文件/創(chuàng)建“untitled.htm”,改為“index.htm”2) 右鍵站點/新建文件夾/創(chuàng)建四個文件夾:aboutme、news、photo、image3) 在aboutme、news、photo這三個文件中分別再建3個網(wǎng)頁文件me.htm,photo.htm,news.htm,作為首頁文件的3個鏈接指向。4. 編輯首頁文件雙擊“文件”面板上的index.htm文件,下面介紹“我的足球網(wǎng)”的首頁文件的編輯方法。1) 頁面屬性或修改/頁面屬性2) 背景顏色/綠色3) 輸入“我的足球網(wǎng)”4) 在下方插入一個1行2列的表格,插入/表格,表格寬度:550,其它全為05) 光標在第1列中,插入/圖像/將ch1/MAN.jpg,放入myfootballimage中6) 在表格第2列中,分3行,依次輸入“我與足球”、“足球新聞”、“足球明星相片”,并在下一行處插入另一張圖像素材。7) 將光標移至表格的下一行,輸入“本網(wǎng)站最后更新時間”/插入/日期,選中“儲存時自動更新”,將其居中。8) 選擇“我的足球網(wǎng)”/“屬性”面板中格式“標題1”,色彩:#FF9900,將網(wǎng)頁標題居中9) 制作欄目鏈接,分別鏈接me.htm,photo.htm,news.htm,注意:3個頁面中要設置返回的超鏈接。課堂實踐(1)創(chuàng)建一個命名為“課堂實踐”的靜態(tài)網(wǎng)站,該網(wǎng)站的所有文件存儲在本機上E盤的“ClassroomPractise”文件夾中。(2)在“文件面板”的站點根目錄下創(chuàng)建一個文件夾“00創(chuàng)建站點”。(3)在文件夾“00創(chuàng)建站點”中創(chuàng)建三個子文件夾“image”、“music”和“text”。(4)在文件夾“00創(chuàng)建站點”中創(chuàng)建一個命名為“00.html”的網(wǎng)頁文檔。(5)將所需的圖像文件和音樂文件分別復制到“image”和“music”文件夾中。疑難解析問題1:在“文件”面板中,選擇一個已創(chuàng)建的文件夾或文件,然后單擊右鍵會彈出一個快捷菜單,鼠標指針指向“編輯”菜單項,會顯示其級聯(lián)菜單,該級聯(lián)菜單包括了“拷貝”和“復制”兩個菜單項,這兩個菜單項有何區(qū)別呢?問題2:在“資源”面板中如何改變資源排列的次序?課外拓展實踐按照所學的站點創(chuàng)建方法創(chuàng)建一個個人網(wǎng)站課后評析第四講頁面的整體控制授課日期班級名稱授課地點教學課題第四講頁面的整體控制課時2學時教學目的掌握Dreamweaver CS3的參數(shù)、網(wǎng)頁頁面屬性的設置方法知識目標(1)了解Dreamweaver CS3的參數(shù)設置方法(2)掌握頁面屬性的設置方法(3)掌握設置文件頭內(nèi)容的方法(4)學習輔助工具的使用能力目標(1)掌握Dreamweaver CS3的參數(shù)、網(wǎng)頁頁面屬性的設置方法(2)學習輔助工具的使用素質(zhì)目標培養(yǎng)學生創(chuàng)新能力和獨立思考能力,并使其具有分析問題、解決問題的能力重點頁面屬性的設置、輔助工具的使用難點輔助工具的使用課型講授型教學方法采用啟發(fā)示的教學方式循序漸進的講解新課內(nèi)容教學手段多媒體教學教參網(wǎng)頁設計與制作教程人民郵電出版社教學環(huán)節(jié)時間安排1.復習提問:創(chuàng)建站點前為何要先建立本地文件夾?52.新課引入通過復習上次課內(nèi)容,引入本次課要學的“頁面的整體控”53.知識技能目標說明:介紹本次課要掌握的知識目標54.講解各知識點:具體講述本次課新課內(nèi)容345.課堂實踐156.問題探討:與學生一起引申問題留作思考57疑難解析88.歸納總結:通過學習設置首選參數(shù)、頁面屬性、文件頭內(nèi)容,輔助工具的使用。掌握從外觀上對頁面進行有效控制,方便網(wǎng)頁的制作和瀏覽。頁面整體控制的方法,除了設置常規(guī)的背景顏色、背景圖片等屬性之外,Dreamweaver CS3還有輔助線、縮放等常用且必備的功能,掌握好這些基本工具的使用,有助于我們更好的制作網(wǎng)頁。59作業(yè)布置3總計90新授內(nèi)容1.參數(shù)設置打開“首選參數(shù)”對話框參數(shù)設置方法參數(shù)設置舉例2設置頁面屬性打開“頁面屬性”對話框設置外觀屬性設置鏈接屬性設置標題屬性設置標題/編碼屬性設置跟蹤圖像在瀏覽器中瀏覽網(wǎng)頁3設置文件頭內(nèi)容在“設計”視圖中顯示“文件頭內(nèi)容”工具欄設置文件頭內(nèi)容的方法4輔助工具的使用配置窗口大小使用標尺、網(wǎng)格、輔助線課堂實踐操作要求打開“課堂實踐”站點文件夾“01頁面控制”下的網(wǎng)頁文檔“01.html”,然后完成以下各項的操作。(1)首選參數(shù)的設置要求設置啟動Dreamweaver CS3時顯示起始頁;設置站點屬性“總是顯示本地文件于左”;創(chuàng)建網(wǎng)頁文檔時,設置默認文檔為“HTML”文檔,設置默認擴展名為“.html”;設置“復制/粘貼”屬性:使用“編輯粘貼”從其他應用程序粘貼到設計視圖時,復制“帶結構的文本”,不清理Word段落間距。(2)頁面屬性的設置要求外觀屬性的設置“頁面字體”采用“默認字體”,“大小”采用“12px”;“背景圖像”選用image文件夾下的“bj01.jpg”;“左邊距”和“右邊距”設置為“100px”,“上邊距”和“下邊距”設置為“20px”。鏈接屬性的設置要求網(wǎng)頁中超鏈接文本默認狀態(tài)下的字體設置為“宋體”,字體大小設置為14px;網(wǎng)頁中超鏈接文本的顏色設置為“blue”,訪問過的超鏈接的顏色設置為“olive”;當鼠標指針移動到網(wǎng)頁中超鏈接文字上方時超鏈接的顏色設置為“maroon”,下劃線樣式設置為“變換圖像時隱藏下劃線”;網(wǎng)頁中已激活的超鏈接文本顏色設置為“fuchsia”。標題屬性的設置要求設置網(wǎng)頁中標題的字體為“隸書”,標題1的大小為“18px”,顏色為“aqua”?!皹祟}/編碼”屬性的設置要求網(wǎng)頁的標題設置為“湘江谷”;文檔類型設置為“HTML4.0Transitional”,編碼設置為“簡體中文(GB2312)”。疑難解析問題1:本章4.3節(jié)設置文件頭內(nèi)容時,還可以插入“刷新”,如何插入呢?問題2:本章4.3節(jié)設置文件頭內(nèi)容時,也可以插入“基址”,如何插入呢?課外拓展實踐1在“個人網(wǎng)站設計”站點的文件夾“01頁面控制”中創(chuàng)建一個網(wǎng)頁文檔,命名為“01.html”。2對網(wǎng)頁01.html設置首選參數(shù)、設置頁面屬性、設置文件頭內(nèi)容。課后評析第五講文本操作授課日期班級名稱授課地點教學課題第五講文本操作課時2學時教學目的1學會在網(wǎng)頁中輸入文本與編輯文本2掌握輸入空格和實現(xiàn)文本換行的方法。3學會在網(wǎng)頁中插入水平線和日期4掌握網(wǎng)頁文本格式化操作。知識目標1在網(wǎng)頁中輸入文本與編輯文本2輸入空格和實現(xiàn)文本換行的方法。3在網(wǎng)頁中插入水平線和日期4網(wǎng)頁文本格式化操作。能力目標掌握網(wǎng)頁中文本的各項操作素質(zhì)目標培養(yǎng)學生創(chuàng)新能力和獨立思考能力,并使其具有分析問題、解決問題的能力重點(1)網(wǎng)頁文本格式化操作難點網(wǎng)頁文本操作課型講授型教學方法采用啟發(fā)示的教學方式循序漸進的講解新課內(nèi)容教學手段多媒體教學教參網(wǎng)頁設計與制作教程人民郵電出版社教學環(huán)節(jié)時間安排1. 復習提問:怎樣設置一圖片作網(wǎng)頁背景?52.新課引入通過復習上次課內(nèi)容“頁面的整體控制”,引入本次課要學的“網(wǎng)頁文本編輯”53.知識技能目標說明:介紹本次課要掌握的知識目標54.講解各知識點:具體講述本次課新課內(nèi)容395.課堂實踐156.問題探討:與學生一起引申問題留作思考57疑難解析88.歸納總結:通過本次課的學習,我們要熟練掌握鍵入普通文本、特殊字符和插入日期的方法;了解項目列表和編號列表,并能更改列表屬性,熟練掌握對文本屬性和段落屬性的設置,可以使網(wǎng)頁更加豐富、祥實、美觀59作業(yè)布置3總計90新授內(nèi)容1網(wǎng)頁中輸入文本輸入文字輸入文本空格實現(xiàn)文本換行2網(wǎng)頁中編輯文本網(wǎng)頁中輸入的文本與Word一樣,也能進行編輯,常見的文本編輯操作有:(1)拖動鼠標選中一個或多個文字、一行或多行文本,也可以選中網(wǎng)頁中的全部文本。(2)按BackSpace鍵或Delete鍵實現(xiàn)刪除文本操作。(3)將光標移動到需要插入文本的位置,輸入新的文本。(4)實現(xiàn)復制、剪切、粘貼等操作。(5)實現(xiàn)查找與替換操作。(6)實現(xiàn)撤消或重做操作。3插入相關文本要素插入特殊字符插入文本列表插入水平線插入時間插入注釋4文本的格式化文本屬性面板設置網(wǎng)頁中文本的格式課堂實踐操作要求(1)輸入文本打開“課堂實踐”網(wǎng)站中文件夾“02文本操作”中的網(wǎng)頁文檔“02.html”,輸入標題“湘江谷”,然后輸入正文內(nèi)容。這些文字內(nèi)容存儲在文件夾“02文本操作”中子文件夾“text”的文本文件“02.txt”中。(2)插入一條“水平線”和日期,日期格式如圖5-17所示。(3)設置“主要景點”為列表格式。(4)設置文本格式將網(wǎng)頁02.html中標題“湘江谷”格式設置為“標題1”,字體設置為“隸書”,大小設置為“36”,文字顏色設置為“aqua”,且要求水平居中。將網(wǎng)頁中標題以下的正文,字體設置為“華文行楷”,大小設置為“16”。插入的日期字體設置為“楷體_GB2321”,大小設置為“18”,文字顏色設置為“#FF6600”,且要求水平居中。疑難解析問題1:按Enter鍵換行與按Shift+Enter組合鍵換行時,設置文本居中對齊的效果有何不同?問題2:輸入法為“半角”狀態(tài)時,直接按空格鍵是否也能連續(xù)輸入多個空格?課外拓展實踐1在“個人網(wǎng)站設計”站點中根目錄中創(chuàng)建文件夾“02文本操作”,然后在“02文本操作”文件夾中創(chuàng)建網(wǎng)頁“02.html”,且對該網(wǎng)頁的頁面屬性進行必要的設置。2在網(wǎng)頁02.html中輸入學院系部的介紹信息,插入日期,且要求對文本設置不同的字體、大小和顏色。課后評析第六講圖像操作授課日期班級名稱授課地點教學課題第六講圖像操作課時2學時教學目的靈活地運用圖像來為網(wǎng)頁添加各種效果知識目標(1)掌握圖像的插入方法。(2)掌握圖像屬性的設置方法。(3)掌握圖像與文本混合編排的方法。(4)掌握插入鼠標經(jīng)過圖像的方法,了解插入圖像占位符的方法。能力目標(1)圖像的插入。(2)圖像屬性的設置。(3)圖像與文本混合編排。(4)插入鼠標經(jīng)過圖像。素質(zhì)目標培養(yǎng)學生創(chuàng)新能力和獨立思考能力,并使其具有分析問題、解決問題的能力重點圖像屬性的設置、圖像與文本混合編排難點插入鼠標經(jīng)過圖像的方法、插入圖像占位符課型講授型教學方法采用啟發(fā)示的教學方式循序漸進的講解新課內(nèi)容教學手段多媒體教學教參網(wǎng)頁設計與制作教程人民郵電出版社教學環(huán)節(jié)時間安排1. 復習提問:在半角輸入狀態(tài),怎么樣才能連續(xù)輸入多個空格?52.新課引入通過上次實驗,可看出文本、圖片對頁面的潤色起著主要作用53.知識技能目標說明:介紹本次課要掌握的知識目標84.講解各知識點:具體講述本次課新課內(nèi)容405.課堂實踐:156.問題探討:當我們?yōu)g覽網(wǎng)頁時,常常可以見到網(wǎng)頁題頭有不斷變換的圖像,是怎么實現(xiàn)的呢?57.疑難解析58歸納總結:本次課主要學習了在頁面上插入普通圖像、插入鼠標經(jīng)過圖像的方法;學會設置圖像的屬性;熟練調(diào)整圖像的位置及大小,尤其是在圖文混排時,要能夠很好地將它們對齊。在今后的網(wǎng)頁制作過程中,要能夠靈活地運用圖像來為自己的網(wǎng)頁增添各種效果。49作業(yè)布置3總計90新授內(nèi)容1.圖像概述2圖像操作(1)插入圖像(2)設置圖像屬性(3)編輯圖像3插入相關圖像元素(1)插入“鼠標經(jīng)過圖像”(2)插入導航條(3)插入圖像占位符案例2:我與足球(me.htm)操作步驟:1、 新建或打開網(wǎng)頁1) 打開D:myfootballme.html。2) 把素材ch2中的圖片素材拷到image文件夾中。2、 設置頁面屬性1) 修改/頁面屬性:左、右、上、下邊距都設為02) 背景圖像:bg.jpg3、 設置頭部信息1) 標題輸入:我與足球2) 插入“作者”信息,插入記錄/HTML/文件頭標簽/META/值:author,在“內(nèi)容”中輸入“李小東”,即自己的名字。3) 插入“關鍵字”,插入記錄/HTML/文件頭標簽/關鍵字,輸入“設計開發(fā),教育培訓,圖書出版,關于我們”關鍵字,并以逗號隔開。4) 插入“說明”:“這里是“我與足球”網(wǎng)站”。5) 插入“刷新”6) 查看“代碼”4、 添加頁面元素1) 插入文本:將素材里me.txt文件中的內(nèi)容全部拷貝到me.html。將“我與足球”水平居中,字體設置“華文彩云”,大小24,顏色為#999900,粗體,斜體。2) 插入橫幅圖像:替代文本為“我的足球網(wǎng)”3) 圖文混排:在左邊插入圖像girl.jpg,左對齊,垂直與水平邊距均為10,4) 圖像的編輯:右擊可以借助計算機里有的圖像編輯器來編輯圖像。5) 插入“鼠標經(jīng)過圖像”效果:插入/圖像對象/鼠標經(jīng)過圖像,原始圖像:mtd5,鼠標經(jīng)過圖像:mtd5_26) 插入水平線:插入/HTML/水平線7) 插入/日期8) 插入特殊字符:插入/ HTML/特殊字符版權:最后更新日期:2011年9月2日星期五Copyright 個人網(wǎng)站設計5、 設置超鏈接1) 將光標放到網(wǎng)頁橫幅圖像的下一行,水平居中。2) 輸入“主頁”、“明星照片”、“足球新聞”,將中文輸入法切換到全角方式,按空格鍵,輸入幾個連續(xù)的空格用來間隔文字。3) 選中“主頁”鏈接index.htm,同樣設置其它鏈接。課堂實踐案例:再別康橋1、合理安排圖像與文字的位置。2、利用圖像編輯軟件,完成對圖片的藝術處理。3、右下方的圖片具有鼠標經(jīng)過后翻轉(zhuǎn)成另外一幅圖像的特點。 疑難解析問題1:網(wǎng)頁中的圖文混排時,如何調(diào)整圖像與文字之間的間距?問題2:網(wǎng)頁中圖文混排時,如何創(chuàng)建文字環(huán)繞圖像的效果?課外拓展在“我的足球網(wǎng)”站點文件夾“news”中創(chuàng)建一個網(wǎng)頁文檔“03.html”,內(nèi)容是關于足球新聞,然后插入圖片和文字,實現(xiàn)圖文混排效果。課后評析第七講超級鏈接與導航欄+授課日期班級名稱授課地點教學課題第八講超級鏈接與導航欄課時2學時教學目的(1)掌握創(chuàng)建外部鏈接和內(nèi)部鏈接的操作方法。(2)掌握制作圖像映射的操作方法。(3)掌握創(chuàng)建E-mail鏈接的操作方法。(4)掌握測試鏈接的有效性的操作方法。知識目標(1)創(chuàng)建外部鏈接和內(nèi)部鏈接。(2)制作圖像映射。(3)創(chuàng)建E-mail鏈接。(4)測試鏈接的有效性。能力目標(1)創(chuàng)建常用超鏈接、導航欄素質(zhì)目標培養(yǎng)學生的創(chuàng)新能力與獨立思考能力,并使其具有分析問題、解決問題的能力。重點(1)常用超鏈接的創(chuàng)建方法難點(1)模板課型講授型操作型教學方法邊講、邊練、講練結合教學手段多媒體教學教參網(wǎng)頁設計與制作教程 人民郵電出版社教學環(huán)節(jié)及板書設計時間安排1復習提問鼠標經(jīng)過圖像與導航條有何區(qū)別?22新課引入網(wǎng)頁中的鏈接是怎樣建立的呢?常見的鏈接有哪些?33知識技能目標說明為文字添加字幕效果,創(chuàng)建欄目、腳本、錨點、網(wǎng)站、E-mail、下載鏈接,更改鏈接顏色、打開方式,測試鏈接有效性54詳細講解各知識點455問題探討添加滾動字幕、創(chuàng)建鏈接還有什么方法?56課堂實踐157疑難解析78提問與討論39.課堂小結310.作業(yè)布置2總計90新授內(nèi)容1.超級鏈接概述(1)絕對路徑(2)文檔目錄相對路徑(3)站點根目錄相對路徑2.創(chuàng)建超級鏈接創(chuàng)建站點和主頁(1)新建網(wǎng)頁(2)編輯網(wǎng)頁(3)創(chuàng)建超級鏈接:創(chuàng)建外部鏈接、創(chuàng)建文本形式的內(nèi)部鏈接、制作圖像映射、創(chuàng)建E-mail鏈接(4)鏈接檢查:3導航欄簡介課堂案例3:編織網(wǎng)站鏈接足球新聞(news.htm)操作步驟:1、 準備網(wǎng)頁內(nèi)容1) 將素材ch3news.htm文檔復制到站點的news文件夾下,取代原來所創(chuàng)建的news.htm文檔。2) 將素材ch3image文件夾下所有文件,復制到站點的image文件夾下。2、 創(chuàng)建內(nèi)部超鏈接內(nèi)部鏈接指網(wǎng)站內(nèi)部頁面之間創(chuàng)建的相互鏈接關系。A. 選中news.htm中“首頁”,鏈接index.htm,目標:_blank。B. 用同樣的方法,可創(chuàng)建“我與足球”、“明星照片”的鏈接。3、 創(chuàng)建外部鏈接以http:/開頭的,稱為絕對地址。選中文字或圖像之后,直接在屬性面板的“鏈接”文本框中輸入外部的鏈接地址,如選中“世界杯新聞的條目”http:/www.ffire.net4、 創(chuàng)建E-mail鏈接選中“聯(lián)系我們”,輸入鏈接:mailto:gy123163.com5、 創(chuàng)建錨點鏈接是指同一個頁面中的不同位置鏈接。1)創(chuàng)建命名錨記將光標定位在要設置標記的位置,插入欄命名錨記輸入錨記名稱(注意:區(qū)分大小寫)2)創(chuàng)建到命名錨記的鏈接選擇要創(chuàng)建鏈接的文本或圖像在屬性面板的鏈接文本框中,鍵入號和錨記名稱或在瀏覽對話框中,選中要鏈接的文件后加和錨記名稱。C. 依次創(chuàng)建頁中標題的命名錨記如下:鏈接按鈕錨記足壇綜合新聞zh英超新聞yc意甲新聞yj德甲新聞dj西甲新聞xj法甲新聞fj冠軍杯新聞gjb聯(lián)盟杯新聞lmb世界杯新聞sjb6、 創(chuàng)建下載鏈接將素材中a1.zip文件復制到站點中,選中“資源下載”,鏈接“a1.zip”。7、 創(chuàng)建空鏈接選中要制作空鏈接的對象,在鏈接文本框中直接輸入。8、 創(chuàng)建跳轉(zhuǎn)菜單下方友情鏈接創(chuàng)建1)插入欄表單跳轉(zhuǎn)菜單2)在“插入跳轉(zhuǎn)菜單”對話框中,單擊號添加菜單項3)在“選擇時。轉(zhuǎn)到URL”文本框中,輸入該文件的路徑。http:/sports.com.cn國際足球http:/www.espnstar.com.cn中文網(wǎng)http:/www.chinesewings.com華翼網(wǎng)http:/www.soccerchina.com多來米中文網(wǎng)http:/www.miqiu.com迷球網(wǎng)9、 創(chuàng)建“圖像地圖”1)選中“地圖”圖像2)在圖像屬性面板中,使用熱區(qū)工具(矩形、橢圓、多邊形),在圖像上劃分熱區(qū)。3)為繪制的每一個熱區(qū)設置不同的鏈接地址“http:/www.espnstar.com.cn”和替代文字“ESPNSTAR中文網(wǎng)”。課堂實踐1) 打開課堂實戰(zhàn)文件夾ch3/3-02.html,在頁面下方的“小屋”圖片上,創(chuàng)建返回首頁的超鏈接;2) 創(chuàng)建“與我聯(lián)系”的Email超鏈接;3) 創(chuàng)建“關于我”的空鏈接;4) 創(chuàng)建頁面上方圖片中個個小圓的熱點鏈接(圖像地圖) 疑難解析問題1:如何鏈接到網(wǎng)頁文檔中的特定位置?問題2:如何在網(wǎng)頁中創(chuàng)建文件下載鏈接?課外拓展實踐1在“個人網(wǎng)站設計”站點文件夾“10超級鏈接”中創(chuàng)建網(wǎng)頁文檔“10.html”。2為該網(wǎng)頁的上部導航欄和底部導航欄設置超級鏈接。作業(yè)嘗試用其他方法實現(xiàn)字幕、超鏈接課后評析第八講使用表格布局網(wǎng)頁授課日期班級名稱授課地點教學課題第七講使用表格布局網(wǎng)頁課時2學時教學目的1學會添加表格、設置表格屬性。2掌握設置表格中行和列屬性的方法。3掌握拆分單元格,合并單元格的方法。4掌握在表格中輸入文字并定位的方法。5掌握在表格中插入圖像并定位的方法。知識目標1添加表格、設置表格屬性。2設置表格中行和列屬性的方法。3拆分單元格,合并單元格的方法。4在表格中輸入文字并定位的方法。5在表格中插入圖像并定位的方法。能力目標熟練記住用表格布局網(wǎng)頁的操作要點素質(zhì)目標培養(yǎng)學生創(chuàng)新能力和獨立思考能力,并使其具有分析問題、解決問題的能力重點表格的基本操作、表格及單元格的屬性設置難點利用表格布局頁面的技巧和方法課型講授型教學方法采用啟發(fā)示的教學方式循序漸進的講解新課內(nèi)容教學手段多媒體教學教參網(wǎng)頁設計與制作教程人民郵電出版社教學環(huán)節(jié)時間安排1. 復習提問:在新窗口打開鏈接頁,需要將鏈接目標的打開方式設置為什么?52.新課引入表格是常用的頁面元素,制作網(wǎng)頁經(jīng)常要借助表格進行排版,在網(wǎng)頁布局方面,表格可謂起著舉足輕重的作用,通過設置表格以及單元格的屬性,對頁面中的元素進行準確定位,表格能夠有序地排列數(shù)據(jù)又能對頁面進行更加合理的布局。靈活地使用表格的背景、框線等屬性可以得到更加美觀的效果。53.知識技能目標說明:介紹本次課要掌握的知識目標84.講解各知識點:具體講述本次課新課內(nèi)容455.課堂實踐:了解學生對知識點的掌握情況156.疑難解析:7.問題探討:與學生一起引申問題留作思考58.歸納總結:本次課主要學習了表格的創(chuàng)建方法,表格及單元格的基本操作,設置表格及單元格的屬性,格式化表格的方法;要學會應用表格技術對網(wǎng)頁中的各個對象進行定位,并通過表格在網(wǎng)頁上更直觀、更有條理地顯示各類信息。49.作業(yè)布置3總計90新授內(nèi)容1.認識表格:表格的組成元素、表格的應用2表格的基本操作(1)新建網(wǎng)頁(2)插入表格(3)選擇表格和表格元素(4)設置表格及單元格的屬性(5)調(diào)整表格的結構(6)在表格中輸入文本和插入圖像(7)重新設置表格的邊框,保存網(wǎng)頁,且在瀏覽器中預覽效果案例4:創(chuàng)建網(wǎng)站相冊(初識表格)足球明星頁面(photo.htm)操作步驟:1、 創(chuàng)建網(wǎng)站像冊 方法:1) 將需制作相冊的圖片放在源圖像文件夾ch4/img中,同時建立一個空目標文件夾photo,用來存放系統(tǒng)生成的圖片和文件。2) 執(zhí)行 “命令|創(chuàng)建網(wǎng)站相冊”命令 3) 在【創(chuàng)建網(wǎng)站相冊】對話框中輸入相應的參數(shù),即可。 相冊標題:足球明星副標信息:2009版源圖像文件夾:素材/ch4/img目標文件夾:d:/myfootball/photo/縮略圖:100100列:5縮略圖格式:JPEG-較高品質(zhì)選擇為每張相片建立導覽頁面2、 網(wǎng)站相冊的修改 1) 選擇“頁面屬性”,可以進行文字、背景、顏色:#009900,以及表格的一些修改。2) 標題文字:標題1,居中,#ffff00,字體:華文彩云,大小:36像素3) 定位在每一幅圖片下面,改為每位球星的名字,(在素材ch4文件夾下的文本文件中提供)。4) 拖動光標選中整個頁面的文字,設置文字顏色:#CC6600。3、 相冊表格的美化 1) 選擇“命令|格式化表格”命令。 2) 設置如下:行顏色,第一行,最左列,邊框等。3) 在標題和圖片表格之間插入一行五列表格,寬度為600px,分別制作網(wǎng)站各頁的鏈接。課堂實踐案例:我的第一頁(1)打開“實戰(zhàn)演練”文件夾ch4。(2)利用表格布局網(wǎng)頁04.html的頁面。(3)用表格布局(4)插入網(wǎng)頁元素(5)初識CSS樣式疑難解析問題1:Dreamweaver CS3提供了一些事先設計好的表格外觀樣式,如何讓網(wǎng)頁中的表格套用這些表格外觀樣式?問題2:網(wǎng)頁中的表格除了用于布局網(wǎng)頁外,還可以存儲數(shù)據(jù),如何對表格中的數(shù)據(jù)象Excel表一樣進行排序操作呢?問題3:怎樣向網(wǎng)頁中導入外部Excel文件中的數(shù)據(jù)和文本格式文件中的數(shù)據(jù)呢?問題4:怎樣將網(wǎng)頁中表格內(nèi)的數(shù)據(jù)輸出為數(shù)據(jù)文件?課外拓展實踐1在“個人網(wǎng)站設計”站點文件夾“04表格布局”中創(chuàng)建網(wǎng)頁“04.html”,對該頁面進行表格進行布局。課后評析第九講使用布局網(wǎng)頁布局網(wǎng)頁授課日期班級名稱授課地點教學課題第八講使用布局表格布局網(wǎng)頁課時2學時教學目的(1)掌握切換視圖的操作方法。(2)掌握繪制布局表格的操作方法(3)掌握繪制布局單元格、移動布局單元格的操作方法(4)掌握調(diào)整布局表格大小和布局單元格大小的操作方法(5)掌握布局表格和布局單元格的屬性設置方法知識目標(1)切換視圖。(2)繪制布局表格(3)繪制布局單元格、移動布局單元格(4)調(diào)整布局表格大小和布局單元格大?。?)布局表格和布局單元格的屬性設置能力目標熟記布局表格及布局單元格的使用方法素質(zhì)目標培養(yǎng)學生創(chuàng)新能力和獨立思考能力,并使其具有分析問題、解決問題的能力重點布局表格與布局單元格的使用方法難點布局表格與布局單元格屬性的設置課型講授型教學方法采用啟發(fā)示的教學方式循序漸進的講解新課內(nèi)容教學手段多媒體教學教參網(wǎng)頁設計與制作教程人民郵電出版社教學環(huán)節(jié)時間安排1 復習提問:表格中單元格的邊距與間距有何區(qū)別?52新課引入通過學習文本布局網(wǎng)頁、圖像布局網(wǎng)頁、表格布局網(wǎng)頁,可看出頁面布局非常重要,本次將主要學習Dreamweaver提供的布局工具布局表格53知識技能目標說明:介紹本次課要掌握的知識目標84講解各知識點:具體講述本次課新課內(nèi)容405課堂實踐:了解學生對知識點的掌握情況156疑難解析:57問題探討:與學生一起引申問題留作思考58.歸納總結:本次課主要學習了布局表格和布局單元格的使用方法,可以像使用層一樣在頁面上直接畫一個或多個布局表格或布局單元格,并且可以任意拖動單元格。使用布局視圖制作網(wǎng)頁就像畫畫一樣輕松。49作業(yè)布置3總計90新授內(nèi)容1.布局視圖方式2.布局表格的基本操作(1)新建網(wǎng)頁(2)切換視圖到布局視圖模式(3)繪制布局表格和布局單元格(4)選擇布局表格和布局單元格(5)調(diào)整布局表格和布局單元格的大小(6)移動布局單元格(7)設置布局表格和布局單元格的屬性案例41:應用表格布局頁面(page.htm)操作步驟:1、 設計頁眉區(qū)1)T1:33表寬778,居中對齊2)頁面屬性:左、上邊距均為03)將第1列3個單元格,第2列3個單元格合并。4)可插入固定大小占位符,以方便排版。第1列插入1個占位符,16771,第2列插入1個占位符,49971加入收藏聯(lián)系我們設為首頁網(wǎng)頁廣告圖像網(wǎng)站Logo圖標1677149971默認2、 設計導航欄區(qū)1) T 2:217表,寬778,其它為02) 欄目間的分隔符用,也可用其他特殊符號。3) 第二行用于間隔。|主站首頁|站長簡介|音樂古堡|BEYOND|星爺專輯|友情鏈接|給我留言|瘋狂下載|3、 設計信息區(qū)1) T3:13表,寬778,其它為0,各單元格的寬度分別設為181、411、1562) 設置左右內(nèi)容區(qū)a) T31:21表,寬100%,表格邊框為1,白色,垂直對齊:頂端。b) 第1格高15,第2格高163,單元格邊框為1,綠色(細邊框色)。c) 第1格:背景圖像,輸入欄目名“你的欄目”。d) 第2格:輸入欄目的具體內(nèi)容e) 復制T31表至右內(nèi)容區(qū)即第3列。4、 設計主內(nèi)容區(qū).1) T32:23表,寬100%,邊框為0,邊距為0,間距為0,垂直對齊:頂端。2) 第一行:設置各單元格背景圖像,輸入欄目名稱3) 第二行:合并第二行a) T321:在第二行插入11表,寬100%,邊框為1,白色,單元格邊框為1,綠色。b) 拆分T321為2列,第一列輸入具體內(nèi)容,第二列設置132145的圖像占位符。c) 復制和T32表,更名,并添加內(nèi)容提示:如果上述操作沒有將間距與屬性設為0,則表格的單元格與單元格之間出現(xiàn)一定的距離,不能實現(xiàn)插入背景圖像后無縫的結合。5、 設計版權區(qū)1)T4:21表,寬778,邊框為0,邊距為0,間距為0a) 第一行:切換到“代碼”視圖,刪除代碼 ,插入水平線:1像素的細線。b) 第二行:輸入相關版本信息:版權所有:Copyright ? 2003-2005 All rights reserved網(wǎng)頁制作:山西信息職業(yè)技術學院E-mail:qdgzy163.com郵編:266061建議使用800600分辨率課堂實踐操作要求(1)打開“課堂實踐”網(wǎng)站文件夾“05布局表格”中的網(wǎng)頁文檔“05.html”。(2)利用布局表格布局網(wǎng)頁05.html的頁面元素。(3)繪制一個較大的布局表格A,然后在布局表格A中再繪制兩個布局表格B、C,B和C布局表格上下排列。(4)在布局表格B中繪制1個布局單元格,在布局表格C中繪制6個布局單元格。(5)分別在各個布局單元格中輸入文字和插入圖像。疑難解析問題1:布局表格中的列可以設置為自動伸展或固定寬度兩種方式,“自動伸展”列有何特點?網(wǎng)頁實際布局時如何應用自動伸展的列?問題2:布局表格中的間隔圖像有什么作用?課外拓展實踐1在“個人網(wǎng)站設計”站點文件夾“05布局表格”中創(chuàng)建網(wǎng)頁文檔“05.html”。2利用“普通表格”和“布局表格”相結合的方式布局網(wǎng)頁。課后評析第十講使用層布局網(wǎng)頁授課日期班級名稱授課地點教學課題第十講使用層布局網(wǎng)頁課時2學時教學目的(1)掌握如何描繪層和插入層、如何選擇層和激活層。(2)掌握層的屬性設置方法、如何調(diào)整層的大小和位置。(3)掌握在層中輸入文本和插入圖像的方法。(4)掌握嵌套層的創(chuàng)建。(5)了解層與表格之間的相互轉(zhuǎn)換方法。知識目標(1)能夠熟練用層技術來對網(wǎng)頁進行排版能力目標(1)描繪層和插入層、選擇層和激活層。(2)層的屬性設置、調(diào)整層的大小和位置。(3)在層中輸入文本和插入圖像。(4)嵌套層的創(chuàng)建。(5)層與表格之間的相互轉(zhuǎn)換。素質(zhì)目標培養(yǎng)學生的創(chuàng)新能力與獨立思考能力,并使其具有分析問題、解決問題的能力。重點(1)掌握層的創(chuàng)建與屬性設置難點(1)掌握層的創(chuàng)建與屬性設置課型講授型操作型教學方法邊講、邊練、講練結合教學手段多媒體教學教參網(wǎng)頁設計與制作教程 人民郵電出版社教學環(huán)節(jié)及板書設計時間安排1復習提問布局表格中的間隔圖像有什么作用?22新課引入層是制作網(wǎng)頁時經(jīng)常用到的對象,在控制頁面布局方面,層要比表格更加的靈活,層體現(xiàn)了網(wǎng)頁技術從二維空間向三維空間的一種延伸,也是一種新的發(fā)展方向。Dreamweaver CS3中,層和表格可以互相轉(zhuǎn)換。33知識技能目標說明層的出現(xiàn)為網(wǎng)頁設計提供了更多的選擇和更快捷的途徑54講解各知識點:具體講述本次課新課內(nèi)容455課堂實踐:了解學生對知識點的掌握情況156問題探討如何應用層技術將對象完全貼合頁邊緣(不留一點空隙)?57疑難解析:78課堂小結59.作業(yè)布置3總計90新授內(nèi)容1認識層(1)層的概念(2)應用層布局網(wǎng)頁的特點2層的基本操作(1)新建網(wǎng)頁(2)創(chuàng)建層(3)選擇層與激活層(4)設置層的屬性(5)調(diào)整層的大小和位置(6)層的嵌套(7)在層中輸入文本和插入對象(8)層和表格的相互轉(zhuǎn)換案例5:制作層布局頁面環(huán)游世界(hysj.htm)操作步驟:1、 新建頁面,標題這“環(huán)游世界”。2、 “插入”面板組“布局”類別,單擊“繪制層”,在文檔窗口中繪制一個層layer1。3、 將光標置于層內(nèi),插入ch5/ 1.jpg,如果圖片很大,在“屬性”將其寬度設置為250,高度設置為1504、 選中層,在“屬性”中設置其精確位置,分別為左:70,上:40,寬:250,高150,以精確定位。5、 插入層layer2,插入ch5/ 2.jpg,在“屬性”將其寬度設置為250,高度設置為150, 精確位置,分別為左:180,上:250,寬:150,高1506、 插入層layer3,插入ch5/ 3.jpg,在“屬性”將其寬度設置為250,高度設置為150, 精確位置,分別為左:330,上:250,寬:260,高1507、 改變層的疊放順序,單擊層layer2,將其Z值變?yōu)?,將laywr1編號變?yōu)?,layer3編號不變。8、 再插入層layer4,寬度與高度為67px,內(nèi)輸入“環(huán)”,大小60px。9、 繼續(xù)插入其它層,并分別輸入“游”、“世”、“界”。課堂實踐操作要求(1)打開“課堂實踐”網(wǎng)站文件夾“06層的布局”中的網(wǎng)頁文檔“06.html”。(2)利用層布局網(wǎng)頁06.html的頁面。(3)繪制一個較大的層Layer0,然后在層Layer0中再繪制5個子層Layer1、Layer2、Layer3、Layer4。(4)分別層Layer1、Layer2、Layer3、Layer4中輸入文字或插入圖像。疑難解析問題1:在頁面中有多個層,如何將它們對齊?答:使用層對齊命令可利用最后一個選定層的邊框來對齊一個或多個層。對齊多個層的操作方法是:先選中頁面中的多個層,然后單擊菜單【修改】【排列順序】,在“排列順序”的級聯(lián)菜單中選擇一種對齊方式即可對齊。例如,如果選擇“左對齊”,所有層都會將它們的左邊框與最后一個選定層的左邊框?qū)R。問題2:對于網(wǎng)頁中多個嵌套的層,如何更改層的疊放順序?答:使用層的“屬性”面板或“層”面板均可以更改層的疊放順序?!皩印泵姘逯刑幱诹斜眄敳康膶訉⑽挥诏B放順序的頂部,并且會出現(xiàn)在其他層之前。在“層”面板中更改層的疊放順序的操作方法是:先打開“層”面板,然后將層向上或向下拖至所需的疊放順序。當移動層時會出現(xiàn)一條線,它指示該層將出現(xiàn)的位置。當放置線出現(xiàn)在層疊順序中的所需位置時,釋放鼠標按鈕即可。利用層的“屬性”面板更改層的疊放順序的操作方法是:先打開“層”面板以查看頁面所有層的當前疊放順序;然后在“層”面板或“文檔”窗口中選擇一個層,在層的“屬性”面板中,在Z軸文本框中輸入一個編號。輸入一個較大的數(shù)字可將該層在層疊順序中上移;輸入一個較小的數(shù)字可將該層在層疊順序中下移。課外拓展實踐1在“個人網(wǎng)站設計”站點文件夾“06層的布局”中創(chuàng)建網(wǎng)頁文檔“06.html”。2利用“普通表格”和“層”相結合的方式布局網(wǎng)頁。作業(yè)課后評析第十一講使用框架布局網(wǎng)頁授
收藏
編號:20310568
類型:共享資源
大?。?span id="ghnjqlk" class="font-tahoma">553.79KB
格式:ZIP
上傳時間:2021-03-06
10
積分
- 關 鍵 詞:
-
網(wǎng)頁設計與制作DreamWeaver
網(wǎng)頁
設計
制作
dreamweaver
教案
- 資源描述:
-
《網(wǎng)頁設計與制作DreamWeaver》教案,網(wǎng)頁設計與制作DreamWeaver,網(wǎng)頁,設計,制作,dreamweaver,教案
展開閱讀全文
- 溫馨提示:
1: 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2: 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
3.本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 裝配圖網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
裝配圖網(wǎng)所有資源均是用戶自行上傳分享,僅供網(wǎng)友學習交流,未經(jīng)上傳用戶書面授權,請勿作他用。