HTML CSS JavaScript教學(xué)教案_第1頁
HTML CSS JavaScript教學(xué)教案_第2頁
HTML CSS JavaScript教學(xué)教案_第3頁
HTML CSS JavaScript教學(xué)教案_第4頁
HTML CSS JavaScript教學(xué)教案_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、HTML CSS JavaScript網(wǎng)頁制作教學(xué)教案第1講課時(shí)內(nèi)容HTML基礎(chǔ)授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容þ在當(dāng)今社會(huì)中，網(wǎng)絡(luò)已成為人們生活的一部分，網(wǎng)頁設(shè)計(jì)技術(shù)已成為學(xué)習(xí)計(jì)算機(jī)的重要內(nèi)容之一。目前大部分網(wǎng)頁都采用可視化網(wǎng)頁編輯軟件來制作的，但是無論采用哪一種網(wǎng)頁編輯軟件，最后都是將所設(shè)計(jì)的網(wǎng)頁轉(zhuǎn)化為HTML。HTML是搭建網(wǎng)頁的基礎(chǔ)語言，如果不了解HTML，就不能靈活地實(shí)現(xiàn)想要的網(wǎng)頁效果。本章就來介紹HTML的基本概念和編寫方法以及瀏覽HTML文件的方法，使讀者對(duì)HTML有個(gè)初步的了解，從而為后面的學(xué)習(xí)打下基礎(chǔ)。教學(xué)重點(diǎn)了解HTML的基本概念掌握HTML文件的編寫方法 掌握使用

2、瀏覽器瀏覽HTML文件 內(nèi)容大綱 1.1 HTML的基礎(chǔ)概念1.1.1 HTML簡(jiǎn)介1.1.2 HTML文件的 基本結(jié)構(gòu)1.1.3 認(rèn)識(shí)HTML標(biāo)記1.2 HTML文件的編寫方法 1.2.1使用筆記本手工編寫HTML1.2.2使用Dreamweaver編寫HTML文件1.3使用瀏覽器瀏覽HTML文件1.3.1查看頁面效果1.3.2查看源文件1.4練習(xí)題第2講課時(shí)內(nèi)容HTML基本標(biāo)記授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容þ一個(gè)完整的HTML文檔必須包含3個(gè)部分：一個(gè)由<html>元素定義的文檔版本信息，一個(gè)由<head>定義各項(xiàng)聲明的文檔頭部和一個(gè)由<body&g

3、t;定義的文檔主體部分。<head>作為各種聲明信息的包含元素出現(xiàn)在文檔的頂端，并且要先于<body>出現(xiàn)。而<body>用來顯示文檔主體內(nèi)容。文字是網(wǎng)頁中最基本的信息載體，文字通過不同的排版方式、不同的設(shè)計(jì)風(fēng)格排列在網(wǎng)頁上，提供了豐富的信息。文字的控制與布局在網(wǎng)頁設(shè)計(jì)中占了很大比例，因此掌握好文字的使用，對(duì)于網(wǎng)頁制作來說是最基本的。本章就來講解這些基本標(biāo)記的使用，這些都是一個(gè)完整的網(wǎng)頁必不可少的。教學(xué)重點(diǎn)掌握HTML頭部標(biāo)記 掌握標(biāo)題標(biāo)記 掌握元信息標(biāo)記 掌握頁面的主體標(biāo)記 掌握頁面注釋標(biāo)記內(nèi)容大綱 2.1 HTML頭部標(biāo)記head2.2標(biāo)題標(biāo)記title

