個人主頁制作

《個人主頁制作》由會員分享，可在線閱讀，更多相關《個人主頁制作（27頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 xx學院 課程實訓報告 實訓題目 :個人主頁制作 系 部 電氣與信息工程系 專 業(yè) 班 級 電子信息 學 號 姓 名 xxx 指 導 教 師 xxx 完 成 日 期 2016年1月8日 請預覽后下載！ 課程實訓任務書 專業(yè) 電子信息

2、 班級 課程名稱 網(wǎng)頁制作 設計題目 個人主頁制作 指導教師 xxx 起止時間 2016年1月4日至1月15日 周數(shù) 2周 設計地點 實驗室 設計目的： 掌握網(wǎng)頁制作過程、掌握網(wǎng)頁制作軟件的使用，了解軟件的使用和用途。 設計任務或主要技術指標： 1. 網(wǎng)頁制作軟件的靈活使用。 2. 掌握制作的過程的順序和流程； 設計進度與要求： 第1-2天：布置任務，查找相關資料； 第3-5天：熟悉網(wǎng)頁制作軟件，研究軟件功能； 第6-7天：查找相關資料，撰寫課程設計報告； 第8-10天：進行答辯； 主要參考書及參考資料： [1]胡崧. HTM

3、L 從入門到精通[M].北京：中國青年出版社，2007 [2]知新文化. HTML 完全手冊與速查辭典[M].北京：科學出版社，2007 [3]楊選輝.網(wǎng)頁設計與制作教程[M].北京：清華大學出版社，2009 [4]王誠君，劉振華，郭竑暉，高中山.Dreamweaver 8 網(wǎng)頁設計應用教程[M].北京：清華大 學出版社，2007 教研室主任（簽名） 系（部）主任（簽名） 年 月 日 請預覽后下載！ 課程實訓評定意見 實訓題目： 個人主頁制作 學生姓名：

4、 xxx 專業(yè)： 電子信息工程技術 班級： 電子信息 評定意見： 評定成績： 指導教師（簽名）： 年 月 日 請預覽后下載！ 摘 要 Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨

5、越瀏覽器限制的充滿動感的網(wǎng)頁。本次實訓主要制作個人簡歷的網(wǎng)頁，掌握網(wǎng)頁制作過程、掌握網(wǎng)頁制作軟件的使用，了解軟件的使用和用途。 關鍵詞：Dreamweaver 個人簡歷 網(wǎng)頁制作 請預覽后下載！ 目錄 第一章引言 1 1.1什么是Dreamweaver 1 1.2 Dreamweaver功能介紹 1 1.3Dreamweaver的優(yōu)缺點 3 第二章主頁介紹 8 2.1站點 8 2.1.1 創(chuàng)建站點 8 2.1.2 創(chuàng)建站點內(nèi)容 9 2.2 首頁

6、9 2.2.1設置首頁的頁面屬性 10 2.2.2 插入圖像 10 2.2.3插入多媒體 11 2.2.4插入文本 12 2.3創(chuàng)建其它網(wǎng)頁 13 2.4建立網(wǎng)頁鏈接 14 總結 16 致謝 17 參考文獻 18 請預覽后下載！ 第一章引言 1.1什么是Dreamweaver Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限

7、制的充滿動感的網(wǎng)頁。Macromedia公司成立于1992年，2005年被Adobe公司收購。Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標準通用語言下的一個應用）編輯的功能。它有系統(tǒng)的版本。隨Macromedia被收購后，Adobe也開始計劃開發(fā)版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了排版引擎"Presto" 作為網(wǎng)頁預覽。 1.2 Dreamweaver功能介紹 功能特色，借助共享型用戶界面設計,在AdobeCreativeSuite4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個工作環(huán)境

8、快速切換到下一個環(huán)境。具體功能，CS6新增功能，利用AdobeDreamweaverCS6軟件中改善的FTP性能，更高效地傳輸大型文件。更新的“實時視圖”和“多屏幕預覽”面板可呈現(xiàn)HTML5代碼，使您能檢查自己的工作。自適應網(wǎng)格，可響應的自適應網(wǎng)格版面，使用響應迅速的CSS3自適應網(wǎng)格版面，來創(chuàng)建跨平臺和跨瀏覽器的兼容網(wǎng)頁設計。利用簡潔、業(yè)界標準的代碼為各種不同設備和計算機開發(fā)項目，提高工作效率。直觀地創(chuàng)建復雜網(wǎng)頁設計和頁面版面，無需忙于編寫代碼。改善FTP性能，利用重新改良的多線程FTP傳輸工具節(jié)省上傳大型文件的時間。更快速高效地上傳網(wǎng)站文件，縮短制作時間。Catalyst集成，使用Drea

