授課日期第一周班級14電藝目的要求認識網(wǎng)頁與網(wǎng)站，了解網(wǎng)頁的基本元素重點難點熟悉并掌握HTML語言基礎知識，理解并掌握網(wǎng)頁設計的基本流程新課內(nèi)容與教法：網(wǎng)頁設計基礎認識網(wǎng)頁與網(wǎng)站：主要講授網(wǎng)絡的定義、互聯(lián)網(wǎng)的分類及發(fā)展概況；OSI／ISO參考模型、TCP/IP參考模型、IP地址和域名、網(wǎng)頁語言介紹；：主要講授網(wǎng)站的種類及相關知識（掌握）、網(wǎng)站的開發(fā)流程和方法（掌握；核心）、常用網(wǎng)站制作工具（了解）網(wǎng)頁的基本元素網(wǎng)頁由文本、圖像、動畫、超級鏈接等基本元素構(gòu)成，本節(jié)將對這些基本元素進行簡單介紹，為后面各章中運用這些元素制作網(wǎng)頁奠定基礎。1.文本一般情況下，網(wǎng)頁中最多的內(nèi)容是文本，可以根據(jù)需要對其字體、大小、顏色、底紋、邊框等屬性進行設置。建議用于網(wǎng)頁正文的文字一般不要太大，也不要使用過多的字體，中文文字一般可使用宋體，大小一般使用9磅或12像素左右即可。2.圖像豐富多彩的圖像是美化網(wǎng)頁必不可少的元素，用于網(wǎng)頁上的圖像一般為JPG格式和GIF格式。網(wǎng)頁中的圖像主要用于點綴標題的小圖片，介紹性的圖片，代表企業(yè)形象或欄目內(nèi)容的標志性圖片，用于宣傳廣告等多種形式。3.超級鏈接超級鏈接是Web網(wǎng)頁的主要特色，是指從一個網(wǎng)頁指向另一個目的端的鏈接。這個“目的端”通常是另一個網(wǎng)頁，也可以是下列情況之一：相同網(wǎng)頁上的不同位置、一個下載的文件、一副圖片、一個E-mail地址等。超級鏈接可以是文本、按鈕或圖片，鼠標指針指向超級鏈接位置時，會變成小手形狀。4.導航欄導航欄是一組超級鏈接，用來方便地瀏覽站點。導航欄一般由多個按鈕或者多個文本超級鏈接組成。5.動畫動畫是網(wǎng)頁中最活躍的元素，創(chuàng)意出眾、制作精致的動畫是吸引瀏覽者眼球的最有效方法之一。但是如果網(wǎng)頁動畫太多，也會物極必反，使人眼花繚亂，進而產(chǎn)生視覺疲勞。6.表格表格是HTML語言中的一種元素，主要用于網(wǎng)頁內(nèi)容的布局，組織整個網(wǎng)頁的外觀，通過表格可以精確地控制各網(wǎng)頁元素在網(wǎng)頁中的位置。7.框架框架是網(wǎng)頁的一種組織形式，將相互關聯(lián)的多個網(wǎng)頁的內(nèi)容組織在一個瀏覽器窗口中顯示。例如在一個框架內(nèi)放置導航欄，另一個框架中的內(nèi)容可以隨單擊導航欄中的鏈接而改變。8.表單表單是用來收集訪問者信息或?qū)崿F(xiàn)一些交互作用的網(wǎng)頁，瀏覽者填寫表單的方式是輸入文本、選中單選按鈕或復選框、從下拉菜單中選擇選項等。網(wǎng)頁中除了上述這些最基本的構(gòu)成元素外，還包括橫幅廣告、字幕、懸停按鈕、日戳、計算器、音頻、視頻、JavaApplet等元素。超文本標記語言基礎一個網(wǎng)頁對應于一個HTML文件，HTML文件以.htm或.html為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯來產(chǎn)生HTML文件。標準的HTML文件都具有一個基本的整體結(jié)構(gòu)，即HTML文件的開頭與結(jié)尾標志和HTML的頭部與實體2大部分。有3個雙標記符用于頁面整體結(jié)構(gòu)的確認。網(wǎng)頁設計的基本流程一個網(wǎng)站的建設是需要吧很多細節(jié)結(jié)合在一起，只有把各步驟有序的完成，才能建成一個完整的網(wǎng)站，雖然建站的步驟很多，而且都是分開的部分，但是這些步驟會形成一個基本的流程，按照這個流程去做，就能完成建站，下面就給大家介紹一下，網(wǎng)站建設的基本流程是什么?1、域名空間一個網(wǎng)站的建設首先當然是選擇一個好的域名，后綴一般都是選擇和的較多，是國際域名后綴，是中國的域名，域名的主體一般和你的網(wǎng)站主題，或者企業(yè)的名稱全拼來做域名的主體，如今互聯(lián)網(wǎng)當中網(wǎng)站繁多，很多域名已經(jīng)被注冊，可以是全拼，可以是首字母，可以加地域或者數(shù)字，但是一定要有意義，讓人容易記住。當域名購買完了之后，還要有個域名可以訪問到的地方，這時候就要租一個虛擬主機的空間了，把域名與主機綁定，當訪問域名時，就直接進入放在虛擬主機空間里的網(wǎng)站了。2、規(guī)劃設計這時候就要著手規(guī)劃想要的網(wǎng)站了，個人網(wǎng)站或者是企業(yè)站或是門戶站，要有目的性，不同類型的網(wǎng)站設計業(yè)不一樣，需要做一個合理的規(guī)劃，想好需要實現(xiàn)的功能，想要的板式類型和主要的面對用戶群，這都是網(wǎng)站初期要計劃好的，這時候也要收集好素材，網(wǎng)站中需要的內(nèi)容，文字，圖片等信息的收集，都是在建站的時候需要的，做好準備。3、制作建設當做好準備的時候，就要開始建站了，建站主要分前臺和后臺，前臺的就是網(wǎng)站的板式，根據(jù)網(wǎng)站類型，面向人群，來設計網(wǎng)站的版面，不宜太過雜亂，一定要簡潔，保證用戶體驗，才能讓訪問者有好感。建設后臺就較為復雜了，就要用程序整合前臺，并且完成需要的功能，這個需要較為復雜的程序編寫。4、測試發(fā)布當網(wǎng)站程序方面編寫好的時候，就是個一個網(wǎng)站的雛形了，但這時候網(wǎng)站還是不完善的，需要進行測試評估，網(wǎng)站還是有很多不完善的地方，要從用戶體驗的角度多去觀察，漸漸完善。當網(wǎng)站的問題都解決，沒什么大的問題的時候，就可以把網(wǎng)站傳到虛擬主機空間里，這是訪問域名就可以正式訪問網(wǎng)站了。5、維護推廣網(wǎng)站雖然上線了，但是工作還沒有完成，這時候網(wǎng)站也許還有沒發(fā)現(xiàn)的漏洞等細節(jié)，在網(wǎng)站上線之后，還要繼續(xù)完善網(wǎng)站的不足，維護主要針對于網(wǎng)站的服務器，網(wǎng)站安全和網(wǎng)站內(nèi)容的維護。這時候站內(nèi)的完成了，就要注重站外了，可以做seo優(yōu)化或者百度推廣，對網(wǎng)站進行推廣，這是針對百度搜索引擎的推廣，還可以在其他網(wǎng)絡平臺上推廣，做互聯(lián)網(wǎng)推廣。

