網(wǎng)頁設(shè)計基礎(chǔ) 網(wǎng)頁設(shè)計與制作基礎(chǔ)_第1頁
網(wǎng)頁設(shè)計基礎(chǔ) 網(wǎng)頁設(shè)計與制作基礎(chǔ)_第2頁
網(wǎng)頁設(shè)計基礎(chǔ) 網(wǎng)頁設(shè)計與制作基礎(chǔ)_第3頁
網(wǎng)頁設(shè)計基礎(chǔ) 網(wǎng)頁設(shè)計與制作基礎(chǔ)_第4頁
網(wǎng)頁設(shè)計基礎(chǔ) 網(wǎng)頁設(shè)計與制作基礎(chǔ)_第5頁
已閱讀5頁，還剩46頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

計算機(jī)信息中心授課教師：邵熹雯jsjsxw@第一章網(wǎng)頁設(shè)計與制作基礎(chǔ)1.1Internet基礎(chǔ)1.2網(wǎng)頁圖像基礎(chǔ)1.3網(wǎng)頁制作軟件的主要功能和特點1.4本章小結(jié)本章內(nèi)容1.1Internet基礎(chǔ)什么是Internet?Internet概念的由來計算機(jī)網(wǎng)絡(luò)，簡單的說，就是用通信線路把若干計算機(jī)連起來，再配以適當(dāng)?shù)能浖陀布?，以達(dá)到計算機(jī)之間的資源共享和信息交換。Internet的中文名稱是因特網(wǎng)或國際互聯(lián)網(wǎng)，是一個幾乎覆蓋了全世界的計算機(jī)網(wǎng)絡(luò)。Internet提供的服務(wù)萬維網(wǎng)WWW服務(wù)：(超文本傳輸服務(wù)) http協(xié)議?？蛻舳塑浖篒E瀏覽器等

http的主要作用就是請求由超級連接引用的頁面FTP服務(wù)：(文件傳輸服務(wù))

ftp協(xié)議。客戶端軟件：IE瀏覽器、flashfxp等Telnet服務(wù)：(遠(yuǎn)程登陸服務(wù))

telnet協(xié)議?？蛻舳塑浖篜canywhere等Email服務(wù)：(電子郵件服務(wù))

pop3和smtp協(xié)議。 客戶端軟件：IE瀏覽器、outlook等WWW服務(wù)簡介超文本的思想的應(yīng)用從孤立封閉的單個計算機(jī)中擴(kuò)展到由無數(shù)計算機(jī)匯接而成的網(wǎng)絡(luò)海洋。（表現(xiàn)成網(wǎng)頁中的超級鏈接。）最終形成了今天的www萬維網(wǎng)：WordWideWeb網(wǎng)頁能存放在全球任何計算機(jī)上。Internet上鏈接在一起的網(wǎng)頁構(gòu)成了龐大的信息網(wǎng)。圖1-1網(wǎng)頁的超文本結(jié)構(gòu)客戶機(jī)與服務(wù)器Internet連接著難以計數(shù)的計算機(jī)，按照功能它們大致可分為服務(wù)器和客戶機(jī)兩類。服務(wù)器是提供資源和服務(wù)的計算機(jī)。客戶機(jī)是供用戶使用資源和享受服務(wù)的計算機(jī)。圖1-2客戶機(jī)和服務(wù)器WWW服務(wù)中的客戶機(jī)與服務(wù)器WWW服務(wù)器上的主要內(nèi)容靜態(tài)網(wǎng)頁文件交互式網(wǎng)頁文件與網(wǎng)頁相連接的各種媒體文件支持交互式網(wǎng)頁的數(shù)據(jù)文件客戶機(jī)的工作請求網(wǎng)頁上傳數(shù)據(jù)顯示結(jié)果IP地址和域名IP地址 一種地址格式。是Internet上的每一個網(wǎng)絡(luò)和每一臺主機(jī)的唯一標(biāo)識。XXX.XXX.XXX.XXX0~255全球IP地址分配表根據(jù)IP地址查出主機(jī)所處位置（具體到區(qū)、縣）域名 IP地址是一個32位二進(jìn)制數(shù)，不便于記憶，于是提出采用域名代表IP地址。 域名采用分層次結(jié)構(gòu)，入網(wǎng)的每臺主機(jī)都可以有一個類似下面的域名：主機(jī)名.單位名.機(jī)構(gòu)名.國家名提供萬維網(wǎng)

主頁服務(wù)的

服務(wù)器

新浪

公司

商業(yè)類中國

域名管理機(jī)構(gòu)CNNIC是“中國互聯(lián)網(wǎng)絡(luò)信息中心”（ChinaInternetNetworkInformationCenter）

http:///中文域名280/年ICANN:國際互聯(lián)網(wǎng)名稱和地址分配組織WWW.ICANN.ORG（TheInternetCorporationforAssignedNamesandNumbers）

