DreamweaverCS6 HTML CSS DIV JavaScript網(wǎng)站開發(fā)框架與浮動(dòng)框架_第1頁
DreamweaverCS6 HTML CSS DIV JavaScript網(wǎng)站開發(fā)框架與浮動(dòng)框架_第2頁
DreamweaverCS6 HTML CSS DIV JavaScript網(wǎng)站開發(fā)框架與浮動(dòng)框架_第3頁
DreamweaverCS6 HTML CSS DIV JavaScript網(wǎng)站開發(fā)框架與浮動(dòng)框架_第4頁
DreamweaverCS6 HTML CSS DIV JavaScript網(wǎng)站開發(fā)框架與浮動(dòng)框架_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第七章框架與浮動(dòng)框架課堂案例:企業(yè)郵箱網(wǎng)頁地制作7.1網(wǎng)站地后臺(tái)管理頁一般是由框架結(jié)構(gòu)組成,本章通過學(xué)習(xí)框架地網(wǎng)頁組織形式,制作企業(yè)郵箱地頁面。準(zhǔn)備知識(shí):框架與框架集7.2創(chuàng)建框架7.2.2刪除框架與增加框架7.2.4框架與框架集介紹7.2.1保存框架7.2.3在框架使用超鏈接7.2.5框架與框架集介紹7.2.1框架是網(wǎng)頁常用地布局方式與網(wǎng)頁間地組織形式,經(jīng)常使用在網(wǎng)站地后臺(tái),郵箱,論壇等結(jié)構(gòu)為一個(gè)瀏覽器窗口劃分為若干區(qū)域并且每個(gè)區(qū)域顯示不同地網(wǎng)頁文件地網(wǎng)頁組成?？蚣苁蔷W(wǎng)頁經(jīng)常使用地頁面設(shè)計(jì)方式,其作用就是把網(wǎng)頁在一個(gè)瀏覽器窗口下分割成幾個(gè)不同地區(qū)域,實(shí)現(xiàn)在一個(gè)瀏覽器窗口顯示多個(gè)HTML頁面。使用框架可以非常方便地完成導(dǎo)航工作,讓網(wǎng)站地結(jié)構(gòu)更加清晰,而且各個(gè)框架之間決不存在干擾問題。利用框架最大地特點(diǎn)就是使網(wǎng)站地風(fēng)格一致。一個(gè)框架是由框架與框架集構(gòu)成,框架是瀏覽器窗口地一個(gè)區(qū)域,它可以顯示與瀏覽器窗口地其余部分所顯示內(nèi)容無關(guān)地網(wǎng)頁文件;框架集也是一個(gè)網(wǎng)頁文件,它將一個(gè)窗口通過行與列地方式分割成多個(gè)框架,框架地多少根據(jù)具體有多少網(wǎng)頁來決定,每個(gè)框架要顯示地就是不同地網(wǎng)頁文件?？蚣艿豀TML標(biāo)簽為<frame></frame>,框架集地HTML標(biāo)簽為<frameset></frameset>。創(chuàng)建框架7.2.21創(chuàng)建框架打開Dreamweaver工具,創(chuàng)建一個(gè)新地站點(diǎn)名稱為frame）,新建一個(gè)網(wǎng)頁文件,暫時(shí)不保存。在Dreamweaver地CS6版本,單擊菜單欄地插入HTML框架然后選擇菜單地具體框架結(jié)構(gòu)。創(chuàng)建框架7.2.22修改框架顯示大小與框架屬性方法一:修改框架在瀏覽器顯示大小,將鼠標(biāo)放到框架邊框上,當(dāng)出現(xiàn)雙箭頭光標(biāo)時(shí)拖拽框架邊框,可以改變框架地顯示大小。方法二:單擊代碼視圖,在代碼修改rows="80,*"或cols="80,*"地值,如修改為rows="169,*"或cols="257,*"。方法三:單擊框架面板地框架集地邊框,顯示框架集地屬性面板。創(chuàng)建框架7.2.23框架集屬性框架集地屬性主要包括邊框,邊框?qū)挾?邊框顏色,行或列地值與單位。邊框是設(shè)置是否有邊框,默認(rèn)被選為"否",還可設(shè)置為"是"與"默認(rèn)";設(shè)置了邊框?yàn)?是"后,邊框顏色地設(shè)置才有意義,否則即使設(shè)置了邊框地顏色,在瀏覽器也看不見邊框。單擊框架面板地任一框架,屬性面板為該框架地屬性,框架地屬性主要包含框架名稱,源文件,滾動(dòng),邊框,邊框顏色,不能調(diào)整大小,邊界寬度與邊界高度。保存框架7.2.3每一個(gè)框架都有一個(gè)默認(rèn)地框架名稱,可以用默認(rèn)地框架名稱,也可以在保存時(shí)自定義名稱。選擇菜單欄地文件保存全部,顯示另存為對(duì)話框,注意當(dāng)前默認(rèn)地文件名,如果默認(rèn)地文件名有frameset表示當(dāng)前保存地文件是個(gè)框架集文件,并且出現(xiàn)一條約5像素粗細(xì)地虛線將框架集地范圍包含起來。如何判斷框架頁是否被保存了,單擊框架頁,查看Dreamweaver頭部地文件地名稱,若只有名稱沒有文件類型,則該文件未被保存。刪除框架與增加框架7.2.4刪除框架地方式是用鼠標(biāo)把框架邊框拖拽到父框架地邊框上,可刪除框架。如圖所示,向左拖拽間地邊框到最左方,則在當(dāng)前框架結(jié)構(gòu)刪除left.html,注意只是在框架結(jié)構(gòu)刪除了并不是將left.html文件刪除,文件仍保存在站點(diǎn)。若想刪除地是main.html,則向右拖拽邊框,如果是上下結(jié)構(gòu)地框架,則向上或向下拖拽邊框,刪除上方或下方地框架。增加框架地方式,將光標(biāo)落在需要增加框架地框架頁,單擊菜單欄插入HTML框架然后選擇菜單地具體框架結(jié)構(gòu),即可增加框架到當(dāng)前位置。在框架使用超鏈接7.2.5在框架式網(wǎng)頁制作超鏈接時(shí),一定要設(shè)置鏈接地目的屬性,就是超鏈接標(biāo)簽a地target屬性,為鏈接地目的文檔指定顯示窗口地位置。新建并保存框架后,在目的地下拉選項(xiàng),會(huì)自動(dòng)增加對(duì)應(yīng)地框架名,如保存框架名為mainFrame,leftFrame,topFrame地框架后,在目的下拉菜單,還會(huì)出現(xiàn)mainFrame,leftFrame,topFrame選項(xiàng):_blank:在新窗口打開目的對(duì)象;_parent:在父框架集或包含該鏈接地框架窗口打開目的對(duì)象;_self:在默認(rèn)窗口打開目的對(duì)象,即無須指定;_top:在整個(gè)瀏覽器窗口打開目的對(duì)象,并刪除所有框架;mainFrame:超鏈接對(duì)象在名為mainFrame地框架打開;leftFrame:超鏈接對(duì)象在名為leftFrame地框架打開;topFrame:超鏈接對(duì)象在名為topFrame地框架打開。實(shí)踐目的:掌握常用地框架布局方式;熟悉修改框架地屬性;掌握DIV+CSS地布局模式;掌握表格地使用方式。案例實(shí)施過程:企業(yè)郵箱網(wǎng)頁地制作7.3布局圖步驟1新建站點(diǎn),并按布局圖,創(chuàng)建上方及左側(cè)嵌套地框架,并分別保存為文件index.html,top.html,left.html與mian.html,四個(gè)網(wǎng)頁文件,并在瀏覽器預(yù)覽效果。步驟2單擊菜單欄地窗口框架,打開框架面板,單擊框架地父邊框,在框架集地屬性面板,設(shè)置行地值為88像素,在框架面板單擊左右框架地父框架地邊框,設(shè)置框架集屬性面板列地值為200像素。步驟3在Dreamweaver打開top.html文件,設(shè)置CSS樣式地body標(biāo)簽地樣式,設(shè)置網(wǎng)頁地背景圖像為bg_1.jpg圖像,設(shè)置邊距值margin地四個(gè)方向:上右下左地值分別為0,0,0,10px,min-width是設(shè)置頁面地最小顯示寬度。雖然沒有設(shè)置背景圖像地不重復(fù)效果,頁面效果默認(rèn)為重復(fù),但是top.html在框架頁index.html顯示地高度只有88像素,所以重復(fù)地背景在index.html網(wǎng)頁是被框架遮擋住。步驟4在top.html頁創(chuàng)建一個(gè)div對(duì)象,id值為top,并設(shè)置top地CSS樣式,定義#top地寬度為100%,高度為88像素,背景圖像為ad3.jpg,背景圖像不重復(fù),位置在左邊,上面。步驟5在#top輸入文字信息"xxli@dashang.歡迎您登錄郵箱首頁|設(shè)置",使用<br>標(biāo)簽分成兩行地效果,文字信息"xxli@dashang.","首頁"與"設(shè)置"分別加入空地超鏈接,創(chuàng)建CSS類樣式.title,定義在.title地含超鏈接地對(duì)象地樣式效果,樣式應(yīng)用到文字上。步驟6在Dreamweaver打開left.html,在<head></head>標(biāo)簽加入CSS樣式,設(shè)置body標(biāo)簽地樣式,網(wǎng)頁地背景顏色為#faf8f5,設(shè)置背景圖像silebar_bg.jpg縱向重復(fù),位置為網(wǎng)頁地右邊,設(shè)置字體為"宋體"。將文字信息"文件夾"與"郵箱服務(wù)"設(shè)置為標(biāo)題1將其它文字信息用項(xiàng)目列表排列。步驟7設(shè)置left.html網(wǎng)頁文件地CSS樣式,定義h1,ul,li與a標(biāo)簽地樣式。步驟8在Dreamweaver打開main.html,在設(shè)計(jì)視圖,輸入三個(gè)段落地文字信息,內(nèi)容分別為:"晚上好,親！","注冊(cè)英文郵箱帳號(hào)(如:chen@dashangl.)","郵件:0封未讀郵件"。在<head></head>插入CSS樣式,定義<p>標(biāo)簽與四種文字地類樣式,并將樣式應(yīng)用到文本信息。步驟9在文本信息后插入盒子#main與#main2,并輸入文本信息與插入圖像,設(shè)置空地超鏈接,將"進(jìn)入收件箱

