（中職）計算機應用基礎教程第八章網(wǎng)頁設計基礎教學課件

上傳人：好*** IP屬地：遼寧上傳時間：2023-03-29 格式：PPT 頁數(shù)：40 大?。?.69MB 積分：9.6 舉報 版權申訴

已閱讀5頁，還剩35頁未讀，繼續(xù)免費閱讀

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

文檔簡介

YCF（中職）計算機應用基礎教程第八章網(wǎng)頁設計基礎教學課件

昆明冶金高等?？茖W校計算機基礎教研室第八章網(wǎng)頁設計基礎

1234DreamweaverMX2004基本操作

HTML語言介紹

設計網(wǎng)頁的一般步驟

網(wǎng)頁設計基礎網(wǎng)頁設計基礎網(wǎng)頁設計基礎網(wǎng)頁設計基礎567網(wǎng)頁中的多媒體對象及表單的使用

網(wǎng)頁版面設計處理

站點測試與發(fā)布

綜合案例

8.1設計網(wǎng)頁的一般步驟

昆明冶金高等專科學校計算機基礎教研室設計網(wǎng)頁的一般步驟設計網(wǎng)頁的一般步驟設計網(wǎng)頁的一般步驟設計網(wǎng)頁的一般步驟5.根據(jù)要求分別編輯各個頁面。頁1.構思和設計好網(wǎng)頁的基本框架，并畫出頁面的關聯(lián)結構草圖。2.準備好設計網(wǎng)頁所需的素材分類放置在不同的文件夾中。4.一次性新建所有網(wǎng)頁文件，并保存到站點根目錄下或者創(chuàng)建相應的文件夾分類保存。3.打開網(wǎng)頁制作軟件（如：Dreamweaver，F(xiàn)rontPage等），創(chuàng)建站點，將素材分類文件夾復制到創(chuàng)建好的站點的根目錄下.6.測試與發(fā)布站點

8.2HTML語言介紹昆明冶金高等專科學校計算機基礎教研室HTML語言介紹HTML語言介紹HTML語言介紹HTML語言介紹HTML（HyperTextMarkupLanguage）是一種超文本標記語言，是Web網(wǎng)頁制作的標準語言，由于易于學習和掌握，且能獨立于各種平臺的操作系統(tǒng)，因此成為WWW上的重要應用語言，也是所有的Internet站點共同使用的語言，所有的網(wǎng)頁都是以它作為語言基礎而形成的。

8.2HTML語言介紹昆明冶金高等?？茖W校計算機基礎教研室HTML語言介紹HTML語言介紹HTML語言介紹HTML語言介紹HTML文檔結構的基本格式<html><head><title>網(wǎng)頁標題</title>…</head><body>…</body></html>【例8.2.1】一個用HTML編寫的簡單網(wǎng)頁，在瀏覽器中的顯示效果如圖代碼如下。

8.2HTML語言介紹昆明冶金高等專科學校計算機基礎教研室HTML語言介紹HTML語言介紹HTML語言介紹HTML語言介紹!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">…………代碼功能說明<html>…………HTML文檔開始<head>…………文件頭開始<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>櫻花社網(wǎng)站</title>…………網(wǎng)頁窗口的標題<styletype="text/css">…………標題文字的屬性定義說明開始</style>…………標題文字的屬性定義說明結束</head>…………文件頭結束<body>…………網(wǎng)頁主體開始<divalign="center"><h4><spanclass="style1">櫻花社主頁</span></h4><p><spanclass="style1"><imgsrc="tp35.jpg"width="162"height="85"align="middle"><spanclass="style3">歡迎光臨我們的網(wǎng)站</span></span></p></div></body>…………網(wǎng)頁主體結束</html>…………HTML文檔結束

8.2HTML語言介紹昆明冶金高等?？茖W校計算機基礎教研室HTML語言介紹HTML語言介紹HTML語言介紹HTML語言介紹HTML常用標記

