大學(xué)計算機基礎(chǔ) 第9章_第1頁
大學(xué)計算機基礎(chǔ) 第9章_第2頁
大學(xué)計算機基礎(chǔ) 第9章_第3頁
大學(xué)計算機基礎(chǔ) 第9章_第4頁
大學(xué)計算機基礎(chǔ) 第9章_第5頁
已閱讀5頁，還剩51頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第9章網(wǎng)頁制作大學(xué)計算機基礎(chǔ)（Windows10+Office2016）（微課版）COMPUTER目錄9.2

制作基本網(wǎng)頁CONTENTS9.1

網(wǎng)頁設(shè)計基礎(chǔ)大學(xué)計算機基礎(chǔ)（Windows10+Office2016）（慕課版）9.3

使用表格布局網(wǎng)頁9.4

使用DIV+CSS統(tǒng)一網(wǎng)頁風(fēng)格9.5

使用表單和行為9.1.1

網(wǎng)頁與網(wǎng)站的概念網(wǎng)站：網(wǎng)站是指在互聯(lián)網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（標準通用標記語言）工具制作的用于展示特定內(nèi)容相關(guān)的一組網(wǎng)頁的集合。通常情況下，網(wǎng)站只有一個主頁，主頁中會包含該網(wǎng)站的標志和指向其他頁面的鏈接，用戶可以通過網(wǎng)站來發(fā)布想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。也可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)頁：網(wǎng)頁是組成網(wǎng)站的基本單元，用戶上網(wǎng)瀏覽的一個個頁面就是網(wǎng)頁。網(wǎng)頁又稱為Web頁，一個網(wǎng)頁通常就是一個單獨的HTML文檔，其中包含有文字、圖像、聲音和超鏈接等元素。9.1.2網(wǎng)頁的構(gòu)成要素文字Logo導(dǎo)航超鏈接視頻音頻動畫表單元素圖像9.1.3常見的網(wǎng)站類型門戶網(wǎng)站個人網(wǎng)站職能網(wǎng)站企業(yè)網(wǎng)站專業(yè)網(wǎng)站9.1.4網(wǎng)站開發(fā)的工具DreamweaverCC是集網(wǎng)頁制作和網(wǎng)站管理于一身的網(wǎng)頁編輯器，是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的網(wǎng)頁。目錄9.2制作基本網(wǎng)頁CONTENTS9.1網(wǎng)頁設(shè)計基礎(chǔ)大學(xué)計算機基礎(chǔ)（Windows10+Office2016）（慕課版）9.3

使用表格布局網(wǎng)頁9.4

使用DIV+CSS統(tǒng)一網(wǎng)頁風(fēng)格9.5