9、mweaver中集成的面板連接并編輯您利用需另外購買建立的網(wǎng)站。利用托管解決方案建立電子商務網(wǎng)站。 增強型移動支持使用更新的移動框架支持為IOS和Android平臺建立本地應用程序。建立觸及移動受眾的應用程序，同時簡化您的移動開發(fā)工作流程。更新的支持更新的支持可輕松為Android和IOS建立和封裝本地應用程序。通過改編現(xiàn)有的HTML代碼來創(chuàng)建移動應用程序。使用Phone模擬器檢查您的設計。 CSS3轉換,將CSS屬性變化制成動畫轉換效果，使網(wǎng)頁設計栩栩如生。在您處理網(wǎng)頁元素和創(chuàng)建優(yōu)美效果時保持對網(wǎng)頁設計的精準控制。更新的實時視圖使用更新的“實時視圖”功能在發(fā)布前測試頁面?！皩崟r視圖”現(xiàn)已

10、使用最新版的轉換引擎，能夠提供絕佳的HTML5支持。更新的多屏幕預覽面板利用更新的“多屏幕預覽”面板檢查智能手機、平板電腦和臺式機所建立項目的顯示畫面。該增強型面板能夠讓您檢查HTML5內(nèi)容呈現(xiàn)。 請預覽后下載！ CS5后的新增功借助AdobeDreamweaverCS5.5軟件充滿自信地進行設計、構建最新的HTML5和CSS3網(wǎng)站、令交互性更上一層樓。 同時為多個設備進行設計，并對全面的代碼檢查充滿自信。多屏幕預覽面板借助多屏幕預”面板，為智能手機、Tablet和個人計算機進行設計。借助媒體查詢支持，開發(fā)人員可以通過一個面板為各種設備設計樣式并實現(xiàn)渲染可視化。 CSS3/HTML

11、5支持,通過CSS面板設置樣式，該面板經(jīng)過更新可支持新的CSS3規(guī)則。設計視圖現(xiàn)支持媒體查詢，在您調(diào)整屏幕尺寸的同時可應用不同的樣式。使用HTML5進行前瞻性的編碼，同時提供代碼提示和設計視圖渲染支持。集成借助代碼提示加入高級交互性。是行業(yè)標準JavaScript庫，允許您為網(wǎng)頁輕松加入各種交互性。借助針對手機的起動模板快速啟動。借助構建本機Android和IOS應用程序。借助新增的Phone功能為Android和IOS構建并打包本機應用程序。借助Phone構建本機Android和IOS應用程序。新增功能，實時視圖新增功能，借助DreamweaverCS4中新增的實時視圖在真實的瀏覽器環(huán)境中設

12、計網(wǎng)頁,同時仍可以直接訪問代碼。呈現(xiàn)的屏幕內(nèi)容會立即反映出對代碼所做的更改。針對和框架的代碼提示新增功能。借助改進的JavaScript核心對象和基本數(shù)據(jù)類型支持,更快速、準確地編寫JavaScript。通過集成包括Prototype和流行框架,充分利用DreamweaverCS4的擴展編碼功能。相關文件新增功能，源代碼,在“設計”視圖中查看父頁面。集成編碼增強功能領略內(nèi)建代碼提示的強大功能,令框架、原型和幾種服務器語言中的編碼更快、更清晰。 代碼導航器新增功能新增的“代碼導航器”功能可顯示影響當前選定內(nèi)容的所有代碼源,如CSS規(guī)則、服務器端包括、外部JavaScript功能、模板、源文件等

