第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第1頁
第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第2頁
第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第3頁
第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第4頁
第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第5頁
已閱讀5頁，還剩100頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

計(jì)算機(jī)應(yīng)用基礎(chǔ)網(wǎng)址：00主講人:

ComputerBaseSeriesCourse第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)第6章網(wǎng)頁設(shè)計(jì)基礎(chǔ)

本章的主要內(nèi)容：6.1網(wǎng)頁設(shè)計(jì)的基本概念6.2Dreamweaver工具的使用6.3站點(diǎn)的發(fā)布與管理6.1網(wǎng)頁設(shè)計(jì)的基本概念6.1.1網(wǎng)頁與HTML網(wǎng)站（WebSite）是各種各樣網(wǎng)頁的集合有的網(wǎng)站內(nèi)容眾多，如新浪、搜狐等門戶網(wǎng)站；有個(gè)網(wǎng)站只有幾個(gè)頁面，如個(gè)人網(wǎng)站。在構(gòu)成網(wǎng)站的眾多網(wǎng)頁中，有一個(gè)頁面比較特殊，稱為首頁（HomePage）。例如，當(dāng)瀏覽者輸入搜狐網(wǎng)站地址“”后出現(xiàn)在第一個(gè)頁面，即sohu網(wǎng)站的首頁。瀏覽者可以根據(jù)首頁的導(dǎo)航進(jìn)入其他頁面，了解更多內(nèi)容。網(wǎng)頁（WebPage）實(shí)際上是一個(gè)文件網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識(shí)別與存取。當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或單擊某個(gè)鏈接，在瀏覽器中顯示出來的就是一個(gè)網(wǎng)頁。網(wǎng)頁中主要組成元素1.網(wǎng)頁與網(wǎng)頁文件網(wǎng)頁是WWW網(wǎng)站提供服務(wù)的主要形式，是通過瀏覽器在WWW上所看到的每一個(gè)畫面。HTML（HypertextMarkupLanguage）是一種超文本標(biāo)記語言，用來描述萬維網(wǎng)上的超文本文件。所謂“超文本”，是指頁面內(nèi)可以包含圖像、鏈接、多媒體對象、程序等非文本元素。所謂“標(biāo)記”，是指它不是程序語言，而是由文字和標(biāo)簽組合而成。HTML文件是純文本文件，可以由任意文本編輯器編寫，文件的擴(kuò)展名為“html”。一個(gè)網(wǎng)頁就是一個(gè)HTML文件。（1）HTML的結(jié)構(gòu)與常用標(biāo)簽HTML文件主要分為文檔頭和文檔體兩部分，一般使用三對標(biāo)簽：<HTML>

<HEAD>頭部信息

</HEAD>

<BODY>文檔主體，正文部分

</BODY></HTML><HTML>

</HTML>在最外層，表示是HTML文檔<HEAD>

</HEAD>之間包括文檔的頭部信息，如<title></title>文檔總標(biāo)題等<BODY>

</BODY>標(biāo)記正文內(nèi)容的開始應(yīng)注意標(biāo)簽的配對使用HTML文檔中標(biāo)簽的用法<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>HTML文檔開始HTML文檔中標(biāo)簽的用法<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>首部開始HTML文檔中標(biāo)簽的用法

<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>標(biāo)題HTML文檔中標(biāo)簽的用法

<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>首部結(jié)束HTML文檔中標(biāo)簽的用法

<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>主體開始HTML文檔中標(biāo)簽的用法

<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>1

級(jí)標(biāo)題<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>HTML文檔中標(biāo)簽的用法

第一個(gè)段落<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>HTML文檔中標(biāo)簽的用法

第二個(gè)段落HTML文檔中標(biāo)簽的用法

<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>主體結(jié)束HTML文檔中標(biāo)簽的用法

<HTML><HEAD>

