自己動手寫網(wǎng)站.doc
《自己動手寫網(wǎng)站.doc》由會員分享，可在線閱讀，更多相關(guān)《自己動手寫網(wǎng)站.doc（8頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。
自己動手寫網(wǎng)站 1、什么叫Web開發(fā)？通俗點(diǎn)說：做網(wǎng)站的開發(fā)就是Web開發(fā)。網(wǎng)站不是天上掉下來的，是開發(fā)人員一行行代碼、美工人員一張張圖片做出來的。 2、 Web開發(fā)需要兩種技術(shù)人員，一種是程序員，一種是美工。程序員是開發(fā)網(wǎng)站的功能的人，而美工是使網(wǎng)站好看的人。 我們是計(jì)算機(jī)專業(yè)的學(xué)生，不懂美工、沒有美術(shù)基礎(chǔ)，不要沉迷于做好看的網(wǎng)站、網(wǎng)頁美化、網(wǎng)頁特效，專業(yè)的網(wǎng)站都有自己的美工人員，這不是我們的強(qiáng)項(xiàng)。 3、這門課是asp.net、php、jsp等后續(xù)課程的基礎(chǔ)。 4、Web的原理 下載 (17.42 KB) 2008-9-30 13:41 服務(wù)器不是直接把網(wǎng)頁的顯示的樣子傳給客戶端，而是只是返回一個網(wǎng)頁的描述文件，比如哪個地方有一個按鈕，哪個地方有個圖片，瀏覽器（比如IE）就解析這個文件，然后把網(wǎng)頁的內(nèi)容顯示給瀏覽者。描述文件就是HTML格式的。 標(biāo)識一臺服務(wù)器是要靠IP地址的，jsj321.com這樣的域名并不能唯一標(biāo)識一臺服務(wù)器。把網(wǎng)站服務(wù)器想象成你的一個借你錢的人，你向催債公司說“上楊中科家催債去”，催債公司和你都不知道楊中科住哪，那么這時候就需要去問公安局。公安局就是DNS服務(wù)器，DNS服務(wù)器就是提供了根據(jù)域名查詢服務(wù)器IP地址的功能。 注：在命令行下運(yùn)行“ping www.jsj321.com”查服務(wù)器ip地址。 5、DNS深入挖掘 （1）如果我訪問一個不存在的網(wǎng)站，那么瀏覽器就會報(bào)告“找不到服務(wù)器或 DNS 錯誤” （2）DNS服務(wù)器并不是全球只有一個，而是有很多個。 （3）DNS劫持的原理：黑客控制了DNS服務(wù)器，然后把所有的解析請求都故意解析到一個惡意網(wǎng)站服務(wù)器上去，那么訪問者就訪問了惡意網(wǎng)站。中國電信、中國網(wǎng)通都大義凜然的搞過：比如咱們通過ADSL上網(wǎng)通的寬帶，使用的就是網(wǎng)通的DNS服務(wù)器，默認(rèn)的行為就是你訪問一個錯誤的域名，DNS服務(wù)器就告訴你沒有這個服務(wù)器，然后你瀏覽器就會顯示“服務(wù)訪問”；如果瀏覽者訪問了一個不存在的域名，那么就導(dǎo)航到自己想推的網(wǎng)站，比如就是網(wǎng)通的網(wǎng)站；比如說大家訪問JSJ321.com的時候，90%的幾率都是直接導(dǎo)航到咱們的網(wǎng)站，10%的幾率是導(dǎo)航到網(wǎng)通的網(wǎng)站。 6、什么是HTML？HTML就是描述網(wǎng)頁長什么樣子、有什么內(nèi)容的一個文本文件。 7、什么是瀏覽器？IE就是瀏覽器嗎？瀏覽器就是接收瀏覽者者的操作（點(diǎn)擊一個鏈接、點(diǎn)擊一個按鈕），然后幫瀏覽者去Web服務(wù)器請求網(wǎng)頁內(nèi)容，然后展現(xiàn)成人眼能夠看得懂的可視化頁面的軟件。IE是瀏覽器的一種，還有FireFox、Opera、Chrome等等，注意遨游（MYIE2/Maxthon）、世界之窗、騰訊瀏覽器（TT）等并不是一種獨(dú)立于IE的瀏覽器，其內(nèi)核還是IE的內(nèi)核，只不過換了一個外殼而已，所以用遨游的不能嘲笑用IE的，否則就露怯了。 8、怎么查看網(wǎng)頁的描述文件（HTML）？使用InternetExplorer瀏覽器的話，在網(wǎng)頁上點(diǎn)擊右鍵，選擇“查看源文件” 9、回憶一下咱們在C#的課程中開發(fā)的那個自己的瀏覽器，用的WebBrowser控件就是Ie的核心，這是和Maxthon、TT這樣的瀏覽器一樣的。 10、Dreamweaver介紹。 網(wǎng)頁三劍客：Fireworks、Flash、Dreamweaver。Fireworks做圖片用的，F(xiàn)lash做Flash動畫用的，Dreamweaver做網(wǎng)頁用的。三者結(jié)合。Fireworks已經(jīng)被后娘Adobe拋棄了。 也可以用手寫寫HTML，但是非常麻煩。以前網(wǎng)頁開發(fā)是Dreamweaver、FrontPage雙寡頭壟斷，但是微軟已經(jīng)放棄FrontPage。但是對于開發(fā)人員來講，手寫HTML是一個基本要求。 11、瀏覽器兼容性問題 描述文件是一個統(tǒng)一的，但是就像口語翻譯一樣，不同的翻譯翻譯出來的東西也是不一樣的。最初原因就是Web剛起步的時候沒有一個統(tǒng)一的HTML標(biāo)準(zhǔn)，后來雖然有了標(biāo)準(zhǔn)的W3C組織提出的HTML標(biāo)準(zhǔn)，但是各個瀏覽器廠商還是各自為政，沒有完全遵守這個標(biāo)準(zhǔn)。 不同瀏覽器品牌對HTML的支持是有差異的，所以一個網(wǎng)頁在IE上和在FireFox上看起來可能長得不一樣，最明顯的就是QQ空間上的頁面在FireFox上顯示就有問題（前一陣子新聞?wù)fQZone開始支持FireFox了），甚至有的頁面在IE6和IE7上長的也不一樣。因此Web開發(fā)過程中的一個重要的也是最頭疼的問題就是瀏覽器的兼容。 12怎么讓我的網(wǎng)站讓所有的人看？怎么做一個網(wǎng)站。 申請域名（可選，可以用二級域名）、申請空間（用虛擬主機(jī)或者自己買服務(wù)器）、做內(nèi)容。關(guān)于這個問題以后會有專題論述。 13、開發(fā)第一個網(wǎng)頁 （1）代碼、拆分、設(shè)計(jì)。 （2）超鏈接不僅可以導(dǎo)航到另外一個網(wǎng)站，還可以導(dǎo)航到本地的一個網(wǎng)頁。 （3） 下載 (15.77 KB) 2008-9-30 13:41 大家學(xué)word的時候圖片插入的兩種方式：嵌入；鏈接。很顯然嵌入的方式你的文件無論移動到哪里，你的圖片都能看，哪怕源文件刪了都能看；而鏈接式的，一旦文件拷貝到別人的電腦里，別人就看不了了，而且原文件刪了也會有這個問題。 通過查看jsj321.com的首頁的html內(nèi)容我們得知：網(wǎng)頁里的圖片都是鏈接的。 大家學(xué)word的時候圖片插入的兩種方式：嵌入；鏈接。很顯然嵌入的方式你的文件無論移動到哪里，你的圖片都能看，哪怕源文件刪了都能看；而鏈接式的，一旦文件拷貝到別人的電腦里，別人就看不了了，而且原文件刪了也會有這個問題。 （4） 超鏈接（Target）、插入圖片、修改字體顏色、插入表格。 （5）課后作業(yè)用Dreamweaver重寫163注冊頁面。 1、 同學(xué)們可以把自己做到網(wǎng)站發(fā)給我，然后我們會把你的網(wǎng)站放到rupeng.com上，這樣你的網(wǎng)站就可以被所有人訪問到了，：） 2、空顏色和黑色是不一樣的 3、背景要做成別的顏色的``就像 現(xiàn)在這個uc上面背景有兩個小孩，怎么做到？ 主菜單【修改】→【頁面屬性】→背景顏色/背景圖片 4、去銀行里邊開戶，你需要到柜臺去填一張表，然后遞給銀行工作人員，由銀行工作人員根據(jù)你填的信息來進(jìn)行后續(xù)的處理，你本人不能直接去操作銀行的系統(tǒng)去自己開戶。 對于網(wǎng)站同樣是這樣的原理：163郵箱注冊來說，你在注冊頁面里也是填一張表：用了什么用戶名、密碼是什么。點(diǎn)擊【注冊賬號】按鈕以后，IE瀏覽器會將這個表格提交給163的后臺服務(wù)器進(jìn)行處理。 你填完表單后，要指定把表單提交給誰。銀行里是這樣，在Web也是這樣的。 表單提交上去后，你就別管了，進(jìn)行處理后會把處理結(jié)果告訴你。對于開戶來說，就是是否開戶成功；對于申請163郵箱來說，有可能是暫停申請、你申請的帳號已經(jīng)被別人用了。 5、這就是B/S(Browser/Server，瀏覽器/服務(wù)器)開發(fā)的特點(diǎn)：客戶端只有優(yōu)先的展現(xiàn)，而很多后臺處理是由服務(wù)器來完成的。 6、 開發(fā)網(wǎng)站程序的程序員分成兩種人：開發(fā)前臺界面和開發(fā)后臺處理程序。 前臺就是HTML網(wǎng)頁代碼，就像咱們用Dreamweaver開發(fā)一樣。而后臺則使用C#、ASP、Java、PHP之類的語言進(jìn)行后臺的處理程序編寫。 咱們的《自己動手寫網(wǎng)站入門篇》主要就是講前臺程序的開發(fā)。 2、 1、在網(wǎng)頁上點(diǎn)擊右鍵，選擇“編碼”→“簡體中文（GB2312）”不亂碼了。 2、兩個編碼的問題：文件的編碼；網(wǎng)頁的編碼； （1）創(chuàng)建一個文本文件，寫入“聯(lián)通”兩個字，然后保存，再用記事本打開，看到的就是亂碼，這就是傳說中的“微軟抵制聯(lián)通”。 （2）對于英文字母、數(shù)字組成的文章，保存的默認(rèn)都是ASCII碼。ASCII碼范圍就是0-255，漢字不在ASCII碼范圍之內(nèi)。怎么保存漢字就涉及到編碼的問題。“老A是我”，中文一個字符用兩個字節(jié)表示，A算什么呢？怎么來保存中文是一個老問題，歷史問題，比如微軟它有自己的解決方案，信產(chǎn)部搞了一套方案，清華也搞了一套方案，ISO標(biāo)準(zhǔn)組織也想統(tǒng)一這些方案搞一套方案。GBK、Big5、GB2312、UTF8、UTF16等等很多很多的編碼解決方案，而且還是共存的。就造成了亂碼問題。比如我用GBK保存了一個中文文章，然后UTF8打開了，這時候就出現(xiàn)了亂碼問題，保存的時候、加載的時候用的不是一套方案。所以有的時候Linux的人發(fā)一個文本文件給你，你就有可能用windows打開亂碼。 （3）因?yàn)镠TML開始幾段都是英文字符，所以就在網(wǎng)頁的開頭用一段描述性的文字自我說明“我用的是什么編碼方案”，后邊的中文IE就用它自我描述的編碼方案來打開。 （4）用記事本打開網(wǎng)頁文件，然后點(diǎn)擊主菜單的【文件】→【另存為】，在對話框的最底端有一個“編碼”，他顯示的就是當(dāng)前文件的編碼，如果你修改以后，點(diǎn)擊【保存】文件就用新編碼方案來保存。 （5）把網(wǎng)頁文件用UTF8編碼重新保存就ok了（記得文件類型選“全部”）。大家手寫網(wǎng)頁的時候盡量還是用Dreamweaver來修改，不要用記事本來修改，哪怕是直接改HTML。Dreamweaver會自動保證網(wǎng)頁的編碼自我描述部分和文件真正保存的編碼一致。 （6）專業(yè)人員打開“顯示后綴”。資源管理器里【工具】→【選項(xiàng)】，“查看頁”把“隱藏已知文件類型的擴(kuò)展名”取消掉。 （7）單選按鈕不是在頁面內(nèi)唯一互斥的。最經(jīng)典的就是“學(xué)歷”和“性別”同時存在。 區(qū)分兩組單選按鈕的屬性是“name”名字。所有名字相同的單元按鈕互斥，和不同名字的沒有直接關(guān)系。單選按鈕是分組的。 URL統(tǒng)一資源定位器： 一種想法：網(wǎng)址就是URL。 因?yàn)榫W(wǎng)頁里所有的資源都不是嵌入的，而是鏈接的，因此需要一種機(jī)制指定資源的位置。 可以為圖片的URL指定別的網(wǎng)站的一個圖片，也就是“盜鏈”。 Unique：唯一。Uni：一的意思。 Uniform：統(tǒng)一 Location：位置。Locate：定位，Locator：定位的人、定位者。 WWW上的任何信息，包括文檔、圖像、圖片、視頻或音頻都被看作是資源，為了方便引用資源，應(yīng)給它們分配一個惟一的標(biāo)志來描述該資源存放于何處及如何對它進(jìn)行存取，當(dāng)前使用的命名機(jī)制叫做統(tǒng)一資源定位器（Uniform Resource Locator），簡稱URL。 URL不一定都以http://開頭，比如河科信工寫的圖片地址是用[url=file:///]file:///[/url]開頭的，表示資源位于本地計(jì)算機(jī)。http://、[url=file:///]file:///[/url]就是訪問協(xié)議。 因?yàn)槿绻鰟討B(tài)網(wǎng)頁，那么網(wǎng)頁的HTML是不能用Dreamweaver寫死的，而是你的程序動態(tài)生成，這時候開發(fā)人員就要明白怎么樣生成HTML以及生成什么樣的HTML。這就是為什么不能僅僅停留在會用Dreamweaver寫網(wǎng)頁，而是要學(xué)手寫HTML的原因。咱們的課程也不會有太多的時間投入在Dreamweaver的使用上，而是用Dreamweaver做為一個輔助編輯器。開始會比較枯燥，大家不必看到語言就感到害怕，HTML和C語言不一樣，它只是一系列標(biāo)記的組合?？雌饋砜膳?，了解起來就很簡單。 HTML只是一部分，怎么配色， CSS（做美化用的）：不會在CSS投入太多精力 JavaScript就是操縱網(wǎng)頁的語言，和C、Java等一樣的。放一些精力。 HTML、CSS、JavaScript：靜態(tài)網(wǎng)頁技術(shù)。 ASP、PHP、JSP：動態(tài)網(wǎng)頁技術(shù)。重點(diǎn)在JSP，Java。要學(xué)會JSP動態(tài)網(wǎng)頁開發(fā)，就先要學(xué)習(xí)Java。 靜態(tài)網(wǎng)頁：Dreamweaver開發(fā)網(wǎng)頁（done）、HTML、JavaScript。 動態(tài)網(wǎng)頁：Java、JSP（Struts）。也會安排用C語言來寫動態(tài)網(wǎng)頁?。?！讓大家看到C語言的強(qiáng)大。但是用C語言寫動態(tài)網(wǎng)頁挺麻煩，只是過癮而已。 3、 1、什么是HTML？（How To Make L***）為什么要學(xué)習(xí)手寫HTML。 為以后做動態(tài)網(wǎng)站打下基礎(chǔ)。這部分一定要學(xué)好，雖然不難，但是學(xué)好了對以后理解XML這個東西也會有幫助。 2、不必看到“代碼”就感到害怕，HTML和C語言不一樣，它只是一系列標(biāo)記的組合。HTML并不是一門語言?？雌饋砜膳缕鋵?shí)很可愛。看起來很難，學(xué)起來很簡單，這樣最能快速忽悠人了。當(dāng)時我上學(xué)的時候只會用FrontPage做網(wǎng)頁，當(dāng)時聽說有人做一個網(wǎng)頁有問題，然后找計(jì)算機(jī)系的人幫忙看，人家根本不用FrontPage打開，直接用記事本看，當(dāng)時感覺人家就是傳說中的大俠，現(xiàn)在想起來都感覺好笑。 3、頁面上的交互則JavaScript用來寫代碼，JavaScript語法是C語言語系的，Java、C++、C#都屬于C語言語系的。再次用實(shí)例說明語言是次要的，不要害怕學(xué)新東西。 4、HTML的基本框架 首先看Dreamweaver生成空白頁面的結(jié)構(gòu)。 不管網(wǎng)頁的內(nèi)容多么豐富、版式多么復(fù)雜，網(wǎng)頁的基本結(jié)構(gòu)卻都是一樣的。 網(wǎng)頁的基本結(jié)構(gòu)： －－開始HTML文檔 －－開始文檔頭部 （主題部分，一般來說是不可見的）－－注釋 －－結(jié)束文檔頭部 －－開始文檔體 （正文部分，在瀏覽器中是可見的）－－注釋 －－結(jié)束文檔體 －－結(jié)束HTML文檔 相當(dāng)于C語言中的左括號、相當(dāng)于C語言中的右括號。 { { } { } } HTML是大小寫不敏感的。HTML語法是比較自由的，換行、縮進(jìn)什么的只是為了代碼看起來清晰，對效果不會產(chǎn)生影響。 Dreamweaver中整塊縮進(jìn)：選擇整塊代碼，然后Tab鍵，Shift+Tab則是取消縮進(jìn)。UltraEdit、VisualStudio、Eclipse、Word、NetBeans、VC、C-Free等編輯器都有類似的功能。 5、標(biāo)簽的概念： 前后匹配。標(biāo)簽文字與屬性，屬性的默認(rèn)值。 對于一個人來講，它的身高、體重就是他的屬性，對于一個按鈕來講，它的顯示的文字就是他的屬性；對于超鏈接來講，點(diǎn)擊超鏈接要代開的網(wǎng)站就是他的屬性。 （1）IMG標(biāo)簽。（IMG是英文Image的簡稱）
提示：不用每次修改網(wǎng)頁以后都點(diǎn)擊Dreamweaver中的預(yù)覽，只要刷新瀏覽器就可以。
jpg、jpeg、gif是最通用的格式。
png、bmp（太大了）：盡量不要用
（2）超鏈接A。（A是Anchor的簡稱，錨）
以超鏈接做實(shí)例講：標(biāo)簽、標(biāo)簽中包含的內(nèi)容、標(biāo)簽的屬性（Target、Title）。
標(biāo)簽、屬性、屬性的值、標(biāo)簽的內(nèi)容。
rupeng歡迎你
a就是標(biāo)簽，href就是屬性，“http://www.rupeng.com”就是屬性的值，“rupeng歡迎你”就是標(biāo)簽的內(nèi)容。
可以簡寫成。條件就是沒有標(biāo)簽內(nèi)容
（3）標(biāo)簽的嵌套
在HTML中標(biāo)簽中的內(nèi)容通常不僅可以是簡單的文字，還可以嵌套其他的標(biāo)簽，這也就是“標(biāo)簽嵌套”。舉例來說：超鏈接中的內(nèi)容是IMG，也就是給圖片加超鏈接。
6、快速學(xué)習(xí)HTML的技巧：某個功能不知道怎么寫的話用Dreamweaver的可視化功能做出來然后查看代碼；網(wǎng)上看到別人寫的頁面，多看人家的源代碼。
7、HTML的容錯性
8、嘗試修改Title屬性
9、href，嘗試加入一個超鏈接，體會手寫html與標(biāo)簽的文字與屬性的概念。
修改Dreamweaver中自動提示功能。編輯→快捷鍵，然后建議修改為Ctrl+J。
10、Marquee與Marquee動畫
一句話實(shí)現(xiàn)走馬燈效果
（1）direction屬性：有up、down、left、right幾個選項(xiàng)表示走馬燈的方向。
（2）behavior屬性：有alternate（來回晃動）、scroll（單向滾動）、slide（一錘子買賣）。
順便復(fù)習(xí)一下英文：
alternate的意思是是“兩個交替的,輪流的”。there will be a week of alternate rain and sunshine。下禮拜時雨時晴。
scroll：滾動。scrollbar：滾動條。
slide：滑落、滑動。滑落當(dāng)然是一次性滑到底，不可能滑來滑去的。
4、 10、Marquee與Marquee動畫（2）
（4）小天使飛來飛去：嵌套圖片
怎么快速得到一個文件的文件名？為了方便的復(fù)制文件名，并且顯得咱們是專業(yè)人員：打開資源管理器的顯示后綴名的功能。
（5）課上練習(xí)：能否讓小天使斜著飛？
物理的力量，由此證明物理、數(shù)學(xué)這些東西都是有用的。特別是以后如果有學(xué)游戲開發(fā)的，里邊的粒子、碰撞等很多問題都需要很高深的物理學(xué)知識。
再來思考一下這個的原理：
數(shù)學(xué)萬歲！
11、HTML中的顏色體系
修改網(wǎng)頁的背景顏色：
#006699這就是HTML中表示顏色的方式，每兩個是一組，三組分別就表示R、G、B的值，是16進(jìn)制表示。
任何顏色都是紅、綠、藍(lán)三色的組合顏色，三原色。物理里有講。R=Red、G=Green、B=Blue。
任何一個顏色都能分成無限多分，但是計(jì)算機(jī)中不能表示無限。把一個顏色分成256份就基本能騙過人眼了，就是專業(yè)的美術(shù)師也分別不出來。表示任何一個顏色你都可以說R值是多少，B值是多少，G是多少。純紅色：R=255，G=0，B=0；純黑色：R=255、G=255、255，純白色：R=0、G=0、B=0。
000000。FF=255，所以兩位16進(jìn)制的數(shù)正好能滿足256份顏色的要求。
要點(diǎn)F顏色有兩種表示方法：
1）預(yù)定義的色彩名稱：Black、Green等；
2）十六進(jìn)制的RGB值（即紅、綠、藍(lán)三色的組合顏色）,注意：在RGB值前要加#號
例如：
紅色背景
藍(lán)色文本
鏈接為藍(lán)色
RGB的方式使用Dreamweaver或者網(wǎng)頁顏色生成器，不用背。而且配色也不是一個專業(yè)開發(fā)人員考慮的，是美工的事情，所以對于顏色的取值不用太操心，知道有這么一回事就行了。
12、HTML中的特殊字符（轉(zhuǎn)義字符）
C語言里頭，“\”轉(zhuǎn)義符，printf("\n");printf("\\n")
空格：
小于號：<
對應(yīng)的英文：lessthan
大于號：>
對應(yīng)的英文：greaterthan
其他的可以借助著Dreamweaver自學(xué)。沒必要背，經(jīng)常用就熟了。
13、修改網(wǎng)頁的Title
aaa
DRY原則：Dont Repeat Yourself。不要有重復(fù)。 15、回車br和p的區(qū)別：p會多一行空白。如果分段的話用p，單純的換行用br。 b：粗體。bold。禿頭 i：斜體。italic。 u：下劃線。underline 同志嵌套 16、標(biāo)題
……
17、簡單的字體
18、font字體
紅色字體大小20
19、表格，比較復(fù)雜，理解了就不難
td：tabledata。data：數(shù)據(jù)。數(shù)據(jù)結(jié)構(gòu)：data struture
tr：tablerow
嵌套標(biāo)簽，很好很強(qiáng)大： 計(jì)算機(jī)
20、表單
表單要和后臺進(jìn)行處理
| td：tabledata。data：數(shù)據(jù)。數(shù)據(jù)結(jié)構(gòu)：data struture tr：tablerow 嵌套標(biāo)簽，很好很強(qiáng)大： | 計(jì)算機(jī) | 20、表單 表單要和后臺進(jìn)行處理