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

1、授課日期第一周班級14電藝目的要求認(rèn)識網(wǎng)頁與網(wǎng)站，了解網(wǎng)頁的基本元素重點(diǎn)難點(diǎn)熟悉并掌握HTML語言基礎(chǔ)知識，理解并掌握網(wǎng)頁設(shè)計(jì)的基本流程新課內(nèi)容與教法：第一章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)1、 認(rèn)識網(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é)將對這些基本元素進(jìn)行簡單介紹，為后面各章中運(yùn)用這些元素制作網(wǎng)頁奠定基礎(chǔ)。1.文本一般情況下，網(wǎng)頁中最多

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

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

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

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

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

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

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

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

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

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

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

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

14、通過這種方法可以防止不必要的數(shù)據(jù)丟失，增強(qiáng)了安全性。2、 Dreamweaver工作區(qū)域使用Dreamweaver CS5的工作區(qū)，可以查看文檔和對象的屬性，使用工作區(qū)內(nèi)的工具欄，還可以快速地更新和修改文檔。在集成的工作區(qū)中，全部窗口和面板都被集成到一個(gè)更大的應(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、“文檔”窗口各種視圖的選項(xiàng)、各種查看選項(xiàng)和一些常用操作。 應(yīng)用程序欄：Dreamweaver窗口頂部包含菜單（只限于Windows）、工作區(qū)切換器以及其他應(yīng)用程序控件。 標(biāo)準(zhǔn)工具欄：點(diǎn)擊“查看”菜單，選擇“工具欄”命令，在彈出的子菜單中選擇“標(biāo)準(zhǔn)”項(xiàng)，即可顯示標(biāo)準(zhǔn)工具欄。標(biāo)準(zhǔn)工具欄包括從“文件”和“編輯”菜單中執(zhí)行的常見的操作按鈕：新建、打開、在Bridge中瀏覽、保存、全部保存、打印代碼、剪切、拷貝、粘貼、還原和重做等按鈕。 編碼工具欄：包含可用于執(zhí)行多項(xiàng)標(biāo)準(zhǔn)編碼操作的按鈕。僅在“代碼”視圖中顯示。 “樣式呈現(xiàn)”工具欄：可以查看設(shè)計(jì)在不同媒體類型中的外觀（如果使用依賴于媒體的樣式表）。它還包

16、含一個(gè)允許您啟用或禁用層疊式樣式表 (CSS) 樣式的按鈕。 “文檔”窗口：顯示當(dāng)前正在創(chuàng)建和編輯的文檔。 “屬性”檢查器：用于查看和更改所選對象或文本的各種屬性。每個(gè)對象具有不同的屬性。默認(rèn)情況下，在“編碼器”工作區(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 樣式”面板和“文件”面板。如果要展開某個(gè)面板，請雙擊其選項(xiàng)卡。 插入面板：包含用于將圖像、表格和媒體元素等各種類型的對象插入到文檔中的按鈕。每個(gè)對象都

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

18、解網(wǎng)頁文本和段落的設(shè)計(jì)新課內(nèi)容與教法：第三章 靜態(tài)效果網(wǎng)頁設(shè)計(jì)1、 使用HTML設(shè)計(jì)網(wǎng)頁從美工圖到網(wǎng)頁的呈現(xiàn)，是需要代碼去實(shí)現(xiàn)的。HTML、CSS以及JavaScript是網(wǎng)頁實(shí)現(xiàn)的基本組成部分，可以認(rèn)為是三種語言。HTML管的是網(wǎng)頁的基本結(jié)構(gòu)（比如不同模塊如何放置，這種布局操作），CSS處理網(wǎng)頁中的樣式（如文字的顏色、段落的首行縮進(jìn)等等），JavaScript管的是網(wǎng)頁中的行為，比如你點(diǎn)擊了向左向右的按鈕，圖片發(fā)生了滾動等。HTML和CSS不屬于網(wǎng)頁設(shè)計(jì)，更確切的說是網(wǎng)頁制作。如果結(jié)合JavaScript，會被稱為前端開發(fā)。另外，HTML5和CSS3的發(fā)展，為網(wǎng)頁添加了很多新特性新功能，涉及

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

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

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