資源簡介

(共23張PPT)
人教版三年級上冊
美術
全冊優質課課件
設計我的網站
目錄
CONTENTS
1
任務一：規劃網站
2
任務二：選擇制作工具
3
任務三：布局網頁結構
01
任務一：規劃網站
任務一：規劃網站
利用演示文稿軟件（如PowerPoint），發布由文本、圖像、聲音和動畫等組成的多媒體信息，是信息交流的常用手段。將多媒體信息發布到網上，在因特網上建立網站，更大范圍地宣傳與展示自己，已成為便捷、時尚的信息交流方式。要想在因特網上建立一個網站，首先需要規劃網站，其次是設計制作網站，最后在因特網上安個家。
了解建立網站的基本過程，掌握網站規劃的意義和方法，確定網站的主題，并能夠圍繞主題有效地搜集和歸類整理資料。
創建網站的首要任務就是要規劃好網站。人們常說“磨刀不誤砍柴工”，通過規劃網站，明確網站設計的目的、要求，依次落實網站設計和制作的幾個主要階段，就能夠又快又好地建立網站。建立一個網站一般要經歷以下幾個階段。
開始
策劃階段
制作階段
調試階段
發布與維護
（確定主題，選擇工具，布局網頁結構，搜集、整理素材。）
（運用相關軟件編輯、處理信息并制作成網頁。）
（設置網頁鏈接，美化、修飾各個頁面。）
（檢查與測試網站性能，將網站發布到因特網，維護網站。）
網站規劃與工程規劃相似，要有系統的、全局的考慮，不能想到哪兒就做到哪兒。一般需要注意下面四點：
（1）明確建立網站的目的。
（2）進行可行性分：網站建立需要花費多少時間、精力、人力，性價比是否合理。
（3）網站的內容設計：根據網站的性質和目的，分析瀏覽者的需求確定網站的內容。
（4）網站表現形式設計：網頁本身的設計，如網站的標志、網頁里的圖文排版形式等。
一個優秀的網站，具有主題明確、特色鮮明、內容豐富、圖文并茂、動靜結合等特點，給訪問者賞心悅目的感受。
確定主題是網站策劃階段的首要任務。主題是什么？寫文章要有主題、會議要有主題……網站的主題（見圖1-3至圖1-6）是指網站所要宣傳和展示的目標內容，如青少年科技網站的主題是向青少年宣傳和展示科普知識。
該網站的主題是什么？它是否突出了主題？它有哪些特點？你認為還有哪些不足之處？
思考
任務二：選擇制作工具
02
學習目標
了解常用的網頁制作工具，初步認識FrontPage2003軟件的窗口組成，能夠識讀簡單的HTML語言代碼。
制作網頁的工具很多，常用的有記事本（Windows中的）Frontierswoman、東方網頁王、Home Site和Semiprofessional等。使用這些軟件工具時，僅通過菜單命令和工具按鈕，就可以輕松地設計、制作網頁。為兩種網頁制作工具的界面。
探究
探究目標：通過閱讀網頁的HTML文檔，了解HTML文檔結構，并能夠識讀簡單網頁的HTML標識性語言。
探究準備：教學配套素材文件夾（以下簡稱“素材文件夾”）中的diligent網站、first.ht網頁及schoolbook電子圖書。
探究過程：
（1）打開電子圖書，雙擊index.ht文件，根據網頁內容提示，瀏覽電子圖書。
Dream weaver制作網頁
Dream weaver具有可視化編輯功能，能夠快速地創建頁面而無須編寫任何代碼，可以方便地查看所有站點元素或資源，并能輕易地將它們從面板直接拖到文檔中。
Dream weaver還提供了功能全面的編碼環境，可以使用服務器技術生成由動態數據庫支持的web應用程序。圖1一11是用Dream weaver編輯的一個界面。
FrontPage2003軟件
FrontPage2003軟件與其他Office2003軟件一樣，是一種可視化的、圖形界面的集成軟件，使用方便、快捷，可以輕松制作網頁。
（1）啟動FrontPage2003：依次單擊“開始”到“程序”菜單。
（2）窗口組成：FrontPage2003的窗口與word2003軟件有許多共同之處，有標題欄、菜單欄、工具欄、視圖欄、編輯區、狀態欄等組成部分。
FrontPage2003有七種視圖，即“頁面”“文件夾”“遠程網站”“報表”“導航”“超鏈接”和“任務”，通過切換視圖，可以有針對性地查看站點內容或網站結構。
FrontPage23的編輯區有四種工作模式。
設計模式：一般用來編輯、修改網頁。該模式能直觀地顯示網頁設計效果。
拆分模式：將編輯窗口分為兩個部分一一代碼窗口和設計窗口，方便查看被編輯的對象所對應的HTML語言代碼。
代碼模式：用來查看、修改HTML編碼。
預覽模式：用來網頁的顯示效果。
（3）退出FrontPage2003：單擊“文件”菜單中的“退出”命令或單擊編輯區右上角的“×”按鈕，就可以關閉窗口，退出Fron2003。除以上介紹的網頁制作工具外，還有很多其他網頁制作工具，它們各有特點，可以根據個人喜好選擇一種網頁制作軟件。
在任務二中我們嘗試用HTML標記語言制作網頁，雖然軟件工具簡單，但代碼難以記住，編寫比較麻煩，且不直觀。Dream weaver軟件是一個比較好的網頁制作工具，但使用起來有一定難度。
總結
任務三：布局網頁結構
03
網站是由多個網頁組成的，每個網頁圍繞主題展示信息。在網頁設計中，每個頁面的色調、版面結構、設計風格都體現著該網站的風格，因此在網站規劃過中，除對主題、內容進行規劃外，還要對網頁版面布局結構進行規劃。
學習目標
掌握網頁結構的布局方法，學會設計多種形式的網頁結構。
（1）小迪和茵茵的參賽作品是否到了圍繞主題來設計？
（2）圖1一13是如何布局網頁結構的？圖1-14又是如何布局網頁結構的？
思考
運用表格布局網頁結構
由于表格具有整齊統一、直觀明了的優點，在復雜的網頁設計中，人們不僅用表格顯示數據，還通過表格對網頁進行布局，這樣可以有效地控制文字、圖片等對象的位置，使網頁的布局既緊湊又整齊美觀，見書上圖1一16、圖1一17。
制作表格，可以利用制作表格的按鈕工具、插入表格命令、繪制表格的工具及布局表格與單元格命令來實現。圖1-18、圖1-19為常用的表格制作工具。
（1）啟動FrontPage2003，新建一個空白網頁。
（2）執行“表格"乛“插入”命令，彈出“格屬性"對話框，設置行數為1、列數為3，表格邊框線的粗細為0，表格指定寬度為100％，見圖1一21。
（3）在該行下方，再插入一個1行6列的表格，表格邊框線為1，顏色為藍色。
（4）在該行下方，單擊“表格"下“布局表格和單元格"命令，彈出“布局表格和單元格"對話框，選擇一種布局結構（2行2列），見圖1一22。合并第二行單元格，用嵌入方法在該單元格中再插入一個1行2列的表格。
（5）在網頁最后插入1行1列的表格，邊框線為0，網頁布局完成。
（6）保存網頁，設置文件名為Diego.ht。
在表格設計過程中，利用表格屬性對話框，可以修改表格大小、邊框粗細、顏色等屬性，見圖1一21。
運用框架布局網頁結構
框架是將web瀏覽器窗口劃分成若干區域，每個區域內的網頁既相互獨立，又保持著一定的聯系。框架布局網頁結構有點像在電視上看到的畫中畫的效果，在瀏覽器窗口內能同時看到多個網頁的內容。書上圖1一23是一種框架結構的網頁。上部為“呼喚"橫幅標題，左邊為“自然之友"等導航目錄，中間為對應導航目錄的網頁內容，拖動滾動條可以查看主頁面的內容。
表格與框架都能布局網頁的結構，說出它們有什么不同之處。
網頁結構是動態的，在網頁制作過程中，通常還要根據內容和版面效果做適當調整，以使網頁結構更整齊，頁面效果更好。
思考
謝 謝

展開更多......

收起↑