4、2.3元信息標(biāo)記meta2.3.1設(shè)置頁面關(guān)鍵字2.3.2設(shè)置頁面說明2.3.3定義編輯工具2.3.4設(shè)置作者信息2.3.5設(shè)置網(wǎng)頁文字及語言2.3.6設(shè)置網(wǎng)頁的定制跳轉(zhuǎn)2.4頁面注釋標(biāo)記<！- ->2.5標(biāo)題字2.5.1標(biāo)題字標(biāo)記h2.5.2標(biāo)題字對(duì)齊屬性align2.6段落標(biāo)記2.6.1段落標(biāo)記p2.6.2換行標(biāo)記br2.6.3不換行標(biāo)記nobr2.7水平線2.8其他標(biāo)記2.8.1插入空格2.8.2插入特殊符號(hào)2.9練習(xí)題第3講課時(shí)內(nèi)容建立超鏈接授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容þ超級(jí)鏈接是HTML文檔的最基本特征之一。超級(jí)鏈接的英文名是hyperlink，它能夠讓瀏覽者

5、在各個(gè)獨(dú)立的頁面之間方便地跳轉(zhuǎn)。每個(gè)網(wǎng)站都是由眾多的網(wǎng)頁組成，網(wǎng)頁之間通常都是通過鏈接方式相互關(guān)聯(lián)的。超鏈接的范圍很廣，可以將文檔中的任何文字及任意位置的圖片設(shè)置為超級(jí)鏈接。超鏈接有外部鏈接、電子郵件鏈接、錨點(diǎn)鏈接、空鏈接、腳本鏈接 。教學(xué)重點(diǎn)了解超級(jí)鏈接的基本知識(shí) 掌握內(nèi)部鏈接 掌握錨點(diǎn)鏈接 掌握外部鏈接 內(nèi)容大綱 3.1 超鏈接的基本知識(shí) 3.1.1 絕對(duì)路徑 3.1.2 相對(duì)路徑 3.2 內(nèi)部鏈接 3.2.1 認(rèn)識(shí)內(nèi)部鏈接 3.2.2 鏈接的目標(biāo)窗口 3.2.3建立錨點(diǎn)3.3錨點(diǎn)鏈接 3.3.1建立同一頁面中的錨點(diǎn) 3.3.2建立其他頁面中的錨點(diǎn) 3.4 外部鏈接 3.4.1 鏈接到外部

6、網(wǎng)站 3.4.2 鏈接到E-mail 3.4.3 鏈接到FTP 3.4.4 鏈接到Telnet 3.4.5 下載文件 3.5練習(xí)題第4講課時(shí)內(nèi)容使用圖像授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容圖像是網(wǎng)頁中不可缺少的元素，巧妙地在網(wǎng)頁中使用圖像可以為網(wǎng)頁增色不少。網(wǎng)頁美化最簡(jiǎn)單、最直接的方法就是在網(wǎng)頁上添加圖像，圖像不但使網(wǎng)頁更加美觀、形象和生動(dòng)，而且使網(wǎng)頁中的內(nèi)容更加豐富多彩。利用圖像創(chuàng)建精美網(wǎng)頁，能夠給網(wǎng)頁增加生機(jī)，從而吸引更多的瀏覽者。教學(xué)重點(diǎn)了解圖像的格式 掌握插入圖像的方法 掌握?qǐng)D像的超鏈接 內(nèi)容大綱 4.1圖像的格式 4.2插入圖像 4.2.1插入圖像標(biāo)記img 4.2.2圖像的源文件src

7、4.2.3圖像的提示文字alt 4.2.4圖像的寬度和高度width、heught 4.3圖像的超鏈接 4.3.1圖像的超鏈接 4.3.2圖像熱區(qū)鏈接 4.4練習(xí)題第5講課時(shí)內(nèi)容使用列表授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容列表是一種非常有用的數(shù)據(jù)排列方式，它以列表的形式來顯示數(shù)據(jù)。HTML中共有3種列表，分別是無序列表、有序列表和定義列表。無序列表的所有列表項(xiàng)目之間沒有先后順序之分。有序列表的列表項(xiàng)目是有先后順序之分的。定義列表是一組帶有特殊含義的列表，一個(gè)列表項(xiàng)目里包含條件和說明兩部分。教學(xué)重點(diǎn)了解列表標(biāo)記概述 掌握有序列表 掌握無序列表 掌握定義列表 掌握菜單列表 內(nèi)容大綱5.1認(rèn)識(shí)列表標(biāo)記5.

