Web-Sites-Design-and-Programming-3-3计算机科学与技术-网站设计与编程-双语教学课件_第1页
Web-Sites-Design-and-Programming-3-3计算机科学与技术-网站设计与编程-双语教学课件_第2页
Web-Sites-Design-and-Programming-3-3计算机科学与技术-网站设计与编程-双语教学课件_第3页
Web-Sites-Design-and-Programming-3-3计算机科学与技术-网站设计与编程-双语教学课件_第4页
Web-Sites-Design-and-Programming-3-3计算机科学与技术-网站设计与编程-双语教学课件_第5页
已阅读5页，还剩56页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

WebSitesDesignandProgrammingLecturer:LijieGuoRoom:XNA508Phone:23678517Email:2024/6/1SchoolofComputerScienceandTechnology1-2IntroductiontoXHTMLWDP[CN]第二章,第三章,22－83WDP[EN]Chapter2,Chapter3,31－105P3W[CN]第二章,22－682024/6/1SchoolofComputerScienceandTechnology1-3OverviewOriginsandevolutionofHTMLandXHTMLBasicSyntaxStandarddocumentstructureBasictextmarkupImagesHypertextlinksListsTablesFormsFramesreviewBasicXHTMLSyntaxstandarddocumentstructureTheDOCTYPEDeclarationsTwoPartsInside<html></html>Whatgoesinthehead…XHTMLValidation2024/6/1SchoolofComputerScienceandTechnology1-42024/6/1SchoolofComputerScienceandTechnology1-5TwoPartsInside<html></html><head>…</head><body>……</body>2024/6/1SchoolofComputerScienceandTechnology1-6BasicTextMarkup<p>ParagraphElements:<p>TextisnormallyplacedinparagraphelementsThebrowserputsasmanywordsoftheparagraph’scontentaswillfitineachlineThe</p><p>tagbreaksthecurrentlineandinsertsablanklinethenewlinegetsthebeginningofthecontentoftheparagraph<p> Greetings!</p>SimpleHTMLexample

e.g.WDP/simple.html2024/6/1SchoolofComputerScienceandTechnology1-7BasicTextMarkup<br/>Linebreaks:<br/>Theeffectofthe<br/>tagisthesameasthatof<p>,exceptfortheblanklineNoclosingtag!2024/6/1SchoolofComputerScienceandTechnology1-8BasicTextMarkup<br/>Exampleofparagraphsandlinebreaks

Ontheplainsofhesitation<p>bleachthebonesofcountlessmillions</p><br/>who,atthedawnofvictory<br/>satdowntowait,andwaiting,died.

Typicaldisplayofthistext:Ontheplainsofhesitationbleachthebonesofcountlessmillionswho,atthedawnofvictorysatdowntowait,andwaiting,died.2024/6/1SchoolofComputerScienceandTechnology1-9BasicTextMarkup<hr/>Horizontalrules:<hr/>

<hr/>drawsalineacrossthedisplay,afteralinebreak2024/6/1SchoolofComputerScienceandTechnology1-10BasicTextMarkup<h1>to<h6>

Headings<h1>to<h6>

Sixsizes,1-6,specifiedwith<h1>to<h6>1,2,and3usefontsizesthatarelargerthanthedefaultfontsize4usesthedefaultsize5and6usesmallerfontsizesHeadingsexample

e.g.WDP/headings.html，head.html，phoenix.html2024/6/1SchoolofComputerScienceandTechnology1-11BasicTextMarkup<blockquote>Blockquotes:<blockquote>TosetablockoftextofffromthenormalflowandappearanceoftextBrowsersoftenindent,andsometimesitalicize

e.g.blockquote.htm,quote.html2024/6/1SchoolofComputerScienceandTechnology1-12BasicTextMarkupFontStylesandSizesFontStylesandSizes(canbenested)Boldface:<b>Italics:<i>Larger:<big>Smaller:<small>Monospace:<tt>2024/6/1SchoolofComputerScienceandTechnology1-13BasicTextMarkupFontStylesandSizesExample:

The<big>sleet<big>in<big><i>Crete</i><br/>lies</big>completely</big>in</big>thestreet

Display:The

sleet

in

Crete

lies

completely

in

thestreet2024/6/1SchoolofComputerScienceandTechnology1-14Subscripts:<sub>Superscripts:<sup>Example:x<sub>2</sub><sup>3</sup>

Display:x23

Allofthisfontsizeandfontstylestuffcanbedone

withstylesheets,butthesetagsarenot

yetdeprecated

BasicTextMarkupFontStylesandSizesBasicTextMarkupCharacterEntitiesCharacter

Entities2024/6/1SchoolofComputerScienceandTechnology1-15ImagesAllmodernwebbrowserscandisplayimagesinline(i.e.embeddedinthetext)GIF(GraphicInterchangeFormat)8-bitcolor(256differentcolors)JPEG(JointPhotographicExpertsGroup)24-bitcolour(16milliondifferentcolours)Bothusecompression,butJPEGcompressionisbetterPortableNetworkGraphics(PNG)RelativelynewMayeventuallyreplacebothgifandjpeg2024/6/1SchoolofComputerScienceandTechnology1-16Images

Imagesareinsertedintoadocumentwiththe<img/>tagwiththesrcattributeThealtattributeisrequiredbyXHTMLNon-graphicalbrowsersBrowserswithimagesturnedoff

<imgsrc=“logo.jpg" alt=“TianjinUniversityofTechnologyLogo"/>The<img>taghas30differentattributes,includingwidthandheight(inpixels)

e.g.WDP/image.html2024/6/1SchoolofComputerScienceandTechnology1-17LinkingontheWeb2024/6/1SchoolofComputerScienceandTechnology1-18Document1Hereisalinktodocument2

Document2Thisisdocument2.

AnchorLink(reference)DestinationSourceHypertextLinksHypertextistheessenceoftheWeb!Alinkisspecifiedwiththehref(hypertextreference)attributeof<a>(theanchortag)Thecontentof<a>isthevisuallinkinthedocumentIfthetargetisawholedocument(nottheoneinwhichthelinkappears),thetargetneednotbespecifiedinthetargetdocumentasbeingthetarget<ahref=“target.html”>Thisisalink</a>2024/6/1SchoolofComputerScienceandTechnology1-19HypertextLinksRelativeaddressingoftargetsiseasiertomaintainandmoreportablethanabsoluteaddressing

e.g.WDP/link.html2024/6/1SchoolofComputerScienceandTechnology1-20TargetswithinDocumentsIfthetargetisnotatthebeginningofthedocument,thetargetspotmustbemarkedTargetlabelscanbedefinedinmanydifferenttagswiththeidattribute,asin