使用表單和行為9.2.1創(chuàng)建本地站點【例】創(chuàng)建一個名稱為“wzsj”的本地站點。啟動DreamweaverCC2019，選擇【站點】/【新建站點】命令，打開“站點設(shè)置對象未命名站點1”對話框。在“站點名稱”文本框中輸入站點名稱，這里輸入“wzsj”，單擊對話框中的任一位置，確認站點名稱的輸入，此時對話框的名稱會隨之而改變。在“本地站點文件夾”文本框后單擊“瀏覽文件夾”按鈕。打開“選擇根文件夾”對話框，在該對話框中選擇存放站點的路徑，然后單擊按鈕。9.2.1創(chuàng)建本地站點返回到“站點設(shè)置對象wasj”對話框中，在“本地站點文件夾”對話框中則會顯示存儲站點的路徑，單擊按鈕。9.2.1創(chuàng)建本地站點返回DreamweaverCC2019主界面中，則會在“文件”面板中查看到創(chuàng)建的wzsj站點。9.2.2管理站點中的文件和文件夾添加文件或文件夾：網(wǎng)站內(nèi)容的分類決定了站點中創(chuàng)建文件和文件夾的個數(shù)，通常，網(wǎng)站中每個分支的所有文件統(tǒng)一存放在單獨的文件夾中，根據(jù)網(wǎng)站的大小，又可進行細分。移動和復(fù)制文件或文件夾：新建文件或文件夾后，若對文件或文件夾的位置不滿意，可對其進行移動操作。刪除文件或文件夾：選中需刪除的文件或文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選擇【編輯】/【刪除】命令，或直接按“Delete”鍵，在打開的對話框中單擊“是”按鈕可刪除文件或文件夾。重命名文件或文件夾：選擇需重命名的文件或文件夾并單擊鼠標右鍵，在彈出的快捷菜單中選擇【編輯】/【重命名】命令，使文件或文件夾的名稱呈可編輯狀態(tài)，在可編輯的名稱框中輸入新名稱即可。9.2.3創(chuàng)建網(wǎng)頁基本元素【例】在“hhjj.html”網(wǎng)頁中輸入文本。打開“hhjj.html”網(wǎng)頁文件，將插入點定位到內(nèi)側(cè)DIV中，輸入“花火植物家居館……”文本（具體內(nèi)容可參見提供的花火簡介.txt素材），當(dāng)輸入完“進出口等為一體的農(nóng)業(yè)產(chǎn)業(yè)化國家重點龍頭企業(yè)。”后按“Enter”鍵分段。1．在網(wǎng)頁中添加文本9.2.3創(chuàng)建網(wǎng)頁基本元素打開“花火簡介.txt”文件，選擇除第1段外的其他文本，按“Ctrl+C”組合鍵復(fù)制，返回“hhjj.html”網(wǎng)頁文件，然后按“Ctrl+V”組合鍵粘貼。9.2.3創(chuàng)建網(wǎng)頁基本元素（1）插入圖像在網(wǎng)頁恰當(dāng)?shù)奈恢貌迦雸D像，不但可以為網(wǎng)頁增彩增色，還可以使整個網(wǎng)頁更有說服力，從而吸引更多瀏覽者。2．在網(wǎng)頁中添加圖像（2）插入鼠標經(jīng)過圖像插入鼠標經(jīng)過圖像，是指當(dāng)鼠標經(jīng)過圖像時變化成另一張圖像，是網(wǎng)頁中較為常見的一種操作。選擇【插入】/【鼠標經(jīng)過圖像】命令，打開“插入鼠標經(jīng)過圖像”對話框，在其中進行設(shè)置。9.2.3創(chuàng)建網(wǎng)頁基本元素（1）插入HTML5VideoHTML5最重要的新特性就是對音頻和視頻的支持，如視頻的在線編輯、音頻的可視化構(gòu)造等。而HTML5Video元素是一種將視頻和電影嵌入到網(wǎng)頁中的一種標準樣式。（2）插入HTML5Audio音頻文件HTML5Audio是HTML5音頻元素提供的一種將音頻內(nèi)容嵌入網(wǎng)頁中的標準方式。同樣，HTML5音頻文件在插入時，只是以一個占位符的形式進行顯示。3．在網(wǎng)頁中添加多媒體元素9.2.3創(chuàng)建網(wǎng)頁基本元素（3）插入并設(shè)置Flash文件的屬性動態(tài)元素是一種重要的網(wǎng)頁元素，其中，F(xiàn)lash是使用最多的動態(tài)元素之一。Flash元素表現(xiàn)力豐富，可以給人極強的視聽感受。而且它的體積較小，可以被絕大多數(shù)瀏覽器支持，因此，被廣泛應(yīng)用于網(wǎng)頁中。（4）使用FlashVideo視頻文件Flash視頻即擴展名為.flv的Flash文件，在網(wǎng)頁中插入Flash視頻的操作與插入Flash動畫的方法類似，插入Flash視頻后還可通過設(shè)置的控制按鈕來控制視頻的播放。9.2.4創(chuàng)建網(wǎng)頁超鏈接通過菜單命令：在需要插入超鏈接的位置選擇【插入】/【Hyperlink】命令，在打開的“Hyperlink”對話框中進行鏈接文本、鏈接文件和目標打開方式的設(shè)置。通過“屬性”面板：在網(wǎng)頁中選擇要創(chuàng)建超鏈接的文本，在“屬性”面板的“鏈接”下拉列表框中直接輸入鏈接的URL地址或完整的路徑和文件名即可1．創(chuàng)建文本超鏈接9.2.4創(chuàng)建網(wǎng)頁超鏈接通過“瀏覽文件”按鈕：單擊“鏈接”下拉列表框后的“瀏覽文件”按鈕，在打開的“選擇文件”對話框中選擇需要鏈接的文件，單擊按鈕即可鏈接，或按住“鏈接”下拉列表框后的“指向文件”按鈕，拖動到右側(cè)的“文件”面板，并指向需要鏈接的文件即可。HTML代碼：切換到“代碼”或“拆分”視圖中，直接在<body></body>標簽間輸入<ahref="鏈接路徑及名稱">鏈接內(nèi)容</a>，如<ahref="">百度</a>，表示單擊“百度”文本，鏈接到百度網(wǎng)頁。9.2.4創(chuàng)建網(wǎng)頁超鏈接在網(wǎng)頁中創(chuàng)建圖像超鏈接與創(chuàng)建文本超鏈接的操作方法基本相同，都是先選擇需要創(chuàng)建超鏈接的對象，然后在“屬性”面板中設(shè)置圖像鏈接的路徑及名稱。2．創(chuàng)建圖像超鏈接9.2.4創(chuàng)建網(wǎng)頁超鏈接熱點鏈接的原理是利用HTML語言在圖像上定義不同形狀的區(qū)域，然后再為這些區(qū)域添加鏈接，這些區(qū)域被稱為熱點。在創(chuàng)建熱點鏈接時，需要先選擇需要創(chuàng)建熱點的圖像，再在“屬性”面板中選擇不同的熱點形狀，在圖像中繪制熱點區(qū)域后，在其“屬性”面板的“鏈接”文本框中輸入鏈接路徑或名稱即可。3．創(chuàng)建熱點鏈接9.2.4創(chuàng)建網(wǎng)頁超鏈接通過菜單命令通過“插入”面板通過HTML代碼4．創(chuàng)建電子郵件超鏈接9.2.4創(chuàng)建網(wǎng)頁超鏈接下載超鏈接與其他超鏈接的不同之處在于鏈接的對象不是網(wǎng)頁而是一些單獨的文件。在單擊瀏覽器中無法顯示的鏈接文件時，會自動打開“文件下載”對話框。一般擴展名為.gif或.jpg的圖像文件或文本文件（.txt）都可以在瀏覽器中直接顯示，但一些壓縮文件（.zip、.rar等）或可執(zhí)行文件（.exe）不可以顯示在瀏覽器中，因此，會打開“文件下載”對話框進行下載。5．創(chuàng)建下載超鏈接目錄9.2制作基本網(wǎng)頁CONTENTS9.1網(wǎng)頁設(shè)計基礎(chǔ)大學(xué)計算機基礎(chǔ)（Windows10+Office2016）（慕課版）9.3使用表格布局網(wǎng)頁9.4

