網(wǎng)頁設計基礎備課筆記

1、 熟悉并掌握HTML語言基礎知識，理解并掌握網(wǎng)頁設計得基本流程 難點 新課內(nèi)容與教法： 第一章網(wǎng)頁設計基礎 一、認識網(wǎng)頁與網(wǎng)站 1、1:主要講授網(wǎng)絡得定義、互聯(lián)網(wǎng)得分類及發(fā)展概況 ；OSI / ISO參考模型、TCP/IP參考模 型、IP地址與域名、網(wǎng)頁語言介紹 ； 1、2:主要講授網(wǎng)站得種類及相關知識 （掌握）、網(wǎng)站得開發(fā)流程與方法（掌握；核心）、常用網(wǎng) 站制作工具（了解） 二、網(wǎng)頁得基本兀素 網(wǎng)頁由文本、圖像、動畫、超級鏈接等基本元素構成 介紹，為后面各章中運用這些元素制作網(wǎng)頁奠定基礎。 1、文本 一般情況下，網(wǎng)頁中最多得內(nèi)容就是文本 ，可以根據(jù)需要對其字體、大小、顏色、底紋、 邊框等屬性

2、進行設置。建議用于網(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地址等。超級鏈接可以就是文

3、本、按鈕或圖片 ，鼠標指針 指向超級鏈接位置時，會變成小手形狀。 4、導航欄 導航欄就是一組超級鏈接，用來方便地瀏覽站點。導航欄一般由多個按鈕或者多個文本 超級鏈接組成。 5、動畫授課日期 第一周 班級 14電藝 目 得 要 求 認識網(wǎng)頁與網(wǎng)站，了解網(wǎng)頁得基本元素 重占 .IA .IA 八、 、 ,本節(jié)將對這些基本元素進行簡單 動畫就是網(wǎng)頁中最活躍得元素，創(chuàng)意出眾、制作精致得動畫就是吸引瀏覽者眼球得最有 效方法之一。但就是如果網(wǎng)頁動畫太多 ，也會物極必反，使人眼花繚亂，進而產(chǎn)生視覺疲勞。 6、表格 表格就是HTML語言中得一種元素，主要用于網(wǎng)頁內(nèi)容得布局，組織整個網(wǎng)頁得外觀，通 過表格可以精確

4、地控制各網(wǎng)頁元素在網(wǎng)頁中得位置。 7、框架 框架就是網(wǎng)頁得一種組織形式，將相互關聯(lián)得多個網(wǎng)頁得內(nèi)容組織在一個瀏覽器窗口中 顯示。例如在一個框架內(nèi)放置導航欄 ，另一個框架中得內(nèi)容可以隨單擊導航欄中得鏈接而改 變。 8、表單 表單就是用來收集訪問者信息或實現(xiàn)一些交互作用得網(wǎng)頁 輸入文本、選中單選按鈕或復選框、從下拉菜單中選擇選項等。 網(wǎng)頁中除了上述這些最基本得構成元素外 ，還包括橫幅廣告、字幕、懸停按鈕、日戳、 計算器、音頻、視頻、 Java Applet 等元素。 三、超文本標記語言基礎 一個網(wǎng)頁對應于一個 HTML文件，HTML文件以、htm或、html為擴展名?？梢允褂萌魏?能夠生成TXT類

5、型源文件得文本編輯來產(chǎn)生 HTML文件。標準得HTML文件都具有一個基本 得整體結構，即HTML文件得開頭與結尾標志與 HTMI得頭部與實體2大部分。有3個雙標記 符用于頁面整體結構得確認。 四、網(wǎng)頁設計得基本流程 完整得網(wǎng)站，雖然建站得步驟很多，而且都就是分開得部分，但就是這些步驟會形成一個基本 得流程，按照這個流程去做，就能完成建站，下面就給大家介紹一下，網(wǎng)站建設得基本流程就 是什么？ 1域名空間 一個網(wǎng)站得建設首先當然就是選擇一個好得域名 ，后綴一般都就是選擇、 與得 較多，、就是國際域名后綴，就是中國得域名，域名得主體一般與您得網(wǎng)站主題 ，或者企業(yè)得名 稱全拼來做域名得主體 ，如今互聯(lián)

6、網(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)站得建設就是需要吧很多細

7、節(jié)結合在一起 ，只有把各步驟有序得完成，才能建成一個 目 得 要 求 重點 掌握使用Dreamweaver編輯網(wǎng)頁與管理站點 難點 新課內(nèi)容與教法： 第二章 Dreamweaver CS5 基礎 一、Dreamweaver 功能概括 所見即所得得強大功能 沒有一個 Web編輯軟件能像 Dreamweaver 一樣,具有所見即所得得功能,您可以在 Properties（ 屬性）窗體中調(diào)整參數(shù),即刻在Documentwindow窗體中瞧到它得改變,如果 3、 4、 5、 材，網(wǎng)站中需要得內(nèi)容，文字，圖片等信息得收集，都就是在建站得時候需要得，做好準備。 3、制作建設 當做好準備得時候，就要開始建站

8、了 ，建站主要分前臺與后臺，前臺得就就是網(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)站雖然上線了，但就是工作

9、還沒有完成，這時候網(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得作用 您按下F12,Dreamweaver會自動生成HTML文件格式，供欲覽，以便開發(fā)人員進一步調(diào)整。 1、方便快速得文本編排 與Wor

10、d相似，具有強大得文本編輯能力，您可以在Layer、Table、Frame或直接在 Document window窗體中輸入文字，通過快捷得右鍵，選擇例如Font（字體）類得選項進行 編輯,也可以利用Text菜單進行更為細致得排版編輯。 2、 Dreamweaver與現(xiàn)存得網(wǎng)頁有著極好得兼容性，不會更改任何其她編輯器生成得頁面。這將 大幅度降低由于 HTML源代碼得變更而給設計者帶來得困惑。 3、 高質量得HTML生成方式 由Dreamweaver生成得HTML源代碼保持了很好得可讀性。代碼結構基本上同手工生成得代 碼相同，這使得設計者可以輕易掌握代碼全局并加以修改。 4、 實時得HTML控制

11、 設計者可以在可視化或者文本這兩種方式下進行頁面得設計 ，并且可以實時得監(jiān)控 HTML源 代碼。當設計者對代碼作出任何改動時 ，結果將立刻顯示出來。 5、與流行得文本HTML代碼編輯器之間得協(xié)調(diào)工作 Dreamweaver可以與目前流行得 HTML代碼編輯器（如BBEdit、HomeSite等）全面協(xié)調(diào)工作。 已經(jīng)習慣于使用這些純文本編輯器得設計者將在不改變她們原有工作習慣得基礎上 ，充分享 受到Dreamweaver帶來更多功能。設計者可以使用文本編輯器直接編輯 HTML同時使用 Dreamweaver生成較為復雜得動畫、表格、 Frame、JavaScript 等。（Dreamweaver

12、分別為 Windows用戶以及Macintosh用戶提供了完全版得 HomeSite及BBEdit這兩個目前最流行得 代碼編輯器）。 6、強大得DHTM支持I 動態(tài)HTML就是4、0瀏覽器支持得新功能，將在未來廣泛應用于網(wǎng)絡。這項技術可以增強頁 面得交互性、提高下載速度、使頁面更美觀更易于設計且富有動感。 Dreamweaver對DHTML 完全支持，并提供了與之相關聯(lián)得 _ 小部分提供動態(tài) HTML得制作。 7、重復元素庫 _ 在Dreamweaver中定義得一個站點內(nèi)，設計者可以將重復使用得內(nèi)容 （例如Header、Footer 等）獨立定義。這樣設計者在需要這些內(nèi)容得地方只需做一個簡單得

13、插入就可以了。而且當 元素庫中定義得內(nèi)容被修改后 ，整個站點中設計同樣內(nèi)容得地方將統(tǒng)一發(fā)生變化而無需再逐 一修改。 8、 基于目標瀏覽器得檢測 目前瀏覽器更新?lián)Q代很快，從2、0到4、0層出不窮。同時又有IE與Netscape兩大陣營競 爭。設計者制作出得網(wǎng)頁必須面向功能不同得瀏覽器并保持其正確性。 這就是一項比較困難 得工作。而Dreamweaver不僅在設計時可以基于不同得目標瀏覽器進行不同得設計 ，而且在 頁面制作完畢后Dreamweaver可以基于目標瀏覽器對頁面進行檢測并給出報告。在報告中 將顯示出被檢測頁面得兼容性以及在不同瀏覽器中頁面得區(qū)別 ，同時還將指出頁面中 HTML 得句法錯

14、誤。 9、 FTP 在Dreamweaver中包含了一個界面極為友好得 FTP工具。通過它，設計者可以非常方便得將 設計得單一頁面或者一個站點上傳至服務器。同時 ，設計者還可以非常方便得將已經(jīng)上傳至 服務器得文件下載以供參考與修改。在文件傳輸?shù)眠^程中 以供錯誤分析。 10、文件鎖定 這就是一種專為合作開發(fā)環(huán)境設置得檔案機制。 可以通過標記與取出機制設置只讀或可編寫 屬性來進行文檔得保護。通過這種方法可以防止不必要得數(shù)據(jù)丟失 ，增強了安全性。 二、Dreamweaver 工作區(qū)域 使用Dreamweaver CS5得工作區(qū),可以查瞧文檔與對象得屬性 ,使用工作區(qū)內(nèi)得工具欄, 應用程序窗口中。 D