分類標記符功能含義文檔結構<HTML>…</HTML>聲明<HEAD>…</HEAD>標記頭文件<BODY>…</BODY>主體內(nèi)容標記<TITLE>…</TITLE>標題標記控制符為文件加上注釋<DIV>…</DIV>塊區(qū)域設置<B>…</B>粗體顯示包含文本<CENTER>…</CENTER>水平居中對齊所包含元素<I>…</I>斜體顯示所包含<BR>換行標記<HR>插入水平線<P>…</P>分段標記<PRE>…</PRE>顯示預格式化文本標記<U>…</U>下劃線顯示所包含<FONT>…</FONT>設置所包含文本字體的大小、顏色、等標記<Hi>…</Hi>定義標題標記<SCRIPT>…</SCRIPT>文檔中包含客戶端腳本程序超鏈接<Aherf=〃URL〃>…</A>定義連接圖像ImgSRC=〃圖像文件名〃插入圖像表格標記<TABLE>…</TABLE>定義表格<TD>…</TD>定義單元格<TR>…</TR>定義表格的行表單標記<FORM>定義表單<INPUT>…</INPUT>定義輸入控件<BOTTON>…</BOTTON>定義按鈕<SELECT>…</SELECT>定義選項菜單<OPTION>…</OPTION>定義選項菜單包含在SELECT內(nèi)<TEXTAREA>…</TEXTAREA>定義多行文本框

8.3DreamweaverMX2004基本操作昆明冶金高等專科學校計算機基礎教研室Dreamweaver基本操作Dreamweaver基本基作Dreamweaver基本操作Dreamweaver基本操作123DreamweaverMX2004的工作界面

創(chuàng)建站點

網(wǎng)頁文檔的基本操作

8.3DreamweaverMX2004基本操作昆明冶金高等?？茖W校計算機基礎教研室Dreamweaver基本操作Dreamweaver基本基作Dreamweaver基本操作Dreamweaver基本操作DreamweaverMX2004是一款功能強大的可視化網(wǎng)頁設計和編程軟件。在Dreamweaver中可以直接對圖像進行編輯，把word和excel文檔粘貼到Dreamweaver，會保留字體、顏色、CSS樣式信息。也可以將flash制作的動畫和fireworks制作的圖片放到Dreamweaver中，形成絢麗多彩的網(wǎng)頁。第一次啟動DreamweaverMX2004后，在彈出的【工作區(qū)設置】對話框中選擇【設計者】|【確定】，再選擇【創(chuàng)建新項目】下的【HTML】進入DreamweaverMX2004的工作界面。如圖8-3-1所示。其設計工作區(qū)主要由插入工具欄、文檔工具欄、文檔編輯窗口、屬性檢查器、浮動面板等部分組成。

昆明冶金高等專科學校計算機基礎教研室8.3.1DreamweaverMX2004的工作界面

昆明冶金高等?？茖W校計算機基礎教研室8.3.1DreamweaverMX2004的工作界面

代碼視圖僅在文檔窗口顯示代碼，適用于代碼的直接編寫。拆分視圖文檔窗口顯示同時顯示代碼和設計視圖。設計視圖僅在文檔窗口顯示設計界面，是可視化頁面設計環(huán)境。站點的實質就是文件的集合，類似一個文件夾，將共享的資源制作成網(wǎng)頁供Internet上的用戶進行訪問，從而實現(xiàn)了資源共享的目的。站點既然是文件的集合，就必須在本地提供一個存儲位置，如E:\myweb，我們把這個目錄稱為站點的根目錄。站點內(nèi)的文件都放在這個文件夾中。