8、2有序列表5.2.1游戲列表ol5.2.2有序列表的序號(hào)類型type5.2.3有序列表的起始數(shù)值start5.4練習(xí)題第6講課時(shí)內(nèi)容使用表格授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容表格是網(wǎng)頁制作中使用最多的工具之一，在制作網(wǎng)頁時(shí)，使用表格可以更清晰地排列數(shù)據(jù)。但在實(shí)際制作過程中，表格更多地用在網(wǎng)頁布局定位上。很多網(wǎng)頁都是以表格布局的，這是因?yàn)楸砀裨谖谋竞蛨D像的位置控制方面都有很強(qiáng)的功能。靈活、熟練地使用表格，在網(wǎng)頁制作時(shí)會(huì)有如虎添翼的感覺。教學(xué)重點(diǎn)掌握創(chuàng)建表格 掌握設(shè)置表格基本屬性 掌握設(shè)置表格的邊框 掌握設(shè)置表格背景 掌握設(shè)置表格的行屬性 掌握調(diào)整單元格屬性 內(nèi)容大綱6.1創(chuàng)建表格6.1.1表格的基本

9、構(gòu)成table、tr、td6.1.2設(shè)置表格的標(biāo)題caption6.1.3表頭th6.2表格基本屬性6.2.1 表格寬度width6.2.2 表格高度height6.2.3 表格對(duì)齊方式align6.3 表格的邊框6.3.1 表格邊框?qū)挾萣order6.3.2 表格邊框顏色bordercolor6.3.3 內(nèi)框?qū)挾萩ellspacing6.3.4 表格內(nèi)文字與邊框間距cellpadding6.4 表格背景6.4.1 表格背景顏色bgcolor6.4.2 表格背景圖像6.5 表格的行屬性6.5.1 高度控制height6.5.2 邊框顏色bordercolor6.5.3 行背景bgcolor、b

10、ackground6.5.4 行文字的水平對(duì)齊方式align6.5.5 行文字的垂直對(duì)齊方式valign6.6 單元格屬性6.6.1 單元格大小width、height6.6.2 水平跨度colspan6.6.3 垂直跨度rowspan6.6.4 對(duì)齊方式align、valign6.6.5 單元格的背景顏色6.6.6 單元格的邊框顏色bordercolor6.6.7 單元格的亮邊框bordercolorlight6.6.8 單元格的暗邊框bordercolordark6.6.9 單元格的背景圖像background6.7 表格的結(jié)構(gòu)6.7.1 表格的表首標(biāo)記<thead>6.7.2

11、 表格的表主體標(biāo)記<tbody>6.7.3 表格的表尾標(biāo)記<tfoot>6.8練習(xí)題第7講課時(shí)內(nèi)容使用列表授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容表單的用途很多，在制作網(wǎng)頁，特別是制作動(dòng)態(tài)網(wǎng)頁時(shí)常常會(huì)用到。表單主要用來收集客戶端提供的相關(guān)信息，使網(wǎng)頁具有交互功能。在網(wǎng)頁制作的過程中，常常需要使用表單，如進(jìn)行會(huì)員注冊(cè)、網(wǎng)上調(diào)查和搜索等。訪問者可以使用如文本域、列表框、復(fù)選框以及單選按鈕之類的表單對(duì)象輸入信息，然后單擊某個(gè)按鈕提交這些信息 。教學(xué)重點(diǎn)表單標(biāo)記 插入表單對(duì)象 菜單和列表文本域標(biāo)記 id標(biāo)記 內(nèi)容大綱7.1 表單標(biāo)記form7.1.1 提交表單action7.1.2 表單

