Dreamweaver MX網(wǎng)頁設(shè)計(jì)與制作課件：綜合應(yīng)用實(shí)例(一)

綜合應(yīng)用實(shí)例(一)

●了解網(wǎng)頁的設(shè)計(jì)需要考慮因素●熟悉各種網(wǎng)頁元素的搭配使用●各種主流商務(wù)網(wǎng)頁的制作方法●一些網(wǎng)頁設(shè)計(jì)技巧本章學(xué)習(xí)知識(shí)點(diǎn)6.1個(gè)人主頁：逍遙居本章內(nèi)容目錄6.2電腦軟件下載首頁：軟件屋6.3星相學(xué)網(wǎng)站首頁：星座物語6.4商務(wù)網(wǎng)站首頁：網(wǎng)上商城6.5旅游站點(diǎn)首頁：旅行家6.6電腦硬件資訊首頁：電腦硬件6.7總結(jié)提高6.8本章習(xí)題6.1.1基本概念6.1個(gè)人主頁：逍遙居

設(shè)想自己建立一個(gè)主頁，可以在里面留言、貼照片、看電視、交朋友，這樣悠閑的網(wǎng)絡(luò)時(shí)空，不是能給你帶來很多的樂趣嗎？制作一個(gè)絢麗的個(gè)人主頁，也為今后工作就業(yè)提供比別人更多的網(wǎng)上出現(xiàn)的機(jī)會(huì)。l

層技術(shù)的綜合利用l

定義網(wǎng)頁關(guān)鍵字l

添加網(wǎng)頁隨機(jī)播放音樂l

制作鼠標(biāo)跟隨文字有顏色的IE滾動(dòng)條

6.1.2上機(jī)操作設(shè)置網(wǎng)頁的背景屬性。將光標(biāo)置于網(wǎng)頁的編輯窗口內(nèi)并單擊鼠標(biāo)右鍵，選擇右鍵菜單中最下面的一個(gè)【頁面屬性】選項(xiàng)。彈出的窗口如圖所示，設(shè)置背景顏色為“#FFFFD0”，并設(shè)置訪問過的鏈接顏色為“#800000”

精確地添加層，設(shè)置層的角點(diǎn)位置來定位層，并且依次在層中插入圖像個(gè)人主頁中的功能單元區(qū)分好，并以表格為基本框架，將其整齊排放為網(wǎng)頁中比較大的圖像文件設(shè)置預(yù)先載入圖像行為

為個(gè)人主頁添加關(guān)鍵字。定義一個(gè)關(guān)鍵字，讓搜索引擎搜索到自己的個(gè)人主頁。首先打開【插入】快捷欄中的【文件頭】選項(xiàng)卡，單擊選擇里面的【關(guān)鍵字】按鈕。在彈出的【關(guān)鍵字】對(duì)話框中填入網(wǎng)頁的關(guān)鍵字，關(guān)鍵字之間用逗號(hào)隔開

在網(wǎng)頁中添加音樂背景安裝制作鼠標(biāo)跟隨效果的插件，并對(duì)其進(jìn)行簡(jiǎn)單設(shè)置6.2.1基本概念6.2電腦軟件下載首頁：軟件屋

電腦軟件下載的首頁和個(gè)人主頁不一樣，后者體現(xiàn)的是網(wǎng)頁制作者與眾不同的風(fēng)格，更突出網(wǎng)頁自己的個(gè)性。而電腦軟件下載主頁的瀏覽者多半是為了尋求幫助，解決問題而來。相對(duì)來說，這樣的瀏覽者更需要的是簡(jiǎn)潔的網(wǎng)頁界面，還有明確的導(dǎo)引分類和搜索功能。l

表格的綜合利用表單工具的插入

6.2.2上機(jī)操作使用平面２維圖像，制作三維的鏈接效果將下載軟件類型進(jìn)行分區(qū)之后，分類插入到表格中設(shè)置對(duì)應(yīng)的鏈接，即軟件下載地址6.3.1基本概念6.3星相學(xué)網(wǎng)站首頁：星座物語

使用CSS來新建一個(gè)美麗的星相學(xué)網(wǎng)頁，里面包羅了形象學(xué)研究的新動(dòng)態(tài)，以及關(guān)于星座運(yùn)勢(shì)的一些猜測(cè)，并綜合之前學(xué)過的表格插入等技術(shù)。制作一個(gè)更為相信的星座介紹網(wǎng)站。6.3.2上機(jī)操作制作星座主頁的導(dǎo)航條選擇附加CSS樣式，裝飾主頁制作星座介紹的表格應(yīng)用CSS樣式，制作表格6.4.1基本概念6.4商務(wù)網(wǎng)站首頁：網(wǎng)上商城

電子商務(wù)現(xiàn)在在中國(guó)正如火如荼地發(fā)展著，原來習(xí)慣去商場(chǎng)購物的白領(lǐng)人士，現(xiàn)在更熱衷于在網(wǎng)上通過訂購和網(wǎng)上銀行進(jìn)行支付。這個(gè)生活方式的改變現(xiàn)在雖然還不是很徹底，還有很多人不習(xí)慣用電腦，但是可以看到，隨著由電腦伴隨著長(zhǎng)大的這一代人的興起，電子商務(wù)，網(wǎng)上購物會(huì)更加深入人心。本例就指導(dǎo)大家制作一個(gè)電子商務(wù)的網(wǎng)站首頁。

6.4.2上機(jī)操作制作標(biāo)簽式導(dǎo)航欄CSS樣式的應(yīng)用：選擇菜單欄中的【窗口】|【CSS樣式】選項(xiàng)，打開【CSS樣式】的浮動(dòng)面板。單擊面板右下角的【附加樣式表】按鈕。添加菜單和按鈕依靠JavaScript代碼添加網(wǎng)頁的活動(dòng)背景6.5.1

