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