12、名稱name7.1.3 傳送方式method7.1.4 編碼方式enctype7.1.5 目標(biāo)顯示方式target7.2 插入表單對(duì)象7.2.1 文字字段text7.2.2 密碼域password7.2.3 單選按鈕radio7.2.4 復(fù)選框checkbox7.2.5 普通按鈕button7.2.6 提交按鈕submit7.2.7 重置按鈕reset7.2.8 圖像域images7.2.9 隱藏域hidden7.2.10 文件域file7.3 菜單和列表7.3.1 下拉菜單7.3.2 列表項(xiàng)7.4 文本域標(biāo)記textarea7.5 id標(biāo)記7.6 創(chuàng)建表單實(shí)例7.7練習(xí)題第8講課時(shí)內(nèi)容添加多

13、媒體授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容教學(xué)內(nèi)容：在網(wǎng)頁中，除了之前講到的可以插入文本和圖像外，還可以插入動(dòng)畫、聲音、視頻等媒體元素，如滾動(dòng)效果、Flash及Midi聲音文件等。通過對(duì)本章的學(xué)習(xí)，讀者可以學(xué)習(xí)到多媒體文件的使用，從而豐富網(wǎng)頁的效果，吸引瀏覽者的注意。教學(xué)重點(diǎn)掌握設(shè)置滾動(dòng)效果 掌握插入多媒體文件內(nèi)容大綱8.1 設(shè)置滾動(dòng)效果8.1.1 滾動(dòng)標(biāo)記marquee8.1.2 滾動(dòng)方向direction8.1.3 滾動(dòng)方式behavior8.1.4 滾動(dòng)速度scrollamount8.1.5 滾動(dòng)延遲scrolldelay8.1.6 滾動(dòng)循環(huán)loop8.1.7 滾動(dòng)范圍width、height8

14、.1.8 滾動(dòng)背景顏色bgcolor8.1.9 空白空間hspace、vspace8.2 插入多媒體文件8.2.1 插入flash動(dòng)畫8.2.2 插入音頻和視頻文件8.3練習(xí)題第9講課時(shí)內(nèi)容HTML5入門基礎(chǔ)授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容HTML5是一種網(wǎng)絡(luò)標(biāo)準(zhǔn)，相比現(xiàn)有的 HTML4.01 和XHTML 1.0，可以實(shí)現(xiàn)更強(qiáng)的頁面表現(xiàn)性能，同時(shí)充分調(diào)用本地的資源，實(shí)現(xiàn)不輸于app的功能效果。HTML5帶給了瀏覽者更好的視覺沖擊，同時(shí)讓網(wǎng)站程序員更好的與HTML語言“溝通”。雖然現(xiàn)在HTML5還沒有完善，但是對(duì)于以后的網(wǎng)站建設(shè)擁有更好的發(fā)展。教學(xué)重點(diǎn)認(rèn)識(shí)HTML5 掌握HTML5與HTML4的

15、區(qū)別 掌握HTML5新增的元素和廢除的元素 熟悉新增的屬性和廢除的屬性 掌握創(chuàng)建簡(jiǎn)單的HTML5頁面內(nèi)容大綱9.1 認(rèn)識(shí)HTML59.2 HTML5與HTML4的區(qū)別9.2.1 HTML5的語法變化9.2.2 HTML5中的標(biāo)記方法9.2.3 HTML5語法中的3個(gè)要點(diǎn)9.2.4 HTML5與HTML4在搜索引擎優(yōu)化的對(duì)比9.3 HTML5新增的元素和廢除元素9.3.1 新增的結(jié)構(gòu)元素9.3.2 新增塊級(jí)元素9.3.3 新增的行內(nèi)的語義元素9.3.4 新增的嵌入多媒體元素與交互性元素9.3.5 新增的input元素的類型9.3.6 廢除的元素9.4 新增的屬性和廢除的屬性9.4.1 新增的屬性

