計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)演示文稿_第1頁
計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)演示文稿_第2頁
計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)演示文稿_第3頁
計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)演示文稿_第4頁
計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)演示文稿_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)演示文稿現(xiàn)在是1頁\一共有40頁\編輯于星期二計算機網(wǎng)設(shè)計基礎(chǔ)及基礎(chǔ)現(xiàn)在是2頁\一共有40頁\編輯于星期二一、認識網(wǎng)頁與網(wǎng)站

（1）靜態(tài)網(wǎng)頁，也就是HTML靜態(tài)頁面，它是物理存在的文件，這類網(wǎng)頁可以由網(wǎng)頁瀏覽器（如：IE、傲游）直接瀏覽。（2）動態(tài)網(wǎng)頁，它不能由瀏覽器直接瀏覽，而必須經(jīng)過Web服務器軟件解釋或編譯后，以HTML格式將結(jié)果輸出到客戶端瀏覽器上。1、網(wǎng)頁現(xiàn)在是3頁\一共有40頁\編輯于星期二一、認識網(wǎng)頁與網(wǎng)站

網(wǎng)站是一個復雜的系統(tǒng)，它不僅包括網(wǎng)頁、Web應用程序，還包括與之相關(guān)的數(shù)據(jù)庫及各類媒體文件，甚至還包括操作系統(tǒng)、Web服務器軟件以及承載網(wǎng)站運行的各類硬件設(shè)備等。2、網(wǎng)站圖1-1奧迪A8網(wǎng)站首頁現(xiàn)在是4頁\一共有40頁\編輯于星期二二、網(wǎng)頁的基本元素

文本是網(wǎng)頁中運用最為廣泛的元素之一，是網(wǎng)頁存在的基礎(chǔ)。在網(wǎng)頁設(shè)計中，我們可以通過設(shè)置字體、字號、顏色、背景等屬性來改變文本的視覺效果。1、文本圖1-2以文本為主體的網(wǎng)頁現(xiàn)在是5頁\一共有40頁\編輯于星期二二、網(wǎng)頁的基本元素

目前，網(wǎng)頁支持的圖像格式主要有3種：JPEG（JPG）、GIF和PNG。其中，GIF和PNG圖像支持透明背景。2、圖像圖1-3以圖像為主的網(wǎng)頁現(xiàn)在是6頁\一共有40頁\編輯于星期二二、網(wǎng)頁的基本元素

目前，在網(wǎng)頁設(shè)計過程中所使用的動畫主要是Flash動畫（*.swf）和GIF動畫。Flash動畫運用最為廣泛，而GIF動畫則主要用于站標、廣告條等組件。3、動畫圖1-4使用Flash制作的網(wǎng)頁現(xiàn)在是7頁\一共有40頁\編輯于星期二二、網(wǎng)頁的基本元素

目前，網(wǎng)頁上使用最為廣泛的音頻格式主要有MP3、MIDI和WAV。MP3文件最大的優(yōu)點就是能以較小的比特率以及較大的壓縮比達到近乎完美的CD音質(zhì)。MIDI文件的音質(zhì)較好，瀏覽器不需要安裝任何插件就可以播放。WAV文件也具有較好的音質(zhì)，但是，由于文件較大，在加載過程中會增加系統(tǒng)資源的開銷，不適合用來作為背景音樂。4、音頻現(xiàn)在是8頁\一共有40頁\編輯于星期二二、網(wǎng)頁的基本元素

隨著網(wǎng)絡帶寬的不斷增加，在網(wǎng)頁中使用的視頻也越來越多。在網(wǎng)頁中添加視頻文件可以大大增加站點的可讀性，視頻的直觀性可以給訪問者帶來很大的視覺沖擊。視頻和音頻一樣，都是由與文件類型相適應的插件來進行播放的。目前，網(wǎng)頁上使用最為廣泛的視頻格式包括WMV、RM、ASF、MPEG和AVI。5、視頻現(xiàn)在是9頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)超級文本（Hypertext）簡稱超文本，它是一種使用戶與計算機之間能夠更加密切交流的文本顯示技術(shù)，它通過對相關(guān)詞匯進行索引鏈接，可以使帶鏈接的詞匯或語句指向文本中的其他段落、注解或文本。超文本標記語言（HTML）是一種用來制作網(wǎng)絡中超文本的簡單標記語言。它在文本文件的基礎(chǔ)上加上一系列的標簽，用以描述其顏色、字體、文字大小和格式，再加上聲音、圖像、動畫、音頻、視頻等形成精彩的頁面。現(xiàn)在是10頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)

