jsp第一章web網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第1頁(yè)
jsp第一章web網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第2頁(yè)
jsp第一章web網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第3頁(yè)
jsp第一章web網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第4頁(yè)
jsp第一章web網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩178頁(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)介

JSP編程教程授課教師：劉紅梅掌握HTML語(yǔ)言；掌握Servlet和會(huì)話技術(shù)掌握基于Servlet的MVC模式掌握在JSP數(shù)據(jù)庫(kù)中使用數(shù)據(jù)庫(kù)的技術(shù)運(yùn)用JSP技術(shù)開(kāi)發(fā)一個(gè)應(yīng)用網(wǎng)站課程目標(biāo)第一章緒論兩種WEB開(kāi)發(fā)模式介紹網(wǎng)站相關(guān)概念網(wǎng)站開(kāi)發(fā)相關(guān)技術(shù)JSP網(wǎng)頁(yè)HTML語(yǔ)言C/S（Client/Server）：客戶/服務(wù)器模式?？蛻舳诵枰惭b專(zhuān)用的客戶端軟件與服務(wù)器進(jìn)行數(shù)據(jù)交互。B/S（Brower/Server）：瀏覽器服務(wù)器模式?？蛻舳松现恍璋惭b一個(gè)瀏覽器（Browser），瀏覽器通過(guò)WebServer同數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互。1、WEB開(kāi)發(fā)模式QQ客戶端WEBQQWebQQ為大家提供了聊天記錄的全漫游，不論你走到哪里，都替你保存7天的WebQQ聊天消息，方便你隨時(shí)查閱，局域網(wǎng)特定用戶群中資源共享B/S即Browser/Server數(shù)據(jù)庫(kù)服務(wù)器學(xué)生機(jī)1學(xué)生機(jī)2學(xué)生機(jī)n需要安裝客戶端軟件服務(wù)器Internet全球用戶群中資源共享美國(guó)用戶中國(guó)用戶數(shù)據(jù)庫(kù)服務(wù)器無(wú)需安裝客戶端軟件C/S即Client/Server可維護(hù)性響應(yīng)速度界面設(shè)計(jì)服務(wù)器負(fù)載C/S需要對(duì)每個(gè)客戶端升級(jí)客戶端與數(shù)據(jù)庫(kù)直連，響應(yīng)速度快界面設(shè)計(jì)滿足用戶的個(gè)性化需求客戶端與服務(wù)器都能處理任務(wù)，對(duì)客戶機(jī)要求高B/S幾種在總服務(wù)器上進(jìn)行升級(jí)Web應(yīng)用程序動(dòng)態(tài)刷新，響應(yīng)速度慢個(gè)性化特點(diǎn)低大部分工作由服務(wù)器完成，客戶端僅使用瀏覽器。C/S與B/S對(duì)比表數(shù)據(jù)安全性數(shù)據(jù)一致性數(shù)據(jù)實(shí)時(shí)性C/S每個(gè)數(shù)據(jù)點(diǎn)上數(shù)據(jù)的安全將影響整個(gè)應(yīng)用系統(tǒng)的數(shù)據(jù)安全同步各客戶端的數(shù)據(jù)后，服務(wù)器才能得到最終數(shù)據(jù)不能實(shí)時(shí)看到當(dāng)前業(yè)務(wù)情況B/S數(shù)據(jù)直接保存在總的數(shù)據(jù)庫(kù)中數(shù)據(jù)集中存放，不存在數(shù)據(jù)一致性問(wèn)題可以實(shí)時(shí)看到當(dāng)前業(yè)務(wù)情況C/S與B/S對(duì)比表（續(xù)）以校園一卡通數(shù)據(jù)為例，了解兩種模式關(guān)于數(shù)據(jù)的安全性、一致性和實(shí)時(shí)性的不同。Web服務(wù)器：Web服務(wù)器，在網(wǎng)絡(luò)中為實(shí)現(xiàn)信息發(fā)布、資料查詢、數(shù)據(jù)處理等諸多應(yīng)用而搭建基本平臺(tái)的服務(wù)器。有時(shí)，我們也常常稱(chēng)Web服務(wù)器叫Web容器。常用的服務(wù)器有：Tomcat、IIS，Apach，GFEGoogle，Zeus等）2、網(wǎng)站相關(guān)概念網(wǎng)站指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（超文本標(biāo)記語(yǔ)言）等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。我們可以利用網(wǎng)站來(lái)發(fā)布資訊，或者提供相關(guān)的網(wǎng)絡(luò)服務(wù)。（百度百科）網(wǎng)站與服務(wù)器的關(guān)系網(wǎng)站必須放在服務(wù)器上才能訪問(wèn)一個(gè)服務(wù)器上可以放多個(gè)網(wǎng)站網(wǎng)站可以通過(guò)服務(wù)器的地址訪問(wèn)網(wǎng)頁(yè)網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)，一般使用HTML/XHTML,php,asp,jsp等語(yǔ)言編寫(xiě)，可以嵌入文本、圖形、音視頻等信息。主頁(yè)主頁(yè)可以認(rèn)為是一組網(wǎng)頁(yè)中最主要的網(wǎng)頁(yè)，是進(jìn)入其他網(wǎng)頁(yè)的起始網(wǎng)頁(yè)，主頁(yè)通過(guò)超鏈接鏈接到其他網(wǎng)頁(yè)。超鏈接Web上的信息是由彼此關(guān)聯(lián)的文檔組成的，而使其連接在一起的是超鏈接。超鏈接是HTML語(yǔ)言中的一個(gè)標(biāo)記，標(biāo)記中顯示的內(nèi)容較之其他內(nèi)容有明顯特征，如顏色不同、帶有下畫(huà)線等。B/S中瀏覽器端與服務(wù)器端采用請(qǐng)求/響應(yīng)模式進(jìn)行交互應(yīng)用服務(wù)器數(shù)據(jù)庫(kù)服務(wù)器IEIE解釋執(zhí)行HTML文件從服務(wù)器端檢索到的信息返回響應(yīng)客戶端的請(qǐng)求信息發(fā)送請(qǐng)求訪問(wèn)數(shù)據(jù)庫(kù)返回結(jié)果運(yùn)行服務(wù)器端腳本程序1用戶輸入234網(wǎng)頁(yè)設(shè)計(jì)：即網(wǎng)站美工，如圖像處理PhotoShop，色彩搭配，網(wǎng)頁(yè)布局等。頁(yè)面制作：即web前端架構(gòu)，由于網(wǎng)頁(yè)效果越來(lái)越豐富，瀏覽器增多，對(duì)頁(yè)面要求也越來(lái)越高，需要精通html/css,了解html/css,熟悉js等腳本語(yǔ)言。程序開(kāi)發(fā)：現(xiàn)在主流的有，php，jsp，根據(jù)項(xiàng)目需求實(shí)現(xiàn)相應(yīng)的Web功能。3、網(wǎng)站開(kāi)發(fā)相關(guān)技術(shù)在傳統(tǒng)的HTML頁(yè)面文件中加入Java程序片和JSP標(biāo)簽，就構(gòu)成了一個(gè)JSP頁(yè)面。JSP頁(yè)面可由5種元素組合而成：①普通的HTML標(biāo)記符；②JSP標(biāo)記，如指令標(biāo)記、動(dòng)作標(biāo)記；③變量和方法的聲明；④Java程序片；⑤Java表達(dá)式。4、JSP網(wǎng)頁(yè)的組成HTML即超文本標(biāo)記語(yǔ)言，是全球廣域網(wǎng)上描述網(wǎng)頁(yè)內(nèi)容和外觀的標(biāo)準(zhǔn)。HTML包含了一對(duì)打開(kāi)和關(guān)閉的標(biāo)記，其中有屬性和值。標(biāo)記描述了每個(gè)網(wǎng)頁(yè)上的組件，如文本格式、段落、表格、圖像等。5、HTML語(yǔ)言一、標(biāo)記語(yǔ)法1.什么是標(biāo)記語(yǔ)法HTML是用于描述功能的符號(hào)稱(chēng)為“標(biāo)記”。比如<html>、<head>、<body>等，都是標(biāo)記，<html>標(biāo)記表示HTML文檔的開(kāi)始。標(biāo)記在使用時(shí)必須用尖括號(hào)“<>”括起來(lái)。2.單標(biāo)記之所以稱(chēng)為“單標(biāo)記”，是因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思，這類(lèi)標(biāo)記語(yǔ)法是：<標(biāo)記名稱(chēng)>最常用的單標(biāo)記<br>,它表示換行。5.1HTML基本語(yǔ)法3.雙標(biāo)記“雙標(biāo)記”由“始標(biāo)記”和“尾標(biāo)記”兩部分構(gòu)成，必須成對(duì)使用。始標(biāo)記告訴WEB瀏覽器從此處開(kāi)始執(zhí)行該標(biāo)記所表示的功能，尾標(biāo)記告訴WEB瀏覽器在這里結(jié)束該功能。始標(biāo)記前加一個(gè)正斜杠（/）即為尾標(biāo)記。<標(biāo)記>內(nèi)容</標(biāo)記>其中"內(nèi)容"部分就是要被這對(duì)標(biāo)記施加作用的部分。<html></html><body></body><head></head>這三個(gè)標(biāo)記是html頁(yè)面最基本的標(biāo)記，4.注釋對(duì)代碼功能進(jìn)行說(shuō)明或注釋無(wú)效代碼<!—注釋內(nèi)容-->二、屬性語(yǔ)法1.什么是屬性這里的屬性指的是標(biāo)記的屬性2.屬性語(yǔ)法<標(biāo)記名字屬性1屬性2屬性3><hrsize=3align=leftwidth="75%">三、HTML文件的命名1.文件的擴(kuò)展名要以.htm或.html結(jié)束2.文件名中只可由英文字母、數(shù)字或下劃線組成3.文件名中不要包含特殊字符，比如空格、$4.網(wǎng)站首頁(yè)文件名默認(rèn)是index.htm或index.html四、編寫(xiě)HTML文件的注意事項(xiàng)1.所有標(biāo)記都要有尖括號(hào)括起來(lái)，瀏覽器就可以知道尖括號(hào)內(nèi)的標(biāo)記語(yǔ)言是HTML命令2.對(duì)于成對(duì)出來(lái)的標(biāo)記，最好同時(shí)輸入起始標(biāo)記或結(jié)束標(biāo)記，以免忘記3.采用標(biāo)記嵌套的方式可以為同一個(gè)信息應(yīng)用多個(gè)標(biāo)記，如下<tag1><tag2>同一信息</tag2></tag1>4.在代碼中，不區(qū)分大小寫(xiě)5.任何空格或回車(chē)在代碼中都無(wú)效6.標(biāo)記中不要有空格，否則瀏覽器可能無(wú)法識(shí)別

