06教案_Web網(wǎng)頁設(shè)計及實踐_專_賈硯池.doc

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