1、 獨(dú)立規(guī)劃和設(shè)計(jì)一個(gè)小型網(wǎng)站的首頁(yè)首頁(yè)，主題自定 首頁(yè)必須做一個(gè)Div+Css布局的網(wǎng)頁(yè) 編寫報(bào)告 站點(diǎn)和報(bào)告打包，要求5M以下網(wǎng)站是指根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。流程如下： 確定主題 收集信息和素材 策劃?rùn)谀績(jī)?nèi)容 設(shè)計(jì)頁(yè)面方案 對(duì)素材設(shè)計(jì)加工(photoshop、flash等軟件處理) 制作網(wǎng)頁(yè)頁(yè)面（可使用dw創(chuàng)建本地站點(diǎn)） 調(diào)試本地站點(diǎn)（檢查頁(yè)面效果、鏈接跳轉(zhuǎn)等） 服務(wù)器：提供資源和服務(wù)的計(jì)算機(jī) 客戶機(jī)：供用戶使用資源和享受服務(wù)的計(jì)算機(jī) 瀏覽器：用于瀏覽網(wǎng)頁(yè)的軟件工具。一般情況下，瀏覽者在訪問網(wǎng)頁(yè)時(shí)，使用的是客戶機(jī)。瀏覽器向存放網(wǎng)頁(yè)的WWW服務(wù)

2、器（經(jīng)常是在很遠(yuǎn)的地方）發(fā)出一個(gè)請(qǐng)求；收到請(qǐng)求后，WWW服務(wù)器將響應(yīng)信號(hào)和網(wǎng)頁(yè)發(fā)送給客戶機(jī)。URL和超鏈接和超鏈接Internet是全球最大的信息庫(kù)，每個(gè)服務(wù)器上都有成千上萬的各種資源，那么如何來標(biāo)識(shí)這些資源呢？用于解決這一問題的是統(tǒng)一資源定位器（uniform resource locator簡(jiǎn)稱URL）。URL是全球WWW網(wǎng)服務(wù)器資源的標(biāo)準(zhǔn)尋址定位編碼，它被用來確定資源的相應(yīng)位置。URL采用統(tǒng)一的格式： 協(xié)議名:/服務(wù)器的IP地址或域名/路徑/文件名 Web標(biāo)準(zhǔn)概述：網(wǎng)頁(yè)主要由3個(gè)部分組成：結(jié)構(gòu)、表現(xiàn)與行為 結(jié)構(gòu)：決定網(wǎng)頁(yè)是什么部分組成（html） 表現(xiàn)：決定網(wǎng)頁(yè)是什么樣子（css） 行為

3、：決定網(wǎng)頁(yè)做什么（Javascript） Css: 禪意花園http:/ 創(chuàng)建第一個(gè)網(wǎng)頁(yè)：頭部：放置當(dāng)前文件的信息頭部：放置當(dāng)前文件的信息主體：放置網(wǎng)頁(yè)要顯示的內(nèi)容主體：放置網(wǎng)頁(yè)要顯示的內(nèi)容 我制作的網(wǎng)頁(yè) 這是我制作的第一個(gè)網(wǎng)頁(yè) 什么是HTML Html是一種描述性的標(biāo)記語(yǔ)言，利用一個(gè)個(gè)標(biāo)記定義網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的顯示方式 HTML語(yǔ)言并不會(huì)在瀏覽器中顯示出來，但是卻告訴瀏覽器如何顯示文檔的內(nèi)容，如文本、圖像及其其他媒體。 網(wǎng)頁(yè)元素網(wǎng)頁(yè)元素：顯示在網(wǎng)頁(yè)中的文字，表格，圖形和動(dòng)畫，聲音和視頻等 瀏覽器就是對(duì)html進(jìn)行解釋的結(jié)果進(jìn)行顯示 Html標(biāo)記基本的語(yǔ)法： 雙標(biāo)記：內(nèi)容，例p() 單標(biāo)記：，

