使用框架布局網(wǎng)頁

1、.6.使用框架布局網(wǎng)頁<一>一帶著以下問題完成第二題的練習(xí)題:1.框架有什么作用？ 2.用框架布局主頁跟用表格來布局主頁各有什么優(yōu)勢，其區(qū)別在哪？3.怎樣使用框架布局網(wǎng)頁?二練習(xí)：<一>創(chuàng)建左側(cè)固定的框架網(wǎng)頁（必做）要求：先新建立站點(diǎn)，將“練習(xí)一”文件夾復(fù)制粘貼到自己的“學(xué)號+姓名”文件夾中，然后按如下的步驟完成制作：1.“文件”>“新建”，在“類別”下面選擇“框架集”，然后在右邊的“框架集”中選擇“左側(cè)固定”，最后點(diǎn)擊“創(chuàng)建”。2.執(zhí)行“文件>保存全部”，留意整個框架邊框所出現(xiàn)有陰影框，分別以文件名“index.html”、“right.html”、“l(fā)e

2、ft.html”保存。3.將左右兩側(cè)的框架的“左邊距”、“上邊距”都設(shè)置為0（方法：先將光標(biāo)放到對應(yīng)的框架中，然后在“屬性”面板下面單擊“頁面屬性”。4.左側(cè)框架頁面的設(shè)置：(1)將光標(biāo)置于左側(cè)的框架中，插入一個4行1列的表格，表格寬度為257像素。(2)在剛才創(chuàng)建的表格的第1行中插入圖像“1010_01.gif”；第2行中插入“1010_05.gif”;第3行中插入“ny_19.gif”5.右側(cè)框架頁面的設(shè)置：(1)將光標(biāo)置于右側(cè)的框架中，插入一個4行1列的表格，表格寬度為550像素。(2) 在剛才創(chuàng)建的表格的第1行中插入圖像“banner.jpg”；第2行中插入“jianjie.jpg”;

3、(3)將光標(biāo)置于第3行中輸入文本“您現(xiàn)在的位置:首頁>>公司簡介”，然后在“屬性”面板中設(shè)置“大小”為12像素，“高”為30。(4)在這個表格的第4行中插入一個1行1列，表格寬度為550像素的表格。將這個表格“居中對齊”。然后將下面的這段文字復(fù)制到這個表格中，并將字體的大小設(shè)置為12像素。“本廠專業(yè)從事電吹風(fēng)、剃絨器等小家電的設(shè)計(jì)及制造，企業(yè)遵循“與世界潮流同行”的目標(biāo)，不斷創(chuàng)新、科學(xué)的管理、完整的檢測設(shè)備、及多年的生產(chǎn)經(jīng)驗(yàn)使得每款電吹風(fēng)都具有一流的品質(zhì)。特別是工業(yè)用電吹風(fēng)，采用電機(jī)使用壽命長，適用于各種塑封、縮封、整燙、吹干等。產(chǎn)品以其滿意的售后服務(wù)和優(yōu)良的企業(yè)信譽(yù)深受國內(nèi)外消費(fèi)

4、者的好評和贊譽(yù)。本企業(yè)的產(chǎn)品均己通過國家強(qiáng)制性產(chǎn)品認(rèn)證及CE認(rèn)證，本廠產(chǎn)品造形新穎、款式繁多、質(zhì)優(yōu)價廉，滿足各層次的消費(fèi)需求。我們熱忱歡迎中外客商和新老朋友洽談業(yè)務(wù)，共同發(fā)展，共創(chuàng)輝煌！”(5)將光標(biāo)置于剛才復(fù)制的文本中，插入圖像“12.gif”，設(shè)置圖片的“對齊”為“右對齊”；“垂直邊距”和“水平邊距”都為5制作完畢后，執(zhí)行“文件>保存全部”做完后思考：1. 保存框架網(wǎng)頁時跟保存表格布局的網(wǎng)頁時有什么不同？2.這種左側(cè)固定的框架網(wǎng)頁，其右邊非固定的子網(wǎng)頁處什么情況下會出現(xiàn)橫向的滾動條？<二>創(chuàng)建上方固定左側(cè)嵌套的框架頁面：（選做）要求：將“練習(xí)二”文件夾復(fù)粘貼到自己的“學(xué)號

