《網(wǎng)頁設(shè)計與制作》ppt

《《網(wǎng)頁設(shè)計與制作》ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、《網(wǎng)頁設(shè)計與制作》第11章網(wǎng)站建設(shè)綜合實訓(xùn)站點規(guī)劃11.1素材準備與站點設(shè)計11.2網(wǎng)頁制作11.3WEB服務(wù)器的配置11.4站點的上傳與發(fā)布11.3站點的維護與更新11.4隨著網(wǎng)絡(luò)科技的發(fā)展，Internet已經(jīng)成為企業(yè)宣傳自己的重要途徑之一。擁有一個好的商業(yè)網(wǎng)站就是企業(yè)最好的名片。建立商業(yè)網(wǎng)站不僅可以讓客戶了解企業(yè)，提高企業(yè)的知名度；而且更能突破時空的限制，為企業(yè)在網(wǎng)絡(luò)時代創(chuàng)造更多的商機。在本章中，將詳細介紹一個商業(yè)網(wǎng)站的建設(shè)過程。網(wǎng)站首頁草圖如圖所示。【本章學(xué)習(xí)目的】本章通過詳細講解商業(yè)網(wǎng)站建設(shè)過程，讀者掌握規(guī)劃網(wǎng)站、頁面布局的技術(shù)、網(wǎng)站的制作流程。11.1站點規(guī)劃制

2、作網(wǎng)站首先是規(guī)劃出一個具體的方案，以此作為進一步工作的依據(jù)。它包括以下幾個方面。1.確定建設(shè)網(wǎng)站的目標創(chuàng)建網(wǎng)站的第一步就是確定網(wǎng)站的目標。本章要創(chuàng)建的網(wǎng)站是一個小型的商業(yè)網(wǎng)站，網(wǎng)站的目標就是要讓客戶了解該企業(yè)的概況、產(chǎn)品信息、相關(guān)技術(shù)、產(chǎn)品購買方法以及聯(lián)系方式等。通過該網(wǎng)站能夠建立從客戶到公司的有效溝通渠道。2.分析目標用戶對站點的需求訪問該網(wǎng)站的用戶主要是已有的客戶和潛在的瀏覽者，所以在制作網(wǎng)站時，考慮如何為已有的客戶提供完善、周到的服務(wù)，比如：新產(chǎn)品的推廣、技術(shù)支持、在線訂購，同時考慮到如何吸引到更多的消費群體，并分析這種消費潛力到底有多大。3.確定網(wǎng)站風(fēng)格在確定了網(wǎng)站

3、的目標和功能之后，接下來就要針對用戶需求對網(wǎng)站的風(fēng)格進行定位。本網(wǎng)站定位于提供企業(yè)信息類網(wǎng)站。本網(wǎng)站所有頁面均采用灰色加草綠色的配色方案，嚴謹中透著人文化氣息，頁面全部采用“T”布局，頂部為橫條網(wǎng)站標志，下方左邊為導(dǎo)航條，右面顯示具體內(nèi)容的布局。網(wǎng)頁布局如圖11.2所示。4.考慮網(wǎng)絡(luò)的技術(shù)問題考慮多種瀏覽器和不同分辨率的兼容性，采用瀏覽器的分辨率：800*600，兼顧1024*768。運用的技術(shù)有：表格、模板、CSS樣式、Flash動畫等。11.2素材準備與站點設(shè)計可根據(jù)推薦的主題選擇網(wǎng)站主題或自定義一個網(wǎng)站主題確定網(wǎng)站的欄目并畫出欄目結(jié)構(gòu)圖色彩搭配根據(jù)網(wǎng)站主題特點，確定網(wǎng)

4、站的色彩方案根據(jù)網(wǎng)站的主題收集資料：文字及圖像等11.2.1繪制首頁草圖首頁的設(shè)計時應(yīng)該注意以下幾個問題：?框架清晰，重點突出；?色彩搭配既要能夠吸引瀏覽者的注意力，又不要過于花哨，過于濃烈的色彩反而容易引起瀏覽者的反感；?文字和圖片相輔相成。11.2.2素材準備有了總體結(jié)構(gòu)，還要進行基本素材的收集，比如文本、動畫、圖片、音樂、視頻素材等。這其中有些可以自己制作，比如使用fireworks制作圖片、flash制作動畫等；有些可以通過其他途徑獲得，比如在網(wǎng)上下載，購買素材光盤等等。本網(wǎng)站中使用的主要素材就是圖片，一部分是通過實物拍攝后處理獲得的，還有一部分裝飾圖像是通過素材光

5、盤獲得。11.3網(wǎng)頁制作11.3.1創(chuàng)建站點在Dreamweaver8.0中，執(zhí)行“站點”菜單｜“新建站點”命令，彈出“站點定義”的對話框。選擇“高級”選項卡，單擊“本地信息”，在右側(cè)選項中定義網(wǎng)站的一些本地信息。站點名稱：綜合實例。本地根文件夾：即指定站點文件的保存位置。輸入H：shili11-1。默認圖像文件夾：H：shili11-1images。其它選擇默認項。11.3.2創(chuàng)建網(wǎng)站結(jié)構(gòu)1.目錄結(jié)構(gòu)網(wǎng)站的目錄結(jié)構(gòu)是指你建立網(wǎng)站時創(chuàng)建的目錄。目錄結(jié)構(gòu)的好壞，對于網(wǎng)站本身的上傳、維護、內(nèi)容未來的擴充和移植有著重要的影響。將文件分門別類地放在不同的文件夾下，本網(wǎng)站的目

6、錄結(jié)構(gòu)如下：Images—用于保存圖像素材Page—用于存放網(wǎng)頁Css－用于存放CSS樣式文件Flash—用于存放Flash動畫2.鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓撲結(jié)構(gòu)。如果把每個頁面比喻成一個固定點，那么鏈接就是兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。本網(wǎng)站采用的是最常見的星狀鏈接。所謂星狀鏈接是指每個頁面之間都建立鏈接。星狀鏈接結(jié)構(gòu)的優(yōu)點是瀏覽方便，用戶可以從當前頁面跳轉(zhuǎn)到網(wǎng)站內(nèi)的任何頁面中。網(wǎng)站結(jié)構(gòu)如圖所示。11.3.3頁面模板的制作使用模板來創(chuàng)建網(wǎng)站的好處是快速建立具有統(tǒng)一風(fēng)格的多個網(wǎng)頁，提高網(wǎng)站設(shè)計與制作的效率。本網(wǎng)站有一

7、組風(fēng)格相同的8個網(wǎng)頁，因此，首先制作頁面的模板，操作步驟如下：選擇“文件”菜單｜“新建”命令，新建一個模板頁面，劃分模板的鎖定區(qū)域和可編輯區(qū)域。在這個模板中，上、下和右側(cè)的上部是所有網(wǎng)頁的共同部分，因此為鎖定區(qū)域，右側(cè)的中部是每個網(wǎng)頁的具體不同部分，創(chuàng)建為可編輯區(qū)域，如圖所示。模板的編輯過程與普通網(wǎng)頁相同?？删庉媴^(qū)域鎖定區(qū)域11.3.4首頁的制作制作過程如下：步驟1選擇“文件”菜單｜“新建”命令，新建一個網(wǎng)頁，命名保存為“index.html。打開“資源”面板，選擇“模板”選項，將模板文件“moban.dwt”直接