計算機導(dǎo)論教材課件

1、計 算 機 導(dǎo) 論第第11章章 frontpage 2003應(yīng)用應(yīng)用第十一章第十一章 frontpage 2003frontpage 2003應(yīng)用應(yīng)用q教學(xué)目標(biāo)了解frontpage 2003的基本功能熟練掌握frontpage 2003的應(yīng)用隨著internet的迅速發(fā)展，每個人都擁有自己的個人網(wǎng)站是未來趨勢，在個人網(wǎng)站中，可以全面的展示自己，介紹自己的各個方面，如個人簡歷、興趣愛好、專長等。在眾多的網(wǎng)站制作軟件當(dāng)中，微軟公司出品的frontpage是最容易上手的，即使沒有任何網(wǎng)站開發(fā)基礎(chǔ)的人，通過frontpage也可以設(shè)計出專業(yè)的網(wǎng)站。個人網(wǎng)站的制作個人網(wǎng)站的制作11.1.1 案例說明本

2、案例首先利用frontpage 2003自帶的網(wǎng)站建立向?qū)Ы⒁粋€個人網(wǎng)站，然后給網(wǎng)站首頁添加一個滾動字幕，修改左側(cè)導(dǎo)航欄的樣式，最后修改超鏈接，完善網(wǎng)頁的其他部分。11.1.2 知識點分析在本案例的制作過程中用到的操作主要包括：使用模版創(chuàng)建站點、插入字幕、修改導(dǎo)航欄樣式、編輯超鏈接、字體設(shè)置、添加圖片、表格操作、添加表單、保存等。11.1.3 制作步驟（1）單擊“文件”“新建”，在frontpage 2003的右側(cè)打開“新建網(wǎng)站”任務(wù)窗格。（2）在任務(wù)窗格中點擊“其他網(wǎng)站模版”，會彈出如圖11-3所示的對話框。圖11-3 “網(wǎng)站模版”對話框（3）在彈出的對話框中，選擇“個人網(wǎng)站”模版，然后在

3、窗口右側(cè)的“制定新網(wǎng)站的位置”下拉列表中直接輸入網(wǎng)站所存放的目錄和名稱，或者單擊“瀏覽”按鈕，進(jìn)行目錄的選擇，設(shè)置完成后單擊“確定”按鈕完成網(wǎng)站的創(chuàng)建。 創(chuàng)建完成后會出現(xiàn)如圖11-4所示的個人站點。（4）打開index.htm頁面，在日期和時間組件后面按回車鍵，單擊“插入”“web組件”，在“插入web組件”對話框中選擇“動態(tài)效果”組件類型，選擇“字幕”動態(tài)效果，單擊“完成”按鈕。（5）在彈出的“字幕屬性”對話框中輸入字幕文本，選擇“滾動條”表現(xiàn)方式，單擊“樣式”按鈕。（6）在彈出的“修改樣式”對話框中，單擊“格式”按鈕，在彈出的下拉式菜單中選擇“字體”。在彈出的“字體”對話框中，選擇合適的字

4、體、字形和大小，選擇好后單擊“確定”按鈕。（7）雙擊左邊的導(dǎo)航按鈕，在彈出的“鏈接欄屬性”對話框中選擇“樣式”選項卡，選擇如圖11-8所示的樣式作為鏈接欄的樣式，單擊“確定”按鈕。重復(fù)此步驟，在其他頁面修改導(dǎo)航欄的樣式。（8）修改“我的收藏夾”下面的子項目的名字為一個適當(dāng)?shù)拿?，選中名字單擊右鍵，在彈出式菜單中選擇“超鏈接屬性”，在“編輯超鏈接”對話框中選擇要鏈接到的網(wǎng)頁，如圖11-9所示。重復(fù)此步驟，為其他需要修改文字和超鏈接屬性的地方做修改。（9）打開aboutme.htm頁面，在該頁面中刪除不需要的內(nèi)容，并輸入一段介紹自己的文字，選中文字單擊右鍵，在彈出式菜單中選擇“字體”，在“字體”對

5、話框中選擇合適的字體、字形、大小作為文字的字體屬性設(shè)置。（10）打開photo.htm頁面，雙擊圖片庫組件，在彈出的“圖片庫屬性”對話框中選擇“圖片”選項卡，單擊“添加”按鈕，在彈出式菜單中選擇“圖片來自文件”。（11）在彈出的“打開”對話框中，選擇要加入圖片庫中的圖片文件，選擇好后單擊打開按鈕。（12）回到“圖片庫屬性”對話框，單擊“布局”選項卡，選擇“水平版”布局，單擊“確定”按鈕。為圖片庫組件添加圖片后。（13）打開feedback.htm頁面，把光標(biāo)放在文字“請留下您的聯(lián)系方式：”下面的表格內(nèi)，單擊“表格”“插入”“行或列”，彈出“插入行或列”對話框，選擇“行”單選按鈕，設(shè)置行數(shù)為“1