昆明冶金高等?？茖W校計算機基礎教研室8.3.2創(chuàng)建站點（1）執(zhí)行【站點】|【管理站點】|【新建】|【站點】|給站點起名，最好名字與根目錄一致，便于今后建立了多個站點后對站點文件的管理。（2）單擊【下一步】，在彈出的對話框中選擇“否我不想使用服務器技術”單選按鈕。（3）單擊【下一步】，在彈出的對話框中，在“您將把文件存放在計算機的什么位置？”文本框中輸入站點在本機的存儲目錄如E:\myweb。（4）單擊【下一步】，在彈出的對話框中的下拉列表中選擇“無”，單擊【下一步】|【完成】|【完成】，完成站點的創(chuàng)建。

昆明冶金高等專科學校計算機基礎教研室8.3.2創(chuàng)建站點Dreamweaver創(chuàng)建站點的操作步驟如下。使用Dreamweaver創(chuàng)建網(wǎng)頁之前必須建立一個站點，用于存放網(wǎng)頁。然后執(zhí)行【文件】|【新建】命令，彈出如圖所示【新建文檔】對話框。在【類別】列表框中選擇“基本頁”，在【基本頁】列表框中選擇“HTML”，單擊【創(chuàng)建】按鈕，完成空白HTML網(wǎng)頁文檔創(chuàng)建。

昆明冶金高等專科學校計算機基礎教研室8.3.3網(wǎng)頁文檔的基本操作

1.網(wǎng)頁文檔的創(chuàng)建（1）新建網(wǎng)頁保存執(zhí)行【文件】｜【保存】或【另存為】命令，在打開的保存對話框中，默認的保存路徑是站點根目錄如E:\myweb。（2）當前處于編輯狀態(tài)的所有文檔的保存執(zhí)行【文件】｜【保存全部】命令。

昆明冶金高等?？茖W校計算機基礎教研室8.3.3網(wǎng)頁文檔的基本操作

2.保存網(wǎng)頁文檔3.關閉文檔（1）關閉當前打開文檔執(zhí)行【文件】｜【關閉】命令。（2）關閉當前打開所有文檔執(zhí)行【文件】｜【全部關閉】命令。4.打開和預覽頁面（1）打開文檔執(zhí)行【文件】｜【打開】命令。（2）預覽頁面直接按F12鍵預覽或執(zhí)行【文件】|【在瀏覽器中預覽】|【sogouExplorer】選項瀏覽。

昆明冶金高等專科學校計算機基礎教研室8.3.3網(wǎng)頁文檔的基本操作

在Dreamweaver文本的插入與Word中方法類似。另外Dreamweaver也允許從其他文檔中復制文本。

昆明冶金高等?？茖W校計算機基礎教研室8.3.4網(wǎng)頁文本編輯1.文本的插入（1）普通文本的插入光標移到頁面上定位，直接輸入文字即可。但在Dreamweaver中文檔不會自動換行。若需分段按Enter鍵，需換行按Shift+Enter鍵。（2）特殊符號的插入執(zhí)行【插入】|【HTML】|【特殊符號】菜單命令。（3）水平線的插入執(zhí)行【插入】|【HTML】|【水平線】菜單命令或在【插入工具欄】的“HTML”工具中單擊按鈕。

昆明冶金高等?？茖W校計算機基礎教研室8.3.4網(wǎng)頁文本編輯

2.文本的格式化文本插入后，需要編輯和排版，就像Word中的文本處理一樣，需從兩方面入手，一方面文本，另外一個方面是段落。選中文本或段落在其對應的【屬性檢查器】對話框中就會顯示當前文本或段落的相關設置，更改需要重新設置的選項，就可完成對應文本或段落的格式化處理。

昆明冶金高等?？茖W校計算機基礎教研室8.3.4網(wǎng)頁文本編輯【例8.3.1】新建站點“xyzy”，新建兩個空白頁面，并將它們分別以名稱xyzy.htm和wdbj.htm另存于站點“xyzy”下面，打開文檔“xyzy.htm”,在“xyzy.htm”中完成輸入“菁菁校園”設置居中、新宋體、36號、顏色#00FF00；另起一行輸入“菁菁校園｜我的班級｜我的宿舍｜我的照片”設置左對齊、【字體】宋體、16號、【顏色】#3300FF；再另起一行插入水平線設置左對齊、寬1000高4像素。

