網(wǎng)站與網(wǎng)頁設(shè)計(jì)

用FrontPage作網(wǎng)頁視圖欄

視圖切換按鈕

工作區(qū)

創(chuàng)建站點(diǎn)執(zhí)行“文件”/“新建”下的“站點(diǎn)”命令。在“站點(diǎn)”列表中，選擇要用來創(chuàng)建新站點(diǎn)的模板或向?qū)?。在“指定新網(wǎng)站的位置”框中，鍵入或選擇新站點(diǎn)的名稱。

創(chuàng)建文件夾

在站點(diǎn)中創(chuàng)建一個(gè)文件夾可以組織網(wǎng)頁和文件。例如：創(chuàng)建一個(gè)“Multimedia”文件夾來存放聲音、視頻等對象文件。選擇現(xiàn)有的一個(gè)文件夾。右擊鼠標(biāo)，在快捷菜單中選擇“新建文件夾”。鍵入新文件夾的名稱，單擊“確定”按鈕。設(shè)置文本格式設(shè)置文本字體和顏色設(shè)置文本粗體、斜體和加下劃線在文本周圍加邊框：在網(wǎng)頁視圖模式下，選擇要添加邊框的段落。在“格式”菜單中，單擊“邊框陰影”。在“設(shè)置”下，單擊“方框”或“自定義”。給文本設(shè)置底紋刪除文本格式：在網(wǎng)頁視圖模式下，選擇文本。在“格式”菜單中，單擊“刪除格式”。設(shè)置行距和段落間距

在網(wǎng)頁視圖模式下，選擇一個(gè)或多個(gè)段落，右擊鼠標(biāo)，然后選擇快捷菜單中的“段落”。在“段落間距”下，作如下操作：若要設(shè)置每個(gè)段落之上的間距，在“段前”框中輸入一個(gè)值。若要設(shè)置每個(gè)段落之下的間距，在“段后”框中輸入一個(gè)值。若要設(shè)置行間的垂直間距，單擊“行距大小”框中的選項(xiàng)。設(shè)置行和段落的縮進(jìn)

在網(wǎng)頁視圖模式下，選擇一個(gè)或多個(gè)段落，右擊鼠標(biāo)，然后選擇快捷菜單中的“段落”。在“縮進(jìn)”下，作如下操作：要縮進(jìn)段落的左邊，請?jiān)凇拔谋局啊笨蛑休斎氚鯏?shù)。要縮進(jìn)段落的右邊，請?jiān)凇拔谋局蟆笨蛑休斎氚鯏?shù)。要縮進(jìn)段落中文本的第一行，在“首行縮進(jìn)”框中輸入磅數(shù)。創(chuàng)建超級鏈接-URL含義當(dāng)創(chuàng)建一個(gè)超鏈接時(shí)，它的目的端將被編碼為URL（統(tǒng)一資源定位符），例如http:///news.htm

或file://ComputerName/SharedFolder/FileName.htm

。URL包含了站點(diǎn)服務(wù)器或者網(wǎng)絡(luò)位置、路徑和文件名稱。

超鏈接可以是絕對的或相對的：一個(gè)絕對的URL包含完整的地址。一個(gè)相對的URL將缺少一個(gè)或更多部份。缺少的信息將由包含URL的網(wǎng)頁提供。創(chuàng)建超鏈接

在網(wǎng)頁視圖模式下，選中用作超鏈接的文本或圖片，右擊鼠標(biāo)，在快捷菜單中選擇“超鏈接”命令。單擊，“制作一個(gè)指向您計(jì)算機(jī)上文件的超鏈接”。單擊,創(chuàng)建電子郵件鏈接創(chuàng)建指向一個(gè)書簽的超鏈接

書簽是網(wǎng)頁中被標(biāo)記的位置或被標(biāo)記的選中文本。當(dāng)要向站點(diǎn)訪問者顯示網(wǎng)頁的特定部份時(shí)，可以創(chuàng)建一個(gè)指向書簽的超鏈接。在包含書簽的網(wǎng)頁的適當(dāng)位置，鍵入并選中要將其用作超鏈接的文本或圖片。單擊工具欄中的“超鏈接”按鈕。在“書簽”框上，單擊要將其作為目的端的書簽。設(shè)置超鏈接顏色