HTML文檔由一系列元素組成，用于組織文件的內(nèi)容和指導文件的輸出格式。元素名稱不區(qū)分大小寫，一個元素可以包含多個屬性，各個屬性用空格分開。元素又是由標簽構(gòu)成，除了極個別標簽是單獨存在的標簽以外，大多數(shù)標簽是成對出現(xiàn)的，由一個開始標簽“<>”和一個結(jié)束標簽“</>”組成。1、HTML文檔現(xiàn)在是11頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（1）單標簽語法結(jié)構(gòu)如下：<標簽屬性1=屬性值1屬性2=屬性值2……屬性N=屬性值N>例如：<hrsize=10width=“50%”align=left>1、HTML文檔（2）雙標簽語法結(jié)構(gòu)如下：<標簽>內(nèi)容</標簽>例如：現(xiàn)在是12頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)<html><head><title>簡單的HTML網(wǎng)頁制作</title></head><body><b>歡迎大家來學習網(wǎng)頁設(shè)計基礎(chǔ)!</b><br></body></html>1、HTML文檔現(xiàn)在是13頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（1）文本標簽：包括標題標簽、文字控制標簽和換行標簽。2、常用的HTML標簽

a、標題標簽：用于設(shè)置網(wǎng)頁中的標題文字，被設(shè)置的文字將以黑體或粗體顯示在網(wǎng)頁中。其語法結(jié)構(gòu)如下：<hnalign=參數(shù)>標題內(nèi)容</hn>例如：現(xiàn)在是14頁\一共有40頁\編輯于星期二<html><head><title>標題標簽</title></head><body>

標題標簽范例！

<h1align="center">一級標題</h1><h2align="left">二級標題</h2><h3align="right">三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6></body></html>現(xiàn)在是15頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（1）文本標簽：包括標題標簽、文字控制標簽和換行標簽。2、常用的HTML標簽b、文字控制標簽：用于控制文字的字體、大小和顏色。其語法結(jié)構(gòu)如下：<fontface=值1size=值2color=值3>文字</font>例如：現(xiàn)在是16頁\一共有40頁\編輯于星期二<html><head><title>文字控制標簽</title></head><body>

文字控制標簽范例！<p><font>默認字體</font><p><fontface="華文中宋"size="+3"color="red">上海世博會歡迎您！</font><p><fontface="隸書"size="+5"color="green">上海世博會歡迎您！</font><p><fontface="華文行楷"size="+7"color="blue">上海世博會歡迎您！</font><p><fontface="楷體_GB2312"size="+9"color="yellow">上海世博會歡迎您！</font></body></html>現(xiàn)在是17頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（1）文本標簽：包括標題標簽、文字控制標簽和換行標簽。2、常用的HTML標簽

c、換行標簽<br>：是一個單標簽，也稱空標簽，不包含任何內(nèi)容。在HTML文檔中的任何位置只要使用了<br>標簽，當用戶通過瀏覽器瀏覽該文檔時，<br>標簽后面的內(nèi)容將顯示在下一行。例如：現(xiàn)在是18頁\一共有40頁\編輯于星期二<html><head><title>換行標簽</title></head><body>

換行標簽范例！<br><fontface="隸書"size="+3"color="green">新的起航，新的希望！</font><fontface="隸書"size="+3"color="green">沒有使用換行標簽！</font><br><fontface="華文行楷"size="+3"color="blue">新的起航，新的希望！</font><br><fontface="華文行楷"size="+3"color="blue">使用了換行標簽！</font></body></html>現(xiàn)在是19頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（2）圖像標簽：通過使用圖像標簽可以將圖像文件插入到頁面中。圖像標簽的語法結(jié)構(gòu)如下：2、常用的HTML標簽<imgsrc=值1alt=值2align=值3border=值4vspace=值5hspace=值6width=值7height=值8>例如：現(xiàn)在是20頁\一共有40頁\編輯于星期二<html><head><title>圖像標簽</title></head><body>

圖像標簽范例！<br><divalign="center"><imgsrc="images/001.jpg"alt="黃鶴樓"align="center"border="1"width=400height=273><h2align="center">黃鶴樓送孟浩然之廣陵</h2><h3align="center">李白</h3><palign="center">故人西辭黃鶴樓，煙花三月下?lián)P州。</P><palign="center">孤帆遠影碧空盡，唯見長江天際流。</P></div></body></html>現(xiàn)在是21頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（3）表格標簽：表格標簽在網(wǎng)頁的設(shè)計過程中主要用來排版，以便使頁面變得更加美觀。2、常用的HTML標簽創(chuàng)建表格時，通常需要用到表格標簽<table></table>、表格標題標簽<caption></caption>、表格行標簽<tr></tr>、以及表格單元格標簽<th></tr>和<td></td>。例如：現(xiàn)在是22頁\一共有40頁\編輯于星期二<html><head><title>表格標簽</title></head><body>