鞏固與練習通過本章學習什么是網(wǎng)頁和網(wǎng)站作業(yè)布置網(wǎng)頁的基本元素有哪些？授課日期第二周班級14電藝目的要求了解Dreamweaver的作用重點難點掌握使用Dreamweaver編輯網(wǎng)頁和管理站點新課內(nèi)容與教法：第二章DreamweaverCS5基礎Dreamweaver功能概括所見即所得的強大功能

沒有一個Web編輯軟件能像Dreamweaver一樣，具有所見即所得的功能，你可以在"Properties"（屬性）窗體中調(diào)整參數(shù)，即刻在"Documentwindow"窗體中看到它的改變，如果你按下"F12"，Dreamweaver會自動生成HTML文件格式，供欲覽，以便開發(fā)人員進一步調(diào)整。

1、方便快速的文本編排

與"Word"相似，具有強大的文本編輯能力，你可以在"Layer"、"Table"、"Frame"或直接在"Documentwindow"窗體中輸入文字，通過快捷的右鍵，選擇例如"Font"（字體）類的選項進行編輯，也可以利用"Text"菜單進行更為細致的排版編輯。

2、專業(yè)的HTML編輯--RoundtripHTML

Dreamweaver與現(xiàn)存的網(wǎng)頁有著極好的兼容性，不會更改任何其他編輯器生成的頁面。這將大幅度降低由于HTML源代碼的變更而給設計者帶來的困惑。