域名管理機(jī)構(gòu)URL和超鏈接統(tǒng)一資源定位器 （UniformResourceLocator簡稱URL）。URL是全球WWW網(wǎng)服務(wù)器資源的標(biāo)準(zhǔn)尋址定位編碼，它被用來確定資源的相應(yīng)位置。URL結(jié)構(gòu) 資源類型、存放資源的主機(jī)域名和資源文件路徑及名稱

http:///lx/index.htm

資源類型主機(jī)域名/IP網(wǎng)頁文件URL是WEB資源的唯一標(biāo)識！超級鏈接鏈接源:網(wǎng)頁中各種元素對象鏈接目標(biāo):通過相對路徑方式指定,反映成URLHTML語言網(wǎng)頁實際上就是一個用超文本標(biāo)記語言HTML（hypertextmarkuplanguage）編寫的文本文件，從而把文字、表格、圖像、動畫、聲音和視頻等各種媒體有機(jī)地組合在一起。任何文字編輯器都可以編輯HTML語言，只要能將文件另存成ASCII純文字格式即可，當(dāng)然以專業(yè)的網(wǎng)頁編輯軟件為佳。學(xué)習(xí)HTML語言的目的觀察網(wǎng)頁源代碼的重要性觀察網(wǎng)頁源代碼的方法 IE瀏覽器〉編輯〉源文件HTML標(biāo)記的寫法任何標(biāo)記皆由“<”及“>”所圍住，如<P>

標(biāo)記名與小于號之間不能留有空白字符。參數(shù)只可加于起始標(biāo)記中,多個參數(shù)以空格分隔 如<fontsize=“+2”>Hello</font>

。標(biāo)記名前加上“/”便是其終結(jié)標(biāo)記，如</font>標(biāo)記字母大小寫皆可。HTML標(biāo)記的分類圍堵標(biāo)記：成對出現(xiàn)

它以起始標(biāo)記及終結(jié)標(biāo)記將文字圍住，令其達(dá)到預(yù)期顯示效果。 <b>CreationofWebpage</b>ismyfavourite.空標(biāo)記：單獨出現(xiàn)

只有起始標(biāo)記沒有終結(jié)標(biāo)記。 IloveCreationofWebpage.<br>It'sawonderfulplace.

其中換行標(biāo)記<br>便屬空標(biāo)記。HTML頁面文件標(biāo)記<HTML>；<HEAD>；<TITLE>；<BODY>HTML文件的基本架構(gòu)<HTML><HEAD><TITLE>

網(wǎng)頁的標(biāo)題

</TITLE>

</HEAD>

<BODY>

網(wǎng)頁的內(nèi)容，很多標(biāo)記都作用于此

</BODY></HTML>整份文件處于標(biāo)記<HTML>與</HTML>之間<HTML>用以聲明這是HTML文件，讓瀏覽器認(rèn)出并正確處理此HTML文件。文件分兩部分，由<HEAD>至</HEAD>稱為開頭 <BODY>至</BODY>稱本文。 開頭部分用以存載重要資訊，只有本文部分會被顯示。 所以大部分標(biāo)記會運用于本文部分。<TITLE>所標(biāo)示的是文件的標(biāo)題。 會出現(xiàn)于瀏覽器頂部，所以每頁有不同而明確的標(biāo)題。上述標(biāo)記中只有<BODY>具參數(shù)設(shè)定標(biāo)記<BODY>的參數(shù)設(shè)定例子：<BODY

text="#000000”link="#0000FF"

alink="#FF0000”vlink="#0000FF“background="bg1.gif"bgcolor="#FFFFFF"

leftmargin=2topmargin=2>HTML基本元素-字體標(biāo)記描述：<font>具體文字

</font>

參數(shù)描述： <font

size=#>...</font>：字體大小 <fontcolor=#>...</font>：字體顏色

rrggbb16進(jìn)制數(shù)碼，或者是下列預(yù)定義色彩：

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,

Fuchsia,White,Green,Purple,Silver,Yellow,Aqua

HTML基本元素-文字布局標(biāo)記描述： <p>：段(Paragraph)(可以看作是空行) <br>：換行

<div

align=left>...</div>：文字的分區(qū)顯示參數(shù)描述： <p

align=#>...</p>（#=left,center,right）： 文字的對齊HTML基本元素-圖片標(biāo)記&參數(shù)描述： <img

src=#>#=圖象的URL <imgalt=#>#=在瀏覽器尚未完全讀入圖象時，在圖象位置顯示的文字。注意： 圖象URL的地址描述方法： 相對路徑描述方法對齊

圖片位于網(wǎng)頁文件當(dāng)前文件夾下<img

src=圖片文件名>圖片位于網(wǎng)頁文件下一級文件夾下<img

src=文件夾名/圖片文件名>圖片位于網(wǎng)頁文件上一級文件夾下<img

src=../文件夾名/圖片文件名>HTML基本元素-超級鏈接標(biāo)記&參數(shù)描述： <ahref=…

target=

…>鏈接文字</a>:

href=鏈接地址 target=

target=_blank>新窗口 target=_self>本窗口target=_parent>父窗口思考：將一個圖片作為鏈接HTML基本元素-表格標(biāo)記描述： <table>...</table>：定義表格 <tr>：定義表行 <td>：定義單元

