網(wǎng)頁(yè)制作的基本方法_第1頁(yè)
網(wǎng)頁(yè)制作的基本方法_第2頁(yè)
網(wǎng)頁(yè)制作的基本方法_第3頁(yè)
網(wǎng)頁(yè)制作的基本方法_第4頁(yè)
網(wǎng)頁(yè)制作的基本方法_第5頁(yè)
已閱讀5頁(yè),還剩255頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、dreamweaver網(wǎng)頁(yè)制作網(wǎng)頁(yè)制作 主講:樊郁徽主講:樊郁徽 電子郵件:電子郵件: 網(wǎng)站,站點(diǎn),網(wǎng)頁(yè)網(wǎng)站,站點(diǎn),網(wǎng)頁(yè) 網(wǎng)站:在internet 網(wǎng)上有自已獨(dú)立的 internet地址和ip地址的計(jì)算機(jī)系統(tǒng),或者我 們叫主機(jī)。(比如:網(wǎng)易,sohu等) 站點(diǎn):分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。本地站點(diǎn)是 在自已的計(jì)算機(jī)上建立的用于存儲(chǔ)本地信息資 源的一種形式。而遠(yuǎn)程站點(diǎn)是在主機(jī)上分配一 定的存儲(chǔ)空間,用于存儲(chǔ)本地站點(diǎn)的所有的信 息。 網(wǎng)頁(yè)卻是它們(網(wǎng)站,站點(diǎn)的組成部分) 網(wǎng)頁(yè),網(wǎng)站,站點(diǎn)網(wǎng)頁(yè),網(wǎng)站,站點(diǎn) 網(wǎng)頁(yè)基本概念: 網(wǎng)頁(yè)是網(wǎng)頁(yè)是一種在網(wǎng)絡(luò)上傳送的特殊 文件。它的擴(kuò)展名一般為htm或html。 網(wǎng)頁(yè)

2、是由文字、圖像、動(dòng)畫(huà)、表格、聲 音等多種媒體組成的。 網(wǎng)頁(yè)必須使用瀏覽器軟件來(lái)打開(kāi)。 網(wǎng)頁(yè),網(wǎng)站,站點(diǎn)網(wǎng)頁(yè),網(wǎng)站,站點(diǎn) 網(wǎng)頁(yè)的類(lèi)型 靜態(tài)網(wǎng)頁(yè) 在網(wǎng)站設(shè)計(jì)中,純粹html格式的網(wǎng)頁(yè)通常被稱(chēng)為“靜態(tài) 網(wǎng)頁(yè)”,早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁(yè)制作的。靜態(tài)網(wǎng)頁(yè) 以.htm、.html、.shtml、.xml等為后綴的。在html格式的 網(wǎng)頁(yè)上,也可以出現(xiàn)各種動(dòng)態(tài)的效果,如.gif格式的動(dòng)畫(huà)、 flash、滾動(dòng)字母等,這些“動(dòng)態(tài)效果”只是視覺(jué)上的。 動(dòng)態(tài)網(wǎng)頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)是指使用網(wǎng)頁(yè)腳本語(yǔ)言,比如php、asp、 、jsp等編寫(xiě),通過(guò)腳本將網(wǎng)站內(nèi)容動(dòng)態(tài)存儲(chǔ)到數(shù)據(jù) 庫(kù),用戶(hù)訪(fǎng)問(wèn)網(wǎng)站是通過(guò)讀取數(shù)據(jù)庫(kù)來(lái)動(dòng)態(tài)生成網(wǎng)頁(yè)的

3、方法。 網(wǎng)站上主要是一些框架基礎(chǔ),網(wǎng)頁(yè)的內(nèi)容大都存儲(chǔ)在數(shù)據(jù)庫(kù) 中。 網(wǎng)頁(yè),網(wǎng)站,站點(diǎn)網(wǎng)頁(yè),網(wǎng)站,站點(diǎn) 區(qū)別 程序是否在服務(wù)器端運(yùn)行,是重要標(biāo)志。在 服務(wù)器端運(yùn)行的程序、網(wǎng)頁(yè)、組件,屬于動(dòng) 態(tài)網(wǎng)頁(yè),它們會(huì)隨不同客戶(hù)、不同時(shí)間,返 回不同的網(wǎng)頁(yè),例如asp、php、jsp、 asp.net、cgi等。運(yùn)行于客戶(hù)端的程序、網(wǎng) 頁(yè)、插件、組件,屬于靜態(tài)網(wǎng)頁(yè),例如html 頁(yè)、flash、javascript、vbscript等等, 它們是永遠(yuǎn)不變的。 網(wǎng)頁(yè),網(wǎng)站,站點(diǎn)網(wǎng)頁(yè),網(wǎng)站,站點(diǎn) 網(wǎng)站的基本概念 網(wǎng)站是由若干個(gè)網(wǎng)頁(yè)組成的。網(wǎng)頁(yè) 有序地鏈接在一起就構(gòu)成網(wǎng)站。 在internet 網(wǎng)上有自已獨(dú)立的 i

4、nternet地址和ip地址的計(jì)算機(jī)系統(tǒng), 或者我們叫主機(jī)。(比如:網(wǎng)易, sohu等) 網(wǎng)頁(yè),網(wǎng)站,站點(diǎn)網(wǎng)頁(yè),網(wǎng)站,站點(diǎn) 站點(diǎn)的基本概念 分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。 本地站點(diǎn)是在自已的計(jì)算機(jī)上建立 的用于存儲(chǔ)本地信息資源的一種形 式。 遠(yuǎn)程站點(diǎn)是在主機(jī)上分配一定的存 儲(chǔ)空間,用于存儲(chǔ)本地站點(diǎn)的所有 的信息。 其他一些概念 文件的概念 網(wǎng)頁(yè)文件:是以網(wǎng)頁(yè)編程語(yǔ)言編寫(xiě)的文件, 根據(jù)編寫(xiě)語(yǔ)言的不同分為動(dòng)態(tài)和靜態(tài)兩種 網(wǎng)頁(yè)上顯示的圖片、動(dòng)畫(huà)、視音頻、flash 等信息,并不存在與網(wǎng)頁(yè)文件中,而是通過(guò) 在網(wǎng)頁(yè)文件中調(diào)用相關(guān)文件的形式實(shí)現(xiàn)的 編輯網(wǎng)頁(yè)文件的工具可以是網(wǎng)頁(yè)制作軟件, 可以是編程軟件,也可以是

5、記事本軟件 其他一些概念 路徑概念 絕對(duì)路徑:就是從根目錄開(kāi)始一直到該目錄的 全程的路徑,舉個(gè)例子: “c:apachehtdocscgi-bintest.htm就是 文件test.htm的絕對(duì)路徑 相對(duì)路徑:就是相對(duì)于當(dāng)前目錄的路徑,舉個(gè) 例子:例如當(dāng)前目錄目錄是 “c:apachehtdocs” ,那么 c:apachehtdocscgi-bintest.htm文件相對(duì) 與當(dāng)前目錄的路徑就是cgi-bintest.htm 其他一些概念 首頁(yè) 首頁(yè)是最重要的網(wǎng)頁(yè),就像書(shū)中的目錄頁(yè)一 樣,通過(guò)首頁(yè)的引導(dǎo),我們可以訪(fǎng)問(wèn)其它的 網(wǎng)頁(yè)。首頁(yè)是進(jìn)入網(wǎng)站時(shí)默認(rèn)打開(kāi)的首頁(yè)面。 首頁(yè)的文件名一般是index

6、(index的中文含 義是索引)或default(默認(rèn)的意思),擴(kuò) 展名有htm、html、asp、aspx、php、jsp等 網(wǎng)站制作的步驟網(wǎng)站制作的步驟 網(wǎng)站制作的一般步驟: 第一步網(wǎng)站規(guī)劃 網(wǎng)站內(nèi)容、結(jié)構(gòu)(三層)、特色、色調(diào)、功能、風(fēng)格等信息 第二步資料準(zhǔn)備 收集所需信息:包括,文字、圖像(動(dòng)畫(huà))、腳本、數(shù)據(jù)庫(kù)等 第三步 web服務(wù)器準(zhǔn)備(可選) 選擇合適的web服務(wù)器如:iis(internet information server)、apache等 第四步 網(wǎng)頁(yè)外觀設(shè)計(jì) 使用圖像處理軟件(photoshop、fireworks等)繪制網(wǎng)頁(yè)圖像 并對(duì)圖像制作切片,導(dǎo)出成頁(yè)面文件 第五步

