Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3

上傳人：q*** IP屬地：湖北上傳時間：2023-02-04 格式：PPTX 頁數(shù)：57 大?。?.93MB 積分：28 舉報 版權(quán)申訴

Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3_第2頁

Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3_第3頁

Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3_第4頁

Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3_第5頁

已閱讀5頁，還剩52頁未讀，繼續(xù)免費閱讀

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

文檔簡介

第11講網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)HTML,CSS,andASP.NET2/4/2023學(xué)習(xí)內(nèi)容一、超文本標(biāo)記語言（HTML）二、層疊樣式表（CSS）三、ASP.NET基礎(chǔ)…2…一、超文本標(biāo)記語言（HTML）HTML基礎(chǔ)HTML元素表格表單…3…HTML，超文本標(biāo)記語言超文本：可加入圖片、聲音、動畫、影視等內(nèi)容超文本傳輸協(xié)議（http）規(guī)定了瀏覽器在運行HTML文檔時所遵循的規(guī)則和進(jìn)行的操作作用：控制頁面和內(nèi)容的外觀發(fā)布和檢索聯(lián)機文檔創(chuàng)建聯(lián)機表單插入諸如音頻剪輯和視頻剪輯等對象1.HTML基礎(chǔ)…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的基本結(jié)構(gòu)…5…ABCDEFG頭部文件主體開始結(jié)束<標(biāo)簽名字屬性1屬性2…>內(nèi)容</標(biāo)簽名字><html><head>

<bodybgcolor=“green”><h1>歡迎來到html世界</h1></body></html>HTML標(biāo)簽…6…標(biāo)簽標(biāo)識body元素屬性提供有關(guān)元素的附加信息值分配給屬性的內(nèi)容標(biāo)題：h1到h6標(biāo)簽用于指定不同級別的標(biāo)題段落：<P>…</P>標(biāo)簽用于標(biāo)記段落換行：只要在文本中放入<br>標(biāo)簽，就會強制換行2.HTML元素…7…

靜坐常思己過，閑談莫論人非<br/>

兩點之間最短的距離并不一定是直線

<br

有志者自有千計萬計，無志者只感千難萬難。

<p>

一個小男孩對小女孩說：“我是你的BF.”<br

女孩問：“什么是BF?”男孩說是BestFriend（最好的朋友）的意思。<br

再后來他們結(jié)婚生子到了風(fēng)燭殘年的年紀(jì)，老公公對老婆婆說：“我是你的BF.”<br

老婆婆問：“什么是BF?”老公公微笑回答“BeForever!（要永遠(yuǎn)這樣?。。?/p>

</p>預(yù)先格式化：<pre>標(biāo)簽字符格式化：對文本應(yīng)用粗體、斜體等格式水平線：<HR>標(biāo)簽格式化…8…<pre>

山羊上山，山碰山羊角

水牛下水，水沒水牛腰

</pre>

<hr/>

<p>

<b>

大魚吃小魚，小魚吃蝦</b>

<br/>

<u>

溪<sub>水</sub>歸河水，河水歸江，

江歸海，海闊<sup>天</sup>空</u>

</p><font>標(biāo)簽及其相關(guān)屬性（如size、color和face）可用于控制網(wǎng)頁上文本的顯示字體…9…<font

size="4"

color="red"

face="微軟雅黑">

水水山山，處處明明秀秀；

<br

晴晴雨雨，時時好好奇奇<br

</font>

<font

size="3"

color="blue"

face="宋體">

重重迭迭山，曲曲環(huán)環(huán)路；<br

丁丁冬冬泉，高高下下樹

</font>字體大?。?到7）顏色（名稱或十六進(jìn)制）字體，各字體間用逗號分隔插入圖像標(biāo)簽：<img>，主要屬性：src:指定要插入的圖像位置align:指定圖像相對于文本的對齊方式圖像大小（width，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>

<ol>

</ol>

</body>超級鏈接：<ahref=“www…”>網(wǎng)址</a>書簽標(biāo)簽：“跳”到文檔的某個部分

創(chuàng)建定位標(biāo)記:

<aname=“marker”>主題名稱</a>使用定位標(biāo)記：<ahref=“#marker”>主題名稱</a>E-Mail鏈接：<ahref="mailto:ybli@">

超級鏈接…12…<a

href="">武漢大學(xué)</a><a

href="#GY">格言</a>

href="#DL">對聯(lián)</a>

<br/>

name="GY">格言</a>

<br/>

真理惟一可…<a

name="DL">對聯(lián)</a><br/>

一人為大，….<a

href="mailto:ybli@">李英冰</a>表格組成部分：行、列、單元格、列標(biāo)題（可選）、表格標(biāo)題（可選）在HTML文檔中，廣泛使用表格存放文本和圖像3.表格…13…行列列標(biāo)題單元格表格標(biāo)題主要標(biāo)簽：<table>,<tr>,<td>,<th>表格標(biāo)簽…14…<table

border="2"

<tr>

</tr>

<tr>

<td>京東</td><td

>武漢大學(xué)</td>

