規(guī)劃系部網(wǎng)站并熟悉網(wǎng)站開(kāi)發(fā)環(huán)境課件

學(xué)習(xí)情境一：網(wǎng)站初建

任務(wù)二:規(guī)劃系部網(wǎng)站并熟悉網(wǎng)站開(kāi)發(fā)環(huán)境1學(xué)習(xí)情境一：網(wǎng)站初建

任務(wù)二:規(guī)劃系部網(wǎng)站并熟悉網(wǎng)站開(kāi)發(fā)環(huán)境知識(shí)能力目標(biāo)知識(shí)能力目標(biāo)：了解網(wǎng)站開(kāi)發(fā)流程、網(wǎng)站規(guī)劃的要求、網(wǎng)頁(yè)設(shè)計(jì)的原則了解常用網(wǎng)頁(yè)制作工具認(rèn)識(shí)AdobeDreamweaverCS4開(kāi)發(fā)環(huán)境能夠規(guī)劃網(wǎng)站能夠創(chuàng)建、管理、操作本地站點(diǎn)能夠制作簡(jiǎn)單網(wǎng)頁(yè)并會(huì)保存、打開(kāi)、預(yù)覽網(wǎng)頁(yè)2知識(shí)能力目標(biāo)知識(shí)能力目標(biāo)：2項(xiàng)目效果展示項(xiàng)目效果圖3項(xiàng)目效果展示項(xiàng)目效果圖3任務(wù)描述任務(wù)描述1．規(guī)劃電子系網(wǎng)站從網(wǎng)站的需求分析、主題和內(nèi)容、整體風(fēng)格、結(jié)構(gòu)等方面對(duì)網(wǎng)站項(xiàng)目進(jìn)行整體規(guī)劃，同時(shí)設(shè)計(jì)出網(wǎng)站Logo和主要網(wǎng)頁(yè)的版式。2．熟悉網(wǎng)站開(kāi)發(fā)環(huán)境啟動(dòng)AdobeDreamweaverCS4后熟悉工作界面上的菜單欄、文檔工具欄、文檔選項(xiàng)卡式面板欄、文檔編輯區(qū)、狀態(tài)欄、功能面板等。3．本地站點(diǎn)創(chuàng)建、管理與操作創(chuàng)建名為“電子系網(wǎng)站”的站點(diǎn)，站點(diǎn)根文件夾為本地磁盤的myweb文件夾。先在myweb中創(chuàng)建若干子文件夾和文件，再對(duì)站點(diǎn)進(jìn)行管理和操作。4．制作站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)根據(jù)自身具體情況制作站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)。4任務(wù)描述任務(wù)描述4知識(shí)講解1.1網(wǎng)站和網(wǎng)頁(yè)概述

1.基本術(shù)語(yǔ)WWW（WorldWideWeb）建立在Internet上的全球性的圖形信息系統(tǒng)，是超文本文檔的集合。URL(統(tǒng)一資源定位器)是Web服務(wù)器的地址，也稱網(wǎng)址。它是一種訪問(wèn)Internet上信息資源的方法。HTML（HyperTextMarkupLanguage）HTML是一種用于編寫網(wǎng)頁(yè)的主要標(biāo)記語(yǔ)言，是純文本文件。但存在的缺點(diǎn)，使它不能適應(yīng)越來(lái)越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，于是W3C又制定了XHTML（ExtensibleHyperTextMarkupLanguage）。XHTML是一種增強(qiáng)的HTML。HTTP（HypertextTransferProtocol）HTTP是一種在網(wǎng)絡(luò)上傳輸數(shù)據(jù)的協(xié)議，是用于從Web服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議。5知識(shí)講解1.1網(wǎng)站和網(wǎng)頁(yè)概述5知識(shí)講解網(wǎng)站與網(wǎng)頁(yè)網(wǎng)站（站點(diǎn)）是若干個(gè)相關(guān)網(wǎng)頁(yè)的集合，各個(gè)網(wǎng)頁(yè)通過(guò)超級(jí)鏈接相聯(lián)系。網(wǎng)頁(yè)是指由文本、圖像、動(dòng)畫、音頻、視頻等內(nèi)容組成的超文本文檔。其中，文本或圖像等網(wǎng)頁(yè)元素還可以指向其他文檔，這種功能稱為超級(jí)鏈接。CSS（CascadingStyleSheet）CSS是一組格式設(shè)置規(guī)則，用于控制頁(yè)面內(nèi)容的外觀，如特定字體和字大小、表格的邊框、文本顏色和背景顏色、鏈接顏色和鏈接下劃線等，并可確保在多個(gè)瀏覽器中以更一致的方式顯示。

6知識(shí)講解網(wǎng)站與網(wǎng)頁(yè)6知識(shí)講解2.網(wǎng)站建立方式使用自己的Web服務(wù)器。采用托管服務(wù)器。采用虛擬主機(jī)，即租用ISP硬盤空間，有獨(dú)立的域名和共享或獨(dú)立的IP地址，按空間大小和網(wǎng)絡(luò)寬帶資源收費(fèi)。3.中小型網(wǎng)站開(kāi)發(fā)的一般流程網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)階段：網(wǎng)站需求分析確定網(wǎng)站主題和內(nèi)容規(guī)劃網(wǎng)站的整體風(fēng)格規(guī)劃網(wǎng)站結(jié)構(gòu)設(shè)計(jì)頁(yè)面版式和效果網(wǎng)頁(yè)制作階段：頁(yè)面布局頁(yè)面內(nèi)容編排各個(gè)網(wǎng)頁(yè)相鏈接根據(jù)需要實(shí)現(xiàn)動(dòng)態(tài)功能測(cè)試發(fā)布與管理維護(hù)階段：網(wǎng)站測(cè)試與完善網(wǎng)站空間申請(qǐng)、發(fā)布、推廣網(wǎng)站維護(hù)、更新7知識(shí)講解2.網(wǎng)站建立方式7知識(shí)講解1.2開(kāi)發(fā)工具概述1.與網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)的常用工具

常用的網(wǎng)頁(yè)制作軟件工具有：Frontpage（所見(jiàn)即所得）Dreamweaver系列Homesite（所見(jiàn)即所得）HotdogHomePage（制作含多個(gè)分欄的頁(yè)面)Golive（類似于Dreamweaver）

常用的網(wǎng)頁(yè)素材處理工具有:Photoshop、FireworksFlash、LiveMotion（類似于Flash）、ShockwaveFreeHand（矢量繪圖）、Illustrator（矢量繪圖）CorelDraw（矢量繪圖，創(chuàng)建印刷或Web廣告或附屬物，如工藝品、徽標(biāo)、海報(bào)）GIFAnimatorCool3D（3D特效文字）Anfy(Java特效生成工具，如樹(shù)狀菜單、3D效果、圖像處理特效，為共享軟件)8知識(shí)講解1.2開(kāi)發(fā)工具概述8知識(shí)講解2．AdobeDreamweaverCS4簡(jiǎn)介代表了網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域最先進(jìn)的設(shè)計(jì)理念與技術(shù)是一款可視化的網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站管理工具，是網(wǎng)頁(yè)設(shè)計(jì)人員、網(wǎng)頁(yè)開(kāi)發(fā)人員與視覺(jué)設(shè)計(jì)人員的理想工具。是建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。具體應(yīng)用

大型綜合網(wǎng)站企業(yè)內(nèi)部經(jīng)營(yíng)管理系統(tǒng)交互式的網(wǎng)上教學(xué)網(wǎng)站企業(yè)網(wǎng)站、個(gè)人網(wǎng)站9知識(shí)講解2．AdobeDreamweaverCS4簡(jiǎn)介9技能操作示范任務(wù)1-1規(guī)劃系部網(wǎng)站

1．網(wǎng)站賞析

