學習情境一：網站初建

任務二:規劃系部網站并熟悉網站開發環境1學習情境一：網站初建

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

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

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

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

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

大型綜合網站企業內部經營管理系統交互式的網上教學網站企業網站、個人網站9知識講解2．AdobeDreamweaverCS4簡介9技能操作示范任務1-1規劃系部網站

1．網站賞析

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

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

（6）主要頁面設計網頁設計的基本原則：用戶至上原則易用性原則實用性原則

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

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

其中：<title>稱為（左）標簽，</title>稱為右標簽，而“<title>站長簡介</title>”統稱為title元素。技能操作示范37（2）修改文檔標題為“站長簡介”，在文檔編輯區輸入“站長個人技能操作示范（3）打開【查看】→【網格設置】→【顯示網格】或【查看】→【標尺】→【顯示】菜單，顯示網格或標尺。（4）打開【修改】→【頁面屬性】菜單（或單擊屬性面板上【頁面屬性】按鈕），設置網頁編碼方式。38技能操作示范（3）打開【查看】→【網格設置】→【顯示網格】或技能操作示范（5）打開【修改】→【頁面屬性】菜單后設置。39技能操作示范（5）打開【修改】→【頁面屬性】菜單后設置。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）：設置后自動產生的表現代碼嵌入到XHTML標簽中，不符合表現與結構相分離的原則，故不建議采用。41技能操作示范說明41技能操作示范說明③鏈接（CSS）：設置超鏈接的有關屬性

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

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

對電子系網站進行了整體規劃

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

任務二:規劃系部網站并熟悉網站開發環境53學習情境一：網站初建

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

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

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

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

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

大型綜合網站企業內部經營管理系統交互式的網上教學網站企業網站、個人網站61知識講解2．AdobeDreamweaverCS4簡介9技能操作示范任務1-1規劃系部網站

1．網站賞析

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

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

（6）主要頁面設計網頁設計的基本原則：用戶至上原則易用性原則實用性原則

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

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

其中：<title>稱為（左）標簽，</title>稱為右標簽，而“<title>站長簡介</title>”統稱為title元素。技能操作示范89（2）修改文檔標題為“站長簡介”，在文檔編輯區輸入“站長個人技能操作示范（3）打開【查看】→【網格設置】→【顯示網格】或【查看】→【標尺】→【顯示】菜單，顯示網格或標尺。（4）打開【修改】→【頁面屬性】菜單（或單擊屬性面板上【頁面屬性】按鈕），設置網頁編碼方式。90技能操作示范（3）打開【查看】→【網格設置】→【顯示網格】或技能操作示范（5）打開【修改】→【頁面屬性】菜單后設置。91技能操作示范（5）打開【修改】→【頁面屬性】菜單后設置。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）：設置后自動產生的表現代碼嵌入到XHTML標簽中，不符合表現與結構相分離的原則，故不建議采用。93技能操作示范說明41技能操作示范說明③鏈接（CSS）：設置超鏈接的有關屬性

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