使用DIV+CSS統(tǒng)一網(wǎng)頁風(fēng)格9.5

使用表單和行為9.3.1插入表格并輸入內(nèi)容【例9】新建一個網(wǎng)頁文檔，在其中插入一個6行3列，寬度為954像素，邊框粗細為0像素的表格。新建“index.html”網(wǎng)頁，然后選擇【插入】/【Table】命令，打開“Table”對話框，在其中進行設(shè)置。9.3.1插入表格并輸入內(nèi)容單擊按鈕，即可在插入點處添加一個6行3列的表格。9.3.2表格的基本操作選擇需要調(diào)整大小的表格，將鼠標光標移動至表格右側(cè)，當(dāng)鼠標光標變?yōu)榛蛐螤顣r，拖動鼠標即可改變表格的大小。1．調(diào)整表格大小將鼠標光標定位在單元格中，移動鼠標光標，當(dāng)其移動到行或列的相交處時，鼠標光標將變?yōu)榛蛐螤?，拖動鼠標可調(diào)整單元格的大小。9.3.2表格的基本操作使用菜單命令：將鼠標光標定位到相應(yīng)的單元格中，選擇【編輯】/【表格】/【插入行】或【插入列】命令可在當(dāng)前選擇單元格的上面或左邊添加一行或列。使用右鍵菜單：將鼠標光標定位到相應(yīng)的單元格中，單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【插入行】或【插入列】命令，可實現(xiàn)單行或單列的插入使用對話框：將鼠標光標定位到相應(yīng)的單元格中，單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【插入行或列】命令，打開“插入行或列”對話框，單擊選中“行”或“列”單選項，再設(shè)置插入的行數(shù)或列數(shù)及位置2.添加單元格行或列9.3.2表格的基本操作使用菜單命令：將鼠標光標定位到要刪除的行或列所在的單元格，選擇【編輯】/【表格】/【刪除行】或【編輯】/【表格】/【刪除列】命令。使用右鍵菜單：將鼠標光標定位到要刪除的行或列所在的單元格，單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【刪除行】或【表格】/【刪除列】命令。使用快捷鍵：使用鼠標選擇要刪除的行或列，然后按【Delete】鍵。3.刪除單元格行或列9.3.2表格的基本操作使用菜單命令：選擇要合并的單元格區(qū)域，選擇【修改】/【表格】/【合并單元格】命令即可合并單元格。使用右鍵菜單：選擇要合并的單元格區(qū)域并單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【合并單元格】命令即可。使用“屬性”面板：選擇要合并的單元格區(qū)域，單擊“屬性”面板左下角的“合并所選單元格”按鈕即可。4.合并單元格9.3.2表格的基本操作使用菜單命令：選擇要拆分的單元格，選擇菜單欄中的【修改】/【表格】/【拆分單元格】命令即可。使用右鍵菜單：選擇要拆分的單元格并單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【拆分單元格】命令即可。使用“屬性”面板：選擇要拆分的單元格，單擊“屬性”面板左下角的“拆分單元格為行或列”按鈕，打開“拆分單元格”對話框，設(shè)置拆分的行或列數(shù)。5.拆分單元格9.3.3設(shè)置表格屬性如果不能熟練地使用HTML設(shè)置表格屬性，可通過選擇【窗口】/【屬性】命令，打開“屬性”面板進行可視化設(shè)置。并且表格“屬性”面板中的各參數(shù)設(shè)置與“Table”對話框中的參數(shù)基本相同。而在插入表格后，再使用表格“屬性”面板，則起到對插入的表格進行相應(yīng)更改的作用。5.拆分單元格目錄9.2制作基本網(wǎng)頁CONTENTS9.1網(wǎng)頁設(shè)計基礎(chǔ)大學(xué)計算機基礎(chǔ)（Windows10+Office2016）（慕課版）9.3使用表格布局網(wǎng)頁9.4使用DIV+CSS統(tǒng)一網(wǎng)頁風(fēng)格9.5

