網頁設計培訓html_第1頁
網頁設計培訓html_第2頁
網頁設計培訓html_第3頁
網頁設計培訓html_第4頁
網頁設計培訓html_第5頁
已閱讀5頁，還剩56頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網頁設計何錚2012.10.25什么是網頁什么是網頁？靜態(tài)網頁和動態(tài)網頁？網頁設計需要掌握些什么？做網頁的一些好習慣？動手做網頁前要準備和了解些什么？1.1網站與網頁

1．網站與網頁

當我們在瀏覽器中輸入一個已知網址后，即可打開一個頁面，讓我們了解有關這個網址的一些信息和內容，這個頁面就是我們通常所說的網頁，而打開網絡由網址進入時第一個看到的頁面，我們通常把它稱為首頁（homepage）或主頁，所有的信息都會清楚地整理在這個頁面上，目的就是為了讓用戶在使用這個網頁時能快速鏈接到需要的資料，它既是一個單獨的網頁，同一般網頁一樣可以存放各種信息,又是一個特殊的網頁，是整個Web站點的起始點和匯總點，是用戶開始瀏覽站點的“入口處”。由首頁所延伸下去的頁面，就是一個個網頁。

網站與網頁

網頁又稱Web頁面（.html、php、asp等），是網絡文件的組成部分，是可以被瀏覽器訪問的單個HTML超文本文件,它由文字、表格、圖片、聲音、視頻以及各種功能按鈕等組成，這些文字、圖片、按鈕往往又是指向別的主頁的連接點。在Internet網上，這些連接點又叫超級鏈接。所有由首頁鏈接出去的網頁集合起來就是網站。即在設計時，將某個主題明確后，再按所需的單元、內容經過安排，化為各個不同的網頁，在同一個結構及訴求下出現的集合體，就是網站（WebSite）。有主題性的網站是要經過規(guī)劃和構架過的網站。在互聯網上，Web站點由一組相互關聯的頁面組成，如果把整個WWW信息世界看作一個村子，那么一個Web站點可以理解成一個家庭。返回2.網頁的分類（1）靜態(tài)網頁：html,htm

靜態(tài)文本和圖片 網頁動畫：滾動的字幕、Flash動畫、.gif（2）動態(tài)網頁 動態(tài)內容和網頁特效：當前時間 交互式網頁內容：登錄用戶名 交互式網頁內容：讀寫服務器數據庫數據

2.1．服務器（Server）與瀏覽器（Browser）

服務器是局域網的核心設備,它管理著局域網中的各種資源,它的基本功能是網絡通信服務、管理和提供網絡共享資源，以及進行網絡管理。服務器實質是一臺配置較高的計算機。不同的電腦操作系統(tǒng)，有不同的適用服務器軟件，如：微軟視窗windowsXPProfessional操作系統(tǒng)適用的服務器軟件IIS5.1．網站上動態(tài)的數據，必須要通過網站服務器的服務才能運作。

2.1．服務器（Server）與瀏覽器（Browser）

用于查看Web站點的軟件被稱作瀏覽器。它是WWW的窗口,用戶可以利用瀏覽器從一個文檔跳轉到另一個文檔實現對整個網站的瀏覽,也可以下載并解釋HTML文檔中所描述的動畫、聲音、文本、圖形、圖像，并能實現電子郵件查看、下載文件、FTD等功能。它有多種版本,如微軟英特爾版本、蘋果電腦版本等，大多數瀏覽者（目前已經超過90％）使用MicrosoftInternetExplorer(簡稱IE)瀏覽器.還有一些其他的瀏覽器，不同版本的瀏覽器功能大體一樣，主要區(qū)別在于各功能區(qū)在版面上的排列不同。

WWW信息瀏覽方式：B/S返回3、網頁設計需要掌握些什么(1)網頁編輯軟件：FronPage、Dreamweaver(2)靜態(tài)網頁編程語言：HTML、CSS、XML(3)網頁物資編程語言：JavaScript、VBScript(4)交互式網頁編程語言：JSP、ASP、PHP(5)網頁設計輔助工具：Photoshop、FireWork、Flash返回HTML語言什么是HTML？HTML的標記

<標記符>

標記成對出現<a></a>

標記可以嵌套靜態(tài)網頁的文件類型？

htm,html網頁的結構<html><head><title></title></head><body>這是一個最簡單的HTML結構。</body></html>HTML元素屬性

HTML元素可以有自己的相關屬性，每一個屬性還可以由我們網頁編制者賦一定的值。元素屬性出現在元素的<>內，并且和元素名之間有一個空格分隔；屬性值用“”引起來。例：<imgsrc=“img/aa.gif"alt="圖片"border="0">HTML注釋及空白符HTML文檔可以插入注釋。注釋內容不會在瀏覽器窗口顯示HTML注釋的格式為：<!