10技能操作示范任務(wù)1-1規(guī)劃系部網(wǎng)站10首頁(yè)色彩運(yùn)用大面積的藍(lán)色漸變?yōu)榈咨?，以藍(lán)色和綠色為主進(jìn)行搭配，和諧統(tǒng)一，文字內(nèi)容不多。模塊劃分清晰。正文區(qū)采用了動(dòng)畫，從靜態(tài)中突出靈動(dòng)感。整體給人溫馨、和諧夢(mèng)幻的感覺(jué)。頁(yè)頭圖片簡(jiǎn)單清晰，顯示出清新、大氣、和諧的簡(jiǎn)單之美。（1）班級(jí)網(wǎng)站11首頁(yè)色彩運(yùn)用大面積的藍(lán)色漸變?yōu)榈咨?，以藍(lán)色和綠色為主進(jìn)行搭配以黃、綠色調(diào)為主，采用了類似色的搭配，給人以清新、和諧的視覺(jué)美感。正文區(qū)中間部分的各個(gè)板塊標(biāo)題顏色和形式統(tǒng)一,下面部分的各個(gè)板塊標(biāo)題顏色不同。總體感覺(jué)是清晰，和諧統(tǒng)一中又有變化。首頁(yè)列出了導(dǎo)航菜單和網(wǎng)站地圖，一目了然。正文區(qū)采用了“左、中、右”三個(gè)板塊。導(dǎo)航菜單中各個(gè)小圖片的選用別具一格。（2）教育培訓(xùn)網(wǎng)站新東方教育網(wǎng)站（）12（2）教育培訓(xùn)網(wǎng)站12首頁(yè)清新、爽朗。顏色對(duì)比較為強(qiáng)烈，重點(diǎn)突出。采用灰色和玫瑰紅為主，灰色清爽、雅致，玫瑰紅溫馨、浪漫。分“上、中、下”三個(gè)版塊，中間分為“左、中、右”三個(gè)版塊。二級(jí)導(dǎo)航采用橫式排列，別具一格。頁(yè)頭動(dòng)畫體現(xiàn)了海爾集團(tuán)的理念和品質(zhì)，讓人既想到家的感覺(jué)又能記住該品牌。導(dǎo)航欄引人注目。（3）公司網(wǎng)站海爾集團(tuán)（）13首頁(yè)清新、爽朗。（3）公司網(wǎng)站13首頁(yè)給人的視覺(jué)效果是一種古樸的氣息迎面撲來(lái)。整體色彩、圖文搭配協(xié)調(diào)，咖啡色的運(yùn)用和圖片的搭配和諧。板塊劃分清晰。頁(yè)頭鳳凰古城圖片恰到好處，突出了主題，也起了廣告作用。導(dǎo)航欄的文字頗具特色。（4）旅游網(wǎng)站鳳凰古城旅游網(wǎng)（）14首頁(yè)給人的視覺(jué)效果是一種古樸的氣息迎面撲來(lái)。（4）旅游網(wǎng)站1引導(dǎo)頁(yè)簡(jiǎn)潔、現(xiàn)代感較強(qiáng)。背景用大塊的深綠色，給人安靜、穩(wěn)重的感覺(jué)。在字體的運(yùn)用上有大有小，有長(zhǎng)有短，顯得有對(duì)比，文字居中對(duì)齊，顯得莊重。圖片的動(dòng)態(tài)效果突出主題，產(chǎn)生運(yùn)動(dòng)的視覺(jué)感受。首頁(yè)整體視覺(jué)感受清晰、和諧。整體顏色采用綠色，既統(tǒng)一又有變化，主題突出。（5）體育類網(wǎng)站中國(guó)大眾體育網(wǎng)（）15引導(dǎo)頁(yè)簡(jiǎn)潔、現(xiàn)代感較強(qiáng)。背景用大塊的深綠色，給人安靜、穩(wěn)重的技能操作示范提問(wèn)：網(wǎng)站規(guī)劃包括哪些內(nèi)容？２.網(wǎng)站規(guī)劃步驟網(wǎng)站需求分析確定網(wǎng)站主題和內(nèi)容規(guī)劃網(wǎng)站的整體風(fēng)格規(guī)劃網(wǎng)站結(jié)構(gòu)網(wǎng)站Logo設(shè)計(jì)主要頁(yè)面設(shè)計(jì)16技能操作示范提問(wèn)：網(wǎng)站規(guī)劃包括哪些內(nèi)容？16技能操作示范（1）網(wǎng)站需求分析要弄清開(kāi)發(fā)的網(wǎng)站有哪些類型的用戶使用，各個(gè)用戶又有哪些不同的需求，網(wǎng)站的功能是什么等等，為網(wǎng)站設(shè)計(jì)提供可靠的依據(jù)。電子系網(wǎng)站是一個(gè)典型的系部網(wǎng)站，用來(lái)全面展示電子系的辦學(xué)情況和提供的服務(wù)等，以便本校和兄弟院校的老師和學(xué)生、關(guān)心本系發(fā)展的高中學(xué)生和家長(zhǎng)、尋求技術(shù)支持和服務(wù)的企業(yè)人員、尋求繼續(xù)深造的社會(huì)人員、教育管理部門領(lǐng)導(dǎo)能及時(shí)了解到系部辦學(xué)概況和系部榮譽(yù)、教學(xué)管理、學(xué)生管理、招生就業(yè)、技術(shù)服務(wù)、繼續(xù)教育等方面的信息。17技能操作示范（1）網(wǎng)站需求分析17技能操作示范（2）確定網(wǎng)站主題和內(nèi)容主題是網(wǎng)站所要表達(dá)的主要內(nèi)容，內(nèi)容要為主題服務(wù)。如旅游類網(wǎng)站主題是旅游情況介紹，內(nèi)容是旅游景點(diǎn)、旅游線路、旅游價(jià)格、旅行社、土特產(chǎn)品等介紹。公司網(wǎng)站主題是展示公司形象做好產(chǎn)品宣傳，內(nèi)容介紹公司的理念和特色、管理情況、產(chǎn)品情況、售后服務(wù)等內(nèi)容。電子系網(wǎng)站的主題是介紹系部辦學(xué)情況，所有內(nèi)容都要圍繞這一主題展開(kāi)。內(nèi)容應(yīng)該包括系部簡(jiǎn)介、系部機(jī)構(gòu)設(shè)置、師資力量、辦學(xué)特色、實(shí)訓(xùn)基地及實(shí)踐教學(xué)情況、教學(xué)管理與教學(xué)研究、學(xué)生培養(yǎng)、學(xué)生活動(dòng)、招生專業(yè)及招生情況、就業(yè)情況、畢業(yè)生情況、學(xué)生成果及榮譽(yù)、繼續(xù)教育相關(guān)情況、提供的技術(shù)支持與服務(wù)等。18技能操作示范（2）確定網(wǎng)站主題和內(nèi)容18技能操作示范（3）規(guī)劃網(wǎng)站的整體風(fēng)格網(wǎng)站的整體給瀏覽者的綜合感受，通過(guò)各個(gè)頁(yè)面體現(xiàn)（頁(yè)面的版式結(jié)構(gòu)、色彩搭配、圖像動(dòng)畫的使用等）。最主要的是主頁(yè)。電子系網(wǎng)站屬于教育類網(wǎng)站，既要體現(xiàn)出嚴(yán)謹(jǐn)、科學(xué)，又要體現(xiàn)出科技（電子、計(jì)算機(jī)技術(shù)發(fā)展、更新快）、熱情溫暖、希望。版面設(shè)計(jì)上主頁(yè)用雜合型布局，總體比較對(duì)稱，顯得嚴(yán)謹(jǐn)、格調(diào)高雅，而次頁(yè)左列為二級(jí)導(dǎo)航欄，右列為具體的鏈接內(nèi)容，這樣能給人留下信息豐富的印象。色彩上選用藍(lán)色為主色調(diào)，紅、黑、黃為搭配色，體現(xiàn)出電子及計(jì)算機(jī)行業(yè)和相應(yīng)專業(yè)的飛速發(fā)展，體現(xiàn)出電子系是熱情溫暖、充滿活力和希望的大家庭。各個(gè)頁(yè)面上選擇能突出電子系師生精神風(fēng)貌的系列圖片或動(dòng)畫。

