jsp第一章web網(wǎng)頁設計基礎_第1頁
jsp第一章web網(wǎng)頁設計基礎_第2頁
jsp第一章web網(wǎng)頁設計基礎_第3頁
jsp第一章web網(wǎng)頁設計基礎_第4頁
jsp第一章web網(wǎng)頁設計基礎_第5頁
已閱讀5頁，還剩178頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

一個HTML文檔包含頭文件（head）和文件體（body）兩個主要的部分構成，基本的文檔結構如下：5.2HTML基本結構<html> <head> <title>標題<title> </head>

<body>

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

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

色名

稱十六進制數(shù)值顏

色名

稱十六進制數(shù)值淡藍aqua(cyan)#00FFFF海藍navy#000080黑black#000000橄欖色olive#808000藍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文字編輯段落編輯列表標記圖像標記5.3HTML語言的基本元素字幕標記表格制作表單制作框架設計文字編輯一、編輯內容1.添加文字基本語法<body>請在此處添加文字</body>語法說明在網(wǎng)頁中添加文字等其他內容，都要在<body></body>之間，需要插入文字的地方輸入文字就可以實現(xiàn)。文字編輯2.添加空格在HTML文件中，添加空格的方式與其他文檔添加空格的方式不同，網(wǎng)頁中添加空格是通過代碼控制，在Word、記事本、寫字板中輸入空格可以直接通過鍵盤空格鍵輸入。基本語法<body>

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

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

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

當代最可愛的人

<rt>

志愿軍

</rt></ruby></body></html>文字編輯文字編輯三、文字修飾1.簡單修飾文字基本語法<body>普通文字的顯示<br><b>加粗的文字</b><br><i>斜體的文字</i><br><u>添加下劃線的文字</u><br><big>放大</big><br><small>縮小</small><br></body>文字編輯實例代碼：<html><head><title>簡單修飾文字</title></head><body>普通文字的顯示<br><b>加粗的文字</b><br><i>斜體文字</i><br><u>添加下劃線文字</u><br><big>放大</big><br><small>縮小</small><br></body></html>文字編輯文字編輯2.確定文字上下標基本語法：<body><sup>上標內容</sup><br><sub>下標內容</sub><br></body>語法說明：在HTML文件中，成對的<sup></sup>標記可以表示上標，利用成對的標記<sub></sub>表示下標。文字編輯實例代碼：<html><head><title>確定文字上下標</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.設置地址文字在網(wǎng)頁中添加地址文字，是為了更方便地突出顯示聯(lián)系方式，將聯(lián)系人的地址信息突出顯示?；菊Z法：<body><address>請在此添加地址信息</address></body>語法說明：在HTML文件中，利用成對<address></address>標記就可以將網(wǎng)頁需要顯示的地址文件突出顯示，其中的文本通常呈現(xiàn)為斜體。大多數(shù)瀏覽器會在該元素的前后添加換行。文字編輯實例代碼：<html><head><title>設置地址文字</title></head><body>

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

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

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

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

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

下面這段文字是插入版權符號后顯示的效果：<br>

版權所有©：清華大學出版社 </body></html>段落編輯列表和使用列表一、列表類型定義列表:dl無序列表:ul有序列表:ol列表和使用列表二、插入定義列表<dl>基本語法<dl><dt>名稱<dd>說明</dl><dt>定義組成列表項名稱部分<dd>解釋說明定義的項目名稱列表和使用列表<html><head>

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

<dt>郵政編碼<dd>100036</dl></body></html>列表和使用列表列表和使用列表三、插入無序列表<ul>基本語法:<ul><li>項目名稱</li></ul>列表和使用列表<html><head><metacharset=utf-8>

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

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

插入圖像插入圖像三、設置圖片的寬度和高度基本語法：<imgsrc="圖片地址"width="value"height="value">圖片高度和寬度的單位可以是像素也可以是百分比插入圖像實例代碼：<html><head><title>設置圖片寬度和高度</title></head><body><center><h2>設置圖片寬度和高度</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>插入圖像插入圖像四、設置圖片對齊方式基本語法<imgsrc="圖片地址"align="關鍵字">關鍵字：Top，middle，bottom，left，right插入圖像<html><head><title>設置圖片對齊方式</title></head><body><center><h2>設置圖片對齊方式</h2></center><hr><p><imgsrc="njnu.jpg"align=top>

圖片頂部與同行的文字頂部對齊

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

圖片中部與同行的文字中部對齊

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

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

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

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

