網(wǎng)頁設(shè)計(jì)第一課.ppt

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