網(wǎng)頁設(shè)計 (13).doc

湖北職院計算機科學與技術(shù)系理論課教案網(wǎng)頁設(shè)計 教學項目十四 HTML中框架的實現(xiàn) 【教學內(nèi)容】講解HTML中框架標志及相應(yīng)的屬性【教學目的】使學生掌握框架標志及屬性，學會熟練使用HTML標志設(shè)計框架網(wǎng)頁?！窘虒W重點】 框架的嵌套使用【教學難點】 理解屬性name、target的意義【教學方式】案例分析式、項目教學【教學參考】1 楊浩著 清華大學出版社2 電腦報社出版3TML網(wǎng)頁制作教程 材義語編著 鐵道出版社4HTML基礎(chǔ)與實例 程耀編著 電子工業(yè)出版社【新課】一、 設(shè)計框架網(wǎng)頁的標志標志一：用于定義框架的分割方式格式：說明：（1） rows,cols中必須選擇一個（2） rows,cols的值有三種表示方式：數(shù)字： 定的像素值；百分比：相對寬度，以當前的瀏覽器窗口為參照；*： 將剩下未被分配空間平均分配；例：1. 表示按水平方向分割，每一框架窗口占瀏覽器窗口的1/3，窗口從上到下排列；2. 表示按垂直方向分割，第一個窗口占40%,其余兩個窗口各占30%，窗口從左到右排列3. 表示先水平方向分割，再垂直方向分割，兩行三列排列。40%60%50%200標志二：用于定義一個子框架窗口，指定窗口中顯示的網(wǎng)頁的路徑、名稱及框架名稱。格式 ： 例1：設(shè)計如下框架網(wǎng)頁：分析：這是一個左右結(jié)構(gòu)的框架，框架左邊窗口顯示網(wǎng)頁為1.htm,框架窗口右邊顯示網(wǎng)頁為2.htm框架結(jié)構(gòu)部分對應(yīng)網(wǎng)頁為aa.htm；程序代碼如下：1.HTM代碼：特別推薦文學芳草竹林聽海梧桐樹下如煙往事牧歌唱晚2.htm代碼如下：aa.htm代碼如下：二、 框架標志配合使用的屬性1標志中的配合使用屬性：（1）framespacing: 設(shè)定框架邊框線的寬度（2）frameborder: 設(shè)定是否顯示框線frameborder=0 不顯示框線；frameborder=1時顯示框線；(3) bordercolor: 設(shè)定框線顏色2標志中配合使用的屬性（1）scrolling: 設(shè)定是否顯示滾動條 scrolling=auto 需要自動出現(xiàn) scrolling=yes 始終出現(xiàn) scrolling=no 從不出現(xiàn)(2) noresize: 設(shè)定是否允許調(diào)整窗口大小(3) marginwidth: 框架內(nèi)網(wǎng)頁內(nèi)容與邊緣的空白區(qū)寬度(4) marginheight: 框架內(nèi)網(wǎng)頁內(nèi)容與邊緣的空白區(qū)的高度三、 框架網(wǎng)頁中超級鏈接的使用例：設(shè)計如下框架網(wǎng)頁：分析：此例使用了框架嵌套，在下左窗口中設(shè)置超級鏈接，目標窗口分別是right、_self、_blank、bottom、target=top.最上窗口是顯示的網(wǎng)頁12.htm,上下框架網(wǎng)頁為index.htm;左右框架網(wǎng)頁為aa.htm,左框架顯示網(wǎng)頁為1.htm,右框架顯示網(wǎng)頁為2.htm;程序代碼如下：INGEX.htm代碼：12Htm代碼：愛情究竟是什么？   老媽說：愛情是顆洋蔥頭，一片片剝下去，總有一片讓你淚流滿面；老爸說：愛情是感冒，既瞞不了自己，也瞞不了別人，因為你抑制不住自己的噴嚏和鼻涕；朋友說：愛情是只啁啾的鳥，總想往高處飛，但又總要找個棲息的角落；而嗜飲咖啡的我更愿意說：愛情是一杯香濃的咖啡。既然是咖啡，光有沖泡還不夠味，因為總有些東西會漂在上面，所以還要找把小勺子，輕輕地、慢慢地來攪和，讓它們就在這一攪一拌中漸漸融合，你中有我，我中有你，散發(fā)出令人神清氣爽的醇香。所以，情竇初開的你，愛如潮水的你，濃情蜜意的你，不論應(yīng)酬有幾多，工作有多忙，時間多緊張，你都要找點時間，找點空閑，帶上你的心上人兒找個安靜、浪漫的、溫馨的地方，散散步聊聊天-因為愛情咖啡需要找把小勺慢慢攪拌。就在這搖拌中，把心搖近，把情搖濃，最后融合在一起再也分不開。關(guān)于愛情的點點滴滴，在這輕輕地攪拌中，愈久彌香，飄散在這座城市的角角落落.1Htm代碼如下：