一個(gè)HTML文檔包含頭文件（head）和文件體（body）兩個(gè)主要的部分構(gòu)成，基本的文檔結(jié)構(gòu)如下：5.2HTML基本結(jié)構(gòu)<html> <head> <title>標(biāo)題<title> </head>

<body>

</body></html>一、文件頭部?jī)?nèi)容設(shè)置頁(yè)面標(biāo)題<title>HTML文件標(biāo)題在瀏覽器的標(biāo)題欄中顯示。每個(gè)HTML文件都有一個(gè)標(biāo)題，用于說(shuō)明文檔的屬性?；菊Z(yǔ)法：<html><head><title>test</title></head><body></body></html>定義元信息<meta>在HTML文件中，<meta>標(biāo)記通過(guò)一些屬性來(lái)定義文件的信息，比如文件的關(guān)鍵字、作者信息、網(wǎng)頁(yè)過(guò)期時(shí)間等。HTML文件的頭部文件可以有多個(gè)<meta>標(biāo)記，<meta>不是成對(duì)標(biāo)記?；菊Z(yǔ)法<metahttp-equiv=""name=""content="">語(yǔ)法說(shuō)明<meta>標(biāo)記中的http-equiv屬性用于設(shè)置一個(gè)http的標(biāo)題域，但確定值由content屬性決定，name屬性用于設(shè)置元信息出現(xiàn)形式，conent屬性用于設(shè)置元信息出現(xiàn)的內(nèi)容實(shí)例代碼：<html><head>