16、9.4.2 廢除的屬性9.5練習(xí)題第10講課時(shí)內(nèi)容 HTML5的結(jié)構(gòu)授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容在HTML5的新特性中，新增的結(jié)構(gòu)元素主要功能就是解決之前在HTML4中Div漫天飛舞的情況，增強(qiáng)網(wǎng)頁內(nèi)容的語義性，這對(duì)搜索引擎而言，將更好識(shí)別和組織索引內(nèi)容。合理地使用這種結(jié)構(gòu)元素，將極大地提高搜索結(jié)果的準(zhǔn)確度和體驗(yàn)。新增的結(jié)構(gòu)元素，從代碼上看，很容易看出主要是消除Div，即增強(qiáng)語義，強(qiáng)調(diào)HTML的語義化。教學(xué)重點(diǎn)新增的主體結(jié)構(gòu)元素 新增的非主體結(jié)構(gòu)元素內(nèi)容大綱10.1 新增的主體結(jié)構(gòu)元素10.1.1 article元素10.1.2 section元素10.1.3 nav元素10.1.4 asi

17、de元素10.2 新增的非主體結(jié)構(gòu)元素10.2.1 header元素10.2.2 header元素10.2.3 footer元素10.2.4 address元素10.3練習(xí)題第11講課時(shí)內(nèi)容HTML5開發(fā)實(shí)戰(zhàn)授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容在過去的10年里，網(wǎng)頁設(shè)計(jì)師使用 Flash、JavaScript 或其他復(fù)雜的軟件和技術(shù)來創(chuàng)建網(wǎng)站?，F(xiàn)在可以使用HTML5實(shí)現(xiàn)交互式服務(wù)、單頁UI、交互式游戲、復(fù)雜業(yè)務(wù)應(yīng)用。憑借對(duì)標(biāo)準(zhǔn)驅(qū)動(dòng)的移動(dòng)應(yīng)用開發(fā)的支持，以及各種強(qiáng)大特性，HTML5迎來了它的黃金時(shí)代。本章就來介紹HTML5開發(fā)實(shí)戰(zhàn)。教學(xué)重點(diǎn)掌握HTML5 視頻video掌握HTML5 音頻Audio掌

18、握HTML5 地理定位 掌握HTML5 畫布canvas 掌握HTML5 SVG 內(nèi)容大綱11.1 HTNL5視頻video11.1.1 video概述11.1.2 在網(wǎng)頁中添加視頻文件11.1.3 鏈接不同的視頻文件11.2 HTML5音頻Audio11.2.1 Audio元素簡(jiǎn)介11.2.2 隱藏audio播放器11.2.3 使用audio元素的事件11.3 HTML5地理定位11.3.1 地理定位方法11.3.2 處理拒絕和錯(cuò)誤11.3.3 在地圖上顯示你的位置11.4 HTML5畫布Canvas11.4.1 canvas元素11.4.2 基本的繪圖操作11.4.3 線性漸變11.4.4

19、 徑向漸變11.4.5 繪制精美時(shí)鐘11.5 HTML5SVG11.5.1 SVG概述11.5.2 圖形繪制11.5.3 文本與圖像11.5.4 筆畫與填充11.5.5 動(dòng)畫11.6練習(xí)題第12講課時(shí)內(nèi)容使用CSS樣式表授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容通過CSS樣式定義，可以將網(wǎng)頁制作得更加絢麗多彩。采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確地控制。用CSS不僅可以做出令瀏覽者賞心悅目的網(wǎng)頁，還能給網(wǎng)頁添加許多特效教學(xué)重點(diǎn)了解CSS簡(jiǎn)介 掌握CSS的使用 CSS的字體屬性 顏色及背景屬性 文本屬性 邊距與填充屬性邊框?qū)傩?定位屬性 列表屬性 光標(biāo)屬性 濾鏡屬性

20、內(nèi)容大綱12.1 認(rèn)識(shí)CSS12.2 使用CSS12.2.1 CSS的基本語法12.2.2 添加CSS的方法12.3 字體屬性12.3.1 字體font-family12.3.2 字號(hào)font-size12.3.3 字體風(fēng)格font-style12.3.4 加粗字體font-weight12.3.5 小寫字母轉(zhuǎn)為大寫font-variant12.3.6 字體復(fù)合屬性12.4 顏色和背景屬性12.4.1 顏色屬性color12.4.2 背景顏色background-color12.4.3 背景圖像background-image12.4.4 重復(fù)背景圖像background-repeat12.4