15、reamweaver將記錄下整個過程 還可以快速地更新與修改文檔。在集成得工作區(qū)中 ,全部窗口與面板都被集成到一個更大得 查瞧完整得應用程序窗口 工作區(qū)布局 MFMF 二鼻* 丿里I r I r - - o o臉屮亠丄-7 r = r = F F 皿 訃 2VRM 2VRM - - ill l JU - - - -J.til ELLnj= hH#:J.til ELLnj= hH#:： WTiTl WTiTl : : iv*liv*l * W1 V h* W1 V h mlml - -fcilrfcilr b.g* rh b.g* rh / + jb*trjb*tr 丄 血i.i.、 X LX

16、L - -Q Q Z Z 它 4r7 7.4r7 7.- -I I 7 7丄.1 1 嚴 Qi.* IEQi.* IE a a * : :T3fT3f釈(SI lyj (SI lyj isn isn W W 004 a004 am m n st: c n st: c $/壬互 EQI EQI 8* anxf * t aju oos(ai ju oos(ai * * VUU (BlVUU (Bl gg agg ax 4 x 4 卞 X)Vimvu Vimvu 伽TjaiffisrawT nil rT I TjaiffisrawT nil rT I f fXEftjr W*CW*C 八MWI|WX

17、MWI|WXC C WL tfBBT WL tfBBT I I jnjn 4 4 e h2e h2 tlOt ZSS tlOt ZSS ei ei 5l85l8 lowlow f f VaW3 0HaW3 0HRj536 話頑薪 牙i i爭辛孑0 0 劇秒1 1 dSit dSit I I諼件怎計3 3策B0B0于再前卷 (58E PJ1(58E PJ1 【宕3 3 OfUaiOfUai 【卻 陌3 3旦型 ft U4U4妙弩3J3J ：e e逵犒 - - SHE Z X a5 U c ,.ff,.ff 隔京 片滬I 9I 9期 i iMutf u Mutf u 勺 0 0 I I Jlfct

18、 Jpc* Jlfct Jpc* I I 0 0 胃幾環(huán) 0 0 若掙 尢力1 1煢a a 億MM鱷里上B B下拉或雙擊下的文件 = 自己電腦上要上傳 的目 QdmirirChrna QdmirirChrna 出 dodo怕答醫(yī) I I件? 點琳轉列對糧謫 艾件妾 *侔昊 史 ff 奚 宜件買 龍畜如 Acli w SiTiFir Acli w SiTiFir ri(t A It v ri(t A It v 古,rM*F liftrM*F lift I I lala 二*敎下面所示: Q.vbinQ.vbin OnxOnx U UP P C C ijunjiiijrijunjiiijr 0 0

19、 t1 txt b U t1 txt b U tVftVf *4w,*4w,trc i*ftrc i*f 3 3 譏tltl 2am D M2am D M SOlOSOlO- -H H- -30 11; 31 30 11; 31 旳H H- -卜1 1 r r觀 生kfrL kfrL 旨T=rTT=rT- - eraera I I上乳 E”E”側4 4 ISIS令S3LT6S3LT6亍衣禪,3,3共 ffi 八i9i9耶阿5 5尊3 3竜礙S SS S簸 ft1 ft1 7 7 CiCi 呈爲） WWWWWW也 也亦威粽W W實文件33；右 炙“：webweb 并a a入邊令文ft夾醞如黑是新

20、空H H 挪隊空I I劃S S諧的處件*懲爺韜左詛的 用G G克 ft 夬A A女ftft上惰SwwwrflOtSwwwrflOt或 HdptsJtftX FdHdptsJtftX Fd 3 3嚀5 5呼氐命個5 5件.3.3共3 3 ffl爭蒼】 壽護訂圧f*f*, , C9*. fflC9*. ffl er.zne AIIer.zne AII ItL* rHL2.AilLn ItL* rHL2.AilLn farfar XLJIK 2222寸旳事L L禪* dLh dLh 丫山卩“ 1 LfeLtvJ 2 iccnrs Wr1 LfeLtvJ 2 iccnrs Wr dq.idq.i- -

21、h h 釵吐 1 1斗評 氓1 111 1 111 i* i* 駅旅I I喩列 A A 36 Trusf4T 36 Trusf4T 上 1 1一三 - -I p _ _i _. . sI p _ _i _. . s- -H HHH- -B B- -rn I p r I r rn I p r I r - - rr n rr n - - 至耐44一冏 I I- -I IL L . . I* I* .:.:I i I i - - l 6U l 6U丄中 ：& It& It廠EfcrsEfcrs - -.!.! 窖 嘆 - -, . . E J E J - I 1I 1 - - ! (

22、 W 4o ! ( W 4o r I q r I q : :- - - -IE*IE*- - PlllPlll * .! .! U U ： J JTBTBI I ? 3Si T?3Si T? !EiM-小 J - li li TFS n T ITFS n T I ir ir - 選擇好后單擊右鍵選擇傳送或者把選中得文件直接拖到下面得那框里 TTrt* iTrit.ai# TTrt* .1. Tar. tivtiv U_ PU_ P- -Zr Ik Zr Ik - -r oL t Lr oL t L- -icTr JicTr J- - Wa M.S* fclJja.kHLIll Wa M.S*

23、fclJja.kHLIll : :w rr w rr lun lun - -d d irC L|. 1 fcTBTT hirC L|. 1 fcTBTT h3 3 J JL L： - -zrizri- -JvHJvH- -i Kh 1 i Kh 1 r_r_ wsfwsf ；* , 9JVXA 9JVXA I I S f S f : : r r - -tJ SI tJ SI J J IUBJIUBJ晶*ITIT * 5? 5? Uv BUv *a 禪屯 * 竽 * J J r r 虹虹 a a ST ST AJAJ !- I w I w- - 1 1 4242 口 gg ts*ts* TJJ4

24、TJJ4aa ?寶 爭：- 口押 盒吐 h.h.- -s s- -. . Z Z- - 甑；1巳*3-驗叫I I，益 J fcjT fcjT Hitt Hitt Mil Mil ifif- - =KxW =KxW F FK K B BT TBKI BKI V V VRMVRM aCVRiT ITaCVRiT IT Z Z其 S S 2 2 9 9 L L I I J J： 鼻 品血憂 壬-嚴； 七丹 、 ” P* P* ! *- 片 歹.g 4 4沖 j. I j. I 1111 4bi abl4bi abl- - 適 1 1 s,s, _B _B =rn=rn丹丹 ；F F片 dSsib*

25、4dSsib* 4 卜- r4c=r4c=有 J BTW I JlflJ BTW I Jlfl = F = F ll 搏唏 疵 “w w- -n n” H H ”H H，川 FH H n n N n nJ JH HF FU U H H p p B Bn n- -U UK K n nf fl l 山卄 三 i 三 mEii 三三去一昱靜 w w B B- -u u B B - - - 9 94 4- - a a A A- - - -n n n n D D a a S S 軻旦fi e da-Ja-n 叫 n nl lw wf fa ab bl lM Ma a二：_:二打：-;-二二： 三三二二二

26、 1 三二 L 3. 1111T T B*4B*4： 曲 HwHw _Z X X T UT U- -i CftCTfti CftCTft w w T T iLj.TmiLj.Tm- -5 5- -j j 血曠 t t htlH*htlH* t t M M- -H H- -n n Qflfl M ST rrrurTQflfl M ST rrrurT鼻2 2 KE KE 料住當 UOUO JWJW- -ariT ai ariT ai M M- - ILIL n n也jaja何FtEE FtEE 聞UHirnHim UHirnHim D D ncnc- -M M- -11 iiihi 11 tiiBiiihi 11 tiiB- -i i- -iinQ iBT i.iinQ iBT i.- -p p V (fi V (fi H H rwrw- -f f arK+iiarK+ii 說(nH(nH- -H4)H4)樸0*0* 0 0 in*in*卻葉 r*. Dt r*. Dt L L 1 1 輛 + +妣妣=H=H( R 吋！ a a如 0 煞1 1- -4 4叩T T .E H.E H- - CALLLbL4CALLLbL4- -lftlft3iailin=)I