<title>testkeywords</title><metaname="keywords"content="計(jì)算機(jī)、英語(yǔ)、經(jīng)管、財(cái)會(huì)、職場(chǎng)"></head><body>計(jì)算機(jī)、英語(yǔ)、經(jīng)管、財(cái)會(huì)、職場(chǎng)</body></html>二、主體內(nèi)容<body>在HTML文件中，主體內(nèi)容被包含在成對(duì)的<body></body>標(biāo)記之間，同時(shí)<body>標(biāo)記也有很多本身的屬性，例如設(shè)置頁(yè)面背景、設(shè)置頁(yè)面邊距等。相關(guān)屬性：設(shè)置頁(yè)面背景顏色：bgcolor=“”設(shè)置背景圖片：background=“”設(shè)置網(wǎng)頁(yè)邊距：topmargin、leftmargin、rightmargin、bottommargin設(shè)置正文顏色：text=“”16種標(biāo)準(zhǔn)顏色的名稱(chēng)及其十六進(jìn)制數(shù)值。顏

色名

稱(chēng)十六進(jìn)制數(shù)值顏

色名

稱(chēng)十六進(jìn)制數(shù)值淡藍(lán)aqua(cyan)#00FFFF海藍(lán)navy#000080黑black#000000橄欖色olive#808000藍(lán)blue#0000FF紫purple#800080紫紅fuchsia(magenta)#FF00FF紅red#FF0000灰gray#808080銀色silver#C0綠green#008000淡青teal#008080淺綠lime#00FF00白white#FFFFFF褐紅maroon#800000黃yellow#FFFF00文字編輯段落編輯列表標(biāo)記圖像標(biāo)記5.3HTML語(yǔ)言的基本元素字幕標(biāo)記表格制作表單制作框架設(shè)計(jì)文字編輯一、編輯內(nèi)容1.添加文字基本語(yǔ)法<body>請(qǐng)?jiān)诖颂幪砑游淖?lt;/body>語(yǔ)法說(shuō)明在網(wǎng)頁(yè)中添加文字等其他內(nèi)容，都要在<body></body>之間，需要插入文字的地方輸入文字就可以實(shí)現(xiàn)。文字編輯2.添加空格在HTML文件中，添加空格的方式與其他文檔添加空格的方式不同，網(wǎng)頁(yè)中添加空格是通過(guò)代碼控制，在Word、記事本、寫(xiě)字板中輸入空格可以直接通過(guò)鍵盤(pán)空格鍵輸入?；菊Z(yǔ)法<body>

