版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
案課程網(wǎng)頁制作2016——2017學(xué)年第一學(xué)期班級計(jì)算機(jī)應(yīng)用二年級教師胡發(fā)萍
課時進(jìn)度表周次教學(xué)內(nèi)容1第一章網(wǎng)頁制作基礎(chǔ)2第一章網(wǎng)頁制作基礎(chǔ)3第二章DreamWeaverMX入門4第二章DreamWeaverMX入門5第三章網(wǎng)頁的布局和定位6網(wǎng)頁的布局和定位7第四章網(wǎng)頁版面設(shè)計(jì)與制作8第四章網(wǎng)頁版面設(shè)計(jì)與制作9復(fù)習(xí)10期中考試11第五章網(wǎng)頁動畫設(shè)計(jì)與制作12第五章網(wǎng)頁動畫設(shè)計(jì)與制作13第六章網(wǎng)站鑒賞與設(shè)計(jì)14第六章網(wǎng)站鑒賞與設(shè)計(jì)15第七章網(wǎng)頁動態(tài)效果的制作16第七章網(wǎng)頁動態(tài)效果的制作17第八章網(wǎng)頁動態(tài)效果的制作18第八章網(wǎng)頁動態(tài)效果的制作19復(fù)習(xí)20期終考試
網(wǎng)頁制作全冊備課總課時96課時任課教師曾玉洪教材分析本書以初學(xué)者和專業(yè)網(wǎng)頁制作人員為教學(xué)對象,以怎樣建立一個網(wǎng)站,怎樣才能自設(shè)計(jì)出一個精美出色的網(wǎng)站,學(xué)生制作網(wǎng)頁應(yīng)該從哪兒入手,應(yīng)該學(xué)會哪些制作網(wǎng)站的技術(shù)入手,主要以介紹靜態(tài)網(wǎng)頁為主,采用實(shí)例教學(xué)的方式,向?qū)W生講解如何使用DreamWeaver網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁的制作與開發(fā)。教材重點(diǎn)第二章DreamWeaverMX入門第三章網(wǎng)頁的布局和定位第四章快速建站技術(shù)第五章用FLASH加工美化網(wǎng)頁第六章用PS處理網(wǎng)頁圖片第七章網(wǎng)站設(shè)計(jì)第八章網(wǎng)頁動態(tài)效果的制作教材難點(diǎn)第二章DreamWeaverMX入門第三章網(wǎng)頁的布局和定位第四章快速建站技術(shù)第五章用FLASH加工美化網(wǎng)頁第六章用PS處理網(wǎng)頁圖片教學(xué)方法講授—一多媒體演示一教學(xué)一體化一操作學(xué)生情況分析學(xué)生們大都是初中畢業(yè)生,在學(xué)校里對計(jì)算機(jī)已經(jīng)學(xué)習(xí)了一年半,學(xué)生對網(wǎng)頁制作比較有興趣,都能完成一些簡單的操作。教改及實(shí)施措施在多媒體教室或機(jī)房進(jìn)行教學(xué),本書每章開頭給出“學(xué)習(xí)目標(biāo)”有利于讀者明確學(xué)習(xí)目的,每章結(jié)尾的“小結(jié)”幫助學(xué)生掌握本章的知識和技能。1、上課時邊操作邊講解,讓學(xué)生們對每一部分知識點(diǎn)都能理解和掌握。2、讓學(xué)生們多操作。網(wǎng)頁制作第一章備課網(wǎng)頁制作第一章備課單元課時6課時單元分析第一章設(shè)計(jì)與規(guī)劃“數(shù)碼資訊網(wǎng)”一網(wǎng)站規(guī)劃及站點(diǎn)建立,介紹WWW服務(wù)的概念,明確網(wǎng)站主題的內(nèi)容,利用dreamweavercs6建立“數(shù)碼資訊網(wǎng)”站點(diǎn),并制作一個簡單的網(wǎng)頁進(jìn)行保存。知識目標(biāo)了解WWW服務(wù)的由來、概念和原理規(guī)劃與設(shè)計(jì)網(wǎng)站認(rèn)識dreamweavercs6創(chuàng)建站點(diǎn)制作簡單的網(wǎng)頁技能目標(biāo)認(rèn)識dreamweavercs6創(chuàng)建站點(diǎn)教材重點(diǎn)創(chuàng)建站點(diǎn)制作簡單的網(wǎng)頁教材難點(diǎn)創(chuàng)建站點(diǎn)制作簡單的網(wǎng)頁教學(xué)方法講授、多媒體演示、操作學(xué)生學(xué)習(xí)情學(xué)生們上課時能認(rèn)真聽、但由于沒有書,所以下況去后對一些理論知識不能很好的掌握,只能通過上記一點(diǎn)筆記看一看。.課教改及實(shí)施布置一些小任務(wù),在操作課上完成,一步一步加措施深內(nèi)容,提高學(xué)生的操作能力。班級計(jì)算機(jī)二年級課時1、2課題第1章網(wǎng)頁制作基礎(chǔ)1.1WWW服務(wù)與超連接教學(xué)目標(biāo)了解WWW服務(wù)的由來、概念和原理了解什么是超文本鏈接和超媒體鏈接教學(xué)重點(diǎn)WWW服務(wù)與超鏈接教學(xué)難點(diǎn)WWW服務(wù)與超鏈接教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:DreamweaverMX簡介1Dreamweaver是美國Macromedia公司開發(fā)的集網(wǎng)頁制作和網(wǎng)站設(shè)計(jì)于一體的所見即所得站點(diǎn)開發(fā)工具。2供專業(yè)網(wǎng)頁設(shè)計(jì)人員使用3最新版本本章任務(wù)A、介紹WWW服務(wù)的概念、由來和原理B、介紹超鏈接的相關(guān)概念C、介紹網(wǎng)站和網(wǎng)頁的概念及相互關(guān)系D、網(wǎng)頁HTML語言的簡單介紹和跑馬燈效果的制作E、網(wǎng)站制作與發(fā)布的常用軟件一、什么是WWW服務(wù)WWW服務(wù)于1990年由設(shè)立在歐洲瑞士的粒子物理研究中心開發(fā)研制出來。其最初的目的是更方便地為分布在世界各地的物理學(xué)研究提供信息服務(wù),使組內(nèi)成員可以方便地通過INTERNET交換信息可想法。WWW是WorldWideWeb的縮寫,其含義是“全球網(wǎng)”或“萬維網(wǎng)”萬維網(wǎng)簡稱WWW或3W,是目前Internet(因特網(wǎng))上最流行的一種基于超文本形式的資源信息。萬維網(wǎng)的最大好處是它將全世界的各種信息鏈接在一起,用戶可通過網(wǎng)絡(luò)無償?shù)卦L問這些資源并加以利用。WWW在服務(wù)上采用的是客戶機(jī)/服務(wù)器模式,信息資源以一種用超文本語言編寫的Web頁形式存儲在Web服務(wù)器中。這些Web頁面信息既能同時存放在同一臺Web服務(wù)器上,也能分開存放在不同的Web服務(wù)器上,頁面之間通過一種被稱為超鏈接的方式相互連接起來。WWW工作原理示意圖P2所示二、超鏈接超鏈接包括兩類超鏈接:超文本鏈接和超媒體鏈接。超文本鏈接是利用超文本W(wǎng)eb頁面之間進(jìn)行跳轉(zhuǎn)。所謂超文本就是WWW服務(wù)的信息組織形式,它與普通文本的區(qū)別在于,它在普通文本中包含了可以鏈接到其他文本的特殊文字。
通過上面的講解,下面我們從一些網(wǎng)頁上觀察一些超鏈接及區(qū)別登錄名r密碼廠選擇卻!飛袤'任用通行應(yīng)找回密碼客服幫助企業(yè)郵箱’5西亍多云日寸?’5西亍多云日寸?-57新卸軍事社自財(cái)嶷牘票基金科技手機(jī)敷瑪儡有NBi彩迪黑樂明星音樂行車購?fù)踯嚳詹┛臀⒕诟暭俅羁痛笃慨a(chǎn)地產(chǎn)家居逢花城肓犍康女性星座盲兒樂庫尚品碗空ra部箱出臼1曲用相冊VC,交友游涉VI1金科上手拿地賀歲片天津樓市前行動力中央定調(diào)房地產(chǎn)走向1即萬人住別整社區(qū)金科上手拿地賀歲片天津樓市前行動力中央定調(diào)房地產(chǎn)走向1即萬人住別整社區(qū)三亞財(cái)胃海灣開盤燕莎7折搶塔亞運(yùn)的大疇裝廣渠路地壬皺改規(guī)劃制鯉東四環(huán)小戶型開盤!海航三亞柏國去館去眥09年第十一居住交龕0909年第十一居住交龕09年正地產(chǎn)新聞評選09地產(chǎn)界的3的天09十九地產(chǎn)越言由深圳十大捂盤項(xiàng)目09旅H林市紀(jì)念冊金■園五號雪嚕瓦?舞奧兩居,B銅百套買宅打拓里程跟蹤購序信心全國調(diào)職遢迪出產(chǎn)左人哀人挎史定調(diào)已門口該行走向迪拜土松后式危出產(chǎn)左人哀人挎史定調(diào)已門口該行走向迪拜土松后式危R£匚門花云,K丹北尼苗鏈怎看土A大?重慶城打開該網(wǎng)頁進(jìn)行比較講解最后留一步分時間讓同學(xué)們一些好的網(wǎng)頁進(jìn)行瀏覽如:課后記:由于同學(xué)們都沒有書,這節(jié)課的內(nèi)容比較少,同學(xué)們都能很好的掌握。
班級計(jì)算機(jī)二年級課時3、4課題1.2什么是網(wǎng)頁與網(wǎng)站教學(xué)目標(biāo)了解什么是網(wǎng)頁、什么是網(wǎng)站,網(wǎng)頁和網(wǎng)站的關(guān)系了解網(wǎng)頁的種類和網(wǎng)頁的基本元素,HTML語言及HTML語言的格式學(xué)會編寫源代碼來制作一些簡單的網(wǎng)頁教學(xué)重點(diǎn)HTML語言及HTML語言的格式編寫源代碼來制作一些簡單的網(wǎng)頁教學(xué)難點(diǎn)HTML語言及HTML語言的格式編寫源代碼來制作一些簡單的網(wǎng)頁教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:使用瀏覽器在Interner上瀏覽各類網(wǎng)站和網(wǎng)頁,已經(jīng)成為人們通過Interner了解社會的一種重要手段。但什么是網(wǎng)頁,什么是網(wǎng)站呢,網(wǎng)頁與網(wǎng)站又有什么關(guān)系?這就是本節(jié)要講解的內(nèi)容。一、什么是網(wǎng)頁網(wǎng)頁是WWW中的基本文檔,是用HTML(HypertextMarkupLanguage,超文本標(biāo)記語言)或者其他語言Javascripr、VBScript、ASP、JSP、PHP或XML等)編寫的文檔,該文檔可以用WWW的方式在網(wǎng)上傳播,并被瀏覽器識別、翻譯成WEB頁面形式顯示出來。網(wǎng)頁一般分為兩大類:一類是靜態(tài)網(wǎng)頁(擴(kuò)展名為htm、html等);另一類是動態(tài)網(wǎng)頁(擴(kuò)展名為asp、aspx、jsp、php、cgi)不管是靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁,網(wǎng)頁一般包含以下幾種基本元素:(1)文本:文本是網(wǎng)頁最基本的元素,網(wǎng)頁上大量的內(nèi)容都是用文字來表達(dá)的,而且由于文字所占的空間非常小,下載速度非??欤栽诰W(wǎng)頁中應(yīng)用非常廣泛。(2)圖像:圖像是網(wǎng)頁中必不可少的另一種元素。在網(wǎng)頁里經(jīng)常使用的圖像格式有GIF和JPEG兩種。(3)多媒體元素:網(wǎng)頁中的多媒體元素有許多種,常用的有三種:音頻、視頻和動畫。常用音頻格式(WAV和MIDI音樂文件),常用的視頻格式有出乂、AVI、WMV等格式)常用的動畫文件有FLASH動畫(SWF格式)和GIF格式。(4)超鏈接:網(wǎng)頁中的最具特色的功能(5)腳本程序:是用于擴(kuò)充網(wǎng)頁功能而能在網(wǎng)頁上直接解釋的程序語言,常用的有顯示訪問的時間、讓文字在屏幕上滾動等。二、什么是網(wǎng)站網(wǎng)站就是許多相關(guān)網(wǎng)頁有機(jī)結(jié)合而形成的一個信息服務(wù)中心。在WWW上,信息是通過一個個網(wǎng)頁呈現(xiàn)出來的。是用戶在瀏覽器上看到」的一個個畫面。三、HTML語言簡介HTML是超文本標(biāo)記語言。WWW服務(wù)中的網(wǎng)頁要讓使用不同計(jì)算機(jī)和操作系統(tǒng)的用戶都能瀏覽,就必須有一套統(tǒng)一的編寫標(biāo)準(zhǔn)。HTML就是用于編寫網(wǎng)頁的統(tǒng)一的語言規(guī)范。用HTML語言制作網(wǎng)頁,一般有兩種方法:一是使用記事本之類的工具,輸入HTML標(biāo)記和網(wǎng)頁的內(nèi)容進(jìn)行直接編寫,然后保存在以html或htm為擴(kuò)展名的網(wǎng)頁文件;另一種方法是使用可視化的網(wǎng)頁制作工具,自動生成HTML代碼。例:我的第一個網(wǎng)頁執(zhí)行菜單的“開始”一“程序”一“附件”一“記事本”將以下代碼完整正確地輸入到記事本軟件中:<html><head><title>歡迎大家光臨</title></head><body><p>這是我用記事本編寫的第一個網(wǎng)頁,<fontsize=+7color=red>歡迎光臨!</font></p></body></html>執(zhí)行菜單的“文件”一“另存為”存時注意必須加上擴(kuò)展名.htm或.html。雙擊打開剛才保存的文件。哥歐迎人穿光臨-KicroscrttInternetExplorer文件口霸輯?登看娜⑥工具?幫助凹o(jì)后退▼。團(tuán)團(tuán)心戶搜索大限夾0出心畫▼口地址?回口:Macknp%我的攵若U.htnl這是我用記事本編寫的第一個網(wǎng)貝,歡迎尤伯作業(yè):同學(xué)們現(xiàn)在做出這樣的一個網(wǎng)頁。課后記:通過案例的制作,同學(xué)們都能做出來,同學(xué)們的學(xué)習(xí)興趣有了一定的提高。班級計(jì)算機(jī)二年級課時5、6
課題1.2.3HTML語言1.3常用的網(wǎng)頁設(shè)計(jì)工具教學(xué)目標(biāo)學(xué)會用源代碼方式編寫跑馬燈效果了解網(wǎng)頁制作所需的常用工具有哪些及在網(wǎng)頁制作中的用途教學(xué)重點(diǎn)用源代碼方式編寫跑馬燈效果教學(xué)難點(diǎn)用源代碼方式編寫跑馬燈效果教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:我們在上節(jié)課中制作了個簡單的網(wǎng)頁,我們來看一個這個網(wǎng)頁源代碼的格式。一HTML語言1、標(biāo)記的寫法:HTML語言中所有的標(biāo)記都要加括號<>括起來,如<P>,括號中的標(biāo)記字母不用區(qū)別大小寫,。與標(biāo)記中間不能用空格隔開。2、標(biāo)記的類型:HTML語言中的標(biāo)記可以分為兩類:對稱標(biāo)記和單獨(dú)標(biāo)記對稱標(biāo)記中的HTML標(biāo)記是對稱的,表示方式是:〈標(biāo)記>內(nèi)容</標(biāo)記>。其中〈標(biāo)記>稱為起始標(biāo)記,表示某種格式功能的開始,而后面的</標(biāo)記>稱為結(jié)束標(biāo)記,表式這種格式功能的結(jié)束,對稱必須首尾呼應(yīng),有頭有尾,對稱標(biāo)記允許相互嵌套,但不能交叉嵌套?!礃?biāo)記〉〈標(biāo)記〉〈/標(biāo)記〉〈/標(biāo)記〉單獨(dú)標(biāo)記中的HTML標(biāo)記是不成對的,表示方法是:<標(biāo)記>,標(biāo)記中只有起始標(biāo)記沒有結(jié)束標(biāo)記。如<BR>標(biāo)記的作用是換行。3、文件標(biāo)記A、所有的HTML文件都必須用特定的標(biāo)記<HTML>起始,表示這是個網(wǎng)頁文件,網(wǎng)頁內(nèi)容一直持續(xù)到</HTML>標(biāo)記結(jié)束。B、網(wǎng)頁文件的內(nèi)容分為兩大部分:<Head>和</Head>對稱標(biāo)記為頭部分,主要包含著和網(wǎng)頁文件有關(guān)的一些頭信息,除了標(biāo)題標(biāo)記<title></title>外,其他內(nèi)容不會顯示在瀏覽器中;<body#k/body>對稱標(biāo)記稱為正文部分,里面的內(nèi)容會顯示在IE瀏覽器中。HTML語言的其他標(biāo)記都必須寫在這兩大標(biāo)記中。C、網(wǎng)頁頭部分中的<title>對稱標(biāo)記是標(biāo)題標(biāo)記,該標(biāo)記的作用是在瀏覽器的標(biāo)題欄中顯示網(wǎng)頁的標(biāo)題。D、網(wǎng)頁正文部分中的<P></P>對稱標(biāo)記是段落標(biāo)記,該標(biāo)記的作用是用來劃分段落。4、標(biāo)記參數(shù)A、標(biāo)記中可以加上參數(shù)設(shè)定,但參數(shù)必須加在起始的標(biāo)記內(nèi),如:<fontsize=+7>歡迎光臨?。?font>。B、如果個標(biāo)記中有多個參數(shù)要設(shè)定,那么用空格隔開參數(shù),如<fontsize=+7color=red>歡迎光臨?。?font>參數(shù)屬性表
Bgcoor背景顏色,可輸入顏色的英文名稱或者十六進(jìn)制代碼等;Direction=leftrightupdown滾動方向(左、右、上、下)Behavior=scrollslidealternayescroll表示由一端滾動到另一端slide表示由一端快速滑動到別一端,不再重復(fù)alternaye表示在兩端之間來回滾動Height=數(shù)值滾動區(qū)域的高度Width二數(shù)值滾動區(qū)域的寬度Scrollamount=數(shù)值決定滾動的速度,數(shù)值越大滾動越快;Scrolldelay=數(shù)值延遲時間,數(shù)值越大跳躍越明顯Loop=數(shù)值循環(huán)次數(shù),不設(shè)置該值即表示無限循環(huán)跑馬燈效果的制作:實(shí)例1:該網(wǎng)頁上顯示的文字在網(wǎng)頁上從右到左滾動。2.html<html><head><title>歡迎大家光臨</title></head><body><marquee>這是我用記事本編寫的第二個網(wǎng)頁</marquee></body></html>實(shí)例2:讓“我會滾動”幾個字在網(wǎng)頁上從左到可滾動。3.html<html><head><title>歡迎大家光臨</title></head><body><p>這是我用記事本編寫的第三個網(wǎng)頁</p>〈marqueedirection=right>我會滾動!</marquee></body></html>實(shí)例3:讓“我會滾動”幾個字在網(wǎng)頁上來回滾動,并且滾動的寬度是300px。<html>3.html<head><title>歡迎大家光臨</title></head><body><p>這是我用記事本編寫的第四個網(wǎng)頁</p>〈marqueebehavior=alternatewidth=300>我會滾動!</marquee></body></html>實(shí)例4:讓“我會滾動”幾個字在網(wǎng)頁中向上滾動,并且滾動的高度是300px,滾動速度是29。4.html<html><head><title>歡迎大家光臨</title></head><body><p>這是我用記事本編寫的第四個網(wǎng)頁</p>〈marqueedirection=upheight=300scrollamount=29>我會滾動!</marquee></body></html>二、常用的網(wǎng)頁設(shè)計(jì)工具1、網(wǎng)頁制作平臺DreamweaverMX2002年9月,美國Macromedia公司開發(fā)的Dreamweaver軟件推出MX系列的簡體中文版,該軟件同時適用于初學(xué)都和專業(yè)網(wǎng)頁設(shè)計(jì)師,是一款優(yōu)秀的“所見即所得”的可視化網(wǎng)頁編輯軟件。DreamweaverMX除了可以用來開發(fā)靜態(tài)網(wǎng)頁外,還支持動態(tài)網(wǎng)頁的開發(fā)。同時該軟件集網(wǎng)頁制作和網(wǎng)站管理于一身,能輕松實(shí)現(xiàn)對本地網(wǎng)站及遠(yuǎn)程網(wǎng)站的管理及異地網(wǎng)頁編輯管理的功能。2、圖像處理工具Photoshop7.0Photoshop軟件它的強(qiáng)大功能不僅能創(chuàng)造出不朽的計(jì)算機(jī)圖形藝術(shù),并且滲透到計(jì)算機(jī)應(yīng)用的各個領(lǐng)域。3、動畫制作工具——FlashMXFlash是目前網(wǎng)絡(luò)上最為流行的矢量動畫設(shè)計(jì)制作軟件,動畫制作能力異常強(qiáng)大,特別是作為一個多媒體網(wǎng)頁設(shè)計(jì)平臺方面,網(wǎng)站設(shè)計(jì)師不僅可用它制作網(wǎng)頁上的導(dǎo)航欄、廣告宣傳欄,還可用它獨(dú)立制作在網(wǎng)上發(fā)布的網(wǎng)絡(luò)軟件。4、網(wǎng)頁上傳下載——CuteFTP它是一種基于FTP的數(shù)據(jù)交換軟件,擁有很多功能,如斷點(diǎn)續(xù)傳、自動登陸等,是上傳、維護(hù)、更新網(wǎng)站必不可少的工具軟件。作業(yè):課后練習(xí)填空題網(wǎng)頁制作第二章單元備課
單元課時18課時單元分析第一二章Dreamweaver入門。1、Dreamweaver軟件的運(yùn)行方法和對界面的熟悉,2、站點(diǎn)的建立與規(guī)劃管理,3、頁面屬性的設(shè)置,4、文本的格式化,5、圖像的格和插入排版,6、超鏈接的設(shè)置,7、其他媒體的插入,8、CSS層疊樣式表的使用知識目標(biāo)掌握Dreamweaver軟件的啟動與基本操作掌握建立站點(diǎn)的步驟和對站點(diǎn)的管理了解頁面屬性的各類選項(xiàng)的設(shè)置了解網(wǎng)頁中常用的幾種圖像格式熟悉超鏈接的類型和表現(xiàn)形式技能目標(biāo)熟悉Dreamweaver軟件的界面掌握建立站點(diǎn)的步驟和對站點(diǎn)的管理掌握頁面屬性中標(biāo)題、頁邊距、背景色和背景圖的設(shè)置方法掌握圖像插入和文本混排的方法掌握在網(wǎng)頁中建立各種超鏈接的方法掌握在網(wǎng)頁中插入FLASH動畫和插入音樂的方法教材重點(diǎn)1、Dreamweaver軟件的運(yùn)行方法和對界面的熟悉,2、站點(diǎn)的建立與規(guī)劃管理,3、頁面屬性的設(shè)置,4、文本的格式化,5、圖像的格和插入排版,6、超鏈接的設(shè)置,7、其他媒體的插入,8、CSS層疊樣式表的使用教材難點(diǎn)2、站點(diǎn)的建立與規(guī)劃管理,3、頁面屬性的設(shè)置,4、文本的格式化,5、圖像的格和插入排版,6、超鏈接的設(shè)置,7、其他媒體的插入,8、CSS層疊樣式表的使用教學(xué)方法講授、多媒體演示、操作學(xué)生學(xué)習(xí)情況學(xué)生們上課時能認(rèn)真聽、但還沒有書,同學(xué)們只能通過上課聽和看到」的一些知識和操作方法進(jìn)行練習(xí),不能做到很好的掌握。教改及實(shí)施措施布置些小任務(wù),在操作課上完成,步步加深內(nèi)容,提高學(xué)生的操作能力。
課題2.1DreamweaverMX的工作界面和基本操作教學(xué)目標(biāo)掌握DreamweaverMX軟件的啟動方法熟悉DreamweaverMX軟件的界面掌握DreamweaverMX軟件的基本操作教學(xué)重點(diǎn)DreamweaverMX軟件的基本操作教學(xué)難點(diǎn)DreamweaverMX軟件的基本操作教學(xué)方法教學(xué)一體化班級計(jì)算機(jī)二年級課時7、8教學(xué)內(nèi)容:一、熟悉DreamweaverMX2004的工作界面Dreamweaver歡迎界面1、啟動DreamweaverMX2004認(rèn)識窗口布局、面板與面板組2、DreamweaverMX2004的工作界面1、啟動DreamweaverMX2004認(rèn)識窗口布局、面板與面板組2、DreamweaverMX2004的工作界面”欄“文檔”窗口3、DreamweaverMX軟件界面的相關(guān)操作。A、功能面板的移動:B、功能面板的展開和收縮C、學(xué)會使用面板上的按鈕D、擴(kuò)大網(wǎng)頁編輯窗口的大小完成上述四個方面的操作后讓學(xué)生們自主操作完成對DreamweaverMX的啟動,工作界面的認(rèn)識及操作。
班級計(jì)算機(jī)二年級課時9、10課題2.2站點(diǎn)的建立與規(guī)劃教學(xué)目標(biāo)掌握建立占點(diǎn)的一般步驟掌握如何對站點(diǎn)進(jìn)行管理教學(xué)重點(diǎn)站點(diǎn)的建立與管理教學(xué)難點(diǎn)站點(diǎn)的建立與管理教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:用戶設(shè)計(jì)的網(wǎng)頁和相關(guān)素材,一般都要求存放在同一個文件夾內(nèi),這樣方便對網(wǎng)站進(jìn)行維護(hù)和管理,特別是將網(wǎng)站發(fā)布到服務(wù)器上時,這點(diǎn)尤其重要。我們建立站點(diǎn)的目的也在于此。一、站點(diǎn)的建立創(chuàng)建站點(diǎn),其實(shí)就是綁定一個文件夾。我們通過一個實(shí)例來看如何建立一個站點(diǎn)。案例:美樂電器網(wǎng)站的建立1、執(zhí)行菜單的“站點(diǎn)”一一“新建站點(diǎn)”或在右側(cè)文件功能面板中選擇“站點(diǎn)”,然后點(diǎn)擊“管理站點(diǎn)”2、在出現(xiàn)的安裝向?qū)谋究蛑休斎刖W(wǎng)站的名稱,以便在Dreamweaver中識別該站點(diǎn)。站點(diǎn)名稱可以是任何名稱,用戶可以隨意取。這里輸入“美樂電器”一一“下一步”3、當(dāng)站點(diǎn)定義向?qū)г儐枴澳欠褚褂梅?wù)器技術(shù)”選擇“否”表示目前該站點(diǎn)是一個靜態(tài)站點(diǎn),沒有動態(tài)頁。選擇“是”則需要進(jìn)一步選擇動態(tài)網(wǎng)頁類型。4、站點(diǎn)定義向?qū)?中主要實(shí)現(xiàn)兩個功能:A、指
定網(wǎng)頁存放的處理方式B、在文本框內(nèi)指定站點(diǎn)所指向的位置。5、站點(diǎn)定義向?qū)г儐柲闳绾芜B接到遠(yuǎn)程服務(wù)器,有FTP、本地/網(wǎng)絡(luò)、RDS等方式。如果沒有遠(yuǎn)程服務(wù)器,這里可以選擇“無”。再單擊“下一步”就會出現(xiàn)如下圖:新建好的站點(diǎn)二、站點(diǎn)的管理1、修改站點(diǎn)信息A、執(zhí)行菜單的“站點(diǎn)”一一“管理站點(diǎn)”一一選擇“編輯”B、在彈出的對話框中:可以設(shè)置“站點(diǎn)名稱”,設(shè)置站點(diǎn)的路徑2、創(chuàng)建網(wǎng)站的文件和文件夾:在Dreamweaver中創(chuàng)建網(wǎng)頁的方法主要有兩種:A、一種是傳統(tǒng)的通過文件菜單創(chuàng)建網(wǎng)頁文件?!拔募币灰弧靶陆ā?Ctrl+NB、通過站點(diǎn)管理器來新建文件和文件夾。課題上機(jī)作業(yè):利用站點(diǎn)管理器新建image文件夾和網(wǎng)頁文件。課題班級計(jì)算機(jī)二年級課時11、122.3網(wǎng)頁頁面屬性的設(shè)置
教學(xué)目標(biāo)了解頁面屬性的各類選項(xiàng)的設(shè)置掌握頁面屬性中標(biāo)題、頁邊距、背景色和背景圖的設(shè)置方法教學(xué)重點(diǎn)頁面屬性中標(biāo)題、頁邊距、背景色和背景圖的設(shè)置教學(xué)難點(diǎn)頁面屬性中標(biāo)題、頁邊距、背景色和背景圖的設(shè)置教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:網(wǎng)站有自己的各種設(shè)置和屬性,網(wǎng)頁亦如此。本節(jié)將針對網(wǎng)頁的各種屬性設(shè)置詳細(xì)講解。頁面的屬性設(shè)置很簡單,在頁面的任何一個空白位置單擊右鍵,然后在快捷菜單上選擇“頁面屬性”,或執(zhí)行菜單的“修改”一一“頁面屬性”出現(xiàn)如下圖標(biāo)題:設(shè)置頁面的標(biāo)題。背景圖像:給頁面的背景設(shè)置背景圖像。背景:設(shè)置背景顏色,默認(rèn)為白色。文本:設(shè)置文本的顏色,默認(rèn)為黑色。鏈接:超鏈接文本的顏色,默認(rèn)為藍(lán)色。訪問過的鏈接:超鏈接被訪問后的顏色,默認(rèn)為暗紅色?;顒渔溄樱烘溄颖贿x中時的顏色。左邊界:設(shè)置頁面左邊的空白。頂部邊界:設(shè)置頁面頂端的空白。邊界寬度:設(shè)置頁面空白的寬度。邊界高度:設(shè)置頁面空白的高度。文檔編碼:設(shè)置頁面的編碼,默認(rèn)是簡體中文跟蹤圖像:設(shè)置跟蹤圖像。圖像透明度:設(shè)置跟蹤圖片的透明度,默認(rèn)值為100%,表示不透明。案例1:用頁面屬性給網(wǎng)站首頁設(shè)置頁面標(biāo)題
操作步驟:(1)、打開一個網(wǎng)頁文件,3.html(2)執(zhí)行菜單的“修改”一一“頁面屬性”或用CTRL+J。(3)在標(biāo)題欄中輸入“余姚市美樂電器有限公司”(4)將當(dāng)前頁面保存CTRL+S,按F12功能鍵預(yù)覽網(wǎng)頁。案例2:用頁面屬性給網(wǎng)站“企業(yè)簡介”頁面設(shè)置背景顏色。(1)打開3.html文件,執(zhí)行菜單“修改”——“頁面屬性”(2)鼠標(biāo)單擊“背景”邊上的顏色拾取器,彈出取色面板。(3)用取色器吸取想作為背景色的顏色,一般為淺色,這里設(shè)成為淺黃色。(4)保存文件,按F12在瀏覽器中看到被加了背景色的頁面。案例3:用頁面屬性給網(wǎng)頁“與我聯(lián)系”頁面設(shè)置背景圖片。(1)在編輯區(qū)打開文件,執(zhí)行菜單“修改”—一“頁面設(shè)置”(2)單擊“背景圖像”文本框邊是的“瀏覽”,彈出選擇圖像源對話框,選擇所需要的圖片,選擇“是”把圖片復(fù)制到網(wǎng)頁文件中。(3)回到“頁面屬性”對話框,“文件”一一“保存”班級計(jì)算機(jī)二年級課時13、班級計(jì)算機(jī)二年級課時13、14教學(xué)目標(biāo)熟悉文本設(shè)置屬性面板的各選項(xiàng)功能和插入面板各按鈕功能掌握文本格式化的基本操作和在文本中插入特殊字符教學(xué)重點(diǎn)文本格式化的基本操作和在文本中插入特殊字符教學(xué)難點(diǎn)文本格式化的基本操作和在文本中插入特殊字符教學(xué)方法教學(xué)一體化2.4文本的格式化教學(xué)內(nèi)容:一、文本的屬性面板:棺式無~二[7甘式無VI腳IBZ==:=困£7毋口字偉映苗宇煒■]丈小醫(yī)―nr~口匚]讓匯些注目林:1頁面用桂…1--=課題文本的屬性面板課題格式:文本框內(nèi)顯示段落格式,類似于WORD,字體:預(yù)設(shè)的有各類英文字體、中文字體大?。涸O(shè)置文字的大?。涸O(shè)置顏色,右邊是顏色數(shù)字的文本輸入框。:給文字設(shè)置加粗或傾斜風(fēng)格:可設(shè)置段落對齊方式,依次為左對齊、居中、右對齊、兩邊對齊。鏈接:文字的超級鏈接目標(biāo):目標(biāo)窗口,可以設(shè)定超鏈接在目標(biāo)窗口打開的方式。:項(xiàng)目列表和編號列表,設(shè)定文本的無序列表和有序列表方式。:設(shè)置段落縮進(jìn)。二、文本的輸入與排版使用Dreamweaver的“顯示設(shè)計(jì)視圖”,用戶可以像編輯WORD文檔一樣編輯網(wǎng)頁文件。案例1:給“美樂電器”網(wǎng)站的“企業(yè)簡介”頁面輸入文字并排版。操作步驟:(1)在站點(diǎn)管理器中找到j(luò)ianjie.htm文件,雙擊打開后進(jìn)行編輯。(2)在光標(biāo)閃爍年按WORD的輸入方法錄入企業(yè)簡介內(nèi)容。(3)給每個段落首行加入空格:按ctrl+shift+空格鍵,可以在頁面文本中插入一個空格。(4)將大標(biāo)題和小標(biāo)題居中注:在DW中直接按回車鍵換行,會在兩段間額外插入一空行。如果不想產(chǎn)生這個空行,可以在HTML源代碼中輸入<9>這樣就不會在段與段之間不生空行了。DW的軟件文本的編輯操作如復(fù)制、刪除、剪切等操作方法與WORD類似。三、文本格式化.設(shè)置字體.文字大小.文本樣式.文本的顏色.對齊方式設(shè)置字體、文字大小、文本樣式、文本的顏色、對齊方式等都可在屬性面板中進(jìn)行設(shè)置。四、在文本中插入特殊字符操作2在網(wǎng)頁編輯過程中,如果需要在頁面中插入某些特殊符號,如版權(quán)符號、注冊商標(biāo)符號、英鎊符號等的時候,可以通過選擇插入一一特殊字符命令,從彈出的子菜單中選擇要插入的特殊字符五、文本的段落排列用==3可以對段落進(jìn)行凸起或縮進(jìn)排列。通過案例一邊操作一邊練習(xí)效果會好一些。班級計(jì)算機(jī)二年級課時15、16課題2.5圖像的插入與設(shè)置教學(xué)目標(biāo)了解網(wǎng)頁中常用的幾種圖像格式掌握圖像插入和文本混排的方法教學(xué)重點(diǎn)掌握圖像插入和文本混排的方法教學(xué)難點(diǎn)掌握圖像插入和文本混排的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:一個優(yōu)秀的網(wǎng)頁設(shè)計(jì)定是圖文并茂的,在網(wǎng)頁中適當(dāng)?shù)夭迦雸D片,不僅可以使網(wǎng)頁中的內(nèi)容豐富多彩,還可以使網(wǎng)頁顯的美觀、形象和生動。一、常用的圖像類型和格式圖像文件的格式有很多種,但通常應(yīng)用于網(wǎng)頁中的圖像文件只有GIF,JPEG(JPG)和PNG3種,大多數(shù)瀏覽器都支持這3種文件格式的圖像。(1)GIF格式GIF是GraphicsInterchangeFormat(圖形交換格式)的簡稱,主要用于存儲非連續(xù)色調(diào)圖像或色調(diào)比較單一的圖像。這種格式的圖形文件最多使用256種顏色,具有體積小、下載速度快等優(yōu)點(diǎn),在網(wǎng)頁制作中常用于制作導(dǎo)航條、按鈕、圖標(biāo)等網(wǎng)頁元素。(2)JPEG(JPG)格式JPEG是JointPhotographicExpertsGroup(聯(lián)合圖像專家組)的簡稱,主要用于存儲照片或連續(xù)色調(diào)的圖像。JPEG常用于顯示網(wǎng)頁中對圖片色彩和清晰度要求較高的地方,是目前互聯(lián)網(wǎng)中最受歡迎的圖像格式。(3)PNG格式PNG是PortableNetworkGraphic(可移植網(wǎng)絡(luò)圖像)的簡稱,它同時具有GIF格式圖像和JPEG格式圖像的優(yōu)點(diǎn),它既可以采用無損壓縮的算法,也可以采用有損壓縮的算法來壓縮圖像,從而進(jìn)一步減少文件的大小。而且PNG格式的圖像支持多種顏色的顯示,是頗具發(fā)展前景的一種圖像格式。二.插入圖像圖像的屬性面板在圖像的屬性面板左上方有一個縮略圖,它的右邊有“圖像”字樣以及當(dāng)前文件的大小,其下方的文本框內(nèi)給圖像在網(wǎng)頁中定義名稱,以便將來使用“行為”時好調(diào)用該文件。寬和高:指在瀏覽器中為圖片保留的寬度和高度,默認(rèn)單位是像素(px)源文件:指定圖片的具體路徑。鏈接:指定圖像的超鏈接垂直邊距:指定圖像在垂直方向上與文本或其他頁面元素的間距。水平邊距:指定圖像在水平方向與文本或其他頁面元素的間距。目標(biāo):指定鏈接時的目標(biāo)窗口或框架。邊框:指定圖像邊框的寬度。三、圖像的插入與相關(guān)操作1、插入圖像2、插入圖像占位符圖像占位符的作用是為當(dāng)前網(wǎng)頁留下一定的空間,用于以后在此插入圖像文件。圖像占位符的相關(guān)屬性與圖像的相關(guān)屬性基本相同,用戶可以設(shè)置圖像占位符的名稱、大小以及顏色等屬性。3、設(shè)置圖像屬性.調(diào)整圖像大小.裁剪圖像.調(diào)整圖像的亮度和對比度.對齊圖像.圖像描邊.給圖像增加提示信息.設(shè)置圖像邊距任務(wù)一、在頁面中插入鼠標(biāo)經(jīng)過圖像操作一編輯圖像鼠標(biāo)經(jīng)過圖像,其實(shí)由兩個圖像組成,其中一個圖像為頁面首次載入時顯示的圖像,另一個圖像為鼠標(biāo)指針移到其上方時顯示的圖像。通常情況下要求這兩幅圖像的大小相等,如果大小不同的話,Dreamweaver將自動調(diào)整第二個圖像的大小以與第一個圖像保持一致。為取得好的鼠標(biāo)經(jīng)過圖像的效果,用戶可先利用圖像編輯工具,如Photoshop或FireworksMX2004等軟件,將兩張圖片處理成大小一致的圖像。操作二插入鼠標(biāo)經(jīng)過圖像班級計(jì)算機(jī)二年級課時17、18課題2.6超鏈接的設(shè)置教學(xué)目標(biāo)熟悉超鏈接的類型和表現(xiàn)形式掌握在網(wǎng)頁中建立各種超鏈接的方法教學(xué)重點(diǎn)掌握在網(wǎng)頁中建立各種超鏈接的方法教學(xué)難點(diǎn)掌握在網(wǎng)頁中建立各種超鏈接的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:一、超鏈接的類型和表現(xiàn)形式1.超級鏈接的基本概念超級鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間、站點(diǎn)與Web之間的鏈接關(guān)系,它可以使站點(diǎn)內(nèi)的網(wǎng)頁成為有機(jī)的整體,還能夠使不同站點(diǎn)之間建立聯(lián)系。從工作機(jī)理的角度看,超級鏈接是一個指向其他網(wǎng)絡(luò)資源的指針,通過它瀏覽器可以根據(jù)一定的要求載入相應(yīng)的資源。.超級鏈接的分類在網(wǎng)頁中超級鏈接可以根據(jù)鏈接載體和鏈接目標(biāo)的不同進(jìn)行分類,下面分別介紹它們的分類信息。(1)按鏈接載體分類,可以把鏈接分為文本鏈接與圖像鏈接兩大類。①文本鏈接:用文本作為鏈接載體,簡單實(shí)用。②圖像鏈接:用圖像作為鏈接載體能使網(wǎng)頁美觀、生動活潑,它既可以指向單個的鏈接,也可以根據(jù)圖像不同的區(qū)域建立多個鏈接。(2)按鏈接目標(biāo)分類,可以將超級鏈接分為以下幾種類型。③內(nèi)部鏈接:同一網(wǎng)站內(nèi)文檔之間的鏈接。④外部鏈接:不同網(wǎng)站文檔之間的鏈接。⑤錨點(diǎn)鏈接:同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。⑥E-mail鏈接:發(fā)送電子郵件的鏈接,可直接點(diǎn)擊發(fā)送電子郵件。⑦執(zhí)行文件鏈接:鏈接站點(diǎn)空間里的可執(zhí)行程序,用于下載與在線運(yùn)行。.鏈接路徑(1)絕對路徑絕對路徑是指某個文件在網(wǎng)絡(luò)上的完整路徑,包括協(xié)議、Web服務(wù)器、路徑和文件名等。簡單地說,如果在瀏覽器地址欄中輸入就能直接訪問的文件地址,就可以看做是絕對路徑。例如,下面的地址就是絕對路徑:;/index.asp(2)文件相對路徑文件相對路徑是指和當(dāng)前文檔所在的文件夾相對的路徑。使用相對路徑創(chuàng)建內(nèi)部鏈接時,即使站點(diǎn)的域名或網(wǎng)站的根目錄發(fā)生改變時,站點(diǎn)內(nèi)所有使用相對路徑的鏈接都不會出現(xiàn)問題。另外,當(dāng)在站點(diǎn)管理器內(nèi)進(jìn)行文件的重命名、文件的移動、文件夾的移動等操作時,用文件相對路徑創(chuàng)建的鏈接都會動態(tài)進(jìn)行更新。(3)根目錄相對路徑如果要創(chuàng)建的是內(nèi)部鏈接,用戶還可以選擇根目錄相對路徑。根目錄相對路徑是從當(dāng)前站點(diǎn)的根目錄開始的,用斜杠/代表根目錄,然后再書寫文件夾名,最后書寫文件名。例如要創(chuàng)建到product01.htm的鏈接,任何文件中的鏈接地址都為/intro/product01.htm。二、設(shè)置超鏈接操作一、設(shè)置文本的超級鏈接.使用屬性面板的鏈接文本框創(chuàng)建鏈接.使用屬性面板的指向文件圖標(biāo)創(chuàng)建鏈接.使用超級鏈接對話框創(chuàng)建鏈接操作二、設(shè)置圖片的超級鏈接通過上述操作完成:1、給“美樂電器”首頁添加文本超鏈接2、修改“美樂電器”網(wǎng)站首頁超鏈接的顏色。3、修改“美樂電器”網(wǎng)站首頁超鏈接的網(wǎng)頁,并在新窗口打開4、利用首頁的圖像來創(chuàng)建圖片鏈接5、在首頁的圖像上創(chuàng)建熱區(qū)鏈接班級計(jì)算機(jī)二年級課時19、20課題2.6超鏈接的設(shè)置教學(xué)目標(biāo)掌握在網(wǎng)頁中建立各種超鏈接的方法教學(xué)重點(diǎn)掌握在網(wǎng)頁中建立各種超鏈接的方法教學(xué)難點(diǎn)掌握在網(wǎng)頁中建立各種超鏈接的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:一、設(shè)置超鏈接1、錨點(diǎn)鏈接:錨點(diǎn)鏈接是使用在同一個網(wǎng)頁內(nèi)容之間相互跳轉(zhuǎn)的一種超鏈接。當(dāng)網(wǎng)頁的內(nèi)容和信息量很多時,就可以用錨點(diǎn)鏈接來指導(dǎo)瀏覽者的閱讀。錨點(diǎn)鏈接類似于書的書簽,可使瀏覽者迅速找到自己想要的信息。制作錨點(diǎn)鏈接,首先要在網(wǎng)頁中制作一個錨點(diǎn),然后創(chuàng)建一個跳轉(zhuǎn)到這個錨點(diǎn)的鏈接,插入錨點(diǎn)的格式是“#錨點(diǎn)名稱",如#top。例:給“美樂電器”的產(chǎn)品頁面創(chuàng)建錨點(diǎn)鏈接。(1)、在DW中打開chanpin.htm文件。(2)、光標(biāo)定位到第四行產(chǎn)品的開頭位置,單擊常用面板下的盤按鈕。(3)彈出“命名錨記”對話框,在對話框中輸入定義的錨點(diǎn)名稱,這里是line01,(4)單擊確定”按鈕,就會在第四行開頭位置插入一個錨點(diǎn)。(5)回到網(wǎng)頁頂部,做一個鏈接,點(diǎn)擊后能跳轉(zhuǎn)到錨點(diǎn)所在的位置。注:錨點(diǎn)名稱不能包含空格,不能用中文命名且錨點(diǎn)不能位于層中。二、電子郵件超鏈接在網(wǎng)站上留下電子郵件,可方便訪問者對網(wǎng)站提意見或進(jìn)行其他聯(lián)系。也可以把這些電子郵件地址做上超鏈接,讓瀏覽者單擊電子郵件鏈接就會自動打開電子郵件軟件,并在收信人地址欄放上網(wǎng)站的電子郵件地址。例:在網(wǎng)頁中插入電子郵件鏈接(1)打開鏈接的文件。選中要插入電子郵件鏈接的文本:,然后單擊“插入”—一“常用”面板中的(電子郵件鏈接)按鈕。(2)彈出電子郵件鏈接的對話框,在文本欄內(nèi)填入想在頁面中出現(xiàn)的郵件地址;在E-mail欄中輸入郵件地址,如圖
電子郵件鏈接電子郵件鏈接(3)單擊“確定”按鈕,完成鏈接的制作,再按F12鍵預(yù)覽網(wǎng)頁。點(diǎn)擊新建的電子郵件鏈接就會自動彈出發(fā)送電子郵件的窗口。注:創(chuàng)建電子郵件鏈接還有一種方法是選中要插入鏈接的文本,直接在“屬性”一一“鏈接”對話框中輸入mailto:y*********@*.*(冒號要半角)三、URL超鏈接URL超鏈接是鏈接到其他使用URL定位的網(wǎng)站的超鏈接,一般用來鏈接其他的WWW網(wǎng)站,但也用來鏈接使用FTP協(xié)議的可下載文件。四、空鏈接空鏈接指的是一個無指向的鏈接。創(chuàng)建非常簡單,只要在屬性面板的鏈接欄中插入一個符號“#”就可以了。班級計(jì)算機(jī)二年級課時21班級計(jì)算機(jī)二年級課時21、22課題2.7其他媒體的插入與使用教學(xué)目標(biāo)掌握在網(wǎng)頁中插入FLASH動畫的方法掌握在網(wǎng)頁中插入音樂的方法教學(xué)重點(diǎn)在網(wǎng)頁中插入FLASH動畫和音樂的方法教學(xué)難點(diǎn)在網(wǎng)頁中插入FLASH動畫和音樂的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:WWW服務(wù)由于其對多媒體的支持很好而得到廣泛的發(fā)展?;ヂ?lián)網(wǎng)不僅能很好地在網(wǎng)絡(luò)上傳輸文字和圖片,還能傳輸各類多媒體信息,如動畫、音頻和視頻。下面我們將介紹如何在網(wǎng)頁中插入最常用的動畫和音頻文件。一、Flash動畫的插入Flash動畫由于其制作的動畫文件所占空間小、質(zhì)量高,并具有邊下載邊播放的特點(diǎn),從而在網(wǎng)絡(luò)上廣為流傳,成為當(dāng)今互聯(lián)網(wǎng)上各家網(wǎng)絡(luò)率先考慮使用的動畫類型。例:在“美樂電器”網(wǎng)站首頁插入Flash標(biāo)題操作步驟:(1)打開“企業(yè)簡介”頁面,把光標(biāo)定位到網(wǎng)頁上方。(2)執(zhí)行菜單的“插入”一一“媒體”一一“Flash命令或單擊“插入”一一“常用”面板上的—?按鈕,彈出下一級菜單如圖,再選擇第一個Flash彈出如下圖“選擇文件”對話框。
選取文件名自?什宗統(tǒng)站點(diǎn)碰密器...|查找酒國g|0美樂電冊▼]9/二亨二?tjniaoa|r11-1154512641^435261^6^-ljbackground[tU=L1930753361,39?003^^=匍ms孫的3tjjanjie-r.?on^j文件名?:文件類空文件名?:文件類空QJ所在文件o■打UKL:./ffi對于,立檔事jianjle.kt^在站點(diǎn)定更中更燥默溫的尊逐相對于(3)選擇相應(yīng)的Flash文件(Flash文件擴(kuò)展名為swf)單擊確認(rèn)。通過Flash的屬性面板,除了可以設(shè)置Flash文件的大小、播放質(zhì)量、對齊方式等,還可以通過“播放”的編輯區(qū)預(yù)覽動效果,甚至可以通過”參數(shù)“來設(shè)置Flash的屬性。二、音頻文件的插入音頻文件的格式有很多種。在互聯(lián)網(wǎng)上最常用的音頻文件有MIDI格式、WAV格式和MP3格式。使用瀏覽器瀏覽網(wǎng)頁,一般只能訪問特定的幾種網(wǎng)頁元素:文本、圖片等。如果想瀏覽其他類型的媒體對象,必須借助插件。將相應(yīng)的媒體的插件下載到瀏覽器中,才能播放相應(yīng)的媒體。例:在“美樂電器”網(wǎng)站首頁插入MIDI音樂。(1)打開頁面,把光標(biāo)定位在網(wǎng)頁下方。(2)執(zhí)行菜單的“插入”——“媒體”一一“插件”命令或單擊“插入”一一“常用”面板上的按鈕,彈出選擇文件對話框。通過“選擇文件”對話框選擇插件文件,MIDI音樂文件的擴(kuò)展名是“mid⑶單擊“確認(rèn)”按鈕,這時在網(wǎng)頁編輯區(qū)中會出現(xiàn)一個符號,單擊面板上“播放”按鈕進(jìn)行試聽。通過講解的內(nèi)容,讓同學(xué)們在自己的網(wǎng)頁中做出來。
班級計(jì)算機(jī)二年級課時23、24課題2.8強(qiáng)大的層疊樣式表教學(xué)目標(biāo)熟悉CSS層疊樣式表的格式和組織形式掌握CSS層疊樣式表的定義和使用教學(xué)重點(diǎn)CSS層疊樣式表的定義和使用教學(xué)難點(diǎn)CSS層疊樣式表的定義和使用教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:層疊樣式表是W3C為了彌補(bǔ)傳統(tǒng)的HTML功能之不足而開發(fā)的一種新的網(wǎng)頁格式標(biāo)準(zhǔn)。一、層疊樣式表的格式與組織形式。1、CSS的格式:CSS的基本語句格式如下:名稱:{屬性1:屬性值;屬性2:屬性值;二二.}。名稱:可以是用戶自己定義的,也可以是HTML的源代碼標(biāo)記。屬性:指的是那些將要被修改的屬性,比如color。屬性值:給屬性設(shè)定的值,比如給color的值可以設(shè)定為red。例如:H1{color:red}H1是html的源代碼中默認(rèn)的1號標(biāo)題標(biāo)記。在網(wǎng)頁中使用上面這條語句,網(wǎng)頁中所有使用1號標(biāo)題的文字都會變成紅色。2、CSS的組織形式:二、層疊樣式表的建立與使用1、DW面板的打開方法:執(zhí)行菜單的“窗口”一一“CSS樣式”或用快捷鍵shift+F11或展開面板“設(shè)計(jì)”一一“CSS樣式”2、CSS面板介紹:CSS面板分“應(yīng)用樣式”和“編輯樣式”兩種顯示方式。應(yīng)用樣式只顯示用戶定義的CSS規(guī)則。而編輯樣式則顯示所有定義過的CSS規(guī)則。右下角還有4個按鈕,依次是:.:附加樣式表:新建CSS樣式:編輯樣式表刪除CSS樣式3、CSS樣式的建立與運(yùn)用:(1)單擊CSS樣式面板右下角的按鈕,插入一個新的CSS樣式。彈出如下圖:
新建匚空規(guī)則確定新建匚空規(guī)則選揮器類型:◎:類例應(yīng)用于任何標(biāo)賽〕標(biāo)簽嚏新定義特定標(biāo)簽的外觀)?高級(ID,偽類選擇器等>㈤幫助(2)CSS的運(yùn)用:自定義的CSS樣式運(yùn)用與文本格式化的方法類似:首先選中要設(shè)定CSS樣式的文字,然后單擊選揮器類型:◎:類例應(yīng)用于任何標(biāo)賽〕標(biāo)簽嚏新定義特定標(biāo)簽的外觀)?高級(ID,偽類選擇器等>㈤幫助案例:給“美樂電器“網(wǎng)站中”與我聯(lián)系“頁面文字設(shè)定CSS樣式。步驟:P58
網(wǎng)頁制作第三章單元備課單元課時12課時單元分析第三章網(wǎng)頁的布局和定位表格的建立與設(shè)置,表格在排版中的應(yīng)用,層的建立與設(shè)置,層在排版中的應(yīng)用,框架的使用知識目標(biāo)能夠插入表格、對表格的各組成單位進(jìn)行選取及插入、刪除行或列、保并、拆分單元格了解一些表格常用的設(shè)計(jì)技巧能夠創(chuàng)建層、根據(jù)需要通過屬性面板或?qū)用姘逍薷膶拥膶傩哉莆諏拥闹丿B和對齊的操作方法、層與表格之間的相互轉(zhuǎn)化方法掌握框架布局的基礎(chǔ)操作技能目標(biāo)能夠插入表格、對表格的各組成單位進(jìn)行選取及插入、刪除行或列、保并、拆分單元格掌握層的選取、移動、調(diào)整大小的操作掌握層的重疊和對齊的操作方法、層與表格之間的相互轉(zhuǎn)化方法掌握框架布局的基礎(chǔ)操作教材重點(diǎn)1、表格的建立與設(shè)置2、表格在排版中的應(yīng)用3、層的建立與設(shè)置4、層在排版中的應(yīng)用,5、框架的使用教材難點(diǎn)1、表格的建立與設(shè)置2、表格在排版中的應(yīng)用3、層的建立與設(shè)置4、層在排版中的應(yīng)用,5、框架的使用教學(xué)方法講授、多媒體演示、操作學(xué)生學(xué)習(xí)情況學(xué)生們上課時能認(rèn)真聽、都能對自己的網(wǎng)頁進(jìn)行美化和加工。教改及實(shí)施措施布置些小任務(wù),在操作課上完成,步步加深內(nèi)容,提高學(xué)生的操作能力。
班級計(jì)算機(jī)二年級課時25、26課題3.1表格的建立與設(shè)置教學(xué)目標(biāo)能夠插入表格,對表格的各組成單位進(jìn)行選取能夠插入、刪除行或列,教學(xué)重點(diǎn)能夠插入表格,對表格的各組成單位進(jìn)行選取能夠插入、刪除行或列,教學(xué)難點(diǎn)能夠插入表格,對表格的各組成單位進(jìn)行選取能夠插入、刪除行或列,教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:表格是在網(wǎng)頁制作中經(jīng)常運(yùn)用的元件,它不僅能用于整理數(shù)據(jù)分類資料,還能用于網(wǎng)頁排版以及制作一些特殊效果。本節(jié)將介紹插入表格、選取表格等基本操作方法。一、如何插入表格插入表格的方法很簡單:(1)單擊“常用”工具欄中的“插入表格”按鈕,或單擊菜單欄中的“插入”一一“表格”命令(2)彈出“插入表格”對話框,如圖表格寬度:指定表格的寬度,此時指定表格寬度為瀏覽器寬度的75%。單元格間距:指定表格內(nèi)單元格之間的間隙大小邊框粗細(xì):指定表格的邊框?qū)挾龋舨幌M@示邊框,可輸入0標(biāo)題:表格的標(biāo)題。(3)設(shè)置完成后“確定”按鈕,就會在頁面上看到插入的表格。在單元格中輸入文字或圖片。二、表格元素的選取表格的結(jié)構(gòu)可以分為以下幾部分:Tabi:整個表格Cell:單元格,就是表格的基本組成單位。Rows:行,就是一行水平方向上的單元格。Columns:歹列,就是一列垂直方向的單元格。1、選取整個表格:(1)、將鼠標(biāo)指針移動到表格的邊框線上單擊鼠標(biāo)左鍵選擇整個表格。(2)、光標(biāo)在表格中間時,可以執(zhí)行菜單“修改”一一“表格”--“選擇表格”命令或按CTRL+A,或在表格中單擊右鍵,從彈出的快捷菜單中選擇“表格”一“選擇表格”命令。(3)、當(dāng)光標(biāo)出現(xiàn)時,在DM頁面編輯窗口的左下角的HTML快速啟動欄上選擇“Tabi”標(biāo)簽,就可以選取整個表格。2、選取單元格:(1)將鼠標(biāo)指針移動到某個單元格上,按CTRL鍵不放,再單擊,就可以選中這個單元格。(2)按住CTRL鍵,再單擊要選取的單元格,就可以選中不連續(xù)的多個單元格。(3)通過鼠標(biāo)拖動的方法可以選取連續(xù)的一片單元格。3、選取行:將鼠標(biāo)指針移動到選取行的左邊,光標(biāo)變成“箭頭”形狀時單擊鼠標(biāo)左鍵就可以選中一整行。4、選取列:將鼠標(biāo)指針移動到選取列的上邊,光標(biāo)變成“箭頭”形狀時單擊鼠標(biāo)左鍵就可以選中一整列。三、行、列的插入或刪除1、插入單一行、列(1)插入新的行時,新增的行會出現(xiàn)在插入點(diǎn)的上方,而插入列時,會出現(xiàn)在插入點(diǎn)的左方。因此,將插入點(diǎn)也就是光標(biāo)移動到表格中的適當(dāng)位置,然后執(zhí)行菜單的“修改”—一“表格“—一”插入行?;驁?zhí)行菜單的“修改”—一“表格”—一“插入行”(2)在表格中選擇好插入點(diǎn)后單擊鼠標(biāo)右鍵,彈出的快捷菜單的“表格”子菜單中也包括這些命令。2、插入多行,多列在表格中單擊鼠標(biāo)右鍵,執(zhí)行菜單的“表格”—一“插入行或列”命令。3、刪除行和列(1)將光標(biāo)移動到要刪除的行或列上,單擊鼠標(biāo)右鍵,在彈出的快捷菜單中選擇“表格”—一“刪除行(刪除列)”命令,就可刪除整行或整列。(2)選中整行或整列的單元格后按DEL鍵。就可以刪除整行或是整列。班級計(jì)算機(jī)二年級課時27、28課題3.1表格的建立與設(shè)置教學(xué)目標(biāo)能根據(jù)要求對表格合并、拆分單元格、行、歹列、單元格屬性進(jìn)行設(shè)置,了解DW的配色方案教學(xué)重點(diǎn)能根據(jù)要求對表格合并、拆分單元格、行、歹歹、單元格屬性進(jìn)行設(shè)置,了解DW的配色方案教學(xué)難點(diǎn)能根據(jù)要求對表格合并、拆分單元格、行、歹列、單元格屬性進(jìn)行設(shè)置,了解DW的配色方案教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:一、合并和拆分單元格在實(shí)際應(yīng)用中,需要錄入的內(nèi)容往往不會均勻地遍布每個單元格,這就需要對表格中的單元格進(jìn)行合并和分解。1、合并單元格(1)選中相鄰的兩個或兩個以上的單元格,可以是同行,也可以是同列的相鄰的若干個單元格。(2)執(zhí)行菜單的“修改”一一“表格”一一“合并單元格”命令,或按快捷鍵“Ctrl+Alt+M"合并單元格,還可以單擊屬性面板上的按鈕合并單元格。2、分解單元格(1)、將光標(biāo)移動到要分割的單元格中,執(zhí)行菜單的“修改”——“表格”—一“分解單元格”命令,或者按快捷鍵“Ctrl+Alt+S”,也可以單擊屬性面板上的按鈕分解單元格。彈出“拆分單元格”對話框。(2)、在對話框中,可以設(shè)定是在行上分割還是在列上分割,以及分割的數(shù)量,、表格的設(shè)置-T在DW中,一旦選中某個對象,屬性面板就會變成這個對象的設(shè)置面板可以通過這個設(shè)置面板來精確調(diào)整對象的屬性。表格屬性當(dāng)選中整個表格時,屬性面板會自動變成表格的設(shè)置面板,可以通過這個面板修改表格的行數(shù)、列數(shù)、大小等屬性。國表格工d行5寬布引列5高1琳埴充?像孟'雕''J|,:1b者總切色.0加拉有M圖驚而[邊幽也■[4匕4邊框顏色:設(shè)置表格線的顏色。對齊:表格的對齊方式,可以將表格居中、居左、居右。背景圖像:設(shè)置表格的背景圖,如果設(shè)置了背景圖,背景顏色就失效了。三、單元格的設(shè)置和表格設(shè)置一樣,可以對單元格進(jìn)行精確的設(shè)定和修改,只要將光標(biāo)移至某個單元格中,屬性面板就會變成單元格的設(shè)置面板。格式無擇式無同LJ三三三三回宇曾孫〒?注y大小無.1在任與與目標(biāo)國賽水平武認(rèn)寬和跖口猾訃口1_頁面屋性?垂直V高庫題u將餐觸色蔻指LJL四、表格配色方案(1)首先將光標(biāo)移動到任意一個單元格中或是選中表格。(2)執(zhí)行菜單的“命令”一一“格式化表格”命令,打開“格式化表格”對話框。(3)在左上角的列表窗口中有各種配色方案供選擇,還可以在對話框的各項(xiàng)屬性欄中具體修改每一項(xiàng)配色。
班級計(jì)算機(jī)二年級課時29、30課題3.2表格在排版中的應(yīng)用教學(xué)目標(biāo)了解一些表格常用的設(shè)計(jì)技巧了解表格的布局設(shè)計(jì)應(yīng)用,熟悉有關(guān)布局表格、布局單元格的繪制操作。教學(xué)重點(diǎn)表格常用的設(shè)計(jì)技巧表格的布局設(shè)計(jì)應(yīng)用,熟悉有關(guān)布局表格、布局單元格的繪制操作。教學(xué)難點(diǎn)表格常用的設(shè)計(jì)技巧表格的布局設(shè)計(jì)應(yīng)用,熟悉有關(guān)布局表格、布局單元格的繪制操作教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:一、表格在排版中的常用設(shè)計(jì)案例1:常用于導(dǎo)航條的邊框表格。P71案例2:改變單兀格的顏色,讓網(wǎng)頁更有動感。P72案例3:制作有立體感的表格。P72案例4:利用表格說明屬性特殊表格.P75二、運(yùn)用表格布局版面表格的功能在普通人的意識中就是用來記載表單式的數(shù)據(jù)。當(dāng)然,用表格輸入條例式文字很合適,但它還有更重要的作用,即用來排列文字和圖形。在復(fù)雜的網(wǎng)頁設(shè)計(jì)中,表格的應(yīng)用是最多的。案例5:利用表格對網(wǎng)頁進(jìn)行布局P80通過案例的講解,完成這節(jié)課的上課內(nèi)容。班級計(jì)算機(jī)二年級課時31、32課題3.3層的建立與設(shè)置教學(xué)目標(biāo)了解層的概念能夠創(chuàng)建層,根據(jù)需要通過屬性面板或?qū)用姘逍薷膶拥膶傩哉莆諏拥倪x取、移動、調(diào)整大小的操作教學(xué)重點(diǎn)能夠創(chuàng)建層,根據(jù)需要通過屬性面板或?qū)用姘逍薷膶拥膶傩哉莆諏拥倪x取、移動、調(diào)整大小的操作教學(xué)難點(diǎn)能夠創(chuàng)建層,根據(jù)需要通過屬性面板或?qū)用姘逍薷膶拥膶傩哉莆諏拥倪x取、移動、調(diào)整大小的操作教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:在網(wǎng)頁設(shè)計(jì)中,用來定位內(nèi)容的元素包括表格和層,層如同含有文字、圖片、表格、插件等元素的膠片,一張張按順序疊放在一起,組合起來最終形成頁面的最終效果。層除了可以像表格一樣設(shè)置背景、位置、自由移動、響應(yīng)事件、控制顯示外,還可以使網(wǎng)頁中的對象通過層在垂直方向互相重疊,還可以利用層的可隱藏屬性配合時間軸的使用,輕松地制作出動感效果的層。一、層的插入在網(wǎng)頁中插入層方法1:(1)單擊“插入“一一”常用“面板上的”描繪層“按鈕。(2)將鼠標(biāo)指針移動到頁面編輯窗口中,鼠標(biāo)指針變成"+"字指針,拖動出層的范圍。方法2:(1)執(zhí)行菜單“插入“一一”布局對象“一一“層”命令,也可以在頁面上插入一個默認(rèn)大小的層。(2)鼠標(biāo)移至層內(nèi)并單擊使得光標(biāo)在層中出現(xiàn),即可進(jìn)行層的編輯區(qū),在層中可輸入文字、圖片或表格。注:單擊“拖動層“按鈕后,按住ctrl鍵可以連續(xù)繪制多個層。二、設(shè)置層的屬性:層的名稱,用于識別不同的層。:層的位置,“左”是距離頁面左邊界的距離,”上”是距離頁面上邊界的距離。:層的Z軸順序三、層的選取當(dāng)插入多個層或者頁面中的元素較多時,要想選取某個層會比較麻煩,DW提供了多種相當(dāng)方便的選取層的方法,以便選取層。選取層:(1)將鼠標(biāo)指針移動到任意一個層的邊框位置,單擊左鍵,就能選中該層,鼠標(biāo)指針變?yōu)椤?”字箭頭形狀。(2)也可以通過選取層的標(biāo)簽來選取層。在頁面編輯區(qū)的左上角,每插入一個層就會自動建立一個層標(biāo)簽。單擊某個標(biāo)簽就能選中該標(biāo)簽代表的層。(3)通過DW提供的層面板來選取層,可以通過執(zhí)行菜單的“窗口”—一“其他”一一“層”命令或者按F2鍵。四、移動層層是獨(dú)立于網(wǎng)頁的區(qū)域,可以在網(wǎng)頁的任何位置,因此層使網(wǎng)頁布局就得更自由。層的移動選取一個層,并將鼠標(biāo)指針移動到層左上角控制柄上,鼠標(biāo)指針會自動變成“+”字箭頭狀,按住鼠標(biāo)左鍵不放,可以拖動一個層大小的方框到任意位置。松開鼠標(biāo)左鍵,層就會移動到該位置。層的高度自由性使網(wǎng)頁排版變得更加靈活自由,利用層的自由性可以制作出很多傳統(tǒng)排版方式無法達(dá)到的效果。五、調(diào)整層的大小操作步驟如下:(1)選取一個層后,在層的四周會出現(xiàn)8個黑四方塊,那是層的控制點(diǎn)。(2)將鼠標(biāo)指針移動到控制點(diǎn)上,光標(biāo)就會自動變成“雙箭頭”狀。(3)拖動控制點(diǎn),就可以拉伸層的外框,自由改變層的大小。(4)松開鼠標(biāo)鍵,層就會自動改變大小。
班級計(jì)算機(jī)二年級課時33、34課題3.4層在排版中的應(yīng)用教學(xué)目標(biāo)掌握層的重疊和對齊的操作方法掌握層與表格之間的相互轉(zhuǎn)化方法教學(xué)重點(diǎn)掌握層的重疊和對齊的操作方法掌握層與表格之間的相互轉(zhuǎn)化方法教學(xué)難點(diǎn)掌握層的重疊和對齊的操作方法掌握層與表格之間的相互轉(zhuǎn)化方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:由于頁面中可以有多個層存在,又因?yàn)閷涌梢栽谌S中定位,更因?yàn)閷颖旧眍愃朴谝环N容器,可以互相嵌套,導(dǎo)致層需要進(jìn)行有關(guān)重疊,對齊及對齊到網(wǎng)格的設(shè)置。一、設(shè)置層的重疊層的重疊是層的重要特性,當(dāng)多個層出現(xiàn)在頁面上并重疊時,如何控制這些層便成了設(shè)計(jì)的關(guān)鍵所在。(1)確定層面板中未選中復(fù)選框,創(chuàng)建大小不等的三個層并將它們重疊到一起。(2)執(zhí)行下列操作之一,來設(shè)置它們的前后秩序,體會層的三維特性。a)在層面板中直接拖動層排序,在頁面空白處單擊,取消選取,可看到」表格層被圖片遮住。b)修改層設(shè)置面板中的Z-index的數(shù)值。層的數(shù)值越大,則層的階層越靠上,數(shù)值越下,越在下層。二、層的對齊選取多個層后,執(zhí)行“修改”—一“對齊”下相應(yīng)的命令即可。左對齊:選取的所有層向最后一個選取的層的左方對齊。右對齊:選取的所有層向最后一個選取的層的右方對齊。對齊上緣:選取的所有層向最后一個選取的層的上方對齊。對齊下緣:選取的所有層向最后一個選取的層的下方對齊。設(shè)成寬度相同:選取的所有層的寬度調(diào)整為和最后選取的層的寬度一樣設(shè)成高度相同:選取的所有層的高度調(diào)整為和最后選取的層的高度一樣三、層對齊到網(wǎng)格:執(zhí)行菜單的“查看”一一“網(wǎng)格”一一“網(wǎng)格設(shè)置”,打開網(wǎng)格設(shè)置的對話框。四、表格和層的相互轉(zhuǎn)換1、層轉(zhuǎn)化成表格執(zhí)行菜單的“修改”—一“轉(zhuǎn)化”—一“層到表格”命令,彈出“轉(zhuǎn)換層到表格”對話框。如下圖
表格布局:@最精確鎮(zhèn)口最小;合并空白單元③)小于:口像素寬度回使用透明GIF?!踔糜陧撁嬷醒腚?布局工具;口防止層重發(fā)(£)II顯小層面板g□顯示網(wǎng)格⑥□靠齊到網(wǎng)格國)取消幫助其2、表格轉(zhuǎn)化成層取消幫助其執(zhí)行菜單的“修改”一一“轉(zhuǎn)化”一一“表格到層”命令。不過表格在轉(zhuǎn)換成層時,空白的單元格將不會產(chǎn)生層,表格以外的網(wǎng)頁內(nèi)容也會一并轉(zhuǎn)換成層,也就是說網(wǎng)頁內(nèi)的所有內(nèi)容都會被放在層中。班級計(jì)算機(jī)二年級課時35、36課題3.5框架的使用教學(xué)目標(biāo)了解什么是框架掌握框架布局的基礎(chǔ)操作教學(xué)重點(diǎn)掌握框架布局的基礎(chǔ)操作教學(xué)難點(diǎn)掌握框架布局的基礎(chǔ)操作教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:一個WEB頁面可以被劃分為若干個不同的區(qū)域,這些區(qū)域可以采用表格或?qū)拥姆绞絹盹@示,也可以用下面所要介紹的框架來完成頁面的布局與顯示。一個框架對應(yīng)于頁面的某一個區(qū)域,也對應(yīng)于一個具體的網(wǎng)頁。三9X星章也鼠葩1力■印口第點(diǎn)國工1口聞)招劭如*A<D11刈廿1?2】口槐|匕折甘」SffCDESiSHSi國依林時<ZUi-hECHHA11-T里回E!?辟HftCD?…1:陰11卜,耳格前賽閭布周附費(fèi)吧CbHM+T樂單6H7FL蒞蓑?qū)M(fèi)I8呈11刈廿1?2】口槐|匕折甘」SffCDESiSHSi國依林時<ZUi-hECHHA11-T里回E!?辟HftCD?…1:陰11卜,耳格前賽閭布周附費(fèi)吧CbHM+T樂單6H7FL蒞蓑?qū)M(fèi)I8呈ifi的代明片斷?四卬<£報(bào)回電于部件期WUBhSfoldlNlCiH4?+vA日崛.后居5W*口在捌百[潮代利,*一廠屋國^???1?Ini僧ii1????1?1??,1?IfRiin“E叱”,=5,:.”…H腿內(nèi)痛姮》鎏未對當(dāng)苜境定向?qū)m應(yīng)用洋河工誓』L性.漕如5—i-WtSKSS■育:工應(yīng)用了酶mS住?水平期口I吐自定文收觸取功…京即克£對垂《中用車時泉IE)箕文件共包頸1?,野異字燈ID?于百苴認(rèn)千件,祎式聲式小丸7IJ▼515濟(jì)式±fl正在XT!;i_)上方目苛沒由這茸任忖履性工Rtt■qMSl%lfe左對?i口右對礎(chǔ)?對齊」礪口對齊"F特國T^BEHBrSi:h&下才用右祠眼福出左凰區(qū)上方用去舊右制國下R眼斷口上萬R千方ID上萬8左懈期山上方R右W?千*U:上IM*_!.!it:.U:!KfL立制可Si.9:37利用如圖中的“插入”菜單“框架”可以插入框架。如書中的頁面由三個框架組成,故稱之為框架頁,它是一個HTML網(wǎng)頁,定義了顯示的框架數(shù)、框架的大小、框架所對應(yīng)的網(wǎng)頁及其他可定義的框架集屬性。頂部的框架包含了WEB站點(diǎn)的徽標(biāo)和導(dǎo)航知;底部的框架包含了一些版權(quán)信息;而占據(jù)頁面空間最大的中間那個框架包含主要一張課程表。案例:創(chuàng)建框架頁面(1)在DW中建立一頁新的空白頁面。
(2)單擊“插入”一一“框架”下的框架按鈕,建立框架頁。(3)保存框架及框架頁讓光標(biāo)在各個框架中出現(xiàn)后,執(zhí)行菜單的“文件”一一“保存”命令,出現(xiàn)“保存為“對話框,輸入文件名(文件名定義時,最好使用具有代表性意義的名字,可以代表框架的含義,方便以后使用。在任何框架的邊框上單擊鼠標(biāo)左鍵,選中框架頁,執(zhí)行菜單的”文件“一一”保存框架頁"命令保存框架頁網(wǎng)頁。(4)此時,中間的細(xì)線可以通過鼠標(biāo)拖曳調(diào)整左右框架的比例。(5)當(dāng)點(diǎn)擊中間的細(xì)線時,可以在屬性面板中看到??蛐辛?/p>
口框行列
口(6)按住ALT的同時,單擊一個框架或通過框架面板實(shí)現(xiàn)框架的選擇。(7)與選中框架對應(yīng)的屬性面板為框架面板,可以通過該面板修改該框架的名稱,指定該框架對應(yīng)的網(wǎng)頁等。(8)把鼠標(biāo)光標(biāo)移到頂部或中間框架,開始設(shè)計(jì)網(wǎng)頁。
網(wǎng)頁制作第四章單元備課單元課時12課時單元分析第四章模板和庫的應(yīng)用知識目標(biāo)了解模板和庫的概念了解模板和庫的區(qū)別技能目標(biāo)掌握模板的建立和基礎(chǔ)應(yīng)用技術(shù)掌握庫的建立和基礎(chǔ)應(yīng)用技術(shù)教材重點(diǎn)模板的建立模板的應(yīng)用庫的建立庫的應(yīng)用教材難點(diǎn)模板的建立模板的應(yīng)用庫的建立庫的應(yīng)用教學(xué)方法講授、多媒體演示、操作學(xué)生學(xué)習(xí)情況由于內(nèi)容比較少,但還是有些學(xué)生能理解,在實(shí)際操作中應(yīng)用到自己的作品中就是不會,也不會上交作業(yè),所以作業(yè)及時交不上來。教改及實(shí)施措多演示一些與操作有關(guān)的網(wǎng)頁,讓同學(xué)互相交流學(xué)習(xí),學(xué)施會在作品中展示內(nèi)容。
班級計(jì)算機(jī)二年級課時37——42課題4.1模板的建立4.2模板的應(yīng)用教學(xué)目標(biāo)了解什么是“資源面板”,什么是模板掌握模板的建立方法掌握模板中可編輯區(qū)域建立和取消的方法掌握如何使用模板創(chuàng)建新網(wǎng)頁掌握利用模板更新網(wǎng)頁的方法教學(xué)重點(diǎn)掌握模板的建立方法掌握模板中可編輯區(qū)域建立和取消的方法掌握如何使用模板創(chuàng)建新網(wǎng)頁掌握利用模板更新網(wǎng)頁的方法教學(xué)難點(diǎn)掌握模板中可編輯區(qū)域建立和取消的方法掌握如何使用模板創(chuàng)建新網(wǎng)頁掌握利用模板更新網(wǎng)頁的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:、模板模板就是創(chuàng)建其他文檔的樣板,在制作Word文檔或者演示文稿時很常用。在DreamweaverMX中模板功能更加靈活,可以在單獨(dú)的窗口中進(jìn)行編輯,這大大的提高了網(wǎng)站設(shè)計(jì)的擴(kuò)展性。使用模板可以將網(wǎng)站設(shè)計(jì)得風(fēng)格一致,還可以節(jié)省制作的時間,對于經(jīng)常要改變的文體、圖像、鏈接等網(wǎng)頁元素可以設(shè)置成可編輯區(qū),在網(wǎng)頁中隨時進(jìn)行修改。套用模板的頁面只需要更改模板即可實(shí)現(xiàn)全部文件的更新。創(chuàng)建模板將現(xiàn)有文檔保存為模板創(chuàng)建空白模板從資源面板中創(chuàng)建注意:1、必須先建立站點(diǎn),才能建立模板2、F11可以打開資源面板創(chuàng)建可編輯區(qū)域創(chuàng)建模板將現(xiàn)有文檔保存為模板創(chuàng)建空白模板從資源面板中創(chuàng)建注意:1、必須先建立站點(diǎn),才能建立模板2、F11可以打開資源面板創(chuàng)建可編輯區(qū)域圖像:方站點(diǎn)「收藏口叵掇空
電
臼
①若要使用資源面板』您必須先定義站點(diǎn)。插入IO|Qfl+l打開創(chuàng)建的模板文件,將鼠標(biāo)定位到要標(biāo)記為可編輯區(qū)域的位置。打開插入菜單,選擇模板對象/可編輯區(qū)域命令?;蛟诓迦朊姘宓某S妙悇e中,單擊模板按鈕上的箭頭,選擇可編輯區(qū)域命令。在新建可編輯區(qū)域?qū)υ捒蛑校瑸樵搮^(qū)域命名。注意:每個區(qū)域名稱是惟一的。不要在名稱框中使用特殊字符(如、、<、>、&等)選擇/刪除可編輯區(qū)域選取模板文檔中需要取消的可編輯區(qū)域標(biāo)記。選擇【修改】f【模板】f【刪除模板標(biāo)記】菜單命令。插入重復(fù)表格將插入點(diǎn)放在想要插入重復(fù)表格的位置。打開插入菜單,選擇模板對象/重復(fù)表格命令?;蛟诓迦朊姘宓某S妙悇e中,單擊模板按鈕上的箭頭,選擇重復(fù)表格。在插入重復(fù)表格對話框中,做相應(yīng)設(shè)置。將模板應(yīng)用到已存在的文檔打開某個文檔。打開窗口菜單,選擇資源命令,或按【F11】鍵,打開資源面板。在資源面板中,單擊左側(cè)的模板圖標(biāo),當(dāng)前站點(diǎn)中的所有模板將列出。選擇要應(yīng)用的模板名稱。單擊資源面板底部的應(yīng)用按鈕。應(yīng)用模板創(chuàng)建新文檔打開文件菜單,選擇新建命令,即打開新建文檔對話框。單擊模板選項(xiàng)卡。從模板用于列表中,選擇包含要使用的模板的站點(diǎn),然后從右側(cè)的列表中,選擇一個模板。選中當(dāng)模板改變時更新頁面復(fù)選框,單擊創(chuàng)建按鈕,模板文件在DreamweaverMllX文檔窗口中打開。管理模板重名命模塊打開資源面板。在資源面板左側(cè)的工具箱中單擊模板按鈕,打開模板列表。在模板列表中選取要重命名的模板項(xiàng),雙擊模板名稱或在選取的模板名稱上單擊鼠標(biāo)右鍵,在彈出的快捷菜單中選擇重命名命令。按【Enter】鍵結(jié)束操作?!鰟h除模板■在資源面板中,單擊要刪除的模板文件前的圖標(biāo)選取模板文件?!鰡螕裘姘逵蚁路降膭h除按鈕■更新模板模板經(jīng)過修改之后,保存時會彈出更新模板的菜單。如果沒有更新模板,可以打開模板列表。在模板列表單擊鼠標(biāo)右鍵,在彈出的快捷菜單中選擇更新站點(diǎn)命令。按【Enter】鍵結(jié)束操作?!鰧⑽臋n脫離模板■打開要脫離模板的文檔?!鲞x擇【修改】f【模板】f【從模板中分離】菜單命令即可進(jìn)行分離。分離后該文檔中的任意區(qū)域都可編輯。實(shí)戰(zhàn)使用模板制作詩歌網(wǎng)站班級計(jì)算機(jī)二年級課時43——48課題4.3庫的建立4.4庫的應(yīng)用教學(xué)目標(biāo)了解什么是庫以及模板與庫的區(qū)別掌握庫建立、修改和取消的方法掌握如何使用模板創(chuàng)建新網(wǎng)頁掌握利用模板更新網(wǎng)頁的方法教學(xué)重點(diǎn)掌握庫建立、修改和取消的方法掌握如何使用模板創(chuàng)建新網(wǎng)頁掌握利用模板更新網(wǎng)頁的方法教學(xué)難點(diǎn)掌握庫建立、修改和取消的方法掌握如何使用模板創(chuàng)建新網(wǎng)頁掌握利用模板更新網(wǎng)頁的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:庫庫是DreamweaverMX所特有個功能,是一種特殊的文件,其中包含已創(chuàng)建以便放在網(wǎng)頁上的單獨(dú)的資源或者資源拷貝的集合。庫可以存儲各種頁面元素,如圖像、表格、聲音和Flash影片等。每當(dāng)更改某個庫項(xiàng)目的內(nèi)容時,可以更新所有應(yīng)用了該庫的頁面。在使用庫時,DreamweaverMX不是向網(wǎng)頁中插入庫的內(nèi)容,而是向庫中插入一個鏈接。模板與庫的區(qū)別:模板本身是一個文件,而庫是網(wǎng)頁中的一段HTML代碼,是網(wǎng)頁中的一個元素。模板文件存放在站點(diǎn)根目錄的Templates子目錄下,擴(kuò)展名為.dwt,而把庫項(xiàng)目存放在每個站點(diǎn)的站點(diǎn)根目錄的Library子目錄下,擴(kuò)展名為.lbi。模板也不是一成不變的,即使是在已經(jīng)使用一個模板創(chuàng)建文檔之后,也還可以對該模板進(jìn)行修改。在更新使用該模板創(chuàng)建的網(wǎng)頁時,那些網(wǎng)頁中的鎖定區(qū)就會被更新,并與模板的修改相區(qū)配。使用模板的原因是大量網(wǎng)頁整體上具有相同的結(jié)構(gòu),而只是局部內(nèi)容有所不同,因此,模板一般用于網(wǎng)頁結(jié)構(gòu)基本不變,只在局部做微小改動的網(wǎng)站。而使用庫是因?yàn)榇罅烤W(wǎng)頁中都用到相同的部分,這些相同部分相對整個網(wǎng)頁只是局部的。創(chuàng)建庫創(chuàng)建庫有3種方法:打開修改菜單,選擇庫增加對象到庫命令。打開窗口菜單,選擇資源命令,單擊左側(cè)的庫圖標(biāo),將文檔中選中的對象拖入資源面板的庫分類窗口中。打開窗口菜單,選擇資源命令,單擊左側(cè)的庫圖標(biāo),再單擊資源面板底部的新建庫項(xiàng)目按鈕。注意:每個庫項(xiàng)目都以?lbi為擴(kuò)展名,保存到本站點(diǎn)根目錄下的Library文件夾下。編輯庫元素打開資源面板。選擇資源面板左側(cè)的庫圖標(biāo),顯示所有庫項(xiàng)目。打開列表中要編輯的庫項(xiàng)目。打開資源面板底部的編輯按鈕,或直接雙擊該庫項(xiàng)目。選定的庫項(xiàng)目將在文檔窗口打開。編輯庫文件,并保存其修改。應(yīng)用庫元素定位要插入庫元素的位置。打開資源面板。選擇資源面板左側(cè)的庫圖標(biāo),顯示所有庫項(xiàng)目。選擇列表中要插入的庫項(xiàng)目。選擇資源面板底部的插入按鈕,或直接拖動庫元素到文檔中。庫的編輯和網(wǎng)頁更新取消網(wǎng)頁中的庫某個網(wǎng)頁中使用了某個庫,但又想專門為該頁面編輯庫項(xiàng)目。這時,就必須先將庫與這個網(wǎng)頁分離。操作步驟:1)在當(dāng)前網(wǎng)頁中選擇要分離的庫2)單擊屬性面板上的“從源文件中分離”按鈕即可。
班級計(jì)算機(jī)二年級課時49、50課題5.1認(rèn)識Flash的工作界面教學(xué)目標(biāo)認(rèn)識Flash的工作界面掌握Flash常用工具的使用理解Flash中常用的概念教學(xué)重點(diǎn)掌握Flash常用工具的使用理解Flash中常用的概念教學(xué)難點(diǎn)掌握Flash常用工具的使用理解Flash中常用的概念教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:Flash8的默認(rèn)界面主要由以下部分組成:標(biāo)題欄、菜單欄和工具欄、工具箱、圖層、時間軸、工作區(qū)和舞臺、面板組。一、菜單欄FLASH8共有10個菜單,分別是:1文件菜單。2編輯菜單。3視圖菜單。4插入菜單。5修改菜單。6文本菜單。7命令菜單。8控制菜單。9窗口菜單。10幫助菜單。二、工具欄與其他通用軟件類似,放在屏幕的上方,可以通過菜單“窗口”1“工具欄”I“主工具欄”顯示或隱藏主工具欄。三、窗口面板1.工具箱繪圖工具:其中放置了16個實(shí)用的工具,使用這些工具可以方便地繪制和編輯各種形狀的圖形。查看工具:在編輯過程中改變顯示的比例及位置。顏色工具:用于設(shè)置線條和填充區(qū)的顏色。選項(xiàng)工具:選項(xiàng)區(qū)中的內(nèi)容為當(dāng)前激活的繪圖工具的屬性按鈕,它們是對工具區(qū)中的工具進(jìn)行補(bǔ)充說明,隨著所選擇的工具的不同,顯示出不同的信息。2.圖層與其它優(yōu)秀圖形圖象處理軟件一樣,F(xiàn)lash中也提供了層的功能,用戶可以在個層上隨意地修改該層的圖形而不影響其它層,便于動畫的編輯和管理。3.時間軸Flash動畫與普通電影動畫放映的原理相似,將一系列相似的圖畫快速地逐幀顯示出來,利用人眼的視覺暫留特性現(xiàn)成了動畫。利用時間軸可以方便地對幀進(jìn)行編輯,時間軸上的每一小格代表一幀,單擊不同的幀則在工作區(qū)和舞臺顯示對應(yīng)幀的畫面。.舞臺Flash中的舞臺就象劇院里的舞臺一樣,所有的Flash動畫都是在這里表現(xiàn)出來,用戶看到的豐富多彩的Flash動畫,都是在舞臺上表演出來的。.工作區(qū)工作區(qū)包括舞臺及其周圍的灰色區(qū)域,舞臺周圍灰色區(qū)域的內(nèi)容在Flash動畫播放文件中是看不到的,但可以在灰色區(qū)域中制作動畫,通常用做動畫的開始和結(jié)束點(diǎn)。.面板組(1)打開面板Flash8將許多面板直接放在了“窗口”菜單下。用戶可直接單擊菜單“窗口”下的相應(yīng)選項(xiàng),打開所需面板。(2)關(guān)閉面板或面板組用右鍵單擊“屬性”面板的標(biāo)題欄,從彈出的快捷菜單中選擇“關(guān)閉屬性”(3)移動面板移動面板時,將鼠標(biāo)放在面板標(biāo)題欄左側(cè)的虛孔上,當(dāng)鼠標(biāo)箭頭變成“十”字光標(biāo)時,按住鼠標(biāo)左鍵拖動,面板即被移動。(4)折疊和展開面板在面板的標(biāo)題欄上單擊鼠標(biāo),則面板收縮或展開。(5)折疊和展開面板組單擊此折疊按鈕即可折疊相應(yīng)的面板組,再次單擊折疊按鈕,則重新打開面板組。(6)重新組合面板組在Flash8中,用戶可以根據(jù)自己的需要,將多個面板組合到一起。
班級計(jì)算機(jī)二年級課時51、52課題5.2用FLASH制作LOGO教學(xué)目標(biāo)了解什么是logo掌握flash制作logo的方法學(xué)會創(chuàng)建遮罩動畫教學(xué)重點(diǎn)掌握flash制作logo的方法學(xué)會創(chuàng)建遮罩動畫教學(xué)難點(diǎn)掌握flash制作logo的方法教學(xué)方法教學(xué)一體化教學(xué)內(nèi)容:Logo是標(biāo)志、徽標(biāo)的意思,就一個網(wǎng)站來說,Logo即是網(wǎng)站的名片,它一般出現(xiàn)在網(wǎng)站首頁的左上角或用于和其他網(wǎng)站鏈接的標(biāo)志。傳統(tǒng)的Logo多為靜態(tài)圖片,但用來友情鏈接的Logo,使用動態(tài)的Logo比靜態(tài)形式。的Logo更能吸引人的視線。通過本節(jié)的實(shí)例我們學(xué)習(xí)如何用flash制作一個動態(tài)Logo。提示:為了便于interne上信息的傳播,一個統(tǒng)一的國際標(biāo)準(zhǔn)是需要的。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的匕^^目前有三種規(guī)格:1、88*31:這是互聯(lián)網(wǎng)上最普遍的Logo規(guī)格。2、120*60:這種規(guī)格用于一般大小的Logo3、120*90:這種規(guī)格用于大型Logo。實(shí)例:制作一個環(huán)保網(wǎng)站的Logo,效果如圖P115圖5-3。Logo左邊為中國環(huán)境保護(hù)徽圖案,右邊為網(wǎng)間名稱及網(wǎng)址,在“中國環(huán)保"文字上不斷以綠色色塊來回閃過。本Logo主要利用flash遮罩動畫制作。步驟:1、繪制環(huán)境保護(hù)徽圖案元件是flash中可以被不斷重復(fù)使用的一種特殊對象。在動畫中運(yùn)用元件可以顯著地減小文件的保積。Flash中有三種元件類型,分別是“圖形”、“電影剪輯”、“按鈕”。創(chuàng)建元件有三種方法,即將現(xiàn)有的對象轉(zhuǎn)換為元件、建立空元件后再編輯該元件以及導(dǎo)入元件。(1)啟動flash軟件。在“文檔屬性”對話框中設(shè)置文檔尺寸為“寬120PX,高60PX,其他為默認(rèn)值。(2)調(diào)整場景編輯區(qū)大小。執(zhí)行菜單的“查看“—一”縮放比例“命令并選擇”200%“。(3)繪制橄欖葉(4)制作橄欖枝(5)在工具箱中選擇橢圓工具,單擊屬性面板中的筆觸顏色按鈕,調(diào)出調(diào)色板,在顏色選擇器中選擇綠色,在其后面的文本框中輸入1,設(shè)置適量線的線粗為1PX,再打開“筆觸樣式”下拉列表框,從中設(shè)置適量線的線型為“實(shí)線”。
(6)再利用中橢圓工具在剛才的圓內(nèi)繪制一個圓,此時橢圓屬性面板設(shè)置如圖P1185-12所示。最后做出如圖5-18的圖案。2、創(chuàng)建動畫(1)形變動畫:形變動畫指的是圖形動畫,適用對象為圖形??梢灾谱鞒龅膭赢嬓Чㄒ苿印⒖s放、旋轉(zhuǎn)、填充漸變、變形、對象的加速和減速等。(2)遮罩動畫:遮罩層是FLASH圖層的一種類型,可以通過遮罩層中的圖形,看到下層(被遮罩)中的內(nèi)容,可以對遮罩層中的圖形建立動畫,也可以對被遮罩層中的圖形建立動畫,從而制作出奇特的動畫效果。按書P119頁的步
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025江蘇淮安市洪澤區(qū)中醫(yī)院招聘合同制專業(yè)技術(shù)人員2人(第二批)備考考試試題及答案解析
- 團(tuán)結(jié)部門的活動策劃方案
- 2025四川綿陽市中心醫(yī)院合同制工勤人員招聘3人參考考試試題及答案解析
- 2025福建福州市園開港灣經(jīng)貿(mào)有限公司招聘1人參考筆試題庫附答案解析
- 2025江蘇南通市蘇錫通科技產(chǎn)業(yè)園區(qū)招商服務(wù)有限公司第二批次招聘延期模擬筆試試題及答案解析
- 2025湖南郴州市第四人民醫(yī)院招聘(引進(jìn))高層次專業(yè)技術(shù)人才24人參考考試試題及答案解析
- 深度解析(2026)《GBT 25728-2024糧油機(jī)械 氣壓磨粉機(jī)》
- 2025人民網(wǎng)寧夏分公司招聘媒介顧問2人參考筆試題庫附答案解析
- 2026年河北張家口經(jīng)開區(qū)編辦青年就業(yè)見習(xí)崗位招聘備考筆試試題及答案解析
- 2025青海海南州同德縣人民醫(yī)院招聘消防專職人員1人參考筆試題庫附答案解析
- 數(shù)字媒體藝術(shù)設(shè)計(jì)專業(yè)認(rèn)知
- 國家開放大學(xué)《中國法律史》期末機(jī)考題庫
- 物理●山東卷丨2024年山東省普通高中學(xué)業(yè)水平等級考試物理試卷及答案
- 提升會計(jì)職業(yè)素養(yǎng)的試題及答案
- 電動吸盤出租合同協(xié)議
- 胃穿孔的相關(guān)試題及答案
- 制藥行業(yè)清潔生產(chǎn)標(biāo)準(zhǔn)
- 教育學(xué)原理知到智慧樹章節(jié)測試課后答案2024年秋浙江師范大學(xué)
- 醫(yī)學(xué)影像技術(shù)技士題庫
- 2025年業(yè)務(wù)代表合作協(xié)議模板
- 2025年國家人民衛(wèi)生出版社有限公司招聘筆試參考題庫含答案解析
評論
0/150
提交評論