網(wǎng)頁制作與網(wǎng)站設(shè)計(jì)-04Dreamweaver格式設(shè)置、CSS式樣

項(xiàng)目四Dreamweaver格式設(shè)置、CSS式樣

內(nèi)容摘要

介紹了網(wǎng)頁的基本元素文本和圖象介紹了網(wǎng)頁圖象的使用介紹了CSS樣式表的使用方法和技巧學(xué)習(xí)文本的輸入與格式化學(xué)習(xí)圖象的插入與編輯理解和使用網(wǎng)頁的自動(dòng)化功能理解制作規(guī)范、專業(yè)的網(wǎng)頁的方法掌握網(wǎng)頁中頁面屬性的設(shè)置掌握CSS樣式、庫、模板。學(xué)習(xí)目標(biāo)

任務(wù)1：設(shè)置頁面基本屬性

任務(wù)描述

1.任務(wù)說明本任務(wù)將使用“頁面屬性”對(duì)話框，對(duì)DreamweaverCS3中創(chuàng)建的網(wǎng)頁文件的布局和格式等進(jìn)行設(shè)置。網(wǎng)頁建成以后，一般不是立即放置網(wǎng)頁元素，而是先設(shè)置網(wǎng)頁的標(biāo)題、背景圖象或是背景顏色，以及文本圖象的超級(jí)鏈接的顏色等頁面屬性。2.操作步驟在DreamweaverCS3的主窗口中新建一個(gè)網(wǎng)頁文件，并輸入相應(yīng)內(nèi)容如圖4-1所示。按組合鍵Ctrl+J或選擇主菜單中的【修改】一【頁面屬性】命令，打開“頁面屬性”對(duì)話框。在“分類”列表框中選擇“外觀”類別，設(shè)置頁面字體為華文新魏；文本顏色為藍(lán)色；頁面背景文件為“0401.gif”，如圖4-2所示。圖4-1頁面屬性的“外觀”設(shè)置對(duì)話框

圖4-2頁面屬性的設(shè)置“背景圖象”單擊【確定】按鈕，按F12鍵預(yù)覽，如圖4-3帶有背景圖象的效果所示。

如圖所示，在“頁面屬性”對(duì)話框的“分類”列表框中選擇“鏈接”選項(xiàng)，設(shè)置鏈接文字的鏈接色為藍(lán)色既“#0033FF”，變換圖像鏈接為綠色即“#00FF00”，活動(dòng)鏈接為黑色“#000000”，已訪問鏈接的顏色選擇默認(rèn)。如圖所示，在“頁面屬性”對(duì)話框的“分類”列表框中選擇“標(biāo)題”選項(xiàng)，設(shè)置網(wǎng)頁標(biāo)題的字大小、顏色等。在“頁面屬性”對(duì)話框的“分類”列表框中選擇“標(biāo)題／編碼”選項(xiàng)，在“標(biāo)題”文本框中輸入網(wǎng)頁標(biāo)題，編碼選擇簡體中文(GB2312)，如圖所示如圖4-7所示，在“頁面屬性”對(duì)話框的“分類”列表框中選擇“跟蹤圖像”選項(xiàng)。單擊【瀏覽】按鈕，

任務(wù)2：輸入文字

任務(wù)說明

文本是最重要的信息載體與交流工具，是網(wǎng)頁發(fā)布信息所用的主要形式。用文本制作的網(wǎng)頁占用空間小，瀏覽時(shí)，可以很快地展現(xiàn)在用戶面前。文字性網(wǎng)頁還可以利用瀏覽器中“文件”菜單下的“另存為”功能將其下載，便于以后長期閱讀，也可對(duì)其進(jìn)行編輯打印在：DreamweaverCS3中，文字可以直接輸入到頁面上，也可以輸入到表格和層等區(qū)域中。輸入的文字一般分為普通文本和特殊字符兩種。操作步驟

1.建立新網(wǎng)頁：在DreamweaverCS3的主窗口中新建一個(gè)網(wǎng)頁文件，在頁面中需要輸入文字的位置單擊鼠標(biāo)左鍵，出現(xiàn)插入點(diǎn)。