</body>語(yǔ)法說(shuō)明在HTML文件中，添加空格需要使用代碼" "控制，需要多少個(gè)空格就需要添加多少個(gè)" "。文字編輯3.添加刪除線在HTML文件中，給需要添加刪除線的文字使用成對(duì)的<strike></strike>標(biāo)記，就可以添加刪除線?；菊Z(yǔ)法<body><strike>請(qǐng)?jiān)诖溯斎胄枰砑觿h除線的文字</strike></body>語(yǔ)法說(shuō)明在成對(duì)的<strike></strike>標(biāo)記之間輸入文字，在網(wǎng)頁(yè)中顯示改標(biāo)記之間的文字就是被添加了刪除線后的顯示效果。文字編輯二、文字效果1.標(biāo)題文字標(biāo)簽<hn><hn>標(biāo)簽一共為6級(jí)基本語(yǔ)法：<hnalign=參數(shù)值>標(biāo)題文字</hn>align屬性值為right，left（默認(rèn)），center文字編輯2.編輯網(wǎng)頁(yè)文字樣式基本語(yǔ)法<body><fontface=""size=""color=""></font><body>語(yǔ)法說(shuō)明在HTML文件中，利用成對(duì)標(biāo)記就可以將網(wǎng)頁(yè)中的文字根據(jù)需要，對(duì)其進(jìn)行樣式的編輯。文字編輯實(shí)例代碼：<html><head><title>編輯網(wǎng)頁(yè)文字樣式</title></head><body>

沒(méi)有使用效果后的文字!<br><fontface="楷體"size="6"color="#00ffff">

使用效果后的文字</font></body></html>文字編輯文字編輯3.設(shè)置文字標(biāo)注標(biāo)記<ruby>在HTML文件中，有時(shí)需要對(duì)某個(gè)字、詞或者某個(gè)段進(jìn)行說(shuō)明，可以通過(guò)添加文字的標(biāo)注標(biāo)記來(lái)完成對(duì)網(wǎng)頁(yè)中文字的說(shuō)明?；菊Z(yǔ)法：<ruby>被說(shuō)明的文字<rt>文字的標(biāo)注</rt></ruby>語(yǔ)法說(shuō)明：利用成對(duì)的<ruby><rt>標(biāo)記，可以對(duì)網(wǎng)頁(yè)中的文字進(jìn)行標(biāo)注。(html5支持的標(biāo)記，IE8.0以上版本的瀏覽器才支持。文字編輯<html><head><title>設(shè)置文字標(biāo)注標(biāo)記</title></head><body><ruby>

當(dāng)代最可愛(ài)的人

<rt>

志愿軍

</rt></ruby></body></html>文字編輯文字編輯三、文字修飾1.簡(jiǎn)單修飾文字基本語(yǔ)法<body>普通文字的顯示<br><b>加粗的文字</b><br><i>斜體的文字</i><br><u>添加下劃線的文字</u><br><big>放大</big><br><small>縮小</small><br></body>文字編輯實(shí)例代碼：<html><head><title>簡(jiǎn)單修飾文字</title></head><body>普通文字的顯示<br><b>加粗的文字</b><br><i>斜體文字</i><br><u>添加下劃線文字</u><br><big>放大</big><br><small>縮小</small><br></body></html>文字編輯文字編輯2.確定文字上下標(biāo)基本語(yǔ)法：<body><sup>上標(biāo)內(nèi)容</sup><br><sub>下標(biāo)內(nèi)容</sub><br></body>語(yǔ)法說(shuō)明：在HTML文件中，成對(duì)的<sup></sup>標(biāo)記可以表示上標(biāo)，利用成對(duì)的標(biāo)記<sub></sub>表示下標(biāo)。文字編輯實(shí)例代碼：<html><head><title>確定文字上下標(biāo)</title></head><body>

解下面方程：<br>x<sup>2</sup>-3x+2=0<br>

解：x<sub>1</sub>=1;x<sub>2</sub>=2<br></body></html>文字編輯文字編輯3.設(shè)置地址文字在網(wǎng)頁(yè)中添加地址文字，是為了更方便地突出顯示聯(lián)系方式，將聯(lián)系人的地址信息突出顯示?；菊Z(yǔ)法：<body><address>請(qǐng)?jiān)诖颂砑拥刂沸畔?lt;/address></body>語(yǔ)法說(shuō)明：在HTML文件中，利用成對(duì)<address></address>標(biāo)記就可以將網(wǎng)頁(yè)需要顯示的地址文件突出顯示，其中的文本通常呈現(xiàn)為斜體。大多數(shù)瀏覽器會(huì)在該元素的前后添加換行。文字編輯實(shí)例代碼：<html><head><title>設(shè)置地址文字</title></head><body>