7、 創(chuàng)建網(wǎng)站,制作網(wǎng)頁(yè),調(diào)試完成 針對(duì)各類(lèi)網(wǎng)頁(yè)的特點(diǎn),使用不同的編輯器。如,frontpage 、 dreamweaver 等,完成靜態(tài)和動(dòng)態(tài)程序的編寫(xiě) 網(wǎng)頁(yè)制作常用方法 1、準(zhǔn)備網(wǎng)頁(yè)制作素材 2、規(guī)劃網(wǎng)頁(yè)布局 3、使用圖像處理軟件(如fireworks、 photoshop等)繪制網(wǎng)頁(yè)完整圖像 4、對(duì)繪制的網(wǎng)頁(yè)圖片制作切片,并導(dǎo)出成 網(wǎng)頁(yè)文件 5、在網(wǎng)頁(yè)制作軟件中對(duì)導(dǎo)出的網(wǎng)頁(yè)文件進(jìn) 行修改完善。 使用fireworks繪制網(wǎng)頁(yè)圖像 使用fireworks繪制網(wǎng)頁(yè)圖像 2、在新建文檔中完整繪制出要制作的網(wǎng) 頁(yè)圖片 對(duì)繪制好的網(wǎng)頁(yè)圖片制作切片 選擇“切片”工 具 顯示切片視圖 對(duì)繪制好的網(wǎng)頁(yè)圖片制

8、作切片 切片在網(wǎng)頁(yè)制作中的作用 1、減少網(wǎng)頁(yè)背景的體積,加快網(wǎng)頁(yè)顯示 速度 2、制作動(dòng)態(tài)效果 3、優(yōu)化圖像 4、創(chuàng)建鏈接 將制作好切片的圖片導(dǎo)出 在dreamweaver中完成網(wǎng)頁(yè)制作 在dreamweaver中打開(kāi)導(dǎo)出的網(wǎng)頁(yè)文件,修 改完善! dreamweaver概述 dreamweaver是macromedia公司(現(xiàn)被adobe公司收 購(gòu))的一個(gè)用于可視化設(shè)計(jì)與管理網(wǎng)頁(yè)和網(wǎng)站的專(zhuān) 業(yè)級(jí)html編輯器。是目前世界上網(wǎng)頁(yè)設(shè)計(jì)制作領(lǐng)域 使用率最高的專(zhuān)業(yè)軟件,換句話(huà)說(shuō)dreamweaver得到 了世界上網(wǎng)頁(yè)設(shè)計(jì)制作領(lǐng)域?qū)<业膹V泛認(rèn)可。 dreamweaver對(duì)于dhtml(動(dòng)態(tài)網(wǎng)頁(yè))的支持特別

9、好, 可以輕而易舉地做出很多眩目的互動(dòng)頁(yè)面特效。插 件式的程序設(shè)計(jì)使得其功能可以無(wú)限的擴(kuò)展。 dreamweaver與flash、fireworks 并稱(chēng)為 macromedia的網(wǎng)頁(yè)制作三劍客,由于是同一公司的 產(chǎn)品,因而在功能上有著一個(gè)非常緊密的結(jié)合。 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 菜單欄 文件 編輯 查看 插入 修改 文本 命令 站點(diǎn) 窗口 幫助 插入面板 由8個(gè)子面板構(gòu)成,是dreamweaverdreamweaver中非常重要的面板 之一 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 工具欄 文檔

10、工具欄和標(biāo)準(zhǔn)工具欄 文檔工具欄 標(biāo)準(zhǔn)工具欄 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 面板組 包括設(shè)計(jì)、代碼、應(yīng)用程序、 文件、答案等面板,非常重 要的功能都需要通過(guò)面板來(lái) 完成,是dreamweaver的重要 特點(diǎn) dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 屬性面板 用于修改網(wǎng)頁(yè)元素的屬性,當(dāng)在文檔窗 口中選擇某種對(duì)象時(shí),屬性面板里顯示 該對(duì)象的屬性 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 文檔窗口與視圖 顯示當(dāng)前正在編輯的網(wǎng)頁(yè)文檔 有設(shè)計(jì)視圖、代碼視圖、拆分視圖和動(dòng)態(tài)視

11、圖 設(shè)計(jì)視圖 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 代碼視圖 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 拆分視圖 dreamweaverdreamweaver 8.0 8.0的窗口結(jié)構(gòu)的窗口結(jié)構(gòu) 動(dòng)態(tài)視圖 創(chuàng)建站點(diǎn) 步驟:在硬盤(pán)新建一個(gè)文件夾用字母命 名在dreamweaver中選擇“站點(diǎn)”菜 單新建站點(diǎn) 接下來(lái) 需要給 站點(diǎn)起 一個(gè)名 字,可 以起任 意一個(gè) 名字。 點(diǎn)“選擇” 按鈕,因 為沒(méi)有使 用遠(yuǎn)程服 務(wù)器,就 選擇 “無(wú)”。 在網(wǎng)頁(yè)中插入對(duì)象 文本的編輯 在網(wǎng)頁(yè)中插入文本 輸入普通文本 直接輸入或者拷

12、貝粘貼已有文本 換行使用“shiftenter”;分段直接回車(chē);輸入空格必 須在中文輸入法全角狀態(tài)下輸入,或者按 control+shift+空格鍵 插入特殊字符 在“插入面板”欄中,選擇“文本”類(lèi)別并選擇所需的 字符 在網(wǎng)頁(yè)中插入對(duì)象 文本的編輯 文字標(biāo)題格式、字體、字號(hào)的設(shè)置文字對(duì)齊 與縮進(jìn)設(shè)置 文字風(fēng)格與顏色的設(shè)置 選中所需操作的文字,在屬性面板中進(jìn)行修改 在網(wǎng)頁(yè)中插入對(duì)象 文本的編輯 文字的查找與替換 點(diǎn)擊“編輯”下拉菜單,選擇“查找和替換”選 項(xiàng) 在網(wǎng)頁(yè)中插入對(duì)象 圖像的處理 插入圖像及設(shè)置圖像屬性 在“插入面板”“常用”標(biāo)簽 按鈕 插入菜單圖像選擇圖像源文件 注意 在插入圖像文件之

13、前,頁(yè)面文件要現(xiàn)存 盤(pán),并保存在本地站點(diǎn)文件夾中,這樣 一旦插入的圖像文件不在本地站點(diǎn)文件 中時(shí),系統(tǒng)會(huì)提示將該文件復(fù)制到站點(diǎn) 根文件夾中。 在網(wǎng)頁(yè)中插入對(duì)象 設(shè)置圖像屬性 單擊選中圖像文件,在屬性面板中調(diào)整 在網(wǎng)頁(yè)中插入對(duì)象 插入鼠標(biāo)經(jīng)過(guò)圖像 選擇菜單“插入圖像對(duì)象鼠標(biāo)經(jīng)過(guò)圖像” 在網(wǎng)頁(yè)中插入表格 表格是網(wǎng)頁(yè)的一個(gè)非常重要的元素,由 于html本身并沒(méi)有提供更多的排版手段, 因此往往要借助表格實(shí)現(xiàn)網(wǎng)頁(yè)的精確排 版。 在網(wǎng)頁(yè)中插入表格 表格的創(chuàng)建 插入表格 選擇菜單“插入表格”命令 設(shè)置表格的行數(shù)、列數(shù) 設(shè)置表格的寬度 設(shè)置表格邊框線(xiàn)的寬度 設(shè)置單元格邊距和間距 在網(wǎng)頁(yè)中插入表格 設(shè)置表格屬性