19技能操作示范（3）規(guī)劃網(wǎng)站的整體風(fēng)格19技能操作示范說(shuō)明①頁(yè)面布局類型（版式類型）：上下型、左右型、雜合型、封面型、Flash動(dòng)畫型等。②網(wǎng)頁(yè)色彩設(shè)計(jì)知識(shí)：計(jì)算機(jī)屏幕的色彩是由紅、綠、藍(lán)三種原色組成。色彩三要素：色相：是色彩的相貌，即區(qū)分各類色彩的名稱，如紅色、綠色、橙色等。色相由波長(zhǎng)決定，如藍(lán)色、天藍(lán)、靛藍(lán)是同一色相。飽和度：又叫純度，是指色彩的純凈程度，即色相感覺(jué)鮮艷或灰暗的程度。明度：是指色彩的明暗程度，體現(xiàn)顏色的深淺。黑色、白色和灰色只有明度特征，沒(méi)有色相和飽和度的區(qū)別。20技能操作示范說(shuō)明20技能操作示范說(shuō)明顏色的計(jì)算機(jī)表示：以#開(kāi)頭的6位或3位十六進(jìn)制數(shù)，或使用預(yù)設(shè)的顏色名稱（如black、red、blue、gray、green、yellow、white、purple、silver、olive等）。顏色與心里感覺(jué)：當(dāng)看到不同的顏色時(shí)，會(huì)產(chǎn)生不同的心里感覺(jué):21技能操作示范說(shuō)明21技能操作示范22技能操作示范22技能操作示范說(shuō)明頁(yè)面色彩的搭配技巧色彩要鮮明、獨(dú)特注意色彩聯(lián)想色彩要搭配合理講究藝術(shù)性合理使用鄰近色合理使用對(duì)比色巧妙使用背景色嚴(yán)格控制色彩的數(shù)量頁(yè)面中圖像和動(dòng)畫使用：要有良好的視覺(jué)吸引力。要簡(jiǎn)潔明確地傳達(dá)網(wǎng)站信息。要有強(qiáng)而有力的誘導(dǎo)作用，造成鮮明的視覺(jué)感受效果，從觀看過(guò)程中產(chǎn)生愿望和欲求。23技能操作示范說(shuō)明23技能操作示范（4）規(guī)劃網(wǎng)站結(jié)構(gòu)包括：欄目結(jié)構(gòu)（即各關(guān)鍵網(wǎng)頁(yè)之間的關(guān)系，尤其是主頁(yè)與次頁(yè)）、鏈接結(jié)構(gòu)（即導(dǎo)航機(jī)制）、目錄結(jié)構(gòu)（即各個(gè)網(wǎng)頁(yè)文件的存放位置）電子系網(wǎng)站可分為主頁(yè)、系部概況、教學(xué)管理、繼續(xù)教育、支部工作、技術(shù)服務(wù)、精品課程、網(wǎng)上留言8大欄目，其中，系部概況包括本系簡(jiǎn)介、機(jī)構(gòu)設(shè)置、現(xiàn)任領(lǐng)導(dǎo)、骨干教師4個(gè)二級(jí)欄目，教學(xué)管理包括6個(gè)二級(jí)欄目，繼續(xù)教育包括6個(gè)二級(jí)欄目，支部工作包括4個(gè)二級(jí)欄目和部分三級(jí)欄目，技術(shù)服務(wù)包括4個(gè)二級(jí)欄目，精品課程和網(wǎng)上留言不含任何二級(jí)欄目或根據(jù)需要設(shè)置。在主頁(yè)上采用下拉菜單導(dǎo)航便于組織眾多的欄目，次頁(yè)上一級(jí)欄目采用橫排導(dǎo)航，二級(jí)欄目采用豎排導(dǎo)航，顯得整體感較強(qiáng)。在站點(diǎn)根文件夾中創(chuàng)建與各個(gè)欄目對(duì)應(yīng)的子文件夾和用來(lái)存放圖像、動(dòng)畫、樣式、腳本等公共文件的一些公共文件夾。24技能操作示范（4）規(guī)劃網(wǎng)站結(jié)構(gòu)24技能操作示范說(shuō)明①欄目結(jié)構(gòu)的規(guī)劃：將網(wǎng)站中所要涉及的信息進(jìn)行細(xì)分和合理組織，可分為三種子類型：層次結(jié)構(gòu)線性結(jié)構(gòu)網(wǎng)狀結(jié)構(gòu)②鏈接結(jié)構(gòu)的規(guī)劃：導(dǎo)航樣式：橫排導(dǎo)航、豎排導(dǎo)航、多排導(dǎo)航、圖片式導(dǎo)航、下拉菜單導(dǎo)航等。導(dǎo)航的表現(xiàn)形式：菜單、站內(nèi)搜索引擎、當(dāng)前瀏覽位置等。25技能操作示范說(shuō)明25技能操作示范說(shuō)明③目錄結(jié)構(gòu)的規(guī)劃：各個(gè)欄目對(duì)應(yīng)的網(wǎng)頁(yè)分別存放到建立的對(duì)應(yīng)的子文件夾中。主頁(yè)使用的或公共的圖像、動(dòng)畫、腳本、CSS樣式、下載的內(nèi)容、數(shù)據(jù)庫(kù)也分別存放到對(duì)應(yīng)的子文件夾中。需要經(jīng)常更新的內(nèi)容可單獨(dú)存放到一個(gè)子文件夾中。在各個(gè)欄目對(duì)應(yīng)的子文件夾中還可再創(chuàng)建一些子文件夾，以便存放其獨(dú)有的圖像、動(dòng)畫、腳本、更深層次的網(wǎng)頁(yè)等文件，但目錄的層次不宜過(guò)深，最好不要超過(guò)4層。26技能操作示范說(shuō)明26技能操作示范說(shuō)明文件夾、文件命名：文件夾、文件命名：采用英文單詞、漢語(yǔ)拼音或縮寫，并盡量用小寫，命名時(shí)可以包括數(shù)字和下劃線（不能以數(shù)字開(kāi)頭）。主頁(yè)命名：index.html、index.asp、index.jsp等。多個(gè)單詞或漢語(yǔ)拼音的連接：駱駝命名法：首字母小寫，隨后的每個(gè)單詞或漢語(yǔ)拼音的第一個(gè)字母大寫，如subTitle、jiXuJiaoYu。Pascal命名法：與駱駝命名法類似，但首字母大寫如JiXuJiaoYu。下劃線命名法：在命名中加入下劃線，如news_list。連字符命名法：使用連字符連接，如sidebar-menu。27技能操作示范說(shuō)明27技能操作示范（5）網(wǎng)站Logo設(shè)計(jì)設(shè)計(jì)創(chuàng)意來(lái)自網(wǎng)站的名稱和內(nèi)容：網(wǎng)站有代表性的人物、動(dòng)物、植物、物品等，可以用它們作為標(biāo)志，必要時(shí)可以以其作為設(shè)計(jì)藍(lán)本加以卡通化和藝術(shù)化。如皮皮網(wǎng)的調(diào)皮的小狗標(biāo)志、中國(guó)銀行的銅板標(biāo)志等。用自己網(wǎng)站的中文、英文名稱或相關(guān)的典型字母，采用不同的字體、字母的變形制作標(biāo)志。如海爾、中國(guó)聯(lián)通等公司網(wǎng)站的Logo。28技能操作示范（5）網(wǎng)站Logo設(shè)計(jì)28技能操作示范電子系網(wǎng)站的Logo設(shè)計(jì)可以有多種，教學(xué)網(wǎng)站中使用了第二種設(shè)計(jì)方法，用C和E分別代表系部由兩大專業(yè)類組成，即電子（Electronics）和計(jì)算機(jī)（Computer），A寓意飛速發(fā)展，圓環(huán)表示系部是一個(gè)和諧的大家庭。29技能操作示范電子系網(wǎng)站的Logo設(shè)計(jì)可以有多種，教學(xué)網(wǎng)站中使技能操作示范。

（6）主要頁(yè)面設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)的基本原則：用戶至上原則易用性原則實(shí)用性原則

30技能操作示范。（6）主要頁(yè)面設(shè)計(jì)30技能操作示范31技能操作示范31技能操作示范說(shuō)明①網(wǎng)頁(yè)版面尺寸規(guī)范:網(wǎng)頁(yè)的的總寬度（含邊距、邊框?qū)挾取⒀a(bǔ)白、內(nèi)容寬度）：800×600分辨率時(shí)不超過(guò)770px，1024×768分辨率時(shí)不宜超過(guò)1000px。網(wǎng)頁(yè)的長(zhǎng)度：不宜超過(guò)3屏(最佳長(zhǎng)度1.8～2.5屏)。網(wǎng)頁(yè)文件大小：主頁(yè)不宜超過(guò)60KB，二級(jí)頁(yè)面文件不宜超過(guò)90KB。廣告尺寸：應(yīng)為標(biāo)準(zhǔn)尺寸，全尺寸banner不宜超過(guò)30KB。②網(wǎng)頁(yè)元素設(shè)計(jì):頁(yè)頭：定義頁(yè)面主題，常放置頁(yè)面標(biāo)題、公司標(biāo)志以及旗幟廣告。頁(yè)腳：與頁(yè)頭相呼應(yīng)，放置副標(biāo)題、公司信息、制作者版權(quán)信息、瀏覽器分辨率要求等。32技能操作示范說(shuō)明32技能操作示范說(shuō)明頁(yè)面內(nèi)容編排:主次分明、重點(diǎn)突出大小搭配、錯(cuò)落有致圖文并茂、相得益彰適當(dāng)分塊、清晰易讀頁(yè)面內(nèi)容分塊方法：利用留空和劃線進(jìn)行分塊利用色塊進(jìn)行分塊利用線框分塊33技能操作示范說(shuō)明33技能操作示范說(shuō)明文字設(shè)計(jì)：用默認(rèn)字體（宋、黑、TimesNewRoman、Arial）。特殊字體用圖片。正文文本常使用帶有襯線的宋體（英文使用TimesNewRoman），標(biāo)題字體常使用不帶襯線的黑體（英文使用Arial）。特殊的字體常用于廣告、裝飾等。文字粗細(xì)：細(xì)顯得優(yōu)美，粗顯得有力。文字字號(hào)：正文12px～14px；版權(quán)10px～12px；標(biāo)題14px～16px。文字字間距和行間距：會(huì)改變?cè)L問(wèn)者的閱讀心理。34技能操作示范說(shuō)明34任務(wù)1-2熟悉網(wǎng)站開(kāi)發(fā)環(huán)境1.安裝AdobeDreamweaverCS4安裝AdobeDreamweaverCS4的方法與安裝其他應(yīng)用軟件的方法類似。2.AdobeDreamweaverCS4的啟動(dòng)在桌面上單擊【開(kāi)始】按鈕并打開(kāi)【程序】→【AdobeDreamweaverCS4】菜單，此時(shí)將自動(dòng)打開(kāi)操作界面，可進(jìn)行相關(guān)操作。在“我的電腦”或“資源管理器”中找到要編輯的網(wǎng)頁(yè)文件后，右擊該文件，在快捷菜單中選擇【使用AdobeDreamweaverCS4編輯】命令或【打開(kāi)方式】→【AdobeDreamweaverCS4】命令。