13、。創(chuàng)作支持新增功能在DW中直接新建基于HTML和應用程序。 在Dreamweaver中即可預覽AIR應用程序。使應用程序隨時可與AIR打包及代碼簽名功能一起部署。FLV支持增強功能通過輕松點擊和符合標準的編碼將FLV集成到任何網(wǎng)頁中-無需軟件知識。設計時在Dreamweaver全新的實時視圖中播放FLV影片。 支持領先技術，在支持大多數(shù)領先Web開發(fā)技術的工具中進行設計和編碼,這些技術包括HTML、XHTML、CSS、XML、JavaScript、軟件和ASP。 學習最佳做法 ,參考CSS最佳做法實現(xiàn)可視化設計并輔以通俗易懂的實用概念說明。在支持可訪問性和最佳做法的同時創(chuàng)造Ajax驅動的

14、交互性。集成增強,通過跨產(chǎn)品線的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工具的智能集成和強大功能,包括AdobeFLASHCS4Professional、FIREWORKSCS4、PhotoshopCS4和DeviceCentralCS4軟件。 請預覽后下載！ 新增功能,在Dreamweaver中設計頁面,使最終用戶能使用在線服務編輯他們的網(wǎng)頁,無需幫助或使用其它軟件。作為Dreamweaver設計人員,您可以限制對特定頁面、特殊區(qū)域的更改權,甚至可以自定格式選項。Subversion集成新增功能在Dreamweaver中直接更新站點和登記修改內(nèi)容。Drea

15、mweaverCS4與Subversion軟件緊密集成,后者是一款開放源代碼版本控制系統(tǒng),可以提供更強大的登記/注銷體驗?？缙脚_支持增強功能隨心所欲,盡情工作:DreamweaverCS4可用于基于Intel或PowerPC的Mac、以及系統(tǒng)。在首選系統(tǒng)中設計,交付跨平臺、可靠、一致、高性能的成果。 1.3Dreamweaver的優(yōu)缺點 Dreamweaver軟件如圖1-1。 圖1-1Dreamweaver軟件 以用最快速的方式將Firework，F(xiàn)reehand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網(wǎng)頁安全色。對于選單，快捷鍵與格式

16、控制，都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設計工具，如外掛模組等搭配，不需離開Dreamweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖檔的最佳化?？刂颇芰?Dreamweaver是唯一提供、視覺化編輯與原始碼編輯同步的設計工具。它包含和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver支援精準定位，利用可輕易轉換成表格的圖

17、層以拖拉置放的方式進行版面配置。所見即所得Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務功能，提供超強的支援能力給Third-party廠商，包含ASP，Apache，ColdFusion，Tango與自行發(fā)展的應用軟體。當您正使用Dreamweaver在設計動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預覽網(wǎng)頁。 請預覽后下載！ 夢幻樣版將內(nèi)容與設計分開，應用于快速網(wǎng)頁更新和團隊合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。全方位的呈現(xiàn)利用D

18、reamweaver設計的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于動態(tài)HTML支援和鼠標換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當有新的瀏覽器上市時，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報告。 網(wǎng)站管理，使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver會自動更新所有鏈接。使用支援文字、HTML碼、HTML屬性標簽和一般語法的搜尋及置換功能使得復雜的網(wǎng)站更

19、新變得迅速又簡單。軟件特點，效果難一致，難以精確達到與瀏覽器完全一致的顯示效果也就是說您在所見即所得網(wǎng)頁編輯器中制作的網(wǎng)頁放到瀏覽器中是很難完全達到您真正想要的效果，這一點在結構復雜一些的網(wǎng)頁（如分幀結構、動態(tài)網(wǎng)頁結構）中便可以體現(xiàn)出來。代碼難控制，相比之下，非所見所得的網(wǎng)頁編輯器，就不存在這個問題，因為所有的HTML代碼都在您的監(jiān)控下產(chǎn)生，但是由于非所見所得編輯器的先天條件就注定了它的工作低效率。如何實現(xiàn)兩者的完美結合，則既產(chǎn)生干凈、準確的HTML代碼，具備所見所得的高效率、直觀性。Dream weaver是在網(wǎng)頁設計與制作領域中用戶最多、應用最廣、功能最強大的軟件，隨著Dream weav