4、例br() 網(wǎng)頁(yè)就是用html寫成的文件，有兩種方式產(chǎn)生：可用任何的文本編輯軟件手工編輯；或借助制作工具（例如Dreamweaver）編寫 制作網(wǎng)頁(yè)應(yīng)該在掌握一定程度html的基礎(chǔ)上去使用工具作為設(shè)計(jì)的輔助手段 網(wǎng)頁(yè)主要由頭部(head)和主體(body)組成 標(biāo)記：只是一個(gè)形式上的標(biāo)記 標(biāo)記：放置當(dāng)前文件的信息 標(biāo)記：設(shè)定網(wǎng)頁(yè)標(biāo)題 標(biāo)記：放置網(wǎng)頁(yè)要顯示的內(nèi)容 查看源文件：“查看”菜單“源文件”命令 屏蔽注釋內(nèi)容在網(wǎng)頁(yè)中的顯示： 文本排版 段落標(biāo)記與段內(nèi)換行標(biāo)記：, 設(shè)置標(biāo)題標(biāo)記： 水平線標(biāo)記： 滾動(dòng)字幕標(biāo)記： 網(wǎng)頁(yè)背景音樂標(biāo)記： 設(shè)置文字列表 建立無序列表：項(xiàng)目列表標(biāo)記,列表項(xiàng)標(biāo)記 建立有序

5、列表：有序列表標(biāo)記,列表項(xiàng)標(biāo)記 使用圖像： 從word中復(fù)制一段文字到代碼窗，并用瀏覽器預(yù)覽，可看到瀏覽器會(huì)忽略掉原文中所有的空格和換行。 要使得文字在瀏覽器中分段或換行，需要用 和標(biāo)記：互聯(lián)網(wǎng)發(fā)展的起源1969年，為了保障發(fā)展的新紀(jì)元。 20世紀(jì)70年代末到TCP/IP協(xié)議的誕生。 在HTML中，設(shè)定共6個(gè)標(biāo)題標(biāo)記，用于把文本顯示為不同級(jí)別的標(biāo)題 標(biāo)題標(biāo)記 以下為標(biāo)題樣式： H1標(biāo)題大小 H2標(biāo)題大小 H3標(biāo)題大小H4標(biāo)題大小 H5標(biāo)題大小 H6標(biāo)題大小 在當(dāng)前位置顯示水平線互聯(lián)網(wǎng)發(fā)展的起源1969年，為了保障發(fā)展的新紀(jì)元。 20世紀(jì)70年代末到TCP/IP協(xié)議的誕生。 標(biāo)記:用于設(shè)置當(dāng)前內(nèi)

6、容的滾動(dòng)顯示互聯(lián)網(wǎng)發(fā)展的起源1969年，為了保障發(fā)展的新紀(jì)元。 20世紀(jì)70年代末到TCP/IP協(xié)議的誕生。 無序列表相當(dāng)于項(xiàng)目符號(hào)，用標(biāo)記表示，其中每一個(gè)列表項(xiàng)使用標(biāo)記 無序列表無序列表 這是一個(gè)無序列表：這是一個(gè)無序列表： 繪制切片并導(dǎo)出繪制切片并導(dǎo)出 編輯首頁(yè)編輯首頁(yè) 插入圖像內(nèi)容插入圖像內(nèi)容 有序列表使用標(biāo)記,其中每一個(gè)列表項(xiàng)使用標(biāo)記,每個(gè)項(xiàng)目用數(shù)字表示 有序列表有序列表 這是一個(gè)有序列表：這是一個(gè)有序列表： 第第1項(xiàng)項(xiàng) 第第2項(xiàng)項(xiàng) 第第3項(xiàng)項(xiàng) 通過HTML標(biāo)記可對(duì)文字進(jìn)行顯示，還可通過HTML標(biāo)記的屬性進(jìn)一步控制顯示的內(nèi)容標(biāo)記屬性的基本語(yǔ)法： align屬性是用于控制元素的對(duì)齊方式，

7、很多標(biāo)記都含有該屬性，比如： 、標(biāo)記的align屬性設(shè)置了文字的水平對(duì)齊方式 標(biāo)記的align屬性是設(shè)置圖片與文字的對(duì)齊關(guān)系，以實(shí)現(xiàn)圖文混排的效果。 align屬性值一般有三個(gè)值：center、left、right 如：互聯(lián)網(wǎng)發(fā)展的歷史互聯(lián)網(wǎng)發(fā)展的歷史很多標(biāo)記也帶有bgcolor屬性，不同的標(biāo)記設(shè)置不同元素的背景顏色，如：1.Body標(biāo)記的bgcolor屬性是設(shè)置網(wǎng)頁(yè)背景：2.Table標(biāo)記的bgcolor屬性是設(shè)置表格的背景：3.Marguee標(biāo)記的bgcolor屬性是設(shè)置滾動(dòng)文字的背景：滾動(dòng)文字思考：p標(biāo)記和h1h6標(biāo)記是否可以設(shè)置背景顏色？ 方向direction ：left, righ