6、”。在新插入行左側(cè)的單元格中輸入文字，把光標(biāo)放在右側(cè)的單元格中，單擊“插入”“表單”“文本框”，插入一個文本框，調(diào)整好文本框的大小后。（14）保存網(wǎng)站，可以在瀏覽器中瀏覽效果。11.1.4 總結(jié)個人網(wǎng)站是展示自己的一個門戶，學(xué)會用frontpage制作一個簡單實用的個人網(wǎng)站是十分有必要的。網(wǎng)站發(fā)布到互聯(lián)網(wǎng)上，每個人都可以看到，網(wǎng)頁就需要設(shè)計的美觀大方，色彩搭配合理。因此在設(shè)計中需要學(xué)會使用各種對象的插入和編輯，學(xué)會使用模板、背景以及配色方案修飾網(wǎng)頁的外觀。商業(yè)網(wǎng)站的制作商業(yè)網(wǎng)站的制作11.2.1 案例說明本案例選取了某手機銷售公司的商業(yè)網(wǎng)站。11.2.2 知識點分析在頁面的設(shè)計過程中，框架和表

7、格都應(yīng)用得比較多。它們可以構(gòu)建一個框架網(wǎng)頁，將頁面分成幾個相互聯(lián)系著的區(qū)域，便于分開設(shè)計；在框架的內(nèi)容網(wǎng)頁中使用表格來進(jìn)一步規(guī)劃頁面。綜合運用框架和表格布局頁面，能使頁面的組織更加合理有效。11.2.3 制作步驟（1）啟動frontpage 2003，單擊“文件”“新建”，在界面的右側(cè)打開“新建網(wǎng)站”任務(wù)窗格，在任務(wù)窗格中點擊“其他網(wǎng)站模版”。（2）在彈出的“網(wǎng)站模版”對話框中打開“常規(guī)”選項卡，選擇“空白網(wǎng)站”，在右側(cè)的“制定新網(wǎng)站的位置”中指定創(chuàng)建站點要保存的位置，然后單擊“確定”按鈕。（3）單擊“文件”“新建”，在界面右側(cè)彈出的“新建”任務(wù)窗格中選擇“其他網(wǎng)頁模版”。（4）在彈出的“網(wǎng)頁

8、模版”對話框中打開“框架網(wǎng)頁”選項卡，選擇“橫幅和目錄”，然后單擊“確定”按鈕，將該網(wǎng)頁保存為index.htm主頁面。（5）切換到導(dǎo)航視圖，把主頁的名字改為“手機網(wǎng)站”，單擊“新建”按鈕在主頁的下層建立十個空白網(wǎng)頁，并分別輸入網(wǎng)頁名字。（6）單擊“文件”“新建”，在界面右側(cè)彈出的“新建”任務(wù)窗格中選擇“其他網(wǎng)頁模版”。（7）在彈出的“網(wǎng)頁模版”對話框中打開“常規(guī)”選項卡，選擇“目錄”，然后單擊“確定”按鈕，生成目錄如圖11-20所示。保存此目錄為網(wǎng)頁形式。（8）單擊左側(cè)框架中的“設(shè)置初始網(wǎng)頁”按鈕，在彈出的“插入超鏈接”對話框中選擇剛才保存的目錄網(wǎng)頁。（9）在左側(cè)框架中單擊右鍵，在彈出式菜單

9、中選擇“網(wǎng)頁屬性”，單擊“格式”選項卡，勾選“背景圖片”復(fù)選框，單擊“瀏覽”按鈕，選擇一幅合適的圖片作為網(wǎng)頁背景，單擊“確定”按鈕設(shè)置左側(cè)框架的背景圖片。仿照此步驟，根據(jù)需要在右側(cè)框架中設(shè)置好一個頁面，接著再選一幅圖片作為頁面的背景，設(shè)置好后的效果如圖11-22所示。（10）在左側(cè)框架中單擊右鍵，在彈出式菜單中選擇“框架屬性”，在顯示滾動條后的單選列表中選擇“不顯示”。（11）把光標(biāo)放在右側(cè)框架，單擊“表格”“插入”“表格”，在“插入表格”對話框修改行數(shù)為“11”，列數(shù)為“3”，對齊方式為“居中”，單元格間距為“11”，同時也修改了亮邊框和暗邊框的顏色。（12）把光標(biāo)放在第一個單元格，單擊“插