20、er 8的發(fā)布，更堅定Dreamweaver在該領域的地位。它集網(wǎng)頁設計、網(wǎng)站開發(fā)和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設計、開發(fā)、制作的首選工具。 1、靈活的編寫方式 Dream weaver具有靈活編寫網(wǎng)頁的特點，不但將世界一流水平的“設計”和“代碼”編輯器合二為一，而且在設計窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。2、可視化編輯界面 Dream weaver是一種所見即所得的HTML編輯器，可實現(xiàn)頁面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫，同時亦保證了其專業(yè)性和兼容性，并且可以對內(nèi)部的HTML編輯器和任何第三方的HTM

21、L編輯器進行實時的訪問。無論用戶習慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dream weaver都能提供便捷的方式使用戶設計網(wǎng)頁和管理網(wǎng)站變得更容易。 3、功能更多的 請預覽后下載！ CSS支持——CSS可視化設計、CSS檢查工具 4、動態(tài)跨瀏覽器驗證 當保存時系統(tǒng)自動檢查當前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試用瀏覽器，同時系統(tǒng)自動檢驗以確定頁面有沒有目標瀏覽器不支持的tags或CSS結構。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和CSS規(guī)則是否適應目前的主瀏覽器。5、強大的WEB站點管理功能 6、內(nèi)建的圖形編輯引擎 7、Dream weaver的集成特性

22、 Dream weaver 8繼承了Fireworks、Flash和Shock wave的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。 8、豐富的媒體支持能力 可以方便地加入Java、Flash、Shock wave、Active X以及其他媒體。Dream weaver具有強大的多媒體處理功能，在設計DHTML和CSS方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和交互操作。Dream weaver還提供行為和時間線兩種控件來產(chǎn)生交互式響應和進行動畫處理。 9、超強的擴展能力 Dream weaver還支持第三方插件

23、，任何人都可以根據(jù)自己的需要擴展Dream weaver的功能，并且可以發(fā)布這些插件。一個網(wǎng)站設計得成功與否，很大程度上決定于設計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結構、欄目的設置、網(wǎng)站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。Dream weaver：這是網(wǎng)頁三劍客之一，專門制作網(wǎng)頁的工具，可以自動將網(wǎng)頁生成代碼，是普通網(wǎng)頁制作者的首選工具，界面簡單，實用功能比較強大。設計活動中

24、包含著主觀和客觀兩方面的因素，在確立了網(wǎng)頁主題之后，首先要明確和熟悉設計的對象和構成的要素。網(wǎng)頁藝術設計涉及的具體內(nèi)容很多，可以概括為視聽元素和版式設計兩個方面。1.視聽元素 這里所說的視聽元素，主要包括：文本、背景、按鈕、圖標、圖像、表格、顏色、導航工具、背景音樂、動態(tài)影像等。無論是文字、圖形、動畫，還是音頻、視頻，網(wǎng)頁設計者所要考慮的是如何以感人的形式把它們放進頁面這個“大畫布”里。多媒體技術的運用大大豐富了網(wǎng)頁藝術設計的表現(xiàn)力。以上各視聽元素大多數(shù)瀏覽器本身都可以顯示或收聽，無需任何外部程序或模塊支持。比如，大部分瀏覽器都可以顯示GIF、JPEG圖形和GIF89a動畫。還有些多媒體文件（

25、如MP3音樂）需要先下載到本地硬盤上，然后啟動相應的外部程序來播放。另外，在瀏覽器使用插件（Plug-in）可以播放更多格式的多媒體文件。微軟推出IE瀏覽器后，提供了基于OLE的Active X技術，用來在網(wǎng)頁中播放多媒體。目前Active X已經(jīng)成為熱門技術。另一種播放多媒體的技術是Java Applet。它是用Java語言編寫的應用于網(wǎng)頁之中的小應用程序，相比于插件和Active X，Java Applet具有更大的靈活性和良好的跨平臺能力，因此具有很好的發(fā)展前景?？傊夹g的不斷發(fā)展使多媒體元素在網(wǎng)頁藝術設計中的綜合運用越來越廣泛，使瀏覽者可以享受到更加完美的視聽效果。這些新技術的出現(xiàn)，