21、.5 背景附件background-attachment12.4.6 背景位置background-position12.4.7 背景復(fù)合屬性background12.5 段落屬性12.5.1 單詞間隔word-spacing12.5.2 字符間隔letter-spacing12.5.3 文字修飾text-decoration12.5.4 垂直對(duì)齊方式vertical-align12.5.5 文本轉(zhuǎn)換text-transform12.5.6 水平對(duì)齊方式text-align12.5.7 文本縮進(jìn)text-indent12.5.8 文本行高line-height12.5.9 處理空白white-

22、space12.5.10 文本反排unicode-bidi、direction12.6 外邊距與內(nèi)邊距屬性12.6.1 上邊距margin-top12.6.2 其他邊距margin-bottom、margin-left、margin-right12.6.3 外邊距復(fù)合屬性margin12.6.4 頂端內(nèi)邊距padding-top12.6.5 其他內(nèi)邊距padding-bottom、padding-left、padding-right12.6.6 內(nèi)邊距復(fù)合屬性padding12.7 邊框?qū)傩?2.7.1 邊框樣式border-stye12.7.2 邊框?qū)挾萣order-width12.7.3

23、邊框顏色border-color12.7.4 邊框?qū)傩詁order12.8 定位屬性12.8.1 定位方式position12.8.2 元素定位top、right、bottom、left12.8.3 層疊順序z-index12.8.4 浮動(dòng)屬性float12.8.5 清除屬性clear12.8.6 可視區(qū)域clip12.8.7 層的寬度和高度width、height12.8.8 超出范圍overflow12.8.9 可見屬性visibility12.9 列表屬性12.9.1 列表符號(hào)list-style-type12.9.2 圖像符號(hào)list-style-image12.9.3 列表縮進(jìn)lis

24、t-style-position12.9.4 列表復(fù)合屬性list-style12.10 光標(biāo)屬性cursor12.11 濾鏡屬性12.11.1 不透明度alpha12.11.2 動(dòng)感模糊blur12.11.3 對(duì)顏色進(jìn)行透明處理chroma12.11.4 陰影效果dropShadow12.11.5 對(duì)象翻轉(zhuǎn)flipH、flipV12.11.6 發(fā)光效果glow12.11.7 處理灰度gray12.11.8 反相invert12.11.9 X光片效果xray12.11.10 遮罩效果mask12.11.11 波形濾鏡wave12.12練習(xí)題第13講課時(shí)內(nèi)容Web標(biāo)準(zhǔn)與CSS網(wǎng)頁布局實(shí)例授課時(shí)間

25、80分鐘課時(shí)2教學(xué)內(nèi)容第12章講述了CSS的基本語法，CSS可以控制字體大小、設(shè)置字體樣式，目前更多地應(yīng)用在網(wǎng)頁布局上。本章將通過實(shí)例講述CSS布局網(wǎng)頁中的元素的方法。本章以CSS布局為重點(diǎn)，探討CSS布局的入門知識(shí)和布局網(wǎng)頁元素的實(shí)例技巧。教學(xué)重點(diǎn)表單標(biāo)記插入表單對(duì)象 菜單和列表 文本域標(biāo)記 id標(biāo)記 內(nèi)容大綱13.1 Web標(biāo)準(zhǔn)與CSS布局13.1.1 什么是Web標(biāo)準(zhǔn)13.1.2 CSS布局的優(yōu)勢(shì)13.2 DIV+CSS布局網(wǎng)頁基礎(chǔ)13.2.1 認(rèn)識(shí)DIV13.2.2 一列固定寬度13.2.3 一列自適應(yīng)13.2.4 兩列固定寬度13.2.5 兩列寬度自適應(yīng)13.2.6 兩列右列寬度自適