使用表單和行為9.4.1

CSS樣式的基本語法在每條CSS樣式中，都包含了兩個部分的規(guī)則：選擇器（選擇符）和聲明。選擇器就是用于選擇文檔中應(yīng)用樣式的元素，而聲明則是屬性及屬性值的組合。每個樣式表都是由一系列的規(guī)則組成的。但并不是每條樣式規(guī)則都出現(xiàn)在樣式表中。1.基本語法規(guī)則9.4.1

CSS樣式的基本語法在網(wǎng)頁中，如果想把一個CSS樣式引用到多個網(wǎng)頁元素中，則可使用多個選擇器，即在選擇器的位置引用多個選擇器名稱，并且選擇器名稱之間用逗號分隔。2.多個選擇器9.4.2創(chuàng)建樣式表在Dreamweaver中，將CSS樣式按照使用方法進行分類，可以分為內(nèi)部樣式和外部樣式。如果CSS樣式創(chuàng)建到網(wǎng)頁內(nèi)部，則可以選擇創(chuàng)建內(nèi)部樣式，但創(chuàng)建的內(nèi)部樣式只能應(yīng)用到一個網(wǎng)頁文檔中。如果想在其他網(wǎng)頁文檔中應(yīng)用，則需創(chuàng)建外部樣式。9.4.3認識DIV標簽DIV（Divsion）區(qū)塊，也可以稱為容器，在Dreamweaver中使用DIV與其他HTML標簽的方法。在布局設(shè)計中，DIV承載的是結(jié)構(gòu)，采用CSS可以有效地對頁面中的布局、文字等進行精確的控制，DIV+CSS完美實現(xiàn)了結(jié)構(gòu)和表現(xiàn)的結(jié)合，對于傳統(tǒng)的表格布局是一個很大的沖擊。9.4.4認識DIV+CSS布局模式DIV+CSS布局模式是根據(jù)CSS規(guī)則中涉及的margin（邊界）、border（邊框）、padding（填充）、content（內(nèi)容）來建立的一種網(wǎng)頁布局方法，如圖所示即為一個標準的DIV+CSS布局結(jié)構(gòu)，左側(cè)為代碼，右側(cè)為效果圖。9.4.5插入DIV標簽在DreamweaverCC中插入DIV元素的方法相當(dāng)簡單，只需定位插入點后，選擇【插入】/【Div】命令或選擇【插入】/【HTML】/【Div】命令，打開“插入Div”對話框。9.4.6HTML5結(jié)構(gòu)在DreamweaverCC2019中，不僅可以單獨插入DIV元素，還可以使用HTML5元素插入有結(jié)構(gòu)的DIV元素。其結(jié)構(gòu)元素中包括畫布、頁眉、標題、段落、導(dǎo)航、側(cè)邊、文章、章節(jié)、頁腳和圖等。目錄9.2制作基本網(wǎng)頁CONTENTS9.1網(wǎng)頁設(shè)計基礎(chǔ)大學(xué)計算機基礎(chǔ)（Windows10+Office2016）（慕課版）9.3使用表格布局網(wǎng)頁9.4使用DIV+CSS統(tǒng)一網(wǎng)頁風(fēng)格9.5使用表單和行為9.5.1