<!--注釋內容-->

<!--多行注釋內容-->空白占位符:

IMG標記<img>標記：顯示一個圖像屬性：src

圖片的路徑屬性：border

是否顯示邊框屬性:width

圖片的寬度屬性：hight

圖片的高度屬性:alt

圖片注釋其他常用標記（1）<p>標記:段落 屬性align:段落對齊（left,center,right）<br>標記：換行<h1>~<h7>標記：文字標題<font>標記：字體設置標記 屬性color：字體顏色 屬性size:字體大小<sup>標記：上標<sub>標記：下標

其他常用標記（2）<i>標記：傾斜文本<b>標記：粗體文本<u>標記：下劃線文本<s>標記：刪除線文本<del>標記：雙刪除線文本<pre>標記:預排版（保留空格和換行）

<hr>標記：水平分隔線 屬性size

：設定線寬 屬性width：設定線長 屬性align：設定對齊方式（left,right） 屬性color：設定線的顏色HTML對顏色的控制

HTML對顏色的控制也有自己的語法。HTML使用16進制的RGB顏色值對顏色進行控制。

16進制的數碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.下面關于顏色的定義都是合法的:#f00#ff0000redrgb(255,0,0)rgb(100%,0%,0%)顏色顏色名和RGB值黑色Black=”#000000”銀色Silver=”#c0c0c0”紅色Red=”#ff0000”藍色Blue=”#0000ff”白色White=”#ffffff”黃色Yellow=”ffff00”綠色Green=”#00ff00”海藍色Aqua=”#00ffff”常見顏色的代碼<body>標記屬性-1<body>元素中有下列元素屬性：Bgcolor：bgcolor屬性標志HTML文檔的背景顏色。如：bgcolor="#CCFFCC"<body>標記屬性-2<body>元素中有下列元素屬性：Background：background屬性標志HTML文檔的背景圖片如：background="images/bg.gif"可以使用的圖片格式為GIF，JPG<body>標記屬性－3<body>元素中有下列元素屬性：Leftmargin，rightmargin，topmargin：設置網頁主體內容距離網頁頂端和左端，右端的距離如：leftmargin="20"topmargin="30“A標記-1<a>標記：超連接標記基本語法<ahref=“URL”>…..</a>

屬性href

：連接的文件路徑和名稱屬性title

：鼠標移動到連接內容時的提示文字A標記-2<a>標記：超連接標記屬性target：頁面打開方式

_self :在本頁面打開

_blank :在新頁面打開

_parent :在父頁面打開

_top :在上部頁面打開A標記-3

屬性name：可以跳轉到一個文件的指定部位

<ahref="#C1">參見第一章</a><aname="C1">第一章</a>

相對路徑和絕對路徑

在網頁引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。

相對路徑：

“/img/test.jpg”

絕對路徑： “/aa/test.jpg”HTML相對路徑(RelativePath)

同一個目錄的文件引用 如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。 我們現在建一個源文件info.html，在info.html里要引用index.html文件作為超鏈接。 假設info.html路徑是： c:\web\www\sites\test\info.html

假設index.html路徑是： c:\web\www\sites\test\index.html

在info.html加入index.html超鏈接的代碼應該這樣寫：

<ahref="index.html">index.html</a>

如何表示上級目錄 ../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。 假設info.html路徑是c:\web\sites\test\info.html

假設index.html路徑是：c:\web\sites\index.html

在info.html加入index.html超鏈接的代碼應該這樣寫：

<ahref="../index.html">index.html</a>

假設info.html路徑是：c:\web\sites\test\info.html

假設index.html路徑是：c:\web\index.html

在info.html加入index.html超鏈接的代碼應該這樣寫：

<ahref="../../index.html">index.html</a>

假設info.html路徑是：c:\web\sites\test\info.html

假設index.html路徑是：c:\web\sites\story\index.html

在info.html加入index.html超鏈接的代碼應該這樣寫：

<ahref="../story/index.html">index.html</a>如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。假設info.html路徑是：

c:\web\www\sites\test\info.html假設index.html路徑是：c:\web\www\sites\test\html\index.html在info.html加入index.html超鏈接的代碼應該這樣寫：

<ahref="html/index.html">index.html</a>假設info.html路徑是：