26、應(yīng)13.3 使用CSS設(shè)計(jì)網(wǎng)站導(dǎo)航欄13.3.1 實(shí)現(xiàn)背景變換的導(dǎo)航菜單13.3.2 利用CSS制作橫向?qū)Ш?3.4 使用CSS設(shè)計(jì)表單樣式13.4.1 改變按鈕的背景顏色和文字顏色13.4.2 設(shè)置文本框的樣式13.4.3 設(shè)計(jì)文本框中的文字樣式13.5 字體及段落樣式設(shè)計(jì)13.5.1 利用CSS控制字體大小和行距13.5.2 制作光暈文字效果13.6 使用CSS設(shè)計(jì)圖片樣式13.6.1 鼠標(biāo)指針移上時(shí)圖片漸變的效果13.6.2 設(shè)計(jì)不重復(fù)出現(xiàn)的背景13.7 使用CSS控制鏈接樣式13.7.1 使用CSS實(shí)現(xiàn)鼠標(biāo)指針形狀改變13.7.2 鼠標(biāo)指針移到鏈接文字上時(shí)改變文字大小或顏色13.8練習(xí)

27、題第14講課時(shí)內(nèi)容移動(dòng)網(wǎng)頁設(shè)計(jì)基礎(chǔ)CSS3授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容CSS3是CSS規(guī)范的最新版本，在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能，以幫助開發(fā)人員解決一些問題，例如圓角功能、多背景、透明度、陰影等功能等。CSS2.1是單一的規(guī)范，而CSS3被劃分成幾個(gè)模塊組，每個(gè)模塊組都有自己的規(guī)范。這樣的好處是整個(gè)CSS3的規(guī)范發(fā)布不會(huì)因?yàn)椴糠蛛y纏的部分而影響其他模塊的推進(jìn)。教學(xué)重點(diǎn)邊框 背景文本多列轉(zhuǎn)換過渡動(dòng)畫用戶界面 內(nèi)容大綱14.1 邊框14.1.1 圓角邊框border-radius14.1.2 邊框圖像border-image14.1.3 邊框陰影box-shadow14.2 背

28、景14.2.1 背景圖片尺寸background-size14.2.2 背景圖片定位區(qū)域background-origin14.2.3 背景繪制區(qū)域background-clip14.3 文本14.3.1 文本陰影text-shadow14.3.2 強(qiáng)制換行word-wrap14.3.3 文本溢出text-overflow14.3.4 文字描邊text-stroke14.3.5 文本填充顏色text-fill-color14.4 多列14.4.1 創(chuàng)建多列column-count14.4.2 列的寬度column-width14.4.3 列的間隔column-gap14.4.4 列的規(guī)則col

29、umn-rule14.5 轉(zhuǎn)換14.5.1 移動(dòng)translate14.5.2 旋轉(zhuǎn)rotate14.5.3 縮放scale14.5.4 扭曲skew14.5.5 矩陣matrix()14.6 過渡14.7 動(dòng)畫14.7.1 規(guī)則聲明動(dòng)畫keyframes14.7.2 animation使用動(dòng)畫14.8 用戶界面14.8.1 box-sizing14.8.2 resize14.8.3 outline-offset14.9 實(shí)例應(yīng)用14.9.1鼠標(biāo)放上去顯示全部?jī)?nèi)容14.9.2 美觀的圖片排列14.10練習(xí)題第15講課時(shí)內(nèi)容JavaScript腳本基礎(chǔ)授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容JavaScr

30、ipt語言是網(wǎng)頁中廣泛使用的一種腳本語言，使用JavaScript可以使網(wǎng)頁產(chǎn)生動(dòng)態(tài)效果，JavaScript以其小巧簡(jiǎn)單而備受用戶的歡迎。本章將介紹JavaScript的基本概念、語言特點(diǎn)、基本語法、常見的事件和常見內(nèi)部對(duì)象的使用。教學(xué)重點(diǎn)了解JavaScript概念 了解JavaScript特點(diǎn) 掌握J(rèn)avaScript基本語法 掌握J(rèn)avaScript事件的使用 瀏覽器的內(nèi)部對(duì)象內(nèi)容大綱15.1 JavaScript簡(jiǎn)介15.2 JavaScript基本語法15.2.1 常量和變量15.2.2 表達(dá)式和運(yùn)算符15.2.3 基本語句15.2.4 函數(shù)15.3 JavaScript事件15.