<TITLE>一個(gè)HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>這是第一個(gè)段落。雖然很短，但它仍是一個(gè)段落。</P><P>這是第二個(gè)段落。</P></BODY></HTML>HTML文檔結(jié)束(2)HTML文件的編寫與保存記事本文件的擴(kuò)展名改為“.html”或“.htm”網(wǎng)頁制作工具的代碼視圖3.

網(wǎng)頁制作工具Dreamweaver:可視化網(wǎng)頁制作工具FrontPage:表單式網(wǎng)頁制作工具AdobePagemile:框架、表單和ImageMap圖像的網(wǎng)頁制作工具ClarisHomePage:動(dòng)態(tài)網(wǎng)頁快速制作工具還有：簡單的文檔編輯工具：Windows下的記事本、DOS下的Editor編輯器IBMWebsphere集成開發(fā)環(huán)境中的Web應(yīng)用工具……6.1.2網(wǎng)頁設(shè)計(jì)的流程1.前期策劃2.創(chuàng)建站點(diǎn)3.創(chuàng)建主頁和其他網(wǎng)頁4.網(wǎng)頁設(shè)計(jì)的版面布局5.添加網(wǎng)頁基本元素(1)文本(2)特殊字符(3)圖像(4)動(dòng)畫、音視頻……6.創(chuàng)建網(wǎng)頁超級(jí)鏈接7.利用表單增加交互布局草圖21網(wǎng)頁布局實(shí)例1

“廠”字型結(jié)構(gòu)的特點(diǎn)是內(nèi)容清晰，一目了然。網(wǎng)頁最頂端是徽標(biāo)和圖片（廣告）欄，下半部分的左邊是導(dǎo)航鏈接，右邊是信息發(fā)布區(qū)。這種結(jié)構(gòu)非常常見。22網(wǎng)頁布局實(shí)例2

“同”字型結(jié)構(gòu)的特點(diǎn)是超鏈接多、信息量大。網(wǎng)站的頂端是徽標(biāo)和圖片（廣告）欄，下部分分為三列，或者更多。兩邊的兩列區(qū)域比較小，一般是導(dǎo)航超鏈接和小型圖片廣告等，中間是網(wǎng)站的主要內(nèi)容，最下面是網(wǎng)站的版權(quán)信息等。23網(wǎng)頁布局實(shí)例3

標(biāo)題正文型結(jié)構(gòu)的頂端是網(wǎng)站標(biāo)識(shí)和標(biāo)題，下面是網(wǎng)頁正文。內(nèi)容非常簡單。24網(wǎng)頁布局實(shí)例4

分欄型結(jié)構(gòu)，這種結(jié)構(gòu)一般分為左右（或上下）兩欄，也有的分為多欄。一般將導(dǎo)航鏈接與正文放在不同的欄中。這樣打開新的網(wǎng)頁，導(dǎo)航鏈接欄的內(nèi)容不會(huì)發(fā)生變化。25網(wǎng)頁布局實(shí)例5

Flash型結(jié)構(gòu)采用Flash技術(shù)來完成，其視覺效果和聽覺效果與傳統(tǒng)網(wǎng)頁不同，往往能夠給瀏覽者以極大的沖擊。這種網(wǎng)頁逐漸被年輕人所喜愛。26網(wǎng)頁布局實(shí)例6

封面型結(jié)構(gòu)，往往首先看到的是一幅圖片或動(dòng)畫，在圖片或動(dòng)畫的下面有一個(gè)進(jìn)入下一級(jí)網(wǎng)頁的超鏈接提示文字。其中圖片或動(dòng)畫可以用Flash來制作，與Flash型不同，這種結(jié)構(gòu)并不是在Flash中完成的，而是在網(wǎng)頁制作軟件中完成的。網(wǎng)頁設(shè)計(jì)原則(1)網(wǎng)頁布局的原則：主次分明、中心突出大小搭配、相互呼應(yīng)圖文并茂、相得益彰(2)網(wǎng)頁布局的技術(shù)表格布局框架布局層疊樣式表讓各種元素和諧、美觀地呈現(xiàn)要考慮到用戶下載的時(shí)間遵循對比、統(tǒng)一、平衡、節(jié)奏的原則6.2Dreamweaver工具的使用DreamweaverCS4AdobeDreamweaverCS4是一種可視化網(wǎng)頁制作工具（“所見即所得”），它也是目前最常用的網(wǎng)頁制作工具之一。Dreamweaver對于DHTML(動(dòng)態(tài)網(wǎng)頁)的支持非常好，可以制作出許多精彩的互動(dòng)頁面特效。新網(wǎng)頁三劍客是指Dreamweaver、Flash和Photoshop。6.2.1Dreamweaver的界面

