Dreamweaver網(wǎng)頁制作基礎教程項目十三綜合實例

核心技術鏈接的綜合應用

CSS+Div的綜合應用表格布局的綜合應用任務目標制作企業(yè)網(wǎng)站能力目標

網(wǎng)頁鏈接的熟練應用復雜表格的綜合應用

CSS+Div的綜合應用項目背景網(wǎng)站制作過程中的一個步驟是把前臺美工制作的圖片形式的頁面轉換為HTML網(wǎng)頁，另一個步驟是對網(wǎng)站的各個分頁面進行整合。需要網(wǎng)站設計人員利用網(wǎng)站管理技術，把各分頁面通過網(wǎng)頁鏈接的形式連接起來，形成一個完整的網(wǎng)站前臺頁面。項目分析本項目包含了網(wǎng)站中各分頁面，在頁面整合過程中，由于各部分相對獨立，因而只是一個模擬整合的過程。前面11個各項目中制作的文件以文件夾的形式分別復制到“項目12”文件夾中備用。任務二通過給定的前臺頁面，將其轉換為恰當?shù)腍TML頁面。任務一網(wǎng)頁中的文本任務描述網(wǎng)站設計公司需要制作一個小型的企業(yè)網(wǎng)，網(wǎng)站的風格已經(jīng)由網(wǎng)站前臺美工人員完成?，F(xiàn)需要其他網(wǎng)頁設計者根據(jù)給定的頁面和素材制作網(wǎng)頁文件。在設計過程中可以綜合使用框架結構，CSS+DIV技術、JavaScript技術及Spry技術等。知識準備“項目12”文件夾中所提供的圖片。任務實施圖2.1.2頁面頂部步驟1：網(wǎng)站首頁效果如圖12.2.1所示。步驟2：“公司簡介”效果如圖12.2.2所示。圖12.2.2公司簡介步驟3：“新聞動態(tài)”效果如圖12.2.3所示。圖12.2.3新聞動態(tài)步驟4：“產(chǎn)品中心”效果如圖12.2.4所示。圖12.2.4產(chǎn)品中心步驟5：“銷售網(wǎng)絡”效果如圖12.2.5所示。圖12.2.5銷售網(wǎng)絡步驟6：“加盟合作”效果如圖12.2.6所示。圖12.2.6加盟合作步驟7：“客戶服務”效果如圖12.2.7所示。圖12.2.7客戶服務步驟8：“人才資源”效果如圖12.2.8所示。圖12.2.8人才資源步驟9：“聯(lián)系我們”效果如圖12.2.9所示。圖12.2.9聯(lián)系我們?nèi)蝿湛偨Y通過這個任務的實施，一方面可以讓學生了解網(wǎng)站設計的整體流程，另一方面可以鍛煉對于復雜布局的掌控，以及網(wǎng)站整體風格及系統(tǒng)設計的觀念。對于給定的網(wǎng)站全套頁面，學生首先需要確定布局方法，以及是否采用框架結構，而哪些頁需要采用框架結構。需要的素材可以從圖片中用PhotoShop類工具軟件截取，也可以用PhotoShop的切片工具生成簡單的布局頁后再修改。

課后習題1.根據(jù)網(wǎng)站上面的的導航按鈕，制作并鏈接所有的二級頁面，確保導航欄上的所有導航按鈕都能鏈接