書(shū)中有不恰當(dāng)?shù)牡胤?，?qǐng)您及時(shí)與我們聯(lián)系：<br><address>清華大學(xué)出版社</address><br><address>mailto:market@1.</address><br></body></html>文字編輯段落編輯一、段落1.回車(chē)<br>2.分段控制標(biāo)簽<P>基本語(yǔ)法<palign="參數(shù)值">段落文字</p>,</p>可以省略參數(shù)值：right，left(默認(rèn))，center段落編輯3.居中顯示文字<center>基本語(yǔ)法：<center>文字內(nèi)容</center>4.預(yù)格式<pre>被包圍在pre元素中的文本通常會(huì)保留空格和換行符基本語(yǔ)法：<pre>文字內(nèi)容</pre>5.插入并設(shè)置水平線<hr>基本語(yǔ)法：<hralign="參數(shù)值"size="參數(shù)值"width="參數(shù)值"color="參數(shù)值"noshade>align:水平擺放位置，可選right,left,center（默認(rèn)）size:水平線的粗細(xì)，或線的寬度，以像素為單位width:水平線的長(zhǎng)度，以像素或百分比為單位color:水平線的顏色noshade：設(shè)定水平線是否顯示3D陰影段落編輯實(shí)例代碼：<html><head><title>預(yù)格式化</title></head><body><pre>

登鸛鵲樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。

</pre></body></html>段落編輯段落編輯實(shí)例代碼：<html><head><title>設(shè)置水平線</title></head><body>

<center>添加水平線后的效果</center>

<hrwidth=“70%"size="1"color="#00ffee">財(cái)政部有關(guān)負(fù)責(zé)人說(shuō)，所謂"首購(gòu)"，是指對(duì)于國(guó)內(nèi)企業(yè)或科研機(jī)構(gòu)生產(chǎn)或開(kāi)發(fā)的，暫不具有市場(chǎng)競(jìng)爭(zhēng)力，但符合國(guó)民經(jīng)濟(jì)發(fā)展要求、代表先進(jìn)技術(shù)發(fā)展方向的首次投向市場(chǎng)的產(chǎn)品，通過(guò)政府采購(gòu)方式由采購(gòu)人或政府首先采購(gòu)的行為。<hrwidth="400"size="3"noshade=""color="#00ee99"align="left">版權(quán)©:清華大學(xué)出版社</body></html>段落編輯段落編輯6.插入特殊符號(hào)基本語(yǔ)法&&?©?&trade?®￥¥§§段落編輯實(shí)例代碼<html> <head> <title>插入特殊符號(hào)</title> </head> <body>

下面這段文字是插入版權(quán)符號(hào)后顯示的效果：<br>

版權(quán)所有©：清華大學(xué)出版社 </body></html>段落編輯列表和使用列表一、列表類(lèi)型定義列表:dl無(wú)序列表:ul有序列表:ol列表和使用列表二、插入定義列表<dl>基本語(yǔ)法<dl><dt>名稱(chēng)<dd>說(shuō)明</dl><dt>定義組成列表項(xiàng)名稱(chēng)部分<dd>解釋說(shuō)明定義的項(xiàng)目名稱(chēng)列表和使用列表<html><head>

<metacharset=utf-8><title>插入定義列表</title></head><body><dl><dt>聯(lián)系人<dd>XXX<dt>聯(lián)系地址<dd>北京市豐臺(tái)區(qū)

<dt>郵政編碼<dd>100036</dl></body></html>列表和使用列表列表和使用列表三、插入無(wú)序列表<ul>基本語(yǔ)法:<ul><li>項(xiàng)目名稱(chēng)</li></ul>列表和使用列表<html><head><metacharset=utf-8>

<title>無(wú)序列表</title></head><body><ul><li>聯(lián)系人：</li>xxx<li>聯(lián)系地址：</li>北京市豐臺(tái)區(qū)

<li>郵政編碼：</li>100036</ul></body></html>列表和使用列表列表和使用列表四、插入有序列表<ol>基本語(yǔ)法<oltype=""start=""><li>項(xiàng)目名稱(chēng)</li></ol>Type:設(shè)定符號(hào)類(lèi)型，屬性值有1,A,a,i,IStart:設(shè)定列表的符號(hào)從第幾項(xiàng)開(kāi)始列表和使用列表<html><head><metacharset=utf-8><title>有序列表</title></head><body><olType=“a"start=“1"><li>聯(lián)系人：xxx</li><li>聯(lián)系地址：北京市豐臺(tái)區(qū)</li><li>郵政編碼：100036</li></ol></body></html>列表和使用列表插入圖像一、插入圖片<img>基本語(yǔ)法<imgsrc="圖片地址">插入圖像實(shí)例代碼<html><head><title>插入圖片</title></head><body><center><h2>網(wǎng)頁(yè)中插入圖片</h2><hr><imgsrc=02.jpg></center></body></html>插入圖像插入圖像二、添加圖片提示文字<alt>基本語(yǔ)法<imgsrc="圖片地址"alt="提示文字">Alt提示文字可以是中文也可以是英文插入圖像實(shí)例代碼：<html><head><title>添加圖片提示文字</title></head><body><center><h2>添加圖片提示文字</h2><hr><imgsrc=njnu.jpgalt=南京師范大學(xué)></center></body></html>