5、+姓名”文件夾中，然后按如下的步驟完成制作：1.“文件>新建”，在“常規(guī)”選項(xiàng)卡的“類別”處選擇“框架集”，選中“上方固定，左側(cè)嵌套”選項(xiàng),然后單擊“創(chuàng)建”。2.“文件>保存全部”，分別以“index.html”、“right.html”、“l(fā)eft.html”、“top.html”保存這些框架。上方框架頁的設(shè)置：3.將光標(biāo)定位在上方的框架中，在“屬性”面板中，點(diǎn)擊“頁面屬性”，設(shè)置“左邊距”、“上邊距”都為04. 將光標(biāo)定位在上方的框架中，插入一個1行2列的表格，“高”設(shè)置為216像素，“寬”設(shè)置為778像素。并且“居中對齊”。5.在剛才插入的表格的第1列中插入圖像“01.jpg

6、” 6. 將剛才插入的表格的第2列進(jìn)行拆分單元格，將此單元格拆分為2行。7.設(shè)置拆分后的第1行單元格的“背景”為圖像“03.jpg”，將“高”設(shè)置為185像素。然后再在此插入圖像“top.jpg”。注意：這時插入的圖片不能完全顯示，需要適應(yīng)調(diào)整框架的高度。7.將光標(biāo)置于插分后的第2行單元格，設(shè)置其“背景顏色”為EEEEEE，然后在此插入1行6列的表格，“表格的寬度”為80%，并且“右對齊”。再在這個表格的1至6列中分別輸入如下的文字：“首頁”、“產(chǎn)品展示”、“新聞中心”、“投資者關(guān)系”、“科研人才”、“聯(lián)系我們”上方的框架頁面設(shè)置后的效果如下圖所示：左側(cè)框架頁的設(shè)置：1.將光標(biāo)置于左側(cè)框架中，

7、改變“頁面屬性”，設(shè)置“左邊距”、“上邊距”都為02.插入一個6行2列的表格，“表格寬度”為165像素，然后將“填充”設(shè)置為5，調(diào)整左側(cè)框架的寬度，使其與表格寬度適中。3.在剛才插入的表格的第1行第1列中，插入圖像“over.gif”。在第2行第2列中輸入“公司簡介”，字體的“大小”設(shè)置為16像素，“文本顏色”設(shè)置為#FF6600，并加粗。4.分別在第2至6行的第1列中插入“image_10.gif”圖像，然后輸入如下圖所示的文本：右側(cè)框架頁的設(shè)置：1. 將光標(biāo)置于右側(cè)框架中，改變“頁面屬性”，設(shè)置“左邊距”、“上邊距”都為02.插入一個2行1列的表格，“表格寬度”為590像素，將光標(biāo)置于這個

8、表格的第1行中，將“高”設(shè)置為35，輸入文本“您現(xiàn)在的位置>>公司簡介”，字體的“大小”設(shè)置為16像素，“文本顏色”為#0876B33.將光標(biāo)置于剛才插入的表格的第2行單元格中，將如下的一段文字復(fù)制到這個單元格中，并取消文字的加粗效果?！八帢I(yè)股份有限公司始創(chuàng)于1956年，位于中國東南沿海的港口城市。目前已成為中國領(lǐng)先的原料藥生產(chǎn)企業(yè)。共有約3000名員工，其中超過三分之一是科技人員。2000年，在上海證券交易所上市。作為中國最大的抗生素、抗腫瘤藥物生產(chǎn)基地之一，致力于利用自己的研發(fā)資源，為全球客戶提供更好的服務(wù)。2001年，建立了國內(nèi)一流的研發(fā)中心，為同類科研機(jī)構(gòu)樹立了行業(yè)標(biāo)準(zhǔn)。該中心擁有專職研究人員150名， 設(shè)有50多個單元實(shí)驗(yàn)室。研發(fā)領(lǐng)域涵蓋化學(xué)合成、微生物發(fā)酵、生物技術(shù)、天然植物提取及制劑開發(fā)等多個方面， 產(chǎn)品治療領(lǐng)域涉及抗腫瘤、心血管系統(tǒng)、抗感染、抗寄生蟲、內(nèi)分泌調(diào)節(jié)、免疫抑制、抗抑郁等。”新建CSS樣式，樣式名稱為“.text”，“僅對該文檔”；然后在“類型