網(wǎng)頁設(shè)計基礎(chǔ)備課筆記

1、授課日期第一周班級14電藝目的要求認識網(wǎng)頁與網(wǎng)站，了解網(wǎng)頁的基本元素重點難點熟悉并掌握HTML語言基礎(chǔ)知識，理解并掌握網(wǎng)頁設(shè)計的基本流程新課內(nèi)容與教法：第一章 網(wǎng)頁設(shè)計基礎(chǔ)1、 認識網(wǎng)頁與網(wǎng)站1.1：主要講授網(wǎng)絡(luò)的定義、互聯(lián)網(wǎng)的分類及發(fā)展概況；OSIISO參考模型、TCP/IP參考模型、IP地址和域名、網(wǎng)頁語言介紹；1.2：主要講授網(wǎng)站的種類及相關(guān)知識（掌握）、網(wǎng)站的開發(fā)流程和方法（掌握；核心）、常用網(wǎng)站制作工具（了解） 2、 網(wǎng)頁的基本元素網(wǎng)頁由文本、圖像、動畫、超級鏈接等基本元素構(gòu)成，本節(jié)將對這些基本元素進行簡單介紹，為后面各章中運用這些元素制作網(wǎng)頁奠定基礎(chǔ)。1.文本一般情況下，網(wǎng)頁中最多

2、的內(nèi)容是文本，可以根據(jù)需要對其字體、大小、顏色、底紋、邊框等屬性進行設(shè)置。建議用于網(wǎng)頁正文的文字一般不要太大，也不要使用過多的字體，中文文字一般可使用宋體，大小一般使用9磅或12像素左右即可。2.圖像豐富多彩的圖像是美化網(wǎng)頁必不可少的元素，用于網(wǎng)頁上的圖像一般為JPG格式和GIF格式。網(wǎng)頁中的圖像主要用于點綴標(biāo)題的小圖片，介紹性的圖片，代表企業(yè)形象或欄目內(nèi)容的標(biāo)志性圖片，用于宣傳廣告等多種形式。3.超級鏈接超級鏈接是Web網(wǎng)頁的主要特色，是指從一個網(wǎng)頁指向另一個目的端的鏈接。這個“目的端”通常是另一個網(wǎng)頁，也可以是下列情況之一：相同網(wǎng)頁上的不同位置、一個下載的文件、一副圖片、一個E-mail地

3、址等。超級鏈接可以是文本、按鈕或圖片，鼠標(biāo)指針指向超級鏈接位置時，會變成小手形狀。4.導(dǎo)航欄導(dǎo)航欄是一組超級鏈接，用來方便地瀏覽站點。導(dǎo)航欄一般由多個按鈕或者多個文本超級鏈接組成。5.動畫動畫是網(wǎng)頁中最活躍的元素，創(chuàng)意出眾、制作精致的動畫是吸引瀏覽者眼球的最有效方法之一。但是如果網(wǎng)頁動畫太多，也會物極必反，使人眼花繚亂，進而產(chǎn)生視覺疲勞。6.表格表格是HTML語言中的一種元素，主要用于網(wǎng)頁內(nèi)容的布局，組織整個網(wǎng)頁的外觀，通過表格可以精確地控制各網(wǎng)頁元素在網(wǎng)頁中的位置。7.框架框架是網(wǎng)頁的一種組織形式，將相互關(guān)聯(lián)的多個網(wǎng)頁的內(nèi)容組織在一個瀏覽器窗口中顯示。例如在一個框架內(nèi)放置導(dǎo)航欄，另一個框架中