8、t,up,down 方式behavior ：scroll(一圈一圈繞著走), slide(只走一次), alternate(來回走) 循環(huán) loop ：若未指定則循環(huán)不止 速度 scrollamount ：例啦啦啦，我走得好快喲！ 延時(shí) scrolldelay ：例啦啦啦，我走一步，停一停！ 在網(wǎng)頁(yè)中使用圖像標(biāo)記： 網(wǎng)頁(yè)中的圖片格式： Gif：只支持256色圖像，支持透明色，文件很小，是網(wǎng)頁(yè)圖像的首選。 Jpg：支持1670萬種顏色， 在網(wǎng)頁(yè)中插入圖片：注： Img 標(biāo)記用于在網(wǎng)頁(yè)中插入圖片 Src 屬性用于指定圖片所在的路徑和名稱，此例中圖片和網(wǎng)頁(yè)文件是處于同一個(gè)文件夾下，所以省略了路徑。

9、那么，當(dāng)圖片與網(wǎng)頁(yè)不在同一個(gè)文件夾下，又怎么表示文件的路徑呢？ 文件路徑的表達(dá)：分為兩種情況 如果圖片文件就在本網(wǎng)站內(nèi)部，那么要以顯示該圖像的網(wǎng)頁(yè)文件為起點(diǎn)，通過層級(jí)關(guān)系描述圖像位置，我們稱這為相對(duì)路徑。 如果圖像不在本網(wǎng)站內(nèi)部，那么通常以http:/開頭的URL作為文件的路徑。 下面舉例說明相對(duì)路徑的使用： 假設(shè)網(wǎng)站中有一個(gè)網(wǎng)頁(yè)名為1.html，還有一個(gè)圖像文件名為1.jpg，現(xiàn)在你要在網(wǎng)頁(yè)中插入該圖像，根據(jù)圖像所在位置不同，其路徑也有不同的表示方法： 圖像與網(wǎng)頁(yè)在同一個(gè)文件夾： 圖像在網(wǎng)頁(yè)的下一級(jí)文件夾： 圖像在網(wǎng)頁(yè)的上一級(jí)文件夾: 圖像在網(wǎng)頁(yè)的同一級(jí)文件夾:用width和height屬性

10、設(shè)置圖片的大小 用alt屬性為圖像設(shè)置替換文本 過時(shí)的HTML標(biāo)記和屬性 文字水平居中標(biāo)記： 文字段落的縮進(jìn)標(biāo)記： 設(shè)置文字的大小和顏色 控制段落的水平位置: align屬性 設(shè)置背景顏色: bgcolor屬性 標(biāo)記：在瀏覽器窗口的正中間開始顯示文字互聯(lián)網(wǎng)發(fā)展的起源1969年，為了保障發(fā)展的新紀(jì)元。 20世紀(jì)70年代末到TCP/IP協(xié)議的誕生。 對(duì)段落進(jìn)行縮進(jìn)顯示互聯(lián)網(wǎng)發(fā)展的起源 1969年，為了保障發(fā)展的新紀(jì)元。 20世紀(jì)70年代末到TCP/IP協(xié)議的誕生。 Font標(biāo)記設(shè)置文字的樣式，包括字體、顏色、大小等屬性。 html標(biāo)記是由兩類構(gòu)成：1）定義網(wǎng)頁(yè)“結(jié)構(gòu)”的標(biāo)記: 例如p, h1等2）定義網(wǎng)頁(yè)“表現(xiàn)”的標(biāo)記:例如font, b, I等 保留定義網(wǎng)頁(yè)“結(jié)構(gòu)”的標(biāo)記放棄定義網(wǎng)頁(yè)“表現(xiàn)”的標(biāo)記 CSS定義網(wǎng)頁(yè)“表現(xiàn)” 實(shí)現(xiàn)網(wǎng)頁(yè)“結(jié)構(gòu)”和“表現(xiàn)”的分離 學(xué)習(xí)dw實(shí)現(xiàn)： 熟練利用代碼視圖來輸入并修改html和CSS代碼。 利用dw的站點(diǎn)功能和文件面板，來管理網(wǎng)站的文件，比如文件的復(fù)制、移動(dòng)、重命名等，都需要更新關(guān)聯(lián)的超鏈接以及文件的路徑，這些dw都能替我們很好的完成，同時(shí)謹(jǐn)記網(wǎng)站中所有文件以及文件夾名不能用中文名或全角字符。 利用dw的spry插件制作流行的網(wǎng)頁(yè)元素，比如選項(xiàng)卡、折疊式面板等。 利用dw插入表格文檔工具欄文檔工具欄利用切換按鈕可在【代碼】、【