35任務(wù)1-2熟悉網(wǎng)站開(kāi)發(fā)環(huán)境353．AdobeDreamweaverCS4工作界面及使用（1）打開(kāi)【文件】→【新建】菜單，新建一空白HTML文檔，默認(rèn)文件名為Untitled-1.html。技能操作示范363．AdobeDreamweaverCS4工作界面及使用（2）修改文檔標(biāo)題為“站長(zhǎng)簡(jiǎn)介”，在文檔編輯區(qū)輸入“站長(zhǎng)個(gè)人檔案”后回車。再將光標(biāo)置于文字中間，用標(biāo)記選擇器選擇<p>以選中該段文本，在屬性面板的【格式】中選擇“標(biāo)題1”。說(shuō)明：切換到代碼視圖，查看自動(dòng)生成的代碼：<title>站長(zhǎng)簡(jiǎn)介</title>以及<h1>站長(zhǎng)個(gè)人檔案</h1>

其中：<title>稱為（左）標(biāo)簽，</title>稱為右標(biāo)簽，而“<title>站長(zhǎng)簡(jiǎn)介</title>”統(tǒng)稱為title元素。技能操作示范37（2）修改文檔標(biāo)題為“站長(zhǎng)簡(jiǎn)介”，在文檔編輯區(qū)輸入“站長(zhǎng)個(gè)人技能操作示范（3）打開(kāi)【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或【查看】→【標(biāo)尺】→【顯示】菜單，顯示網(wǎng)格或標(biāo)尺。（4）打開(kāi)【修改】→【頁(yè)面屬性】菜單（或單擊屬性面板上【頁(yè)面屬性】按鈕），設(shè)置網(wǎng)頁(yè)編碼方式。38技能操作示范（3）打開(kāi)【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或技能操作示范（5）打開(kāi)【修改】→【頁(yè)面屬性】菜單后設(shè)置。39技能操作示范（5）打開(kāi)【修改】→【頁(yè)面屬性】菜單后設(shè)置。39技能操作示范說(shuō)明①切換到代碼視圖，查看自動(dòng)生成的代碼：<styletype="text/css"><!--body,td,th{ font-family:宋體; font-size:12px; color:#F00;}body{ background-color:#0CF; margin-left:40px; margin-top:20px; margin-right:40px; margin-bottom:20px;}--></style>40技能操作示范說(shuō)明40技能操作示范說(shuō)明②外觀（HTML）：設(shè)置后自動(dòng)產(chǎn)生的表現(xiàn)代碼嵌入到XHTML標(biāo)簽中，不符合表現(xiàn)與結(jié)構(gòu)相分離的原則，故不建議采用。41技能操作示范說(shuō)明41技能操作示范說(shuō)明③鏈接（CSS）：設(shè)置超鏈接的有關(guān)屬性

。標(biāo)題（CSS）：設(shè)置6級(jí)標(biāo)題的有關(guān)屬性。跟蹤圖像：設(shè)置跟蹤圖像的有關(guān)屬性，以備制作網(wǎng)頁(yè)時(shí)作為對(duì)照用，它不會(huì)出現(xiàn)在最終作品中。（6）打開(kāi)【文件】→【保存】或【文件】→【保存全部】菜單（或按Ctrl+S鍵）保存網(wǎng)頁(yè)到桌面上，取名為zhanZhangJianJie.html。保存后在文檔選項(xiàng)卡式面板欄顯示出了保存的路徑。（7）關(guān)閉標(biāo)尺和網(wǎng)格的顯示。42技能操作示范說(shuō)明42技能操作示范任務(wù)1-3本地站點(diǎn)創(chuàng)建與管理1.本地站點(diǎn)創(chuàng)建1）打開(kāi)【文件】面板。2）創(chuàng)建本地站點(diǎn)（1）確定本地站點(diǎn)的根目錄所在位置，即D:\myweb（若無(wú)先創(chuàng)建之）。（2）打開(kāi)【站點(diǎn)】→【管理站點(diǎn)】菜單（或從【文件】面板的站點(diǎn)下拉列表框中選擇“管理站點(diǎn)”）后【新建】站點(diǎn)。（3）選擇【基本】或【高級(jí)】選項(xiàng)卡，按步驟完成站點(diǎn)定義的操作，站點(diǎn)取名為“電子系網(wǎng)站”。43技能操作示范任務(wù)1-3本地站點(diǎn)創(chuàng)建與管理43技能操作示范2．本地站點(diǎn)創(chuàng)建、管理與操作1）站點(diǎn)管理（1）打開(kāi)【管理站點(diǎn)】對(duì)話框。（2）選擇“電子系網(wǎng)站”并單擊【編輯】按鈕，可以重新編輯站點(diǎn)定義信息，例如可將站點(diǎn)文件夾更改為D盤中以學(xué)號(hào)和名字命名的文件夾。（3）單擊【導(dǎo)出】按鈕將站點(diǎn)設(shè)置信息導(dǎo)出為外部文件“電子系網(wǎng)站.ste”保存到站點(diǎn)根文件夾中，以備以后導(dǎo)入用。說(shuō)明：【復(fù)制】：根據(jù)現(xiàn)有的某個(gè)站點(diǎn)創(chuàng)建結(jié)構(gòu)相同或類似的站點(diǎn)?！緞h除】：刪除某個(gè)站點(diǎn)，而實(shí)際的本地文件夾和文件并未刪除。44技能操作示范2．本地站點(diǎn)創(chuàng)建、管理與操作44技能操作示范

2）站點(diǎn)操作（1）創(chuàng)建文件夾、文件：在【文件】面板中選中根文件夾，在其下創(chuàng)建3個(gè)子文件夾image、attachment、xiBuGaiKuang，再在xiBuGaiKuang文件夾中創(chuàng)建bxjj.html文件。（2）復(fù)制文件夾xiBuGaiKuang，將復(fù)制后的文件夾更名為jiaoXueGuanLi，再將文件夾jiaoXueGuanLi中的bxjj.html更名為tszy.html。使用“我的電腦”或“資源管理器”工具將桌面上的zhanZhangJianJie.html復(fù)制到D:\myweb下。在【文件】面板上將其zhanZhangJianJie.html拖入到文件夾attachment中。在站點(diǎn)根文件夾下新建4個(gè)子文件夾jiXuJiaoYu、zhiBuGongZuo、JiShuFuWu、wangShangLiuYan。45技能操作示范2）站點(diǎn)操作45技能操作示范任務(wù)1-4制作站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)1）打開(kāi)網(wǎng)頁(yè)文檔：在【文件】面板上雙擊zhanZhangJianJie.html。2）文檔編輯（1）設(shè)置網(wǎng)頁(yè)的背景圖像為方格狀小圖像bg.gif（在與本書配套的“實(shí)訓(xùn)素材”中），并復(fù)制到image子文件夾中。（2）在網(wǎng)頁(yè)中繼續(xù)輸入各個(gè)小標(biāo)題和對(duì)應(yīng)內(nèi)容、插入站長(zhǎng)劇照，它們是關(guān)于站長(zhǎng)個(gè)人情況的，再在屬性面板的【HTML選項(xiàng)卡】上設(shè)置網(wǎng)頁(yè)內(nèi)容的格式，如列表、縮進(jìn)、設(shè)置粗體和斜體等，同時(shí)設(shè)置劇照為左對(duì)齊。說(shuō)明：自動(dòng)生成的背景代碼：body{background-image:url(../image/bg.gif);}在body中也自動(dòng)生成了與相應(yīng)內(nèi)容匹配的代碼。46技能操作示范任務(wù)1-4制作站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)46技能操作示范3）文檔保存：Ctrl+S。4）預(yù)覽文檔：F12。說(shuō)明：可以添加其他瀏覽器用來(lái)預(yù)覽文檔。方法是：?jiǎn)螕粑臋n工具欄的【在瀏覽器中預(yù)覽/調(diào)試】選項(xiàng)按鈕并選擇【編輯瀏覽器列表】后添加。47技能操作示范3）文檔保存：Ctrl+S。47任務(wù)實(shí)施（1）規(guī)劃學(xué)校網(wǎng)站項(xiàng)目，要求從網(wǎng)站的需求分析、主題和內(nèi)容、整體風(fēng)格、結(jié)構(gòu)等方面進(jìn)行整體規(guī)劃。（2）設(shè)計(jì)出網(wǎng)站Logo和主要網(wǎng)頁(yè)的版式。（3）創(chuàng)建命名為“xxx網(wǎng)站”的站點(diǎn)，站點(diǎn)根文件夾為D:\myschool。在其中創(chuàng)建若干子文件夾，以備用來(lái)存放公共文件和網(wǎng)站各個(gè)欄目對(duì)應(yīng)的文件。（4）創(chuàng)建xiaoZuJianJie.html網(wǎng)頁(yè)介紹所在的學(xué)習(xí)小組情況，要有標(biāo)題，并要綜合使用文字、圖像等方式進(jìn)行介紹，同時(shí)要具有一定的美觀效果。48任務(wù)實(shí)施（1）規(guī)劃學(xué)校網(wǎng)站項(xiàng)目，要求從網(wǎng)站的需求分析、主題和演示與點(diǎn)評(píng)演示與點(diǎn)評(píng)（下次課前進(jìn)行）49演示與點(diǎn)評(píng)49歸納總結(jié)2．歸納總結(jié)重點(diǎn)：網(wǎng)站規(guī)劃的方法與要求

