![網(wǎng)頁(yè)設(shè)計(jì)與制作教案_第1頁(yè)](http://file3.renrendoc.com/fileroot_temp3/2022-3/11/a10fa42c-93ca-4ed6-b3d4-899f558dd20b/a10fa42c-93ca-4ed6-b3d4-899f558dd20b1.gif)
![網(wǎng)頁(yè)設(shè)計(jì)與制作教案_第2頁(yè)](http://file3.renrendoc.com/fileroot_temp3/2022-3/11/a10fa42c-93ca-4ed6-b3d4-899f558dd20b/a10fa42c-93ca-4ed6-b3d4-899f558dd20b2.gif)
![網(wǎng)頁(yè)設(shè)計(jì)與制作教案_第3頁(yè)](http://file3.renrendoc.com/fileroot_temp3/2022-3/11/a10fa42c-93ca-4ed6-b3d4-899f558dd20b/a10fa42c-93ca-4ed6-b3d4-899f558dd20b3.gif)
![網(wǎng)頁(yè)設(shè)計(jì)與制作教案_第4頁(yè)](http://file3.renrendoc.com/fileroot_temp3/2022-3/11/a10fa42c-93ca-4ed6-b3d4-899f558dd20b/a10fa42c-93ca-4ed6-b3d4-899f558dd20b4.gif)
![網(wǎng)頁(yè)設(shè)計(jì)與制作教案_第5頁(yè)](http://file3.renrendoc.com/fileroot_temp3/2022-3/11/a10fa42c-93ca-4ed6-b3d4-899f558dd20b/a10fa42c-93ca-4ed6-b3d4-899f558dd20b5.gif)
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、網(wǎng)頁(yè)設(shè)計(jì)和發(fā)布流程第一步是對(duì)站點(diǎn)進(jìn)行規(guī)劃第二步是創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)第三步即可開始具體的網(wǎng)頁(yè)創(chuàng)作過程最后一步是站點(diǎn)的發(fā)布第一章 站點(diǎn)的規(guī)劃與創(chuàng)建【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、規(guī)劃站點(diǎn)Web站點(diǎn)是一組具有共享屬性(如相關(guān)主題、類似的設(shè)計(jì)或共同目的等)的鏈接文檔。本地站點(diǎn):是本地硬盤中存放遠(yuǎn)程網(wǎng)
2、站所有文檔的地方(文件夾)。建立網(wǎng)站的通常做法是:在要地硬盤中建立一個(gè)文件夾用來存放網(wǎng)站的所有文件,往后就在該文件夾中創(chuàng)建和編輯文檔。待網(wǎng)頁(yè)設(shè)計(jì)和測(cè)試好之后,再把它們拷貝到網(wǎng)站上供瀏覽者瀏覽。1、規(guī)劃站點(diǎn)結(jié)構(gòu)注:規(guī)劃站點(diǎn)的結(jié)構(gòu)之前應(yīng)先用筆繪出站點(diǎn)的結(jié)構(gòu)圖(如下圖所示是一個(gè)典型的學(xué)校站點(diǎn)的結(jié)構(gòu)圖)2、規(guī)劃站點(diǎn)的瀏覽機(jī)制一般可采用以下的方法:l 創(chuàng)建返回主頁(yè)的鏈接l 顯示網(wǎng)站專題目錄l 顯示當(dāng)前位置l 搜索和索引l 反饋(將網(wǎng)頁(yè)創(chuàng)作者或網(wǎng)站管理員公布在網(wǎng)頁(yè)上,或創(chuàng)建一個(gè)E-MAIL超級(jí)鏈接,以使用戶能快速地將信息反饋到網(wǎng)站中)二、創(chuàng)建一個(gè)站點(diǎn)步驟:1、單擊“文件”-“新建”-“站點(diǎn)”命令(或單擊常
3、用工具欄中“新建網(wǎng)頁(yè)”按鈕的下拉箭頭,從打開的下拉菜單中選擇“站點(diǎn)”命令)2、選擇一種站點(diǎn)模板或向?qū)?、單擊“確定”按鈕三、站點(diǎn)的基本操作1、打開站點(diǎn):“文件”-“打開站點(diǎn)”2、刪除站點(diǎn):方法一:在Windows資源管理器中刪除一個(gè)站點(diǎn)方法二:在FrontPage中刪除站點(diǎn),在“文件夾”視圖或“網(wǎng)頁(yè)”視圖的“文件夾列表”中,右擊站點(diǎn)所對(duì)應(yīng)的目錄,在快捷菜單中單擊“刪除”命令3、站點(diǎn)的設(shè)置“工具”-“站點(diǎn)設(shè)置”,有“常規(guī)”、“參數(shù)”、“高級(jí)”、“語言”、“導(dǎo)航”、“數(shù)據(jù)庫(kù)”六個(gè)選項(xiàng)卡【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第二章 利用表格進(jìn)行網(wǎng)頁(yè)布局【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)
4、算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、 插入表格1、單擊常用工具上的“插入表格”按鈕2、單擊“表格”-“插入”-“表格”命令3、使用表格工具欄(“查看”“工具欄”-“表格”命令)4、由文本轉(zhuǎn)換(“表格”“轉(zhuǎn)換”“文本到表格”)一般以段落為分行標(biāo)記,以逗號(hào)或句號(hào)為分列標(biāo)記。二、 單元格的基本操作1、選擇單元格(“表格”“選定”“單元格
5、”)Ctrl:可選擇不相鄰的單元格Shift:選擇多個(gè)相鄰的單元格2、插入單元格(“表格”“插入”“單元格”)3、合并單元格(“表格”“合并單元格”或“表格工具欄”上的“合并單元格”按鈕)4、拆分單元格(“表格”“拆分單元格”或“表格工具欄”上的“拆分單元格”按鈕)三、填充單元格1、文本與圖像填充(“插入”“圖片”)2、對(duì)齊文本與圖像(“表格”“屬性”“單元格”,“水平對(duì)齊方式”、“垂直對(duì)齊方式”)3、修改單元格背景(“表格”“屬性”“單元格”,“背景”)4、調(diào)整邊框顏色(“表格”“屬性”“單元格”,“邊框”)5、改變單元格尺寸(“表格”“屬性”“單元格”,“指定寬度”、“指定高度”)四、修改
6、表格的行與列1、選擇行與列2、插入行與列(“表格”“插入”“行或列”)3、均分行與列(“表格工具欄”中的“平均分配行高”或“平均分配列寬”)4、刪除行與列(“表格工具欄”中的“刪除單元格”按鈕或“表格”“刪除單元格”命令)【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè) 第三章 利用框架設(shè)計(jì)網(wǎng)頁(yè)布局【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織
7、過程】1上講回顧2教授新知【授課內(nèi)容】一、認(rèn)識(shí)框架網(wǎng)頁(yè) 1、框架的概念 框架網(wǎng)頁(yè)是一種特殊的網(wǎng)頁(yè),它將自身分成幾個(gè)區(qū)域,每個(gè)區(qū)域稱作一個(gè)框架窗口(通常簡(jiǎn)稱為框架)框架具有以下特性:每個(gè)框架都可以獨(dú)立地顯示一個(gè)網(wǎng)頁(yè),各個(gè)框架窗口之間可以設(shè)立超鏈接。每個(gè)框架窗口可以賦予一個(gè)名字,以便其他URL作為目標(biāo)調(diào)用。2、框架的使用場(chǎng)合(如郵箱、論壇)通常用框架來顯示在同一個(gè)站點(diǎn)中的多個(gè)超鏈接,這樣可以不用瀏覽器中的“后退”按鈕而方便的進(jìn)行瀏覽??蚣芤策m用于類似在線書籍的應(yīng)用,將目錄顯示在左邊的框架中,單擊目錄,右邊框架中顯示相關(guān)的章節(jié)二、創(chuàng)建框架網(wǎng)頁(yè) 1、框架網(wǎng)頁(yè)的創(chuàng)建“文件”“新建”“網(wǎng)頁(yè)”,選擇“框架網(wǎng)
8、頁(yè)”選項(xiàng)卡 2、框架網(wǎng)頁(yè)模板(10種) “設(shè)置初始網(wǎng)頁(yè)”“新建網(wǎng)頁(yè)”三、框架網(wǎng)頁(yè)的保存和打開框架網(wǎng)頁(yè)的保存包括框架網(wǎng)頁(yè)自身的保存和框架窗口中網(wǎng)頁(yè)的保存。 1、框架網(wǎng)頁(yè)的保存“文件”“保存文件”或“框架”“保存網(wǎng)頁(yè)” 2、框架網(wǎng)頁(yè)的打開 “框架”“在新窗口中打開網(wǎng)頁(yè)”4、 框架網(wǎng)頁(yè)的屬性 1、框架網(wǎng)頁(yè)的屬性 “文件”“屬性”“框架間距”、“顯示邊框”2、框架的屬性 “框架”“框架屬性”五、調(diào)整框架布局 1、調(diào)整框架窗口的大?。ㄓ檬髽?biāo)拖動(dòng)或在“框架屬性”對(duì)話框中調(diào)整) 2、框架的拆分方法一:“框架”“拆分框架”(按行或按列拆分)方法二:用鼠標(biāo)拖動(dòng)拆分(按Ctrl鍵)3、框架的刪除 “框架”“刪除框
9、架”六、目標(biāo)框架當(dāng)在框架網(wǎng)頁(yè)的某一個(gè)框架中定義超鏈接時(shí),需要指定被鏈接的網(wǎng)頁(yè)顯示在哪一個(gè)框架中,即指定超鏈接的目標(biāo)框架。選擇要設(shè)置超鏈接的文字或圖像,“插入”“超鏈接”,單擊“目標(biāo)框架”、“更改目標(biāo)框架”【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第四章 使用導(dǎo)航欄【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授
10、課內(nèi)容】一、定義導(dǎo)航結(jié)構(gòu)在網(wǎng)頁(yè)內(nèi)添加導(dǎo)航欄之前,先建立該站點(diǎn)的導(dǎo)航結(jié)構(gòu)“視圖”“導(dǎo)航”按鈕二、認(rèn)識(shí)導(dǎo)航欄屬性“插入”“導(dǎo)航欄”按鈕“父層”:創(chuàng)建指向當(dāng)前網(wǎng)頁(yè)上一級(jí)網(wǎng)頁(yè)的超鏈接,并將上一級(jí)網(wǎng)頁(yè)的標(biāo)題名稱顯示在導(dǎo)航欄內(nèi)。三、創(chuàng)建導(dǎo)航欄(要在瀏覽器中才可看到實(shí)際導(dǎo)航欄效果)四、創(chuàng)建共享邊框用創(chuàng)建導(dǎo)航欄的方法只能在一個(gè)網(wǎng)頁(yè)中創(chuàng)建導(dǎo)航欄,若需要導(dǎo)航欄出現(xiàn)在站點(diǎn)內(nèi)多個(gè)網(wǎng)頁(yè)的相同位置,則可將導(dǎo)航欄插入網(wǎng)頁(yè)的共享邊框內(nèi)。右擊編輯窗口,單擊“共享邊框”命令練習(xí)二、利用框架設(shè)計(jì)一個(gè)企業(yè)網(wǎng)站的布局要求有如下內(nèi)容:關(guān)于我們、商品展示、在線訂購(gòu)、網(wǎng)上留言、聯(lián)系我們、產(chǎn)品目錄、友情鏈接等。【課程小結(jié)】【作業(yè)】15 課后練
11、習(xí)書本課后練習(xí)作業(yè)第五章 網(wǎng)頁(yè)布局功能的應(yīng)用【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、創(chuàng)建布局表格 1、創(chuàng)建布局表格 打開一個(gè)空白網(wǎng)頁(yè),并切換到“設(shè)計(jì)”視圖下,單擊“表格”菜單中的“布局表格和單元格”命令,隨后在右側(cè)彈出一個(gè)任務(wù)窗口,在該任務(wù)窗口下面程序提供了多種表格布局模板,在此單擊其中需要的模板即可
12、將該模板添加到網(wǎng)頁(yè)中。 2.繪制布局表格 如果你對(duì)模板中提供的布局表格不太滿意,還可以用手工繪制的方法創(chuàng)建一個(gè)布局表格。創(chuàng)建時(shí)首先在“新建表格和單元格”項(xiàng)中單擊“繪制布局表格”,隨后將指針移到操作窗口最左端,然后拖動(dòng)鼠標(biāo)即可繪制表格。 3、設(shè)置表格屬性插入表格后,還需對(duì)表格屬性進(jìn)行設(shè)置。在“表格屬性”項(xiàng)中設(shè)置該表格所需的屬性。 提示:在設(shè)置表格時(shí),如果要想覆蓋網(wǎng)頁(yè)的默認(rèn)邊距,并讓布局表格跨到文檔窗口的邊緣,可以將表格中的各個(gè)邊距的屬性都設(shè)置為0。在設(shè)計(jì)框架時(shí)經(jīng)常需要調(diào)整某一行或列的屬性,這時(shí)可以通過表格中列寬和行高的標(biāo)簽來完成。在操作窗口中單擊布局表格需要調(diào)整的邊框,每一側(cè)都會(huì)出現(xiàn)顯示列寬和行
13、高的標(biāo)簽。每個(gè)標(biāo)簽都包括一個(gè)下拉箭頭,如更改行高度時(shí),單擊此下拉箭頭彈出一個(gè)下拉菜單,選擇“更改行高”命令,在彈出的“行屬性”對(duì)話框中重新輸入該行高度值即可。練習(xí)三、使用布局功能設(shè)計(jì)學(xué)校網(wǎng)站要求包括有以下內(nèi)容:學(xué)校簡(jiǎn)介、校園新聞、教育教學(xué)、學(xué)生天地、校園論壇、教師之家等【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第六章 網(wǎng)頁(yè)布局設(shè)計(jì) 【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與
14、難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、文本的美化(“格式”“字體”)1、輸入文本2、美化文本(設(shè)置文本字體、字號(hào)) 注:字符的大小共有6級(jí),其中默認(rèn)級(jí)別是3。 3、設(shè)置文本效果 4、改變文本顏色 5、設(shè)置字符間距 二、 運(yùn)用邊框與陰影(“格式”“邊框與陰影”) 1、設(shè)置邊框 2、設(shè)置陰影 三、 使用列表(“格式”“項(xiàng)目符號(hào)和編號(hào)方式”) 1、添加項(xiàng)目列表 。 項(xiàng)目列表也稱為無序列表,它將在項(xiàng)目前添加標(biāo)志符號(hào)。可以將圖片作為新的項(xiàng)目標(biāo)志。經(jīng)常使用的項(xiàng)目符號(hào)有3種:實(shí)心黑點(diǎn)、空心圓圈和實(shí)心方塊。 2、添加編號(hào)列表在網(wǎng)頁(yè)中的內(nèi)容存在順序關(guān)系時(shí),可應(yīng)用編號(hào)列
15、表。3、添加定義列表定義列表就是在網(wǎng)頁(yè)內(nèi)定義詞匯、術(shù)語的列表,具體的定義內(nèi)容將以首行縮進(jìn)的方式出現(xiàn)在列表的下一行。(格式工具欄的“樣式”“定義的術(shù)語”,輸入要詞匯、術(shù)語,按回車鍵)4、設(shè)置嵌套列表要建立組合列表,可以先生成第1級(jí)列表,然后再生成第2級(jí)列表,依此類推。 建立組合列表的具體操作步驟如下: (1)先生成第1級(jí)列表 (2)將光標(biāo)移動(dòng)到擁有第2級(jí)列表的第1級(jí)列表項(xiàng)目的末尾,然后按回車鍵。將出現(xiàn)一個(gè)空的列表行。(3)單擊“格式工具欄”中的“增加縮進(jìn)”圖標(biāo)。該行變?yōu)橐粋€(gè)空白行,是沒有列表編號(hào)或項(xiàng)目符號(hào)的。再單擊一次“增加縮進(jìn)”圖標(biāo)。 (4)此時(shí)再按照建立列表的方法構(gòu)造第2級(jí)列表。(5)輸入第
16、2級(jí)列表。輸入過程中每次接回車鍵就自動(dòng)生成第2級(jí)列表項(xiàng)目。 (6)第2級(jí)列表輸入完畢后,將光標(biāo)移到別的位置或者用鼠標(biāo)在頁(yè)面的空白處單擊一下即可完成第2級(jí)列表的設(shè)置操作。 嵌套列表可以轉(zhuǎn)變?yōu)榭烧郫B大綱,這樣在瀏覽器中瀏覽時(shí),就可以展開或折疊大綱中的各個(gè)級(jí)次。生成可折疊大綱的具體操作步驟如下: (l)按生成復(fù)合列表的方法構(gòu)造好這個(gè)復(fù)合列表所有的列表級(jí)次。(2)選擇“格式”菜單中的“項(xiàng)目符號(hào)和編號(hào)方式”命令,打開“項(xiàng)目符號(hào)和編號(hào)方式”對(duì)話框,或者在列表中單擊右鍵,從彈出的菜單中選擇“列表屬性”命令。(3)在打開的對(duì)話框中,選中“啟用可折疊大綱”復(fù)選框。 (4)單擊“確定”按鈕。練習(xí)四、設(shè)計(jì)一個(gè)介紹陽(yáng)
17、江風(fēng)景及特產(chǎn)的網(wǎng)頁(yè)要求:設(shè)計(jì)一個(gè)網(wǎng)頁(yè)介紹陽(yáng)江的風(fēng)景及特產(chǎn),要用到折疊列表的方式來分別介紹陽(yáng)東、陽(yáng)西、陽(yáng)春等的不同地區(qū)的風(fēng)景名勝及特產(chǎn)?!菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第七章 網(wǎng)頁(yè)裝飾設(shè)計(jì)【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、添加圖像在瀏覽器中,能處理的圖片格式只有GIF、JPEG
18、格式和PNG格式等少數(shù)幾種圖片。1、GIF格式圖片 GIF格式最多能支持256種顏色(8位顏色)??梢跃哂型该鳌?dòng)畫等特殊效果。 2、JPEG格式文件 JPEG格式可以處理高達(dá)1670萬種顏色(24位顏色),所以在需要顯示細(xì)微的變化和使用大量的色彩處理照片時(shí)經(jīng)常使用這種格式保存文件。插入本地計(jì)算機(jī)上的圖像(“插入”“圖片”“來自文件”,“從計(jì)算機(jī)選擇一個(gè)文件”)插入WEB上的圖像(“插入”“圖片”“來自文件”,“從WEB瀏覽器來選擇網(wǎng)頁(yè)或文件”)二、處理圖像1、剪裁圖像(“圖片”工具欄“剪裁”按鈕)2、設(shè)置透明背景(“圖片”工具欄“設(shè)置透明色”按鈕)三、添加文本(“圖片”工具欄“文本”按鈕)四
19、、保存圖像注:默認(rèn)情況下,當(dāng)前站點(diǎn)的圖像文件保存在Images文件夾中五、運(yùn)用特殊效果1、調(diào)整圖片的亮度和對(duì)比度2、圖片的翻轉(zhuǎn)與旋轉(zhuǎn)3、圖片的沖蝕和黑白處理4、凹凸效果六、設(shè)置圖片對(duì)齊方式(“圖片屬性”“外觀”“布局”“對(duì)齊方式”)七、使用水平線水平線是貫穿網(wǎng)頁(yè)寬度的細(xì)灰條,用于分隔文本或加著重符。添加水平線后,可以修改其屬性來更改寬度、高度、對(duì)齊方式和顏色。如果網(wǎng)頁(yè)使用了主題,則會(huì)使用圖形來代替水平線以匹配主題。1、插入水平線2、設(shè)置水平線屬性八、 修改網(wǎng)頁(yè)背景(“格式”“背景”)1、調(diào)整背景色彩2、調(diào)整背景圖案九、創(chuàng)建交換圖像(DW 2004)1、插入交換圖像(“插入”“圖像對(duì)象”“鼠標(biāo)經(jīng)
20、過圖像”)“原始圖像”、“鼠標(biāo)經(jīng)過圖像”、“按下時(shí),前往的URL”2、 預(yù)覽交換圖像:F12【課程小結(jié)】a【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第八章 創(chuàng)建超鏈接 【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、與當(dāng)前站點(diǎn)的鏈接(“插入”“ 超鏈接”,“搜索”當(dāng)前站點(diǎn)的文件夾位置)二、與空白網(wǎng)頁(yè)的鏈接(“插
21、入”“ 超鏈接”,“創(chuàng)建一網(wǎng)頁(yè)并鏈接到該網(wǎng)頁(yè)”)三、與電子信箱的鏈接(“插入”“ 超鏈接”,“制作發(fā)送電子郵件的超鏈接”)四、與Web的鏈接(“插入”“超鏈接”,“使用WEB瀏覽器來選擇網(wǎng)頁(yè)或文件”,ALT+TAB,則網(wǎng)頁(yè)地址自動(dòng)添加到URL中)五、修改鏈接顏色(“網(wǎng)頁(yè)屬性”“背景”,“顏色”“超鏈接”、“已訪問的超鏈接”、“當(dāng)前超鏈接”) 六、使用圖像地圖月 1、創(chuàng)建熱點(diǎn) 在圖片中創(chuàng)建熱點(diǎn)的具體操作步驟如下: 選中要建立熱點(diǎn)的圖片。圖片被選中后,四周將出現(xiàn)8個(gè)控制方塊,并且“圖片工具欄”被激活。 在“圖片工具欄”中,選擇熱點(diǎn)的形狀的圖標(biāo)。可以選擇長(zhǎng)方形、圓形或多邊形。將鼠標(biāo)移動(dòng)到圖片中。這時(shí)
22、,鼠標(biāo)指針變成一支筆的模樣。用鼠標(biāo)左鍵單擊圖片中要建立熱點(diǎn)的區(qū)域并拖動(dòng)鼠標(biāo)來繪制熱點(diǎn)。盡量讓熱點(diǎn)和圖片上的特征區(qū)域相配合熱點(diǎn)繪制完畢,圖片中將出現(xiàn)該熱點(diǎn)的邊框。打開“插入超鏈接”對(duì)話框,建立到熱點(diǎn)上的超鏈接的過程與建立到文本上的超鏈接的過程基本相同。 練習(xí)五、設(shè)計(jì)一個(gè)介紹一年四季風(fēng)景的網(wǎng)站要求:用到嵌套列表、框架、超鏈接、圖像熱點(diǎn)等技術(shù)?!菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第九章 表單設(shè)計(jì)【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng)
23、,增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、 認(rèn)識(shí)表單表單的作用:表單就是瀏覽者可以在網(wǎng)頁(yè)中填寫信息的表格,其作用是接收瀏覽者填寫的信息并將其提交給表單處理程序進(jìn)行處理。二、 生成表單1、表單的創(chuàng)建與表單字段的添加“插入”“表單”2、表單向?qū)А拔募薄靶陆ā薄熬W(wǎng)頁(yè)”-“常規(guī)”“表單網(wǎng)頁(yè)向?qū)А比?表單內(nèi)容編輯1、單行文本框2、滾動(dòng)文本框3、復(fù)選框4、單選按鈕5、下拉菜單6、按鈕7、圖片8、標(biāo)簽9、隱藏的表單字段四、驗(yàn)證性表單字段(“驗(yàn)證有效性按鈕”)五、 表單處理程序右擊表單,選擇“表單屬性”
24、命令,提供了保存表單數(shù)據(jù)的三種不同處理方式:1、發(fā)送到文件(單擊“選項(xiàng)”按鈕”,進(jìn)行設(shè)置)2、發(fā)送到數(shù)據(jù)庫(kù)3、討論表單處理程序4、注冊(cè)表單處理程序5、自定義ISAPI、NSAPI、CGI或ASP腳本練習(xí)六:制作表單制作一個(gè)注冊(cè)信息表單,要求包括下面的內(nèi)容:會(huì)員帳號(hào)、您的姓名、您的性別、輸入密碼、密碼確認(rèn)、密碼提示問題、密碼提示答案、電子郵件、常用電話、收貨地址、郵政編碼、提交按鈕、重填按鈕【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十章 層及應(yīng)用(DW 2004)【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論
25、教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、層概述層(Layer)是一種 HTML 頁(yè)面元素,您可以將它定位在頁(yè)面上的任意位置。層可以包含文本、圖像或其它 HTML 文檔。層的出現(xiàn)使網(wǎng)頁(yè)從二維平面拓展到三維??梢允鬼?yè)面上元素進(jìn)行重疊和復(fù)雜的布局。 二、創(chuàng)建層方法一:“插入”“布局對(duì)象”“層”方法二:“插入”工具欄“布局”“ 描繪層”,按住鼠標(biāo)拖動(dòng)方法三:“插入”工具欄“布局”,拖動(dòng)“ 描繪層”按鈕到文檔窗口(按CTRL鍵,可
26、繪制多層)三、 通過拖動(dòng)周圍的黑色調(diào)整柄控制層的大小四、 拖動(dòng)層左上角的選擇柄可以移動(dòng)層的位置。五、 單擊層標(biāo)記可以選中一個(gè)層。(顯示層標(biāo)記的方法:“編輯”“首選參數(shù)”“分類”“不可見元素”六、顯示層面板(“窗口”“層”)1、層的隱藏與顯示2、層數(shù)3、層重疊 七、層和表格之間的轉(zhuǎn)換(在轉(zhuǎn)換為表格之前,請(qǐng)確保層沒有重疊。 )“修改”“轉(zhuǎn)換”“層到表格”若要將表格轉(zhuǎn)換為層,請(qǐng)選擇“修改”“轉(zhuǎn)換”“表格到層” 【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十一章 行為 【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教
27、學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、行為概述行為是一種利用簡(jiǎn)單直觀的語句設(shè)置手段,為網(wǎng)頁(yè)對(duì)象添加一些動(dòng)態(tài)效果和簡(jiǎn)單的交互功能的技術(shù)。行為是事件和由該事件觸發(fā)的動(dòng)作的組合。 下面給出一些常見事件的一些解釋onClick 單擊onDbclick 雙擊onKeypress按鍵onMouseDown鼠標(biāo)按下onMouseOut鼠標(biāo)移出onMouseOver鼠標(biāo)移上onMouseUp鼠標(biāo)抬起。 實(shí)例:dreamweaver中網(wǎng)頁(yè)
28、折疊菜單的制作第一步:先插入一個(gè)一行、兩列的表格,方法:?jiǎn)螕舨藛紊系摹安迦搿?,再選取“表格” ,在“行”中輸入1,在列中輸入2,在單擊“確定”。把寬和高分別設(shè)為200px和30px 在兩個(gè)單元格內(nèi)分別輸入 內(nèi)容第二步,在單元格內(nèi)插入一個(gè)層。把寬和高分別設(shè)為100px和90px 第三步:在層中插入一個(gè)三行、一列的表格,方法同第一步。并把寬和高分別設(shè)為100px和90px,以填滿這個(gè)層。在三個(gè)單元格中輸入內(nèi)容 在層的屬性欄中將“可視”設(shè)為“隱藏”,這樣在打開網(wǎng)頁(yè)時(shí)便看不見這個(gè)層 在“行為目標(biāo)”中選擇一個(gè)合適的瀏覽器,一般是選擇“IE 4.0”。然后單擊左邊的“+”按鈕,來添加行為。在彈出的菜單中
29、選擇“顯示或隱藏層” , 在彈出的窗口中選擇 “Layer1” ,就是我們剛才添加的那個(gè)層了,再單擊“顯示”接著單擊“事件”下面右邊的那個(gè)向下箭頭按鈕,在彈出菜單中選擇“當(dāng)鼠標(biāo)移上”(OnMouseOver)。再單擊“+”按鈕,選取“顯示或隱藏層”,還是選取“Layer1”,不過這次我們點(diǎn)擊的是“隱藏”(Hide)了,再確定。然后選擇“事件”,單擊“當(dāng)鼠標(biāo)移開”(OnMouseOut)?!菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十二章 HTML語言基礎(chǔ)【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)
30、式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、HTML語言概述當(dāng)我們暢游Internet時(shí),我們透過瀏覽器所看到的網(wǎng)站,是由HTML (HyperText Markup Language) 語言所構(gòu)成。HTML ( 超文件標(biāo)記語言 ) 是一種建立網(wǎng)頁(yè)文件的語言,透過標(biāo)記式的指令 (Tag),將影像、聲音、圖片、文字等連結(jié)顯示出來。 HTML標(biāo)記是由 < 和 > 所括住的指令,主要分為 : 單標(biāo)記指令、雙標(biāo)記指令 ( 由 &l
31、t; 起始標(biāo)記 >,< / 結(jié)束標(biāo)記 >所構(gòu)成 ) 。HTML網(wǎng)頁(yè)文件可由任何文本編輯器或網(wǎng)頁(yè)專用編輯器編輯,完成后 ( 以 .htm 或 .html 為文件后綴保存 ) 將HTML網(wǎng)頁(yè)文件由瀏覽器打開顯示,若測(cè)試沒有問題則可以放到服務(wù)器 (Server) 上,對(duì)外發(fā)布信息。二、HTML文件基本架構(gòu) <HTML> 文件開始 <HEAD> 標(biāo)頭區(qū)開始 <TITLE>.</TITLE> 標(biāo)題區(qū) </HEAD> 標(biāo)頭區(qū)結(jié)束 <BODY> 本文區(qū)開始 本文區(qū)內(nèi)容 </BODY> 本文區(qū)結(jié)束 說明:&l
32、t;/HTML> 文件結(jié)束 <HTML> 網(wǎng)頁(yè)文件格式。 <HEAD> 標(biāo)頭區(qū) : 記錄文件基本資料,如作者、編寫時(shí)間。 <TITLE> 標(biāo)題區(qū) : 文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi),可以在瀏覽器最上面看到標(biāo)題。 <BODY> 本文區(qū) : 文件資料,即在瀏覽器上看到的網(wǎng)站內(nèi)容。三、常用字體標(biāo)記 <Hn>.</Hn> 標(biāo)題,設(shè)定標(biāo)題字體大小, n = 1 ( 大 ) 6 ( 小 ) 會(huì)自動(dòng)跳下一行。通常用在如章節(jié)、段落等標(biāo)題上。 1、如 : <H2> 標(biāo)題 </H2> 標(biāo)題2、如 : <H3 AL
33、IGN = CENTER> 標(biāo)題 </H3> ( 標(biāo)題置中 ) 標(biāo)題3、<B>.</B> 粗體字。 如 : <B> 粗體字 </B> 粗體字 4、<I>.</I> 斜體字。 如 : <I> 斜體字 </I> 斜體字 5、<U>.</U> 加底線。 如 : <U> 加底線 </U> 加底線 6、<DEL>.</DEL> 橫線 ( 表示刪除 )。 如 : <DEL> 橫線 </DEL> 橫線
34、 7、<TT>.</TT> 打字體 ( 固定寬度文字 )。 如 : <TT> 打字體 </TT> 打字體 8、<SUP>.</SUP> 上標(biāo)字。 如 : 字體 <SUP> 上標(biāo)字 </SUP> 字體上標(biāo)字 9、<SUB>.</SUB> 下標(biāo)字。 如 : 字體 <SUB> 下標(biāo)字 </SUB> 字體下標(biāo)字 10、<!.> 注解 ( 不會(huì)顯示在瀏覽器上 ),可以多行。 如 : <! 更新日期 : 2000/1/1> 四、設(shè)定字體大小
35、、顏色、字型有關(guān)設(shè)定文字的方法共有以下幾種 : 1.設(shè)定HTML文件主體文字顏色。<BODY>.</BODY>標(biāo)記。 如 : <BODY TEXT=RED>.</BODY> 或 <BODY TEXT=#FF0000>.</BODY> 2.設(shè)定基本字體大小、顏色、字型。<BASEFONT>.</BASEFONT>標(biāo)記。 3.設(shè)定字體大小、顏色、字型。<FONT>.</FONT>標(biāo)記。 4、<BASEFONT>.</BASEFONT> 設(shè)定基本字體,SIZ
36、E = 1 7,1 ( 最小 ) 7 ( 最大 )。 如 : <BASEFONT SIZE=4> 基本字體大小為 4 </BASEFONT> 基本字體大小為 4 如 : <BASEFONT COLOR =#FF0000> 設(shè)定顏色 </BASEFONT> 設(shè)定顏色 如 : <BASEFONT FACE = 標(biāo)楷體 , 細(xì)明體 > 設(shè)定字型 </BASEFONT> 設(shè)定字型 <BIG>.</BIG> 基本字體加大。 如 : <BASEFONT SIZE=4> 基本字體大小為 4,</
37、BASEFONT> <BIG> 加大為 5 </BIG> 基本字體大小為 4,加大為 5 <SMALL>.</SMALL> 基本字體減小。 如 : <BASEFONT SIZE=4> 基本字體大小為 4,</BASEFONT> <SMALL> 減小為 3 </SMALL> 基本字體大小為 4,減小為 3 5、<FONT>.</FONT> 設(shè)定字體大小、顏色、字型,SIZE = 1 7,1 ( 最小 ) 7 ( 最大 )。 如 : <FONT SIZE=4>
38、字體大小為 4 </FONT> 字體大小為 4 如 : <BASEFONT SIZE=4> 基本字體大小為 4 <FONT SIZE=+1> +1字體大小為 5 </FONT> <FONT SIZE=-2> -2字體大小為 2 </FONT>.</BASEFONT> 基本字體大小為 4 +1字體大小為 5 -2字體大小為 2 如 : <FONT COLOR =#FF0000> 設(shè)定顏色 </FONT> 設(shè)定顏色 如 : <FONT FACE = 標(biāo)楷體 , 細(xì)明體 > 設(shè)定字
39、型 </FONT>設(shè)定字型五、常用表格標(biāo)記 <TABLE>.</TABLE> 表格指令。 相關(guān)屬性 : ·ALIGN 調(diào)整 ·BGCOLOR 背景顏色 ·BORDER 邊框 ·HEIGHT 高度 ·WIDTH 寬度 <CAPTION>.</CAPTION> 表格標(biāo)題。 <TR>.</TR> 表格列 ( </TR>可省略 ) 。 <TH>.</TH> 表格欄標(biāo)題 ( 表頭 ) 粗體字 ( </TH>可省略 ) 。 &
40、#183;COLSPAN 欄寬 ·ROWSPAN 欄高 <TD>.</TD> 表格欄資料 ( 儲(chǔ)存格 ) ( </TD>可省略 ) 。 相關(guān)屬性 : ·ALIGN 調(diào)整 ·BGCOLOR 背景顏色 ·HEIGHT 高度 ·WIDTH 寬度 ·COLSPAN 欄寬 ·ROWSPAN 欄高 六、常用區(qū)段標(biāo)記 <HR> 產(chǎn)生水平線。 如 : <HR ALING=CERTEN WIDTH=90%> <BR> 跳下一行。 如 : 太平洋網(wǎng)絡(luò)學(xué)院,<BR>
41、;網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院, 網(wǎng)上學(xué)電腦的好去處。 <P>.</P> 段落,跳下一行并加一行空白。 ( </P> 可省略 ) 如 : 太平洋網(wǎng)絡(luò)學(xué)院,<P>網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院,網(wǎng)上學(xué)電腦的好去處。 <CENTER>.</CENTER> 置中。 如 : <CENTER>置中</CENTER> 置中 <NOBR>.</NOBR> 不跳下一行。 如 : <NOBR>太平洋網(wǎng)絡(luò)學(xué)院,</NOBR>網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)
42、院,網(wǎng)上學(xué)電腦的好去處。 <PRE>.</PRE> 以文件原始格式顯示。 如 : <PRE>原始格式: 文件</PRE> 原始格式: 文件 七、常用鏈接標(biāo)記 <BASE> 設(shè)定基本URL位置或路徑,以後只要設(shè)定文件名稱即會(huì)自動(dòng)加上位置或路徑。 相關(guān)屬性 : ·HREF 鏈接的URL位址或文件 ·TARGET 指定鏈接到的URL位址或文件顯示于那一個(gè)視窗 ( 可和 <FRAME> 視窗標(biāo)記配合使用或開新的視窗 ) 如 : <BASE HREF="http :/ <A HREF=&qu
43、ot;kk.htm"></A> <BASE HREF="http : / TARGET=frame1> <A>.</A> 鏈接指令。 相關(guān)屬性 : ·HREF 鏈接的URL位址或文件 ·NAME 名稱 ·TARGET 指定鏈接到的URL位址或文件顯示于那一個(gè)視窗 ( 可和 <FRAME> 視窗標(biāo)記配合使用或開新的視窗 ) 如 : 外部鏈接 <AHREF="http :/ <A HREF="http : / TARGET=frame1><
44、/A> ·設(shè)定十秒回到首頁(yè)。 ( 若不設(shè)定HTML文件位置則再載入原HTML文件 ) <META HTTP-EQUIV="REFRESH" CONTENT=10 URL=index.htm> 設(shè)定鏈接、未鏈接部份顏色 設(shè)定鏈接、未鏈接部份顏色,用<BODY>.</BODY>標(biāo)記。 相關(guān)屬性 : ·ALINK按下鏈接部份未放開時(shí)顏色 ·LINK未看過的鏈接部份顏色 ·VLINK已看過的鏈接部份顏色 如 : <BODY LINK=#0000FF ALINK=#FF0000 VLINK=#00
45、FF00> 八、框架窗口常用標(biāo)記 <FRAMESET>.</FRAMESET> 定義分割窗口。 相關(guān)屬性 : ·BORDER 邊框 ·COLS 行 , 設(shè)定分割左右窗口寬度 ( 用,分隔,可設(shè)百分比 % ;*表示剩余部份 ) ·FRAMEBORDER 顯示邊框 ·ROWS 列 , 設(shè)定分割上下窗口高度 ( 用,分隔,可設(shè)百分比 % ;*表示剩余部份 ) FRAME> 定義窗口。 相關(guān)屬性 : ·FRAMEBORDER 顯示邊框 ·NAME 名稱 ·NORESIZE 設(shè)定是否可以調(diào)整窗口大小
46、 ·SRC 文件或URL位址 ·SCROLLING 設(shè)定是否可以卷動(dòng) NOFRAMES>.</NOFRAMES> 無支援分割窗口瀏覽器顯示文字。 IFRAME>.</IFRAME> 插入浮動(dòng)窗口。 相關(guān)屬性 : ·BORDER 邊框 ·FRAMEBORDER 顯示邊框 ·NORESIZE 設(shè)定是否可以調(diào)整窗口大小 ·SRC 文件或URL位址 ·SCROLLING 設(shè)定是否可以卷動(dòng) 舉例 如 : 浮動(dòng)窗口 <CENTER> <IF RAME FRAME BORDER=YES
47、 SCROLLING=YES SRC=c1-01.htm> </IFRAME> </CENTER> 九、設(shè)定圖片的方法共有以下幾種 : 設(shè)定HTML文件背景圖片、背景顏色。<BODY>.</BODY>標(biāo)記。 如 : <BODY BACKGROUND=A.GIF>.</BODY> 或 <BODY BGCOLOR=#000000>.</BODY> 設(shè)定圖片。<IMG>標(biāo)記。 3、設(shè)定地圖。<MAP>.</MAP>標(biāo)記。 常用圖片標(biāo)記 <IMG> 指令
48、 相關(guān)屬性 : ·ALIGN 調(diào)整 ·ALT 提示字 ·BORDER 邊框 ·HEIGHT 高度 ·SRC 文件或URL位址 ·USEMAP 地圖名稱 ·WIDTH 寬度 如 : 可插入圖片 ( GIF、JPG格式 )、AVI電影 <CENTER> <IMG SRC="./././images/pcedu_lo.gif" ALT="太平洋網(wǎng)絡(luò)學(xué)院" ALIGN=TOP BORDER=1> </CENTER> <MAP>.</MAP&
49、gt; 地圖 相關(guān)屬性 : ·NAME 名稱 <AREA> 設(shè)定地圖動(dòng)作區(qū)域 相關(guān)屬性 : ·COORDS 設(shè)定動(dòng)作區(qū)域座標(biāo) ( 左上角座標(biāo) : X1,Y1 ; 右下角座標(biāo) : X2,Y2 ) ·HREF 動(dòng)作區(qū)域連結(jié)點(diǎn) ( 可載入位址或文件 ) ·NOHREF 動(dòng)作區(qū)域連結(jié)點(diǎn)不動(dòng)作 ·SHAPE 外型 十、常用音樂標(biāo)記 <BGSOUND> 背景音樂、音效。 相關(guān)屬性 : ·LOOP 循環(huán) , 背景音樂播放次數(shù) ·SRC 文件或URL位址 (可為WAV、MIDI格式 ) 如 : <BGSOUND
50、 SRC=m-1.mid LOOP=True> 內(nèi)嵌音樂插件 <EMBED>.</EMBED> 內(nèi)嵌插件。 相關(guān)屬性 : ·HEIGHT 高度 ·WIDTH 寬度 ( 可設(shè)百分比% ) ·SRC 設(shè)定內(nèi)嵌物件的 URL 位址 ·LOOP 循環(huán) , 背景音樂播放次數(shù) ·AUTOSTART 自動(dòng)播放 如 : <EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED> 十一、【文字卷動(dòng)標(biāo)記】 <MARQUE
51、E>.</MARQUEE> 文字卷動(dòng) ( 滾動(dòng)條 )。【相關(guān)屬性】 ·BEHAVIOR = 設(shè)定卷動(dòng)方式 - ALTERNATE 交替來回卷動(dòng) - SCROLL 卷動(dòng) ( 預(yù)設(shè) ) - SLIDE 滑動(dòng) ·BGCOLOR = color 背景顏色 ·DIRECTION = 設(shè)定卷動(dòng)方向 ·HEIGHT = n 高度 ·LOOP = n 循環(huán) , 卷動(dòng)次數(shù) ( 預(yù)設(shè)循環(huán) ) ·SCROLLAMOUNT = n 設(shè)定卷動(dòng)距離 ·SCROLLDELAY = milliseconds 設(shè)定卷動(dòng)時(shí)間 ·TR
52、UESPEED = milliseconds 設(shè)定卷動(dòng)速度 ·WIDTH = n 寬度 ( 可設(shè)百分比% ) 【舉例】 例一 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>太平洋網(wǎng)絡(luò)學(xué)院</FONT></MARQUEE> 如 : <MARQUEE BGCOLOR=GREEN HEIGHT=50 BEHAVIOR=SCROLL DIRECTION=UP SCROLLA
53、MOUT=10 SCROLLDELAY=300> <FONT COLOR=WHITE><CENTER>太平洋網(wǎng)絡(luò)學(xué)院</CENTER></FONT></MARQUEE>【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十三章 使用CSS樣式【計(jì)劃課時(shí)】:3課時(shí)【授課班級(jí)】:計(jì)算機(jī)應(yīng)用一班【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué):借助多媒體手段,進(jìn)行課堂理論教學(xué);啟發(fā)式教學(xué):教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維,師生互動(dòng),增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性; 【教學(xué)重點(diǎn)與難點(diǎn)】:基礎(chǔ)知識(shí):。重點(diǎn)知識(shí):【教
54、學(xué)組織過程】1上講回顧2教授新知【授課內(nèi)容】一、CSS概述CSS(Cascading Stylesheets,層疊樣式表)是一種制作網(wǎng)頁(yè)的新技術(shù),現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持,成為網(wǎng)頁(yè)設(shè)計(jì)必不可少的工具之一。使用CSS能夠簡(jiǎn)化網(wǎng)頁(yè)的格式代碼,加快下載顯示的速度,也減少了需要上傳的代碼數(shù)量,大大減少了重復(fù)勞動(dòng)的工作量。CSS樣式有以下幾個(gè)重要的作用:1、將格式與結(jié)構(gòu)分離2、增強(qiáng)控制頁(yè)面布局的能力3、簡(jiǎn)化代碼,提高下載速度4、使維護(hù)和更新網(wǎng)頁(yè)變得更加容易5、代碼兼容性更好B二、創(chuàng)建一個(gè)新的CSS樣式1、顯示“CSS樣式”面板(“窗口”“CSS樣式”)“附加CSS樣式”按鈕、“新建CSS樣式”、“
55、編輯CSS樣式”按鈕、“刪除CSS樣式”2、創(chuàng)建自定義CSS樣式(在“CSS樣式”面板中選擇“新建CSS樣式”按鈕)類(可應(yīng)用于任何標(biāo)簽)輸入名稱:(加“.”)定義在:新建樣式表文件、僅對(duì)該文檔標(biāo)簽(重新定義特定標(biāo)簽的外觀)標(biāo)簽:(選擇標(biāo)簽)選擇類型定義在:高級(jí)(ID、上下文選擇器等)a:link:定義正常狀態(tài)下鏈接文字的樣式a:visited:定義已訪問過的鏈接文字的樣式a:hover:定義鼠標(biāo)指針移到鏈接文字時(shí)文字的樣式a:active:定義按下鼠標(biāo)左鍵時(shí)鏈接文字的樣式三、設(shè)置CSS樣式格式1、編輯CSS樣式文字格式字體、大小、粗細(xì)、樣式、變量、行高、大小寫、修飾、顏色2、編輯CSS樣式背
56、景格式背景顏色、背景圖像、重復(fù)、附件、水平位置、垂直位置3、編輯CSS樣式塊格式單詞間距、字母間距、垂直對(duì)齊、文本對(duì)齊、文字縮進(jìn)、空格、顯示4、編輯CSS樣式框格式寬、高、浮動(dòng)、清除、填充、邊界5、編輯CSS樣式邊框格式樣式、寬度、顏色6、編輯CSS樣式列表格式類型、項(xiàng)目符號(hào)圖像、位置7、編輯CSS樣式定位格式類型、顯示、寬、高、Z軸、溢出、定位、剪輯編輯CSS樣式擴(kuò)展格式分頁(yè)、視覺效果四、應(yīng)用CSS樣式 添加層疊樣式表的方法我們?yōu)榫W(wǎng)頁(yè)添加樣式表的方法有四種。1最簡(jiǎn)單的方法是直接添加在HTML的標(biāo)識(shí)符(tag)里:< Tag style=”properties”>網(wǎng)頁(yè)內(nèi)容<
57、/tag>舉個(gè)例子:< p style=”color: blue; font-size: 10pt”>CSS實(shí)例< /p>代碼說明:用藍(lán)色顯示字體大小為10pt的“CSS實(shí)例”。盡管使用簡(jiǎn)單、顯示直觀,但是這種方法不怎么常用,因?yàn)檫@樣添加無法完全發(fā)揮樣式表的優(yōu)勢(shì)“內(nèi)容結(jié)構(gòu)和格式控制分別保存”。2添加在HTML的頭信息標(biāo)識(shí)符< head>里:< head>< style type=”text/css”>< !- 樣式表的具體內(nèi)容 ->< /style>< /head>type=”text/css
58、”表示樣式表采用MIME類型,幫助不支持CSS的瀏覽器過濾掉CSS代碼,避免在瀏覽器面前直接以源代碼的方式顯示我們?cè)O(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生,還是有必要在樣式表里加上注釋標(biāo)識(shí)符“< !-注釋內(nèi)容->”。3鏈接樣式表同樣是添加在HTML的頭信息標(biāo)識(shí)符< head>里:< head>< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>< /head>*.css是單獨(dú)保存的樣式表文件,其中不能包含< style>標(biāo)識(shí)符,并且只能
59、以css為后綴。Media是可選的屬性,表示使用樣式表的網(wǎng)頁(yè)將用什么媒體輸出4聯(lián)合使用樣式表同樣是添加在HTML的頭信息標(biāo)識(shí)符< head>里:< head>< style type=”text/css”>< !-import “*.css”其他樣式表的聲明->< /style>< /head>以import開頭的聯(lián)合樣式表輸入方法和鏈接樣式表的方法很相似,但聯(lián)合樣式表輸入方式更有優(yōu)勢(shì)。因?yàn)槁?lián)合法可以在鏈接外部樣式表的同時(shí),針對(duì)該網(wǎng)頁(yè)的具體情況,做出別的網(wǎng)頁(yè)不需要的樣式規(guī)則。需要注意的是:·聯(lián)合法輸入樣式表必須以import開頭。·如果同時(shí)輸入多個(gè)樣式表有沖突的時(shí)候,將按照第一個(gè)輸入的樣式表對(duì)網(wǎng)頁(yè)排版。·如果輸入的樣式表和網(wǎng)頁(yè)里的樣式規(guī)則沖突時(shí),使用外部的樣式表。 層疊樣式表的格式 一般來說,樣式表的聲明分為選擇符(selector)和塊(block),塊里包含屬
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 文學(xué)社組社方案及招生簡(jiǎn)章范文
- 現(xiàn)代企業(yè)財(cái)務(wù)管理的全球化視角
- 全鋼爬架施工方案
- 汽車行業(yè)的品牌競(jìng)爭(zhēng)戰(zhàn)略分析
- 國(guó)慶節(jié)小吃店鋪活動(dòng)方案
- 國(guó)慶節(jié)手工干貨活動(dòng)方案
- 12《富起來到強(qiáng)起來》第一課時(shí)說課稿-2023-2024學(xué)年道德與法治五年級(jí)下冊(cè)統(tǒng)編版001
- 2023六年級(jí)英語上冊(cè) Unit 3 Winter in canada Lesson 14 Snow!It's Winter說課稿 冀教版(三起)
- 2024-2025學(xué)年新教材高中物理 第三章 恒定電流 第3節(jié) 測(cè)量金屬絲的電阻率說課稿 粵教版必修3
- 2024秋七年級(jí)數(shù)學(xué)上冊(cè) 第3章 一次方程與方程組3.4 二元一次方程組的應(yīng)用 2列二元一次方程組解實(shí)際應(yīng)用(一)說課稿(新版)滬科版
- 2025-2030年中國(guó)電動(dòng)高爾夫球車市場(chǎng)運(yùn)行狀況及未來發(fā)展趨勢(shì)分析報(bào)告
- 河南省濮陽(yáng)市2024-2025學(xué)年高一上學(xué)期1月期末考試語文試題(含答案)
- 2024年湖南高速鐵路職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)及答案解析
- 安全事故案例圖片(76張)課件
- 預(yù)應(yīng)力錨索施工方案
- 豇豆生產(chǎn)技術(shù)規(guī)程
- 奢侈品管理概論完整版教學(xué)課件全書電子講義(最新)
- 文藝美學(xué)課件
- 中藥炮制學(xué)教材
- 常見腫瘤AJCC分期手冊(cè)第八版(中文版)
- 電氣第一種第二種工作票講解pptx課件
評(píng)論
0/150
提交評(píng)論