</tr>

<tr>

<td>淘寶</td><td>國家測繪局</td>

</tr>

</table>【示例】創(chuàng)建表格…15…表單<form>用于采集和提交用戶輸入的信息4.表單…16…method=“post或get”actionmethod指定提交后由服務(wù)器上哪個處理程序處理指定向服務(wù)器提交的方法:一般為post或get方法,

post方法比較安全action=“URL”<formaction=“http://”method=“post”>HTML表單的常用控件<input

type=“?”></input>表單常用控件…17…inputtype=“text”單行文本輸入框inputtype=“submit”信息提交inputtype=“checkbox”復(fù)選框inputtype=“radio”單選框inputtype=“password”密碼輸入框select下拉框textArea多行文本輸入框控件的格式：

<inputtype=“?”name=“?”size=”?”value=“?”maxlength=“?”checked=“?”>表單控件的屬性…18…type元素類型：text、password、checkbox、radio、submit、reset、file、hidden和buttonname控件名稱，作用域是在form元素內(nèi)value指定控件的初始值size指定控件的初始寬度maxlength在text或password元素中輸入最大字符數(shù)checked當(dāng)輸入類型為radio或checkbox時，使用此屬性HTML表格與表單（簡易計算器）…19…表格有那幾個重要組成部分？表單<FORM>有哪些屬性？知識問答20二、層疊樣式表（CSS）CSS定義樣式表的定義樣式表的引用DIV+CSS布局…21…DHTML=HTML腳本語言JavaScript++層疊樣式表CSS指定網(wǎng)頁元素決定元素的大小、顏色和位置操縱網(wǎng)頁的元素動態(tài)HTML頁面CSS：層疊樣式表，用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言HTML的缺陷VSCSS的引入

H2{font-family:”宋體”;color:red;}</style></head><body><h2>CSS1</h2>

<h2>CSS2</h2></body>1.CSS的概念…22…背景色：background-color:#000000，可以接受任何合法顏色值背景圖形：background-image:none，把圖片放入背景背景重復(fù)：background-repeat:repeat-x，在頁面上對背景圖形進(jìn)行平鋪文字裝飾：text-decoration屬性（none,underline,overline,line-through,blink)基本屬性…23…屬

性CSS名稱說

明顏色

color文本屬性font-size字體大小font-family字體text-align文本對齊邊框?qū)傩?用于表單元素)border-style邊框樣式border-width邊框?qū)挾?/p>

border-color邊框顏色

定位屬性(position)top頂部邊距（上邊距）left左邊距width寬度height高度z-indexz軸索引號，用于層常用樣式屬性…24…CSS樣式表樣式規(guī)則組成，樣式規(guī)則一般由樣式符和屬性組成常用樣式符：HTML標(biāo)簽、用戶自定義類和用戶自定義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>

class="one">Class

one</p>

</body>用戶自定義類作為樣式符…26….classcolor:green;font-size:20px;{}類別選擇器屬性值屬性值聲明聲明類別名稱定義格式：樣式符｛屬性1：值1；…｝例<head>

<style

type="text/css">

{

color:

red;

font-size:small}

</style>

</head>

<body>

</body>HTML標(biāo)簽作為樣式符…27…h(huán)1color:red;font-size:25px;{}選擇器屬性值屬性值聲明聲明定義格式：例<head>

<style

type="text/css">

#one

{

font-weight:

bold;}

</style>

</head>

<body>

id="one">好好學(xué)習(xí)，天天向上</p>

</body>用戶自定義ID作為樣式符…28…#idcolor:yellow;font-size:30px;{}ID選擇器屬性值屬性值聲明聲明行內(nèi)樣式<body>

style="text-decoration:

underline">武漢</p>

</body>內(nèi)嵌樣式<head>

<style

type="text/css">

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{

鼠標(biāo)放在超鏈接上的狀態(tài)

color:

#FFFF00;

text-decoration:

underline;}a:active