14、 表格屬性面板 單元格屬性面板 在網(wǎng)頁(yè)中插入表格 表格的基本操作 選擇單元格(拖動(dòng)鼠標(biāo)) 剪切、復(fù)制和粘貼單元格(選擇單元格編 輯菜單對(duì)應(yīng)操作) 添加行和列(修改表格插入行(列) 刪除行和列(同上) 拆分和合并單元格(選擇需要的單元格修 改表格拆分單元格(合并單元格) 網(wǎng)頁(yè)制作實(shí)例(1) 網(wǎng)頁(yè)制作實(shí)例(1) 步驟: 1、創(chuàng)建站點(diǎn) 2、新建頁(yè)面文件 3、修改文件標(biāo)題 4、插入表格 5、拆分與合并單元格 6、插入圖片與文字 7、保存退出 在網(wǎng)頁(yè)中使用超級(jí)鏈接 超級(jí)鏈接:指向文檔,圖象,多媒體文 件或可下載軟件的超文本鏈接稱(chēng)作超級(jí) 鏈接 超級(jí)鏈接的作用:可以把一個(gè)網(wǎng)站的網(wǎng) 頁(yè)連接起來(lái),點(diǎn)擊鏈接時(shí)從一

15、個(gè)網(wǎng)頁(yè)跳 轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè),或者跳轉(zhuǎn)到頁(yè)面指定 的位置。 各種鏈接的功能和實(shí)現(xiàn)方法 1 導(dǎo)航鏈接:實(shí)現(xiàn)站點(diǎn)內(nèi)文檔的鏈接 2 鏈接到文檔中的指定位置,使用錨; 3 空鏈接:是一個(gè)無(wú)指向的鏈接。使用空鏈接可 以為頁(yè)面上的對(duì)象或文本附加行為。 4 創(chuàng)建電子郵件鏈接 6 鏈接到站點(diǎn)中的文檔或者其它站點(diǎn),可以使用 跳轉(zhuǎn)菜單,跳轉(zhuǎn)菜單是文檔中的一種來(lái)訪(fǎng)者可以 看見(jiàn)的彈出式菜單,其中列出了鏈接的文檔或文 件。 6 給鏈接增加提示,給鏈接增加快捷鍵。 創(chuàng)建導(dǎo)航鏈接創(chuàng)建導(dǎo)航鏈接 選中圖像,也 可以是文字, 點(diǎn)擊屬性面板 中的“瀏覽文件” 圖標(biāo) 創(chuàng)建導(dǎo)航鏈接創(chuàng)建導(dǎo)航鏈接 選中一個(gè)文件。會(huì)出現(xiàn)一個(gè)文件相對(duì)于“文檔”,

16、 “站點(diǎn)根目錄的選擇”。文檔相對(duì)路徑是最適合用于 本地鏈接的路徑類(lèi)型,適合絕大多數(shù)web站點(diǎn) 創(chuàng)建導(dǎo)航鏈接創(chuàng)建導(dǎo)航鏈接 絕對(duì)路徑:完整的url,稱(chēng)作絕對(duì)路徑 例如在鏈接域輸入http:/ 選擇被鏈接文檔要打開(kāi)的位置 若要使被鏈接文檔不出現(xiàn)在當(dāng)前窗口或框架中,從 屬性面板的“目標(biāo)”彈出式菜單選取一個(gè)選項(xiàng): _blank 在新的未命名的瀏覽器窗口中加載鏈接文檔 _parent 在父框架頁(yè)或包含該鏈接的框架窗口中加 載鏈接文檔。如果包含鏈接的框架不是嵌套的,則 鏈接文檔將加載到整個(gè)瀏覽器窗口中 _self 將鏈接文檔加載到與鏈接相同的框架或窗口中, 該目標(biāo)是默認(rèn)值,所以通常您不需要指定它。 _top

17、 將在整個(gè)瀏覽器窗口中加載鏈接文件,同時(shí)移 除所有框架 一個(gè)網(wǎng)站中,第一級(jí)鏈接或者導(dǎo)航鏈接選擇_self, 第二級(jí)鏈接和友情鏈接選擇_blank。 選擇被鏈接文檔要打開(kāi)的位置 使用錨 錨鏈接讓訪(fǎng)問(wèn)者輕松地瀏覽很長(zhǎng)的網(wǎng)頁(yè) 的各個(gè)部分 簡(jiǎn)明步驟:選中文本在目標(biāo)文檔中插 入錨標(biāo)記命名拖動(dòng)“指向文件”圖 標(biāo)到文本 使用錨 鏈接到文檔中的指定位置:在需要插入 錨的地方,點(diǎn)一下光標(biāo),然后單擊常用 面板上的命名錨記工具 鍵入錨記名稱(chēng),一個(gè)站點(diǎn)中的錨記名稱(chēng) 只可以是唯一的,否則會(huì)出現(xiàn)錯(cuò)誤 使用錨 在文檔中選取要?jiǎng)?chuàng)建鏈接的文本,打開(kāi)您需要 鏈接的命名錨記所在文檔,不一定要是當(dāng)前文 檔,可以是站點(diǎn)中的其它文檔,點(diǎn)

18、擊屬性面板 中的“指向文件”圖標(biāo),并將它拖動(dòng)到您需要 鏈接的錨記處。 使用空鏈接使用空鏈接 使用空鏈接可以為頁(yè)面上的對(duì)象或文本附加行為 創(chuàng)建步驟: 1. 在文檔窗口中,選中要設(shè)置鏈接的文本、圖像或 其他對(duì)象。 2. 在屬性面板的鏈接框中,只輸入一個(gè)“#”號(hào)。 3. 如果單擊這種地址為一個(gè)“#”的鏈接,無(wú)論當(dāng)前你 處于文檔的什么地方,都會(huì)自動(dòng)跳轉(zhuǎn)到文檔的開(kāi)頭位 置。很多人非常討厭這種情況,因此出現(xiàn)很多插件。 可以用“#”來(lái)代替“#”,單擊這樣的鏈接的時(shí)候, 會(huì)保持當(dāng)前頁(yè)面的瀏覽位置。 4. 還可以在屬性面板的鏈接框中輸入javascript:;創(chuàng)建 空鏈接。 創(chuàng)建電子郵件鏈接 方法一:選取需要?jiǎng)?chuàng)

19、建鏈接的文本或者 圖像,點(diǎn)擊常用面板中的“電子郵件鏈 接”工具,輸入郵件地址。 1、選中文字 2、點(diǎn)擊電子郵件鏈接 3、輸入電子郵件地址 創(chuàng)建電子郵件鏈接 方法二:選取需要?jiǎng)?chuàng)建鏈接的文本或者 圖像,在屬性面板中的鏈接欄輸入mailto: 郵件地址。 1、選中文字 2、輸入mailto:電子郵件地址 創(chuàng)建跳轉(zhuǎn)菜單 首先將插入點(diǎn)放在要插入鏈接的位置。 點(diǎn)擊表單面板中的跳轉(zhuǎn)工具 創(chuàng)建跳轉(zhuǎn)菜單 在插入跳轉(zhuǎn)菜單對(duì)話(huà)框中,點(diǎn)添加項(xiàng)添 加新鏈接 創(chuàng)建跳轉(zhuǎn)菜單 創(chuàng)建跳轉(zhuǎn)菜單 給鏈接增加提示 首先將插入點(diǎn)放在要插入鏈接的位置,點(diǎn)擊 常用面板上的超級(jí)鏈接工具。 設(shè)置鏈接參數(shù) 提示 快捷鍵 alt字母 給鏈接增加提

20、示 顯示效果 上機(jī)內(nèi)容(實(shí)驗(yàn)1) 1、使用站點(diǎn)管理器建立一個(gè)本地站點(diǎn) 2、分別使用表格和框架的方式進(jìn)行頁(yè)面布局, 構(gòu)建一個(gè)個(gè)人主頁(yè),首頁(yè)面命名為index.htm 3、在頁(yè)面中通過(guò)插入文字、圖片、表格等頁(yè) 面元素豐富頁(yè)面信息 4、給文字或圖片創(chuàng)建超級(jí)鏈接 5、完成其他相關(guān)頁(yè)面的制作 要求:完成實(shí)驗(yàn)報(bào)告,包括具體操作步驟,頁(yè) 面布局圖形等內(nèi)容 層的使用與創(chuàng)建層 層是一種html網(wǎng)頁(yè)元素,是網(wǎng)頁(yè)中用來(lái) 放置文本、圖像、動(dòng)畫(huà)、表單、插件等 網(wǎng)頁(yè)元素的載體。 層可以放置在頁(yè)面的任意位置,改變層 在頁(yè)面中的位置,便可以改變層中網(wǎng)頁(yè) 元素的位置。 “層”的特點(diǎn)是使用方便,可以輕松的 使用“層”來(lái)布局網(wǎng)頁(yè)。