26、也對網(wǎng)頁的藝術設計提出了更高的要求。Access數(shù)據(jù)庫是集成在Microsoft公司開發(fā)的產(chǎn)品更新?lián)Q代Office系統(tǒng)中的集成軟件[10]。 Access是一個數(shù)據(jù)庫管理系統(tǒng)，它之所以被集成到Office中而不是Visual Studio中，是因為它與其它的數(shù)據(jù)庫管理系統(tǒng)（如Visual Fox Pro）相比更加簡單易學，一個普通的計算機用戶即可掌握并使用它。而且最重要的一點是，Access的功能足夠強大，足以應付一般的數(shù)據(jù)管理及處理需要。 ODBC（Open Database Connectivity開放式數(shù)據(jù)庫互聯(lián)）是微軟推出的一種工業(yè)標準，一種開放的獨立于廠商的API應用程序接口，可

27、以跨平臺訪問各種個人計算機、小型機以及主機系統(tǒng)[11]。ODBC作為一個工業(yè)標準，絕大多數(shù)數(shù)據(jù)庫廠商、大多數(shù)應用軟件和工具軟件廠商都為自己的產(chǎn)品提供了ODBC接口或提供了ODBC支持，這其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，當然也包括了Access用Microsoft Access 來創(chuàng)建數(shù)據(jù)庫，最簡單的是通過它提供的的一個 請預覽后下載！ “向導”，在啟動這個軟件以后，建立數(shù)據(jù)庫文件的操作。下面是我利用“向導”來創(chuàng)建一份數(shù)據(jù)庫文件的具體操作步驟： 選擇“Access數(shù)據(jù)庫向導、數(shù)據(jù)頁和項目”單選按扭，然后單擊“確定”按鈕，若選擇Microsoft A

28、ccess對話框中的“空Access數(shù)據(jù)庫”單選項按鈕，就會建立一個空的數(shù)據(jù)庫了，數(shù)據(jù)庫里面的信息需要手工來添加，若選擇“打開已有文件”單選按鈕則可以從下方的列表中選擇打開已經(jīng)存在的數(shù)據(jù)庫。在彈出的“新建”對話框中，我們可以選擇一個模板來快速建立數(shù)據(jù)庫，我們就 先選擇個“定單管理”看看，然后單擊“確定”按扭。“文件新建數(shù)據(jù)庫”對話框的功能是，指定數(shù)據(jù)文件名，以及保存它的文件夾。我們就以它的初始文件名“定單入口1”吧，單擊“創(chuàng)建”安扭后，新建的數(shù)據(jù)庫文件就將被指定保存到Microsoft Access默認的文件夾下了，或我們給它指定一個新的也行，這樣一來，一份新的數(shù)據(jù)庫就建立好了，屏幕上也將顯示

29、“數(shù)據(jù)庫向導”對話框?！跋乱徊健卑粹o。以上“數(shù)據(jù)庫向導”對話框分為左右兩部分，左邊的窗口是用來選擇“數(shù)據(jù)庫中 的表”，右邊的窗口是用來選擇“表中的字段”。選擇好所需要的數(shù)據(jù)庫中的表和表中的字段之后，就單擊下一步按鈕。以上“數(shù)據(jù)庫向導”對話框是用來確定屏幕的顯示樣式，我們就采用標準樣式吧，單擊下一步按鈕。以上“數(shù)據(jù)庫向導”對話框是用來確定打印報表的樣式的，我們可以選擇如“組 織”樣式，然后單擊下一步按鈕。以上“數(shù)據(jù)庫向導”對話框的作用是確定數(shù)據(jù)庫的標題和是否在所有報表上加一 幅圖片，我們就先設定數(shù)據(jù)庫的標題為“定單入口”，并不在所有報表上加圖片，然后單擊下一步按鈕。單擊以上 請預覽后下載！

30、 “數(shù)據(jù)庫向導”對話框的“完成”按鈕，就完成了創(chuàng)建數(shù)據(jù)庫的工作了。象這個數(shù)據(jù)庫在使用之前還會彈出“我的公司信息”對話框，當然，不同的模板 是不相同的，象這個就是要求輸入公司的名稱和地址信息，如下圖所示，關閉這個對話框，系統(tǒng)將自動保存信息。 關閉“我的公司信息”對話框后，會彈出“主切換面板”對話框。位于“主切換 面板”對話框后面的是“定單入口1”窗體，通過這兩個窗體即可對新創(chuàng)建的數(shù)據(jù)庫進行各種操作了。無論什么時候使用“數(shù)據(jù)庫向導”新建數(shù)據(jù)庫，Microsoft Access都將自動新建一個切換面板，這個面板對瀏覽數(shù)據(jù)庫都是很有幫助的，“切換面板”中有一些按鈕，單擊它們可以打開相應的窗體和報表，