菜單欄面板組文檔窗口文檔工具欄標(biāo)簽選擇器屬性面板“應(yīng)用程序”工具欄

“插入”工具欄共有8個(gè)選項(xiàng)卡，在網(wǎng)頁編輯的過程中，可通過單擊面板上的按鈕來為網(wǎng)頁添加相應(yīng)的元素。

“插入”工具欄有兩個(gè)顯示模式，即工具欄模式和面板模式。(1)插入工具欄面板模式（2）“文檔”工具欄代碼視圖（html、JavaScript手工編碼）設(shè)計(jì)視圖（所見即所得）拆分視圖布局、擴(kuò)展和站點(diǎn)等網(wǎng)頁制作中常用命令（3）“應(yīng)用程序”工具欄3.文檔編輯區(qū)主要工作區(qū)域4.“屬性”面板編輯查看各對象的屬性5.面板組快速完成相關(guān)命令6.2.2

站點(diǎn)的新建與管理

在Dreamweaver中，“站點(diǎn)”是一個(gè)文件夾，用于存放網(wǎng)站的所有圖像、多媒體、網(wǎng)頁等文件。站點(diǎn)的結(jié)構(gòu)本地文件夾遠(yuǎn)程文件夾測試服務(wù)器文件夾2.站點(diǎn)的建立-方式1

在Dreamweaver工作窗口中，執(zhí)行“站點(diǎn)”/“新建站點(diǎn)”菜單命令，打開“未命名站點(diǎn)1的站點(diǎn)定義為”對話框，選用“高級(jí)”標(biāo)簽。1.輸入新站點(diǎn)的名稱2.本地根文件夾單擊“瀏覽”按鈕，選擇站點(diǎn)位置（或：直接輸入路徑，注意路徑的正確表達(dá)方式）3.選擇“啟用緩存”4.按“確定”按鈕5.在“文件”面板中看到該站點(diǎn)的文件（綠色）2.站點(diǎn)的建立-方式1利用文件面板1.選擇“管理站點(diǎn)”2.選擇“新建”2.站點(diǎn)的建立-方式23.站點(diǎn)的管理（1）

打開“管理站點(diǎn)”對話框（2）

