web設(shè)計報告電子商務(wù)2班名稱：向陽2016.06.10目錄1.設(shè)計目的12.設(shè)計理念22.1網(wǎng)站整體結(jié)構(gòu)規(guī)劃思路42.2家庭設(shè)計理念52.3子頁的設(shè)計理念6網(wǎng)頁詳細(xì)設(shè)計分析8結(jié)論10電子商務(wù)225楊杰1.設(shè)計目的說明這個個人網(wǎng)站的設(shè)計意圖和想法，簡單介紹一下自己的個人網(wǎng)站。2.設(shè)計理念描述網(wǎng)站的總體設(shè)計理念，包括：2.1網(wǎng)站整體結(jié)構(gòu)規(guī)劃思路要說明網(wǎng)站整體結(jié)構(gòu)的選擇、設(shè)計的想法，并勾勒網(wǎng)站結(jié)構(gòu)。2.2家庭設(shè)計理念需要對主頁的布局想法進(jìn)行說明和分析。2.3子頁設(shè)計思路需要對子頁設(shè)計和web對象選擇進(jìn)行說明和分析。3網(wǎng)頁詳細(xì)設(shè)計分析需要詳細(xì)說明選擇網(wǎng)頁、說明和分析網(wǎng)頁的設(shè)計實現(xiàn)過程、創(chuàng)建網(wǎng)頁的步驟、使用的web對象以及如何操作web對象。4結(jié)論總結(jié)了整個設(shè)計報告，分析了設(shè)計過程的難點和解決方法，并提出了展望。一、設(shè)計目的本課程旨在使學(xué)生對Dreamweaver cs5開發(fā)的整個課程進(jìn)行實踐，并更全面地了解、掌握和綜合利用所學(xué)的知識。結(jié)合特定的開發(fā)案例，了解和初步了解如何使用Dreamweaver cs5可視化開發(fā)工具進(jìn)行web開發(fā)。了解web設(shè)計制作流程。通過設(shè)計掌握網(wǎng)頁設(shè)計、制作技術(shù)。了解和熟悉web設(shè)計的基本知識和實施技能。根據(jù)主題的要求，給出了網(wǎng)頁設(shè)計方案，根據(jù)要求，利用合適的圖形資料，制作符合要求的網(wǎng)頁設(shè)計作品。精通Photoshop CS6、Dreamweaver cs5等軟件的操作和應(yīng)用。加強(qiáng)實踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。配置虛擬機(jī)環(huán)境1.在虛擬機(jī)上模擬LAN環(huán)境(1)配置虛擬機(jī)上安裝了windows XP SP3 professional(客戶端)和windows server 2003標(biāo)準(zhǔn)版(服務(wù)器)兩種操作系統(tǒng)的虛擬主機(jī)。虛擬機(jī)硬件配置包括：I. windows XP SP3 professional(配置期間可以選擇默認(rèn)配置)二.windows server 2003標(biāo)準(zhǔn)版這臺機(jī)器同時安裝DNS和其他服務(wù)器，因此必須安裝兩個或更多網(wǎng)卡。在此處添加第三個網(wǎng)卡作為www、FTP、POP3和SMTP服務(wù)器的硬件端口，然后添加如下內(nèi)容：將虛擬機(jī)設(shè)置為默認(rèn)狀態(tài)后，操作系統(tǒng)關(guān)閉(此時可能不會安裝操作系統(tǒng))。使用向下箭頭顯示鼠標(biāo)單擊過程，顯示所有其他點“下一步”(2)虛擬機(jī)實施LAN:在此，我們在LAN上部署了兩個虛擬主機(jī)。設(shè)置各個虛擬主機(jī)的網(wǎng)卡，使其不受到物理主機(jī)專用網(wǎng)絡(luò)的干擾，如下所示：雙擊每一個，在出現(xiàn)的下一個對話框中選擇網(wǎng)絡(luò)連接方法“橋”，必須連接物理主機(jī)網(wǎng)卡。2.安裝虛擬主機(jī)的相應(yīng)操作系統(tǒng)安裝OS之前，必須格式化硬盤并創(chuàng)建相應(yīng)的分區(qū)。特別是，要將安裝了windows server 2003的虛擬硬盤格式化為NTFS格式，建議將其分為兩個部分。不說明操作系統(tǒng)安裝過程。3.測試虛擬機(jī)LAN環(huán)境為每個網(wǎng)卡分配一個靜態(tài)IP。在網(wǎng)卡之間ping IP以驗證連接。6.4服務(wù)器規(guī)劃和配置(每個服務(wù)配置流程的說明，圖最佳實踐)配置DNS服務(wù)器安裝DNS組件第二，設(shè)計理念使用Dreamweaver為“個人空間”創(chuàng)建網(wǎng)站，您可以在其中使用web設(shè)計技術(shù)(如表格、行為、圖層和鏈接)設(shè)計頁面。本網(wǎng)站以個人空間為材料，主要說明與空間相關(guān)的內(nèi)容。具體結(jié)構(gòu)如圖所示。三、網(wǎng)頁詳細(xì)設(shè)計分析(a)部署設(shè)定這次網(wǎng)頁設(shè)計使用了很多布局，所以如何制定布局是關(guān)鍵。Dreamweaver cs5是大多數(shù)人設(shè)計網(wǎng)頁的武器，也是許多初學(xué)者的捷徑。尤其是布局中的卓越性能更受歡迎。大家都知道，沒有形式的幫助，很難擠出和諧合理的頁面。1.單擊 ALT F6 鍵進(jìn)入“布局”模式，然后插入“布局表”。創(chuàng)建近似布局。2.使用背景圖片：如果已選擇，則可以單擊瀏覽以插入準(zhǔn)備好的圖片作為表格背景。圖片以平鋪格式作為表格背景，因此必須能夠控制表格大小和圖片大小。(b)網(wǎng)頁上的圖像圖像傳輸是WWW的真正魅力，與文本相比具有重要的優(yōu)勢。第一，用人眼觀察圖像時，收到信息的速度比收到信息的速度快得多。第二是更清楚地表達(dá)細(xì)節(jié)。正是因為這些優(yōu)點，在設(shè)計網(wǎng)頁的時候，圖像很受歡迎。如果網(wǎng)頁像一幅風(fēng)景畫一樣，訪問者一定會迷戀(畫大了會適得其反)。有幾十種圖像文件格式(GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等)，目前Internet Explorer和Netscape支持的最常用圖像格式是GIF(1)在網(wǎng)頁中插入圖像Dreamweaver cs5使您可以輕松地將圖像插入到網(wǎng)頁中，設(shè)置圖像的邊框、大小和位置，以及直接編輯圖像。向網(wǎng)頁添加圖像很簡單。1.創(chuàng)建新的空白網(wǎng)頁，然后將光標(biāo)放在網(wǎng)頁的起始位置。2.打開工具菜單，選擇圖片菜單項，從子菜單中選擇文件中的菜單項，或單擊工具欄中的圖片工具圖標(biāo)彈出圖片對話框。3.在此對話框中，單擊“瀏覽”按鈕以顯示“選擇文件”對話框。4.在選擇文件對話框的文件列表中選擇圖像文件，然后單擊確定按鈕或直接雙擊圖像文件，將圖像添加到網(wǎng)頁中。在網(wǎng)頁中插入圖像時，可以設(shè)置圖像的各種屬性。(2)設(shè)置圖像的各種屬性1.選擇插入的圖片，單擊鼠標(biāo)右鍵，然后從彈出菜單中選擇圖片屬性菜單項，將顯示圖片屬性對話框。2.打開“外觀”選項卡。(1)設(shè)置圖像邊框厚度：在“外觀”選項卡的“布局”欄上，可以根據(jù)需要定義圖像的邊框，也可以將邊框值定義為“0”，即無邊框。(2)動態(tài)觀察圖像：通常，一個圖像只能與一行文字具有相同的高度，但是必須將圖像和文字分開，并且有時不會相互影響。例如，必須在網(wǎng)頁的左側(cè)插入圖像，以便右側(cè)的文字在沒有圖像的情況下可以輸入多行。為此，請啟用“動態(tài)觀察圖像”?？梢酝ㄟ^兩種方法在網(wǎng)頁上動態(tài)觀察圖像：左動態(tài)觀察：圖像環(huán)繞在左側(cè)，文本環(huán)繞在圖像右側(cè)。右動態(tài)觀察：圖像在右側(cè)，文本環(huán)繞圖像的左側(cè)。在“外觀”選項卡的“版面”欄中，打開“對齊”下拉列表框，選擇“左”選項，然后單擊“確定”按鈕，將圖像設(shè)置為左動態(tài)觀察方式，選擇“右”將圖像設(shè)置為右動態(tài)觀察方式。(3)編輯圖像大?。涸贒reamweaver CS3中將圖像添加到網(wǎng)頁時，圖像大小默認(rèn)為原始大小，如果添加的圖像過大、過小或特殊情況，則需要調(diào)整圖像大小。調(diào)整圖像大小非常簡單靈活，因為您可以選擇添加的圖像，然后用鼠標(biāo)左鍵拖動圖像框架，將圖像的寬度和高度隨機(jī)調(diào)整到所需大小。(4)設(shè)置圖像縮放：網(wǎng)頁設(shè)計的重要原則之一是網(wǎng)頁兼容性，對于其他瀏覽器或分辨率，無論是800600窗口還是1024768窗口，網(wǎng)頁都可以正常顯示。設(shè)置圖像縮放比例可以將圖像設(shè)置為大小，以便圖像在不同大小的瀏覽器窗口中正常顯示，與瀏覽器大小成比例。設(shè)置圖像比例的步驟如下：1.在網(wǎng)頁上選擇圖像，右鍵單擊，然后從彈出快捷菜單中選擇“圖像屬性”菜單項，彈出“圖像屬性”對話框。2.在“大小”列中，選擇“指定大小”復(fù)選框，選擇“寬度”和“高度”下的“百分比”單選按鈕，也可以在“外觀”選項卡的“水平間距”和“垂直間距”欄中進(jìn)行設(shè)置。水平間距以像素為單位表示周圍元素和圖像的水平間距。垂直間距表示圖像與周圍元素垂直放置的間距。(3)如何在網(wǎng)頁上編輯圖像在Dreamweaver cs5中，您可以使用各種工具(如旋轉(zhuǎn)和翻轉(zhuǎn)圖像、裁剪、圖像淡入和凹凸效果)編輯網(wǎng)頁上的圖像。此外，Photoshop cs 6連正在處理照片，使照片看起來更加精美，滿足我們的主題要求。(4)使用背景圖像使用背景圖像用特定顏色填充網(wǎng)頁的背景，而使用背景圖像不同于將網(wǎng)頁的背景平鋪為圖像。這樣制作的網(wǎng)頁會更漂亮、更好看。在網(wǎng)頁中使用背景圖像的具體步驟如下：1.建立新的空白網(wǎng)頁。2.右鍵單擊，然后從彈出的快捷菜單中選擇“web屬性”，彈出“web屬性”對話框。3.打開“背景”選項卡。4.在“背景”選項卡的格式欄中，選中“背景圖片”復(fù)選框，然后單擊下面的瀏覽按鈕，將出現(xiàn)“選擇背景圖片”對話框。5.在“選擇背景圖像”對話框中，單擊“瀏覽文件”按鈕以顯示“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，然后單擊“確定”按鈕。這樣，選定的圖片將成為整個網(wǎng)頁的背景，如果在步驟4中同時選中水印復(fù)選框，則背景圖片將顯示為特殊水印效果，在網(wǎng)頁滾動時背景不會移動，僅滾動網(wǎng)頁內(nèi)容，因此具有某種透明層效果，非常吸引人。(5)插入flash動畫關(guān)于Flash視頻Dreamweaver中的“插入Flash視頻”命令使您可以在不使用Flash創(chuàng)作工具的情況下將Flash視頻內(nèi)容插入到網(wǎng)頁中。這個命令會插入Flash組件。在瀏覽器中查看時，將顯示選定的Flash視頻內(nèi)容和一組播放控件。(6)為實現(xiàn)圖片交互，將鼠標(biāo)設(shè)置為通過圖片重新插入圖片的下拉菜單之一是“鼠標(biāo)懸?！薄螕舸隧椖繉棾鲆粋€對話框，您可以在其中設(shè)置鼠標(biāo)經(jīng)過之前和之后的圖片。選擇“確定”即可。(7)設(shè)置鏈接選擇圖片或文字，輸入要鏈接到下面鏈接屬性的地址，然后激活下面的目標(biāo)屬性，輸入blank在新窗口中打開網(wǎng)頁。本公司連接了網(wǎng)站鏈接的網(wǎng)頁和外部網(wǎng)。這樣，用戶訪問頁面時，可以查詢更多詳細(xì)信息并方便用戶查詢。四、結(jié)論通過這次網(wǎng)絡(luò)課程設(shè)計，激發(fā)學(xué)習(xí)興趣，調(diào)動學(xué)習(xí)意識，移動自己的大腦、手、嘴，利用網(wǎng)絡(luò)資源，結(jié)合教材和教師的指導(dǎo)，通過自己的實踐，創(chuàng)建個人風(fēng)格、個性累積的個人主頁?？偟膩碚f，我整個學(xué)期學(xué)到了很多知識在這次web設(shè)計中，我充分利用了這次設(shè)計機(jī)會，全心投入web世界，進(jìn)行了持續(xù)的學(xué)習(xí)和不斷的探索；同時不斷充實自己，不斷完成自己，在網(wǎng)絡(luò)的天空下逐漸美化自己的人生！做好頁面不是件容易的事。這包括選擇個人主頁的主題、收集和整理內(nèi)