超鏈接

—即未被選中的超鏈接。當(dāng)前超鏈接

—即當(dāng)前被選中的超鏈接。已訪問過的超鏈接—即已經(jīng)被瀏覽過的超鏈接。在網(wǎng)頁視圖模式下，右擊網(wǎng)頁，再選擇快捷菜單中的“網(wǎng)頁屬性”，然后單擊“背景”選項(xiàng)卡。在“超鏈接”、“已訪問過的超鏈接”以及“當(dāng)前超鏈接”框中，選擇想要的顏色。插入圖片在網(wǎng)頁視圖模式下，將插入點(diǎn)放置到要插入圖片的位置。執(zhí)行“插入”菜單下的“插入圖片”命令。單擊“來自文件”。從本地文件系統(tǒng)瀏覽您想要的圖片并且選擇該文件。您可以在“文件類型”框中指定要查看的文件類型。用同樣的方法插入“剪貼畫”。編輯圖片裁減圖片：在“圖片”工具欄單擊“剪裁”工具旋轉(zhuǎn)圖片：在“圖片”工具欄單擊“向左旋轉(zhuǎn)”，可逆時(shí)針翻轉(zhuǎn)圖片90度；單擊“向右旋轉(zhuǎn)”，可順時(shí)針翻轉(zhuǎn)圖片90度翻轉(zhuǎn)圖片：在“圖片”工具欄單擊“水平翻轉(zhuǎn)”，創(chuàng)建一個(gè)鏡射；單擊“垂直翻轉(zhuǎn)”將圖片向上向下翻轉(zhuǎn)圖片顏色沖蝕：在“圖片”工具欄，單擊“沖蝕”按鈕在圖片上放置文本：在“圖片”工具欄，單擊“文本”

工具，在顯示框中鍵入文本添加凸凹效果：在”圖片”工具欄，單擊“凹凸效果”設(shè)置圖片的對齊方式和間距

在網(wǎng)頁視圖模式下，在圖片上右擊鼠標(biāo)，選擇快捷菜單上的“圖片屬性”，然后單擊“外觀”選項(xiàng)卡。在“對齊方式”框中，單擊某選項(xiàng)來指定圖形在網(wǎng)頁上的對齊方式。例如∶要使圖片對齊網(wǎng)頁左邊，而文本接在右邊，可單擊“左對齊”。在“水平間距”框中，輸入的間距值顯示在在圖片的左邊和右邊。在“垂直間距”框中，輸入間距值顯示在圖片的上邊和下邊。設(shè)置圖片的邊框?qū)傩?/p>

在網(wǎng)頁視圖模式下，在圖片上右擊，選擇快捷菜單上的“圖片屬性”，然后單擊“外觀”選項(xiàng)卡。在“邊框粗細(xì)”框中，以像素為單位設(shè)置邊框的寬度（要?jiǎng)h除邊框，可鍵入0）。調(diào)整圖片的大小

在網(wǎng)頁視圖模式下，在圖片上右擊鼠標(biāo)，選擇快捷菜單上的“圖片屬性”，然后單擊“外觀”選項(xiàng)卡。選擇“指定大小”復(fù)選框。若要保持高度與寬度的比例，可選擇“保持縱橫比”復(fù)選框。指定是否要更改大?。ㄏ袼刂祷虬俜直龋?，然后在“寬度”和“高度”框中輸入數(shù)值。

設(shè)置背景圖片

