第4章 靜態(tài)頁面制作.中職課件電子教案_第1頁
第4章 靜態(tài)頁面制作.中職課件電子教案_第2頁
第4章 靜態(tài)頁面制作.中職課件電子教案_第3頁
第4章 靜態(tài)頁面制作.中職課件電子教案_第4頁
第4章 靜態(tài)頁面制作.中職課件電子教案_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第四章靜態(tài)頁面制作學習目標

熟悉Dreamweaver站點的設置方法掌握Dreamweaver的使用掌握使用表格工具布局網(wǎng)頁的方法掌握常見網(wǎng)頁元素中基本樣式的設定掌握子頁面鏈接的創(chuàng)建掌握常見的HTML標記語言的使用項目概述

小張所在的網(wǎng)絡公司承接長沙市碧雅園花卉苗木基地網(wǎng)站建設項目后，通過前期需求分析，網(wǎng)頁美工小王已經(jīng)繪制出網(wǎng)站首頁效果圖。經(jīng)理要求網(wǎng)頁設計師小張依據(jù)效果圖，為該苗木基地制作網(wǎng)站靜態(tài)首頁，以便于網(wǎng)站代碼編寫人員編寫腳本代碼，從而制作出一個完整的動態(tài)網(wǎng)站。最終網(wǎng)站首頁效果圖將本項目的實施分解為以下幾個子任務：任務1：本地站點配置任務2：使用表格布局制作網(wǎng)頁任務1：本地站點配置

1、Dreamweaver安裝Dreamweaver是Macromedia公司早期推出的“網(wǎng)頁三劍客”之一?！熬W(wǎng)頁三劍客”指Dreamweaver、Flash、Fireworks這三個軟件，它們集合起來，就像江湖中最厲害的劍客一樣，成為了網(wǎng)站開發(fā)中的專用利器。它是集網(wǎng)頁制作、網(wǎng)站管理功能于一體、提供所見即所得界面的網(wǎng)頁編輯器，也是第一套為專業(yè)網(wǎng)頁設計師特別開發(fā)的可視化網(wǎng)頁開發(fā)工具。2010年前后，Macromedia公司被Adobe公司收購，DreamweaverCS5是目前最新的版本。啟動DreamweaverCS5，新建一個HTML網(wǎng)頁，工作界面如下圖所示。左邊窗口中的代碼是HTML，即超文本標記語言，是一種用來制作超文本文檔的簡單標記語言，也是制作網(wǎng)頁最基礎的語言，它可以直接由瀏覽器執(zhí)行。任務1：本地站點配置

空白頁面的代碼如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><HTML><!--HTML文件開始><HEAD><!--HTML文件頭開始><!--頭部信息><BODY><!--HTML文件體開始>文檔主體,正文部分</BODY><!--HTML文件體結束></HTML>

任務1：本地站點配置

網(wǎng)站的首頁文檔一般命名為index.html或者index.htm，也可以是default.html或default.htm。在不特別指定的情況下，打開一個網(wǎng)站時，看到的第一個頁面就是該文檔對應的頁面。網(wǎng)頁文件的命名規(guī)則：所有的文件名一律使用英文小寫，這樣就不會因為服務器系統(tǒng)不同而混淆。不可以使用中文。任務1：本地站點配置

2、Dreamweaver站點的設置本地站點創(chuàng)建完成后，在【文件】面板的【本地文件】窗格中，會顯示該站點的根目錄，如下圖所示。新建站點可以有效解決絕對路徑與相對路徑的問題。任務1：本地站點配置

HTML指超文本標記語言。超文本是指一種全局性的信息結構，它將文檔中的不同部分通過關鍵字建立鏈接，使信息得以用交互方式搜索。它是超級文本的簡稱。

Web服務器(WebServer)

Web服務器可以解析(handles)HTTP協(xié)議。當Web服務器接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。在Internet上，每臺計算機都有一個唯一的IP地址，計算機之間也只能通過IP地址來通訊，IP地址通常是由4個字節(jié)來表示，例如：94，用戶不可能記住這么長的IP地址。為了方便人們的記憶，Internet采用域名來標識計算機，通過DNS（域名系統(tǒng)）將域名翻譯成IP地址，每一級的域名都有對應的DNS域名服務器。

文件路徑就是文件在電腦中的位置，表示文件路徑的方式有兩種，相對路徑和絕對路徑。在網(wǎng)頁設計中通過路徑可以表示鏈接，插入圖像、Flash、CSS文件的位置。絕對路徑：即物理路徑，就是硬盤上文件的路徑，比如下面的文件：d:\dreamdu\exe\1.html相對路徑：是從當前路徑開始的路徑，假如當前路徑為d:\dreamdu\exe要描述上述路徑，只需輸入1.html3、網(wǎng)站文件夾管理按欄目內容分別建立子文件夾。資源按類存放在不同的文件夾中。文件夾的層次不要太深,以免系統(tǒng)維護時查找麻煩。避免用中文命名文件或文件夾。避免使用過長的文件名。命名應盡量有明確的意義。任務1：本地站點配置

任務2：使用表格布局配置網(wǎng)頁

1、網(wǎng)頁表格的規(guī)劃通過分析，網(wǎng)頁可以分成幾個大的區(qū)域，如下圖所示：整個網(wǎng)頁分成五個大表格

任務2：使用表格布局配置網(wǎng)頁

絕大部分標記都有開始標記和結束標記；左、右尖括號為標記之間的分界符；屬性值放置在始標記中，如<標記名屬性=“屬性值”>，結束標記為“</標記名>”，有些結束標記可以省略。標記不區(qū)分大小寫。html標記具有以下特點：任務2：使用表格布局配置網(wǎng)頁

有些網(wǎng)頁設計人員習慣將整個頁面作為一個大表格，這種做法將影響網(wǎng)頁的瀏覽速度。當瀏覽器發(fā)現(xiàn)頁面中有一個TABLE標記，在接收到對應的結束標記</TABLE>之前，它不會顯示這個表格。因此，如果整個頁面都放入到一個大表格中，在瀏覽器下載這個大表格的</TABLE>標記之前，整個頁面都不會顯示。當顯示內容龐大的頁面時（例如，搜索結果或者電子商務網(wǎng)站上的產(chǎn)品目錄），表格的延遲顯示，會導致整個頁面顯示的停頓。為了避免出現(xiàn)這種情況，應該把頁面劃分成多個較小且獨立的表格區(qū)域。這樣，每個表格的HTML代碼下載之后瀏覽器就可以立即顯示它。對于瀏覽者來說，頁面在屏幕上一部分、一部分地逐漸顯示出來。更為重要的是，這種頁面在屏幕上開始顯示的速度，要比之前等待整個頁面下載完才顯示的方式要快得多。任務2：使用表格布局配置網(wǎng)頁

2、網(wǎng)頁元素的填充

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論