21、 創(chuàng)建層 1、在插入 布局對(duì)象選“層”,或點(diǎn)“插 入面板”布局對(duì)象選“層” 2、在頁(yè)面中繪制一個(gè)層 3、通過(guò)周?chē)暮谏{(diào)整柄拖動(dòng)控制層的大小 4、拖動(dòng)層左上角的選擇柄可以移動(dòng)層的位置 5、單擊層標(biāo)記可以選中一個(gè)層 6、在層中可以插入其他任何元素包括圖片文 字鏈接表格等 創(chuàng)建層 層的屬性 層有隱藏和顯示的屬性 層數(shù)決定了重疊時(shí)哪個(gè)層 在上面哪個(gè)層在下面 層面板上面還有一個(gè)參數(shù) 就是防止層重疊。一旦選 中,頁(yè)面中層就無(wú)法重疊 層還有一種父子關(guān)系也就 是隸屬關(guān)系 ,方法:在 層面板中按ctrl鍵將子層 拖拽到父層 層和表格之間轉(zhuǎn)換 由于層在網(wǎng)頁(yè)布局上非常方便,所以, 一些人可能不喜歡使用表格或“布局

22、” 模式來(lái)創(chuàng)建自己的頁(yè)面,而是喜歡通過(guò) 層來(lái)進(jìn)行設(shè)計(jì)。 層的缺點(diǎn):不支持所有的瀏覽器,且層 只能相對(duì)與頁(yè)面的左上角對(duì)齊 當(dāng)瀏覽器窗口大小或屏幕分辨率發(fā)生變化后, 絕對(duì)定位的層不能保持原有的位置 層和表格之間轉(zhuǎn)換 在轉(zhuǎn)換為表格之前,請(qǐng)確保層沒(méi)有重疊 選擇“修改”“轉(zhuǎn)換”“層到表格”。即可顯 示“轉(zhuǎn)換層為表格”對(duì)話(huà)框 層和表格之間轉(zhuǎn)換 若要將表轉(zhuǎn)換為層,請(qǐng)選擇“修改”“轉(zhuǎn) 換”“表格到層”。即可顯示“轉(zhuǎn)換表格 為層。對(duì)話(huà)框 網(wǎng)頁(yè)布局 網(wǎng)頁(yè)布局的工作模式:標(biāo)準(zhǔn)視圖(默認(rèn))和布 局視圖 布局視圖在網(wǎng)頁(yè)布局時(shí)更加直觀、方便 在布局視圖中,可以在頁(yè)上繪制布局單元格和 布局表格。繪制完成后,dreamwea

23、ver 會(huì)自 動(dòng)創(chuàng)建一個(gè)布局表格以容納該單元格。布局單 元格不能存在于布局表格之外。 布局視圖 點(diǎn)“布局” 切換到布局視圖 布局視圖 單擊插入欄“布局”分類(lèi)中的“繪制布局單元格” 按鈕 布局視圖 將鼠標(biāo)指針?lè)胖迷陧?yè)上要開(kāi)始繪制單元格的位 置上,然后拖動(dòng)指針以創(chuàng)建布局單元格。若要 創(chuàng)建多個(gè)單元格而不用每次都單擊“繪制布局 單元格”按鈕,請(qǐng)按住 ctrl 鍵并拖動(dòng)指針來(lái)創(chuàng) 建每個(gè)布局單元格。 布局視圖 布局視圖 繪制一個(gè)布局表格: 單擊插入欄“布局” 分類(lèi)中的“繪制布局表格”按鈕, 將鼠標(biāo) 指針?lè)胖迷陧?yè)上,然后拖動(dòng)指針以創(chuàng)建 布局表格。若要繪制多個(gè)布局表格而不 必重復(fù)單擊“繪制布局表格”按鈕,請(qǐng)

24、在單擊“繪制布局表格”按鈕時(shí)按住 ctrl 鍵。 布局視圖 布局視圖 繪制嵌套布局表格:將一個(gè)布局表格繪 制在另一個(gè)布局表格中,創(chuàng)建嵌套表格。 單擊插入欄“布局”分類(lèi)中的“繪制布 局表格”按鈕。鼠標(biāo)指針變?yōu)榧犹?hào) (+), 指向現(xiàn)有布局表格中的空白(灰色)區(qū) 域,然后拖動(dòng)指針以創(chuàng)建嵌套布局表格。 布局視圖 布局視圖 轉(zhuǎn)換到標(biāo)準(zhǔn)視圖下的表格就是 布局視圖 移動(dòng)布局單元格和表格及調(diào)整它們的大小 調(diào)整布局單元格的大小: 選擇一個(gè)單元格,按住 ctrl 鍵的同時(shí)單擊該單元格中的任何位置,該單元格周 圍出現(xiàn)選擇控制點(diǎn)。拖動(dòng)選擇控制點(diǎn)來(lái)調(diào)整單元格 的大小。 布局視圖 移動(dòng)布局單元格:按住 ctrl 鍵的同時(shí)

25、單擊該單元格中的 任何位置, 將該單元格拖到其布局表格中的另一個(gè)位置。 按箭頭鍵移動(dòng)該單元格,每次移動(dòng) 1 個(gè)像素。在按住 shift 鍵的同時(shí)按箭頭鍵移動(dòng)該單元格,每次 10 個(gè)像素。 布局視圖 調(diào)整布局表格的大小: 通過(guò)單擊表格頂部的標(biāo)簽選擇一 個(gè)表格。該表格周?chē)霈F(xiàn)選擇控制點(diǎn)。拖動(dòng)選擇控制點(diǎn) 來(lái)調(diào)整表格的大小。 布局視圖 移動(dòng)布局表格:通過(guò)單擊表格頂部的標(biāo)簽選擇一個(gè)表 格。該表格周?chē)霈F(xiàn)選擇控制點(diǎn)。 將表格拖到頁(yè)上的 另一個(gè)位置。(只有當(dāng)布局表格嵌套在另一個(gè)布局表 格中時(shí),才可以移動(dòng)該布局表格)。 表單與樣式表 表單 關(guān)于表單 表單(form)技術(shù)可以實(shí)現(xiàn)瀏覽者同internet 服務(wù)器

26、之間信息的交互傳遞,它是網(wǎng)絡(luò)信息收 集的一種重要方式。通過(guò)表單可以從網(wǎng)絡(luò)的用 戶(hù)端收集信息,然后將收集來(lái)的信息經(jīng)過(guò)服務(wù) 器處理后再反饋給用戶(hù)。例如收集用戶(hù)資料、 獲取用戶(hù)訂單,在internet上統(tǒng)也同樣存在大 量的表單,讓用戶(hù)輸入文字進(jìn)行選擇。 表單 通常表單的工作過(guò)程 (1)訪(fǎng)問(wèn)者在瀏覽有表單的頁(yè)面時(shí),可填 寫(xiě)必要的信息,然后單擊“提交”按鈕。 (2)這些信息通過(guò)internet傳送到服務(wù)器上。 (3)服務(wù)器上專(zhuān)門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行 處理,如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息,并要求 糾正錯(cuò)誤。 (4)當(dāng)數(shù)據(jù)完整無(wú)誤后,服務(wù)器反饋一個(gè) 輸入完成信息。 表單 一個(gè)完整的表單包含兩個(gè)部分 (1)一個(gè)是在

27、網(wǎng)頁(yè)中進(jìn)行描述的表單對(duì)象。 (2)二是應(yīng)用程序,它可以是服務(wù)器端的, 也可以是客戶(hù)端的,用于對(duì)客戶(hù)信息進(jìn)行分 析處理。 表單 認(rèn)識(shí)表單對(duì)象 在 dreamweaver 中,表單輸入類(lèi)型稱(chēng)為表單對(duì)象。 可以通過(guò)選擇“插入”“表單對(duì)象”來(lái)插入表單對(duì)象, 或者通過(guò)從下圖顯示的“插入”欄的“表單”面板訪(fǎng) 問(wèn)表單對(duì)象來(lái)插入表單對(duì)象 表單 1、表單 “表單”在文檔中插入表單。任何其他表單對(duì)象,如文 本域、按鈕等,都必須插入表單之中,這樣所有瀏覽器 才能正確處理這些數(shù)據(jù)。 2、文本域 “文本域”在表單中插入文本域。文本域可接受任何類(lèi) 型的字母數(shù)字項(xiàng)。輸入的文本可以顯示為單行、多行或 者顯示為項(xiàng)目符號(hào)或星號(hào)(

28、用于保護(hù)密碼)。 3、復(fù)選框 “復(fù)選框”在表單中插入復(fù)選框。復(fù)選框允許在一組選 項(xiàng)中選擇多項(xiàng),用戶(hù)可以選擇任意多個(gè)適用的選項(xiàng)。 表單 4、單選按鈕 “單選按鈕”在表單中插入單選按鈕。單選按鈕代表 互相排斥的選擇。選擇一組中的某個(gè)按鈕,就會(huì)取消 選擇該組中的所有其他按鈕。例如,用戶(hù)可以選擇 “是”或“否”。 5、單選按鈕組 “單選按鈕組”插入共享同一名稱(chēng)的單選按鈕的集合。 6、列表/菜單 “列表/菜單”使您可以在列表中創(chuàng)建用戶(hù)選項(xiàng)。 “列表”選項(xiàng)在滾動(dòng)列表中顯示選項(xiàng)值,并允許用戶(hù) 在列表中選擇多個(gè)選項(xiàng)?!安藛巍边x項(xiàng)在彈出式菜單 中顯示選項(xiàng)值,而且只允許用戶(hù)選擇一個(gè)選項(xiàng)。 表單 7、跳轉(zhuǎn)菜單 “跳