31、3.1 onClick事件15.3.2 onchange事件15.3.3 onSelect事件15.3.4 onFocus事件15.3.5 onLoad事件15.3.6 onUnload事件15.3.7 onBlur事件15.3.8 onMouseOver事件15.3.9 onMouseOut事件15.3.10 onDblClick 事件15.3.11 其他常用事件15.4 瀏覽器的內(nèi)部對(duì)象15.4.1 navigator對(duì)象15.4.2 document對(duì)象15.4.3 windows對(duì)象15.4.4 location對(duì)象15.4.5 history對(duì)象15.5練習(xí)題第16講課時(shí)內(nèi)容利用Ja

32、vaScript制作網(wǎng)頁特效授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容利用JavaScript可以輕松制作網(wǎng)頁特效，如可以制作顯示當(dāng)前時(shí)間、跟隨鼠標(biāo)的文字。本章就來介紹利用JavaScript制作時(shí)間特效、圖像特效、窗口特效、鼠標(biāo)特效和其他一些常見特效的方法。教學(xué)重點(diǎn)掌握時(shí)間特效的應(yīng)用 掌握?qǐng)D像特效的應(yīng)用 掌握窗口特效的應(yīng)用 掌握鼠標(biāo)特效的應(yīng)用 掌握其他特效的應(yīng)用內(nèi)容大綱16.1 時(shí)間特效16.1.1 顯示當(dāng)前時(shí)間16.1.2 顯示當(dāng)前日期16.1.3 顯示網(wǎng)頁停留時(shí)間16.1.4 制作倒計(jì)時(shí)特效16.2 圖像特效16.2.1 當(dāng)鼠標(biāo)指針經(jīng)過圖像時(shí)圖像震動(dòng)效果16.2.2 圖片閃爍效果16.2.3 自動(dòng)切

33、換圖像16.3 窗口特效16.3.1 全屏顯示窗口16.3.2 定時(shí)關(guān)閉窗口16.4 鼠標(biāo)特效16.4.1 禁止鼠標(biāo)右擊16.4.2 跟隨鼠標(biāo)指針移動(dòng)的圖像16.4.2 跟隨鼠標(biāo)指針移動(dòng)的圖像16.5 其他特效16.5.1 設(shè)置為首頁和加入收藏夾16.5.2 瀏覽器狀態(tài)欄顯示信息16.5.3 進(jìn)入網(wǎng)站的口令設(shè)置16.6練習(xí)題第17講課時(shí)內(nèi)容移動(dòng)網(wǎng)頁設(shè)計(jì)基礎(chǔ)CSS3授課時(shí)間80分鐘課時(shí)2教學(xué)內(nèi)容Dreamweaver是一個(gè)可視化的網(wǎng)頁設(shè)計(jì)和網(wǎng)站管理工具。它提供了強(qiáng)大的設(shè)計(jì)工具，在不用書寫一行代碼的情況下，就能夠快速創(chuàng)建各種極具動(dòng)態(tài)HTML特性的網(wǎng)頁。Dreamweaver是完全可定制的，用戶可以通過書寫JavaScript代碼為Dreamweaver創(chuàng)建新的行為和屬性面板，以增強(qiáng)Dreamweaver本身的功能。教學(xué)重點(diǎn)了解Dreamweaver的基本操作界面 掌握在網(wǎng)頁中使用文本 插入圖像 插入多媒體 掌握鏈接的設(shè)置 網(wǎng)頁的布局 掌握表單的使用 使用CSS樣式表 使

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論