對(duì)電子系網(wǎng)站進(jìn)行了整體規(guī)劃

創(chuàng)建了本地站點(diǎn)并對(duì)站點(diǎn)進(jìn)行了管理與操作。通過(guò)站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)的制作熟悉了AdobeDreamweaverCS4開(kāi)發(fā)環(huán)境。網(wǎng)站開(kāi)發(fā)的流程、網(wǎng)頁(yè)設(shè)計(jì)的原則和開(kāi)發(fā)工具。只有具備了這些基本的知識(shí)和技能才能進(jìn)一步進(jìn)行后續(xù)網(wǎng)頁(yè)的設(shè)計(jì)與制作。50歸納總結(jié)2．歸納總結(jié)50課堂作業(yè)（1）為什么要進(jìn)行網(wǎng)站規(guī)劃？直接開(kāi)發(fā)不行嗎？（2）設(shè)計(jì)網(wǎng)頁(yè)版式可以借助于哪些軟件進(jìn)行？（3）為什么必須創(chuàng)建站點(diǎn)？其一般步驟是什么？（4）頁(yè)面屬性包括哪些內(nèi)容？在某一網(wǎng)頁(yè)文檔中設(shè)置的頁(yè)面屬性是否在另一網(wǎng)頁(yè)文檔中也反映出來(lái)？51課堂作業(yè)（1）為什么要進(jìn)行網(wǎng)站規(guī)劃？直接開(kāi)發(fā)不行嗎？51下次再見(jiàn)！52下次再見(jiàn)！52學(xué)習(xí)情境一：網(wǎng)站初建

任務(wù)二:規(guī)劃系部網(wǎng)站并熟悉網(wǎng)站開(kāi)發(fā)環(huán)境53學(xué)習(xí)情境一：網(wǎng)站初建

任務(wù)二:規(guī)劃系部網(wǎng)站并熟悉網(wǎng)站開(kāi)發(fā)環(huán)境知識(shí)能力目標(biāo)知識(shí)能力目標(biāo)：了解網(wǎng)站開(kāi)發(fā)流程、網(wǎng)站規(guī)劃的要求、網(wǎng)頁(yè)設(shè)計(jì)的原則了解常用網(wǎng)頁(yè)制作工具認(rèn)識(shí)AdobeDreamweaverCS4開(kāi)發(fā)環(huán)境能夠規(guī)劃網(wǎng)站能夠創(chuàng)建、管理、操作本地站點(diǎn)能夠制作簡(jiǎn)單網(wǎng)頁(yè)并會(huì)保存、打開(kāi)、預(yù)覽網(wǎng)頁(yè)54知識(shí)能力目標(biāo)知識(shí)能力目標(biāo)：2項(xiàng)目效果展示項(xiàng)目效果圖55項(xiàng)目效果展示項(xiàng)目效果圖3任務(wù)描述任務(wù)描述1．規(guī)劃電子系網(wǎng)站從網(wǎng)站的需求分析、主題和內(nèi)容、整體風(fēng)格、結(jié)構(gòu)等方面對(duì)網(wǎng)站項(xiàng)目進(jìn)行整體規(guī)劃，同時(shí)設(shè)計(jì)出網(wǎng)站Logo和主要網(wǎng)頁(yè)的版式。2．熟悉網(wǎng)站開(kāi)發(fā)環(huán)境啟動(dòng)AdobeDreamweaverCS4后熟悉工作界面上的菜單欄、文檔工具欄、文檔選項(xiàng)卡式面板欄、文檔編輯區(qū)、狀態(tài)欄、功能面板等。3．本地站點(diǎn)創(chuàng)建、管理與操作創(chuàng)建名為“電子系網(wǎng)站”的站點(diǎn)，站點(diǎn)根文件夾為本地磁盤的myweb文件夾。先在myweb中創(chuàng)建若干子文件夾和文件，再對(duì)站點(diǎn)進(jìn)行管理和操作。4．制作站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)根據(jù)自身具體情況制作站長(zhǎng)簡(jiǎn)介網(wǎng)頁(yè)。56任務(wù)描述任務(wù)描述4知識(shí)講解1.1網(wǎng)站和網(wǎng)頁(yè)概述

1.基本術(shù)語(yǔ)WWW（WorldWideWeb）建立在Internet上的全球性的圖形信息系統(tǒng)，是超文本文檔的集合。URL(統(tǒng)一資源定位器)是Web服務(wù)器的地址，也稱網(wǎng)址。它是一種訪問(wèn)Internet上信息資源的方法。HTML（HyperTextMarkupLanguage）HTML是一種用于編寫網(wǎng)頁(yè)的主要標(biāo)記語(yǔ)言，是純文本文件。但存在的缺點(diǎn)，使它不能適應(yīng)越來(lái)越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，于是W3C又制定了XHTML（ExtensibleHyperTextMarkupLanguage）。XHTML是一種增強(qiáng)的HTML。HTTP（HypertextTransferProtocol）HTTP是一種在網(wǎng)絡(luò)上傳輸數(shù)據(jù)的協(xié)議，是用于從Web服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議。57知識(shí)講解1.1網(wǎng)站和網(wǎng)頁(yè)概述5知識(shí)講解網(wǎng)站與網(wǎng)頁(yè)網(wǎng)站（站點(diǎn)）是若干個(gè)相關(guān)網(wǎng)頁(yè)的集合，各個(gè)網(wǎng)頁(yè)通過(guò)超級(jí)鏈接相聯(lián)系。網(wǎng)頁(yè)是指由文本、圖像、動(dòng)畫、音頻、視頻等內(nèi)容組成的超文本文檔。其中，文本或圖像等網(wǎng)頁(yè)元素還可以指向其他文檔，這種功能稱為超級(jí)鏈接。CSS（CascadingStyleSheet）CSS是一組格式設(shè)置規(guī)則，用于控制頁(yè)面內(nèi)容的外觀，如特定字體和字大小、表格的邊框、文本顏色和背景顏色、鏈接顏色和鏈接下劃線等，并可確保在多個(gè)瀏覽器中以更一致的方式顯示。