認識表單注冊網(wǎng)頁登錄網(wǎng)頁留言板或電子郵件網(wǎng)頁1.表單形式9.5.1

認識表單在網(wǎng)頁中，組成表單樣式的各個元素稱之為域。在DreamweaverCC2019的“插入”面板的“表單”分類列表中，則可以看到表單中的所有元素。2.表單的組成要素9.5.1

認識表單在HTML中，表單是使用<form></form>標記表示的，并且表單中的各種元素都必須存在于該標記之間，如圖所示的代碼表單，表示名為form1的表單，使用post方法提交到郵箱。3.HTML中的表單9.5.2

創(chuàng)建表單并設(shè)置屬性在DreamweaverCC2019中插入表單只需選擇【插入】/【表單】/【表單】命令或在“插入”面板的“表單”分類列表中單擊“表單”按鈕，即可在網(wǎng)頁文檔中插入一個以紅色虛線顯示的表單。1.創(chuàng)建表單9.5.2

創(chuàng)建表單并設(shè)置屬性在網(wǎng)頁文檔中插入表單后，則會在“屬性”面板中顯示與表單相關(guān)的屬性，而通過表單“屬性”面板，則可對插入的表單進行名稱、處理方式以及表單的發(fā)送方法等設(shè)置。2.設(shè)置表單屬性9.5.3

插入表單元素文本輸入類元素，主要包括常用的與文本相關(guān)的表單元素，如文本、電子郵件、密碼、Url、Tel、搜索、數(shù)字、范圍、顏色、月、周、日期、時間、日期時間、日期時間（當(dāng)?shù)兀┖臀谋緟^(qū)域等。1.文本輸入類元素9.5.3

插入表單元素選擇元素單選按鈕和單選按鈕組元素復(fù)選框和復(fù)選框組元素2.選擇類元素9.5.3

插入表單元素文件（File）元素可以在表單文檔中制作文件附加項目，由文本框和按鈕組成。單擊按鈕在打開的對話框中可添加上傳的文件或圖像等，而文本框中則會顯示文件或圖像的路徑。3.文件元素按鈕和圖像域都有一個共同點，都可在單擊后與表單進行交互。按鈕包括普通按鈕、提交按鈕和重置按鈕，而圖像域也可以稱為圖像按鈕。4.按鈕和圖像域9.5.3

插入表單元素隱藏（Hidden）元素主要用于傳送一些不能讓用戶查看到的數(shù)據(jù)。在表單中插入隱藏元素后，是以圖標顯示的，而且該元素只有

溫馨提示

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

評論

0/150

提交評論