插入圖像插入圖像三、設(shè)置圖片的寬度和高度基本語(yǔ)法：<imgsrc="圖片地址"width="value"height="value">圖片高度和寬度的單位可以是像素也可以是百分比插入圖像實(shí)例代碼：<html><head><title>設(shè)置圖片寬度和高度</title></head><body><center><h2>設(shè)置圖片寬度和高度</h2></center><br>原圖</br><imgsrc="njnu.jpg"><br>寬150像素高80像素</br><imgsrc="njnu.jpg">width=150pxheight=80px>

<br>圖像大小是原圖的30%</br><imgsrc="njnu.jpg">width=30%height=30%></body></html>插入圖像插入圖像四、設(shè)置圖片對(duì)齊方式基本語(yǔ)法<imgsrc="圖片地址"align="關(guān)鍵字">關(guān)鍵字：Top，middle，bottom，left，right插入圖像<html><head><title>設(shè)置圖片對(duì)齊方式</title></head><body><center><h2>設(shè)置圖片對(duì)齊方式</h2></center><hr><p><imgsrc="njnu.jpg"align=top>

圖片頂部與同行的文字頂部對(duì)齊

</p><p><imgsrc="njnu.jpg"align=middle>

圖片中部與同行的文字中部對(duì)齊

</p><imgsrc="njnu.jpg"align=bottom>

圖片底部與同行的文字底部對(duì)齊</body></html>插入圖像超鏈接的使用一、超鏈接的概念

超鏈接就是從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)的途徑。二、路徑概念絕對(duì)路徑：主頁(yè)上的文件或目錄在硬盤(pán)上的真正路徑。相對(duì)路徑：以引用文件的網(wǎng)頁(yè)所在的位置為參考基礎(chǔ)而建立的目錄路徑。同一目錄下的文件：直接輸入鏈接文件的名稱(chēng)上一級(jí)目錄的文件：在目錄名和文件名之間加“..\”；如果是上兩級(jí)目錄，則在目錄名和文件名之間加“..\..\”下一級(jí)目錄：直接輸入目錄名和文件名，之間以“\”分割超鏈接的使用例：相對(duì)目錄的引用,index.htm如何引用photo.jpg文件c:\website\web\index.htm

c:\website\img\photo.jpg..\img\photo.jpg三、超鏈接的建立基本語(yǔ)法：<ahref=資源地址target=窗口名稱(chēng)>鏈接文字</a>資源地址可以是文件名或者URL（網(wǎng)址）Target:用于指定打開(kāi)鏈接的目標(biāo)窗口，默認(rèn)屬性為原窗口，打開(kāi)一個(gè)新窗口，target=_blank在上一級(jí)窗口打開(kāi)，target=_parent在瀏覽器的整個(gè)窗口打開(kāi),target=_top在同一個(gè)窗口打開(kāi)，target=_self（默認(rèn)）超鏈接的使用<html><head><title>插入外部鏈接</title></head><body><ahref="">新浪網(wǎng)</a><ahref=“test.html”>測(cè)試頁(yè)面</a></body></html>超鏈接的使用超鏈接的使用插入內(nèi)部鏈接基本語(yǔ)法<ahref=#目標(biāo)名稱(chēng)

target=窗口名稱(chēng)>目錄文字</a>在鏈接的目標(biāo)處使用<aname=目標(biāo)名稱(chēng)>超鏈接目標(biāo)</a>超鏈接的使用<html><head><title>考倒你</title></head><body><h3>考倒你</h3><ahref="#t.1">世界上哪里的海不產(chǎn)魚(yú)？</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h3><aname="t.1">第一題答案</a></h3>辭海不產(chǎn)魚(yú)</body></html>超鏈接的使用超鏈接的使用超鏈接的使用三、圖像鏈接基本語(yǔ)法<ahref=圖片要鏈接的目標(biāo)地址target=窗口名稱(chēng)><imgsrc=參數(shù)值alt=參數(shù)值border=參數(shù)值align＝參數(shù)值height=參數(shù)值width=參數(shù)值vspace=參數(shù)值hspace=參數(shù)值></a>超鏈接的使用<html><head><title>圖像鏈接</title></head><body><center><ahref=><imgsrc=njnu.jpg></a></center></body></html>超鏈接的使用超鏈接的使用四、郵箱鏈接基本語(yǔ)法：<ahref=mailto:E-mail地址&cc=抄送人E-mail地址&bcc=密件抄送地址&subject=郵件主題&body=郵件正文>描述文字</a>超鏈接的使用<html><head>

