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

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第四章靜態(tài)頁(yè)面制作學(xué)習(xí)目標(biāo)

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

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

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

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

任務(wù)1：本地站點(diǎn)配置

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

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

HTML指超文本標(biāo)記語(yǔ)言。超文本是指一種全局性的信息結(jié)構(gòu)，它將文檔中的不同部分通過(guò)關(guān)鍵字建立鏈接，使信息得以用交互方式搜索。它是超級(jí)文本的簡(jiǎn)稱。

Web服務(wù)器(WebServer)

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

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

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

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

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論