【正文】 2022/4/14 36 ? 制作網(wǎng)頁時要注意的問題 網(wǎng)頁的標(biāo)題要簡潔，明確。 2022/4/14 33 網(wǎng)頁制作的基本方法 ?制作網(wǎng)頁的基本步驟 確定網(wǎng)頁的內(nèi)容 設(shè)計網(wǎng)頁的組織結(jié)構(gòu) 資料的收集與整理 選擇網(wǎng)頁的設(shè)計方法 常用的網(wǎng)頁制作工具有 Frontpage、Dreamweaver等。大量的數(shù)據(jù)庫查詢、修改處理也需要服務(wù)器端程序的支持。 2022/4/14 32 Web服務(wù)器端程序 專業(yè)的網(wǎng)站都是建立在使用數(shù)據(jù)庫的基礎(chǔ)上的，要將這些數(shù)據(jù)庫變成可以通過瀏覽器顯示和操作的 Web頁面，就需要編寫服務(wù)器端的程序。 2022/4/14 31 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁指基本上全部使用HTML語言制作的網(wǎng)頁，頁面的內(nèi)容是固定不變的。 2022/4/14 30 XML語言 XML（ eXtensible Markup Language）被稱作是下一代的網(wǎng)頁標(biāo)記語言，也是采用各種標(biāo)記來形成網(wǎng)頁的源代碼。 BODY Background= Bgcolor=White Bgproperties=Fixed Leftmargin=30 Link=Blue Text=Black Topmargin=40 Vlink=Maroon Vlink為已經(jīng)點擊過的超級鏈接文字的顏色。 Alink為正被點擊的超級鏈接文字的顏色。 Text為不包含超級鏈接的文字顏色。 2022/4/14 27 【 例 】 給網(wǎng)頁設(shè)置 “ 勵志學(xué)社 ” 的文檔標(biāo)題，可在頭部輸入以下代碼： TITLE勵志學(xué)社 /TITLE 2022/4/14 28 （ 4）主體標(biāo)記 網(wǎng)頁的主體是 “ BODY…… /BODY”標(biāo)記對作用的范圍 BODY標(biāo)記用于定義 HTML文檔主體的開始，它能夠設(shè)置網(wǎng)頁的背景圖像、背景顏色、鏈接顏色和網(wǎng)頁邊距等屬性，其基本用法如下所示： BODY Background=URL Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color Bgcolor為背景顏色。 2022/4/14 25 HTML網(wǎng)頁 HTML網(wǎng)頁通常是由三部分內(nèi)容組成的：版本信息、網(wǎng)頁標(biāo)題（ HEAD）和文檔主體（ BODY）。目前逐漸興起的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有阿里巴巴（ ）、卓越網(wǎng)（ ）和當(dāng)當(dāng)網(wǎng)上書店（ ）等。如榕樹下網(wǎng)站（ ）即是一個專業(yè)文學(xué)網(wǎng)站。 2022/4/14 19 ?個人網(wǎng)站具有較強(qiáng)個性化，是以個人名義開發(fā)創(chuàng)建的網(wǎng)站，其內(nèi)容、樣式、風(fēng)格等都是非常有個性的。 2022/4/14 16 ?搜索引擎的使用 使用瀏覽器的“搜索”按鈕 使用專門的搜索引擎 (Google) (擺渡 ) (雅虎 ) (搜狐 ) 2022/4/14 17 ?認(rèn)識網(wǎng)站 ? ? ? ? 2022/4/14 18 這類網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域非常廣泛，包含文學(xué)、音樂、影視、體育、新聞和娛樂等方方面面的內(nèi)容，具有論壇、搜索和短信等功能。 2022/4/14 14 ?關(guān)閉圖片顯示 在網(wǎng)絡(luò)速度較慢時，不觀看網(wǎng)頁中的圖片和其它多媒體內(nèi)容可以得到更快的下載速度。 2022/4/14 11 ?主頁、臨時文件和歷史記錄 瀏覽器在打開時自動調(diào)入的網(wǎng)頁稱為“主頁”，主頁可以通過“工具” → “ Inter選項”打開Inter選項對話框，在“常規(guī)”選項卡的“主頁”欄設(shè)置 . 2022/4/14 12 ?收藏夾的使用 使用菜單“收藏” → “添加到收藏夾”打開添加到收藏夾對話框。 2022/4/14 8 ?IE6的界面 標(biāo)題欄 工具欄 菜單欄 地址欄 狀態(tài)欄 瀏覽窗口 2022/4/14 9 ? ?瀏覽網(wǎng)頁 ?“停止”按鈕 ?前進(jìn)和后退 ?刷新頁面 ?改變文字大小 ?選擇編碼 ?全屏幕顯示 ?查看源文件 2022/4/14 10 ?打開多個窗口 用菜單欄上的“文件” → “新建” → “窗口”，會打開一個新的瀏覽器窗口。 2022/4/14 7 ? 瀏覽器 ?概述 ?分類 ?Inter Explorer ?Netscape Navigator ?Mosaic等專業(yè)瀏覽器以及一些以上述瀏覽器為內(nèi)核的專用瀏覽器。 2022/4/14 6 （ 3） 8001///uugna/，從運行在端口號 8001的 。這里沒有指定路徑和文件名，所以訪問的結(jié)果是把一個缺省主頁送給瀏覽器。網(wǎng)頁設(shè)計與制作 2022/4/14 2 主要內(nèi)容： 第 1章：網(wǎng)頁制作基礎(chǔ) 第 2章： Dreamweaver MX 2022 第 3章：插入網(wǎng)頁基本元素 第 4章：頁面設(shè)計 第 5章：高級網(wǎng)頁制作 2022/4/14 3 第 1章 網(wǎng)頁制作基礎(chǔ) ? Web和瀏覽器 ? Web ? Web的特點和結(jié)構(gòu) ? Web 最 大 的 特 點 是 使 用 了 超 文 本（ Hypertext） ? WWW采用 C/S（ 客戶機(jī) /服務(wù)器 ） 工作模式 ? 在瀏覽器和服務(wù)器之間應(yīng)用 HTTP（ Hyper Text Transfer Protocol， 超文本傳輸協(xié)議 ）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 2022/4/14 4 ? URL ?Inter上所有的資源都有一個唯一的URL地址，一般將 URL地址稱為網(wǎng)址。 URL的完整格式如下： 協(xié)議 ://主機(jī)名（或 IP地址）：端口號 /路徑名 /文件名 2022/4/14 5 【 例 】 幾個 URL的例子 . （ 1） 協(xié)議和缺省端口號（ 80）訪問微軟公司服務(wù)器 。 （ 2） windows/，用 FTP協(xié)議訪問北京大學(xué) FTP服務(wù)器上路徑名為 pub/mswindows、文件名為 。 （ 4)address，訪問 服務(wù)器上 Addressing/URL目錄下的 網(wǎng)頁文件中錨點標(biāo)識為 address的地方。 其中使用最廣泛的是 Microsoft出品的Inter Explorer （簡稱 IE6）。 一般情況下，打開四、五個窗口可以充分利用系統(tǒng)資源，而且通過調(diào)整窗口的大小和位置還可以同時瀏覽。 2022/4/14 13 ? 使用菜單“收藏” → “整理收藏夾”打開收藏夾整理對話框，進(jìn)行收藏夾中網(wǎng)頁的移動、刪除、改名及創(chuàng)建新文件夾等操作。通過“工具” → “ Inter選項”打開 Inter選項對話框，在“高級”選項卡中可以對瀏覽器的工作方式進(jìn)行設(shè)置 2022/4/14 15 ?關(guān)閉自動完成功能 通過工具 → Inter選項，打開 Inter選項對話框，在“內(nèi)容”選項卡的“個人信息”部分單擊“自動完成”按鈕打開自動完成設(shè)置對話框 ?，F(xiàn)在國內(nèi)較著名的門戶網(wǎng)站有搜狐（ ）、網(wǎng)易（ ）等。 2022/4/14 20 ?這類網(wǎng)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個領(lǐng)域，內(nèi)容專業(yè)。 2022/4/14 21 ?職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等。 2022/4/14 22 ?認(rèn)識網(wǎng)頁 Flash動畫 導(dǎo)航欄 GIF動畫 文字 表單 圖片 超級鏈接 2022/4/14 23 ? 網(wǎng)頁中的元素 5. 表格 6. 超級鏈接 7. 視頻、音頻 8. POP窗口 9. 標(biāo)題欄和狀態(tài)欄文字 2022/4/14 24 網(wǎng)頁制作的相關(guān)知識 ? HTML語言概述 是一種超文本標(biāo)記語言，作為一種網(wǎng)頁編輯語言，易學(xué)易懂。 下面就是網(wǎng)頁結(jié)構(gòu)的總體框架： !HTML網(wǎng)頁版本信息說明 HTML HEAD !標(biāo)題標(biāo)記、屬性及其內(nèi)容 /HEAD BODY !主體標(biāo)記、屬性及其內(nèi)容 /BODY /HTML 2022/4/14 26 （ 1）版本信息 版本信息位于 HTML網(wǎng)頁文件的第一行 （ 2） HTML文件標(biāo)記 大部分網(wǎng)頁文件都是以 HTML標(biāo)記開始的，在文件的結(jié)尾處又以 /HTML結(jié)束 （ 3）頭部信息 HEAD標(biāo)記之間是 HTML文檔的頭部，用來標(biāo)明當(dāng)前文檔的有關(guān)信息 在 HEAD標(biāo)記之間，使用頻率最高的標(biāo)記就是TITLE，它用于定義顯示在瀏覽器標(biāo)題欄的文檔標(biāo)題。關(guān)于顏色的值后面會詳細(xì)介紹。 Link為超級鏈接文字的顏色。 2022/4/14 29 Leftmargin、 Topmargin用于設(shè)置網(wǎng)頁的左邊距和上邊框，它們是以像素為單位 【 例 1】 將網(wǎng)頁的上邊距和左邊距分別設(shè)置為 40和 30個像素的寬度，使用黑色文本、白色背景，未訪問的鏈接源采用藍(lán)色，已訪問的鏈接源標(biāo)記為暗紅色。 Background設(shè)置，如果設(shè)置了背景圖片，圖片會覆蓋已經(jīng)設(shè)置的顏色。 XML中包括可擴(kuò)展格式語言XSL(Extensible Style Language) 和可擴(kuò)展鏈接語言 XLL(Extensible Linking Language)。 動態(tài)網(wǎng)頁（ DynamicHTML，DHTML）利用 JavaScript， CSS (層疊樣式表 ) 及其它類似的語言如VBScript等與 HTML進(jìn)行有機(jī)的結(jié)合來使靜態(tài)的 HTML網(wǎng)頁變成動態(tài)。用戶向服務(wù)器傳送提交的表單（個人信息、選擇結(jié)果等）需要在服務(wù)器端進(jìn)行記錄、篩選等處理。 目前常用的服務(wù)器端編程技術(shù)主要有CGI、 ASP、 PHP、 JSP等，不同的技術(shù)需要不同的系統(tǒng)環(huán)境支持。服務(wù)器端的 ASP程序可以使用Visual Interdev、 UltraDEV等編輯。 在文本中要使用水平線，以分割不同部分。 網(wǎng)頁中插入的圖片要盡量的小。 網(wǎng)頁中引用的資料及商標(biāo)（或圖標(biāo)），不能侵犯版權(quán)。 在 Dreamweaver 里用豐富的層疊樣式表制作耐看，專業(yè)的網(wǎng)站。 Fireworks通過自動變形，用動的效果，圖片編輯工具和拖拽工具能傳送較精彩的 Fireworks 圖片。 如何設(shè)置 IE的主頁？如何用 IE收藏一個網(wǎng)頁？ 網(wǎng)頁中一般都使用了哪些技術(shù)？ Macromedia Studio MX2022有哪幾部分組成？ 第 2章 Dreamweaver MX 2022 ?本章要點 ?初識 Dreamweaver MX 2022 ?創(chuàng)建站點 ?Dreamweaver MX 2022基本操作 啟動與退出 Dreamweaver MX 2022 ?安裝好 Dreamweaver MX 2022后就可以使用它進(jìn)行網(wǎng)頁制作了。 啟動 Dreamweaver MX 2022 ?啟動 Dreamweaver MX 2022可選擇 “ 開始 /所有程序 /Macromedia/Macromedia Dreamweaver MX 2022”命令。 啟動 Dreamweaver MX 啟動 Dreamweaver MX 2022 ?首次啟動 Dreamweaver MX 2022時，將彈出 “ 工作區(qū)設(shè)置 ” 對話框。 啟動 Dreamweaver MX 2022 ?以上是首次啟動 Dreamweaver MX 2022所需進(jìn)行的操作，以后啟動會直接進(jìn)入工作 界面。 Dreamweaver MX 2022的工作界面 啟動 Dreamweaver MX 2022后即可進(jìn)入其工作界面。創(chuàng)建站點前首先應(yīng)規(guī)劃站點，再通過 Dreamweaver MX 2022的站點管理功能創(chuàng)建站點的框架，包括主頁、分支頁面和相應(yīng)的文件夾等。 ?Dreamweaver MX 20