06教案_Web網(wǎng)頁(yè)設(shè)計(jì)及實(shí)踐_專(zhuān)_賈硯池.doc

西南財(cái)經(jīng)大學(xué)天府學(xué)院教案 TIANFU COLLEGE OF SWUFE西南財(cái)經(jīng)大學(xué)天府學(xué)院教 案任課教師：賈硯池課程名稱(chēng)：Web網(wǎng)頁(yè)設(shè)計(jì)及實(shí)踐_專(zhuān) 任課班級(jí)：12級(jí)專(zhuān)科會(huì)計(jì)電算化25班、12級(jí)專(zhuān)科市場(chǎng)開(kāi)發(fā)與營(yíng)銷(xiāo)01、02、03班、12級(jí)專(zhuān)科稅務(wù)02班、12級(jí)專(zhuān)科營(yíng)銷(xiāo)與策劃01班、12級(jí)專(zhuān)科工程14、15、16班授課時(shí)間：2013-2014-1學(xué)期西南財(cái)經(jīng)大學(xué)天府學(xué)院教務(wù)處制教 案編號(hào)：01章節(jié)第一講 網(wǎng)頁(yè)制作基本知識(shí)授課方式講授+學(xué)生討論教學(xué)目的1. 讓學(xué)生了解該課程講授的內(nèi)容、形式以及其考核標(biāo)準(zhǔn)2. 學(xué)生根據(jù)該課程的特點(diǎn)自己組合成小組，為后面學(xué)習(xí)形成一個(gè)相互協(xié)作的團(tuán)隊(duì),培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作精神與創(chuàng)新性思維3. 認(rèn)識(shí)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)(1) 認(rèn)識(shí)Dreamweaver 8中文版教學(xué)重點(diǎn)網(wǎng)頁(yè)設(shè)計(jì)軟件。教學(xué)難點(diǎn)網(wǎng)頁(yè)設(shè)計(jì)的基本原則時(shí)間分配教 學(xué) 過(guò) 程Min5105551010101515一、 課程簡(jiǎn)介本課程是公共選修課程，是為非計(jì)算機(jī)專(zhuān)業(yè)學(xué)生開(kāi)設(shè)的一門(mén)計(jì)算機(jī)軟件應(yīng)用課程。本課程的主要教學(xué)任務(wù)是培養(yǎng)大學(xué)生的計(jì)算機(jī)應(yīng)用技能，使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的實(shí)際應(yīng)用方法及技巧，培養(yǎng)學(xué)生的設(shè)計(jì)能力，以滿足和適應(yīng)信息化社會(huì)對(duì)大學(xué)生基本素質(zhì)的要求。二、 考核方式(1) 考勤：10分。(2) 課堂表現(xiàn)：10分。包括課堂紀(jì)律情況、討論環(huán)節(jié)參與情況、助教參與情況、小組工作負(fù)責(zé)情況以及與教師互動(dòng)情況等課堂表現(xiàn)(3) 實(shí)訓(xùn)項(xiàng)目1：10分(4) 實(shí)訓(xùn)項(xiàng)目2：20分(5) 實(shí)訓(xùn)項(xiàng)目3：20分(6) 實(shí)訓(xùn)項(xiàng)目4：30分三、 課堂紀(jì)律(1) 曠課4次取消考試資格，遲到3次算一次曠課。每遲到一次扣1分，曠課一次扣5分。(2) 上課要求：課堂上不允許影響他人學(xué)習(xí)，教師開(kāi)始授課前進(jìn)入教室(3) 上機(jī)要求：準(zhǔn)時(shí)出席、保持安靜、自覺(jué)維護(hù)實(shí)驗(yàn)室秩序和衛(wèi)生；按要求以正確的格式獨(dú)立完成實(shí)驗(yàn)題目。(4) 課堂紀(jì)律： 上課不準(zhǔn)吃零食、嗑瓜子等。 下課后帶走自己桌上的垃圾，讓課桌上保持整潔。 下課后關(guān)電腦(主機(jī)和顯示器)。 上課不準(zhǔn)大聲喧嘩、玩手機(jī)、pad、睡覺(jué)等與學(xué)習(xí)無(wú)關(guān)的事情。 課堂內(nèi)嚴(yán)禁看視頻、玩游戲。 以上第一次和第二次犯均為警告處理，第三次開(kāi)始每次扣5分，如果屢次(5次以上)不改者，則取消考試資格。直接進(jìn)入重修。四、 教師信息及答疑時(shí)間設(shè)定1) 姓名：溫俊2) 電話：138809947283) 答疑：每周五中午12：00-14：00東區(qū)廣場(chǎng)五、 學(xué)習(xí)小組的成立以及成員之間討論(1) 自由分組，每個(gè)組4-6人，并選定小組，然后為每個(gè)組安排好上機(jī)位置，以后就固定座位。(2) 小組討論：a) 互相認(rèn)識(shí)，加深了解，了解各自的興趣和長(zhǎng)項(xiàng)。b) 選取一個(gè)同學(xué)為小組長(zhǎng)。c) 探討學(xué)習(xí)本課程的方法，并由小組長(zhǎng)向老師匯報(bào)本次討論的結(jié)果。六、 認(rèn)識(shí)網(wǎng)站與網(wǎng)頁(yè)（講授）(1) 網(wǎng)頁(yè)的本質(zhì)我們看到的網(wǎng)頁(yè)是由一組文件構(gòu)成的，它們分別是網(wǎng)頁(yè)文件（擴(kuò)展名為.html、.asp等）、圖像文件（擴(kuò)展名為.jpg、.gif等）和Flash動(dòng)畫(huà)文件（擴(kuò)展名為.swf）等。 (2) 網(wǎng)頁(yè)的功能組成從瀏覽者的角度看，網(wǎng)頁(yè)中無(wú)非就是一些文字、圖像、動(dòng)畫(huà)等。但從專(zhuān)業(yè)的角度來(lái)講，網(wǎng)頁(yè)中的元素各有其不同的作用，可以將他們分為站標(biāo)、導(dǎo)航條、廣告條、標(biāo)題欄和按鈕等。(3) IP地址、域名與網(wǎng)址a) IP地址：雖然互聯(lián)網(wǎng)上連接了不計(jì)其數(shù)的服務(wù)器與客戶機(jī)，但它們并不是雜亂無(wú)章的。每一個(gè)主機(jī)在互聯(lián)網(wǎng)上都有唯一的地址，我們稱(chēng)這個(gè)地址為IP地址（Internet Protocol Address）。IP地址由4個(gè)小于256的數(shù)字組成，數(shù)字之間用點(diǎn)間隔。例如，“26”就是一個(gè)IP地址。b) 域名：由于IP地址在使用過(guò)程中難于記憶和書(shū)寫(xiě)，人們又發(fā)現(xiàn)了一種與IP地址對(duì)應(yīng)的字符來(lái)表示地址，這就是域名。每一個(gè)網(wǎng)站都有自己的域名，并且域名是獨(dú)一無(wú)二的。例如，我們只需要在瀏覽器地址欄中輸入搜狐網(wǎng)站的域名“”，然后按回車(chē)鍵就可以訪問(wèn)搜狐網(wǎng)站了。c) 網(wǎng)址：網(wǎng)址又叫URL，英文全稱(chēng)是“Uniform Resource Locator”，即統(tǒng)一資源定位符。它是網(wǎng)絡(luò)上通用的一種地址格式，用于標(biāo)識(shí)網(wǎng)頁(yè)文件在網(wǎng)絡(luò)中的位置。一個(gè)完整的網(wǎng)址由通信協(xié)議名稱(chēng)、域名或IP地址、網(wǎng)頁(yè)在服務(wù)器中的路徑和文件名4部分組成。(4) 靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)從大的方面講，網(wǎng)頁(yè)可分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。通常是從制作技術(shù)的角度來(lái)區(qū)分靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的，完全采用HTML技術(shù)制作的網(wǎng)頁(yè)稱(chēng)為靜態(tài)網(wǎng)頁(yè)；使用HTML、編程語(yǔ)言和數(shù)據(jù)庫(kù)共同完成，需要與服務(wù)器實(shí)時(shí)交互的網(wǎng)頁(yè)稱(chēng)為動(dòng)態(tài)網(wǎng)頁(yè)。七、 網(wǎng)頁(yè)設(shè)計(jì)軟件和制作技術(shù)(1) 網(wǎng)站管理與網(wǎng)頁(yè)制作軟件目前用于網(wǎng)站管理和網(wǎng)頁(yè)制作的軟件主要是Dreamweaver，其功能全面、操作靈活、專(zhuān)業(yè)性強(qiáng)。另外，它還可以作為動(dòng)態(tài)網(wǎng)站的開(kāi)發(fā)環(huán)境。在制作網(wǎng)頁(yè)時(shí)，除Dreamweaver外還需要用到Fireworks、Flash、Photoshop等輔助軟件。(2) HTML語(yǔ)言簡(jiǎn)介HTML是Hypertext Markup Language的首字母縮寫(xiě)，中文稱(chēng)作“超文本標(biāo)記語(yǔ)言”。 HTML語(yǔ)言是網(wǎng)頁(yè)制作的基礎(chǔ)，目前Internet上的絕大多數(shù)網(wǎng)頁(yè)都遵循HTML語(yǔ)言規(guī)范，或是由HTML語(yǔ)言發(fā)展而來(lái)。HTML語(yǔ)言的核心是標(biāo)簽（或者稱(chēng)為標(biāo)記）。也就是說(shuō)，我們?cè)跒g覽網(wǎng)頁(yè)時(shí)看到的文字、圖像、動(dòng)畫(huà)等在HTML文檔中都是用標(biāo)簽來(lái)描述的。一個(gè)完整的HTML文檔由標(biāo)簽開(kāi)始并由標(biāo)簽結(jié)束，所有的HTML代碼都應(yīng)寫(xiě)在標(biāo)簽與標(biāo)簽之間。八、 網(wǎng)站建設(shè)流程1確定網(wǎng)站內(nèi)容 建設(shè)網(wǎng)站要有目的性，首先要根據(jù)網(wǎng)站的性質(zhì)和受眾，確定網(wǎng)站內(nèi)容和要實(shí)現(xiàn)的功能。 2規(guī)劃網(wǎng)站結(jié)構(gòu) 確定網(wǎng)站內(nèi)容后，就要根據(jù)網(wǎng)站的內(nèi)容來(lái)規(guī)劃網(wǎng)站結(jié)構(gòu)。網(wǎng)站結(jié)構(gòu)有兩層意思，一是邏輯結(jié)構(gòu)，二是物理結(jié)構(gòu)。 邏輯結(jié)構(gòu)主要是指將網(wǎng)站內(nèi)容劃分成哪些欄目，實(shí)際上就相當(dāng)于網(wǎng)頁(yè)中的導(dǎo)航條，下圖顯示了某企業(yè)網(wǎng)站的邏輯結(jié)構(gòu)圖。 3確定網(wǎng)站要應(yīng)用的技術(shù) 網(wǎng)站要應(yīng)用的技術(shù)包括兩個(gè)方面，一個(gè)是程序和數(shù)據(jù)庫(kù)，另一個(gè)是運(yùn)行環(huán)境。網(wǎng)站技術(shù)與網(wǎng)站的定位、功能和規(guī)則都是密切相關(guān)的，對(duì)于網(wǎng)站的運(yùn)營(yíng)，網(wǎng)站的成本，網(wǎng)站目標(biāo)的達(dá)成都非常關(guān)鍵。4網(wǎng)站維護(hù)網(wǎng)站維護(hù)主要是指網(wǎng)站發(fā)布后內(nèi)容的實(shí)時(shí)更新。嚴(yán)格來(lái)說(shuō)，每一個(gè)網(wǎng)站都應(yīng)該由專(zhuān)業(yè)的定期更新維護(hù)?；ヂ?lián)網(wǎng)的最大優(yōu)勢(shì)就是信息的實(shí)時(shí)性，只有快速反映，準(zhǔn)確報(bào)道，吸引更多的瀏覽者，才能保證網(wǎng)站的流量。九、 網(wǎng)頁(yè)設(shè)計(jì)的基本原則1 配色：設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可根據(jù)以下原則確定網(wǎng)頁(yè)的背景色和主色調(diào)，并進(jìn)行顏色搭配。 （1）網(wǎng)頁(yè)背景顏色最好選擇白色或黑色。（2）可根據(jù)網(wǎng)站的性質(zhì)確定網(wǎng)頁(yè)的主色調(diào)，并且該主色調(diào)應(yīng)貫穿于網(wǎng)站中的全部網(wǎng)頁(yè)。 （3）設(shè)計(jì)網(wǎng)頁(yè)時(shí)恰當(dāng)?shù)乩猛?lèi)色、鄰近色和對(duì)比色，可增強(qiáng)網(wǎng)頁(yè)的層次感、豐富網(wǎng)頁(yè)的色彩或突出某些重要內(nèi)容（如導(dǎo)航條或版塊標(biāo)題）。2版式：版式是設(shè)計(jì)網(wǎng)頁(yè)時(shí)要考慮的一個(gè)重要因素。總的來(lái)說(shuō)，各種網(wǎng)頁(yè)的布局都大同小異。例如，幾乎所有網(wǎng)頁(yè)的上部都有站標(biāo)、導(dǎo)航條和廣告條，中間是各個(gè)版塊，下部為網(wǎng)站信息區(qū)。 3尺寸：頁(yè)面尺寸是網(wǎng)頁(yè)設(shè)計(jì)中必須要考慮的一個(gè)問(wèn)題。目前，我國(guó)大部分電腦的顯示器是17英寸，其分辨率通常為1024768像素。因此，為避免在瀏覽網(wǎng)頁(yè)時(shí)需頻繁拖動(dòng)水平滾動(dòng)條，最好將網(wǎng)頁(yè)寬度設(shè)置為1002像素以?xún)?nèi)。同時(shí)，由于瀏覽者可以利用瀏覽器的垂直滾動(dòng)條快速上下滾動(dòng)網(wǎng)頁(yè)，因此對(duì)網(wǎng)頁(yè)的高度沒(méi)有特別的要求，用戶可根據(jù)需要設(shè)置。十、 討論由學(xué)生分組討論數(shù)據(jù)庫(kù)在實(shí)際生活中的應(yīng)用，并列舉相關(guān)的例子。由每個(gè)小組派出1名組員進(jìn)行回答。1網(wǎng)站與網(wǎng)頁(yè)的區(qū)別與聯(lián)系是什么？2網(wǎng)頁(yè)設(shè)計(jì)軟件和制作技術(shù)有哪些？3如果你要建個(gè)網(wǎng)站，會(huì)是什么主題？什么色調(diào)？ 4如果你要建個(gè)網(wǎng)站，會(huì)是怎樣的流程？作業(yè)布置1上網(wǎng)時(shí)注意觀察網(wǎng)頁(yè)的設(shè)計(jì)，包括版式、配色、尺寸2查閱資料，列舉出3-5個(gè)知名網(wǎng)站的IP地址和域名3查閱資料，列舉出當(dāng)前主流的網(wǎng)站制作技術(shù)課后總結(jié) 教 案編號(hào)：02章節(jié)第二講 網(wǎng)頁(yè)布局授課方式講授+上機(jī)教學(xué)目的(1) 掌握表格的創(chuàng)建和編輯。(2) 掌握層的創(chuàng)建和編輯。(3) 熟悉利用表格布局網(wǎng)頁(yè)。(4) 熟悉利用層布局網(wǎng)頁(yè)。(5) 掌握利用布局模式布局網(wǎng)頁(yè)。 (6) 培養(yǎng)學(xué)生細(xì)心做事的態(tài)度。(7) 培養(yǎng)學(xué)生實(shí)際動(dòng)手能力和自主學(xué)習(xí)的能力。教學(xué)重點(diǎn)布局模式的應(yīng)用。教學(xué)難點(diǎn)表格的應(yīng)用。時(shí)間分配教 學(xué) 過(guò) 程Min10101060一、 表格布局的講解與演示1 創(chuàng)建表格Dreamweaver 8提供了非常完善的表格編輯功能，下面我們首先來(lái)看一下如何在網(wǎng)頁(yè)文檔中插入表格。2 選擇表格和單元格(1) 選擇表格 將鼠標(biāo)光標(biāo)移至單元格邊框線上，當(dāng)鼠標(biāo)光標(biāo)變?yōu)?或 形狀時(shí)單擊鼠標(biāo)左鍵。 將鼠標(biāo)光標(biāo)移至表格外框線上，當(dāng)鼠標(biāo)光標(biāo)變?yōu)?形狀時(shí)，單擊鼠標(biāo)左鍵。 在表格內(nèi)部任意單元格中單擊鼠標(biāo)左鍵，然后在標(biāo)簽選擇器中單擊對(duì)應(yīng)的“”標(biāo)簽 。 將插入點(diǎn)置于表格的任意單元格中，表格上方或下方將顯示綠線標(biāo)志，單擊最上方或最下方標(biāo)有表格寬度的綠線中的 ，在彈出的下拉菜單中選擇“選擇表格”命令。(2) 選擇行或列要選擇某行或某列，可將光標(biāo)置于該行左側(cè)或該列頂部，當(dāng)光標(biāo)形狀變?yōu)楹谏^ 或 時(shí)單擊鼠標(biāo)左鍵。 (3) 選擇單元格可以選擇單個(gè)單元格，也可以選擇連續(xù)的多個(gè)單元格或不連續(xù)的多個(gè)單元格 要選擇某個(gè)單元格，可首先將插入點(diǎn)置于該單元格內(nèi)，然后按【CtrlA】組合鍵或單擊“標(biāo)簽選擇器”中對(duì)應(yīng)的“”標(biāo)簽。 要選擇連續(xù)的單元格區(qū)域。應(yīng)首先在要選擇的單元格區(qū)域的左上角單元格中單擊，然后按住鼠標(biāo)左鍵向右下角單元格方向拖動(dòng)鼠標(biāo)，最后松開(kāi)鼠標(biāo)左鍵。 如果希望選擇一組不相鄰的單元格，可按住【Ctrl】鍵單擊選擇各單元格。(4) 設(shè)置表格屬性選中表格后，可利用“屬性”面板查看或修改表格的行、列、寬，以及填充、間距、背景顏色、背景圖像等屬性。(5) 設(shè)置單元格屬性在表格的某個(gè)單元格中單擊，“屬性”面板中將顯示水平、垂直、寬、高等單元格屬性，此時(shí)可通過(guò)“屬性”面板設(shè)置其屬性。 二、表的高級(jí)操作（老師邊講學(xué)生邊做）1. 拆分與合并單元格在網(wǎng)頁(yè)制作中，經(jīng)常會(huì)用到一些特殊結(jié)構(gòu)的表格，此時(shí)就需要拆分或合并單元格。 (1) 拆分單元格拆分單元格就是將一個(gè)單元格拆分成多個(gè)單元格。 (2) 合并單元格所謂合并單元格，就是將相鄰的幾個(gè)單元格合并成一個(gè)單元格。拖動(dòng)鼠標(biāo)選中要合并的連續(xù)單元格（此處為第1行中間的3個(gè)單元格），然后單擊“屬性”面板上的“合并所選單元格，使用跨度”按鈕 ，則3個(gè)單元格合并為1個(gè)單元格2. 插入、刪除行和列在使用表格組織大量信息時(shí)，往往需要在創(chuàng)建好的表格中添加或刪除行與列，以增加或減少記錄。 3. 移動(dòng)