c:\web\www\sites\test\info.html假設index.html路徑是：c:\web\www\sites\test\html\a\index.html在info.html加入index.html超鏈接的代碼應該這樣寫：<ahref="html/a/index.html">index.html</a>HTML絕對路徑(AbsolutePath)HTML絕對路徑(absolutepath)指帶域名的文件的完整路徑。假設你注冊了域名，并申請了虛擬主機，你的虛擬主機提供商會給你一個目錄，比如www，這個www就是你網站的根目錄。假設你在www根目錄下放了一個文件index.html，這個文件的絕對路徑就是：/index.html。假設你在www根目錄下建了一個目錄叫main，然后在該目錄下放了一個文件index.html，這個文件的絕對路徑就是/main/index.html。滾動字幕標記

我們可以經常在一些網頁里看到不斷滾動的字幕，使網頁變得更加豐富多彩。我們也可以利用HTML里的<marquee>…</marquee>標記來制作一個可以不斷自動滾動的字幕，用來顯示文字或圖案,從而大大加強網頁的動態(tài)效果。它也稱為跑馬燈效果。這種移動不僅僅局限于文字，也可以應用于圖片，表格等等。滾動字幕標記1<marquee>標記：滾動字幕標記 屬性direction

：運動方向（left,

right

,up,down

） 屬性behavior

：運動方式（scroll,

slide,

alternate）Scroll: 內容向同一個方向滾動

Slide: 內容接觸到字幕邊框就停止?jié)L動

Alternate: 來回交替運動

屬性loop

：循環(huán)次數，若未指定則循環(huán)不止

屬性scrollamount

：速度 屬性scrolldelay

：延時 屬性bgcolor

：背景顏色 屬性align

：對齊方式（top,

middle,

bottom） 屬性height

：字幕的高度 屬性width

：字幕的寬度 屬性hspace

：字幕的水平空白 屬性vspace

：字幕的垂直空白Table標記<table>標記：定義表格標記<tr>：定義表行標記<th>：定義表頭（粗體顯示）標記<td>：定義表元(表格的具體數據)

標記<tbody>:表格的主體

（可選）例子：<table><tr><td>內容</td></tr></table>表格標記Table常用屬性（1）

屬性width

：定義寬屬性height

：定義高屬性border

：表格是否顯示邊線屬性align

：（left,center,right）設置單元內容橫向位置屬性valign

：（top,middle,bottom,baseline）設置單元內容縱向位置屬性colspan

：設置表格多列單元格屬性rowspan

：設置表格多行單元格表格標記Table常用屬性（2）

屬性cellpadding

：單元格內容與邊框的間距屬性cellspacing

：單元格之間的間距屬性bgcolor

：背景顏色屬性background

：背景圖片（IE支持）屬性bordercolor

：表格邊框的色彩

（IE支持）屬性rules

：定義隱藏的表格分隔線（IE支持）它有三個參數(cols,rows,none)

屬性frame

：定義表格隱藏的邊框（IE支持） 它有6個參數 (above,below,vsides,hsides,lhs,rhs,void)框架標記<frameset>標記：框架標記決定如何劃分框架

屬性cols

：表示按列分布框架

屬性rows

：表示按行分布框架屬性frameborder:是否現顯示邊框邊界屬性framespacing:框架間的間距<frame>

標記：設定框架內含的網頁屬性src

：網頁的路徑和文件名

屬性noresize

：如果設置了noresize屬性，就不能移動邊界了

屬性name

：框架的調用名稱<noframe>標記:

來顯示在不支持框架的瀏覽器窗口中的內容，方便那些不支持框架的用戶閱讀網頁框架標記示例<html><head><title>這是個左右框架</title></head><framesetcols="25%,75%"><framesrc="b.htm"><framesrc="c.htm"></frameset><noframes><body>該瀏覽器不支持框架</body></noframes></html>HEAD標記

<head>標記出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其間的子標記有特殊重要的意義。<title><title>標記定義HTML文檔的標題。<title>與</title>之間的內容將顯示在瀏覽器窗口的標題欄。HEAD標記—關鍵詞<meta>標記出現在<head></head>里面<meta>標記下面可以插入很多很有用的屬性。下面介紹四種：<metaname="keywords"content="study,computer">用來標記搜索引擎在搜索你的頁面時所取出的關鍵詞。HEAD標記—文檔作者<metaname="author"content="wutao">用來標記文檔的作者。HEAD標記—解碼方式<metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”>用來標記你的頁面的解碼方式。上例指明用中文GB2312方式對頁面進行解碼HEAD標記—頁面跳轉<metahttp-equiv="refresh"content="5;URL=/eschool">用來自動刷新跳轉到指定的網頁其中的5指明5秒以后開始跳轉(為0表示直接跳轉)URL指明跳轉的地址頁面跳轉練習編寫一個網頁，要求3秒鐘后自動跳轉到信息系論壇。<html><head><title>myfirstpage</title><metahttp-equiv="refresh"content="3;URL=/bbs"></head><body><palign="center">三秒鐘后本網頁將自動跳轉到信息系論壇</p></body></html>HEAD標記—頁面過渡效果