target=窗口名稱>目錄文字</a>在鏈接的目標處使用<aname=目標名稱>超鏈接目標</a>超鏈接的使用<html><head><title>考倒你</title></head><body><h3>考倒你</h3><ahref="#t.1">世界上哪里的海不產魚？</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>辭海不產魚</body></html>超鏈接的使用超鏈接的使用超鏈接的使用三、圖像鏈接基本語法<ahref=圖片要鏈接的目標地址target=窗口名稱><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>超鏈接的使用超鏈接的使用四、郵箱鏈接基本語法：<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é)日快樂>給你寫信</a></body></html>超鏈接的使用表格的使用一、插入表格并定義表格結構<table>、<tr>、<td>基本語法：<table><tr><td></td></tr></table>語法說明：<table>:定義表結構<tr>:定義行結構<td>:定義列結構表格的使用<html><head><title>設置基本表格結構</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>表格的使用表格的使用二、設置表格標題<caption><table><captionalign=""valign="">插入表格標題</caption><tr><td></td></tr></table>表格的使用<html><head><title>插入表格標題</title></head><body><tablewidth="470"border="1"align="center"><captionalign="center">計算機語言<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>表格的使用表格的使用三、設置表格表頭或標題行<th>基本語法：<table><tr><th>…</th><td></td></tr></table>表格的使用<html><head><title>設置表格表頭</title></head><body><tablewidth="470"border="1"align="center"><tr><th>網(wǎng)頁設計</th><th>數(shù)據(jù)庫開發(fā)</th><th>程序設計</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>表格的使用表格的使用四、設置表格的寬度和高度基本語法：<tablewidth=""height=""><tr><td></td></tr></table>表格的使用<html><head><title>設置表格的寬度和高度</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>表格的使用表格的使用五、設置表格的邊框屬性基本語法：<tableborder=""bordercolor=""bordercolorlight=""bordercolordark=""><tr><td></td></tr></table>Border:邊框粗細 Bordercolor:邊框顏色Bordercolorlight:亮邊框顏色Bordercolordark:暗邊框顏色表格的使用<html><head><title>設置表格的邊框屬性</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>表格的使用表格的使用六、設置單元格邊距與間距1.單元格之間的間距：<tablecellspacing=數(shù)值>2.文字與邊框之間的間距：<tablecellpadding=數(shù)值>表格的使用<html><head><title>設置單元格間距</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>設置單元格邊距</title></head><body><tablewidth="380"border="1"cellpadding="0">

<tr><td>腳本語言</td><td> </td><td> </td>

</tr></table><tablewidth="380"border="1"cellpadding="5"><tr><td>腳本語言</td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用七、設置表格背景基本語法：<tablebgcolor=""background=""align=""><tr><td></td></tr></table>表格的使用<html><head><title>設置表格的背景</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>表格的使用表格的使用八、設置行內容水平對齊和垂直對齊<table><tralign=“”valign=“”bordercolor=“”bgcolor=“”height=“”></tr><tr><td></td></tr></table>表格的使用<html><head><title>調整行內容水平和垂直對齊</title></head><body><tableborder="1"><tralign="center"height=50valign="bottom"><th>網(wǎng)頁設計</th><th>數(shù)據(jù)庫開發(fā)</th><th>程序設計</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>表格的使用表格的使用九、設置跨行跨列<tdcolspan=數(shù)值><thcolspan=數(shù)值><tdrowspan=數(shù)值><throwspan=數(shù)值>Colspan：跨列Rowspan：跨行表格的使用<html><head><title>設置跨行</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>設置跨列</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>表格的使用表單的設計一、表單標記基本語法：<formname=""method=""action=""enctype=""target=""></form>Name:設置表單名稱Method：設置表單發(fā)送的方法，可以是"post"或者"get"Action：設置表單處理方式，可指定發(fā)送的頁面Enctype：設置表單的編碼方式target：設置表單的顯示目標表單的設計form.html<html> <head>

<metacharset=utf-8>

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

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

請輸入你的姓名：<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>表單的設計二、插入文本框<text>基本語法<form><inputname="text"type="text"maxlength=""size=""value=""></form>表單的設計<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body> <form>

請輸入你的姓名：<br> <inputname="text"type="text"maxlength="8"size="10"value="1"> </form> </body></html>表單的設計表單的設計三、插入密碼框<password>基本語法<form><inputname="password"type="password"maxlength=""size=""></form>表單的設計<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>表單的設計四、插入文件域<file>基本語法<form>

<inputname="file"type="file"></form>表單的設計<html><head><title>插入文件域</title><head><body><form>

請上傳你的照片<inputname="file"type="file"></form>

</body></html>表單的設計表單的設計五、插入標準按鈕<button>基本語法<form><inputname="b1"type="button"value="標準按鈕"></form>表單的設計<html><head><title>插入標準按鈕</title><head><body><form>

<inputname="c1"type="button"value="標準按鈕"></form>

</body></html>表單的設計表單的設計六、插入提交按鈕<submit>

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

</form></body></html>表單的設計表單的設計九、插入復選框<checkbox>基本語法：<form><inputname="r1"type="checkbox"checkedvalue=""></form>表單的設計<html><head><title>插入復選框</title><head><body><form>

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

表單的設計框架的應用一、框架分割方式1.左右分割方式<framesetcols="value,value,value"><framesrc="url"><framesrc="url"><framesrc="url"

溫馨提示

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

評論

0/150

提交評論