2.輸入文本：選擇適當(dāng)?shù)妮斎敕ㄝ斎胛淖?，網(wǎng)頁中必不可少的信息就是文本，它是網(wǎng)頁傳輸數(shù)據(jù)信息最主要的方式之一。在DreamweaverCS3的文檔窗口中將光標(biāo)移動(dòng)到要添加文本的地方，然后就可以直接在文檔窗口中輸入文本。取消這次操作，快捷鍵是Ctrl+Z。繼續(xù)執(zhí)行剛才的操作，快捷鍵是Ctrl+Y。文本超出了表格的顯示范圍時(shí)會(huì)自動(dòng)換行。3.段落中換行：在一個(gè)段落未結(jié)束，又未到達(dá)窗口的右邊界時(shí)就想換行，或想調(diào)節(jié)行之間的距離，可按下“Shift+Enter”組合鍵。4.段落標(biāo)記：如果需要將一些文本獨(dú)立成一段落，則可按下“Enter”鍵。5.插入多個(gè)空格：在網(wǎng)頁的文字設(shè)定中，經(jīng)常需要加入空格，但在HTMI。中規(guī)定，在文本中輸入多個(gè)空格時(shí)，只顯示一個(gè)空格。如需輸入多個(gè)空格，可以用組合鍵“Ctrl+Shift+空格”來實(shí)現(xiàn)。

6.特殊字符的使用：如果需要輸入特殊字符，可以應(yīng)用插入面板文本類中的字符項(xiàng)目單輸入，如圖所示。7.設(shè)置文本基本屬性：文本屬性設(shè)置是通過屬性面板完成的，如圖所示為文本屬性面板。提示與拓展網(wǎng)頁中的文字不僅可以直接輸入，也可以通過其他文字處理軟件輸入，然后利用Windows剪貼板復(fù)制粘貼到網(wǎng)頁頁面中。輸入文字步驟任務(wù)3：設(shè)置文字格式任務(wù)

任務(wù)說明本任務(wù)中，我們將在屬性面板中對(duì)輸入的文字內(nèi)容進(jìn)行格式設(shè)置，包括字體、字號(hào)、字型等。沒有編排點(diǎn)綴的純文字網(wǎng)頁，會(huì)給人帶來死板的感覺，使得人們不愿意再往下瀏覽。為了克服這一缺點(diǎn)，人們?yōu)榫W(wǎng)頁文本定義了一些屬性，例如，字體、字號(hào)、顏色、底紋和邊框等，通過文本不同的格式，突出顯示重要的內(nèi)容。具體要求1.標(biāo)題一個(gè)網(wǎng)頁通常都有一個(gè)標(biāo)題，表明本網(wǎng)頁的主要內(nèi)容。標(biāo)題是否醒目，是能否吸引瀏覽者的一個(gè)關(guān)鍵，因此標(biāo)題的設(shè)計(jì)是很重要的。2.字號(hào)網(wǎng)頁中的文字不能太大或太小，優(yōu)秀網(wǎng)頁中的文字，應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)，給人以生動(dòng)活潑的感覺。3.字體在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w，也能使網(wǎng)頁產(chǎn)生吸引人的效果。

操作步驟將光標(biāo)定位于需要設(shè)置為標(biāo)題的段落中，在屬性面板中選擇相應(yīng)的標(biāo)題類別。2.選中需要設(shè)置字體的文本，在字體中選擇所需要的字體，如宋體、黑體等。3.選擇需要設(shè)置字號(hào)的文字，在中選擇字號(hào)。4.選擇需要設(shè)置顏色的文字，在顏色下拉列表中，用吸管在彈出的色塊區(qū)域中選擇文字的顏色。5.其它,再選擇設(shè)置粗、斜體，為分段的文字加入項(xiàng)目符號(hào)和編號(hào)。任務(wù)4：插入圖象

