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