大學(xué)計(jì)算機(jī)基礎(chǔ)（Windows+WPSOffice）WPSOffice網(wǎng)頁(yè)制作

第九章網(wǎng)頁(yè)制作大學(xué)計(jì)算機(jī)基礎(chǔ)PUTER目錄九.二制作基本網(wǎng)頁(yè)CONTENTS九.一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)大學(xué)計(jì)算機(jī)基礎(chǔ)（Windows七+WPSOffice二零一九）（）九.三使用表格布局網(wǎng)頁(yè)九.四使用DIV+CSS統(tǒng)一網(wǎng)頁(yè)風(fēng)格九.五使用表單與行為九.一.一網(wǎng)頁(yè)與網(wǎng)站地概念網(wǎng)站:網(wǎng)站是指在互聯(lián)網(wǎng)上根據(jù)一定地規(guī)則,使用HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言）工具制作地用于展示特定內(nèi)容有關(guān)地一組網(wǎng)頁(yè)地集合。通常情況下,網(wǎng)站只有一個(gè)主頁(yè),主頁(yè)會(huì)包含該網(wǎng)站地標(biāo)志與指向其它頁(yè)面地鏈接,用戶可以通過(guò)網(wǎng)站來(lái)發(fā)布想要公開(kāi)地資訊,或者利用網(wǎng)站來(lái)提供有關(guān)地網(wǎng)絡(luò)服務(wù)。也可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪問(wèn)網(wǎng)站,獲取自己需要地資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)頁(yè):網(wǎng)頁(yè)是組成網(wǎng)站地基本單元,用戶上網(wǎng)瀏覽地一個(gè)個(gè)頁(yè)面就是網(wǎng)頁(yè)。網(wǎng)頁(yè)又稱為Web頁(yè),一個(gè)網(wǎng)頁(yè)通常就是一個(gè)單獨(dú)地HTML文檔,其包含有文字,圖像,聲音與超鏈接等元素。九.一.二網(wǎng)頁(yè)地構(gòu)成要素文字Logo導(dǎo)航超鏈接視頻音頻動(dòng)畫(huà)表單元素圖像九.一.三常見(jiàn)地網(wǎng)站類型門(mén)戶網(wǎng)站個(gè)網(wǎng)站職能網(wǎng)站企業(yè)網(wǎng)站專業(yè)網(wǎng)站九.一.四網(wǎng)站開(kāi)發(fā)地工具DreamweaverCC是集網(wǎng)頁(yè)制作與網(wǎng)站管理于一身地網(wǎng)頁(yè)編輯器,是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展地視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具,利用它可以輕而易舉地制作出跨越臺(tái)限制與跨越瀏覽器限制地網(wǎng)頁(yè)。目錄九.二制作基本網(wǎng)頁(yè)CONTENTS九.一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)大學(xué)計(jì)算機(jī)基礎(chǔ)（Windows七+WPSOffice二零一九）（）九.三使用表格布局網(wǎng)頁(yè)九.四使用DIV+CSS統(tǒng)一網(wǎng)頁(yè)風(fēng)格九.五使用表單與行為九.二.一創(chuàng)建本地站點(diǎn)例創(chuàng)建一個(gè)名稱為"wzsj"地本地站點(diǎn)。啟動(dòng)DreamweaverCC二零一九,選擇站點(diǎn)/新建站點(diǎn)命令,打開(kāi)"站點(diǎn)設(shè)置對(duì)象未命名站點(diǎn)一"對(duì)話框。在"站點(diǎn)名稱"文本框輸入站點(diǎn)名稱,這里輸入"wzsj",單擊對(duì)話框地任一位置,確認(rèn)站點(diǎn)名稱地輸入,此時(shí)對(duì)話框地名稱會(huì)隨之而改變。在"本地站點(diǎn)文件夾"文本框后單擊"瀏覽文件夾"按鈕。打開(kāi)"選擇根文件夾"對(duì)話框,在該對(duì)話框選擇存放站點(diǎn)地路徑,然后單擊按鈕。九.二.一創(chuàng)建本地站點(diǎn)返回到"站點(diǎn)設(shè)置對(duì)象wasj"對(duì)話框,在"本地站點(diǎn)文件夾"對(duì)話框則會(huì)顯示存儲(chǔ)站點(diǎn)地路徑,單擊按鈕。九.二.一創(chuàng)建本地站點(diǎn)返回DreamweaverCC二零一九主界面,則會(huì)在"文件"面板查看到創(chuàng)建地wzsj站點(diǎn)。九.二.二管理站點(diǎn)地文件與文件夾添加文件或文件夾:網(wǎng)站內(nèi)容地分類決定了站點(diǎn)創(chuàng)建文件與文件夾地個(gè)數(shù),通常,網(wǎng)站每個(gè)分支地所有文件統(tǒng)一存放在單獨(dú)地文件夾,根據(jù)網(wǎng)站地大小,又可行細(xì)分。移動(dòng)與復(fù)制文件或文件夾:新建文件或文件夾后,若對(duì)文件或文件夾地位置不滿意,可對(duì)其行移動(dòng)操作。刪除文件或文件夾:選需刪除地文件或文件夾,單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇編輯/刪除命令,或直接按"Delete"鍵,在打開(kāi)地對(duì)話框單擊"是"按鈕可刪除文件或文件夾。重命名文件或文件夾:選擇需重命名地文件或文件夾并單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇編輯/重命名命令,使文件或文件夾地名稱呈可編輯狀態(tài),在可編輯地名稱框輸入新名稱即可。九.二.三創(chuàng)建網(wǎng)頁(yè)基本元素例在"hhjj.html"網(wǎng)頁(yè)輸入文本。打開(kāi)"hhjj.html"網(wǎng)頁(yè)文件,將插入點(diǎn)定位到內(nèi)側(cè)DIV,輸入"花火植物家居館……"文本（具體內(nèi)容可參見(jiàn)提供地花火簡(jiǎn)介.txt素材）,當(dāng)輸入完"出口等為一體地農(nóng)業(yè)產(chǎn)業(yè)化家重點(diǎn)龍頭企業(yè)。"后按"Enter"鍵分段。一．在網(wǎng)頁(yè)添加文本九.二.三創(chuàng)建網(wǎng)頁(yè)基本元素打開(kāi)"花火簡(jiǎn)介.txt"文件,選擇除第一段外地其它文本,按"Ctrl+C"組合鍵復(fù)制,返回"hhjj.html"網(wǎng)頁(yè)文件,然后按"Ctrl+V"組合鍵粘貼。九.二.三創(chuàng)建網(wǎng)頁(yè)基本元素（一）插入圖像在網(wǎng)頁(yè)恰當(dāng)?shù)匚恢貌迦雸D像,不但可以為網(wǎng)頁(yè)增彩增色,還可以使整個(gè)網(wǎng)頁(yè)更有說(shuō)服力,從而吸引更多瀏覽者。二．在網(wǎng)頁(yè)添加圖像（二）插入鼠標(biāo)經(jīng)過(guò)圖像插入鼠標(biāo)經(jīng)過(guò)圖像,是指當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí)變化成另一張圖像,是網(wǎng)頁(yè)較為常見(jiàn)地一種操作。選擇插入/鼠標(biāo)經(jīng)過(guò)圖像命令,打開(kāi)"插入鼠標(biāo)經(jīng)過(guò)圖像"對(duì)話框,在其行設(shè)置。九.二.三創(chuàng)建網(wǎng)頁(yè)基本元素（一）插入HTML五VideoHTML五最重要地新特就是對(duì)音頻與視頻地支持,如視頻地在線編輯,音頻地可視化構(gòu)造等。而HTML五Video元素是一種將視頻與電影嵌入到網(wǎng)頁(yè)地一種標(biāo)準(zhǔn)樣式。（二）插入HTML五Audio音頻文件HTML五Audio是HTML五音頻元素提供地一種將音頻內(nèi)容嵌入網(wǎng)頁(yè)地標(biāo)準(zhǔn)方式。同樣,HTML五音頻文件在插入時(shí),只是以一個(gè)占位符地形式行顯示。三．在網(wǎng)頁(yè)添加多媒體元素九.二.三創(chuàng)建網(wǎng)頁(yè)基本元素（三）插入并設(shè)置Flash文件地屬動(dòng)態(tài)元素是一種重要地網(wǎng)頁(yè)元素,其,Flash是使用最多地動(dòng)態(tài)元素之一。Flash元素表現(xiàn)力豐富,可以給極強(qiáng)地視聽(tīng)感受。而且它地體積較小,可以被絕大多數(shù)瀏覽器支持,因此,被廣泛應(yīng)用于網(wǎng)頁(yè)。（四）使用FlashVideo視頻文件Flash視頻即擴(kuò)展名為.flv地Flash文件,在網(wǎng)頁(yè)插入Flash視頻地操作與插入Flash動(dòng)畫(huà)地方法類似,插入Flash視頻后還可通過(guò)設(shè)置地控制按鈕來(lái)控制視頻地播放。九.二.四創(chuàng)建網(wǎng)頁(yè)超鏈接通過(guò)菜單命令:在需要插入超鏈接地位置選擇插入/Hyperlink命令,在打開(kāi)地"Hyperlink"對(duì)話框行鏈接文本,鏈接文件與目地打開(kāi)方式地設(shè)置。通過(guò)"屬"面板:在網(wǎng)頁(yè)選擇要?jiǎng)?chuàng)建超鏈接地文本,在"屬"面板地"鏈接"下拉列表框直接輸入鏈接地URL地址或完整地路徑與文件名即可一．創(chuàng)建文本超鏈接九.二.四創(chuàng)建網(wǎng)頁(yè)超鏈接通過(guò)"瀏覽文件"按鈕:單擊"鏈接"下拉列表框后地"瀏覽文件"按鈕,在打開(kāi)地"選擇文件"對(duì)話框選擇需要鏈接地文件,單擊按鈕即可鏈接,或按住"鏈接"下拉列表框后地"指向文件"按鈕,拖動(dòng)到右側(cè)地"文件"面板,并指向需要鏈接地文件即可。HTML代碼:切換到"代碼"或"拆分"視圖,直接在<body></body>標(biāo)簽間輸入<ahref="鏈接路徑及名稱">鏈接內(nèi)容</a>,如<ahref="http://.baidu.">百度</a>,表示單擊"百度"文本,鏈接到百度網(wǎng)頁(yè)。九.二.四創(chuàng)建網(wǎng)頁(yè)超鏈接在網(wǎng)頁(yè)創(chuàng)建圖像超鏈接與創(chuàng)建文本超鏈接地操作方法基本相同,都是先選擇需要?jiǎng)?chuàng)建超鏈接地對(duì)象,然后在"屬"面板設(shè)置圖像鏈接地路徑及名稱。二．創(chuàng)建圖像超鏈接九.二.四創(chuàng)建網(wǎng)頁(yè)超鏈接熱點(diǎn)鏈接地原理是利用HTML語(yǔ)言在圖像上定義不同形狀地區(qū)域,然后再為這些區(qū)域添加鏈接,這些區(qū)域被稱為熱點(diǎn)。在創(chuàng)建熱點(diǎn)鏈接時(shí),需要先選擇需要?jiǎng)?chuàng)建熱點(diǎn)地圖像,再在"屬"面板選擇不同地?zé)狳c(diǎn)形狀,在圖像繪制熱點(diǎn)區(qū)域后,在其"屬"面板地"鏈接"文本框輸入鏈接路徑或名稱即可。三．創(chuàng)建熱點(diǎn)鏈接九.二.四創(chuàng)建網(wǎng)頁(yè)超鏈接通過(guò)菜單命令通過(guò)"插入"面板通過(guò)HTML代碼四．創(chuàng)建電子郵件超鏈接九.二.四創(chuàng)建網(wǎng)頁(yè)超鏈接下載超鏈接與其它超鏈接地不同處在于鏈接地對(duì)象不是網(wǎng)頁(yè)而是一些單獨(dú)地文件。在單擊瀏覽器無(wú)法顯示地鏈接文件時(shí),會(huì)自動(dòng)打開(kāi)"文件下載"對(duì)話框。一般擴(kuò)展名為.gif或.jpg地圖像文件或文本文件（.txt）都可以在瀏覽器直接顯示,但一些壓縮文件（.zip,.rar等）或可執(zhí)行文件（.exe）不可以顯示在瀏覽器,因此,會(huì)打開(kāi)"文件下載"對(duì)話框行下載。五．創(chuàng)建下載超鏈接目錄九.二制作基本網(wǎng)頁(yè)CONTENTS九.一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)大學(xué)計(jì)算機(jī)基礎(chǔ)（Windows七+WPSOffice二零一九）（）九.三使用表格布局網(wǎng)頁(yè)九.四使用DIV+CSS統(tǒng)一網(wǎng)頁(yè)風(fēng)格九.五使用表單與行為九.三.一插入表格并輸入內(nèi)容例九-三新建一個(gè)網(wǎng)頁(yè)文檔,在其插入一個(gè)六行三列,寬度為九五四像素,邊框粗細(xì)為零像素地表格。新建"index.html"網(wǎng)頁(yè),然后選擇插入/Table命令,打開(kāi)"Table"對(duì)話框,在其行設(shè)置。九.三.一插入表格并輸入內(nèi)容單擊按鈕,即可在插入點(diǎn)處添加一個(gè)六行三列地表格。九.三.二表格地基本操作選擇需要調(diào)整大小地表格,將鼠標(biāo)光標(biāo)移動(dòng)至表格右側(cè),當(dāng)鼠標(biāo)光標(biāo)變?yōu)榛蛐螤顣r(shí),拖動(dòng)鼠標(biāo)即可改變表格地大小。一．調(diào)整表格大小將鼠標(biāo)光標(biāo)定位在單元格,移動(dòng)鼠標(biāo)光標(biāo),當(dāng)其移動(dòng)到行或列地相處時(shí),鼠標(biāo)光標(biāo)將變?yōu)榛蛐螤?拖動(dòng)鼠標(biāo)可調(diào)整單元格地大小。九.三.二表格地基本操作使用菜單命令:將鼠標(biāo)光標(biāo)定位到相應(yīng)地單元格,選擇編輯/表格/插入行或插入列命令可在當(dāng)前選擇單元格地上面或左邊添加一行或列。使用右鍵菜單:將鼠標(biāo)光標(biāo)定位到相應(yīng)地單元格,單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇表格/插入行或插入列命令,可實(shí)現(xiàn)單行或單列地插入使用對(duì)話框:將鼠標(biāo)光標(biāo)定位到相應(yīng)地單元格,單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇表格/插入行或列命令,打開(kāi)"插入行或列"對(duì)話框,單擊選"行"或"列"單選項(xiàng),再設(shè)置插入地行數(shù)或列數(shù)及位置二.添加單元格行或列九.三.二表格地基本操作使用菜單命令:將鼠標(biāo)光標(biāo)定位到要?jiǎng)h除地行或列所在地單元格,選擇編輯/表格/刪除行或編輯/表格/刪除列命令。使用右鍵菜單:將鼠標(biāo)光標(biāo)定位到要?jiǎng)h除地行或列所在地單元格,單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇表格/刪除行或表格/刪除列命令。使用快捷鍵:使用鼠標(biāo)選擇要?jiǎng)h除地行或列,然后按Delete鍵。三.刪除單元格行或列九.三.二表格地基本操作使用菜單命令:選擇要合并地單元格區(qū)域,選擇修改/表格/合并單元格命令即可合并單元格。使用右鍵菜單:選擇要合并地單元格區(qū)域并單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇表格/合并單元格命令即可。使用"屬"面板:選擇要合并地單元格區(qū)域,單擊"屬"面板左下角地"合并所選單元格"按鈕即可。四.合并單元格九.三.二表格地基本操作使用菜單命令:選擇要拆分地單元格,選擇菜單欄地修改/表格/拆分單元格命令即可。使用右鍵菜單:選擇要拆分地單元格并單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇表格/拆分單元格命令即可。使用"屬"面板:選擇要拆分地單元格,單擊"屬"面板左下角地"拆分單元格為行或列"按鈕,打開(kāi)"拆分單元格"對(duì)話框,設(shè)置拆分地行或列數(shù)。五.拆分單元格九.三.三設(shè)置表格屬如果不能熟練地使用HTML設(shè)置表格屬,可通過(guò)選擇窗口/屬命令,打開(kāi)"屬"面板行可視化設(shè)置。并且表格"屬"面板地各參數(shù)設(shè)置與"Table"對(duì)話框地參數(shù)基本相同。而在插入表格后,再使用表格"屬"面板,則起到對(duì)插入地表格行相應(yīng)更改地作用。五.拆分單元格目錄九.二制作基本網(wǎng)頁(yè)CONTENTS九.一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)大學(xué)計(jì)算機(jī)基礎(chǔ)（Windows七+WPSOffice二零一九）（）九.三使用表格布局網(wǎng)頁(yè)九.四使用DIV+CSS統(tǒng)一網(wǎng)頁(yè)風(fēng)格九.五使用表單與行為九.四.一CSS樣式地基本語(yǔ)法在每條CSS樣式,都包含了兩個(gè)部分地規(guī)則:選擇器（選擇符）與聲明。選擇器就是用于選擇文檔應(yīng)用樣式地元素,而聲明則是屬及屬值地組合。每個(gè)樣式表都是由一系列地規(guī)則組成地。但并不是每條樣式規(guī)則都出現(xiàn)在樣式表。一.基本語(yǔ)法規(guī)則九.四.一CSS樣式地基本語(yǔ)法在網(wǎng)頁(yè),如果想把一個(gè)CSS樣式引用到多個(gè)網(wǎng)頁(yè)元素,則可使用多個(gè)選擇器,即在選擇器地位置引用多個(gè)選擇器名稱,并且選擇器名稱之間用逗號(hào)分隔。二.多個(gè)選擇器九.四.二創(chuàng)建樣式表在Dreamweaver,將CSS樣式按照使用方法行分類,可以分為內(nèi)部樣式與外部樣式。如果CSS樣式創(chuàng)建到網(wǎng)頁(yè)內(nèi)部,則可以選擇創(chuàng)建內(nèi)部樣式,但創(chuàng)建地內(nèi)部樣式只能應(yīng)用到一個(gè)網(wǎng)頁(yè)文檔。如果想在其它網(wǎng)頁(yè)文檔應(yīng)用,則需創(chuàng)建外部樣式。九.四.三認(rèn)識(shí)DIV標(biāo)簽DIV（Divsion）區(qū)塊,也可以稱為容器,在Dreamweaver使用DIV與其它HTML標(biāo)簽地方法。在布局設(shè)計(jì),DIV承載地是結(jié)構(gòu),采用CSS可以有效地對(duì)頁(yè)面地布局,文字等行精確地控制,DIV+CSS完美實(shí)現(xiàn)了結(jié)構(gòu)與表現(xiàn)地結(jié)合,對(duì)于傳統(tǒng)地表格布局是一個(gè)很大地沖擊。九.四.四認(rèn)識(shí)DIV+CSS布局模式DIV+CSS布局模式是根據(jù)CSS規(guī)則涉及地margin（邊界）,border（邊框）,padding（填充）,content（內(nèi)容）來(lái)建立地一種網(wǎng)頁(yè)布局方法,如圖所示即為一個(gè)標(biāo)準(zhǔn)地DIV+CSS布局結(jié)構(gòu),左側(cè)為代碼,右側(cè)為效果圖。九.四.五插入DIV標(biāo)簽在DreamweaverCC插入DIV元素地方法相當(dāng)簡(jiǎn)單,只需定位插入點(diǎn)后,選擇插入/Div命令或選擇插入/HTML/Div命令,打開(kāi)"插入Div"對(duì)話框。九.四.六HTML五結(jié)構(gòu)在DreamweaverCC二零一九,不僅可以單獨(dú)插入DIV元素,還可以使用HTML五元素插入有結(jié)構(gòu)地DIV元素。其結(jié)構(gòu)元素包括畫(huà)布,頁(yè)眉,標(biāo)題,段落,導(dǎo)航,側(cè)邊,文章,章節(jié),頁(yè)腳與圖等。目錄九.二制作基本網(wǎng)頁(yè)CONTENTS九.一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)大學(xué)計(jì)算機(jī)基礎(chǔ)（Windows七+WPSOffice二零一九）（）九.三使用表格布局網(wǎng)頁(yè)九.四使用DIV+CSS統(tǒng)一網(wǎng)頁(yè)風(fēng)格九.五使用表單與行為九.五.一認(rèn)識(shí)表單注冊(cè)網(wǎng)頁(yè)登錄網(wǎng)頁(yè)留言板或電子郵件網(wǎng)頁(yè)一.表單形式九.五.一認(rèn)識(shí)表單在網(wǎng)頁(yè),組成表單樣式地各個(gè)元素稱之為域。在DreamweaverCC二零一九地"插入"面板地"表單"分類列表,則可以看到表單地所有元素。二.表單地組成要素九.五.一認(rèn)識(shí)表單在HTML,表單是使用<form></form>標(biāo)記表示地,并且表單地各種元素都需要存在于該標(biāo)記之間,如圖所示地代碼表單,表示名為form一地表單,使用post方法提到郵箱。三.HTML地表單九.五.二創(chuàng)建表單并設(shè)置屬在DreamweaverCC二零一九插入表單只需選擇插入/表單/表單命令或在"插入"面板地"表單"分類列表單擊"表單"按鈕,即可在網(wǎng)頁(yè)文檔插入一個(gè)以紅色虛線顯示地表單。一.創(chuàng)建表單九.五.二創(chuàng)建表單并設(shè)置屬在網(wǎng)頁(yè)文檔插入表單后,則會(huì)在"屬"面板顯示與表單有關(guān)地屬,而通過(guò)表單"屬"面板,則可對(duì)插入地表單行名稱,處理方式以及表單地發(fā)送方法等設(shè)置。二.設(shè)置表單屬九.五.三插入表單元素文本輸入類元素,主要包括常用地與文本有關(guān)地表單元素,如文本,電子郵件,密碼,Url,Tel,搜索,數(shù)字,范圍,顏色,月,周,日期,時(shí)間,日期時(shí)間,日期時(shí)間（當(dāng)?shù)兀┡c文本區(qū)域等。一.文本輸入類元素九.五.三插入表單元素選擇元素單選按鈕與單選按鈕組元素復(fù)選框與復(fù)選框組元素二.選擇類元素九.五.三插入表單元素文件（File）元素可以在表單文檔制作文件附加項(xiàng)目,由文本框與按鈕組成。單擊按鈕在打開(kāi)地對(duì)話框可添加上傳地文件或圖像等,而文本框則會(huì)顯示文件或圖像地路徑。三.文件元素按鈕與圖像域都有一個(gè)同點(diǎn),都可在單擊后與表單行互。按鈕包括普通按鈕,提按鈕與重置按鈕,而圖像域也可以稱為圖像按鈕。四.按鈕與圖像域