高中校本課程-制作美食網(wǎng)頁教學(xué)課件設(shè)計(jì)

制作一張精美的網(wǎng)頁

課程導(dǎo)入

我們一起來欣賞一組圖片本節(jié)課任務(wù)設(shè)計(jì)一張介紹美食的精美網(wǎng)頁任務(wù)拆分任務(wù)一任務(wù)二任務(wù)三

任務(wù)一：網(wǎng)頁的圖文排版

任務(wù)一：網(wǎng)頁的圖文排版請(qǐng)觀看微課,小組討論嘗試完成網(wǎng)頁的圖文排版

任務(wù)一：操作提示Step1：建立站點(diǎn)，打開任務(wù)一中的<川菜簡介>，復(fù)制到DWStep2：插入圖片及水平線Step3：單擊圖片，在下方屬性欄中的“對(duì)齊”中，選擇“左對(duì)齊”“右對(duì)齊”。Step4：設(shè)置照片的“寬度”“高度”，使得圖文混排更加美觀和諧。Step5:保存網(wǎng)頁至站點(diǎn)，命名為“chuancai.html”

任務(wù)一：操作提示網(wǎng)頁有文又有圖圖文排版很重要單擊圖片選對(duì)齊對(duì)齊莫忘高寬值

任務(wù)一：小結(jié)任務(wù)拆分任務(wù)一任務(wù)二任務(wù)三

任務(wù)二：使用表格布局網(wǎng)頁簡潔美觀易于操作便于管理

任務(wù)二：操作提示step1：新建網(wǎng)頁，插入任務(wù)二中的“橫幅”，并設(shè)置居中step2：插入水平線，寬度800像素step3：插入表格，設(shè)置5行4列，800像素，邊框1，居中Step4：合并第一行單元格，并輸入文字“中國八大菜系”，居中Step5：插入其他圖片及對(duì)應(yīng)文字，保存為“index.html”

任務(wù)二：拓展提升一張完整的網(wǎng)頁一張精美的網(wǎng)頁思考討論：我們可以從哪些方面精細(xì)我們的網(wǎng)頁呢？字體色彩布局

任務(wù)二：拓展提升鏈接任務(wù)拆分任務(wù)一任務(wù)二任務(wù)三任務(wù)三：設(shè)置圖片超級(jí)鏈接什么是超級(jí)鏈接？超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。任務(wù)三：操作提示Step1：選中“index.html”中的川菜圖片，在下方找到文件夾按鈕，單擊，在站點(diǎn)中選擇“chuancai.html”。Step2:選中“川菜”兩個(gè)字，在下方找到靶子形狀按鈕，單擊拉出射線，到右下方站點(diǎn)文件中的“chuancai.html”。Step3：保存預(yù)覽任務(wù)拆分任務(wù)一任務(wù)二任務(wù)三任務(wù)完成總結(jié)網(wǎng)頁設(shè)計(jì)趣味多，圖文排版才豐富表格布局好處多，簡潔美觀又方便要想網(wǎng)頁做的精，字體色彩要用心還要加上超鏈接，多多練習(xí)學(xué)的通作業(yè)1.基礎(chǔ)作