4、的內(nèi)容可以隨單擊導(dǎo)航欄中的鏈接而改變。8.表單表單是用來收集訪問者信息或?qū)崿F(xiàn)一些交互作用的網(wǎng)頁，瀏覽者填寫表單的方式是輸入文本、選中單選按鈕或復(fù)選框、從下拉菜單中選擇選項等。網(wǎng)頁中除了上述這些最基本的構(gòu)成元素外，還包括橫幅廣告、字幕、懸停按鈕、日戳、計算器、音頻、視頻、Java Applet 等元素。3、 超文本標(biāo)記語言基礎(chǔ)一個網(wǎng)頁對應(yīng)于一個HTML文件，HTML文件以.htm或.html為擴展名?？梢允褂萌魏文軌蛏蒚XT類型源文件的文本編輯來產(chǎn)生HTML文件。 標(biāo)準的HTML文件都具有一個基本的整體結(jié)構(gòu)，即HTML文件的開頭與結(jié)尾標(biāo)志和HTML的頭部與實體2大部分。有3個雙標(biāo)記符用于頁面整

5、體結(jié)構(gòu)的確認。4、 網(wǎng)頁設(shè)計的基本流程一個網(wǎng)站的建設(shè)是需要吧很多細節(jié)結(jié)合在一起，只有把各步驟有序的完成，才能建成一個完整的網(wǎng)站，雖然建站的步驟很多，而且都是分開的部分，但是這些步驟會形成一個基本的流程，按照這個流程去做，就能完成建站，下面就給大家介紹一下，網(wǎng)站建設(shè)的基本流程是什么?1、域名空間 一個網(wǎng)站的建設(shè)首先當(dāng)然是選擇一個好的域名，后綴一般都是選擇.com和.cn的較多，.com是國際域名后綴，.cn是中國的域名，域名的主體一般和你的網(wǎng)站主題，或者企業(yè)的名稱全拼來做域名的主體，如今互聯(lián)網(wǎng)當(dāng)中網(wǎng)站繁多，很多域名已經(jīng)被注冊，可以是全拼，可以是首字母，可以加地域或者數(shù)字，但是一定要有意義，讓人容

6、易記住。當(dāng)域名購買完了之后，還要有個域名可以訪問到的地方，這時候就要租一個虛擬主機的空間了，把域名與主機綁定，當(dāng)訪問域名時，就直接進入放在虛擬主機空間里的網(wǎng)站了。2、規(guī)劃設(shè)計 這時候就要著手規(guī)劃想要的網(wǎng)站了，個人網(wǎng)站或者是企業(yè)站或是門戶站，要有目的性，不同類型的網(wǎng)站設(shè)計業(yè)不一樣，需要做一個合理的規(guī)劃，想好需要實現(xiàn)的功能，想要的板式類型和主要的面對用戶群，這都是網(wǎng)站初期要計劃好的，這時候也要收集好素材，網(wǎng)站中需要的內(nèi)容，文字，圖片等信息的收集，都是在建站的時候需要的，做好準備。3、 3、制作建設(shè) 當(dāng)做好準備的時候，就要開始建站了，建站主要分前臺和后臺，前臺的就是網(wǎng)站的板式，根據(jù)網(wǎng)站類型，面向人群

7、，來設(shè)計網(wǎng)站的版面，不宜太過雜亂，一定要簡潔，保證用戶體驗，才能讓訪問者有好感。建設(shè)后臺就較為復(fù)雜了，就要用程序整合前臺，并且完成需要的功能，這個需要較為復(fù)雜的程序編寫。4、 4、測試發(fā)布 當(dāng)網(wǎng)站程序方面編寫好的時候，就是個一個網(wǎng)站的雛形了，但這時候網(wǎng)站還是不完善的，需要進行測試評估，網(wǎng)站還是有很多不完善的地方，要從用戶體驗的角度多去觀察，漸漸完善。當(dāng)網(wǎng)站的問題都解決，沒什么大的問題的時候，就可以把網(wǎng)站傳到虛擬主機空間里，這是訪問域名就可以正式訪問網(wǎng)站了。5、 5、維護推廣 網(wǎng)站雖然上線了，但是工作還沒有完成，這時候網(wǎng)站也許還有沒發(fā)現(xiàn)的漏洞等細節(jié)，在網(wǎng)站上線之后，還要繼續(xù)完善網(wǎng)站的不足，維護主