58知識(shí)講解網(wǎng)站與網(wǎng)頁(yè)6知識(shí)講解2.網(wǎng)站建立方式使用自己的Web服務(wù)器。采用托管服務(wù)器。采用虛擬主機(jī)，即租用ISP硬盤空間，有獨(dú)立的域名和共享或獨(dú)立的IP地址，按空間大小和網(wǎng)絡(luò)寬帶資源收費(fèi)。3.中小型網(wǎng)站開(kāi)發(fā)的一般流程網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)階段：網(wǎng)站需求分析確定網(wǎng)站主題和內(nèi)容規(guī)劃網(wǎng)站的整體風(fēng)格規(guī)劃網(wǎng)站結(jié)構(gòu)設(shè)計(jì)頁(yè)面版式和效果網(wǎng)頁(yè)制作階段：頁(yè)面布局頁(yè)面內(nèi)容編排各個(gè)網(wǎng)頁(yè)相鏈接根據(jù)需要實(shí)現(xiàn)動(dòng)態(tài)功能測(cè)試發(fā)布與管理維護(hù)階段：網(wǎng)站測(cè)試與完善網(wǎng)站空間申請(qǐng)、發(fā)布、推廣網(wǎng)站維護(hù)、更新59知識(shí)講解2.網(wǎng)站建立方式7知識(shí)講解1.2開(kāi)發(fā)工具概述1.與網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)的常用工具

常用的網(wǎng)頁(yè)制作軟件工具有：Frontpage（所見(jiàn)即所得）Dreamweaver系列Homesite（所見(jiàn)即所得）HotdogHomePage（制作含多個(gè)分欄的頁(yè)面)Golive（類似于Dreamweaver）

常用的網(wǎng)頁(yè)素材處理工具有:Photoshop、FireworksFlash、LiveMotion（類似于Flash）、ShockwaveFreeHand（矢量繪圖）、Illustrator（矢量繪圖）CorelDraw（矢量繪圖，創(chuàng)建印刷或Web廣告或附屬物，如工藝品、徽標(biāo)、海報(bào)）GIFAnimatorCool3D（3D特效文字）Anfy(Java特效生成工具，如樹(shù)狀菜單、3D效果、圖像處理特效，為共享軟件)60知識(shí)講解1.2開(kāi)發(fā)工具概述8知識(shí)講解2．AdobeDreamweaverCS4簡(jiǎn)介代表了網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域最先進(jìn)的設(shè)計(jì)理念與技術(shù)是一款可視化的網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站管理工具，是網(wǎng)頁(yè)設(shè)計(jì)人員、網(wǎng)頁(yè)開(kāi)發(fā)人員與視覺(jué)設(shè)計(jì)人員的理想工具。是建立Web站點(diǎn)和應(yīng)用程序的專業(yè)工具。具體應(yīng)用

大型綜合網(wǎng)站企業(yè)內(nèi)部經(jīng)營(yíng)管理系統(tǒng)交互式的網(wǎng)上教學(xué)網(wǎng)站企業(yè)網(wǎng)站、個(gè)人網(wǎng)站61知識(shí)講解2．AdobeDreamweaverCS4簡(jiǎn)介9技能操作示范任務(wù)1-1規(guī)劃系部網(wǎng)站

1．網(wǎng)站賞析

62技能操作示范任務(wù)1-1規(guī)劃系部網(wǎng)站10首頁(yè)色彩運(yùn)用大面積的藍(lán)色漸變?yōu)榈咨?，以藍(lán)色和綠色為主進(jìn)行搭配，和諧統(tǒng)一，文字內(nèi)容不多。模塊劃分清晰。正文區(qū)采用了動(dòng)畫，從靜態(tài)中突出靈動(dòng)感。整體給人溫馨、和諧夢(mèng)幻的感覺(jué)。頁(yè)頭圖片簡(jiǎn)單清晰，顯示出清新、大氣、和諧的簡(jiǎn)單之美。（1）班級(jí)網(wǎng)站63首頁(yè)色彩運(yùn)用大面積的藍(lán)色漸變?yōu)榈咨?，以藍(lán)色和綠色為主進(jìn)行搭配以黃、綠色調(diào)為主，采用了類似色的搭配，給人以清新、和諧的視覺(jué)美感。正文區(qū)中間部分的各個(gè)板塊標(biāo)題顏色和形式統(tǒng)一,下面部分的各個(gè)板塊標(biāo)題顏色不同?？傮w感覺(jué)是清晰，和諧統(tǒng)一中又有變化。首頁(yè)列出了導(dǎo)航菜單和網(wǎng)站地圖，一目了然。正文區(qū)采用了“左、中、右”三個(gè)板塊。導(dǎo)航菜單中各個(gè)小圖片的選用別具一格。（2）教育培訓(xùn)網(wǎng)站新東方教育網(wǎng)站（）64（2）教育培訓(xùn)網(wǎng)站12首頁(yè)清新、爽朗。顏色對(duì)比較為強(qiáng)烈，重點(diǎn)突出。采用灰色和玫瑰紅為主，灰色清爽、雅致，玫瑰紅溫馨、浪漫。分“上、中、下”三個(gè)版塊，中間分為“左、中、右”三個(gè)版塊。二級(jí)導(dǎo)航采用橫式排列，別具一格。頁(yè)頭動(dòng)畫體現(xiàn)了海爾集團(tuán)的理念和品質(zhì)，讓人既想到家的感覺(jué)又能記住該品牌。導(dǎo)航欄引人注目。（3）公司網(wǎng)站海爾集團(tuán)（）65首頁(yè)清新、爽朗。（3）公司網(wǎng)站13首頁(yè)給人的視覺(jué)效果是一種古樸的氣息迎面撲來(lái)。整體色彩、圖文搭配協(xié)調(diào)，咖啡色的運(yùn)用和圖片的搭配和諧。板塊劃分清晰。頁(yè)頭鳳凰古城圖片恰到好處，突出了主題，也起了廣告作用。導(dǎo)航欄的文字頗具特色。（4）旅游網(wǎng)站鳳凰古城旅游網(wǎng)（）66首頁(yè)給人的視覺(jué)效果是一種古樸的氣息迎面撲來(lái)。（4）旅游網(wǎng)站1引導(dǎo)頁(yè)簡(jiǎn)潔、現(xiàn)代感較強(qiáng)。背景用大塊的深綠色，給人安靜、穩(wěn)重的感覺(jué)。在字體的運(yùn)用上有大有小，有長(zhǎng)有短，顯得有對(duì)比，文字居中對(duì)齊，顯得莊重。圖片的動(dòng)態(tài)效果突出主題，產(chǎn)生運(yùn)動(dòng)的視覺(jué)感受。首頁(yè)整體視覺(jué)感受清晰、和諧。整體顏色采用綠色，既統(tǒng)一又有變化，主題突出。（5）體育類網(wǎng)站中國(guó)大眾體育網(wǎng)（）67引導(dǎo)頁(yè)簡(jiǎn)潔、現(xiàn)代感較強(qiáng)。背景用大塊的深綠色，給人安靜、穩(wěn)重的技能操作示范提問(wèn)：網(wǎng)站規(guī)劃包括哪些內(nèi)容？２.網(wǎng)站規(guī)劃步驟網(wǎng)站需求分析確定網(wǎng)站主題和內(nèi)容規(guī)劃網(wǎng)站的整體風(fēng)格規(guī)劃網(wǎng)站結(jié)構(gòu)網(wǎng)站Logo設(shè)計(jì)主要頁(yè)面設(shè)計(jì)68技能操作示范提問(wèn)：網(wǎng)站規(guī)劃包括哪些內(nèi)容？16技能操作示范（1）網(wǎng)站需求分析要弄清開(kāi)發(fā)的網(wǎng)站有哪些類型的用戶使用，各個(gè)用戶又有哪些不同的需求，網(wǎng)站的功能是什么等等，為網(wǎng)站設(shè)計(jì)提供可靠的依據(jù)。電子系網(wǎng)站是一個(gè)典型的系部網(wǎng)站，用來(lái)全面展示電子系的辦學(xué)情況和提供的服務(wù)等，以便本校和兄弟院校的老師和學(xué)生、關(guān)心本系發(fā)展的高中學(xué)生和家長(zhǎng)、尋求技術(shù)支持和服務(wù)的企業(yè)人員、尋求繼續(xù)深造的社會(huì)人員、教育管理部門領(lǐng)導(dǎo)能及時(shí)了解到系部辦學(xué)概況和系部榮譽(yù)、教學(xué)管理、學(xué)生管理、招生就業(yè)、技術(shù)服務(wù)、繼續(xù)教育等方面的信息。69技能操作示范（1）網(wǎng)站需求分析17技能操作示范（2）確定網(wǎng)站主題和內(nèi)容主題是網(wǎng)站所要表達(dá)的主要內(nèi)容，內(nèi)容要為主題服務(wù)。如旅游類網(wǎng)站主題是旅游情況介紹，內(nèi)容是旅游景點(diǎn)、旅游線路、旅游價(jià)格、旅行社、土特產(chǎn)品等介紹。公司網(wǎng)站主題是展示公司形象做好產(chǎn)品宣傳，內(nèi)容介紹公司的理念和特色、管理情況、產(chǎn)品情況、售后服務(wù)等內(nèi)容。電子系網(wǎng)站的主題是介紹系部辦學(xué)情況，所有內(nèi)容都要圍繞這一主題展開(kāi)。內(nèi)容應(yīng)該包括系部簡(jiǎn)介、系部機(jī)構(gòu)設(shè)置、師資力量、辦學(xué)特色、實(shí)訓(xùn)基地及實(shí)踐教學(xué)情況、教學(xué)管理與教學(xué)研究、學(xué)生培養(yǎng)、學(xué)生活動(dòng)、招生專業(yè)及招生情況、就業(yè)情況、畢業(yè)生情況、學(xué)生成果及榮譽(yù)、繼續(xù)教育相關(guān)情況、提供的技術(shù)支持與服務(wù)等。70技能操作示范（2）確定網(wǎng)站主題和內(nèi)容18技能操作示范（3）規(guī)劃網(wǎng)站的整體風(fēng)格網(wǎng)站的整體給瀏覽者的綜合感受，通過(guò)各個(gè)頁(yè)面體現(xiàn)（頁(yè)面的版式結(jié)構(gòu)、色彩搭配、圖像動(dòng)畫的使用等）。最主要的是主頁(yè)。電子系網(wǎng)站屬于教育類網(wǎng)站，既要體現(xiàn)出嚴(yán)謹(jǐn)、科學(xué)，又要體現(xiàn)出科技（電子、計(jì)算機(jī)技術(shù)發(fā)展、更新快）、熱情溫暖、希望。版面設(shè)計(jì)上主頁(yè)用雜合型布局，總體比較對(duì)稱，顯得嚴(yán)謹(jǐn)、格調(diào)高雅，而次頁(yè)左列為二級(jí)導(dǎo)航欄，右列為具體的鏈接內(nèi)容，這樣能給人留下信息豐富的印象。色彩上選用藍(lán)色為主色調(diào)，紅、黑、黃為搭配色，體現(xiàn)出電子及計(jì)算機(jī)行業(yè)和相應(yīng)專業(yè)的飛速發(fā)展，體現(xiàn)出電子系是熱情溫暖、充滿活力和希望的大家庭。各個(gè)頁(yè)面上選擇能突出電子系師生精神風(fēng)貌的系列圖片或動(dòng)畫。

