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

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

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

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

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

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

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

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

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

1．網(wǎng)站賞析

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

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

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

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

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

其中：<title>稱為（左）標(biāo)簽，</title>稱為右標(biāo)簽，而“<title>站長簡介</title>”統(tǒng)稱為title元素。技能操作示范37（2）修改文檔標(biāo)題為“站長簡介”，在文檔編輯區(qū)輸入“站長個人技能操作示范（3）打開【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或【查看】→【標(biāo)尺】→【顯示】菜單，顯示網(wǎng)格或標(biāo)尺。（4）打開【修改】→【頁面屬性】菜單（或單擊屬性面板上【頁面屬性】按鈕），設(shè)置網(wǎng)頁編碼方式。38技能操作示范（3）打開【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或技能操作示范（5）打開【修改】→【頁面屬性】菜單后設(shè)置。39技能操作示范（5）打開【修改】→【頁面屬性】菜單后設(shè)置。39技能操作示范說明①切換到代碼視圖，查看自動生成的代碼：<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技能操作示范說明40技能操作示范說明②外觀（HTML）：設(shè)置后自動產(chǎn)生的表現(xiàn)代碼嵌入到XHTML標(biāo)簽中，不符合表現(xiàn)與結(jié)構(gòu)相分離的原則，故不建議采用。41技能操作示范說明41技能操作示范說明③鏈接（CSS）：設(shè)置超鏈接的有關(guān)屬性

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

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

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

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

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

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

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

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

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

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

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

1．網(wǎng)站賞析

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

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

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

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

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

其中：<title>稱為（左）標(biāo)簽，</title>稱為右標(biāo)簽，而“<title>站長簡介</title>”統(tǒng)稱為title元素。技能操作示范89（2）修改文檔標(biāo)題為“站長簡介”，在文檔編輯區(qū)輸入“站長個人技能操作示范（3）打開【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或【查看】→【標(biāo)尺】→【顯示】菜單，顯示網(wǎng)格或標(biāo)尺。（4）打開【修改】→【頁面屬性】菜單（或單擊屬性面板上【頁面屬性】按鈕），設(shè)置網(wǎng)頁編碼方式。90技能操作示范（3）打開【查看】→【網(wǎng)格設(shè)置】→【顯示網(wǎng)格】或技能操作示范（5）打開【修改】→【頁面屬性】菜單后設(shè)置。91技能操作示范（5）打開【修改】→【頁面屬性】菜單后設(shè)置。39技能操作示范說明①切換到代碼視圖，查看自動生成的代碼：<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技能操作示范說明40技能操作示范說明②外觀（HTML）：設(shè)置后自動產(chǎn)生的表現(xiàn)代碼嵌入到XHTML標(biāo)簽中，不符合表現(xiàn)與結(jié)構(gòu)相分離的原則，故不建議采用。93技能操作示范說明41技能操作示范說明③鏈接（CSS）：設(shè)置超鏈接的有關(guān)屬性

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