29、轉(zhuǎn)菜單”插入可導(dǎo)航的列表或彈出式菜單。跳轉(zhuǎn) 菜單允許您插入一種菜單,在這種菜單中的每個(gè)選項(xiàng) 都鏈接到文檔或文件。請(qǐng)參見(jiàn)創(chuàng)建跳轉(zhuǎn)菜單。 8、圖像域 “圖像域”使您可以在表單中插入圖像。可以使用 圖像域替換“提交”按鈕,以生成圖形化按鈕。 9、文件域 “文件域”在文檔中插入空白文本域和“瀏覽”按鈕。 文件域使用戶(hù)可以瀏覽到其硬盤(pán)上的文件,并將這些 文件作為表單數(shù)據(jù)上傳。 10、按鈕 “按鈕”在表單中插入文本按鈕。按鈕在單擊時(shí)執(zhí) 行任務(wù),如提交或重置表單??梢詾榘粹o添加自定義 名稱(chēng)或標(biāo)簽,或者使用預(yù)定義的“提交”或“重置” 標(biāo)簽之一。 11、標(biāo)簽 “標(biāo)簽”在文檔中給表單加上標(biāo)簽,以 形式開(kāi)頭和結(jié)尾。

30、 12、字段集 “字段集”在文本中設(shè)置文本標(biāo)簽。 認(rèn)識(shí)了表單,那么創(chuàng)建和使用表單時(shí)就可以根據(jù) 需要進(jìn)行選擇。表單時(shí)動(dòng)態(tài)網(wǎng)頁(yè)的靈魂。 表單 創(chuàng)建表單 在dreamweaver中可以創(chuàng)建各種各樣的表單, 表單中可以包含各種對(duì)象,例如文本域、按 鈕、列表等 表單 插入表單 在網(wǎng)頁(yè)中添加表單對(duì)象,首先必須創(chuàng)建表單。表 單在瀏覽網(wǎng)頁(yè)中屬于不可見(jiàn)元素。在 dreamweaver中插入一個(gè)表單。當(dāng)頁(yè)面處于“設(shè) 計(jì)”視圖中時(shí),用紅色的虛輪廓線(xiàn)指示表單。如 果沒(méi)有看到此輪廓線(xiàn),請(qǐng)檢查是否選中了“查 看”“可視化助理”“不可見(jiàn)元素”。 表單 將插入點(diǎn)放在希望表單出現(xiàn)的位置。選 擇“插入”“表單”,或選擇“插入”

31、欄上的“表單”類(lèi)別,然后單擊“表單” 圖標(biāo) 用鼠標(biāo)選中表單,在屬性面板上可以設(shè) 置表單的各項(xiàng)屬性 表單 動(dòng)作:在“動(dòng)作”文本框中指定處理該表單的動(dòng)態(tài)頁(yè) 或腳本的路徑。 方法:在“方法”下拉列表中,選擇將表單數(shù)據(jù)傳輸 到服務(wù)器的方法 post 在 http 請(qǐng)求中嵌入表單數(shù)據(jù)。get 將值追加到請(qǐng)求 該頁(yè)的 url 中。默認(rèn) 使用瀏覽器的默認(rèn)設(shè)置將表單數(shù)據(jù)發(fā) 送到服務(wù)器。通常,默認(rèn)方法為 get 方法。不要使用 get 方法發(fā)送長(zhǎng)表單。url 的長(zhǎng)度限制在 8,192 個(gè)字符以?xún)?nèi)。如 果發(fā)送的數(shù)據(jù)量太大,數(shù)據(jù)將被截?cái)啵瑥亩鴮?dǎo)致意外的或失 敗的處理結(jié)果。而且,在發(fā)送機(jī)密用戶(hù)名和密碼、信用卡號(hào) 或其

32、他機(jī)密信息時(shí),不要使用 get 方法。用 get 方法傳遞 信息不安全 表單 目標(biāo) 在“目標(biāo)”彈出式菜單指定一個(gè)窗口,在該窗口 中顯示調(diào)用程序所返回的數(shù)據(jù)。如果命名的窗口 尚未打開(kāi),則打開(kāi)一個(gè)具有該名稱(chēng)的新窗口。目 標(biāo)值有: _blank,在未命名的新窗口中打開(kāi)目標(biāo) 文檔。 _parent,在顯示當(dāng)前文檔的窗口的父窗口 中打開(kāi)目標(biāo)文檔。 _self,在提交表單所使用的窗 口中打開(kāi)目標(biāo)文檔。 _top,在當(dāng)前窗口的窗體內(nèi) 打開(kāi)目標(biāo)文檔。此值可用于確保目標(biāo)文檔占用整 個(gè)窗口,即使原始文檔顯示在框架中 表單 表單的應(yīng)用 表單 創(chuàng)建圖形化“提交”按鈕 插入表單對(duì)象圖像域或者單擊“表單” 面板中的“圖像

33、域”按鈕 選擇圖像源選定用作按鈕的圖像確定 選中圖片在屬性面板中將“圖像區(qū)域” 文本框修改為“提交”或者“重置 ”, “提交”通知表單將表單數(shù)據(jù)提交給處理應(yīng) 用程序或腳本,“重置”將所有表單域重置 為其原始值 樣式表 css是cascading style sheets的簡(jiǎn)稱(chēng),中文 譯作層疊樣式表單 層疊樣式表 (css) 是一系列格式規(guī)則,它們 控制網(wǎng)頁(yè)內(nèi)容的外觀。使用 css 可以非常靈 活并更好地控制具體的頁(yè)面外觀,從精確的 布局定位到特定的字體和樣式。 可以方便地為網(wǎng)頁(yè)中的各個(gè)元素設(shè)置背景顏 色和圖片并進(jìn)行精確的定位控制;可以為網(wǎng) 頁(yè)中的元素設(shè)置各種濾鏡 樣式表 在dw mx 2004

34、的css樣式里包含了w3c規(guī) 范定義的所有css1的屬性,把這些屬性分為: 類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定 位、擴(kuò)展等八個(gè)部分 dw mx 2004 實(shí)現(xiàn)css屬性設(shè)置功能是完全 可視化的,無(wú)需編寫(xiě)代碼 樣式表 創(chuàng)建新的創(chuàng)建新的 css 規(guī)則規(guī)則 在css 樣式面板中,單擊面板右下角的新 建 css 規(guī)則。 樣式表 在“新建 css 規(guī)則”對(duì)話(huà)框中,從“選擇器 類(lèi)型”選項(xiàng)中選擇“類(lèi)”。該選項(xiàng)應(yīng)該是默 認(rèn)選中的,在“名稱(chēng)”文本框中輸入名稱(chēng) 樣式表 出現(xiàn)css 規(guī)則定義對(duì)話(huà)框 樣式表 字體:選擇字體,如果沒(méi)有需要的字體,可以編輯字 體列表 大小:設(shè)置字體大小,好看的中文字大小有12象素 (

35、px)和9點(diǎn)數(shù)(pt)兩種 行高:行高是一行文字與另一行文字之間的距離,為 了方便閱讀,行高設(shè)置大點(diǎn)吧??梢栽O(shè)置在15像素到 25像素之間。實(shí)例中使用20像素 修飾:對(duì)于普通文本,選擇無(wú)。對(duì)于鏈接,可以選擇 下劃線(xiàn),上劃線(xiàn)加下劃線(xiàn),無(wú)等幾種 顏色:黑色最適合閱讀,其次就是灰色,白色。鏈接 默認(rèn)的藍(lán)色,如果整個(gè)頁(yè)面都是鏈接,使用藍(lán)色根本 起不到分辨的作用。建議頁(yè)面不要使用默認(rèn)的藍(lán)色 樣式表 修改樣式表 在css樣式面板中,單擊“編輯樣式”單選按鈕, 再點(diǎn)擊右下角的“編輯樣式表”按鈕 樣式表 應(yīng)用css樣式 在網(wǎng)頁(yè)中選中需要套用的css樣式的對(duì)象 單擊“css樣式”面板中需要套用的css樣式,即

36、可將該樣式設(shè)置的格式套用的選定的對(duì)象上 樣式表 對(duì)超鏈接風(fēng)格進(jìn)行設(shè)置 在“新建樣式”對(duì)話(huà)框中選擇 “使用css選擇 器”,可以看到標(biāo)簽里出現(xiàn)四個(gè)選擇項(xiàng) 樣式表 a:active表示鼠標(biāo)點(diǎn)擊鏈接時(shí)鏈接風(fēng)格; a:hover表示鼠標(biāo)指向鏈接但未點(diǎn)擊時(shí)的鏈接 風(fēng)格; a: link表示超鏈接的文本在鏈接未被訪(fǎng)問(wèn)時(shí) 的風(fēng)格; a:visited表示鏈接被訪(fǎng)問(wèn)過(guò)后的風(fēng)格。 樣式表 css濾鏡 樣式表 1.alpha:設(shè)置透明度。 語(yǔ)法:alpha(opacity=?, finishopacity=?, style=?, startx=?, starty=?, finishx=?, finishy=?)