3、高質(zhì)量的HTML生成方式

由Dreamweaver生成的HTML源代碼保持了很好的可讀性。代碼結(jié)構(gòu)基本上同手工生成的代碼相同，這使得設計者可以輕易掌握代碼全局并加以修改。4、實時的HTML控制

設計者可以在可視化或者文本這兩種方式下進行頁面的設計，并且可以實時的監(jiān)控HTML源代碼。當設計者對代碼作出任何改動時，結(jié)果將立刻顯示出來。

5、與流行的文本HTML代碼編輯器之間的協(xié)調(diào)工作

Dreamweaver可以與目前流行的HTML代碼編輯器（如BBEdit、HomeSite等）全面協(xié)調(diào)工作。已經(jīng)習慣于使用這些純文本編輯器的設計者將在不改變他們原有工作習慣的基礎上，充分享受到Dreamweaver帶來更多功能。設計者可以使用文本編輯器直接編輯HTML，同時使用Dreamweaver生成較為復雜的動畫、表格、Frame、JavaScript等。（Dreamweaver分別為Windows用戶以及Macintosh用戶提供了完全版的HomeSite及BBEdit這兩個目前最流行的代碼編輯器）。

6、強大的DHTML支持

動態(tài)HTML是瀏覽器支持的新功能，將在未來廣泛應用于網(wǎng)絡。這項技術(shù)可以增強頁面的交互性、提高下載速度、使頁面更美觀更易于設計且富有動感。Dreamweaver對DHTML完全支持，并提供了與之相關聯(lián)的四大功能。而其它的可視化網(wǎng)頁編輯工具幾乎不提供或只小部分提供動態(tài)HTML的制作。

7、重復元素庫在Dreamweaver中定義的一個站點內(nèi)，設計者可以將重復使用的內(nèi)容（例如Header、Footer等）獨立定義。這樣設計者在需要這些內(nèi)容的地方只需做一個簡單的插入就可以了。而且當元素庫中定義的內(nèi)容被修改后，整個站點中設計同樣內(nèi)容的地方將統(tǒng)一發(fā)生變化而無需再逐一修改。

8、基于目標瀏覽器的檢測

目前瀏覽器更新?lián)Q代很快，從到層出不窮。同時又有IE和Netscape兩大陣營競爭。設計者制作出的網(wǎng)頁必須面向功能不同的瀏覽器并保持其正確性。這是一項比較困難的工作。而Dreamweaver不僅在設計時可以基于不同的目標瀏覽器進行不同的設計，而且在頁面制作完畢后，Dreamweaver可以基于目標瀏覽器對頁面進行檢測并給出報告。在報告中將顯示出被檢測頁面的兼容性以及在不同瀏覽器中頁面的區(qū)別，同時還將指出頁面中HTML的句法錯誤。9、FTP

在Dreamweaver中包含了一個界面極為友好的FTP工具。通過它，設計者可以非常方便的將設計的單一頁面或者一個站點上傳至服務器。同時，設計者還可以非常方便的將已經(jīng)上傳至服務器的文件下載以供參考和修改。在文件傳輸?shù)倪^程中，Dreamweaver將記錄下整個過程以供錯誤分析。

10、文件鎖定