任務(wù)說明本任務(wù)中，我們將在網(wǎng)頁中插入圖象，因?yàn)楫?dāng)前各類網(wǎng)站都十分重視美術(shù)設(shè)計(jì)的效果。圖片是美術(shù)設(shè)計(jì)的重要素材，加入了圖片的網(wǎng)頁圖文并茂，更具有感召力和吸引力，因此在網(wǎng)頁中插入圖片是非常重要的。目前流行于網(wǎng)頁的有兩種圖片格式，即GIF格式和JPG格式，這兩種格式的圖片，瀏覽器都可以正確顯示。操作步驟我們把準(zhǔn)備好的圖片文件與制作好的網(wǎng)頁文件放在相同的文件夾里。將文本移到要插入圖片的地方，這里把這個(gè)位置設(shè)定為這段文字的最開頭位置。選擇“插入”菜單中的“圖像”命令或者使用組合鍵Ctrl+Alt+I，在出現(xiàn)的文件選擇對(duì)話框中選擇要插入的圖片。在目錄窗口下方有一行相對(duì)于的“下拉框”，選擇“文檔”為與文檔的相對(duì)路徑。如果選擇的圖像沒有位于本地站點(diǎn)目錄中，則會(huì)出現(xiàn)一個(gè)對(duì)話框，詢問是否將圖像復(fù)制到本地站點(diǎn)目錄。單擊“確定”按鈕將圖像復(fù)制到本地站點(diǎn)目錄。接著又出現(xiàn)一個(gè)對(duì)話框，選擇復(fù)制之后的目錄和文件名，保留原文件名即可。插入圖象后，文檔中出現(xiàn)一幅圖像，如圖4-10所示。在頁面中插入的圖像是以原始大小顯示出來的，可以在屬性面板中調(diào)整其屬性，適應(yīng)用戶的要求。任務(wù)5：建立CSS樣式一個(gè)網(wǎng)站包含的頁面很多，常常需要對(duì)網(wǎng)頁中各種元素的屬性進(jìn)行設(shè)置，在建立網(wǎng)頁時(shí)我們應(yīng)該將在同一個(gè)網(wǎng)站不同的頁面中對(duì)所有的正文字體、字體大小和顏色設(shè)置相同的屬性，例如“搜狐網(wǎng)”站點(diǎn)中“新聞”頁面的下面有很多級(jí)頁面，這些多級(jí)頁面上文字的格式都要一致，如果每個(gè)頁面上的文字格式都要逐頁去設(shè)置，重復(fù)的工作量會(huì)非常大。在DreamweaverCS3中我們可以把某些網(wǎng)頁元素(如文字、表格、超級(jí)鏈接等)的格式保存下來，然后就可以直接應(yīng)用到其他文字等網(wǎng)頁元素上。這種保存下來的格式就叫做樣式。1.CSS樣式面板選擇“窗口”中的“CSS樣式”（或是按Shift+F11組合鍵），打開了“CSS樣式”面板。如圖所示。2."CSS樣式”面板主要按鈕的意義類別視圖按紐：分類顯示屬性如：:字體、背景、區(qū)塊、邊框、方框、列表、定位和擴(kuò)展名等類型。列表視圖按紐：按照字母順序顯示所有屬性。設(shè)置屬性按紐：只顯示已經(jīng)進(jìn)行設(shè)置的屬性。新建CSS規(guī)則按紐：單擊該按鈕，彈出“新建CSS規(guī)則”對(duì)話框。刪除CSS規(guī)則按紐：單擊該按鈕，刪除正在使用的CSS樣式。3.操作步驟新建自定義CSS樣式表選擇“窗口”菜單“CSS樣式”，或選擇“文本”菜單“CSS樣式”“新建”，打開“CSS樣式”面板。單擊面板右下側(cè)的“新建CSS規(guī)則”按鈕，將打開“新建CSS規(guī)則”對(duì)話框，如圖所示。在“選擇器類型”中選擇“類”，在“名稱”中輸入類的名稱如CSS樣式表所示。在“定義在”選項(xiàng)中選擇“僅對(duì)該文檔”，以確定該樣式表為內(nèi)部樣式表。單擊“確定”，將打開出現(xiàn)“CSS規(guī)則定義”對(duì)話框，如圖所示。在“CSS規(guī)則定義”對(duì)話框中，選擇“類型”類別，然后設(shè)置所需的樣式屬性。定義好CSS式樣之后，選中當(dāng)前的文本段落，然后在CSS樣式面板中，選擇已經(jīng)建立好的式樣，右擊彈出菜單，選擇“套用”，或者在“頁面屬性”對(duì)話框中，在“式樣”下拉列表框中選擇建立好的式樣，然后存盤。任務(wù)6：設(shè)置CSS樣式的各項(xiàng)規(guī)則任務(wù)說明當(dāng)我們學(xué)習(xí)CSS樣式的建立后，現(xiàn)在已初步學(xué)會(huì)了建里CSS樣式文件，但是要設(shè)計(jì)出更理想的CSS樣式，還需要進(jìn)一步學(xué)習(xí)CSS樣式的各種屬性設(shè)置。CSS的各種屬性共有8類：類型、背景、區(qū)塊、方快、邊框、列表、定位和擴(kuò)展。下面老師將帶我們進(jìn)入CSS樣式的屬性學(xué)習(xí)，如圖所示。CSS的各種屬性設(shè)置1．類型屬性：主要是對(duì)頁面中內(nèi)容文字進(jìn)行設(shè)置，如設(shè)置文本的字體、大小、顏色、變體、修飾等屬性，設(shè)置完成可以應(yīng)用到文本中。2．背景屬性：主要是對(duì)頁面中背景顏色、背景圖案進(jìn)行設(shè)置。3．區(qū)塊屬性：主要是對(duì)文本進(jìn)行設(shè)置，包括單詞間距、字間距、對(duì)齊、縮進(jìn)等設(shè)置。4．方框?qū)傩裕褐饕菍?duì)頁面元素的樣式進(jìn)行設(shè)置，包括頁面元素的寬、高、浮動(dòng)等。5．邊框?qū)傩裕褐饕窃O(shè)定元素邊框的式樣，包括邊框的樣式、寬度、顏色等。6．列表屬性：主要是設(shè)定所需列表的式樣，包括類型、項(xiàng)目符號(hào)圖象、位置等。7．定位屬性：主要是設(shè)定頁面元素的樣式，包括類型、寬、高、顯示、溢出等。8．?dāng)U展屬性：主要是設(shè)定特殊效果的式樣，包括分頁、光標(biāo)、過濾器等。操作步驟

