資源描述:
《《網頁設計與制作》ppt》由會員上傳分享,免費在線閱讀,更多相關內容在教育資源-天天文庫。
1、《網頁設計與制作》第11章網站建設綜合實訓站點規(guī)劃11.1素材準備與站點設計11.2網頁制作11.3WEB服務器的配置11.4站點的上傳與發(fā)布11.3站點的維護與更新11.4隨著網絡科技的發(fā)展,Internet已經成為企業(yè)宣傳自己的重要途徑之一。擁有一個好的商業(yè)網站就是企業(yè)最好的名片。建立商業(yè)網站不僅可以讓客戶了解企業(yè),提高企業(yè)的知名度;而且更能突破時空的限制,為企業(yè)在網絡時代創(chuàng)造更多的商機。在本章中,將詳細介紹一個商業(yè)網站的建設過程。網站首頁草圖如圖所示?!颈菊聦W習目的】本章通過詳細講解商業(yè)網站建設過程,讀者掌握規(guī)劃網站、頁面布局的技術、網站的制作流程。11.1站點規(guī)劃制
2、作網站首先是規(guī)劃出一個具體的方案,以此作為進一步工作的依據。它包括以下幾個方面。1.確定建設網站的目標創(chuàng)建網站的第一步就是確定網站的目標。本章要創(chuàng)建的網站是一個小型的商業(yè)網站,網站的目標就是要讓客戶了解該企業(yè)的概況、產品信息、相關技術、產品購買方法以及聯(lián)系方式等。通過該網站能夠建立從客戶到公司的有效溝通渠道。2.分析目標用戶對站點的需求訪問該網站的用戶主要是已有的客戶和潛在的瀏覽者,所以在制作網站時,考慮如何為已有的客戶提供完善、周到的服務,比如:新產品的推廣、技術支持、在線訂購,同時考慮到如何吸引到更多的消費群體,并分析這種消費潛力到底有多大。3.確定網站風格在確定了網站
3、的目標和功能之后,接下來就要針對用戶需求對網站的風格進行定位。本網站定位于提供企業(yè)信息類網站。本網站所有頁面均采用灰色加草綠色的配色方案,嚴謹中透著人文化氣息,頁面全部采用“T”布局,頂部為橫條網站標志,下方左邊為導航條,右面顯示具體內容的布局。網頁布局如圖11.2所示。4.考慮網絡的技術問題考慮多種瀏覽器和不同分辨率的兼容性,采用瀏覽器的分辨率:800*600,兼顧1024*768。運用的技術有:表格、模板、CSS樣式、Flash動畫等。11.2素材準備與站點設計可根據推薦的主題選擇網站主題或自定義一個網站主題確定網站的欄目并畫出欄目結構圖色彩搭配根據網站主題特點,確定網
4、站的色彩方案根據網站的主題收集資料:文字及圖像等11.2.1繪制首頁草圖首頁的設計時應該注意以下幾個問題:?框架清晰,重點突出;?色彩搭配既要能夠吸引瀏覽者的注意力,又不要過于花哨,過于濃烈的色彩反而容易引起瀏覽者的反感;?文字和圖片相輔相成。11.2.2素材準備有了總體結構,還要進行基本素材的收集,比如文本、動畫、圖片、音樂、視頻素材等。這其中有些可以自己制作,比如使用fireworks制作圖片、flash制作動畫等;有些可以通過其他途徑獲得,比如在網上下載,購買素材光盤等等。本網站中使用的主要素材就是圖片,一部分是通過實物拍攝后處理獲得的,還有一部分裝飾圖像是通過素材光
5、盤獲得。11.3網頁制作11.3.1創(chuàng)建站點在Dreamweaver8.0中,執(zhí)行“站點”菜單|“新建站點”命令,彈出“站點定義”的對話框。選擇“高級”選項卡,單擊“本地信息”,在右側選項中定義網站的一些本地信息。站點名稱:綜合實例。本地根文件夾:即指定站點文件的保存位置。輸入H:shili11-1。默認圖像文件夾:H:shili11-1images。其它選擇默認項。11.3.2創(chuàng)建網站結構1.目錄結構網站的目錄結構是指你建立網站時創(chuàng)建的目錄。目錄結構的好壞,對于網站本身的上傳、維護、內容未來的擴充和移植有著重要的影響。將文件分門別類地放在不同的文件夾下,本網站的目
6、錄結構如下:Images—用于保存圖像素材Page—用于存放網頁Css-用于存放CSS樣式文件Flash—用于存放Flash動畫2.鏈接結構網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。如果把每個頁面比喻成一個固定點,那么鏈接就是兩個固定點之間的連線。一個點可以和一個點連接,也可以和多個點連接。本網站采用的是最常見的星狀鏈接。所謂星狀鏈接是指每個頁面之間都建立鏈接。星狀鏈接結構的優(yōu)點是瀏覽方便,用戶可以從當前頁面跳轉到網站內的任何頁面中。網站結構如圖所示。11.3.3頁面模板的制作使用模板來創(chuàng)建網站的好處是快速建立具有統(tǒng)一風格的多個網頁,提高網站設計與制作的效率。本網站有一
7、組風格相同的8個網頁,因此,首先制作頁面的模板,操作步驟如下:選擇“文件”菜單|“新建”命令,新建一個模板頁面,劃分模板的鎖定區(qū)域和可編輯區(qū)域。在這個模板中,上、下和右側的上部是所有網頁的共同部分,因此為鎖定區(qū)域,右側的中部是每個網頁的具體不同部分,創(chuàng)建為可編輯區(qū)域,如圖所示。模板的編輯過程與普通網頁相同??删庉媴^(qū)域鎖定區(qū)域11.3.4首頁的制作制作過程如下:步驟1選擇“文件”菜單|“新建”命令,新建一個網頁,命名保存為“index.html。打開“資源”面板,選擇“模板”選項,將模板文件“moban.dwt”直接