切換站點(diǎn)選擇站點(diǎn)(3)編輯站點(diǎn)定義站點(diǎn)修改站點(diǎn)信息(4)復(fù)制站點(diǎn)(5)刪除站點(diǎn)僅刪除定義的站點(diǎn)，該文件夾依然存在硬盤(6)導(dǎo)入或?qū)С稣军c(diǎn)站點(diǎn)定義文件，.ste(7)站點(diǎn)的查看方式6.2.3網(wǎng)頁元素的添加與處理在網(wǎng)站中添加網(wǎng)頁選擇“文件”/“新建”命令，打開“新建文檔”對話框選擇“空白頁”/“HTML”，單擊“創(chuàng)建”，就建立了一個(gè)名為“untitled-1.htm”的網(wǎng)頁（可直接給網(wǎng)頁重命名）。用同樣的方法可以建立多個(gè)網(wǎng)頁。網(wǎng)頁的若干問題網(wǎng)頁中內(nèi)容的導(dǎo)入文件\導(dǎo)入（在打開的網(wǎng)頁中直接導(dǎo)入word或excel等文檔，可省略復(fù)制的動(dòng)作）站點(diǎn)中素材的復(fù)制（“導(dǎo)入”——不恰當(dāng)?shù)奶岱ǎ拔募泵姘宓木庉嬁旖莶藛卫肳indows的資源管理器網(wǎng)頁的打開和保存（網(wǎng)站的保存？）打開：文件”/“打開”命令直接在“文件”面板中選擇相應(yīng)文件保存：“文件”/“保存”或“另存為”命令Dreamweaver保存網(wǎng)頁文件的擴(kuò)展名默認(rèn)為html注意：一般而言，網(wǎng)頁應(yīng)保存在網(wǎng)站中，不能隨意保存在任何位置或獨(dú)個(gè)保存在桌面上。網(wǎng)站中的路徑、文件名不能使用中文，否則影響發(fā)布。網(wǎng)頁文件名與網(wǎng)頁標(biāo)題具有不同的含義網(wǎng)頁的若干問題1.網(wǎng)頁頁面屬性的設(shè)置“屬性”\“頁面屬性”，可對網(wǎng)頁的標(biāo)題、背景圖像、背景顏色、文本顏色、鏈接顏色、頁邊距等外觀進(jìn)行整體控制。（1）輸入文本和空格空格半角狀態(tài)，只能輸入一個(gè)空格編輯\首選參數(shù)\常規(guī)，允許多個(gè)連續(xù)的空格按<Ctrl>+<Shift>+<SpaceBar>組合鍵，可多個(gè)連續(xù)的空格全角狀態(tài)，可連續(xù)輸入空格換行回車（硬回車）新段落，行距大Shift+enter（軟回車）本段落，行距小2.文本操作p323（3）文本屬性設(shè)置文本的格式、粗體、斜體、項(xiàng)目列表、編號(hào)列表、文本縮進(jìn)、文本超鏈接等設(shè)置。添加中文字體：注意：Dreamweaver提供的默認(rèn)字體中沒有中文字體，所以在設(shè)置字體之前，應(yīng)該先將中文字體添加到“屬性面板”字體下拉列表框中。2.文本操作1.“屬性面板”\“字體”\“編輯字體列表”

,

2.選擇“可用字體”欄中的中文字體，“選定”；字體出現(xiàn)在“選擇的字體”欄中，“確定”，字體被加入。

3.回到“屬性面板”選擇已添加的字體。（4）添加特殊字符執(zhí)行“插入/HTML/特殊字符”菜單命令2.文本操作(5)添加日期和水平線p324插入\日期（格式）插入水平線插入\HTML\水平線“HTML”插入工具欄的“水平線”按鈕利用“屬性”面板和“標(biāo)簽”面板“屬性”選項(xiàng)卡設(shè)置水平線的有關(guān)屬性標(biāo)簽檢查器/屬性/瀏覽器特定的，在瀏覽器才能觀看水平線的顏色效果2.文本操作（6）設(shè)置列表編號(hào)列表：項(xiàng)目列表：

2.文本操作用屬性面板中對應(yīng)的按鈕編號(hào)列表項(xiàng)目列表列表屬性設(shè)置：單擊“屬性”面板中的“列表項(xiàng)目”或者執(zhí)行“格式/列表/屬性”菜單命令，打開“列表屬性”對話框進(jìn)行設(shè)置。列表項(xiàng)目不相鄰的段落如何添加編號(hào)列表？段落的格式應(yīng)用菜單或HTML屬性面板來設(shè)置：縮進(jìn)突出段落格式：標(biāo)題1、標(biāo)題2……對齊列表2.文本操作字體的格式選擇文本，CSS屬性面板，默認(rèn)字體，加粗，傾斜若選擇其他字體，則要新建CSS樣式2.文本操作3.圖像操作新建一個(gè)CSS規(guī)則編輯字體列表定義CSS規(guī)則類型背景區(qū)塊方框邊框列表定位擴(kuò)展3.圖像操作