71技能操作示范（3）規(guī)劃網(wǎng)站的整體風(fēng)格19技能操作示范說(shuō)明①頁(yè)面布局類型（版式類型）：上下型、左右型、雜合型、封面型、Flash動(dòng)畫型等。②網(wǎng)頁(yè)色彩設(shè)計(jì)知識(shí)：計(jì)算機(jī)屏幕的色彩是由紅、綠、藍(lán)三種原色組成。色彩三要素：色相：是色彩的相貌，即區(qū)分各類色彩的名稱，如紅色、綠色、橙色等。色相由波長(zhǎng)決定，如藍(lán)色、天藍(lán)、靛藍(lán)是同一色相。飽和度：又叫純度，是指色彩的純凈程度，即色相感覺(jué)鮮艷或灰暗的程度。明度：是指色彩的明暗程度，體現(xiàn)顏色的深淺。黑色、白色和灰色只有明度特征，沒(méi)有色相和飽和度的區(qū)別。72技能操作示范說(shuō)明20技能操作示范說(shuō)明顏色的計(jì)算機(jī)表示：以#開(kāi)頭的6位或3位十六進(jìn)制數(shù)，或使用預(yù)設(shè)的顏色名稱（如black、red、blue、gray、green、yellow、white、purple、silver、olive等）。顏色與心里感覺(jué)：當(dāng)看到不同的顏色時(shí)，會(huì)產(chǎn)生不同的心里感覺(jué):73技能操作示范說(shuō)明21技能操作示范74技能操作示范22技能操作示范說(shuō)明頁(yè)面色彩的搭配技巧色彩要鮮明、獨(dú)特注意色彩聯(lián)想色彩要搭配合理講究藝術(shù)性合理使用鄰近色合理使用對(duì)比色巧妙使用背景色嚴(yán)格控制色彩的數(shù)量頁(yè)面中圖像和動(dòng)畫使用：要有良好的視覺(jué)吸引力。要簡(jiǎn)潔明確地傳達(dá)網(wǎng)站信息。要有強(qiáng)而有力的誘導(dǎo)作用，造成鮮明的視覺(jué)感受效果，從觀看過(guò)程中產(chǎn)生愿望和欲求。75技能操作示范說(shuō)明23技能操作示范（4）規(guī)劃網(wǎng)站結(jié)構(gòu)包括：欄目結(jié)構(gòu)（即各關(guān)鍵網(wǎng)頁(yè)之間的關(guān)系，尤其是主頁(yè)與次頁(yè)）、鏈接結(jié)構(gòu)（即導(dǎo)航機(jī)制）、目錄結(jié)構(gòu)（即各個(gè)網(wǎng)頁(yè)文件的存放位置）電子系網(wǎng)站可分為主頁(yè)、系部概況、教學(xué)管理、繼續(xù)教育、支部工作、技術(shù)服務(wù)、精品課程、網(wǎng)上留言8大欄目，其中，系部概況包括本系簡(jiǎn)介、機(jī)構(gòu)設(shè)置、現(xiàn)任領(lǐng)導(dǎo)、骨干教師4個(gè)二級(jí)欄目，教學(xué)管理包括6個(gè)二級(jí)欄目，繼續(xù)教育包括6個(gè)二級(jí)欄目，支部工作包括4個(gè)二級(jí)欄目和部分三級(jí)欄目，技術(shù)服務(wù)包括4個(gè)二級(jí)欄目，精品課程和網(wǎng)上留言不含任何二級(jí)欄目或根據(jù)需要設(shè)置。在主頁(yè)上采用下拉菜單導(dǎo)航便于組織眾多的欄目，次頁(yè)上一級(jí)欄目采用橫排導(dǎo)航，二級(jí)欄目采用豎排導(dǎo)航，顯得整體感較強(qiáng)。在站點(diǎn)根文件夾中創(chuàng)建與各個(gè)欄目對(duì)應(yīng)的子文件夾和用來(lái)存放圖像、動(dòng)畫、樣式、腳本等公共文件的一些公共文件夾。76技能操作示范（4）規(guī)劃網(wǎng)站結(jié)構(gòu)24技能操作示范說(shuō)明①欄目結(jié)構(gòu)的規(guī)劃：將網(wǎng)站中所要涉及的信息進(jìn)行細(xì)分和合理組織，可分為三種子類型：層次結(jié)構(gòu)線性結(jié)構(gòu)網(wǎng)狀結(jié)構(gòu)②鏈接結(jié)構(gòu)的規(guī)劃：導(dǎo)航樣式：橫排導(dǎo)航、豎排導(dǎo)航、多排導(dǎo)航、圖片式導(dǎo)航、下拉菜單導(dǎo)航等。導(dǎo)航的表現(xiàn)形式：菜單、站內(nèi)搜索引擎、當(dāng)前瀏覽位置等。77技能操作示范說(shuō)明25技能操作示范說(shuō)明③目錄結(jié)構(gòu)的規(guī)劃：各個(gè)欄目對(duì)應(yīng)的網(wǎng)頁(yè)分別存放到建立的對(duì)應(yīng)的子文件夾中。主頁(yè)使用的或公共的圖像、動(dòng)畫、腳本、CSS樣式、下載的內(nèi)容、數(shù)據(jù)庫(kù)也分別存放到對(duì)應(yīng)的子文件夾中。需要經(jīng)常更新的內(nèi)容可單獨(dú)存放到一個(gè)子文件夾中。在各個(gè)欄目對(duì)應(yīng)的子文件夾中還可再創(chuàng)建一些子文件夾，以便存放其獨(dú)有的圖像、動(dòng)畫、腳本、更深層次的網(wǎng)頁(yè)等文件，但目錄的層次不宜過(guò)深，最好不要超過(guò)4層。78技能操作示范說(shuō)明26技能操作示范說(shuō)明文件夾、文件命名：文件夾、文件命名：采用英文單詞、漢語(yǔ)拼音或縮寫，并盡量用小寫，命名時(shí)可以包括數(shù)字和下劃線（不能以數(shù)字開(kāi)頭）。主頁(yè)命名：index.html、index.asp、index.jsp等。多個(gè)單詞或漢語(yǔ)拼音的連接：駱駝命名法：首字母小寫，隨后的每個(gè)單詞或漢語(yǔ)拼音的第一個(gè)字母大寫，如subTitle、jiXuJiaoYu。Pascal命名法：與駱駝命名法類似，但首字母大寫如JiXuJiaoYu。下劃線命名法：在命名中加入下劃線，如news_list。連字符命名法：使用連字符連接，如sidebar-menu。79技能操作示范說(shuō)明27技能操作示范（5）網(wǎng)站Logo設(shè)計(jì)設(shè)計(jì)創(chuàng)意來(lái)自網(wǎng)站的名稱和內(nèi)容：網(wǎng)站有代表性的人物、動(dòng)物、植物、物品等，可以用它們作為標(biāo)志，必要時(shí)可以以其作為設(shè)計(jì)藍(lán)本加以卡通化和藝術(shù)化。如皮皮網(wǎng)的調(diào)皮的小狗標(biāo)志、中國(guó)銀行的銅板標(biāo)志等。用自己網(wǎng)站的中文、英文名稱或相關(guān)的典型字母，采用不同的字體、字母的變形制作標(biāo)志。如海爾、中國(guó)聯(lián)通等公司網(wǎng)站的Logo。80技能操作示范（5）網(wǎng)站Logo設(shè)計(jì)28技能操作示范電子系網(wǎng)站的Logo設(shè)計(jì)可以有多種，教學(xué)網(wǎng)站中使用了第二種設(shè)計(jì)方法，用C和E分別代表系部由兩大專業(yè)類組成，即電子（Electronics）和計(jì)算機(jī)（Computer），A寓意飛速發(fā)展，圓環(huán)表示系部是一個(gè)和諧的大家庭。81技能操作示范電子系網(wǎng)站的Logo設(shè)計(jì)可以有多種，教學(xué)網(wǎng)站中使技能操作示范。