基本概念

6.5旅游站點(diǎn)首頁：旅行家

插入一些FLASH資源，可以讓靜態(tài)的網(wǎng)頁更有活力。在旅行網(wǎng)的制作中，最重要的就是給瀏覽者提供一種對(duì)美景向往的感覺，如果網(wǎng)頁制作的還是純靜態(tài)圖像和文字就不能吸引瀏覽者了。當(dāng)然，也不要插入過多的動(dòng)態(tài)效果，這樣會(huì)適得其反，讓瀏覽者感到反感。l

插入FLASH制作活動(dòng)幻燈片

6.5.2

上機(jī)操作

網(wǎng)頁的規(guī)劃。首先需要明確制作旅行網(wǎng)頁的目的。

插入FLASH動(dòng)畫使用不同的顏色來區(qū)分不同的欄目插入一個(gè)導(dǎo)游跳轉(zhuǎn)菜單，介紹各地旅游景點(diǎn)利用時(shí)間軸工具，制作旅游景點(diǎn)幻燈片6.6.1基本概念電腦硬件門戶制作得好，可以很好的提升品牌形象，并且?guī)椭碌漠a(chǎn)品推開市場(chǎng)之門。好的硬件資訊網(wǎng)頁可以提供給瀏覽者最新的電腦資訊，同時(shí)也提供在線的服務(wù)。電腦硬件的資訊平臺(tái)很多，這里選擇聯(lián)想電腦的網(wǎng)站制作示范電腦硬件網(wǎng)站的制作方法。插入FLASH文件表格的綜合排版6.6電腦硬件資訊首頁：電腦硬件

6.6.2上機(jī)操作搭好框架，插入FLASH將光標(biāo)置于表格“附表1”的第2個(gè)單元格中，同樣的給第2個(gè)單元格設(shè)定一個(gè)背景圖像，單擊單元格【屬性】面板中【背景】文本框后的按鈕，選擇圖片“1b”。

單元格內(nèi)設(shè)置背景插入表格，區(qū)分網(wǎng)頁中各個(gè)功能區(qū)域使用CSS樣式完成局部的修飾插入廣告一些制作慣例：底部留聯(lián)系方式……6.7總結(jié)提高本章的前主要介紹了靜態(tài)網(wǎng)頁的制作，通過制作靜態(tài)網(wǎng)頁的學(xué)習(xí)，讀者可以制作出花樣翻新的網(wǎng)頁布局形式，網(wǎng)頁中主要用到的表格、框架和層對(duì)象在這些內(nèi)容中都使用到了。在制作過程中，穿插著講述了一些制作技巧，以及經(jīng)常在Internet網(wǎng)頁上出現(xiàn)的新奇網(wǎng)頁制作效果。讀者通過學(xué)習(xí)這些技巧，也可以應(yīng)用到其它形式的網(wǎng)頁上，美化和增加網(wǎng)頁的趣味性。

6.8本章習(xí)題1．在Dreamweaver中，插入換行符的快捷鍵是___________________。2．文本列表有_________________和_________________兩種形式。3．CSS樣式選擇器類型有_________________、_________________和_________________三種形式。4．文本屬性欄打開方式有_________________。A．按組合鍵【Ctrl】＋【F3】B．執(zhí)行【窗口】|【屬性】命令C．單擊主窗口狀態(tài)欄上文本屬性欄快速啟動(dòng)按鈕D．右擊網(wǎng)頁的空白區(qū)域，在彈出的屬性欄快速啟動(dòng)按鈕5．如果在【頁面屬性】對(duì)話框中同時(shí)設(shè)置背景圖片和背景顏色，則在瀏覽網(wǎng)頁時(shí)該網(wǎng)頁會(huì)顯示_________________。A．背景圖片 B．背景顏色C．都不顯示 D．背景圖片和背景顏色

6．“回車”換行和“換行符”換行有什么區(qū)別？7．在Dreamweaver中設(shè)置連接的路徑包括：_______________、_______________、_______________。8．通過_______________的方式可以使各個(gè)網(wǎng)頁之間聯(lián)系起來，是網(wǎng)站中眾多的頁面構(gòu)成一個(gè)整體，使訪問者能夠在各個(gè)頁面之間進(jìn)行跳轉(zhuǎn)。9．超連接是由兩個(gè)部分組成的，一部分是在瀏覽網(wǎng)頁時(shí)看到的部分，稱為_______________，另一部分是超鏈接所鏈接的_______________。10．創(chuàng)建超鏈接可以鏈接到不同的目標(biāo)，在網(wǎng)頁中創(chuàng)建超鏈接的目標(biāo)有：_______________、_______________、_______________、_______________等。11．假設(shè)文檔index.htm所在的文件夾有子文件夾music，music文件夾內(nèi)有文件class.htm，若要在index.htm總成交到class.htm的超鏈接應(yīng)使用相對(duì)路徑是______________。A．class.htm B．../class.htmC．../class.htm D．music/class.htm12．將超鏈接目標(biāo)文件載入到該鏈接所在的同一個(gè)框架或者窗口中，鏈接的“目標(biāo)”屬性應(yīng)該設(shè)置成：___________。A．_blank B．_selfC．_parent D．_top13．一個(gè)導(dǎo)航條元素可以有的狀態(tài)圖像有：___________。A．狀態(tài)圖像 B．鼠標(biāo)經(jīng)過圖像C．按下圖像 D．按下時(shí)鼠標(biāo)經(jīng)過圖像E．翻轉(zhuǎn)圖像16．表單對(duì)象包括：_________________________________。17．安實(shí)現(xiàn)的功能劃分，按鈕分為___________、___________、___________三種。18．表單是否可以嵌套？