<title>發(fā)送郵件</title></head><body><ahref=mailto:123@163.com&cc=1@&bcc=2@&subject=祝福&body=節(jié)日快樂(lè)>給你寫(xiě)信</a></body></html>超鏈接的使用表格的使用一、插入表格并定義表格結(jié)構(gòu)<table>、<tr>、<td>基本語(yǔ)法：<table><tr><td></td></tr></table>語(yǔ)法說(shuō)明：<table>:定義表結(jié)構(gòu)<tr>:定義行結(jié)構(gòu)<td>:定義列結(jié)構(gòu)表格的使用<html><head><title>設(shè)置基本表格結(jié)構(gòu)</title></head><body><tablewidth="470"border="1"align="center"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用二、設(shè)置表格標(biāo)題<caption><table><captionalign=""valign="">插入表格標(biāo)題</caption><tr><td></td></tr></table>表格的使用<html><head><title>插入表格標(biāo)題</title></head><body><tablewidth="470"border="1"align="center"><captionalign="center">計(jì)算機(jī)語(yǔ)言<caption><tr><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><td>FrontPage</td><td>SQLSERVER2000</td><td>C#</td></tr></table></body></html>表格的使用表格的使用三、設(shè)置表格表頭或標(biāo)題行<th>基本語(yǔ)法：<table><tr><th>…</th><td></td></tr></table>表格的使用<html><head><title>設(shè)置表格表頭</title></head><body><tablewidth="470"border="1"align="center"><tr><th>網(wǎng)頁(yè)設(shè)計(jì)</th><th>數(shù)據(jù)庫(kù)開(kāi)發(fā)</th><th>程序設(shè)計(jì)</th></tr><tr><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><td>FrontPage</td><td>SQLSERVER</td><td>C#</td></tr></table></body></html>表格的使用表格的使用四、設(shè)置表格的寬度和高度基本語(yǔ)法：<tablewidth=""height=""><tr><td></td></tr></table>表格的使用<html><head><title>設(shè)置表格的寬度和高度</title></head><body><tablewidth="470"height="40"border="1"><tr><td> </td><td> </td><td> </td></tr></table>

<tablewidth="200"height="80"border="1"><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用五、設(shè)置表格的邊框?qū)傩曰菊Z(yǔ)法：<tableborder=""bordercolor=""bordercolorlight=""bordercolordark=""><tr><td></td></tr></table>Border:邊框粗細(xì) Bordercolor:邊框顏色Bordercolorlight:亮邊框顏色Bordercolordark:暗邊框顏色表格的使用<html><head><title>設(shè)置表格的邊框?qū)傩?lt;/title></head><body><tablewidth="470"border="1"bordercolor="#0000FF"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用六、設(shè)置單元格邊距與間距1.單元格之間的間距：<tablecellspacing=數(shù)值>2.文字與邊框之間的間距：<tablecellpadding=數(shù)值>表格的使用<html><head><title>設(shè)置單元格間距</title></head><body><tablewidth="380"border="1"cellspacing="0"><tr><td> </td><td> </td><td> </td></tr></table><tablewidth="380"border="1"cellspacing="5"><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用<html><head><title>設(shè)置單元格邊距</title></head><body><tablewidth="380"border="1"cellpadding="0">

<tr><td>腳本語(yǔ)言</td><td> </td><td> </td>

</tr></table><tablewidth="380"border="1"cellpadding="5"><tr><td>腳本語(yǔ)言</td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用七、設(shè)置表格背景基本語(yǔ)法：<tablebgcolor=""background=""align=""><tr><td></td></tr></table>表格的使用<html><head><title>設(shè)置表格的背景</title></head><body><tablewidth="470"border="1"bgcolor="red"align="center"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用八、設(shè)置行內(nèi)容水平對(duì)齊和垂直對(duì)齊<table><tralign=“”valign=“”bordercolor=“”bgcolor=“”height=“”></tr><tr><td></td></tr></table>表格的使用<html><head><title>調(diào)整行內(nèi)容水平和垂直對(duì)齊</title></head><body><tableborder="1"><tralign="center"height=50valign="bottom"><th>網(wǎng)頁(yè)設(shè)計(jì)</th><th>數(shù)據(jù)庫(kù)開(kāi)發(fā)</th><th>程序設(shè)計(jì)</th></tr>

<tralign="center"bordercolor=redbgcolor=yellow><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><tdnowrap>FrontPage</td><td>SQLSERVER</td><td>C#</td></tr></table></body></html>表格的使用表格的使用九、設(shè)置跨行跨列<tdcolspan=數(shù)值><thcolspan=數(shù)值><tdrowspan=數(shù)值><throwspan=數(shù)值>Colspan：跨列Rowspan：跨行表格的使用<html><head><title>設(shè)置跨行</title></head><body><tablewidth="380"border="1"><tr><tdrowspan="2"> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用<html><head><title>設(shè)置跨列</title></head><body><tablewidth="380"border="1"><tr><tdcolspan="2"> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table></body></html>表格的使用表單的設(shè)計(jì)一、表單標(biāo)記基本語(yǔ)法：<formname=""method=""action=""enctype=""target=""></form>Name:設(shè)置表單名稱(chēng)Method：設(shè)置表單發(fā)送的方法，可以是"post"或者"get"Action：設(shè)置表單處理方式，可指定發(fā)送的頁(yè)面Enctype：設(shè)置表單的編碼方式target：設(shè)置表單的顯示目標(biāo)表單的設(shè)計(jì)form.html<html> <head>

<metacharset=utf-8>

<title>插入文本框</title> <head> <body>

<formmethod="post"action="sent.html">