超鏈接是互聯(lián)網(wǎng)的精髓，設計好頁面后，根據(jù)設計草圖所規(guī)劃的相互關系，就需要對各個頁面之間進行鏈接，把整個網(wǎng)站頁面鏈接為一個整體，有時候也需要對其他文件（比如聲音、圖片、文件、動畫、PDF文件等）鏈接，從而使所有頁面建立完善的聯(lián)系。

昆明冶金高等專科學校計算機基礎教研室8.3.5超鏈接1.創(chuàng)建文字超鏈接創(chuàng)建文字超鏈接的【屬性檢查器】“我的班級”創(chuàng)建超鏈接后的效果圖

昆明冶金高等?？茖W校計算機基礎教研室8.3.5超鏈接2.創(chuàng)建圖片超鏈接選擇圖片或在圖片【屬性檢查器】中選擇【熱點】工具中的一個，在圖片上選擇熱區(qū)，其余步驟與創(chuàng)建文字超鏈接一樣。3.電子郵件超鏈接4.創(chuàng)建導航條執(zhí)行【插入】｜【電子郵件鏈接】執(zhí)行【插入】｜【圖像對象】|【導航條】菜單命令

8.4網(wǎng)頁中的多媒體對象及表單的使用昆明冶金高等?？茖W校計算機基礎教研室多媒體對象及表單多媒體對象及表單多媒體對象及表單多媒體對象及表單123網(wǎng)頁中的圖像的使用網(wǎng)頁中使用Flash對象

插入播放媒體

4網(wǎng)頁中表單的使用

雖然存在很多種圖形文件格式，但Web頁中通常使用的只有三種，即GIF、JPEG和PNG。

昆明冶金高等?？茖W校計算機基礎教研室8.4.1網(wǎng)頁中的圖像的使用1.插入圖像2.修改圖像的屬性3.優(yōu)化圖像【插入】工具欄的【常用】選項中，單擊【圖像】按鈕或執(zhí)行【插入】|【圖像】使用圖像【屬性檢查器】可以對圖像的大小、對齊方式、亮度、對比度、清晰度等屬性進行修改選擇要優(yōu)化的圖像單擊圖像【屬性檢查器】中的【在Fireworks中優(yōu)化】按鈕?；驁?zhí)行【修改】|【圖像】｜【在Fireworks中優(yōu)化圖像】菜單命令4.啟動外部圖像編輯器網(wǎng)頁三劍客安裝完成后，Dreamweaver將Fireworks作為首選編輯器。在Dreamweaver中工作時，可以打開外部圖像編輯器編輯選定的圖像；在保存了編輯完的圖像文件并返回到Dreamweaver時，可以在【文檔】窗口中看到您對圖像所做的任何更改。

昆明冶金高等?？茖W校計算機基礎教研室8.4.2網(wǎng)頁中使用Flash對象1.插入Flash動畫執(zhí)行【插入】｜【媒體】｜【Flash】2.創(chuàng)建和插入Flash按鈕對象在Dreamweaver中，用戶可以在文檔中創(chuàng)建、插入、修改Flash按鈕，無需使用Flash。執(zhí)行【插入】｜【媒體】｜【Flash按鈕】菜單命令。3.創(chuàng)建和插入Flash文本對象Flash文本對象允許您創(chuàng)建和插入只包含文本的Flash影片。這使您可以使用自己選擇的設計器字體和文本創(chuàng)建較小的矢量圖形影片。執(zhí)行【插入】|【媒體】|【Flash文本】【例8.4.1】在上個示例的“xyzy.htm”中繼續(xù)完成下面操作，另起一行，插入Flash動畫、Flash按鈕、圖片，再另起一行插入Flash文本