在網(wǎng)頁視圖模式下，右擊網(wǎng)頁，在快捷菜單中選擇“網(wǎng)頁屬性”。單擊“背景”選項(xiàng)卡。選擇“背景圖片”復(fù)選框，然后單擊“瀏覽”。選擇背景圖片：選中“水印”，實(shí)現(xiàn)背景不動(dòng)，文字滾動(dòng)保存嵌入式圖片單擊“插入/高級”菜單下的“插件”命令在“插件屬性”對話框中單擊“數(shù)據(jù)源”文本框右邊的“瀏覽”按鈕，選擇音頻文件。設(shè)置瀏覽時(shí)插件的大小選中時(shí)，插件看不到在網(wǎng)頁中插入Flash動(dòng)畫單擊“插入/高級”菜單下的“ActiveX控件”命令。若彈出菜單中無所需要的控件，單擊“自定義”，添加“ShockwaveFlashObject”選中網(wǎng)頁中的空白區(qū)域，設(shè)置“ActiveX控件屬性”表格的用途將信息通過表格格式顯示在網(wǎng)頁上布置文本和圖形等元素，實(shí)現(xiàn)網(wǎng)頁布局旅館每晚的住宿費(fèi)率

房間淡季

(一到四月)旺季

(五到十二月)單人房100110單人套房120130雙人房160175雙人套房180195表格創(chuàng)建表格選擇“插入/表格”中的命令單擊常用工具欄上的“表格”按鈕表格編輯將插入點(diǎn)放置在表格中的任意位置，在快捷菜單中選擇“表格屬性”單元格編輯將插入點(diǎn)放置在表格中的任意位置，在快捷菜單中選擇“單元格屬性”隱藏表格邊框

在網(wǎng)頁視圖模式下，右擊表格，選擇快捷菜單中的“表格屬性”。在“邊框”下的“粗細(xì)”框中，鍵入0。在表格中插入表格

在網(wǎng)頁視圖模式下，將光標(biāo)移至要插入表格的單元格中。單擊“插入表格”命令。拆分和合并單元格在網(wǎng)頁視圖模式下，選擇要拆分的單元格。右擊鼠標(biāo)，然后選擇快捷菜單中的“拆分單元格”。單擊“拆分為列”或“拆分為行”。在“列數(shù)”或“行數(shù)”域中，鍵入您所要拆分成的列數(shù)或行數(shù)。合并單元格與此類似設(shè)置單元格跨越

在網(wǎng)頁視圖模式下，選擇想設(shè)置單元格跨越的單元格、行或列。右擊，選擇快捷菜單中的“單元格屬性”。在“行跨距”框中，鍵入要增加的單元格行數(shù)。在“列跨距”框中，鍵入要增加的單元格列數(shù)。刪除表格元素

要完成刪除操作在網(wǎng)頁視圖模式下，完成下列操作表格選中要?jiǎng)h除的表格，然后按DELETE鍵。單元格選中要?jiǎng)h除的單元格，單擊鼠標(biāo)右鍵，然后單擊快捷菜單中的“刪除單元格”。行選中要?jiǎng)h除的行，單擊鼠標(biāo)右鍵，然后單擊快捷菜單中的“刪除單元格”。列選中要?jiǎng)h除的列，單擊鼠標(biāo)右鍵，然后單擊快捷菜單中的“刪除單元格”。表格標(biāo)題選中要?jiǎng)h除的標(biāo)題，然后按DELETE鍵。框架

框架是一種特別HTML網(wǎng)頁，它可將瀏覽器視窗分為不同的框架，而每一個(gè)框架可顯示一不同網(wǎng)頁。創(chuàng)建一框架網(wǎng)頁

在“文件”菜單上，指向“新建”，單擊“網(wǎng)頁”，然后單擊“框架網(wǎng)頁”選項(xiàng)卡。單擊框架網(wǎng)頁模板。創(chuàng)建超鏈接以在其他框架頁顯示

在網(wǎng)頁視圖模式下，打開框架網(wǎng)頁，單擊“普通”選項(xiàng)卡，然后單擊欲創(chuàng)建超鏈接的網(wǎng)頁。鍵入或選擇超鏈接所需之文本或圖片，然后單擊“超鏈接”。在“創(chuàng)建超鏈接”對話框內(nèi)，選擇要在其他框架顯示的網(wǎng)頁和目標(biāo)框架。保存框架網(wǎng)頁