網頁過渡是指當瀏覽者進入或離開網頁時，頁面呈現的不同的刷新效果，比如放射，卷動，百葉窗等。這樣我們的網頁看起來會更具有動感，不過也要注意適可而止，否則太花哨的變化也容易引起瀏覽者的反感。

HEAD標記—頁面過渡效果1在<head>與</head>插入代碼：<metahttp-equiv="Exit"content="revealTrans(Duration=3,Transition=3)">http-equiv的值為: Enter:指頁面進入

Exit:指頁面退出revealTrans:指使用轉換濾鏡Duration:指效果持續(xù)時間3秒Transition:指轉換效果為3即以圓形向外轉換HEAD標記—頁面過渡24種效果轉換類型值轉換類型值以框圖向內轉換0隨機溶解12以框圖向外轉換1垂直向內分割13以圓形向內轉換2垂直向外分割14以圓形向外轉換3水平向內分解15向上擦除4水平向外分解16向下擦除5左下條帶17向右擦除6左上條帶18向左擦除7右下條帶19垂直閃爍8右上條帶20水平閃爍9隨機水平條21交叉翻板10隨機垂直條22向下翻板11隨機23頁面轉換效果練習編寫一個網頁，頁面進入時隨機出現轉換效果<html><head><title>頁面轉換效果</title><metahttp-equiv="exit"content="revealtrans(duration=3,transition=23)"></head><body><palign="center"><ahref=img.htmtarget=_self>點擊看頁面轉換效果</a></p></body></html>頁面轉換效果說明頁面轉換效果也可以使用blendtrans濾鏡實現漸隱效果:<metahttp-equiv="enter"content="blendTrans(Duration=5)">圖像其它常用效果圖像地圖 見例子圖像翻轉 見例子表單表單的作用

表單提供了從用戶那里收集信息、向數據庫中添加信息和從數據庫中搜索信息的方法，是建立動態(tài)網頁的最重要的工具。表單的組成

一般的表單由兩部分組成，一是描述表單的HTML源代碼，二是客戶端的腳本，或者服務器用來處理用戶所填寫信息的程序。

表單的工作原理

當訪問者將信息輸入表單并單擊提交按鈕時，這些信息將被發(fā)送到服務器，服務器端腳本或應用程序在該處對這些信息進行處理，服務器通過將請求信息發(fā)送回用戶，或基于該表單內容執(zhí)行一些操作來進行響應。一個包含表單的頁面文本字段列表/菜單

文本區(qū)域按鈕單選按鈕復選框文本字段列表/菜單

文本區(qū)域按鈕單選按鈕復選框表單的對象表單對象包括：文本區(qū)域、隱藏域、復選框、單選按鈕、列表（菜單）、跳轉菜單、文件域、表單按鈕等<form>標記:表單標記 屬性method

：數據提交的方式（post,GET

） 屬性action

：數據提交的地址<input>標記:表單對象標記

屬性type:通過<input>標記的type屬性來定義表單對象（text，radio，checkbox，file，submit，reset，hidden,button等）表單的對象例子文本：<inputtype="text"name="tf">

隱藏域：<inputtype="hidden"name="tf">

復選框：<inputtype="checkbox"name="tf">

單選按鈕：<inputtype="radio"name="tf">

文件域：<inputtype="file"name="tf">

按鈕：<inputtype="button"name="tf">

文本區(qū)域：<textareaname="tf"cols=20rows=40>

屬性cols:文本區(qū)域的寬屬性rows:文本區(qū)域的高表單的對象例子2表單列表對象:

<select>標記例子：

<select> <option>大學</option> <option>高中</option> <option>小學</option> <option>初中</option></select>表單的例子<formaction=/1.aspmethod=post><inputtype="text"name="textfield"value=姓名>

<inputtype="radio"checkedname="rbu0">北京<inputtype="radio"name="rbu0">上海<inputtype="radio"checkedname="sex">男<inputtype="radio"name="sex">女</form>多媒體

在網頁中插入視頻和聲音可以讓我們的網頁更加生動和形象。插入視頻和聲音要慎重，過大的視頻和聲音文件會因為長時間無法載入完成而達不到網頁設計者所要展現的內容。 插入不同視頻媒體時，需要網頁瀏覽者的電腦上安裝相應的視頻媒體播放插件，才能正常播放媒體。多媒體embed標記用<EMBED>嵌入多媒體對象屬性src：多媒體對象的路徑及文件名屬性autostart：是否自動開始（true,false）屬性loop：播放次數注：使用

溫馨提示

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

評論

0/150

提交評論