請(qǐng)輸入你的姓名：<br>

<inputname="text"type="text"maxlength="8"size="5"value="1">

<inputname="submit"type="submit"value="提交">

</form> </body></html>Sent.html<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body>

提交完成 </body></html>表單的設(shè)計(jì)二、插入文本框<text>基本語(yǔ)法<form><inputname="text"type="text"maxlength=""size=""value=""></form>表單的設(shè)計(jì)<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body> <form>

請(qǐng)輸入你的姓名：<br> <inputname="text"type="text"maxlength="8"size="10"value="1"> </form> </body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)三、插入密碼框<password>基本語(yǔ)法<form><inputname="password"type="password"maxlength=""size=""></form>表單的設(shè)計(jì)<html> <head>

<metacharset=utf-8>

<title>插入密碼框</title> <head> <body>

<form>

用戶登錄<br>

用戶名：<inputname="text"type="text"maxlength="8"size="10"><br>

密

碼：<inputname="password"type="password"maxlength="8"size="10"><br>

</form> </body></html>表單的設(shè)計(jì)四、插入文件域<file>基本語(yǔ)法<form>

<inputname="file"type="file"></form>表單的設(shè)計(jì)<html><head><title>插入文件域</title><head><body><form>

請(qǐng)上傳你的照片<inputname="file"type="file"></form>

</body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)五、插入標(biāo)準(zhǔn)按鈕<button>基本語(yǔ)法<form><inputname="b1"type="button"value="標(biāo)準(zhǔn)按鈕"></form>表單的設(shè)計(jì)<html><head><title>插入標(biāo)準(zhǔn)按鈕</title><head><body><form>

<inputname="c1"type="button"value="標(biāo)準(zhǔn)按鈕"></form>

</body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)六、插入提交按鈕<submit>

基本語(yǔ)法：<form><inputname="submit"type="submit"value="提交"></form>表單的設(shè)計(jì)<html><head><title>插入提交按鈕</title><head><body><form><inputname="submit"type="submit"value="提交"></form></body></html>表單的設(shè)計(jì)七、插入重置按鈕<reset>基本語(yǔ)法：<form><inputname="reset"type="reset"value="重置"></form>表單的設(shè)計(jì)<html><head><title>插入重置按鈕</title><head><body><form><inputname="reset"type="reset"value="重置"></form></body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)八、插入單選框<radio>基本語(yǔ)法：<form><inputname="r1"type="radio"checkedvalue=""></form>表單的設(shè)計(jì)<html><head><title>插入單選按鈕</title><head><body><form>對(duì)講機(jī)設(shè)置<br><inputname="c1"type="radio"checked>自動(dòng)接聽(tīng)呼叫<br><inputname="c2"type="radio">拒絕接聽(tīng)呼叫<br>

</form></body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)九、插入復(fù)選框<checkbox>基本語(yǔ)法：<form><inputname="r1"type="checkbox"checkedvalue=""></form>表單的設(shè)計(jì)<html><head><title>插入復(fù)選框</title><head><body><form>

QQ系統(tǒng)設(shè)置綜合設(shè)置<br><inputname="c1"type="checkbox"checked>拒絕陌生人消息<br><inputname="c2"type="checkbox"checked>自動(dòng)播放魔法表情<br><inputname="c3"type="checkbox">禁止所有用戶上線提示<br></form></body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)十、插入文字域<textarea>基本語(yǔ)法：<form><textareaname="text"rows=""cols=""></textarea></form>Rows:行數(shù)Cols:列數(shù)表單的設(shè)計(jì)<html><head><title>插入文字域</title><head><body><form>QQ系統(tǒng)設(shè)置留言設(shè)置<br><inputtype=checkboxchecked>離開(kāi)時(shí)自動(dòng)回復(fù)(50字以內(nèi))<br><textareaname="text"rows="10"cols="30"></textarea></form></body></html>表單的設(shè)計(jì)表單的設(shè)計(jì)十一、插入下拉列表<select>和列表項(xiàng)<option>基本語(yǔ)法：<form><selectname=""size=""multiple><optionvalue="">選擇項(xiàng)<optionvalue="">選擇項(xiàng)</form>Size：顯示的選項(xiàng)數(shù)目Multiple：列表中的項(xiàng)目多選表單的設(shè)計(jì)<html><head><title>插入下拉菜單和列表</title><head><body><form>請(qǐng)選擇你喜歡的特長(zhǎng)<br><selectname="特長(zhǎng)"size=10multiple><optionvalue="1">唱歌<optionvalue="2">畫(huà)畫(huà)<optionvalue="3">長(zhǎng)跑<optionvalue="4">游泳<optionvalue="5">體操<optionvalue="6">足球<optionvalue="7">籃球<optionvalue="8">羽毛球<optionvalue="9">棒球</select></form></body></html>

表單的設(shè)計(jì)框架的應(yīng)用一、框架分割方式1.左右分割方式<framesetcols="value,value,value"><framesrc="url"><framesrc="url"><framesrc="url"

溫馨提示

  • 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)論