<table><tr><td>a11</td><td>a12</td></tr><tr><td>a21</td><td>a22</td></tr></table>參數(shù)描述： border=

邊框?qū)挾?/p>

bordercolor

=

邊框顏色 width=#height=#表格尺寸設(shè)置

cellspacing=10表元間隙設(shè)置

bgcolor=背景顏色HTML基本元素-表單標(biāo)記描述： <form>…</form>表示其它表單標(biāo)記需要在它的包圍中才有效 <input>

以設(shè)定各種輸入資料的方法。它是一個空標(biāo)記。<form>參數(shù)描述： <form

action=…method=…>...</form> <inputtype=..

name=..

value=..

src=..

checked=..><input>參數(shù)描述： type=……..可選值為：Text,Radio,Checkbox,Submit/Reset,

Image,Hidden,Button。 name=表單對象的名稱 value=表單對象默認(rèn)值

src=按鈕對象圖片 checked=當(dāng)前選中項網(wǎng)頁圖像基礎(chǔ)-位圖和矢量圖位圖是由分配了特定位置和顏色值的點(象素)的排列組成。位圖的色彩和色調(diào)變化豐富，但占用空間較多。矢量圖用一組繪圖指令來描述圖像的內(nèi)容，這些指令根據(jù)圖形的幾何特性定義圖形的輪廓，并用顏色進(jìn)行描邊和填充。矢量圖主要用于表示線框型的圖畫、工程制圖、藝術(shù)字等。矢量圖文件的容量較小。將位圖和矢量圖像放大前后的實際效果常用圖像格式及其特點BMP格式：Windows最早的圖像格式GIF格式：透明背景，動畫，256色JPEG格式：文件大小和效果的完美平衡PNG格式：gif的拓展，28到232種顏色PSD格式：PhotoShop，非位圖。PCW格式：不壓縮的位圖。專業(yè)攝影。色彩的屬性各種色彩都具有明度、色相和純度三種屬性。明度是指色彩的明暗程度，任何色彩都有自己的明暗特征。色彩明度值由高到低的明度變化過程色相是指色彩的相貌，用來區(qū)別色彩種類。紅、黃、藍(lán)等色族便就是色相，它們之間的差別屬于色相差別。純度是指色彩的鮮艷度、飽和度。RGB色彩模式和Web安全色網(wǎng)頁制作中使用最廣泛的是RGB色彩模式的十六進(jìn)制顯示模式。即用3個00~FF的十六進(jìn)制數(shù)來表示組成顏色的紅、綠、藍(lán)色的數(shù)值。例如：000000表示黑色，F(xiàn)FFFFF表示白色，00FF00表示紅色，0000FF表示藍(lán)色，總共有224種顏色。我們把在不同的操作系統(tǒng)和瀏覽器中顯示效果一致的216種顏色稱為網(wǎng)絡(luò)安全色。顏色拾取框中可以直接選取的顏色都是 Web安全色圖像元素在網(wǎng)頁中的應(yīng)用LOGO(標(biāo)志)標(biāo)題照片和插圖廣告橫幅（Banner）背景導(dǎo)航欄補充:網(wǎng)站設(shè)計要點網(wǎng)頁要有可讀性網(wǎng)頁需要有結(jié)構(gòu)，尤其是長篇的網(wǎng)頁，可以考慮把長篇的網(wǎng)頁分開成多幅，或者提供網(wǎng)頁之內(nèi)的捷徑鏈接，使用戶可以很快地跳躍過部分篇幅有節(jié)制地使用網(wǎng)頁上的動感畫面和動感標(biāo)題。留意網(wǎng)頁的下載速度。網(wǎng)站網(wǎng)頁要有好的檢索設(shè)計為了利用檢索功能，讓檢索出來的結(jié)果真切地反映網(wǎng)頁內(nèi)容的相關(guān)性，應(yīng)該用簡潔明了的文字來撰寫網(wǎng)頁的題目和標(biāo)題；同時注意用好網(wǎng)頁最前面的二三十個文字，以期最精華地反映網(wǎng)頁的內(nèi)容。應(yīng)定義好網(wǎng)頁的關(guān)鍵詞，以增人被檢索到的概率。提高網(wǎng)站的交互性 最起碼的要提供電子郵件、BBS、聊天室等應(yīng)用，在網(wǎng)站上設(shè)立反饋信箱網(wǎng)站內(nèi)容要做到目標(biāo)明確、定位正確主題鮮明、富有特色網(wǎng)站的整體風(fēng)格和特色做出定位對于一些行業(yè)標(biāo)志和公司的標(biāo)志應(yīng)充分加以利用版式編排布局合理文字圖形的空間組合頁面間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系設(shè)計簡單有序，主次關(guān)系分明良好的標(biāo)題與文字設(shè)計色彩和諧重點突出按照色彩的記憶性原則色彩還具有聯(lián)想與象征的特質(zhì)不同人群對色彩喜惡程度的差異形式內(nèi)容和諧統(tǒng)一通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。使用點、線、

溫馨提示

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

最新文檔

評論

0/150

提交評論