版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
第11講網絡程序設計基礎HTML,CSS,andASP.NET2/4/2023學習內容一、超文本標記語言（HTML）二、層疊樣式表（CSS）三、ASP.NET基礎…2…一、超文本標記語言（HTML）HTML基礎HTML元素表格表單…3…HTML，超文本標記語言超文本：可加入圖片、聲音、動畫、影視等內容超文本傳輸協(xié)議（http）規(guī)定了瀏覽器在運行HTML文檔時所遵循的規(guī)則和進行的操作作用：控制頁面和內容的外觀發(fā)布和檢索聯(lián)機文檔創(chuàng)建聯(lián)機表單插入諸如音頻剪輯和視頻剪輯等對象1.HTML基礎…4…<html>
<head><title>HeadFirstLounge</title></head>
<body><h1>WelcometotheHeadFirst…</h1><imgsrc=”drinks.gif”><p>Joinus
<em>Dance…</em>.</p><h2>Directions</h2><p>You’llfindComejoinus!</p>
</body></html>HTML的基本結構…5…ABCDEFG頭部文件主體開始結束<標簽名字屬性1屬性2…>內容</標簽名字><html><head>
<title>學習html</title></head>
<bodybgcolor=“green”><h1>歡迎來到html世界</h1></body></html>HTML標簽…6…標簽標識body元素屬性提供有關元素的附加信息值分配給屬性的內容標題：h1到h6標簽用于指定不同級別的標題段落：<P>…</P>標簽用于標記段落換行：只要在文本中放入<br>標簽，就會強制換行2.HTML元素…7…
<h1>勵志一生</h1>
<h2>經典語錄</h2>
靜坐常思己過，閑談莫論人非<br/>
兩點之間最短的距離并不一定是直線
<br
/>
有志者自有千計萬計，無志者只感千難萬難。
<h2>愛情故事</h2>
<p>
一個小男孩對小女孩說：“我是你的BF.”<br
/>
女孩問：“什么是BF?”男孩說是BestFriend（最好的朋友）的意思。<br
/>
再后來他們結婚生子到了風燭殘年的年紀，老公公對老婆婆說：“我是你的BF.”<br
/>
老婆婆問：“什么是BF?”老公公微笑回答“BeForever!（要永遠這樣啊?。?/p>
</p>預先格式化：<pre>標簽字符格式化：對文本應用粗體、斜體等格式水平線：<HR>標簽格式化…8…<pre>
山羊上山，山碰山羊角
水牛下水，水沒水牛腰
</pre>
<hr/>
<p>
<b>
大魚吃小魚，小魚吃蝦</b>
<i>蝦吃水，水落石出</i>
<br/>
<u>
溪<sub>水</sub>歸河水，河水歸江，
江歸海，海闊<sup>天</sup>空</u>
</p><font>標簽及其相關屬性（如size、color和face）可用于控制網頁上文本的顯示字體…9…<font
size="4"
color="red"
face="微軟雅黑">
水水山山，處處明明秀秀；
<br
/>
晴晴雨雨，時時好好奇奇<br
/>
</font>
<font
size="3"
color="blue"
face="宋體">
重重迭迭山，曲曲環(huán)環(huán)路；<br
/>
丁丁冬冬泉，高高下下樹
</font>字體大?。?到7）顏色（名稱或十六進制）字體，各字體間用逗號分隔插入圖像標簽：<img>，主要屬性：src:指定要插入的圖像位置align:指定圖像相對于文本的對齊方式圖像大?。╳idth，height）例：
<imgalign=”right”src=”images/01.jpg”width=”400”height=”200”>圖像…10…<ol>:有序列表（列表項以自動生成的順序顯示）<ul>：無序列表（也稱為“項目列表”）列表…11…有序列表的屬性<litype=I><litype=i><litype=A><litype=a><olstart=n><body>
<ul>
<li>紅色</li>
<li>綠色</li></ul>
<ol>
<li>星期一</li><li>星期二</li>
</ol>
</body>超級鏈接：<ahref=“www…”>網址</a>書簽標簽：“跳”到文檔的某個部分
創(chuàng)建定位標記:
<aname=“marker”>主題名稱</a>使用定位標記：<ahref=“#marker”>主題名稱</a>E-Mail鏈接：<ahref="mailto:ybli@">
超級鏈接…12…<a
href="">武漢大學</a><a
href="#GY">格言</a>
<a
href="#DL">對聯(lián)</a>
<br/>
<a
name="GY">格言</a>
<br/>
真理惟一可…<a
name="DL">對聯(lián)</a><br/>
一人為大，….<a
href="mailto:ybli@">李英冰</a>表格組成部分：行、列、單元格、列標題（可選）、表格標題（可選）在HTML文檔中，廣泛使用表格存放文本和圖像3.表格…13…行列列標題單元格表格標題主要標簽：<table>,<tr>,<td>,<th>表格標簽…14…<table
border="2"
>
<caption>網站分類</caption>
<tr>
<th>購物</th><th>測繪</th>
</tr>
<tr>
<td>京東</td><td
>武漢大學</td>
</tr>
<tr>
<td>淘寶</td><td>國家測繪局</td>
</tr>
</table>【示例】創(chuàng)建表格…15…表單<form>用于采集和提交用戶輸入的信息4.表單…16…method=“post或get”actionmethod指定提交后由服務器上哪個處理程序處理指定向服務器提交的方法:一般為post或get方法,
post方法比較安全action=“URL”<formaction=“http://”method=“post”>HTML表單的常用控件<input
type=“?”></input>表單常用控件…17…inputtype=“text”單行文本輸入框inputtype=“submit”信息提交inputtype=“checkbox”復選框inputtype=“radio”單選框inputtype=“password”密碼輸入框select下拉框textArea多行文本輸入框控件的格式：
<inputtype=“?”name=“?”size=”?”value=“?”maxlength=“?”checked=“?”>表單控件的屬性…18…type元素類型：text、password、checkbox、radio、submit、reset、file、hidden和buttonname控件名稱，作用域是在form元素內value指定控件的初始值size指定控件的初始寬度maxlength在text或password元素中輸入最大字符數checked當輸入類型為radio或checkbox時，使用此屬性HTML表格與表單（簡易計算器）…19…表格有那幾個重要組成部分？表單<FORM>有哪些屬性？知識問答20二、層疊樣式表（CSS）CSS定義樣式表的定義樣式表的引用DIV+CSS布局…21…DHTML=HTML腳本語言JavaScript++層疊樣式表CSS指定網頁元素決定元素的大小、顏色和位置操縱網頁的元素動態(tài)HTML頁面CSS：層疊樣式表，用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言HTML的缺陷VSCSS的引入
<h2><fontcolor="#0000FF">標題1</font></h2>
<h2><fontcolor="#0000FF">標題2</font></h2><head><style>
H2{font-family:”宋體”;color:red;}</style></head><body><h2>CSS1</h2>
<h2>CSS2</h2></body>1.CSS的概念…22…背景色：background-color:#000000，可以接受任何合法顏色值背景圖形：background-image:none，把圖片放入背景背景重復：background-repeat:repeat-x，在頁面上對背景圖形進行平鋪文字裝飾：text-decoration屬性（none,underline,overline,line-through,blink)基本屬性…23…屬
性CSS名稱說
明顏色
color文本屬性font-size字體大小font-family字體text-align文本對齊邊框屬性(用于表單元素)border-style邊框樣式border-width邊框寬度
border-color邊框顏色
定位屬性(position)top頂部邊距（上邊距）left左邊距width寬度height高度z-indexz軸索引號，用于層常用樣式屬性…24…CSS樣式表樣式規(guī)則組成，樣式規(guī)則一般由樣式符和屬性組成常用樣式符：HTML標簽、用戶自定義類和用戶自定義IDCSS樣式語法規(guī)則：樣式符｛屬性1：值1；屬性2：值2；…｝body
{
margin-left:
0px;
margin-top:
10px;
margin-right:
15px;
margin-bottom:
0px;
background-color:
#ff0000;}2.樣式表定義…25…定義格式：
樣式符.類名｛屬性1：值1；…｝例<head>
<style
type="text/css">
.one{
color:
red;
font-size:18px}</style></head><body>
<p
class="one">Class
one</p>
</body>用戶自定義類作為樣式符…26….classcolor:green;font-size:20px;{}類別選擇器屬性值屬性值聲明聲明類別名稱定義格式：樣式符｛屬性1：值1；…｝例<head>
<style
type="text/css">
p
{
color:
red;
font-size:small}
</style>
</head>
<body>
<p>好好學習，天天向上</p>
</body>HTML標簽作為樣式符…27…h(huán)1color:red;font-size:25px;{}選擇器屬性值屬性值聲明聲明定義格式：例<head>
<style
type="text/css">
#one
{
font-weight:
bold;}
</style>
</head>
<body>
<p
id="one">好好學習，天天向上</p>
</body>用戶自定義ID作為樣式符…28…#idcolor:yellow;font-size:30px;{}ID選擇器屬性值屬性值聲明聲明行內樣式<body>
<p
style="text-decoration:
underline">武漢</p>
</body>內嵌樣式<head>
<style
type="text/css">
p{
color:
#FF00FF;
font-weight:bold}
</style>
</head>
<body>
<p>太陽最紅，毛主席最親</p>
</body>3.樣式表的引用…29…StyleSheet.cssa:link{
/*
超鏈接正常狀態(tài)下的樣式
*/
color:#005799;
text-decoration:
none;}a:visited{
/*
訪問過的超鏈接
*/
color:#000000;
text-decoration:
none;}a:hover{
/*
鼠標放在超鏈接上的狀態(tài)
*/
color:
#FFFF00;
text-decoration:
underline;}a:active
{
/*在鏈接上按下鼠標時的狀態(tài)*/
color:#005799}制作樣式表文件…30…在<head></head>之間通過link引用外部文件例<head><title>外部樣式表的引用</title>
<link
href="StyleSheet.css"
rel="stylesheet"
type="text/css"/></head>
<body>
<a
href="">中央人民政府</a>
</body>外部樣式表引用…31…頁面設計人員把DIV+CSS作為網頁布局的行業(yè)標準在布局中，div承載的是內容，css承載的是樣式DIV的概念DIV（division）意思是“區(qū)分”，使用DIV的方法和使用其他標簽的方法一樣DIV本身是容器性質的SPAN和DIV的區(qū)別DIV是一個塊級元素，可以包含段落、標題、表格…span是行級容器標簽，只能包含文字，不可包含圖片、標題…4.DIV+CSS布局…32…每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度(height)，盒子里面的內容到盒子的邊框之間的距離即填充(padding)，盒子本身有邊框(border)，而盒子邊框外與其他盒子之間，還有邊界(margin)盒子模型…33…contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottom<styletype="text/css">#father{background-color:#a0c8ff;
width:100%;
height:100%;}#block{
background-color:#fff0ac;
padding:10px;
position:absolute;
left:20px; top:40px; }</style>….<divid="father">
<divid="block">absolute</div></div>Position位置…34…<styletype="text/css">#container{
position:relative;
width:100%;}…..</style><divid="container">
<divid="banner">banner</div>
<divid="content">….
</div> <divid="links"> .. /div> <divid="footer">footer</div></div></body>CSS排版：將頁面用div分塊…35…#container#banner#content#links#footerShow10-HTML+CSS…36…樣式表有什么用？分為哪三類？簡述盒子模型練習…37…三、ASP.NET基礎ASP.NET概述安裝IIS&配置IISASP.NET工作原理WEB窗體頁…38…Web相關術語網站：萬維網上相關網頁的集合網頁：文件后綴名通常為*.html或*.htm的頁面HTML：用于制作網頁的超文本標記語言靜態(tài)網頁：只能瀏覽，不能實現(xiàn)客戶端和服務器端的交流互動動態(tài)網頁：網站頁面隨用戶的輸入而變化，能與客戶端交流互動1.ASP.NET概述…39…基于公共語言運行時(CLR)基礎上的程序開發(fā)架構創(chuàng)建動態(tài)Web頁的服務器端新技術大量工具箱和函數庫的支持多語言支持ASP.NET優(yōu)勢…40…ASP.NETVB.NETC#JScript其他語言Web應用程序支持使用和創(chuàng)建Web服務：Web服務通過標準Web協(xié)議訪問的可編程的應用程序邏輯改進的安全性：ASP.NET與IIS、.NET框架和操作系統(tǒng)所提供的基礎安全服務配合使用，共同提供一系列身份驗證和授權機制更高的可擴展性：可在單獨的機器或數據庫的單獨進程中維護會話狀態(tài)，從而允許跨服務器的會話狀態(tài)管理：通過cookie、查詢字符串、應用程序、Session等進行有效的狀態(tài)管理配置和部署：將配置信息存儲在基于XML的配置文件中，使得ASP.NET應用程序更易于部署ASP.NET功能…41…配置IIS設置:IIS(InternetInformationServices,Internet信息服務)-
基于Windows服務器的服務，可幫助在任何Intranet或Internet上發(fā)布信息2.安裝IIS&配置IIS…42…從“控制面板”中安裝IIS單擊選擇IIS并單擊“下一步>”按鈕配置屬性虛擬目錄是由Web
服務器使用的邏輯目錄名，與服務器上的物理目錄相對應配置IIS…43…使用IIS
創(chuàng)建虛擬目錄步驟1：在“默認Web站點”中創(chuàng)建一個虛擬目錄。步驟2：給出此虛擬目錄的別名。步驟3：選擇虛擬目錄的位置。步驟4：為此目錄選擇適當的訪問權限。IIS的安裝與配置…44…Web.config用來儲存Web應用程序的配置信息特定應用程序配置：定義全局常量信息，如配置Access、SQLserver數據庫連接<appsettings><addkey=”accessCon”value=”
Provider=Microsoft.Jet,OLEDB.4.0;DataSource=|Dir|db.mdb”><addkey=”sqlCon”
value=”DataSource=(local);Database=database;Uid=sa;Pwd=000”></appsettings>Web.config文件配置…45…位于<system.Web>節(jié)中，控制A運行時的行為，如自定義錯誤頁、配置Session變量、全球化設置<system.web><customErrors
mode="on"
defaultRedirect="error.aspx"><sessionStatemode=“InProc”timeout=“10”/><globalization
fileEncoding="gb2312"
requestEncoding="gb2312"
responseEncoding="gb2312"
culture="zh-CN"/></system.web>配置節(jié)設置…46…ASP.NET文件的體系結構3.ASP.NET的工作原理…47…文件擴展名說明.aspx用于創(chuàng)建網頁和對網頁進行編程的核心文件類型.aspx.cs由ASPX或ASCX文件繼承的C#代碼文件.ascx指明一個ASP.NET用戶定義控件.asax包含ASP.NET應用程序級事件的事件語法.asmx供宿主Web服務在本地或遠程使用.config配置文件，用于設置應用程序的各種屬性.htm標準HTML文件，包含靜態(tài)元素和內容頁面訪問運行機制客戶端與服務器…48…查詢服務器上的網頁解釋.aspx
頁將頁面內容編譯為中間語言(IL)
存儲已預編譯頁面的本機代碼版本存儲一些項目，以降低重建成本。存儲整個頁面，包括對象和數據腳本分為服務器腳本和客戶端腳本腳本部分
…49…腳本部分服務器端腳本客戶端腳本由服務器執(zhí)行由瀏覽器執(zhí)行C#VBJscriptASP.NET窗體（可視化組件與引用程序分離）4.WEB窗體頁…50…Default.aspxDefault.aspx.csWebForm編程邏輯（代碼隱藏）.aspx.cs文件可視化組件.aspx文件瀏覽器中的用戶界面用戶界面設計用戶界面
…51…設計窗口控件放置在設計窗口中的控件瀏覽器窗口中的用戶界面<%@
Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_D
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年度金融科技產品研發(fā)與技術服務合同
- 2024年機械設備銷售購銷協(xié)議模板版
- 2024年度創(chuàng)業(yè)項目退伙協(xié)議書3篇
- 2024年度文化旅游項目擔保公司貸款延期還款協(xié)議3篇
- 2024版國際貿易知識產權保護磋商與合同實施合同
- 推進互聯(lián)網＋醫(yī)養(yǎng)結合實施方案
- 2024版保姆帶小孩及家庭生活禮儀培訓服務協(xié)議3篇
- 2024年度高效大棚租賃合同模板6篇
- 2024年度物業(yè)管理費用用的監(jiān)督與檢查合同3篇
- 2024年新型建筑工程標準簡易協(xié)議樣式版
- 七年級數學(上)有理數混合運算100題(含答案)
- 探索小學數字化教學手段促進教學質量提升
- 網絡營銷、電子商務-專業(yè)“十四五”專業(yè)與課程建設規(guī)劃
- 項目廉潔風險及防控措施宣貫
- 鐵路專用線設計規(guī)范（試行）（TB 10638-2019）
- 婦產科vte的預防
- 銀行消保知識培訓總結
- 首尾件檢查作業(yè)指導書
- 公安系統(tǒng)意識形態(tài)領域分析報告
- 國家開放大學電大《現(xiàn)代漢語專題》形考作業(yè)答案
- 第七章-卡方檢驗
評論
0/150
提交評論