因特網(wǎng)上應(yīng)用最廣泛的圖片格式有兩種：GIF文件和JPEG文件。JPG/JPEGGIF色彩真彩色16色、256色特殊功能無透明背景、動(dòng)畫壓縮是否有損失有損壓縮無損壓縮適合情景顏色豐富，有連續(xù)的色調(diào)，一般表現(xiàn)真實(shí)的事物顏色有限，主要以漫畫圖案或線條為主。一般表現(xiàn)建筑結(jié)構(gòu)圖或手繪圖。方法1：光標(biāo)定位插入圖像的位置，選擇“插入/圖像”命令，打開“選擇圖像源文件”對話框。方法2：使用“文件”面板，選擇圖像文件，直接拖曳到網(wǎng)頁中。（1）插入圖像輸入替換文本（2）圖像的屬性設(shè)置選擇插入的圖像，在“屬性”面板中進(jìn)行設(shè)置?？稍O(shè)置圖像的超鏈接熱點(diǎn)工具沿圖像的邊添加邊距設(shè)置圖像邊框的寬度（3）插入鼠標(biāo)經(jīng)過圖像“鼠標(biāo)經(jīng)過圖像”是指在瀏覽器中，當(dāng)鼠標(biāo)指針移動(dòng)到圖像上時(shí)，圖像隨即變成另外一幅圖像，當(dāng)鼠標(biāo)指針移開時(shí)，又恢復(fù)到第一幅圖像。執(zhí)行“插入/圖像對象/鼠標(biāo)經(jīng)過圖像”菜單命令?？芍苯虞斎氤溄拥刂?.CSS樣式p327CSS（CascadingStyleSheet）稱為“層疊樣式表”，簡稱樣式表。CSS是一組格式設(shè)置規(guī)則，用于控制頁面元素的外觀。對于設(shè)計(jì)者來說它是一個(gè)非常靈活的工具，不必再把繁雜的格式定義編寫在文檔結(jié)構(gòu)中，可以將所有關(guān)于文檔的格式和內(nèi)容分離，減少工作量。CSS在當(dāng)前的網(wǎng)頁設(shè)計(jì)中已經(jīng)成為不可缺少的技術(shù)。例：建立CSS規(guī)則“.a1”單擊文本屬性面板上的按鈕，在“目標(biāo)規(guī)則”下拉列表中選擇“<新CSS規(guī)則>”，單擊按鈕，出現(xiàn)“新建CSS規(guī)則”對話框CSS的定義：p328名稱以“.”開頭單擊“確定”新CSS樣式選擇器類型選擇器名稱規(guī)則定義定義文本為宋體、大小18、加粗、顏色#F00、下劃線進(jìn)入“.a1的CSS規(guī)則定義”對話框CSS的應(yīng)用：CSS規(guī)則定義后，可以應(yīng)用到網(wǎng)頁的任何文本內(nèi)容。方法如下：選擇需要應(yīng)用的文本，單擊屬性面板上的按鈕，在“類”的下拉列表中選擇“.a1”規(guī)則，此時(shí)可以看到所選文字采用了“.a1”定義的格式。CSS的編輯、刪除和應(yīng)用編輯選擇CSS面板，選擇某一樣式，即對該樣式編輯刪除（不應(yīng)用）選擇文本，“刪除類”（樣式依然存在，僅該文本不引用此樣式）應(yīng)用選擇HTML面板選擇文本，選擇類中的樣式名使用格式菜單，對Css樣式的靈活運(yùn)用新建或編輯不選擇任何文本，運(yùn)用“格式”菜單的“css樣式”，新建或編輯樣式應(yīng)用選擇文本，運(yùn)用“格式”菜單的“css樣式”中的某一樣式，即應(yīng)用樣式刪除（不應(yīng)用）選擇文本，運(yùn)用“格式”菜單的“css樣式”中的“無”，即刪除樣式5.多媒體操作（1）插入Flash動(dòng)畫執(zhí)行“插入/媒體/SWF”菜單命令，打開“選擇文件”對話框swf文件是Flash預(yù)先制作好的。Flash屬性背景透明背景顏色循環(huán)播放……5.多媒體操作（2）添加音頻執(zhí)行“插入/媒體/插件”菜單命令，在“選擇文件”對話框中選擇聲音文件。插入后，在文檔窗口顯示如下圖1；在瀏覽網(wǎng)頁時(shí)（允許阻止的內(nèi)容），可看到如下圖2所示的播放按鈕。圖1圖2打開圖1的快捷菜單，選擇“編輯標(biāo)簽”命令，在打開的“標(biāo)簽編輯器”中設(shè)置音頻的屬性。音頻的屬性利用插件,可控制播放背景音樂，則隱藏插件插件的屬性循環(huán)播放、隱藏與顯示、……標(biāo)簽檢查器音頻的屬性5.多媒體操作（3）添加視頻執(zhí)行“插入/媒體/FLV…”菜單命令，屏幕顯示“插入FLV”對話框，可單擊“瀏覽”按鈕選擇“FLV”文件。文檔中顯示如下，在瀏覽器中可以預(yù)覽視頻的播放效果。6.2.4網(wǎng)頁中的超鏈接