這是一種專為合作開發(fā)環(huán)境設置的檔案機制。可以通過標記和取出機制設置只讀或可編寫屬性來進行文檔的保護。通過這種方法可以防止不必要的數(shù)據(jù)丟失，增強了安全性。Dreamweaver工作區(qū)域使用DreamweaverCS5的工作區(qū)，可以查看文檔和對象的屬性，使用工作區(qū)內(nèi)的工具欄，還可以快速地更新和修改文檔。在集成的工作區(qū)中，全部窗口和面板都被集成到一個更大的應用程序窗口中。查看完整的應用程序窗口——工作區(qū)布局A：文檔工具欄B：應用程序欄C：“文檔”窗口D：工作區(qū)切換器E：面板組F：標簽選擇器G：屬性檢查器H：文件面板工作區(qū)元素概述歡迎屏幕：用于打開最近使用過的文檔或者創(chuàng)建新文檔。還可以通過產(chǎn)品介紹或教程了解有關Dreamweaver的更多信息。文檔工具欄：包含一些按鈕，用于提供“文檔”窗口各種視圖的選項、各種查看選項和一些常用操作。應用程序欄：Dreamweaver窗口頂部包含菜單（只限于Windows）、工作區(qū)切換器以及其他應用程序控件。標準工具欄：點擊“查看”菜單，選擇“工具欄”命令，在彈出的子菜單中選擇“標準”項，即可顯示標準工具欄。標準工具欄包括從“文件”和“編輯”菜單中執(zhí)行的常見的操作按鈕：新建、打開、在Bridge中瀏覽、保存、全部保存、打印代碼、剪切、拷貝、粘貼、還原和重做等按鈕。編碼工具欄：包含可用于執(zhí)行多項標準編碼操作的按鈕。僅在“代碼”視圖中顯示。“樣式呈現(xiàn)”工具欄：可以查看設計在不同媒體類型中的外觀（如果使用依賴于媒體的樣式表）。它還包含一個允許您啟用或禁用層疊式樣式表(CSS)樣式的按鈕。“文檔”窗口：顯示當前正在創(chuàng)建和編輯的文檔。“屬性”檢查器：用于查看和更改所選對象或文本的各種屬性。每個對象具有不同的屬性。默認情況下，在“編碼器”工作區(qū)布局中，屬性檢查器是不展開的。標簽選擇器：位于“文檔”窗口底部的狀態(tài)欄中。顯示環(huán)繞當前選定內(nèi)容的標簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標簽可以選擇該標簽及其全部內(nèi)容。面板：幫助我們監(jiān)控和修改工作。示例包括“插入”面板、“CSS樣式”面板和“文件”面板。如果要展開某個面板，請雙擊其選項卡。插入面板：包含用于將圖像、表格和媒體元素等各種類型的對象插入到文檔中的按鈕。每個對象都是一段HTML代碼，允許我們在插入它時設置不同的屬性。例如，您可以通過單擊“插入”面板中的“表格”按鈕來插入一個表格。如果愿意，可以使用“插入”菜單來插入對象，而不用通過使用“插入”面板。“文件”面板：無論它們是Dreamweaver站點的一部分還是位于遠程服務器，都可以將它們用于管理文件和文件夾。使用“文件”面板，還可以訪問本地磁盤上的所有文件。通過Dreamweaver設計簡單網(wǎng)頁

鞏固與練習小結(jié)Dreamweaver功能概括作業(yè)布置Dreamweaver工作區(qū)域有幾種授課日期第三周班級14電藝目的要求理解使用網(wǎng)頁設計的基本方法、掌握使用框架設計網(wǎng)頁重點難點掌握使用CSS設計網(wǎng)頁、理解網(wǎng)頁文本和段落的設計新課內(nèi)容與教法：第三章靜態(tài)效果網(wǎng)頁設計使用HTML設計網(wǎng)頁從美工圖到網(wǎng)頁的呈現(xiàn)，是需要代碼去實現(xiàn)的。HTML、CSS以及JavaScript是網(wǎng)頁實現(xiàn)的基本組成部分，可以認為是三種語言。HTML管的是網(wǎng)頁的基本結(jié)構(gòu)（比如不同模塊如何放置，這種布局操作），CSS處理網(wǎng)頁中的樣式（如文字的顏色、段落的首行縮進等等），JavaScript管的是網(wǎng)頁中的行為，比如你點擊了向左向右的按鈕，圖片發(fā)生了滾動等。HTML和CSS不屬于網(wǎng)頁設計，更確切的說是網(wǎng)頁制作。如果結(jié)合JavaScript，會被稱為前端開發(fā)。另外，HTML5和CSS3的發(fā)展，為網(wǎng)頁添加了很多新特性新功能，涉及這方面的被稱為HTML5開發(fā)使用表格設計網(wǎng)頁表格、圖象及超鏈接在網(wǎng)頁中使用表格（表格的用途；插入表格；表格的基本操作、設置表格屬性；編輯表格）（理解，核心）在網(wǎng)頁中插入圖像（插入圖像；圖文混排）（理解，核心）超接鏈接（超鏈接的基本概念；超鏈接的創(chuàng)建目標和方法；）（理解，核心）使用框架設計網(wǎng)頁1．框架、樣式表2．表單、行為、多媒體和HTML代碼編輯使用模板和庫設計網(wǎng)頁模板的創(chuàng)建有三種方式。