昆明冶金高等?？茖W校計算機基礎教研室8.4.3插入播放媒體1.插入聲音文件執(zhí)行【插入】|【媒體】|【插件】2.插入Shockwave影片可以使用Dreamweaver將Shockwave影片插入到文檔中。Shockwave作為Web上用于交互式多媒體的Macromedia標準，是一種經(jīng)壓縮的格式，能夠被快速下載，而且可以在大多數(shù)常用瀏覽器中進行播放。其文件擴展名為.DXR、.DCR、.DIR等。執(zhí)行【插入】|【媒體】|【Shockwave】命令。3.添加視頻可以通過不同方式和使用不同格式將視頻添加到Web頁面。視頻可被下載給用戶，或者可以對視頻進行流式處理以便在下載它的同時播放它。視頻通常的格式為AVI或MPEG文件格式。在頁面中添加包含一個可供用戶下載的簡短的視頻剪輯，其操作步驟如下。（1）將剪輯放入站點文件夾。（2）超級鏈接到剪輯，或將其嵌入到頁面中即可。表單的使用是通過對表單相關控件的調用，從而實現(xiàn)頁面瀏覽者和網(wǎng)頁制作者兩者之間信息的一種交互功能。

昆明冶金高等專科學校計算機基礎教研室8.4.4網(wǎng)頁中表單的使用

1.創(chuàng)建表單執(zhí)行【插入】|【表單】|【表單】2.設置表單屬性表單名稱是一個表單的命名，用于處理程序調用。方法傳送表單數(shù)據(jù)的方式。POST方式是將表單內(nèi)的數(shù)據(jù)放在HTTP的文件頭信息中傳送，GET方式是將表單內(nèi)的數(shù)據(jù)直接附加在URL地址之后加“？”號傳送，該方式常用于將數(shù)據(jù)傳送到數(shù)據(jù)庫中。MIME類型MIME類型有兩個選項，它們是針對服務器行為的選擇。動作處理表單的程序。目標反饋信息頁面的打開方式。

昆明冶金高等?？茖W校計算機基礎教研室8.4.4網(wǎng)頁中表單的使用

3.插入表單控件對象表單屬性設置完畢之后，要實現(xiàn)相應的交互功能，還必須插入表單的相關控件和對象，才完成表單的設置，執(zhí)行【插入】|【表單】｜選擇表單對象插入。文本字段接受文本字段輸入的文本框。文本區(qū)域接受字母、數(shù)字、文本等文本字段輸入的文本框，可以接受多行顯示，功能和文本字段相似。復選框提供一組可供選擇選項，可以選擇其中的一項或者多項。按鈕用于激活程序單選按鈕組可以一次性插入多個單選按鈕，其功能等于按鈕。跳轉菜單鼠標單擊跳轉菜單相應的項，可以跳轉到對應的頁面圖像域可以使用圖形處理軟件來制作漂亮圖片來代替Dreamweaver默認按鈕。文件域提供訪問者訪問本地計算機文件的通道，并將被訪問的文件作為表單數(shù)據(jù)上傳。【例8.4.2】包含文本字段、單選按鈕、復選按鈕、下拉列表、文件域等的表單的頁面效果，

8.5網(wǎng)頁版面設計處理昆明冶金高等?？茖W校計算機基礎教研室網(wǎng)頁版面設計處理網(wǎng)頁版面設計處理網(wǎng)頁設計版面處理網(wǎng)頁設計版面處理123表格布局模式

框架網(wǎng)頁

設計一個網(wǎng)頁之前，我們一定要設計好一個頁面的布局模式，從而使頁面規(guī)整，美觀，在版面的設計處理中，我們經(jīng)常采用表格、布局模式或者框架網(wǎng)頁來設計網(wǎng)頁的版面。

昆明冶金高等專科學校計算機基礎教研室8.5網(wǎng)頁版面設計處理表格是頁面布局中最常用的手段，它可以實現(xiàn)對頁面元素的精確定位，有利于協(xié)調頁面結構平衡。

