dreamweaver網(wǎng)頁設(shè)計授課教案-wenkub
2024-10-17 20 本頁面
【正文】 3． 框架屬性：名稱、源文件，滾動否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等4． 拆分框架：按 Alt鍵，拖動邊框；修改（Modify）224。2． 復(fù)制剪切粘貼3． 插入行、列，刪 除行列4． 合并單元格，拆 分單元格5． 改變行、列、表 格的大?。和戏?，屬性面板精確定義6． 表格模板：命令（mand）224。2． 將找到的圖片放置在背景為藍(lán)色的頁面上 3． 改變第一 張GIF圖片的大小 4． 設(shè)置第二張GIF圖片的替代文字為“試一試” 5． 設(shè) 置第三張GIF圖片的鏈接為第三張JPEG圖片 6． 設(shè)置第四張GIF圖片的垂直邊距為5，水平邊距為9 7． 對第一張JPEG圖片設(shè)置映射4個，分別鏈接到第二、三、四、五張JPEG圖片 8． 運用圖像處理軟件，制作風(fēng)景JPEG圖片的低品質(zhì)圖片，并對網(wǎng)頁中該風(fēng)景圖片設(shè)置低 品質(zhì)源 l 不看電腦，寫出下列RGB值對應(yīng)什么顏色 FF000 00FF00 0000FF FFFF00 FF00FF 00FFFFDreamweaver教案四(三課時)教學(xué)目的：掌握dreamweaver中表格的應(yīng)用 教學(xué)難點：表格對應(yīng)的HTML代碼教學(xué)重點：表格的編輯一、復(fù)習(xí)引入1． 文字的定位：空 格、回車2． 圖片的定位：垂 直邊距、水平邊距二、表格1． 插入表格：插入（Insert）224。例一：例二：frontpage安裝程序和dreamweaver安裝程序的大小比較例三：frontpage運行和dreamweaver啟動比較二、Dreamweaver的安裝三、Dreamweaver的界面1．文檔窗口：主菜單、工具欄、底部啟動條、文檔編輯區(qū)2．對象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件頭、隱藏、字符3．啟動面板：站點管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理4．屬性面板：隨目前對象不同而內(nèi)容不同四、作業(yè)1．寫出Dreamweaver對象界面中所有對象的名稱2．新建一個空白網(wǎng)頁，寫出空白網(wǎng)頁的HTML代碼Dreamweaver教案二(一課時)教學(xué)目的：回憶原來學(xué)過的網(wǎng)頁的文字知識，熟悉 Dreamweaver的操作，熟悉屬性面板的 1使用，掌握頁面屬性、文本屬性的設(shè)置教學(xué)難點：向?qū)D片、預(yù)格式化、圖片的路徑教學(xué)重點：常用屬性一、復(fù)習(xí)引入1．輸入文本2．回車鍵的作用3．如何輸入換行符：Shift+ENTER，或者是對象面板224。符號4．換行符對應(yīng)的HTML標(biāo)記二、設(shè)置頁面屬性1．打開頁面屬性對話框：右擊頁面，選擇頁面屬性（page properties）2．設(shè)置標(biāo)題顯示（Title）：3．設(shè)置頁面背景（Background image）：選擇背景圖像，注意路徑4．設(shè)置背景顏色Background：5．設(shè)置本頁面中文字的顏色Text：在沒有設(shè)置其它的字體顏色前，這個文字顏色發(fā)生作用，一 旦對具體的文字設(shè)置顏色，這個設(shè)置就不起作用了6．設(shè)置鏈接的各種顏色（Visited Links、Active Links、Links）7．設(shè)置頁面邊界（Left Top）：使內(nèi)容與邊框沒有空隙8．設(shè)置文檔字符集（Document Encoding）：gb23129．設(shè)置向?qū)D片（Tracing Image）：用于設(shè)計時，下面的滑動條用于設(shè)置這個圖片的透明度（Transparent）三、設(shè)置文本屬性1．格式（Format）：（1）樣式：段落（Paragraph），標(biāo)題（Heading1）、??預(yù)先格式化的（preformatted）*預(yù)先格式化的：可以輸入空格，可以按文本原來的樣子排列，缺點是不能實現(xiàn)自動換行（2）字體：Default Font（3）大?。篠ize（4）顏色：（5）其它：加粗、傾斜（6）對齊：2．鏈接（Link）：鏈接到文件，鏈接到地址，*相關(guān)（Relate to）：文檔（Document），站根目錄（SiteRoot）3．目標(biāo)（Target）：打開鏈接的目標(biāo)_blank、_self、_parent、_top4．項目符號、編號和縮進(jìn)四、作業(yè)根據(jù)示例網(wǎng)頁，制作一個網(wǎng)頁Dreamweaver 教案三(兩課時)教學(xué)目的：掌握網(wǎng)頁中圖片的相關(guān)操作教學(xué)重點：dreamweaver中設(shè)置圖片的屬性教學(xué)難點： 圖像處理軟件的使用一、復(fù)習(xí)引入 1．網(wǎng)頁的頁面背景顏色和文本顏色在HTML代碼中是如何表示的？ RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強(qiáng) 一共可以表示：256╳256╳256=16777216種 顏色 由于瀏覽器的關(guān)系，只有216種顏色能在瀏覽器中正常顯示，多于這個范圍的顏色，有的瀏覽器顯 示時就可能發(fā)生偏差，不能正常顯示。表格（table），或者在對象面板2． 行數(shù)（row）3． 列數(shù)（column）4． 邊距（cell padding）：單元格中的內(nèi)容與單元格邊框之間的距離5． 間距（cell spacing）：單元格之間的距離6． 寬度（width）：可以是像素（pixel）或百分比為單位（percent）7． 邊框（boder）：8． 屬性面板：只有 在選定整個表格時才出現(xiàn)表格屬性9． 在表格中也可以 通過右擊，調(diào)出的快捷菜單中選擇表格來對表格進(jìn)行設(shè)置10． 清除行高和列寬按鈕11． 改變列寬單位按鈕12． 背景顏色：13． 邊框顏色：設(shè)置整個表格的格線顏色14． 背景圖像：三、表格所對應(yīng)的HTML代碼1．表格：2．行：3．列：四、選定1． 單擊表格左上角 或邊框線2． 在表格內(nèi)單擊表 格任一處，
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1