10、入”“圖片”“來自文件”，選擇一幅手機圖片，選擇好后單擊“確定”按鈕。（13）接著在第一個單元格內(nèi)輸入手機的說明文字，設(shè)置字體的大小和顏色。（14）雙擊圖片，彈出“圖片屬性”對話框，在“圖片屬性”對話框中選擇環(huán)繞樣式為“左”，單擊“確定”按鈕。設(shè)置好圖片的環(huán)繞方式后，調(diào)整圖片的大小。（15）仿照上述步驟，在表格中的其他單元格中插入圖片，輸入文字，設(shè)置文字的大小和顏色，最后設(shè)置文字的環(huán)繞樣式為“左”。（16）把光標(biāo)放在表格的任一單元格內(nèi)，單擊“表格”“插入”“標(biāo)題”，為表格加上標(biāo)題，選中標(biāo)題后，設(shè)置標(biāo)題的字體、大小和顏色。（17）在上框架中單擊右鍵，在彈出式菜單中選擇“網(wǎng)頁屬性”，在“網(wǎng)頁屬性”

11、對話框中打開“高級”選項卡，把上邊距和左邊距都修改為“0”，單擊“確定”按鈕。（18）把光標(biāo)放在上邊框中，單擊“表格”“插入”“表格”，在“插入表格”對話框修改行數(shù)為“1”，列數(shù)為“11”，選定亮邊框和暗邊框的顏色，勾選“折疊表格邊框”。（19）把光標(biāo)放在第一個單元格里，單擊“插入”“圖片”“來自文件”，在彈出的“圖片”對話框里選擇一幅圖像，選擇好后單擊“確定”按鈕。在第一個單元格中插入圖片后，調(diào)整圖片的大小。（20）仿照上述步驟，在表格的其他單元格內(nèi)插入圖片。（21）保存文件，即可以在瀏覽器中瀏覽效果。11.2.4 總結(jié)要設(shè)計好一個優(yōu)秀的商業(yè)網(wǎng)站，布局是關(guān)鍵，因此掌握好框架和表格的布局方法是

12、十分重要的。平時在瀏覽網(wǎng)頁的同時，要多去分析這些網(wǎng)頁的布局特點，積累經(jīng)驗，才能真正設(shè)計出讓客戶滿意的要求。信息采集網(wǎng)站的制作信息采集網(wǎng)站的制作11.3.1 案例說明本案例采用自定義表單的形式創(chuàng)建一個表單網(wǎng)頁。11.3.2 知識點分析如果對frontpage 2003自帶的模版或向?qū)Р粷M意而想創(chuàng)建具有個人風(fēng)格的表單時，可以通過信件一個空白的頁面，在頁面內(nèi)按自己的需要添加表單域元素形成表單。11.3.3 制作步驟（1）新建一個空白網(wǎng)頁，輸入表單的標(biāo)題“個人信息采集”，并將文字設(shè)置加粗。（2）將光標(biāo)放置在標(biāo)題的下一行，單擊“插入”“表單”“表單”，在頁面中出現(xiàn)一個表單邊框，在表單邊框中有“提交”和“

13、重置”按鈕。（3）將光標(biāo)置于“提交”按鈕之前，插入一個8行2列的表格，設(shè)置表格邊框粗細(xì)為1。（4）在表格的第一列中輸入相應(yīng)的文字提示，如“姓名：”、“性別：”、“生日：”、“學(xué)歷：”、“興趣：”、“聯(lián)系電話：”、“電子郵箱：”、“郵編地址：”等。（5）在表單對應(yīng)位置“姓名：”后單擊“插入”“表單”“文本框”，插入“文本框”，重復(fù)此步驟，在表單對應(yīng)位置“聯(lián)系電話：”、“電子郵箱：”、“郵編地址：”的后面插入“文本框”。（6）在表單對應(yīng)位置“性別：”后單擊“插入”“表單”“選擇按鈕”，插入“選擇按鈕”。（7）在表單對應(yīng)位置“興趣：”后單擊“插入”“表單”“復(fù)選框”，插入“復(fù)選框”。（8）在表單對應(yīng)位置“學(xué)歷：”后單擊“插入”“表單”“下拉框”，插入“下拉框”。用鼠標(biāo)雙擊插入的下拉框，彈出“下拉框?qū)傩浴睂υ捒?，在“名稱”文本框中輸入此下拉框的名稱。（9）單擊“添加”按鈕，彈出“添加選項”對話框。在“選項”文本框中輸入選項的名稱，在“初始狀態(tài)”中設(shè)置是否選定，然后單擊“確定”按鈕，返回到“下拉框?qū)傩浴睂υ捒蛑?。添加好所有選項后，在“下拉框?qū)傩浴睂υ捒蛑袉螕簟按_定”按鈕即可；同理可以設(shè)置表單中的“生日”。（10）雙擊“提交”按鈕，彈出“按鈕屬性”