昆明冶金高等?？茖W校計算機基礎教研室8.5.1表格

昆明冶金高等?？茖W校計算機基礎教研室8.5.1表格1.創(chuàng)建表格執(zhí)行【插入】|【表格】2.在表格單元格中添加內(nèi)容添加文本，直接錄入，如果要添加圖像或其他內(nèi)容，那就插入相應內(nèi)容3.編輯表格與word方法相似4.表格或單元格屬性設置在其【屬性】對話框中完成5.使用表格布局頁面用表格布局操作比較簡單。一般是將頁面內(nèi)容分為幾個區(qū)域，如標題和導航區(qū)、正文區(qū)。標題和導航區(qū)在最上部，正文在下部。標題由一行一列，導航區(qū)可由一行多列表格組成。正文有多行多列的表格組成?！纠?-5-1】使用表格布局的由標題區(qū)、導航區(qū)和正文區(qū)組成的一個簡單頁面效果。8.5.2布局模式在“布局”模式中，我們可以使用表格作為基礎結構來設計我們的頁面，同時避免使用傳統(tǒng)的方法創(chuàng)建基于表格的設計時經(jīng)常出現(xiàn)的一些問題。創(chuàng)建頁布局常用的一種方法就是使用HTML表格對元素進行定位。但是，使用表格進行布局不太方便，為了簡化使用表格進行頁面布局的過程，MacromediaDreamweaverMX2004提供了“布局”模式。

昆明冶金高等?？茖W校計算機基礎教研室8.5.2布局模式

昆明冶金高等專科學校計算機基礎教研室8.5.2布局模式1.打開布局模式執(zhí)行【查看】|【表格模式】|【布局模式】菜單命令或在【插入】工具欄單擊【布局】按鈕，2.繪制布局表格執(zhí)行【插入】|【布局對象】|【布局表格】命令，指針變?yōu)槭?，按住鼠標左鍵，在要繪制布局表格的位置拖動鼠標繪制布局表格。4.在繪制布局單元格以添加內(nèi)容其添加的方式和表格中的操作方法一樣。5.調整布局單元格和布局表格布局單元格和布局表格的調整和表格的調整類似。3.繪制布局單元格需在布局表格繪制布局單元格后，才能夠插入文本和媒體對象等相關內(nèi)容。制布局單元其操作步驟為執(zhí)行【插入】|【布局對象】|【布局單元格】操6.布局表格或單元格屬性設置選中所要設置的布局表格或單元格，在其【屬性】對話框完成

昆明冶金高等?？茖W校計算機基礎教研室8.5.2布局模式7.使用布局模式布局頁面表格的逐層嵌套技術是網(wǎng)頁的布局基礎，利用布局表格可以實現(xiàn)任意復雜的頁面布局。使用布局模式布局頁面的一般步驟是：首先繪制一個大表覆蓋整個頁面區(qū)域，然后在大表中嵌套多個表格，每個表格代表一個設計區(qū)如頁眉、主體、頁腳，在每個設計區(qū)根據(jù)具體的版式要求，繼續(xù)嵌套表格實現(xiàn)更為細致的布局?！纠?.5.2】使用表格布局和繪制布局單元格工具實現(xiàn)網(wǎng)頁布局8.5.3框架網(wǎng)頁用框架布局頁面，可以通過多個框架將頁面分割為幾個相對單獨的頁面區(qū)域，可以分別對各個框架頁面單獨編輯，從而形成框架集，框架集構成整個頁面，從而達到布局頁面美觀的效果。

昆明冶金高等專科學校計算機基礎教研室8.5.3框架網(wǎng)頁

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

（中職）計算機應用基礎教程第八章網(wǎng)頁設計基礎教學課件

文檔簡介

溫馨提示

最新文檔

評論

（中職）計算機應用基礎教程第八章網(wǎng)頁設計基礎教學課件

文檔簡介

溫馨提示

最新文檔

評論

相關文檔