超鏈接允許我們從自己的頁面出發(fā)，直接指向因特網(wǎng)上存在的任何一個(gè)對象?？梢允橇硪粋€(gè)網(wǎng)頁，可以是同一網(wǎng)頁的不同位置，還可以是一幅圖像、一個(gè)文件。

按照鏈接的范圍，超鏈接可以分為內(nèi)部超鏈接、外部超鏈接、錨點(diǎn)超鏈接和路徑鏈接。內(nèi)部超鏈接是指打開的超鏈接對象在本網(wǎng)站中；外部超鏈接是指打開的超鏈接對象在其它網(wǎng)站中；錨記超鏈接可以鏈接到同一網(wǎng)頁中的不同位置，也就是書簽；外部超鏈接可鏈接到本地或網(wǎng)絡(luò)上的文件夾或文件名。按照建立超鏈接的對象不同，可以分為文本超鏈接和圖像超鏈接、Email超鏈接等。1.文本鏈接

我們在瀏覽網(wǎng)頁的時(shí)候，常常會(huì)看到一些藍(lán)色帶下劃線的文字，將鼠標(biāo)指針移動(dòng)到這些文字上時(shí)，鼠標(biāo)指針變成手形，單擊鼠標(biāo)會(huì)打開另一個(gè)網(wǎng)頁。這個(gè)鏈接就是一個(gè)文本超鏈接。

方法一：選取建立超鏈接的文本，執(zhí)行“插入/超鏈級(jí)接”菜單命令，顯示如下“超級(jí)鏈接”對話框單擊“瀏覽”按鈕選擇連接目標(biāo)選擇網(wǎng)頁打開的目標(biāo)窗口＿Blank：在一個(gè)新的瀏覽器窗口中打開＿parent：在父框架中打開＿self:在網(wǎng)頁所在的窗口或框架中打開，此為默認(rèn)選項(xiàng)＿top：在瀏覽器窗口打開方法二：也可以利用“屬性”面板建立文本超級(jí)連接

選取建立超鏈接的文本，單擊“屬性”面板中的“瀏覽文件”按鈕，打開“選擇文件”對話框，在“選擇文件”對話框中，選擇網(wǎng)頁文件，單擊“確認(rèn)”，完成操作。方法三：選取建立超鏈接的文本，使用“指向文件”按鈕，拖曳鼠標(biāo)到“文件”面板中的鏈接文件也可以方便地建立超鏈接。選擇目標(biāo)窗口指向文件“瀏覽文件”按鈕2.圖像和圖像熱區(qū)鏈接利用熱點(diǎn)區(qū)域的設(shè)置，完成同一張圖像中不同部位鏈接到不同的對象?？梢栽趫D像上指定某個(gè)區(qū)域建立超級(jí)連接。方法是先繪制熱點(diǎn)區(qū)域，再為該區(qū)域建立鏈接。