37、“alpha”指一個(gè)元素的透明度。 opacity代表透明度程度。默認(rèn)的范圍從0到100。0代表完全透 明,100代表完全不透明。 finishopacity是一個(gè)可選的參數(shù)。如果想要設(shè)置漸變的透明效 果,就可以使用它來(lái)指定結(jié)束時(shí)的透明度。范圍也是從0到100. style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀,1 代表線(xiàn)形,2代表放射狀,3代表長(zhǎng)方形。 startx和starty代表漸變透明效果的開(kāi)始x和y坐標(biāo),單位為數(shù)值。 finishx和finishy代表漸變透明效果的結(jié)束x和y坐標(biāo),單位為數(shù) 值。 2. blendtrans:轉(zhuǎn)換 語(yǔ)法:blendtrans(duration

38、=?) duration轉(zhuǎn)換時(shí)間,單位是秒。 樣式表 3. blur:模糊 語(yǔ)法:blur(add=?, direction=?, strength=?) add參數(shù)是一個(gè)布爾判斷“true(默認(rèn))”或者“false”。它指 定圖片是否被改變成模糊效果。后面輸入true或者false。 direction參數(shù)用來(lái)設(shè)置模糊的方向。其中0度代表垂直向上,然 后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度。角度方向 的對(duì)應(yīng)關(guān)系如下: 0:向上 45:右上 90:右 135:右下 180:下 225:左下 270:左 315:左上 strength參值只能使用整數(shù)來(lái)指定。它代表有多少像素的寬度 將受

39、到模糊影響。默認(rèn)值是5像素。對(duì)于網(wǎng)頁(yè)上的字體,如果設(shè) 置它的模糊“add”為1,那么這些字體的效果會(huì)非常好看。 樣式表 4. chroma 語(yǔ)法:chroma(color=?) 使用chroma屬性可以設(shè)置一個(gè)對(duì)象中的顏色為透明色。 這個(gè)屬性只有一個(gè)參數(shù)color,顏色的表示方法,為rrggbb。 5dropshadow 語(yǔ)法:dropshadow(color=?, offx=?, offy=?, positive=?) dropshadow就是添加對(duì)象的陰影效果。它的效果就像使原來(lái) 的對(duì)象離開(kāi)頁(yè)面,然后在頁(yè)面上顯示出該對(duì)象的投影。其實(shí)它 的工作方法就是建立一個(gè)偏移量,加上較深的顏色。 col

40、or代表投射陰影的顏色。單位是rrggbb。 offx和offy就分別是x方向和y方向陰影的偏移量。必須用整數(shù)。 positive參數(shù)是一個(gè)布爾值,如果值為“true(非0),那么就 為任何的非透明像素建立可見(jiàn)的投影。如果值為“false(0)”, 那么就為透明的像素部分建立可見(jiàn)的投影。 如果有一個(gè)透明的對(duì)象可是仍然想要使用普通的投影效果,那 么把positive參數(shù)設(shè)置為0。此時(shí)透明對(duì)象會(huì)在整個(gè)透明區(qū)域以 外的地方出現(xiàn)投影效果,而不是在透明區(qū)域內(nèi)。 樣式表 6. fliph 語(yǔ)法:fliph fliph是一個(gè)水平翻轉(zhuǎn)對(duì)象的濾鏡屬性。 7. flipv 語(yǔ)法:flipv flipv為對(duì)象制作一

41、個(gè)垂直的鏡像,因而使對(duì)象在垂直方向上實(shí) 現(xiàn)翻轉(zhuǎn)。 8glow 語(yǔ)法:glow(color=?, strength=?) 當(dāng)對(duì)一個(gè)對(duì)象使用glow后,這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類(lèi)似發(fā)光 的效果。 color是指發(fā)光的顏色。單位rrggbb。 strength則是強(qiáng)度的表現(xiàn),可以從1到255之間的任何整數(shù)值來(lái)指 定這個(gè)力度值。 9. gray 語(yǔ)法:gray gray把一張圖轉(zhuǎn)變?yōu)榛叶葓D。 樣式表 10. invert 語(yǔ)法:invert invert屬性把對(duì)象的可視化屬性全部翻轉(zhuǎn),其中包括色 彩、飽和度和亮度值。這就是平時(shí)所稱(chēng)的“底片”或者 “負(fù)片”效果。 11light 語(yǔ)法:light ligh

42、t屬性模擬光源的投射效果 12. mask 語(yǔ)法:mask(color=?) mask屬性可以為對(duì)象建立一個(gè)覆蓋于表面的膜。color 的值可以使用rrggbb的形式。 樣式表 13. revealtrans 語(yǔ)法:revealtrans(duration=?, transition=?) revealtrans能產(chǎn)生24種效果。 transition:是切換方式,它有24種方式 矩形從大至小 0 隨機(jī)溶解 12 矩形從小至大 1 從上下向中間展開(kāi) 13 圓形從大至小 2 從中間向上下展開(kāi) 14 圓形從小至大 3 從兩邊向中間展開(kāi) 15 向上推開(kāi) 4 從中間向兩邊展開(kāi) 16 向下推開(kāi) 5 從右

43、上向左下展開(kāi) 17 向右推開(kāi) 6 從右下向左上展開(kāi) 18 向左推開(kāi) 7 從左上向右下展開(kāi) 19 垂直形百葉窗 8 從左下向右上展開(kāi) 20 水平形百葉窗 9 隨機(jī)水平細(xì)紋 21 水平棋盤(pán) 10 隨機(jī)垂直細(xì)紋 22 垂直棋盤(pán) 11 隨機(jī)選取一種特效 23 transition是切換時(shí)間,以秒為單位。 樣式表 14. shadow 語(yǔ)法:shadow(color=?, direction=?) shadow屬性在指定的方向建立物體的投影。 color是投影的顏色,direction是投影的方向,單位為角度數(shù)值。0代表垂直向 上,90代表向右。在blur濾鏡部分有講解。 15. wave 語(yǔ)法:wav

44、e(add=?, freq=?, lightstrength=?, phase=?, strength=?) wave屬性把對(duì)象按照垂直的波形樣式打亂。 add表示是否要把對(duì)象按照波形打亂。這個(gè)默認(rèn)值是“true(非0)”,也就 是打亂對(duì)象。也可以修改它的值為“false(0)”。 freq是波紋的頻率,也就是指定在這個(gè)對(duì)象上面一共需要產(chǎn)生多少個(gè)完整的 波紋。 lightstrength參數(shù)可以對(duì)波紋增強(qiáng)光影的效果。它的參數(shù)值范圍是從0到100 的整數(shù)值。 phase參數(shù)用來(lái)設(shè)置正弦波開(kāi)始的偏移量。這個(gè)偏移量的通用值為0,它的值 從0到100之間。 strength代表波的振幅大小。值為數(shù)值。

45、 16. xray 語(yǔ)法:xray xray可以讓對(duì)象反映出它的輪廓并把這些輪廓增亮。 動(dòng)態(tài)網(wǎng)頁(yè)制作 web服務(wù)器 web服務(wù)器介紹 web服務(wù)器也稱(chēng)為www(world wide web)服務(wù)器,主 要功能是提供網(wǎng)上信息瀏覽服務(wù) iis(internet information server)作為當(dāng)今流行的web服務(wù) 器之一,提供了強(qiáng)大的internet和intranet服務(wù)功能 web服務(wù)器的功能 (1)信息的發(fā)布 信息發(fā)布是最基本的應(yīng)用,行政機(jī)關(guān)、企事業(yè)單位甚至個(gè) 人,都可以借助web服務(wù)發(fā)布各種各樣的信息,例如時(shí)事新 聞、法律法規(guī)、科普知識(shí)、技術(shù)文檔、產(chǎn)品圖文等。這些能 使用戶(hù)及時(shí)地了

46、解到各種各樣的信息。 (2)充當(dāng)其他網(wǎng)絡(luò)服務(wù)的平臺(tái) 在信息發(fā)布的基礎(chǔ)上可以延伸出電子商務(wù)、資料查詢(xún)、網(wǎng) 絡(luò)圖書(shū)館,bbs、網(wǎng)絡(luò)學(xué)校、辦公自動(dòng)化、web電子郵件, 甚至視頻點(diǎn)播(vod)等,只是這些應(yīng)用的交互性更強(qiáng),并 且必須受到網(wǎng)絡(luò)數(shù)據(jù)庫(kù)的支持而已。 iis 5.0建web服務(wù)器 安裝iis 步驟1:?jiǎn)螕簟伴_(kāi)始”,指向“設(shè)置”,單擊“控 制面板”,然后啟動(dòng)“添加/刪除程序”應(yīng)用程序。 iis 5.0建web服務(wù)器 安裝iis 步驟2:選擇配置windows,單擊組件按鈕,在 【windows組件向?qū)А繉?duì)話(huà)框中,選擇【internet信 息服務(wù)】組件,單擊【詳細(xì)信息】進(jìn)行進(jìn)一步設(shè)置, 例如ftp