8、要針對于網(wǎng)站的服務(wù)器，網(wǎng)站安全和網(wǎng)站內(nèi)容的維護。這時候站內(nèi)的完成了，就要注重站外了，可以做seo優(yōu)化或者百度推廣，對網(wǎng)站進行推廣，這是針對百度搜索引擎的推廣，還可以在其他網(wǎng)絡(luò)平臺上推廣，做互聯(lián)網(wǎng)推廣。鞏固與練習(xí)通過本章學(xué)習(xí)什么是網(wǎng)頁和網(wǎng)站作業(yè)布置網(wǎng)頁的基本元素有哪些？授課日期第二周班級14電藝目的要求了解Dreamweaver的作用重點難點掌握使用Dreamweaver編輯網(wǎng)頁和管理站點新課內(nèi)容與教法：第二章 Dreamweaver CS5基礎(chǔ)1、 Dreamweaver功能概括所見即所得的強大功能沒有一個Web編輯軟件能像Dreamweaver一樣，具有所見即所得的功能，你可以在Proper

9、ties（屬性）窗體中調(diào)整參數(shù)，即刻在Documentwindow窗體中看到它的改變，如果你按下F12，Dreamweaver會自動生成HTML文件格式，供欲覽，以便開發(fā)人員進一步調(diào)整。1、方便快速的文本編排與Word相似，具有強大的文本編輯能力，你可以在Layer、Table、Frame或直接在Document window窗體中輸入文字，通過快捷的右鍵，選擇例如Font（字體）類的選項進行編輯，也可以利用Text菜單進行更為細致的排版編輯。2、專業(yè)的HTML編輯-Roundtrip HTMLDreamweaver與現(xiàn)存的網(wǎng)頁有著極好的兼容性，不會更改任何其他編輯器生成的頁面。這將大幅度降低

10、由于HTML源代碼的變更而給設(shè)計者帶來的困惑。3、高質(zhì)量的HTML生成方式由Dreamweaver生成的HTML源代碼保持了很好的可讀性。代碼結(jié)構(gòu)基本上同手工生成的代碼相同，這使得設(shè)計者可以輕易掌握代碼全局并加以修改。4、實時的HTML控制設(shè)計者可以在可視化或者文本這兩種方式下進行頁面的設(shè)計，并且可以實時的監(jiān)控HTML源代碼。當(dāng)設(shè)計者對代碼作出任何改動時，結(jié)果將立刻顯示出來。5、與流行的文本HTML代碼編輯器之間的協(xié)調(diào)工作Dreamweaver可以與目前流行的HTML代碼編輯器（如BBEdit、HomeSite等）全面協(xié)調(diào)工作。已經(jīng)習(xí)慣于使用這些純文本編輯器的設(shè)計者將在不改變他們原有工作習(xí)慣的

11、基礎(chǔ)上，充分享受到Dreamweaver帶來更多功能。設(shè)計者可以使用文本編輯器直接編輯HTML，同時使用Dreamweaver生成較為復(fù)雜的動畫、表格、Frame、JavaScript等。（Dreamweaver分別為Windows用戶以及Macintosh用戶提供了完全版的HomeSite及BBEdit這兩個目前最流行的代碼編輯器）。6、強大的DHTML支持動態(tài)HTML是4.0瀏覽器支持的新功能，將在未來廣泛應(yīng)用于網(wǎng)絡(luò)。這項技術(shù)可以增強頁面的交互性、提高下載速度、使頁面更美觀更易于設(shè)計且富有動感。Dreamweaver 對DHTML完全支持，并提供了與之相關(guān)聯(lián)的四大功能。而其它的可視化網(wǎng)頁編