31、或打開其他窗體和報表的切換面板、退出Microsoft Access或自定義切換面。 請預覽后下載！ 第二章主頁介紹 2.1站點 2.1.1 創(chuàng)建站點 要制作一個網(wǎng)站，第一步操作都是一樣的，就是要創(chuàng)造一個“站點”，這樣可以使整個網(wǎng)站的脈絡結構清晰地展現(xiàn)在面前，避免了以后再進行紛雜的管理。 從菜單中選擇“站點/新建站點”在彈出如下圖2.1所示的對話框，在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱“xxx”。在桌面新建一個文件夾“電子信息-xxx”設為本地站點文件夾。 圖2.1

32、創(chuàng)建站點 請預覽后下載！ 填好后，單擊“高級設置”，進入下一個步驟。如下圖2.2所示將默認圖像文件夾設為“image”，單機“保存”。 圖2.2站點設置 2.1.2創(chuàng)建站點內(nèi)容 站點創(chuàng)建完成后，就可以創(chuàng)建Web頁來填充站點了，在菜單中選擇“新建文件”，新建一個文件后將其命名為“首頁.htm(或首頁.html),它就是未來的首頁。 由于“個人簡歷”網(wǎng)站分為“首頁”、“基礎資料”、“教育背景”、“自我評價”、“愛好“、“職業(yè)證書”這六個大欄目網(wǎng)頁，所以要新建六個html文件，分別對應上面的六個大欄目網(wǎng)頁，存放它們各自的內(nèi)容。 2.2 首頁 每個網(wǎng)站都會有一個首頁，就

33、功能上而言，它代表著一個網(wǎng)站的風格與特色，就網(wǎng)站架構上而言，它代表了網(wǎng)站的第一層架構，至于網(wǎng)站上其他Web頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。 首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端的設置，一般的有index.htm,default.htm或home.htm等。 首頁的布局有很多方法，在這里我所用到的是如下圖2.3所示的“布局模式AP Div（A）”。使用了CSS樣式表中的絕對定位屬性的<div>標簽就叫做AP Div。Dreamweaver CS5中的“AP Div”就是Dreamweaver舊版本中的“層”

34、。AP Div可以理解為浮動在網(wǎng)頁上的一個頁面，可以放置在頁面中的任何位置，可以隨意移動這些位置，而且它們的位置可以相互重疊，也可以任意控制AP Div的前后位置、顯示與隱藏，因此大大加強了網(wǎng)頁設計的靈活性。 請預覽后下載！ 在網(wǎng)頁設計中，將網(wǎng)頁元素放到AP Div中，然后在頁面中精確定位AP Div的位置，可以實現(xiàn)網(wǎng)頁內(nèi)容的精確定位，使網(wǎng)頁內(nèi)容在頁面上排列得整齊、美觀、井井有條。 操作步驟： 1、在“插入快捷欄”的“布局對象”分類中，單擊“AP Div（A）”按紐。 2、將變成“+”形狀的鼠標光標放到編輯中網(wǎng)頁上，在要繪制的地方進行拖動就可以進行創(chuàng)建了。 2.2.1設置首

35、頁的頁面屬性 首先雙擊“文件”浮動面板中的index.htm,進入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。 在“頁面屬性”對話框中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區(qū)域則顯示各類中可以設置的項目。首頁設置的屬性 2.2.2 插入圖像 圖像是網(wǎng)頁中不可或缺的組成成份，恰當?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。 另一方面，網(wǎng)頁的容量大小是網(wǎng)站成功與否的一大關鍵因素。由

36、于網(wǎng)絡在傳輸上的限制，導致了下載的速度不可能太快，因此，網(wǎng)頁的大小就不能太大，其中關鍵就在于圖像的大小了，否則瀏覽者會失去等待的耐心，無論你的網(wǎng)站多么精彩也無濟于事了。所以，在網(wǎng)面容量大小的問題上一定要重視。下面就來詳細介紹對網(wǎng)頁圖像進行處理的操作步驟，以使得它們在保持圖形美麗與網(wǎng)站風格搭配的基礎上，圖片文件能夠變的更小。 1、 首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入”快健欄，選擇其中的“圖像”。 2、隨即彈出如下圖2.5所示的“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇

37、文件URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔；如果選擇“站點根目錄”選項，表示地址相對于根目錄。在這里我要插入的是網(wǎng)站標志logo，插入logo圖象，如圖2.5所示：  請預覽后下載！ 最后單擊“確定”按鈕，即可完成插入圖像的操作。 圖2.5插入圖像  2.2.3插入多媒體 除了之前講到的可以插入“圖像”外，還可插入動畫、聲音、視頻等媒體元素，如Flash,Shockwave,Applets,ActieX及格Midi聲音文件等，并且還可以在Dreamweaver自身內(nèi)插入Macromedia Flash MX2004按鈕和文本對象，以

38、及進行相關的后期處理和添加設計備注等操作。 在Dreamweaver MX 2004文檔中，可以插入媒體文件包括Flash Shockwave影片、QuickTime 、AVI java、 applet Active X控件以及各種格式的音頻文件。 要在瀏覽器中播放Flash 動畫，必須在瀏覽器中集成“Flash 播放器 （Flash Player）”。其中，Internet Explorer通過ActiveX控制來實現(xiàn)，Netscape Navigator則是通過相應的插件來實現(xiàn)的。在最新的Netscape Navigator和Internet Explorer瀏覽器中，均已集成了 Fl

39、ash動畫播放功能。 操場作步驟： 步驟1  將光標停留在要插入Flash的位置，然后單擊菜單欄下面“插入”快捷欄，選擇其中的“媒體”按鈕，單擊它右側的FLV。 步驟2  在彈出的對話框中選擇擴展名為flv 的Flash文件，即可將其插入到Dreamweaver的“網(wǎng)頁編輯窗口”中，可以看到，在這個窗口中Flash文件的大小。在這里我的主頁插入的一個動畫，如圖2.6所示。 請預覽后下載！  圖2.6插入視頻 2.2.4插入文本 文字是人類語言最基本的表達方式，在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成

40、部分，一個網(wǎng)站成功與否，它是最關鍵的因素。在這最關鍵的因素?？韶S富網(wǎng)站的文字內(nèi)容，并以最最美觀、最整齊的方式放入到網(wǎng)頁中。 插入文本的兩種方式 網(wǎng)頁中需要大量的文本，我們或以通過以下兩種方式插入它們。 一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如Microsoft Word）的使用方法一樣，選擇好習慣的輸入法。 另一種是復制文本的方式。有些讀者可能不喜歡使用Dreamweaver MX2004來進行打字的工作，而更習慣在專門的文本編輯軟件中快速打字，如Microsoft Word和 Windows自帶的記事本等，又或者讀者已經(jīng)準備好了要

41、放入網(wǎng)頁的文本的電子版本，那么我們就可以直接使用Dreamweaver的文本復制功能，將大段的文本內(nèi)容拷貝到網(wǎng)頁的編輯窗口來進行排版的工作，具體步驟如下。 打開文本編輯軟件（如Microsoft Word），選中要復制的文本，它們將反白顯示，執(zhí)行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將光標停留在插入文本的位置，執(zhí)行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。 這在我的“網(wǎng)文精品”中用到很多，全部是在word軟件中排好ctrl+c,然后點擊要粘貼的位置，crtl+v到Dreamweaver即可。 &#

42、160;圖2.7插入文本 請預覽后下載！ 2.3創(chuàng)建其它網(wǎng)頁 還有其它的幾個網(wǎng)站與主頁的制作相同，一個網(wǎng)頁是圖象和文字的組合。為圖方便可以先將首頁的導航條以及其它與子頁面相同的做好進行復制。 “基礎資料”中的文本插入和前面的介紹相似，并可以在屬性攔中調(diào)節(jié)字體的大小。在其它子頁面中也用到這點，在屬性中設好背景，顏色等等，插入圖象，輸入文字，也word里的操作雷同。 2.4建立網(wǎng)頁鏈接 網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本節(jié)要講的內(nèi)容----網(wǎng)頁的“鏈接”。 “鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁，起著相當重要的