訂閱心(15)

閱讀空間(105)"與"我地信息"兩行設(shè)置為標(biāo)題2,將其它段落設(shè)置為項(xiàng)目列表,設(shè)置#main與#main2地CSS樣式效果,定義標(biāo)題2與標(biāo)題2地超鏈接對(duì)象地CSS樣式定義#main與#main2地項(xiàng)目列表及超鏈接地樣式效果。在#main2后插入兩個(gè)DIV標(biāo)簽,ID值分別為tu與bottom,并設(shè)置#tu與#bottom地CSS樣式在#bottom輸入文字信息"2015年4月8日更新|企業(yè)郵箱|開放平臺(tái)|體驗(yàn)室|郵箱助手|自助查詢|團(tuán)隊(duì)博客|加入我們標(biāo)準(zhǔn)版-基本版|?2015DashangInc.AllRightsReserved",排列并設(shè)置文字地超鏈接,保存框架頁。步驟10新建一個(gè)HTML網(wǎng)頁文件,命名為shou.html,用來顯示收郵件地網(wǎng)頁。步驟11在shou.html輸入兩個(gè)段落地文字信息"收郵件"與"有郵件200封,已讀郵件195封,未讀郵件5封","收郵件"設(shè)置為標(biāo)題3,在文字段落后面插入一個(gè)5行5列地表格,表格寬度為80%,表格地ID為ta,左對(duì)齊,并輸入文字信息。在網(wǎng)頁地頭部標(biāo)簽處定義CSS樣式保存網(wǎng)頁,在瀏覽器預(yù)覽網(wǎng)頁效果。步驟12新建一個(gè)HTML網(wǎng)頁文件,命名為write.html,用來寫郵件地網(wǎng)頁。步驟13在網(wǎng)頁write.html輸入一行文本信息"寫郵件",并設(shè)置為標(biāo)題3。在文字后插入一個(gè)表單,創(chuàng)建"收件"與"主題"兩個(gè)文本字段,創(chuàng)建"正文"為文本區(qū)域,插入"提交"與"重置"按鈕,設(shè)置CSS樣式。步驟14打開網(wǎng)頁index.html,設(shè)置top.html文字"首頁"地超鏈接文件為main.html,屬性面板目的選擇mainFrame,如圖7-2-40所示,設(shè)置left.html地文字"收郵件"地超鏈接文件為shou.html,屬性面板目的選擇mainFrame,文字"寫郵件"地超鏈接文件為write.html,同樣在屬性面板地目的選擇mainFrame。步驟15保存所有網(wǎng)頁,在瀏覽器預(yù)覽網(wǎng)頁,檢查網(wǎng)頁地超鏈接是否在框架地mainFrame區(qū)域顯示。擴(kuò)展知識(shí):浮動(dòng)框架7.4浮動(dòng)框架7.4.1浮動(dòng)框架案例:企業(yè)網(wǎng)站產(chǎn)品頁制作7.4.2課堂練習(xí)一:玫瑰分類介紹網(wǎng)頁7.4.3課堂練習(xí)二:網(wǎng)站后臺(tái)管理頁7.4.4浮動(dòng)框架7.4.1浮動(dòng)框架是一種特殊地框架頁面,在瀏覽器窗口可以嵌套子窗口,在字窗口顯示頁面內(nèi)容,這個(gè)可以通過<iframe></iframe>標(biāo)簽來實(shí)現(xiàn),<iframe>標(biāo)簽地屬性值width（寬）:浮動(dòng)框架顯示地寬度值,單位一般采用像素（px）;height（高）:浮動(dòng)框架顯示地高度值,單位一般采用像素（px）;src（源文件）:打開網(wǎng)頁時(shí)浮動(dòng)框架顯示地內(nèi)容,可以是網(wǎng)頁,也可以是圖片;frameborder（邊框）:浮動(dòng)框架地邊框效果,值為"0"或"1",默認(rèn)值為"1",設(shè)置為"0",則為邊框地顯示效果;scrolling（滾動(dòng)條）:是否顯示滾動(dòng)條,值為"auto","yes","no",默認(rèn)值是"auto",即浮動(dòng)框架地內(nèi)容超過寬度值與高度值地大小時(shí),顯示滾動(dòng)條;"yes"是顯示滾動(dòng)條;"no"就是無論什么情況都不顯示滾動(dòng)條。name（名稱）:對(duì)浮動(dòng)框架命名,當(dāng)需要超鏈接地內(nèi)容在浮動(dòng)框架打開,就需要將target地值設(shè)置為浮動(dòng)框架地名稱。<iframesrc="源文件"width="寬度值"height="高度值"frameborder="0"scrolling="auto"name="浮動(dòng)框架地名稱">浮動(dòng)框架案例:企業(yè)網(wǎng)站產(chǎn)品頁制作7.4.2目的掌握創(chuàng)建浮動(dòng)框架地方式;熟悉浮動(dòng)框架地屬性及屬性值地設(shè)置;掌握將超鏈接實(shí)現(xiàn)在浮動(dòng)框架地方式。步驟1在站點(diǎn)新建一個(gè)網(wǎng)頁文件,命名為yundongxie.html,保存在files文件夾。步驟2輸入文字"當(dāng)前位置:運(yùn)動(dòng)鞋",并設(shè)置為標(biāo)題4,在網(wǎng)頁地頭部插入CSS樣式,設(shè)置標(biāo)題4地CSS。<styletype="text/css">h4{width:100%;height:28px;color:#FFF;font-size:14px;margin:0;padding:5px005px;background:url(../images/bgg1.jpg)no-repeat;}img{border:0}a{text-decoration:none;color:#333;line-height:28px;font-size:12px;}a:hover{color:#069;font-weight:bolder;}</style>步驟3插入一個(gè)4行3列,寬度為700像素,邊框,邊距,間距均為0地表格,并在單元格插入如圖7-4-3所示地圖像與文字,圖像地寬度與高度值均為200像素,文字加入空地超鏈接（#）。步驟4保存文件,并通過瀏覽器預(yù)覽網(wǎng)頁文件。步驟5采用同樣地方式制作網(wǎng)頁高跟鞋（gaogenxie.html）與靴子(xuezi.htll)并保存在files文件夾。步驟6在Dreamweaver打開product.html（該頁面在第六章制作完成）,將#main_right地原有地文字與表格內(nèi)容全部刪除。步驟7在#main_right,插入一個(gè)浮動(dòng)框架。單擊菜單欄地插入HTML框架IFRAME,光標(biāo)所在位置插入<iframe></iframe>標(biāo)簽。設(shè)置浮動(dòng)框架標(biāo)簽地屬性值,寬度設(shè)置為700像素,高度設(shè)置為600像素,名稱為"xie",邊框?yàn)?,不顯示滾動(dòng)條,源文件為"gaogenxie.html"。<iframesrc="gaogenxie.html"width="700"height="600"scrolling="no"frameborder="0"name="xie"></iframe>步驟8修改#main_left地超鏈接,選擇文字"高跟鞋",在鏈接單擊文件夾按鈕,選擇文件gaogenxie.html,并設(shè)置目的為"xie"。選擇文字"運(yùn)動(dòng)鞋",在鏈接單擊按鈕,選擇文件yundognxie.html,并設(shè)置目的為"xie",選擇文字"鞋子",在鏈接單擊按鈕,選擇文件xuezi.html,并設(shè)置目的為"xie"。步驟9保存文件并測試網(wǎng)頁地超鏈接。課堂練習(xí)一:玫瑰分類介紹網(wǎng)頁7.4.3目的熟練使用DIV+CSS布局模式布局;熟練使用浮動(dòng)框架;熟練將超鏈接地內(nèi)容顯示在浮動(dòng)框架。步驟1新建站點(diǎn)rose,設(shè)置站點(diǎn)圖像文件夾為images,將素材復(fù)制到站點(diǎn)地圖像文件夾。步驟2新建網(wǎng)頁文件,命名為rose.html,并保存在站點(diǎn),按布局圖地設(shè)計(jì)在網(wǎng)頁插入#left,#middle,#right三個(gè)dIV標(biāo)簽,并定義在<head>標(biāo)簽定義CSS樣式,設(shè)置網(wǎng)頁地內(nèi)容寬度為1024像素,居,定義三個(gè)DIV標(biāo)簽元素地CSS樣式。<styletype="text/css">body{margin:0auto;width:1024px;}#left{width:292px;height:819px;float:left;}#middle{width:496px;height:819px;float:left;background-image:url(images/bg2_02.gif);}#right{width:236px;height:819px;float:left;background-image:url(images/bg2_03.gif)}</style>步驟3在#left插入圖像。將光標(biāo)落在#left,單擊插入工具欄地常用地圖像按鈕,顯示選擇圖像源文件對(duì)話框,選擇"images"文件夾地"bg2_01.gif"文件,單擊確定按鈕完成操作。步驟4在#middle插入浮動(dòng)框架。將光標(biāo)落在#middle,單擊菜單欄地插入HTML框架IFRAME,在代碼視圖地<iframe></iframe>設(shè)置浮動(dòng)框架地屬性。<iframesrc="images/bg6_02.gif"width="496"height="819"scrolling="no"frameborder="0"name="rose"></iframe>步驟5設(shè)置超鏈接。對(duì)#left地圖像設(shè)置超鏈接地?zé)釁^(qū),單擊圖像,在屬性面板選擇熱區(qū)地區(qū)域選擇工具,框選"香檳玫瑰"這部分地圖像,在熱區(qū)地屬性面板,設(shè)置鏈接地對(duì)象,在目的輸入浮動(dòng)框架地名稱"rose"。采用相同地方式,分別設(shè)置"藍(lán)色妖姬","彩虹玫瑰"與"法蘭西玫瑰"地?zé)釁^(qū)鏈接。步驟6保存網(wǎng)頁,預(yù)覽網(wǎng)頁效果。課堂練習(xí)二:網(wǎng)站后臺(tái)管理頁7.4.4目的創(chuàng)建框架;保存框架;框架地超鏈接;步驟1新建站點(diǎn),建立站點(diǎn)圖像文件夾pic,將圖片素材復(fù)制到圖像文件夾。步驟2在Dreamweaver新建一個(gè)空白網(wǎng)頁,單擊菜單欄地插入HTML框架上方及下方,創(chuàng)建框架集網(wǎng)頁,再單擊框架集地間框架,選擇菜單欄地插入HTML框架左對(duì)齊,完成框架結(jié)構(gòu)地創(chuàng)建,將框架頁與框架集頁全部保存,名稱分別為index.html（整個(gè)框架集頁面）,top.html（上部地框架頁）,left.html（左邊地框架頁）,main.html（右邊地框架頁）,bottom.html（底部地框架頁）,5個(gè)網(wǎng)頁文件。步驟3單擊菜單欄地窗口框架,打開框架面板,選整個(gè)框架集,單擊代碼視圖,修改框架集框架窗口地顯示大小,將框架集地原來地上下框架地大小rows地值,修改為rows="90,*,30",將左右大小地值cols="220,*"。<framesetrows="90,*,30"frameborder="no"border="0"framespacing="0"><framesrc="top.html"name="topFrame"scrolling="no"noresize="noresize"id="topFrame"title="topFrame"/><framesetcols="220,*"frameborder="no"border="0"framespacing="0"><framesrc="left.html"name="leftFrame"scrolling="no"noresize="noresize"id="leftFrame"title="leftFrame"/><framesrc="main.html"name="mainFrame"id="mainFrame"title="mainFrame"/></frameset><framesrc="bottom.html"name="bottomFrame"scrolling="no"noresize="noresize"id="bottomFrame"title="bottomFrame"/></frameset>步驟4在Dreamweaver打開top.html,在body標(biāo)簽創(chuàng)建一個(gè)div標(biāo)簽,并輸入文字信息"當(dāng)前用戶:管理員",在head標(biāo)簽設(shè)置CSS樣式,定義body地背景圖像為素材地圖像文件bg_top.jpg,水平重復(fù)（repeat-x）,位置在top,邊距值為0;定義#top地CSS樣式為寬度100%,寬度地最小值為1002像素,背景圖像為title.jpg,圖像不重復(fù),位置在left,并定義文字地小小,顏色與位置。<styletype="text/css">body{margin:0;background:url(pic/bg_top.jpg)repeat-xtop;}#top{width:100%;min-width:1002px;height:50px;background:url(pic/title.jpg)n

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論