12、輯工具幾乎不提供或只小部分提供動態(tài)HTML的制作。7、重復(fù)元素庫在Dreamweaver中定義的一個站點內(nèi)，設(shè)計者可以將重復(fù)使用的內(nèi)容（例如Header、Footer等）獨立定義。這樣設(shè)計者在需要這些內(nèi)容的地方只需做一個簡單的插入就可以了。而且當(dāng)元素庫中定義的內(nèi)容被修改后，整個站點中設(shè)計同樣內(nèi)容的地方將統(tǒng)一發(fā)生變化而無需再逐一修改。8、基于目標(biāo)瀏覽器的檢測目前瀏覽器更新?lián)Q代很快，從2.0到4.0層出不窮。同時又有IE和Netscape兩大陣營競爭。設(shè)計者制作出的網(wǎng)頁必須面向功能不同的瀏覽器并保持其正確性。這是一項比較困難的工作。而Dreamweaver不僅在設(shè)計時可以基于不同的目標(biāo)瀏覽器進行不

13、同的設(shè)計，而且在頁面制作完畢后，Dreamweaver可以基于目標(biāo)瀏覽器對頁面進行檢測并給出報告。在報告中將顯示出被檢測頁面的兼容性以及在不同瀏覽器中頁面的區(qū)別，同時還將指出頁面中HTML的句法錯誤。9、FTP在Dreamweaver中包含了一個界面極為友好的FTP工具。通過它，設(shè)計者可以非常方便的將設(shè)計的單一頁面或者一個站點上傳至服務(wù)器。同時，設(shè)計者還可以非常方便的將已經(jīng)上傳至服務(wù)器的文件下載以供參考和修改。在文件傳輸?shù)倪^程中，Dreamweaver將記錄下整個過程以供錯誤分析。10、文件鎖定這是一種專為合作開發(fā)環(huán)境設(shè)置的檔案機制?？梢酝ㄟ^標(biāo)記和取出機制設(shè)置只讀或可編寫屬性來進行文檔的保護。

14、通過這種方法可以防止不必要的數(shù)據(jù)丟失，增強了安全性。2、 Dreamweaver工作區(qū)域使用Dreamweaver CS5的工作區(qū)，可以查看文檔和對象的屬性，使用工作區(qū)內(nèi)的工具欄，還可以快速地更新和修改文檔。在集成的工作區(qū)中，全部窗口和面板都被集成到一個更大的應(yīng)用程序窗口中。查看完整的應(yīng)用程序窗口工作區(qū)布局A：文檔工具欄 B：應(yīng)用程序欄 C：“文檔”窗口 D：工作區(qū)切換器 E：面板組 F：標(biāo)簽選擇器 G：屬性檢查器 H：文件面板工作區(qū)元素概述 歡迎屏幕：用于打開最近使用過的文檔或者創(chuàng)建新文檔。還可以通過產(chǎn)品介紹或教程了解有關(guān)Dreamweaver的更多信息。 文檔工具欄：包含一些按鈕，用于提供

15、“文檔”窗口各種視圖的選項、各種查看選項和一些常用操作。 應(yīng)用程序欄：Dreamweaver窗口頂部包含菜單（只限于Windows）、工作區(qū)切換器以及其他應(yīng)用程序控件。 標(biāo)準工具欄：點擊“查看”菜單，選擇“工具欄”命令，在彈出的子菜單中選擇“標(biāo)準”項，即可顯示標(biāo)準工具欄。標(biāo)準工具欄包括從“文件”和“編輯”菜單中執(zhí)行的常見的操作按鈕：新建、打開、在Bridge中瀏覽、保存、全部保存、打印代碼、剪切、拷貝、粘貼、還原和重做等按鈕。 編碼工具欄：包含可用于執(zhí)行多項標(biāo)準編碼操作的按鈕。僅在“代碼”視圖中顯示。 “樣式呈現(xiàn)”工具欄：可以查看設(shè)計在不同媒體類型中的外觀（如果使用依賴于媒體的樣式表）。它還包