表格標簽范例！<br><tableborder=“1”><caption>員工信息表</caption>

<tr><th>工號</th><th>姓名</th><th>性別</th><th>出生年月</th><th>所屬部門</th></tr><tr><th>0001</th><th>張三</th><th>男</th><th>1990年1月</th><th>人事部</th></tr><tr><th>0002</th><th>李四</th><th>女</th><th>1992年11月</th><th>財務部</th></tr></table></body></html>現(xiàn)在是23頁\一共有40頁\編輯于星期二三、超文本標記語言（HTML）基礎(chǔ)（1）每一個HTML文檔都不太大，它能夠盡可能快地通過網(wǎng)絡傳輸和顯示，不需要加入字體或格式等其他控制信息。3、HTML的優(yōu)點（2）HTML文檔是獨立于平臺的，它對多平臺兼容。（3）雖然HTML是一個標識性的語言，但是它比任何一種計算機語言都簡單易學。而且制作時并不需要特殊的軟件，只要一個字符編輯器就可以完成?，F(xiàn)在是24頁\一共有40頁\編輯于星期二四、網(wǎng)頁設(shè)計的基本流程網(wǎng)頁設(shè)計的基本流程包括前期策劃、CI形象設(shè)計、欄目與版塊規(guī)劃、確定網(wǎng)站的目錄結(jié)構(gòu)、確定網(wǎng)站的整體風格、版面布局及首頁設(shè)計、網(wǎng)頁模板制作、網(wǎng)站測試和發(fā)布網(wǎng)站等。（1）前期策劃：主要是為了確定網(wǎng)站的主題和名稱。主題要明確、精要，名稱要切題、有特色且易記住。現(xiàn)在是25頁\一共有40頁\編輯于星期二四、網(wǎng)頁設(shè)計的基本流程（2）CI形象設(shè)計：包括LOGO、色彩、廣告語等可以作為標志性的東西。盡量做到以得體的顏色和圖案體現(xiàn)網(wǎng)站的形象。（3）欄目與版塊規(guī)劃：欄目設(shè)置應體現(xiàn)網(wǎng)站的主題。版塊安排應盡量做到井井有條，避免產(chǎn)生混亂，堅持適度的原則。（4）確定網(wǎng)站的目錄結(jié)構(gòu)：盡量要簡潔，分支頁面內(nèi)容相對獨立，而且要求導航功能完善，能使用戶快速到達目的頁面。現(xiàn)在是26頁\一共有40頁\編輯于星期二四、網(wǎng)頁設(shè)計的基本流程（5）確定網(wǎng)站的整體風格：網(wǎng)站風格的確定主要針對瀏覽者以及網(wǎng)站的主題。（6）版面布局及首頁設(shè)計：頁面布局的原則是將一定的內(nèi)容放在特定的可視塊上。首頁應該切題精練、重點突出，能讓網(wǎng)頁瀏覽者快速地了解該網(wǎng)站的大概內(nèi)容。（7）網(wǎng)頁模板制作：網(wǎng)頁模板包括所有網(wǎng)頁的公共元素，如LOGO、廣告語、導航欄、返回首頁、站點地圖、E-mail地址、版權(quán)信息等?，F(xiàn)在是27頁\一共有40頁\編輯于星期二四、網(wǎng)頁設(shè)計的基本流程（8）網(wǎng)站測試：最方便的測試方法就是在本機上使用Internet瀏覽器進行瀏覽測試，包括鏈接、外觀、速度、腳本和程序等內(nèi)容，同時根據(jù)結(jié)果及時進行相應的修改。（9）發(fā)布網(wǎng)站：可以使用DreamweaverCS5中的“發(fā)布站點”功能或者FTP軟件，將頁面文件上傳到指定的網(wǎng)絡服務器上。如果自己沒有服務器，則需要在網(wǎng)絡上申請一個空間來存放網(wǎng)頁，同時還必須申請一個域名來指定站點在網(wǎng)絡上的位置?，F(xiàn)在是28頁\一共有40頁\編輯于星期二五、通過輸入HTML代碼制作簡單的網(wǎng)頁實驗前先在“D:\”目錄下新建一文件夾，并且將該文件夾重命名為“mysite”；打開mysite，再新建一個文件夾，將該文件夾重命名為“images”，把上機實踐文件夾第1課文件夾里面的圖片“孔子”復制到剛剛新建的“images”文件夾里。