利用圖像的“屬性”面板進(jìn)行“熱點(diǎn)”的設(shè)置。（1）圖像鏈接

創(chuàng)建圖像超級(jí)鏈接的方法與建立文本超鏈接相似，即先選中圖片，然后進(jìn)行超級(jí)鏈接設(shè)置。（2）圖像熱區(qū)鏈接熱點(diǎn)工具熱點(diǎn)區(qū)域選擇一個(gè)熱點(diǎn)工具繪制熱點(diǎn)區(qū)域提供鏈接文件3.錨記（書簽）鏈接網(wǎng)頁內(nèi)容長度超過屏幕可容納的范圍時(shí),如果不使用滾動(dòng)條，只能看到其中的一部分，可以在適當(dāng)位置插入一個(gè)“錨記”，利用錨記鏈接功能，可創(chuàng)建跳轉(zhuǎn)到頁面指定位置的鏈接。（1）定義錨記鼠標(biāo)定位在需要插入錨記的位置，執(zhí)行“插入/命名錨記”菜單命令，在“命名錨記”對話框中輸入錨記的名稱，單擊“確定”，在該位置上顯示一個(gè)標(biāo)記。選取要?jiǎng)?chuàng)建鏈接的對象，在“屬性面板”的“鏈接”框中輸入錨記名，這就完成了一個(gè)錨記超鏈接。預(yù)覽網(wǎng)頁時(shí)，點(diǎn)擊該超級(jí)連接會(huì)跳轉(zhuǎn)到標(biāo)記所在的位置。（2）建立錨記鏈接輸入：“#錨記名”4.

Email鏈接

建立Email超鏈接后，瀏覽者只需單擊該超鏈接，就可以打開電子郵件編寫軟件，并且自動(dòng)輸入電子郵件地址，非常方便。

選取要?jiǎng)?chuàng)建鏈接的文本，執(zhí)行“插入/電子郵件鏈接”菜單命令，打開“電子郵件鏈接”對話框，在E-mail框中輸入電子郵件地址，單擊“確定”按鈕。（1）利用菜單命令建立Email鏈接選取要?jiǎng)?chuàng)建鏈接的文本后，直接在“屬性面板”的“鏈接”框中輸入：“mailto:電子郵件地址

”，也可以達(dá)到同樣的效果。（2）利用屬性面板建立Email鏈接輸入“mailto:Email地址”

除了可以將主頁上的對象與網(wǎng)站中的網(wǎng)頁鏈接起來以外，還可以與網(wǎng)站外的文件相連，甚至可以是因特網(wǎng)上的網(wǎng)站。選取建立超鏈接的文本或者圖像，在“屬性”面板的“鏈接”框中直接輸入外部鏈接地址即可，如：5.外部鏈接輸入:http://www.…………外部鏈接地址6.2.5網(wǎng)頁的布局

網(wǎng)頁的布局是決定網(wǎng)站美觀與否的一個(gè)重要方面，通過合理的、有創(chuàng)意的布局，可以把文字、圖像等內(nèi)容完美地展現(xiàn)在瀏覽者面前。網(wǎng)頁布局有很多方法，最基本的方法是利用表格和利用框架。1.利用表格布局網(wǎng)頁表格在網(wǎng)頁布局中的使用比較多，可以說表格是網(wǎng)頁制作中重要的一個(gè)技巧，表格的引入使網(wǎng)頁變得整齊和美觀。用表格布局的網(wǎng)頁（1）表格的創(chuàng)建

