第一篇:網(wǎng)頁(yè)教案
三、DW安裝應(yīng)用
在學(xué)網(wǎng)頁(yè)創(chuàng)建中,有一款非常重要的軟件叫DW軟件,它件全稱:Dreamweaver,被稱為網(wǎng)頁(yè)三劍客之一. DW軟件學(xué)習(xí)內(nèi)容: 1.DW軟件下載安裝
2.創(chuàng)建HTML文檔和CSS樣式表并將二者關(guān)聯(lián)起來(lái) 3.DW軟件的應(yīng)用 A.HTML文檔的創(chuàng)建 1.打開DW軟件
2.如果想創(chuàng)建一個(gè)HTML文檔,只要點(diǎn)擊“新建”下面的HTML,這個(gè)就完成了一個(gè)HTML文檔的創(chuàng)建。
3.在當(dāng)前頁(yè)面點(diǎn)擊“代碼”,就可以看到我們新建一個(gè)HTML文檔的時(shí)候,包括“聲明”、“標(biāo)簽”、“根元素”還有
標(biāo)簽及里面的第二篇:網(wǎng)頁(yè)教案3
第二章:一簡(jiǎn)單的網(wǎng)頁(yè)(5節(jié),含上操作課)
一、表格的處理
1、表格的寬度
原則:在任何一臺(tái)電腦上不應(yīng)出現(xiàn)水平滾動(dòng)條(垂直滾動(dòng)條則允許),760。
2、表格的對(duì)齊方式:隱含表格的對(duì)齊方式應(yīng)設(shè)為:居中對(duì)齊
3、表格邊框的粗細(xì):隱含表格(邊框的值為0)
4、表格相應(yīng)單元格“自動(dòng)擴(kuò)張”的解決
二、水平線的設(shè)置
1、利用
標(biāo)簽
Align:對(duì)齊方式Center:居中Right: 右對(duì)齊left: 左對(duì)齊 color:水平線的顏色width:水平線的寬度(即線有多長(zhǎng))
size:水平線的厚度(即線有多粗)noshade:是否有陰影
2、利用Photoshop制作水平線
單的水平線(垂直線)混色水平線(垂直線)
三、文字的輸入及編輯
1、空格的輸入
2、換行
1)硬換行: Enter(前后兩個(gè)段落)2)軟換行:Shift+ Enter(前后為一個(gè)段落)
四、圖片與文字混排
1、加載圖片
2、文字輸入項(xiàng)目符號(hào)和編號(hào)
3、圖片和文字的排列方式
五、波浪線的制作
六、加載日期(不會(huì)自動(dòng)更新,僅是最近保存網(wǎng)頁(yè)的系統(tǒng)日期)
七、給文字增加滾動(dòng)條
1、層的應(yīng)用
2、層與表格的混合應(yīng)用 注意: 1)先加載表格
2)向表格中插入層,調(diào)整層的大小(也就是文本要顯示的區(qū)域)3)將層的溢出屬性設(shè)置為:Auto Position:relative(相對(duì)定位)Left:0px Top:0px
八、利用Photoshop處理圖片
1、抓取圖片
2、裁切圖片
3、在圖片上添加文字
4、保存圖片
九、設(shè)置頁(yè)面屬性
上
機(jī)
實(shí)
驗(yàn)
一、實(shí)驗(yàn)題目:
制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)
二、實(shí)驗(yàn)?zāi)康模?/p>
熟悉水平線的制作方法、體會(huì)表格在網(wǎng)頁(yè)布局中的作用,當(dāng)多個(gè)元素被加載在頁(yè)面中時(shí)如何排版。
三、實(shí)驗(yàn)要求:
1、利用層將文本區(qū)域增加滾動(dòng)條
2、設(shè)置水平線
3、對(duì)圖片和文字進(jìn)行排版
4、增加系統(tǒng)日期
三、實(shí)驗(yàn)步驟(請(qǐng)寫出在網(wǎng)頁(yè)中對(duì)文本區(qū)域設(shè)置滾動(dòng)條時(shí)的操作步驟)
第三篇:網(wǎng)頁(yè)教案2
注意:做為一個(gè)優(yōu)秀的網(wǎng)站工作者及維護(hù)者應(yīng)該有很強(qiáng)的邏輯思維能力(即所有的文件都放在什么位置自己心里要有譜,管理維護(hù)起來(lái)能夠得心應(yīng)手),不能讓打開你網(wǎng)站的用戶感到“亂的一塌糊涂”。
第一章:站點(diǎn)的管理及文本的應(yīng)用
(15節(jié),含上機(jī)操作課)
一、站點(diǎn)的操作
1、新建站點(diǎn)(a):
新建一個(gè)網(wǎng)站,所有資源手動(dòng)放置在站點(diǎn)所對(duì)應(yīng)的文件夾(或者子文件夾)下面。
2、新建站點(diǎn)(b):
網(wǎng)站已事先做好,新建一個(gè)站點(diǎn)是為了維護(hù)網(wǎng)站的方便,即修改網(wǎng)頁(yè)內(nèi)容的方便。
3、刪除站點(diǎn):站點(diǎn)所對(duì)應(yīng)的主文件夾及里面的資源依然存在。
4、編輯站點(diǎn):若改變站點(diǎn)所對(duì)應(yīng)的路徑,則文件夾里面的資源將丟失。
二、為什么要引入“站點(diǎn)”的概念
1、管理維護(hù)的方便
2、解決文件調(diào)用時(shí)絕對(duì)路徑(站點(diǎn)根目錄)和相對(duì)路徑(文檔)的問(wèn)題
3、一般情況下,站點(diǎn)與網(wǎng)站的主文件夾是一一對(duì)應(yīng)的,不能出現(xiàn)冗余的情況。
三、建立站點(diǎn)時(shí)應(yīng)注意
1、站點(diǎn)名稱、網(wǎng)站對(duì)應(yīng)的主文件夾及主文件夾下所對(duì)應(yīng)的所有資源的名稱一律不能用漢字命名
2、本地根文件夾書寫時(shí)避免發(fā)生以下錯(cuò)誤: 1)D;toyato2)D:/toyato3)D://toyato 4)D: oyato(不要留有空格)5)D: toyato
3、能夠正確區(qū)分站點(diǎn)名稱與本地根文件夾(網(wǎng)站所對(duì)應(yīng)的主文件夾)的異同
4、切忌將所有的資源全部放在根文件夾下,合理利用子文件夾
5、文件夾的層次不要太深,一般合理就行
四、文本字體的輸入及屬性的設(shè)置
1、文本的輸入
2、空格的輸入
3、標(biāo)點(diǎn)符號(hào)的輸入
4、如何將文本類型設(shè)置為特殊字體(操作系統(tǒng)中默認(rèn)沒(méi)有的字體)
五、將文本設(shè)置為動(dòng)態(tài)文本
1、將文本放置在之間
2、
3、
Alternate:左右或者上下交替滾動(dòng) Scroll:循環(huán)滾動(dòng)
Slide:滾動(dòng)一次到達(dá)邊界后靜止
2)bgcolor:滾動(dòng)區(qū)域的背景顏色3)height、width:滾動(dòng)區(qū)域高度及寬度 4)direction:文本的滾動(dòng)方向
up :向上滾動(dòng) down:向下滾動(dòng) left:向左滾動(dòng) right:向右滾動(dòng))onClick(單擊)、onDblClick(雙擊)、onMouseOut(鼠標(biāo)移開)、onMouseOver(鼠標(biāo)經(jīng)過(guò))時(shí)文本的運(yùn)動(dòng)狀態(tài)
例如:onMouseOut=“this.stop()” onMouseOver=“this.start()” 說(shuō)明:
this.stop():當(dāng)前的對(duì)象停止運(yùn)動(dòng) this.start():當(dāng)前的對(duì)象開始運(yùn)動(dòng)
6)scrollamount:設(shè)定活動(dòng)字幕的滾動(dòng)速度,單位為像素 7)scrolldelay:設(shè)定活動(dòng)字幕兩次之間的延遲時(shí)間,單位為毫秒,值大了會(huì)有一步一停的效果。
8)loop:循環(huán)滾動(dòng)的次數(shù) 若值為-1,無(wú)限循環(huán)
注意:N(n>=o),循環(huán)n次后停止?jié)L動(dòng),若n為小數(shù),則自動(dòng)取整,為去掉小數(shù)點(diǎn)后的整數(shù)
上 機(jī) 實(shí) 驗(yàn)
一、實(shí)驗(yàn)題目:
1、熟悉站點(diǎn)的常規(guī)操作
2、文本的輸入及屬性設(shè)置
二、實(shí)驗(yàn)要求:
1、建立一個(gè)站點(diǎn),并將所有文件放在站點(diǎn)對(duì)應(yīng)的文件夾下
2、建立一個(gè)網(wǎng)頁(yè),向其中輸入文本
3、對(duì)文本的屬性進(jìn)行設(shè)置
4、將文本設(shè)置為滾動(dòng)文本,當(dāng)鼠標(biāo)經(jīng)過(guò)文本時(shí)停止?jié)L動(dòng),鼠標(biāo)移開文本時(shí)開始滾動(dòng)。
三、實(shí)驗(yàn)步驟(請(qǐng)寫出在對(duì)文本進(jìn)行相關(guān)設(shè)置后,“代碼視圖”中關(guān)于文字修飾的相應(yīng)代碼)
第四篇:網(wǎng)頁(yè)教案1
網(wǎng)頁(yè)制作---序言(理論課:1節(jié))
一、常用網(wǎng)頁(yè)制作工具
1、FontPage2000(Office辦公軟件)
2、Dreamweaver MX 2004
二、美化網(wǎng)頁(yè)的工具
1、Flash動(dòng)畫(動(dòng)畫制作工具)
2、PhotoShop(圖像處理工具)
3、Premiere(非線性視頻處理工具,音樂(lè)和視頻剪輯工具)
三、網(wǎng)頁(yè)類型
1、靜態(tài)網(wǎng)頁(yè)
2、動(dòng)態(tài)網(wǎng)頁(yè)
四、常用概念
1、網(wǎng)頁(yè)、網(wǎng)站
2、站點(diǎn)、文件夾
3、客戶端、服務(wù)器端
五、Dreamweaver MX 2004啟動(dòng)
1、桌面
2、開始按鈕
3、我的電腦
六、Dreamweaver MX 2004工作界面
1、標(biāo)題欄
2、菜單欄
3、常用快捷鈕
4、視圖類型
5、編輯區(qū)
6、面板組
七、建立站點(diǎn)的方法
注意:
1、自己建立網(wǎng)站所用到的文件(網(wǎng)頁(yè)、圖片、聲音、動(dòng)畫、視頻等)必須放在站點(diǎn)所對(duì)應(yīng)的文件夾下
2、站點(diǎn)與文件夾的名字可相同,也可不同
3、網(wǎng)頁(yè)的測(cè)試方法
實(shí) 驗(yàn)
實(shí)驗(yàn)題目:
1、熟悉Dreamweaver MX 2004的工作界面
2、建立站點(diǎn)(包含網(wǎng)頁(yè)、圖像、動(dòng)畫及文件夾)
第五篇:網(wǎng)頁(yè)制作教案
網(wǎng)頁(yè)制作與設(shè)計(jì)教案
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁(yè)中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁(yè)的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡(jiǎn)單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................13 3.2 在頁(yè)面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁(yè)中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁(yè)設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語(yǔ)言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語(yǔ)句、循環(huán)語(yǔ)句和過(guò)程.............................................................20 4.3 VBSCRIPT基本語(yǔ)句.............................................................................................................20
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程。【教學(xué)目的】
使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí),激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣。【教學(xué)重點(diǎn)】
網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)難點(diǎn)】
理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)方式】
講授式、討論式、案例分析式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁(yè)工場(chǎng)》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡(jiǎn)稱,一般也稱之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)
Web最大的特點(diǎn)是使用了超文本(Hypertext)WWW采用C/S(客戶機(jī)/服務(wù)器)工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP(Hyper Text Transfer Protocol,超文本傳輸協(xié)議)作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機(jī)名或IP地址:端口號(hào)/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標(biāo)志的使用。【教學(xué)方式】
討論式、案例分析式、練習(xí)式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語(yǔ)法
1、雙標(biāo)記
語(yǔ)法:
<標(biāo)記>內(nèi)容標(biāo)記>
2、單標(biāo)記 語(yǔ)法:<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語(yǔ)法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語(yǔ)句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過(guò)本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無(wú)序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>...... EM>,強(qiáng)調(diào)文字,通常用斜體。
< STRONG>...... STRONG >,特別強(qiáng)調(diào)的文字,通常用黑體。
......,以等寬體顯示西文字符。
......,使文字大小相對(duì)于前面的文字增大一級(jí)。
......,使文字大小相對(duì)于前面的文字減小一級(jí)。......,使文字成為前一個(gè)字符的上標(biāo)。......,使文字成為前一個(gè)字符的下標(biāo)。
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始,以“;”結(jié)束,一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行
標(biāo)記
屬性:Width,Size,Align,Noshade,color 2.2.11 使用列表
1、無(wú)序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說(shuō)明
- 列表?xiàng)l目2
- 條目2的說(shuō)明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁(yè)中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性,熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁(yè)的基礎(chǔ)。超級(jí)鏈接標(biāo)志中,書簽鏈接是一類特殊的鏈接方式,理解和使用書簽鏈接學(xué)習(xí)HTML中超級(jí)鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志。【教學(xué)目的】
使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作。【教學(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對(duì)應(yīng)標(biāo)志及屬性的含義。【教學(xué)方式】
案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁(yè)中插入表格
表格的基本構(gòu)成元素:表頭,單元格,列,行
第一行第一列 | 第一行第二列 |
第二行第一列 | 第二行第二列 |