步驟１單擊【開始】|【所有程序】|【附件】|【記事本】命令，打開記事本。

步驟2在記事本中輸入以下內(nèi)容：現(xiàn)在是29頁\一共有40頁\編輯于星期二<html><head><title>思學苑-歡迎您！</title></head><body>《論語》——孔子<divalign="center"><imgsrc="images/孔子.jpg"alt="孔子"align="center"border="1"width=150height=170><h1align="center">學而第一</h1>子曰：“學而時習之，不亦悅乎？有朋自遠方來，不亦樂乎？人不知而不慍，不亦君子乎？”

<p><tablealign="center"border=“1”><caption>注釋</caption><tr><th>原詞</th><th>釋義</th></tr>現(xiàn)在是30頁\一共有40頁\編輯于星期二<tr><th>時</th><th>以時、及時</th></tr><tr><th>習</th><th>溫習、復習</th></tr><tr><th>悅</th><th>高興、愉快</th></tr><tr><th>慍</th><th>怨恨、惱怒</th></tr></table></div></body></html>現(xiàn)在是31頁\一共有40頁\編輯于星期二五、通過輸入HTML代碼制作簡單的網(wǎng)頁

步驟3單擊【文件】|【保存】命令，彈出【另保為】對話框，在【保存在（I）】窗口中選擇文件保存的路徑為“D:\mysite”，在“文件名”窗口中輸入“index”，點擊【保存】按鈕保存文本。

步驟4單擊【開始】|【控制面板】命令，打開控制面板，雙擊“文件夾選項”圖標，彈出【文件夾選項】對話框，單擊【查看】選項卡，將【高級設(shè)置】下面的【隱藏已知文件類型的擴展名】前面的勾去掉，點擊【確定】按鈕完成設(shè)置?，F(xiàn)在是32頁\一共有40頁\編輯于星期二五、通過輸入HTML代碼制作簡單的網(wǎng)頁

步驟5重命名文件：打開“index”文件所在的目錄，右擊“index.txt”，再單擊【重命名】選項，將原文件重命名為“index.html”，彈出【重命名】提示對話框，單擊【是】按鈕確定重命名操作。

步驟6網(wǎng)頁測試：雙擊打開“index.html”文件，瀏覽我們剛剛制作的簡單網(wǎng)頁?，F(xiàn)在是33頁\一共有40頁\編輯于星期二六、DreamweaverCS5的基本功能

DreamweaverCS5可以通過拖拉的方式來創(chuàng)建頁面元素，然后以圖形界面的形式去編輯頁面元素的屬性。1、創(chuàng)建和編輯頁面元素

DreamweaverCS5是Adobe公司新推出的一款專業(yè)的Web網(wǎng)頁、Web站點以及Web應用程序設(shè)計編碼的開發(fā)與管理軟件。它具有可視化效果，還可以通過鼠標拖、拉圖形界面設(shè)置屬性來快速地創(chuàng)建網(wǎng)頁而無需手工編寫代碼。現(xiàn)在是34頁\一共有40頁\編輯于星期二六、DreamweaverCS5的基本功能

DreamweaverCS5可以進行Web站點的創(chuàng)建以及管理，能方便地管理我們的網(wǎng)站以及預覽網(wǎng)站中的網(wǎng)頁以及調(diào)試Web應用程序。3、站點管理

DreamweaverCS5的代碼視圖工作區(qū)提供了編輯html代碼的功能，此外在拆分視圖中上半個工作區(qū)也可以進行html代碼的編輯。2、編輯HTML現(xiàn)在是35頁\一共有40頁\編輯于星期二六、DreamweaverCS5的基本功能

DreamweaverCS5還可以插入媒體文件，如聲音、SWF格式視頻、FLV格式視頻，可以非常方便的編輯這些媒體文件。5、插入和編輯媒體

DreamweaverCS5作為網(wǎng)頁設(shè)計三劍客工具之一，可以非常方便的插入FireworksCS5文件和FlashCS5動畫。4、插入Fireworks文件和Flash動畫現(xiàn)在是36頁\一共有40頁\編輯于星期二七、DreamweaverCS5的工作界面圖1-4DreamweaverCS5工作區(qū)的

溫馨提示

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

評論

0/150

提交評論