在網(wǎng)頁中確定光標(biāo)的位置，執(zhí)行“插入/表格”菜單命令，顯示“表格”對話框。表格寬度單位可以是像素或百分比。按像素定義的表格大小是固定的，而按百分比定義的表格，顯示的寬度是瀏覽器寬度的百分比。邊框粗細(xì)指表格線的寬度，當(dāng)瀏覽器不顯示出表格線時(shí)，將邊框粗細(xì)設(shè)置為0。單元格邊距（填充）指單元格內(nèi)容與單元格邊框線的距離。單元格間距確定相鄰的單元格之間的距離。2.表格的基本操作（2）表格的屬性設(shè)置創(chuàng)建表格后，可以在“屬性”面板中對表格進(jìn)行屬性設(shè)置，可以改變創(chuàng)建時(shí)的參數(shù)。設(shè)置表格的對齊方式（3）表格的編輯選擇“修改/表格”菜單命令，可以對表格的行、列、單元格等進(jìn)行編輯。例如：插入行插入列合并單元格拆分單元格……（4）單元格的屬性設(shè)置單元格是表格的最基本單位，單元格的屬性在“屬性”面板中進(jìn)行設(shè)置。單元格內(nèi)容的對齊方式單元格中的內(nèi)容粗體并居中防止換行單元格的寬度和高度3.框架的創(chuàng)建及使用如果將一個(gè)頁面拓展為多個(gè)頁面，則可以利用框架和框架集來實(shí)現(xiàn)。框架集把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域定義為一個(gè)框架，在此框架中可以顯示不同的網(wǎng)頁，從而實(shí)現(xiàn)在同一頁面中顯示多個(gè)網(wǎng)頁文檔的內(nèi)容。用框架布局的網(wǎng)頁（1）創(chuàng)建和保存框架執(zhí)行“插入/HTML/框架”菜單命令，選擇一種框架集。例如：選擇框架“對齊上緣”后，建立了一個(gè)框架集。光標(biāo)置于某一框架，選擇菜單“文件/在框架中打開”命令，則把事先制作好的網(wǎng)頁指定到該對應(yīng)的框架中。

選擇框架集外框，執(zhí)行“文件/保存框架頁”菜單命令，完成框架集的保存。上框架TopFeame框架分割線主框架MainFeame（2）設(shè)置超級(jí)連接（3）框架面板選擇菜單“窗口/框架”命令，可以打開框架面板。利用框架面板可以靈活地選取某個(gè)框架，從而對該框架進(jìn)行屬性設(shè)置。框架網(wǎng)頁中超級(jí)連接的設(shè)置同普通網(wǎng)頁超級(jí)連接的設(shè)置方法類似。在保存文件時(shí)，執(zhí)行“文件/保存全部”菜單命令。（4）框架與框架集屬性設(shè)置框架的屬性分框架屬性和框架集屬性兩部分?？蚣軐傩钥蚣芗瘜傩?.2.6表單的使用p340

一個(gè)網(wǎng)站不僅需要各種供瀏覽者瀏覽的內(nèi)容，而且還需要與瀏覽者進(jìn)行交互的表單，例如：留言簿、會(huì)員申請表、問卷調(diào)查表等，都是通過表單來實(shí)現(xiàn)的。瀏覽者在表單對象中輸入或選擇相關(guān)的信息，然后提交到站點(diǎn)服務(wù)器，而服務(wù)器通過相應(yīng)程序來進(jìn)行處理，最后服務(wù)器作出回應(yīng)并將信息發(fā)送回瀏覽者，從而達(dá)到了人站交流的目的。1.表單及表單屬性（1）表單

在網(wǎng)頁中添加表單對象，必須先創(chuàng)建表單（或稱表單域），可通過單擊“插入”面板的“表單”選項(xiàng)卡來插入。

單擊“表單”標(biāo)簽，可以發(fā)現(xiàn)在網(wǎng)頁中出現(xiàn)一個(gè)紅色的虛線框，框中的區(qū)域稱為表單域。此后所有的表單元素（例如：文本字段、文本區(qū)域、文件域等等）都要插入到這個(gè)紅色虛線框中，這樣所有的信息將一起得到處理。表單中需提交的內(nèi)容都必須在同

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論