43、作用。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver MX2004中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共8種。 我的個人主頁主要運用了“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。 接下來結合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。 具體操作步驟如下所述。 操作步驟 步驟1  準備好已經(jīng)制作完成的首頁的各個欄目頁面，該網(wǎng)站包

44、含6個欄目，這里的5個欄目----“基礎資料”、“教育背景”、“自我評價”、“愛好“、“職業(yè)證書”為例來進行講解。 步驟2 在Dreamweaver 中打開首頁，之后選取 “基礎資料”4個文字。 步驟3右單機選擇“創(chuàng)建連接”。 請預覽后下載！ 步驟4在文件夾中找到要鏈接的對象“基礎資料.html”。這樣就建立了超鏈接。如圖2.9所示： 圖2.9網(wǎng)頁鏈接 步驟5還可以設置一些“鏈接”的屬性，這是前面講過的內(nèi)容。單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及

45、“下劃線樣式”。 步驟5 至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，當鼠標放在“平面設計”這4個文字上時將出現(xiàn)下劃線，并且瀏覽器窗口下面的狀態(tài)欄中會顯示鏈接到的網(wǎng)頁的地址，單擊文字，頁面會立即跳轉到“基礎資料”中，這表示鏈接已經(jīng)制作成功了。 步驟6 同理，按照以上步驟，再為“教育背景”、“自我評價”、“愛好“、“職業(yè)證書”等其它欄制作指向對應欄目的鏈接。 步驟7 通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉回首頁，因此在各個欄目中還要插入“網(wǎng)站首頁”的文字，并且制作指向首頁的鏈接，制作方法不變。如下圖2.10所示 請預覽后

46、下載！ 圖2.10返回 至此，整個“文字鏈接”的就全部完成了。 總 結 經(jīng)過兩周的工作，個人網(wǎng)站的設計與實現(xiàn)終于完成，本次設計基本完成任務書要求的功能。查找信息、文件共享等。由于是個人網(wǎng)站，在設計上就沒有什么拘束和限制，完全發(fā)揮自己的想象力和創(chuàng)造力，展現(xiàn)自己的興趣和個性。   本次設計用Macromedia公司開發(fā)的專業(yè)HTML編輯器Dreamweaver,對Wed站點、Web頁和Web應用程序進行設計、編碼和開發(fā)。   利用Dreamweaver中的可視化編輯功能，用戶可以快速創(chuàng)建頁面而無

47、須編寫任何代碼。并且。借助Dreamweaver，還可以使用服務器語言（例如：ASP,ASP.NET,ColdFusion標記語言（CFML），JSP，PHP）。本設計的頁面不是很精美，這寫些不足之處還待后期的開發(fā)和改進。 請預覽后下載！ 致 謝 首先我要感謝我們的xxx老師，他在平常工作繁忙之際，還來為我們上課，解答實訓中的困惑，為我們講解實訓中所需要的課程，讓我們在實訓中更好的完成我們的課題。 其次我要感謝的是我們班的同學給我的幫助。他們一直在鼓勵我?guī)椭?，沒有因為一點困難而放棄。在本次實訓中團結互助，克服了

48、在此次實訓過程中遇到的種種困難，在以后的工作中向他們一樣努力去做不輕易放棄，向他們學習，這次實訓，雖然還是沒有最大限度地投入，但比以前我有了很大的進步。參與了這次集體的設計，和同學在一起共同完成一項任務的感覺很好，我體會到團隊力量的重要性。 真心地感謝xxx老師和全班同學，謝謝，是你們讓我對計算機網(wǎng)絡方面有了更深的了解，讓我受益匪淺。 請預覽后下載！ 參考文獻 [1]胡崧. HTML 從入門到精通[M].北京：中國青年出版社，2007 [2]知新文化. HTML 完全手冊與速查辭典[M].北京：科學出版社，2007 [3]楊選輝.網(wǎng)頁設計與制作教程[M].北京：清華大學出版社，2009 [4]王誠君，劉振華，郭竑暉，高中山.Dreamweaver 8 網(wǎng)頁設計應用教程[M].北京：清華大 學出版社，2007 （注：可編輯下載，若有不當之處，請指正，謝謝!） 請預覽后下載！