<h1id="baskets">Baskets-0</h1>Thelinktoanidmustbeprecededbyapoundsign(#)targetisinthesamedocument,

<ahref="#baskets">Baskets-1</a>targetisinadifferentdocument

<ahref="myAd.html#baskets”>Baskets-2</a>2024/6/1SchoolofComputerScienceandTechnology1-21Ifthetargetisinadifferentdocument,thedocumentreferencemustbeincluded<ahref="myAd.html#baskets”>Baskets</a>Stylenote:alinkshouldblendinwiththesurroundingtext,soreadingitwithouttakingthelinkshouldnotbemadelesspleasant2024/6/1SchoolofComputerScienceandTechnology1-22ImageHyperlinksLinkscanincludeimagesintheircontent<ahref="c210data.html“><imgsrc="smallplane.jpg"alt="Smallpictureofanairplane"/>InfoonC210</a>2024/6/1SchoolofComputerScienceandTechnology1-23UnorderedListsThelististhecontentofthe<ul>

tagListelementsarethecontentofthe<li>

tag

<h3>SomeCommonSingle-EngineAircraft</h3>

<ul>

<li>CessnaSkyhawk</li> <li>BeechcraftBonanza</li> <li>PiperCherokee</li></ul>

2024/6/1SchoolofComputerScienceandTechnology1-242024/6/1SchoolofComputerScienceandTechnology1-25OrderedListsThelististhecontentofthe<ol>

tagEachiteminthedisplayisprecededbyasequencevalue<h3>Cessna210EngineStartingInstructions</h3><ol>

<li>Setmixturetorich</li><li>SetpropellertohighRPM</li><li>Setignitionswitchto"BOTH"</li><li>Setauxiliaryfuelpumpswitchto"LOWPRIME"</li><li>Whenfuelpressurereaches2to2.5PSI,pushstarterbutton</li></ol>2024/6/1SchoolofComputerScienceandTechnology1-262024/6/1SchoolofComputerScienceandTechnology1-27NestedListsAnytypelistcanbenestedinsideanytypelistThenestedlistmustbeinalistitem<ol> <li>Single-EngineAircraft <ol><li>Tailwheel</li><li>Tricycle</li></ol><br/></li><li>Dual-EngineAircraft <ol><li>Wing-mountedengines</li><li>Push-pullfuselage-mountedengines</li></ol></li></ol>e.g.WDP/nested_lists.htm2024/6/1SchoolofComputerScienceandTechnology1-292024/6/1SchoolofComputerScienceandTechnology1-30DefinitionLists(forglossariesLististhecontentofthe<dl>tagTermsbeingdefinedarethecontentofthe<dt>tagThedefinitionsthemselvesarethecontentofthe<dd>tag<dl><dt>152</dt><dd>Two-placetrainer</dd><dt>172</dt><dd>Smallerfour-placeairplane</dd</dl>

e.g.WDP/definition.htm2024/6/1SchoolofComputerScienceandTechnology1-322024/6/1SchoolofComputerScienceandTechnology1-33TablesAtableisamatrixofcellsThecellscanincludealmostanyelementSomecellshaveroworcolumnlabelsandsomehavedataAtableisspecifiedasthecontentofa<table>

tagEachrowofatableisspecifiedasthecontentofa<tr>

tagTherowheadingsarespecifiedasthecontentofa<th>

tagEachdatacellofarowisspecifiedasthecontentofa<td>

tag2024/6/1SchoolofComputerScienceandTechnology1-34TableBasicFormattingAborder

attributeinthe<table>

tagspecifiesaborderbetweenthecellsIfborderissetto"border",thebrowser’sdefaultwidthborderisusedTheborder

attributecanbesettoanumber,whichwillbetheborderwidthE.g.border=“4”Withouttheborderattribute,thetablewillhavenolines!Tablesaregiventitleswiththe<caption>tag,whichcanimmediatelyfollow<table>2024/6/1SchoolofComputerScienceandTechnology1-35TableExample<tableborder="border"><caption>PriceofFruit</caption> <tr> <th>Fruit</th> <th>Price</th> </tr> <tr> <td>Apple</td> <td>0.20</td></tr><tr> <td>Orange</td> <td>0.50</td></tr> </table>e.g.WDP/table.htm2024/6/1SchoolofComputerScienceandTechnology1-36<tableborder="border"><caption>FruitJuiceDrinks</caption><tr><th></th><th>Apple</th><th>Orange</th><th>Screwdriver</th></tr><tr><th>Breakfast</th><td>0</td><td>1</td><td>0</td></tr><tr><th>Lunch</th><td>1</td><td>0</td><td>0</td></tr></table>rowspanandcolspanattributesTablecellsaresizedtofitthedatatheycontainYoucancreatelargerdatacellsbyusingtheseattributes:rowspan–setinthe<th>or<td>tagtospecifythatthecellmustspansomenumberofrowscolspan–setinthe<th>or<td>tagtospecifythatthecellmustspansomenumberofcolumnse.g.WDP/cell_span.htm2024/6/1SchoolofComputerScienceandTechnology1-38alignandvalign

attributesThealignattributecontrolsthehorizontalplacementofthecontentsinatablecellValuesareleft,right,andcenter

Defaultforlabelsiscenter,fordataitisleft

alignisanattributeof<tr>,<th>,and<td>elementsThevalignattributecontrolstheverticalplacementofthecontentsofatablecellValuesaretop,bottom,andcenter(default)valignisanattributeof<th>and<td>elementse.g.WDP/cell_span.htm2024/6/1SchoolofComputerScienceandTechnology1-39cellpadding

and

cellspacingattributesThecellspacing

attributeof<table>isusedtospecifythedistancebetweencellsinatableThecellpaddingattributeof<table>isusedtospecifythespacing

betweenthecontentofacellandtheinnerwallsofthecell<tablecellspacing="50"><tr><td>Coloradoisastateof…</td><td>SouthDakotaissomewhat…</td></tr>e.g.WDP/cell_pad.htm2024/6/1SchoolofComputerScienceandTechnology1-40TableSectionsTablesnaturallyoccurintwoandsometimesthreepartsHeader–<thead>

Firstsection,containsheaderinformationsuchascolumnnamesBody–<tbody>

Table’sprimarydataIfadocumenthasmultipletbodyelements,theyareseparatedbythickerhorizontallinesFooter–<tfoot>E.g.forcalculationresultsandfootnotes2024/6/1SchoolofComputerScienceandTechnology1-41FormsAformistheusualwayinformationiscommunicatedfromabrowsertoaserverHTMLhastagstocreateacollectionofobjectsthatimplementthisinformationgatheringTheseobjectsarecalledcontrolsorwidgets(e.g.,radiobuttonsandcheckboxes)WhentheSubmitbuttonofaformisclicked,theform’svaluesaresenttotheserver2024/6/1SchoolofComputerScienceandTechnology1-42The<form>TagAllofthecomponents(widgets)ofaformaredefinedinthecontentofa<form>tagTheonlyrequiredattributeof<form>isactionspecifiestheURLoftheapplicationthatistobecalledwhentheSubmitbuttonisclickedaction="://"iftheformhasnoaction,thevalueissettotheemptystring(“”)Themethodattributeof<form>specifiesoneofthetwopossibletechniquesoftransferringtheformdatatotheserver,getandpost2024/6/1SchoolofComputerScienceandTechnology1-43The<input>TagManycontrolsarecreatedwiththe<input>tagThetypeattributeof<input>specifiesthekindofcontrolbeingcreatedTextCreatesahorizontalboxfortextinputDefaultsizeis20characters;itcanbechangedwiththesizeattributeIfmorecharactersareenteredthanwillfit,theboxismaxlength–maxnumberofcharacters

<inputtype="text"name="Phone"size="12">scrolled(shifted)lefte.g.WDP/text.htm2024/6/1SchoolofComputerScienceandTechnology1-44The<input>TagPasswordtype=“password”OnlybulletsorasterisksdisplayedbybrowserCheckboxes–tocollectmultiplechoiceinputEverycheckboxrequiresavalueattribute,whichisthewidget’svalueintheformdatawhenthecheckboxis‘checked’Acheckboxthatisnot‘checked’contributesnovaluetotheformdataBydefault,nocheckboxisinitially‘checked’Toinitializeacheckboxto‘checked’,thecheckedattributemustbesetto"checked"e.g.WDP/checkbox.htm2024/6/1SchoolofComputerScienceandTechnology1-45The<input>TagRadioButtons-collectionsofcheckboxesinwhichonlyonebuttoncanbe‘checked’atatimeEverybuttoninaradiobuttongroupMUSThavethesamenameIfnobuttoninaradiobuttongroupisselectedthebrowseroftenselectsthefirstonee.g.WDP/radio.htm2024/6/1SchoolofComputerScienceandTechnology1-46The<select>Tag-MenusTherearetwokindsofmenusthosethatbehavelikecheckboxesandthosethatbehavelikeradiobuttons(thedefault)Menusthatbehavelikecheckboxesarespecifiedbyincludingthemultipleattribute,whichmustbesetto"multiple"Thenameattributeof<select>isrequired2024/6/1SchoolofComputerScienceandTechnology1-47The<select>Tag-MenusThesizeattributeof<select>canbeincludedtospecifythenumberofmenuitemstobedisplayed(thedefaultis1)Ifsizeissetto>1orifmultipleisspecified,themenuisdisplayedasascrolledlistEachitemofamenuisspecifiedwithan<option>tagwhose

puretextcontent(notags)isthevalueoftheitemAn<option>tagcanincludetheselectedattribute,whichwhenassigned"selected"specifiesthattheitemispre-selectede.g.WDP/menu.htm,menu2.htm2024/6/1SchoolofComputerScienceandTechnology1-48The<textarea>TagCreatesamultilinetextareaUsuallyincludetherowsandcolsattributestospecifythesizeofthetextareaDefaulttextcanbeincludedasthecontentof<textarea>

Scrollingisimplicitiftheareaisoverfillede.g.WDP/textarea.htm,2024/6/1SchoolofComputerScienceandTechnology1-49“Successful”ControlsAsuccessfulcontrolis"valid"forsubmission.Everysuccessfulcontrolhasitscontrolnamepairedwithitscurrentvalueaspartofthesubmittedformdataset.AsuccessfulcontrolmustbedefinedwithinaFORMelementandmusthaveacontrolname.Controlsthataredisabledcannotbesuccessful.Ifaformcontainsmorethanonesubmitbutton,onlytheactivatedsubmitbuttonissuccessful.All"on"checkboxesmaybesuccessful.Forradiobuttonsthatsharethesamevalueofthenameattribute,onlythe"on"radiobuttonmaybesuccessful.Formenus,thecontrolnameisprovidedbyaSELECTelementandvaluesareprovidedbyOPTIONelements.Onlyselectedoptionsmaybesuccessful.Whennooptionsareselected,thecontrolisnotsuccessfulandneitherthenamenoranyvaluesaresubmittedtotheserverwhentheformissubmitted.SubmitandResetButtonsBotharecreatedwith<input><inputtype="reset"value="ResetForm"><inputtype="submit”value="SubmitForm">ResetclearsallcontrolstotheirinitialstatesSubmithastwoactions:EncodethedataoftheformRequestthattheserverexecutetheserver-residentprogramspecifiedasthevalueoftheaction

attributeof<form>ASubmitbuttonisrequiredineveryform2024/6/1SchoolofComputerScienceandTechnology1-51FormSubmissionMethodget:WiththeHTTP"get"method,theformdatasetisappendedtotheURIspecifiedbytheactionattribute(withaquestion-markasseparator)andthisnewURIissenttotheprocessingagent.post:WiththeHTTP"post"method,theformdatasetisincludedinthebodyoftheformandsenttotheprocessingagent’sSTDIN.ProcessingFormDataStepone:IdentifythesuccessfulcontrolsSteptwo:BuildaformdatasetStepthree:EncodetheformdatasetStepfour:SubmittheencodedformdatasetFramesFramesarerectangularsectionsofthedisplaywindow,eachofwhichcandisplayadifferentdocumentUsesofframesNavigationsystems(tableofcontents)StatictitleCommentariesAdvertisingBecauseframesarenolongerpartofXHTML,youcannotvalidateadocumentthatincludesframes2024/6/1SchoolofComputerScienceandTechnology1-54FramesetsThe<frameset>tagspecifiesthenumberofframesandtheirlayoutinthewindow<frameset>takestheplaceof<body>Cannothaveboth!

<frameset>musthaveeitherarowsattributeoracolsattribute,orboth(usuallythecase)Thepo

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论