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