網(wǎng)頁設計第一課.ppt

2013年9月18日,寧夏育才中學校本課程,網(wǎng)頁設計,信息組：袁雯雯,2013年9月18日,寧夏育才中學校本課程,本節(jié)課主要內(nèi)容,2013年9月18日,寧夏育才中學校本課程,網(wǎng)頁解析html,網(wǎng)頁和網(wǎng)站的區(qū)別很大，網(wǎng)站是由網(wǎng)頁集合而成的，網(wǎng)頁就是一個瀏覽頁面，是一個html文件，瀏覽器是用來解讀這份文件的，想要制作一個網(wǎng)站，就需要單獨編輯若干個html文件，然后通過“超鏈接”把它們連接在一起，這樣一個屬于自己的網(wǎng)站就制作出來了。網(wǎng)站的話必須提供某種服務，或不斷更新某些問題,用來吸引人氣。一般得有自己鮮明的特色，它需要專門的技術和內(nèi)容維護人員。,2013年9月18日,寧夏育才中學校本課程,網(wǎng)頁解析html,下面就是網(wǎng)頁結構的整體框架：,2013年9月18日,寧夏育才中學校本課程,網(wǎng)站的核心,網(wǎng)站是以數(shù)據(jù)為核心，以服務器為基礎的“瀏覽者-管理員-系統(tǒng)管理員”相互關聯(lián)系、相互促進、有機制約的信息化整體。網(wǎng)頁則是靜態(tài)頁面各自為政，僅僅提供鏈接的HTML文件。,2013年9月18日,寧夏育才中學校本課程,制作網(wǎng)頁的專業(yè)工具,制作網(wǎng)頁的專業(yè)工具的功能越來越完善，操作也越來越簡單，處理圖像、制作動畫、發(fā)布網(wǎng)站的專業(yè)軟件應用得非常廣泛。,2013年9月18日,寧夏育才中學校本課程,各種工具,2013年9月18日,寧夏育才中學校本課程,網(wǎng)站開發(fā)流程,第一個階段：規(guī)劃和準備階段。這個階段要做的工作包括：（1）需求分析、決定網(wǎng)站的主題、風格（2）收集資料、準備素材并進行整理修改（3）規(guī)劃網(wǎng)站結構和頁面形式；,2013年9月18日,寧夏育才中學校本課程,第二階段,網(wǎng)頁設計、制作階段。這個階段要做的工作包括：（1）網(wǎng)站總體設計；（2）設計界面、制作網(wǎng)站中的各個網(wǎng)頁；（3）將各個網(wǎng)頁通過超級鏈接進行整合。,2013年9月18日,寧夏育才中學校本課程,網(wǎng)站的發(fā)布、推廣和維護階段。這個階段要做的工作包括：（1）測試、調(diào)試與完善網(wǎng)站；（2）發(fā)布與推廣網(wǎng)站；（3）維護和更新網(wǎng)站。,2013年9月18日,寧夏育才中學校本課程,關于設計與布局的小建議,在設計布局的時候要注意把文字、圖片在網(wǎng)頁空間上均勻分布并且不同形狀、色彩的網(wǎng)頁元素要相互對比，以形成鮮明的視覺效果。,2013年9月18日,寧夏育才中學校本課程,LOGO網(wǎng)站的設計,LOGO是網(wǎng)站的標志、名片，如同商標一樣。在網(wǎng)站設計中l(wèi)ogo的設計是不可缺少的一個重要環(huán)節(jié)。logo是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn),它作用于傳遞網(wǎng)站的定位和經(jīng)營理念、同時便于人們識別。,2013年9月18日,寧夏育才中學校本課程,網(wǎng)頁設計的色彩原則,2013年9月18日,寧夏育才中學校本課程,網(wǎng)頁頁面元素的設計,網(wǎng)頁是由文本、圖像、動畫、超級鏈接等基本元素構成,2013年9月18日,寧夏育才中學校本課程,文本,一般情況下，網(wǎng)頁中最多的內(nèi)容是文本，可以根據(jù)需要對其字體、大小、顏色、底紋、邊框等屬性進行設置。建議用于網(wǎng)頁正文的文字一般不要太大，也不要使用過多的字體，中文字體一般使用宋體，大小一般使用9磅或12像素即可。,2013年9月18日,寧夏育才中學校本課程,圖像,豐富多彩的圖像是美化網(wǎng)頁必不可少的元素，用于網(wǎng)頁上的圖像一般為JPG格式和GIF格式。網(wǎng)頁中的圖像主要有用于點綴標題的小圖片，介紹性的照片，代表企業(yè)形象或欄目內(nèi)容的標志性圖片（即LOGO），用于宣傳的廣告（即Banner）等多種形式。,2013年9月18日,寧夏育才中學校本課程,超級鏈接,超級鏈接是Web網(wǎng)頁的主要特色，是指從一個網(wǎng)頁指向另一個目的端的鏈接。這個“目的端”通常是一個網(wǎng)頁，也可以是下列情況之一：相同網(wǎng)頁上的不同位置、一個下載的文件、一幅圖片、一個E_Mail地址等。超級鏈接可以是文本、按鈕或圖片，鼠標指向超級鏈接位置時，會變成小手形狀。,2013年9月18日,寧夏育才中學校本課程,導航欄,導航欄是一組超級鏈接，用來方便地瀏覽站點。導航欄一般由多個按鈕或者多個文本超級鏈接組成。,2013年9月18日,寧夏育才中學校本課程,動畫,動畫是網(wǎng)頁中最活躍的元素，創(chuàng)意出眾、制作精致的動畫是吸引瀏覽者眼球的有效方法之一。但是如果網(wǎng)頁動畫太多，也會物極必反，使人眼花繚亂，進而產(chǎn)生視覺疲勞。,2013年9月18日,寧夏育才中學校本課程,表格,表格是HTML語言中的一種元素，主要用于網(wǎng)頁內(nèi)容的布局，組織整個網(wǎng)頁的外觀，通過表格可以精確地控制各網(wǎng)頁元素在網(wǎng)頁中的位置。,2013年9月18日,寧夏育才中學校本課程,框架,框架是網(wǎng)頁的一種組織形式，將互相關聯(lián)的多個網(wǎng)頁的內(nèi)容組織在一個瀏覽器窗口中顯示。例如在一個框架內(nèi)放置導航欄，另一個框架中的內(nèi)容可以隨著導航欄中的鏈接而改變。,2013年9月18日,寧夏育才中學校本課程,表單,表單是用來收集訪問者信息或?qū)崿F(xiàn)一些交互作用的網(wǎng)頁，瀏覽者填寫表單的方式是輸入文本，選中單選按鈕或復選框，從下拉菜單中選擇選項等。,2013年9月18日,寧夏育才中學校本課程,網(wǎng)頁欣賞,