快速學(xué)會網(wǎng)頁制作

《快速學(xué)會網(wǎng)頁制作》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、快速學(xué)會網(wǎng)頁制作一、網(wǎng)頁制作基礎(chǔ)知識教學(xué)目標(biāo)：了解網(wǎng)頁制作的一些基礎(chǔ)知識，如網(wǎng)站和網(wǎng)頁的區(qū)別、網(wǎng)頁的類型、網(wǎng)頁的構(gòu)成元素等，然后在了解的基礎(chǔ)上再通過練習(xí)來鞏固。教學(xué)重點難點：在深刻了解概念的基礎(chǔ)上把理論轉(zhuǎn)化成實際的應(yīng)用。教學(xué)過程：在制作網(wǎng)頁之前，首先要了解一些關(guān)于web網(wǎng)頁的基本知識，了解一下構(gòu)成一個網(wǎng)站的基本元素等。一、網(wǎng)站與網(wǎng)頁網(wǎng)站是網(wǎng)頁的集合，是一個整體，其中包括一個首頁和若干個網(wǎng)頁。網(wǎng)站設(shè)計者先把整個網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后再分別制作各個網(wǎng)頁。大多數(shù)網(wǎng)站為網(wǎng)站瀏覽者提供一個首頁，首頁再鏈接多個網(wǎng)頁。一般來

2、說，一個網(wǎng)站是由很多網(wǎng)頁構(gòu)建而成的。首頁是一個網(wǎng)站的門面，也是訪問量最大的一個頁面，訪問者可以通過首頁進入到網(wǎng)站的各個分頁。因此，網(wǎng)站首頁的制作是很重要的，它給瀏覽者一個第一印像，首頁也奠定了網(wǎng)站的主題和整個基調(diào)，使訪問者進入首頁就能清楚地知道該網(wǎng)站所要傳遞的信息。一般網(wǎng)站的概念：專門放網(wǎng)頁的文件夾放圖片的文件夾放flash、css樣式等首頁一個完整的小網(wǎng)站結(jié)構(gòu)：當(dāng)然因為網(wǎng)站的類型不同，結(jié)構(gòu)也會有所不同。如大型門戶網(wǎng)站很注重信息量的多少和及時更新，避免一些花哨等，所以這類網(wǎng)站一般沒有引導(dǎo)頁。二、網(wǎng)頁的類型從網(wǎng)

3、頁是否執(zhí)行程序來分，可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁這兩種類型。靜態(tài)網(wǎng)頁一般以.htm或.html為后綴結(jié)尾的，俗稱html文件。動態(tài)網(wǎng)頁內(nèi)含有程序代碼，運行于服務(wù)器端的程序、網(wǎng)頁和組件等都屬于動態(tài)網(wǎng)頁，在網(wǎng)絡(luò)中看到的動態(tài)網(wǎng)頁通常是以.asp、.jsp等后綴結(jié)尾的，但也有以.php結(jié)尾的，如我們學(xué)校的校園網(wǎng)首頁。一個完整有價值的網(wǎng)站應(yīng)該是集靜態(tài)、動態(tài)、動畫于一身的。三、網(wǎng)頁的構(gòu)成元素網(wǎng)頁構(gòu)成的基本元素主要包括文本、圖像、動畫、超鏈接、音頻、視頻、表格和表單等。下面我們著重介紹和練習(xí)表格的屬性。1表格是網(wǎng)頁排版不可缺少

4、的一部分，它可以對文字和圖片進行精確的定位，使頁面保持一定的版式1、表格屬性練習(xí)1、通過插入表格和表格屬性對話框制作出以下表格：填充0邊距0邊框1背景無邊框顏色#FF0000填充為0填充0間距2邊框1邊框顏色#FF0000填充為5填充0間距2邊框4背景無邊框顏色#FF0000[填充]：用于設(shè)置單元格內(nèi)容和單元格邊界之間的像素數(shù)[間距]：用于設(shè)置相鄰的表格單元格之間的象素數(shù)[對齊]：用于設(shè)置表格相對于同一段落中其他元素的顯示位置[邊框]：用于設(shè)置表格邊框的寬度，單位為像素注：將[邊框]設(shè)置為0時，這時表格將不顯

5、示邊框，它所起到的作用是定位功能，這也是表格應(yīng)用廣泛的主要原因之一。2、制作細(xì)線表格間距為1邊框為0表格背景色為藍(lán)色單元格背景色為白色2作粗線表格間距為4邊框為0表格背景色為藍(lán)色單元格背景色為白色思考：作如下三張表格：二、表格基礎(chǔ)練習(xí)教學(xué)目標(biāo)：通過練習(xí)和講解，使學(xué)生能學(xué)會表格的基本應(yīng)用和一些難度較高的表格制作，為以后的網(wǎng)頁制作打下基礎(chǔ)。教學(xué)重點難點：對表格本身的屬性能熟練的掌握應(yīng)用及表格在網(wǎng)頁排版中的靈活應(yīng)用。教學(xué)過程：由于HTML語言本身并沒有提供較多的手段，所以往往需要借助于網(wǎng)頁的一個重要元素－表格來襀網(wǎng)

6、頁的精細(xì)排版。表格在網(wǎng)頁的實際制作過程中主要應(yīng)用于網(wǎng)頁定位上，通過設(shè)置表格的寬度、高度和比例大小等屬性，把不同的網(wǎng)頁元素分別固定在不同的單元格之中以達(dá)到頁面的平衡。表格除了在網(wǎng)頁定位上具有精準(zhǔn)控制的特點外，還具有規(guī)范和靈活的特點。正是因為這些原因，表格在網(wǎng)頁制作過程中扮演著非常重要的角色，幾乎所有的網(wǎng)頁都會應(yīng)用到表格定位技術(shù)。3一、表格的總體布局用表格來布局網(wǎng)頁一般是從上而下，一步一步來，而不是先用一張表格把整個網(wǎng)頁框起來。在制作過程中注意用背景顏色，注意圖片大小和單元格大小，且要注意文字的規(guī)范性。二、制作細(xì)

7、線單元格在本張網(wǎng)頁中，其中涉及到幾處小線條的單元格（如下圖），以下介紹細(xì)線單元格的做法：細(xì)線1細(xì)線2第一步：制作好表格后，先在單元格屬性高上設(shè)置好所需的高度，如下圖：第二步：把網(wǎng)頁切換“代碼視圖”，然后對選中的單元格刪除“ ”空格代碼，如下圖：三，制作表格利用表格的屬性間距、邊框、邊框顏色制作如上表格。三、html語法教學(xué)目標(biāo)：了解HTML語言的語法結(jié)構(gòu)，初步掌握HTML語言的基本結(jié)構(gòu)。教學(xué)重點難點：1、HTML的基本結(jié)構(gòu)及文字版面、圖像的HTML語法。42、HTML語法含義的理解及進一步自學(xué)方法的

8、掌握。教學(xué)過程：一、上機作業(yè)：1、上機任意建一張網(wǎng)頁，選擇“代碼視圖”，看一下網(wǎng)頁的源代碼2、新建一張空白網(wǎng)頁，它的源代碼是空白的嗎？3、寫出紅色、綠色、藍(lán)色、黑色、白色的顏色代碼二、html語法1、什么是HTML，它與網(wǎng)頁是什么關(guān)系HTML是標(biāo)記網(wǎng)頁格式的格式化語言，如＜p＞表示段落，＜br＞表示換行等。本節(jié)課的重點就是記住這些常用的HTML標(biāo)記。2、HTML語言的特點①HTML標(biāo)記放在＜與＞之間