（6）主要頁(yè)面設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)的基本原則：用戶至上原則易用性原則實(shí)用性原則

82技能操作示范。（6）主要頁(yè)面設(shè)計(jì)30技能操作示范83技能操作示范31技能操作示范說(shuō)明①網(wǎng)頁(yè)版面尺寸規(guī)范:網(wǎng)頁(yè)的的總寬度（含邊距、邊框?qū)挾?、補(bǔ)白、內(nèi)容寬度）：800×600分辨率時(shí)不超過(guò)770px，1024×768分辨率時(shí)不宜超過(guò)1000px。網(wǎng)頁(yè)的長(zhǎng)度：不宜超過(guò)3屏(最佳長(zhǎng)度1.8～2.5屏)。網(wǎng)頁(yè)文件大?。褐黜?yè)不宜超過(guò)60KB，二級(jí)頁(yè)面文件不宜超過(guò)90KB。廣告尺寸：應(yīng)為標(biāo)準(zhǔn)尺寸，全尺寸banner不宜超過(guò)30KB。②網(wǎng)頁(yè)元素設(shè)計(jì):頁(yè)頭：定義頁(yè)面主題，常放置頁(yè)面標(biāo)題、公司標(biāo)志以及旗幟廣告。頁(yè)腳：與頁(yè)頭相呼應(yīng)，放置副標(biāo)題、公司信息、制作者版權(quán)信息、瀏覽器分辨率要求等。84技能操作示范說(shuō)明32技能操作示范說(shuō)明頁(yè)面內(nèi)容編排:主次分明、重點(diǎn)突出大小搭配、錯(cuò)落有致圖文并茂、相得益彰適當(dāng)分塊、清晰易讀頁(yè)面內(nèi)容分塊方法：利用留空和劃線進(jìn)行分塊利用色塊進(jìn)行分塊利用線框分塊85技能操作示范說(shuō)明33技能操作示范說(shuō)明文字設(shè)計(jì)：用默認(rèn)字體（宋、黑、TimesNewRoman、Arial）。特殊字體用圖片。正文文本常使用帶有襯線的宋體（英文使用TimesNewRoman），標(biāo)題字體常使用不帶襯線的黑體（英文使用Arial）。特殊的字體常用于廣告、裝飾等。文字粗細(xì)：細(xì)顯得優(yōu)美，粗顯得有力。文字字號(hào)：正文12px～14px；版權(quán)10px～12px；標(biāo)題14px～16px。文字字間距和行間距：會(huì)改變?cè)L問(wèn)者的閱讀心理。86技能操作示范說(shuō)明34任務(wù)1-2熟悉網(wǎng)站開(kāi)發(fā)環(huán)境1.安裝AdobeDreamweaverCS4安裝AdobeDreamweaverCS4的方法與安裝其他應(yīng)用軟件的方法類似。2.AdobeDreamweaverCS4的啟動(dòng)在桌面上單擊【開(kāi)始】按鈕并打開(kāi)【程序】→【AdobeDreamweaverCS4】菜單，此時(shí)將自動(dòng)打開(kāi)操作界面，可進(jìn)行相關(guān)操作。在“我的電腦”或“資源管理器”中找到要編輯的網(wǎng)頁(yè)文件后，右擊該文件，在快捷菜單中選擇【使用AdobeDreamweaverCS4編輯】命令或【打開(kāi)方式】→【AdobeDreamweaverCS4】命令。

87任務(wù)1-2熟悉網(wǎng)站開(kāi)發(fā)環(huán)境353．AdobeDreamweaverCS4工作界面及使用（1）打開(kāi)【文件】→【新建】菜單，新建一空白HTML文檔，默認(rèn)文件名為Untitled-1.html。技能操作示范883．AdobeDreamweaverCS4工作界面及使用（2）修改文檔標(biāo)題為“站長(zhǎng)簡(jiǎn)介”，在文檔編輯區(qū)輸入“站長(zhǎng)個(gè)人檔案”后回車。再將光標(biāo)置于文字中間，用標(biāo)記選擇器選擇<p>以選中該段文本，在屬性面板的【格式】中選擇“標(biāo)題1”。說(shuō)明：切換到代碼視圖，查看自動(dòng)生成的代碼：<title>站長(zhǎng)簡(jiǎn)介</title>以及<h1>站長(zhǎng)個(gè)人檔案</h1>

其中：<title>稱為（左）標(biāo)簽，</title>稱為右標(biāo)簽，而“<title>站長(zhǎng)簡(jiǎn)介</title>”統(tǒng)稱為title元素。技能操作示范89（2）修改文檔標(biāo)題為“站長(zhǎng)簡(jiǎn)介”，在文檔編輯區(qū)輸入“站長(zhǎng)個(gè)人技能操作示范（3）打開(kāi)【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或【查看】→【標(biāo)尺】→【顯示】菜單，顯示網(wǎng)格或標(biāo)尺。（4）打開(kāi)【修改】→【頁(yè)面屬性】菜單（或單擊屬性面板上【頁(yè)面屬性】按鈕），設(shè)置網(wǎng)頁(yè)編碼方式。90技能操作示范（3）打開(kāi)【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或技能操作示范（5）打開(kāi)【修改】→【頁(yè)面屬性】菜單后設(shè)置。91技能操作示范（5）打開(kāi)【修改】→【頁(yè)面屬性】菜單后設(shè)置。39技能操作示范說(shuō)明①切換到代碼視圖，查看自動(dòng)生成的代碼：<styletype="text/css"><!--body,td,th{ font-family:宋體; font-size:12px; color:#F00;}body{ background-color:#0CF; margin-left:40px; margin-top:20px; margin-right:40px; margin-bottom:20px;}--></style>92技能操作示范說(shuō)明40技能操作示范說(shuō)明②外觀（HTML）：設(shè)置后自動(dòng)產(chǎn)生的表現(xiàn)代碼嵌入到XHTML標(biāo)簽中，不符合表現(xiàn)與結(jié)構(gòu)相分離的原則，故不建議采用。93技能操作示范說(shuō)明41技能操作示范說(shuō)明③鏈接（CSS）：設(shè)置超鏈接的有關(guān)屬性

。標(biāo)題（CSS）：設(shè)置6級(jí)標(biāo)題的有關(guān)屬性。跟蹤圖像：設(shè)置跟蹤圖像的有關(guān)屬性，以備制作網(wǎng)頁(yè)時(shí)作為對(duì)照用，它不會(huì)出現(xiàn)在最終作品中。（6）打開(kāi)【文件】→【保存】或【文件】→【保存全部】菜單（或按Ctrl+S鍵）保存網(wǎng)頁(yè)到桌面上，取名為zhanZhangJianJie.html。保存后在文檔選項(xiàng)卡式面板欄顯示出了保存的路徑。（7）