47、服務(wù)、smtp服務(wù)、www服務(wù)通??梢赃x 裝。單擊【下一步】,從windows2000安裝光盤(pán)中 拷貝所需文件 iis 5.0建web服務(wù)器 安裝iis iis 5.0建web服務(wù)器 iis的配置 步驟1:開(kāi)始管理工具internet 信息服務(wù)(iis) 管理器“,打開(kāi)iis管理器 iis 5.0建web服務(wù)器 iis的配置 步驟2:在“本地計(jì)算機(jī)網(wǎng)站默認(rèn)網(wǎng)站”上右鍵 單擊,在快捷菜單里選“屬性”(或者直接在操作菜 單下選“屬性” ) iis 5.0建web服務(wù)器 iis的配置 網(wǎng)站配置: 設(shè)置服務(wù)器ip地址 如果不設(shè)置地址的 話(huà),默認(rèn)為 localhost iis 5.0建web服務(wù)器 ii

48、s的配置 主目錄配置:切 換到“主目錄” 標(biāo)簽,重新選擇 網(wǎng)站根目錄 (默 認(rèn)是系統(tǒng) 盤(pán):inetpubwww root ) iis 5.0建web服務(wù)器 iis的配置 默認(rèn)文檔配置:再切換到文檔標(biāo)簽,通過(guò)添加、 刪除、上移、下移,把站點(diǎn)的默認(rèn)文檔設(shè)置如 圖所示 iis 5.0建web服務(wù)器 iis的配置 虛擬目錄設(shè)置 選擇“internet 服務(wù)管理器”,展開(kāi)后在“默認(rèn) web 站點(diǎn)”(或默認(rèn)網(wǎng)站)點(diǎn)鼠標(biāo)右鍵,選擇“新 建虛擬目錄” ,如下圖 iis 5.0建web服務(wù)器 iis 5.0建web服務(wù)器 虛擬目錄設(shè)置 輸入別名(用字母命名),指定該別名對(duì)應(yīng)的網(wǎng)頁(yè)所 在的目錄 配置完成后可以在瀏

49、覽器的地址欄輸入: /別名 http:/localhost/別名 http:/主機(jī)ip/別名 的方式來(lái)訪(fǎng)問(wèn)建立的網(wǎng)站 iis 5.0建web服務(wù)器 重新設(shè)置dw的站點(diǎn) 原來(lái)建立的站點(diǎn)是針對(duì)靜態(tài) 網(wǎng)頁(yè)制作的,如果要制作動(dòng) 態(tài)網(wǎng)頁(yè)的話(huà),必須要修改原 有的設(shè)置 打開(kāi)dw選擇“站點(diǎn)”菜 單選擇“管理站點(diǎn)”打 開(kāi)“管理站點(diǎn)對(duì)話(huà)框” 選擇需要更改的站點(diǎn)名稱(chēng) 點(diǎn)擊編輯按鈕 iis 5.0建web服務(wù)器 重新設(shè)置dw 的站點(diǎn) 1.“分類(lèi)”選項(xiàng)中 選擇“測(cè)試服務(wù) 器” 2.“服務(wù)器模型”選 項(xiàng)選擇“asp vbscript” 3.“訪(fǎng)問(wèn)”選項(xiàng)中 選擇“本地/網(wǎng)絡(luò)” 4.“url前綴

50、”選項(xiàng)中輸 入“http:/localhost/別 名/” 5.點(diǎn)擊“確 定”完成設(shè) 置 數(shù)據(jù)庫(kù)準(zhǔn)備 1,首先確認(rèn)站點(diǎn)根目錄下有專(zhuān)門(mén)的數(shù)據(jù)庫(kù)存 放目錄 ,比如d:tc下面的database文件夾(數(shù) 據(jù)庫(kù)文件最好單獨(dú)存放在一個(gè)文件夾中) 2,打開(kāi)microsoft access,選擇“文 件”“新建.”數(shù)據(jù)庫(kù),在彈出的對(duì)話(huà)框中選 擇存放路徑并命名 數(shù)據(jù)庫(kù)準(zhǔn)備 數(shù)據(jù)庫(kù)準(zhǔn)備 3,在新建的數(shù)據(jù)庫(kù)中“使用設(shè)計(jì)器創(chuàng)建 表”,彈出的“表1”中設(shè)計(jì)你的相關(guān)字段, 注意各自的“數(shù)據(jù)類(lèi)型”,還有一點(diǎn)很重 要:字段id,類(lèi)型自動(dòng)編號(hào),并選擇它定 為主鍵 數(shù)據(jù)庫(kù)準(zhǔn)備 數(shù)據(jù)庫(kù)準(zhǔn)備 4,設(shè)計(jì)完“表1”后,直接關(guān)閉該窗口

51、,在彈出 對(duì)話(huà)框中點(diǎn)擊“是”保存“表1”命名為user 注意:剛剛強(qiáng)調(diào)的設(shè)置字段id相關(guān)是必須的, 否則在保存之后還會(huì)出現(xiàn)如下對(duì)話(huà)框,其效果 還是設(shè)置類(lèi)型是自動(dòng)編號(hào)的關(guān)鍵字段 數(shù)據(jù)庫(kù)準(zhǔn)備 5,數(shù)據(jù)庫(kù)表user已經(jīng)建立完畢 數(shù)據(jù)源的連接 web 應(yīng)用程序與“記事本”或其它任何應(yīng)用程 序一樣,在試圖訪(fǎng)問(wèn)未知格式的數(shù)據(jù)時(shí)面臨同 樣的問(wèn)題:應(yīng)用程序無(wú)法解釋這些數(shù)據(jù)。這就 需要在 web 應(yīng)用程序與數(shù)據(jù)庫(kù)之間存在一個(gè) 軟件接口,以允許應(yīng)用程序和數(shù)據(jù)庫(kù)互相進(jìn)行 通信。 三種常見(jiàn)接口可以使應(yīng)用程序與數(shù)據(jù)庫(kù)進(jìn)行通 信。第一種稱(chēng)為“開(kāi)放式數(shù)據(jù)庫(kù)連接”(或 odbc);第二種稱(chēng)為 ole db(對(duì)象鏈接和 嵌入數(shù)

52、據(jù)庫(kù));第三種稱(chēng)為“java 數(shù)據(jù)庫(kù)連 接”(或 jdbc)。 數(shù)據(jù)源的連接 asp 應(yīng)用程序必須通過(guò)開(kāi)放式數(shù)據(jù)庫(kù)連接 (odbc) 驅(qū)動(dòng)程序(或?qū)ο箧溄樱┖颓度胧綌?shù) 據(jù)庫(kù) (ole db) 提供程序連接到數(shù)據(jù)庫(kù)。該驅(qū) 動(dòng)程序或提供程序用作解釋器,能夠使 web 應(yīng) 用程序與數(shù)據(jù)庫(kù)進(jìn)行通信。 兩種連接方法:使用數(shù)據(jù)源名稱(chēng) (dsn) 或連接 字符串連接到數(shù)據(jù)庫(kù)。 數(shù)據(jù)源的連接 dsn 是單個(gè)詞的標(biāo)識(shí)符(如 myconnection), 它指向數(shù)據(jù)庫(kù)并包含連接到該數(shù)據(jù)庫(kù)所需的全部 信息??梢栽?windows 中定義 dsn。如果通過(guò) 安裝在 windows 系統(tǒng)上的 odbc 驅(qū)動(dòng)程序進(jìn)行 連

53、接,則可以使用 dsn。 連接字符串是手動(dòng)編碼的表達(dá)式,它標(biāo)識(shí)數(shù)據(jù)庫(kù) 并列出連接到該數(shù)據(jù)庫(kù)所需的信息,如: driver=microsoft access driver (*.mdb);dbq= dbq= & server.mappath(/tc/data/database.mdb) 3.選擇連接方式 4.完成設(shè)置 成功連接數(shù)據(jù)庫(kù)后,在dw里其實(shí)是自動(dòng)生成了 一個(gè)連接文件。位置在自動(dòng)生成的connections 文件夾中,名稱(chēng)是在“自定義連接字符串” 命 名的asp文件。還可以注意到dw數(shù)據(jù)庫(kù)標(biāo)簽內(nèi) 看到mdb文件內(nèi)的各個(gè)字段。 使用dw創(chuàng)建用戶(hù)注冊(cè)系統(tǒng) 使用dw創(chuàng)建用戶(hù)注冊(cè)系統(tǒng) 1, 在站點(diǎn)