將欲保存的框架網(wǎng)頁顯示在網(wǎng)頁視圖模式下，然后單擊“普通”選項(xiàng)卡。單擊文件菜單的“保存文件”命令。在“另存為”對話框中會(huì)出現(xiàn)框架網(wǎng)頁布局的縮略圖。所保存的部份會(huì)以深蘭色框來突出顯示。若突出顯示的是框架網(wǎng)頁的全部外框，則保存的是框架網(wǎng)頁本身。若突出顯示的是單個(gè)框架，則保存的是框架所顯示的網(wǎng)頁。在“文件名”框中，為框架本身或框架所顯示的網(wǎng)頁鍵入或選擇一文件名稱重命名框架

框架網(wǎng)頁上的每一框架都有一個(gè)特別的名稱，用來在框架間指定瀏覽。在網(wǎng)頁視圖模式下，打開欲修改的框架網(wǎng)頁，單擊“普通”選項(xiàng)卡。在欲重命名的框架上的任一處單擊右鍵，在快捷菜單上選擇“框架屬性”。在“名稱”框內(nèi)，鍵入框架的新名稱。顯示或隱藏框架框線

在網(wǎng)頁視圖模式下，打開欲修改的框架網(wǎng)頁，然后單擊“普通”選項(xiàng)卡。在“文件”菜單上，單擊“屬性”，然后單擊“框架”選項(xiàng)卡：欲顯示框架間的框線，選取“顯示邊框”復(fù)選框，然后在“框架間距”框內(nèi)，鍵入邊框的寬度像素。欲隱藏框架間框線，清除“顯示邊框”復(fù)選框。重置框架大小

在框架內(nèi)單擊鼠標(biāo)右鍵，單擊“框架屬性”，然后調(diào)整位于“框架大小”區(qū)域內(nèi)的“列寬”和“高度”選項(xiàng)。CSS（級聯(lián)樣式表）簡介CSS是一系列格式規(guī)則，用于控制網(wǎng)頁內(nèi)容的外觀。CSS可以完成如下工作：彌補(bǔ)HTML對網(wǎng)頁格式化功能的不足，如段落間距、行距等設(shè)置字體變化與大小設(shè)置頁面格式的動(dòng)態(tài)更新進(jìn)行排版定位創(chuàng)建網(wǎng)頁樣式

在網(wǎng)頁視圖模式下，選定“普通”選項(xiàng)卡。在“格式”菜單上，執(zhí)行擊“樣式”命令。單擊“新建”，然后在“名稱(選擇器)”框里，鍵入新樣式名稱。單擊“格式”，指定新樣式格式特征：單擊“字體”－設(shè)置字體屬性（例如字體、顏色、字符間距，請）單擊“段落”－設(shè)置對齊方式，縮進(jìn)或段落間距單擊“邊框”－設(shè)置邊框和底紋。單擊“編號方式”－設(shè)置項(xiàng)目符號的樣式和編號單擊“定位”－設(shè)置定位屬性（例如環(huán)繞方式、位置或z-順序）應(yīng)用樣式到網(wǎng)頁元素

樣式包含格式設(shè)置信息，例如特定字體、背景顏色、或邊框樣式等等，可應(yīng)用到網(wǎng)頁上的幾乎所有元素，包括文本、段落、圖片和表格。在“樣式”框中，會(huì)列出標(biāo)準(zhǔn)HTML樣式，例如標(biāo)題1，以及為網(wǎng)頁創(chuàng)建的CSS樣式。選擇網(wǎng)頁元素，然后在“樣式”框中，單擊要應(yīng)用的樣式。刪除網(wǎng)頁樣式

在網(wǎng)頁視圖模式下，選擇“普通”選項(xiàng)卡。在“格式”菜單上，單擊“樣式”命令。在“列表”框里，選擇“用戶定義的樣式”。單擊“樣式”框中欲刪除的自定義樣式，單擊“刪除”按鈕。使用FTP發(fā)布站點(diǎn)

在“文件”菜單中，單擊“發(fā)布站點(diǎn)”。