16、含一個允許您啟用或禁用層疊式樣式表 (CSS) 樣式的按鈕。 “文檔”窗口：顯示當(dāng)前正在創(chuàng)建和編輯的文檔。 “屬性”檢查器：用于查看和更改所選對象或文本的各種屬性。每個對象具有不同的屬性。默認情況下，在“編碼器”工作區(qū)布局中，屬性檢查器是不展開的。 標(biāo)簽選擇器：位于“文檔”窗口底部的狀態(tài)欄中。顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽可以選擇該標(biāo)簽及其全部內(nèi)容。 面板：幫助我們監(jiān)控和修改工作。示例包括“插入”面板、“CSS 樣式”面板和“文件”面板。如果要展開某個面板，請雙擊其選項卡。 插入面板：包含用于將圖像、表格和媒體元素等各種類型的對象插入到文檔中的按鈕。每個對象都

17、是一段HTML代碼，允許我們在插入它時設(shè)置不同的屬性。例如，您可以通過單擊“插入”面板中的“表格”按鈕來插入一個表格。如果愿意，可以使用“插入”菜單來插入對象，而不用通過使用“插入”面板。 “文件”面板：無論它們是Dreamweaver站點的一部分還是位于遠程服務(wù)器，都可以將它們用于管理文件和文件夾。使用“文件”面板，還可以訪問本地磁盤上的所有文件。3、 通過Dreamweaver設(shè)計簡單網(wǎng)頁鞏固與練習(xí)小結(jié)Dreamweaver功能概括作業(yè)布置Dreamweaver工作區(qū)域有幾種授課日期第三周班級14電藝目的要求理解使用網(wǎng)頁設(shè)計的基本方法、掌握使用框架設(shè)計網(wǎng)頁重點難點掌握使用CSS設(shè)計網(wǎng)頁、理

18、解網(wǎng)頁文本和段落的設(shè)計新課內(nèi)容與教法：第三章 靜態(tài)效果網(wǎng)頁設(shè)計1、 使用HTML設(shè)計網(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)頁設(shè)計，更確切的說是網(wǎng)頁制作。如果結(jié)合JavaScript，會被稱為前端開發(fā)。另外，HTML5和CSS3的發(fā)展，為網(wǎng)頁添加了很多新特性新功能，涉及

19、這方面的被稱為HTML5開發(fā)2、 使用表格設(shè)計網(wǎng)頁表格、圖象及超鏈接在網(wǎng)頁中使用表格（表格的用途；插入表格；表格的基本操作、設(shè)置表格屬性；編輯表格）（理解，核心）在網(wǎng)頁中插入圖像（插入圖像；圖文混排）（理解，核心）超接鏈接（超鏈接的基本概念；超鏈接的創(chuàng)建目標(biāo)和方法；）（理解，核心）3、 使用框架設(shè)計網(wǎng)頁1框架、樣式表2表單、行為、多媒體和HTML代碼編輯4、 使用模板和庫設(shè)計網(wǎng)頁模板的創(chuàng)建有三種方式。1、直接創(chuàng)建模板選擇“窗口/資源”命令，打開“資源”面板，切換到模板子面板，單擊模板面板上的“擴展”按鈕，在彈出菜單中選擇“新建模板”這是在瀏覽窗口出現(xiàn)一個未命名的模板文件，給模板命名。然后單擊“

20、編輯”按鈕，打開模板進行編輯。編輯完成后，保存模板，完成模板建立。2、將普通網(wǎng)頁另存為模板打開一個已經(jīng)制作完成的網(wǎng)頁，刪除網(wǎng)頁中不需要的部分，保留幾個網(wǎng)頁共同需要的區(qū)域。選擇“文件/另存為模板”命令將網(wǎng)頁另存為模板。在彈出的“另存模板”對話框中，“站點”下拉列表框用來設(shè)置模板保存的站點，課選擇一個選項?！艾F(xiàn)存的模板”選框顯示了當(dāng)前站點的所有模板?！傲泶鏋椤蔽谋究蛴脕碓O(shè)置模板的命名。單擊“另存模板”對話框中的“保存”按鈕，就把當(dāng)前網(wǎng)頁轉(zhuǎn)換為了模板，同時將模板另存到選擇的站點。單擊“保存”按鈕，保存模板。系統(tǒng)將自動在根目錄下創(chuàng)建Template文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。在保存模板

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