54、里打開(kāi)以前建立的用戶(hù)注冊(cè)文件在站點(diǎn)里打開(kāi)以前建立的用戶(hù)注冊(cè)文件 regist.asp用來(lái)做注冊(cè)頁(yè)面用來(lái)做注冊(cè)頁(yè)面 使用dw創(chuàng)建用戶(hù)注冊(cè)系統(tǒng) 2、切換到切換到“服務(wù)器行為服務(wù)器行為”標(biāo)簽,單擊標(biāo)簽,單擊“+”按鈕,按鈕, 選擇選擇“插入記錄插入記錄”。 1.應(yīng)用程序面板 2.服務(wù)器行為標(biāo)簽 3.單擊“”按鈕 4.“插入記錄”選 項(xiàng) 使用dw創(chuàng)建用戶(hù)注冊(cè)系統(tǒng) 3、配置彈出的“插入記錄”對(duì)話(huà)框 1.選擇連接文件 2.選擇要插入的表格 3.輸入插入成功后轉(zhuǎn) 到的頁(yè)面 4.將表單元素與表格 中的列對(duì)應(yīng) 5.完成配置 使用dw創(chuàng)建用戶(hù)注冊(cè)系統(tǒng) 完成用戶(hù)注冊(cè)頁(yè)面的制作 使用dw創(chuàng)建用戶(hù)登錄頁(yè)面 1、在站點(diǎn)里

55、新建一文件、在站點(diǎn)里新建一文件login.asp用來(lái)做登錄用來(lái)做登錄 頁(yè)面頁(yè)面 使用dw創(chuàng)建用戶(hù)登錄頁(yè)面 2、選擇“應(yīng)用程序”面板“服務(wù)器行為” 中“+”“用戶(hù)身份驗(yàn)證”“登錄用戶(hù)” 使用dw創(chuàng)建用戶(hù)登錄頁(yè)面 3、彈出的對(duì)話(huà)框中進(jìn)行具體的設(shè)置 1.選擇連接驗(yàn)證中 已建立的連接名稱(chēng) 2.選擇用戶(hù)數(shù)據(jù)的 表格,以及用戶(hù)名 和密碼所對(duì)應(yīng)的列 3.設(shè)置登錄成功或 失敗后打開(kāi)的頁(yè)面 地址 4.設(shè)置登錄時(shí)驗(yàn)證 的選項(xiàng) 使用dw創(chuàng)建用戶(hù)登錄頁(yè)面 4、創(chuàng)建登錄成功和失敗時(shí)打開(kāi)的頁(yè)面文件 登錄失?。簂oginerror.asp登錄成功:welcome.asp 使用dw創(chuàng)建受限頁(yè)面 1、打開(kāi)welcome.asp

56、頁(yè)面 使用dw創(chuàng)建受限頁(yè)面 2、選擇“服務(wù)器行為服務(wù)器行為”“身份驗(yàn)證身份驗(yàn)證” “限制對(duì)頁(yè)的訪(fǎng)問(wèn)限制對(duì)頁(yè)的訪(fǎng)問(wèn)” 使用dw創(chuàng)建受限頁(yè)面 3、按“用戶(hù)名和密碼”進(jìn)行限制,拒絕則跳 轉(zhuǎn)到“l(fā)oginerror.asp” 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 1、打開(kāi)welcome.asp頁(yè)面 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 2、選擇“綁定”標(biāo)簽,添加“記錄集(查 詢(xún))”。 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 3、在彈出的“記錄集”對(duì)話(huà)框中進(jìn)行設(shè)置 1.名稱(chēng)可隨便起 2.選擇定義的連 接名稱(chēng) 3.選擇用戶(hù)數(shù)據(jù) 所在的表 4.選擇需要選取 的表列 5.選擇數(shù)據(jù)篩選 條件 6.選擇數(shù)據(jù)排序 方式 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)

57、 在篩選條件中選擇“name”字段,條件為 “”,類(lèi)型為“階段變量”,名稱(chēng)為 “mm_username” 其中“mm_username”為變量名,在用戶(hù)登 錄成功后保存在“階段變量”中的“用戶(hù)名” 信息 以上表示在數(shù)據(jù)庫(kù)表“user”中,選擇所有 “name”列的值等于登錄用戶(hù)的用戶(hù)名的記錄 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 4、確定后,會(huì)發(fā)現(xiàn)記錄集已經(jīng)綁定,所有數(shù) 據(jù)庫(kù)中的字段都顯現(xiàn)出來(lái) 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 5、將光標(biāo)移動(dòng)到頁(yè)面的合適位置,選中需要 在頁(yè)面中顯示的字段名稱(chēng),點(diǎn)擊下面的“插入” 按鈕,該asp頁(yè)面就顯示數(shù)據(jù)庫(kù)里面內(nèi)容了。 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 6、成功登錄到 welco

58、me.asp頁(yè)面后, 呈現(xiàn)的內(nèi)容如圖所示 使用dw顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù) 以上顯示的只是符合篩選條件的記錄集中的一 條記錄,在本例中符合篩選條件的記錄只有一 條,多條記錄的顯示將在后面的例子中介紹。 使用dw修改數(shù)據(jù)庫(kù)中的資料 修改資料!首先要清醒一點(diǎn),什么人才可以 修改。 一,本人只能修改自己的; 二,管理員可以修改所有人的。 使用dw修改數(shù)據(jù)庫(kù)中的資料 1、打開(kāi)welcome.asp頁(yè)面,將插入點(diǎn)移到頁(yè) 面下端空白行中選擇“服務(wù)器行為” 選擇“轉(zhuǎn)到詳細(xì)頁(yè)面” 使用dw修改數(shù)據(jù)庫(kù)中的資料 2、設(shè)置“轉(zhuǎn)到詳細(xì)頁(yè)面”對(duì)話(huà)框 1.輸入地址“useredit.asp” 將在該頁(yè)面中修改用戶(hù)資 料 2.選

59、擇“id”列作為傳 遞url參數(shù)的值 使用dw修改數(shù)據(jù)庫(kù)中的資料 設(shè)置完成后頁(yè)面中會(huì)出現(xiàn)“詳細(xì)信息” 超級(jí) 鏈接的文字 在預(yù)覽狀態(tài)下,點(diǎn)擊該文件可以打開(kāi) useredit.asp頁(yè)面,并在該頁(yè)面中修改用戶(hù)資 料 下面再開(kāi)始制作useredit.asp頁(yè)面 使用dw修改數(shù)據(jù)庫(kù)中的資料 3、在dw中選擇“新建”一個(gè)“asp vbscript”的動(dòng)態(tài)頁(yè),保存文件名為 “useredit.asp”。 該頁(yè)面將用來(lái)作為用戶(hù)修改資料的頁(yè)面 使用dw修改數(shù)據(jù)庫(kù)中的資料 4、選擇“應(yīng)用程序”面板“綁定”(或 “服務(wù)器行為”)標(biāo)簽“”號(hào)按鈕“記 錄集(查詢(xún))” 使用dw修改數(shù)據(jù)庫(kù)中的資料 5、設(shè)置“記錄集”對(duì)話(huà)

60、框 1.記錄集名稱(chēng)可隨 便起 2.選擇已建立的連 接名稱(chēng) 3.記錄集篩選條件 設(shè)置分別為“id”; “”;“url參 數(shù)”;“id” 使用dw修改數(shù)據(jù)庫(kù)中的資料 6、選擇“插入”面板“應(yīng)用程序”標(biāo)簽 “更新記錄表單向?qū)А?使用dw修改數(shù)據(jù)庫(kù)中的資料 7、設(shè)置“更新記錄表單”對(duì)話(huà)框 1.選擇連接名稱(chēng) 2.填寫(xiě)更新成功 后打開(kāi)的頁(yè)面文 件所在的路徑 3.刪除id字段, 因?yàn)閕d字段為自 動(dòng)編號(hào),無(wú)法更 新 使用dw修改數(shù)據(jù)庫(kù)中的資料 8、設(shè)置完成后頁(yè)面如圖所示 使用dw修改數(shù)據(jù)庫(kù)中的資料 9、完成editok.asp頁(yè)面的制作 使用dw修改數(shù)據(jù)庫(kù)中的資料 顯示效果如圖所示: 使用dw制作新聞發(fā)布系

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論