學(xué)習(xí)“學(xué)校網(wǎng)站”的建立與制作1．在D盤根目錄下建立站點(diǎn)目錄“學(xué)校網(wǎng)站”，并在“學(xué)校網(wǎng)站”目錄下建立images和files兩個(gè)文件夾。2．單擊菜單欄上按紐，輸入站點(diǎn)名“校園網(wǎng)站”，如圖所示。3．單擊菜單欄上按紐，選“新建”空白頁

HTML，然后單擊按鈕，創(chuàng)建新網(wǎng)頁。建立網(wǎng)頁布局4．設(shè)置首頁，利用網(wǎng)頁布局表格和布局單元格，表格居中，如圖所示。插入圖像輸入文字的網(wǎng)站5．在網(wǎng)頁的單元格中分別插入圖象，在相應(yīng)的單元格中輸入文字，如：“網(wǎng)站首頁

|學(xué)校概況

|校園文化

|專業(yè)設(shè)置

|

德育之窗

|

教學(xué)之窗

|招生咨詢

|就業(yè)管理”，如下圖所示。6．建立CSS樣式文件1）選擇

CSS樣式新建，進(jìn)入新建CSS規(guī)則對(duì)話框，設(shè)置屬性：選擇器類型：單選“”；“名稱”：輸入“LX1”；“定義在”單選，單擊按鈕，如圖所示。2）在LX1的CSS規(guī)則定義中，在類型屬性中設(shè)置字體、大小、行高、顏色等選項(xiàng)，單擊按鈕，如圖所示。在HEML文檔中