1、直接創(chuàng)建模板

選擇“窗口/資源”命令，打開“資源”面板，切換到模板子面板，

單擊模板面板上的“擴展”按鈕，在彈出菜單中選擇“新建模板”這是在瀏覽窗口出現(xiàn)一個未命名的模板文件，給模板命名。然后單擊“編輯”按鈕，打開模板進行編輯。

編輯完成后，保存模板，完成模板建立。

2、將普通網(wǎng)頁另存為模板

打開一個已經(jīng)制作完成的網(wǎng)頁，刪除網(wǎng)頁中不需要的部分，保留幾個網(wǎng)頁共同需要的區(qū)域。

選擇“文件/另存為模板”命令將網(wǎng)頁另存為模板。

在彈出的“另存模板”對話框中，“站點”下拉列表框用來設置模板保存的站點，課選擇一個選項。“現(xiàn)存的模板”選框顯示了當前站點的所有模板。“另存為”文本框用來設置模板的命名。單擊“另存模板”對話框中的“保存”按鈕，就把當前網(wǎng)頁轉(zhuǎn)換為了模板，同時將模板另存到選擇的站點。

單擊“保存”按鈕，保存模板。系統(tǒng)將自動在根目錄下創(chuàng)建Template文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。

在保存模板時，如果模板中沒有定義任何可編輯區(qū)域，系統(tǒng)將顯示警告信息。我們可以先單擊“確定”，以后再定義可編輯區(qū)域。

3、從文件菜單新建模板

選擇“文件/新建”命令，打開“新建文檔”對話框，然后再類別中選擇“模板頁”，并選取相關的模板類型，直接單擊“創(chuàng)建”按鈕即可。”鞏固與練習小結(jié)HTML設計網(wǎng)頁的幾種類型作業(yè)布置了解模板和庫設計網(wǎng)頁授課日期第四周班級14電藝目的要求理解框架概念，框架的創(chuàng)建重點難點掌握常用多媒體的文件格式、插入多媒體的方式、插入Flash新課內(nèi)容與教法：1．框架、樣式表（學時：4學時）框架概念，框架的創(chuàng)建、屬性設置、在框架中插入內(nèi)容（理解，核心）樣式表的作用，創(chuàng)建CSS樣式表、修改樣式表屬性（理解，核心）2．表單、行為、多媒體和HTML代碼編輯（學時：4學時）表單面板、表單元素、插入表單（理解，核心）加入行為，使用Dreamweaver自帶的行為（理解，核心）常用多媒體的文件格式、插入多媒體的方式、插入Flash（理解，核心）編輯HTML代碼（設置代碼格式、查找替換）（理解，核心）鞏固與練習小結(jié)HTML設計網(wǎng)頁的表單面板、表單元素、插入表單作業(yè)布置了解網(wǎng)站管理與維護授課日期第五周班級14電藝目的要求Dreamweaver8的測試、預覽和發(fā)布設置如何發(fā)布網(wǎng)站到服務器。重點難點網(wǎng)站排錯的必要性新課內(nèi)容與教法：在本機中測試網(wǎng)站、預覽網(wǎng)頁效果、網(wǎng)站的查錯、發(fā)布網(wǎng)站到