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)，請進行舉報或認領(lǐng)

文檔簡介

第11講網(wǎng)絡(luò)程序設(shè)計基礎(chǔ)HTML,CSS,andASP.NET2/4/2023學習內(nèi)容一、超文本標記語言（HTML）二、層疊樣式表（CSS）三、ASP.NET基礎(chǔ)…2…一、超文本標記語言（HTML）HTML基礎(chǔ)HTML元素表格表單…3…HTML，超文本標記語言超文本：可加入圖片、聲音、動畫、影視等內(nèi)容超文本傳輸協(xié)議（http）規(guī)定了瀏覽器在運行HTML文檔時所遵循的規(guī)則和進行的操作作用：控制頁面和內(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é)束<標簽名字屬性1屬性2…>內(nèi)容</標簽名字><html><head>

<title>學習html</title></head>

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

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

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

<br

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

<p>

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

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

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

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

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

山羊上山，山碰山羊角

水牛下水，水沒水牛腰

</pre>

<hr/>

<p>

<b>

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

<br/>

<u>

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

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

</p><font>標簽及其相關(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）顏色（名稱或十六進制）字體，各字體間用逗號分隔插入圖像標簽：<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>

<ol>

</ol>

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

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

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

超級鏈接…12…<a

href="">武漢大學</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>表格組成部分：行、列、單元格、列標題（可選）、表格標題（可選）在HTML文檔中，廣泛使用表格存放文本和圖像3.表格…13…行列列標題單元格表格標題主要標簽：<table>,<tr>,<td>,<th>表格標簽…14…<table

border="2"

<tr>

</tr>

<tr>

<td>京東</td><td

>武漢大學</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”復選框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當輸入類型為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)容分離的一種標記性語言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，把圖片放入背景背景重復：background-repeat:repeat-x，在頁面上對背景圖形進行平鋪文字裝飾：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標簽、用戶自定義類和用戶自定義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標簽作為樣式符…27…h(huán)1color:red;font-size:25px;{}選擇器屬性值屬性值聲明聲明定義格式：例<head>

<style

type="text/css">

#one

{

font-weight:

bold;}

</style>

</head>

<body>

id="one">好好學習，天天向上</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{

鼠標放在超鏈接上的狀態(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>

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

</body>外部樣式表引用…31…頁面設(shè)計人員把DIV+CSS作為網(wǎng)頁布局的行業(yè)標準在布局中，div承載的是內(nèi)容，css承載的是樣式DIV的概念DIV（division）意思是“區(qū)分”，使用DIV的方法和使用其他標簽的方法一樣DIV本身是容器性質(zhì)的SPAN和DIV的區(qū)別DIV是一個塊級元素，可以包含段落、標題、表格…span是行級容器標簽，只能包含文字，不可包含圖片、標題…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…樣式表有什么用？分為哪三類？簡述盒子模型練習…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)頁的超文本標記語言靜態(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ù)通過標準Web協(xié)議訪問的可編程的應(yīng)用程序邏輯改進的安全性：ASP.NET與IIS、.NET框架和操作系統(tǒng)所提供的基礎(chǔ)安全服務(wù)配合使用，共同提供一系列身份驗證和授權(quán)機制更高的可擴展性：可在單獨的機器或數(shù)據(jù)庫的單獨進程中維護會話狀態(tài)，從而允許跨服務(wù)器的會話狀態(tài)管理：通過cookie、查詢字符串、應(yīng)用程序、Session等進行有效的狀態(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：在“默認Web站點”中創(chuàng)建一個虛擬目錄。步驟2：給出此虛擬目錄的別名。步驟3：選擇虛擬目錄的位置。步驟4：為此目錄選擇適當?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)頁進行編程的核心文件類型.aspx.cs由ASPX或ASCX文件繼承的C#代碼文件.ascx指明一個ASP.NET用戶定義控件.asax包含ASP.NET應(yīng)用程序級事件的事件語法.asmx供宿主Web服務(wù)在本地或遠程使用.config配置文件，用于設(shè)置應(yīng)用程序的各種屬性.htm標準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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

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

文檔簡介

溫馨提示

最新文檔

評論

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

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