{

/*在鏈接上按下鼠標(biāo)時的狀態(tài)*/

color:#005799}制作樣式表文件…30…在<head></head>之間通過link引用外部文件例<head><title>外部樣式表的引用</title>

<link

href="StyleSheet.css"

rel="stylesheet"

type="text/css"/></head>

<body>

href="">中央人民政府</a>

</body>外部樣式表引用…31…頁面設(shè)計人員把DIV+CSS作為網(wǎng)頁布局的行業(yè)標(biāo)準(zhǔn)在布局中，div承載的是內(nèi)容，css承載的是樣式DIV的概念DIV（division）意思是“區(qū)分”，使用DIV的方法和使用其他標(biāo)簽的方法一樣DIV本身是容器性質(zhì)的SPAN和DIV的區(qū)別DIV是一個塊級元素，可以包含段落、標(biāo)題、表格…span是行級容器標(biāo)簽，只能包含文字，不可包含圖片、標(biāo)題…4.DIV+CSS布局…32…每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度(height)，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(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…樣式表有什么用？分為哪三類？簡述盒子模型練習(xí)…37…三、ASP.NET基礎(chǔ)ASP.NET概述安裝IIS&配置IISASP.NET工作原理WEB窗體頁…38…Web相關(guān)術(shù)語網(wǎng)站：萬維網(wǎng)上相關(guān)網(wǎng)頁的集合網(wǎng)頁：文件后綴名通常為*.html或*.htm的頁面HTML：用于制作網(wǎng)頁的超文本標(biāo)記語言靜態(tài)網(wǎng)頁：只能瀏覽，不能實現(xiàn)客戶端和服務(wù)器端的交流互動動態(tài)網(wǎng)頁：網(wǎng)站頁面隨用戶的輸入而變化，能與客戶端交流互動1.ASP.NET概述…39…基于公共語言運行時(CLR)基礎(chǔ)上的程序開發(fā)架構(gòu)創(chuàng)建動態(tài)Web頁的服務(wù)器端新技術(shù)大量工具箱和函數(shù)庫的支持多語言支持ASP.NET優(yōu)勢…40…ASP.NETVB.NETC#JScript其他語言Web應(yīng)用程序支持使用和創(chuàng)建Web服務(wù)：Web服務(wù)通過標(biāo)準(zhǔn)Web協(xié)議訪問的可編程的應(yīng)用程序邏輯改進(jìn)的安全性：ASP.NET與IIS、.NET框架和操作系統(tǒng)所提供的基礎(chǔ)安全服務(wù)配合使用，共同提供一系列身份驗證和授權(quán)機制更高的可擴展性：可在單獨的機器或數(shù)據(jù)庫的單獨進(jìn)程中維護(hù)會話狀態(tài)，從而允許跨服務(wù)器的會話狀態(tài)管理：通過cookie、查詢字符串、應(yīng)用程序、Session等進(jìn)行有效的狀態(tài)管理配置和部署：將配置信息存儲在基于XML的配置文件中，使得ASP.NET應(yīng)用程序更易于部署ASP.NET功能…41…配置IIS設(shè)置:IIS(InternetInformationServices,Internet信息服務(wù))-

基于Windows服務(wù)器的服務(wù)，可幫助在任何Intranet或Internet上發(fā)布信息2.安裝IIS&配置IIS…42…從“控制面板”中安裝IIS單擊選擇IIS并單擊“下一步>”按鈕配置屬性虛擬目錄是由Web

服務(wù)器使用的邏輯目錄名，與服務(wù)器上的物理目錄相對應(yīng)配置IIS…43…使用IIS

創(chuàng)建虛擬目錄步驟1：在“默認(rèn)Web站點”中創(chuàng)建一個虛擬目錄。步驟2：給出此虛擬目錄的別名。步驟3：選擇虛擬目錄的位置。步驟4：為此目錄選擇適當(dāng)?shù)脑L問權(quán)限。IIS的安裝與配置…44…Web.config用來儲存Web應(yīng)用程序的配置信息特定應(yīng)用程序配置：定義全局常量信息，如配置Access、SQLserver數(shù)據(jù)庫連接<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變量、全球化設(shè)置<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é)設(shè)置…46…ASP.NET文件的體系結(jié)構(gòu)3.ASP.NET的工作原理…47…文件擴展名說明.aspx用于創(chuàng)建網(wǎng)頁和對網(wǎng)頁進(jìn)行編程的核心文件類型.aspx.cs由ASPX或ASCX文件繼承的C#代碼文件.ascx指明一個ASP.NET用戶定義控件.asax包含ASP.NET應(yīng)用程序級事件的事件語法.asmx供宿主Web服務(wù)在本地或遠(yuǎn)程使用.config配置文件，用于設(shè)置應(yīng)用程序的各種屬性.htm標(biāo)準(zhǔn)HTML文件，包含靜態(tài)元素和內(nèi)容頁面訪問運行機制客戶端與服務(wù)器…48…查詢服務(wù)器上的網(wǎng)頁解釋.aspx

頁將頁面內(nèi)容編譯為中間語言(IL)

存儲已預(yù)編譯頁面的本機代碼版本存儲一些項目，以降低重建成本。存儲整個頁面，包括對象和數(shù)據(jù)腳本分為服務(wù)器腳本和客戶端腳本腳本部分

…49…腳本部分服務(wù)器端腳本客戶端腳本由服務(wù)器執(zhí)行由瀏覽器執(zhí)行C#VBJscriptASP.NET窗體（可視化組件與引用程序分離）4.WEB窗體頁…50…Default.aspxDefault.aspx.csWebForm編程邏輯（代碼隱藏）.aspx.cs文件可視化組件.aspx文件瀏覽器中的用戶界面用戶界面設(shè)計用戶界面

…51…設(shè)計窗口控件放置在設(shè)計窗口中的控件瀏覽器窗口中的用戶界面<%@

Page

Language="C#"

AutoEventWireup="true"

CodeFile="Default.aspx.cs"

Inherits="_D

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3

文檔簡介

溫馨提示

最新文檔

評論

Lect11網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)V3

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