250 likes | 455 Views
DHTML & CSS. Tutorial 6. DHTML – Intro(1). D ynamic H ypertext M arkup L anguage Combination of technologies to make Web pages dynamic Not a standard Marketing Term used by Microsoft and Netscape. DHTML – Intro(2). Scripting Language e.g. JavaScript, VBScript Incompatible
E N D
DHTML & CSS Tutorial 6 INE 1020 Introduction to Internet Engineering
DHTML – Intro(1) • Dynamic Hypertext Markup Language • Combination of technologies to make Web pages dynamic • Not a standard • Marketing Term used by Microsoft and Netscape INE 1020 Introduction to Internet Engineering
DHTML – Intro(2) • Scripting Language e.g. JavaScript, VBScript • Incompatible Microsoft Internet Explorer DHTML http://msdn.microsoft.com/workshop/author/dhtml/dhtml.asp Netscape DHTML http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm • Object Model INE 1020 Introduction to Internet Engineering
Key plugins plugins scripts embeds styleSheets filters links images forms all body window document history navigator applets anchors object location screen collection document document event frames DHTML – Object Model INE 1020 Introduction to Internet Engineering
CSS – Intro • Cascading Style Sheets • W3C Recommendation • Specify the presentation of elements on a Web page separately from the structure of the document • XHTML, Dreamweaver INE 1020 Introduction to Internet Engineering
CSS - Basics <html> <head><title>Testing</title></head> <body> <p>This is Testing</p> </body> </html> INE 1020 Introduction to Internet Engineering
CSS – Inline Styles <html> <head><title>Inline Styles</title></head> <body> <p style = "color : red"> This is Testing, using CSS</p> </body> </html> INE 1020 Introduction to Internet Engineering
CSS – Multiple Properties <html> <head><title>Inline Styles</title></head> <body> <p style = "font-size: 20pt; color : #0000ff"> This is Testing, using CSS</p> </body> </html> INE 1020 Introduction to Internet Engineering
CSS – List of Properties INE 1020 Introduction to Internet Engineering
CSS – Embedded Style Sheets <html> <head><title>Embedded Style Sheets</title></head> <style = "text/css"> em { background-color: #8000ff } </style> <body> <p>This is Testing, using <em>CSS</em></p> </body> </html> INE 1020 Introduction to Internet Engineering
CSS – External Style Sheets Ex5.html <html> <head><title>Inline Styles</title> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body><p> <a href = "http://www.cuhk.edu.hk">CUHK Homepage</a> </p></body> </html> styles.css a { font-weight: bold } INE 1020 Introduction to Internet Engineering
CSS – Brief Summary Three types of Style Sheets • Inline • Embedded • External INE 1020 Introduction to Internet Engineering
More about CSS(1) <html> <head><title>More about CSS</title> <style type = "text/css"> .p1 { color : blue } .p2 { color : green; font-weight : bolder } a.nodec { background-color : red } a:hover { font-size : 30pt } </style></head> <body> <p class = "p1"> This text is blue </p> <p class = "p2"> This text is green and bold </p> <p> This text is normal </p> <a class = "nodec" href = "http://www.yahoo.com.hk"> This is a hyperlink, with red in background. When the mouse cursor is over me, the font size will be larger</a> </body> </html> INE 1020 Introduction to Internet Engineering
More about CSS(1) INE 1020 Introduction to Internet Engineering
More about CSS(2) <html> <head><title>More about CSS</title> <style type = "text/css"> .underlined { text-decoration: underline } ul { background-color : green; color : yellow} ul ul { background-color : blue } </style></head> <body> <p> The text at the end is <span class = "underlined"> underline </span><p> <ul> <li>Milk</li> <li>Bread <ul> <li>White Bread</li> <li>Rye Bread</li> </ul> </ul> </body> </html> INE 1020 Introduction to Internet Engineering
More about CSS(3) • Positioning Elements Position: absolute/relative Top, left : px … Z-index : 1 • Text Flow & Box Model Margin-right/left/top/bottom : px … Border-width/style/color Padding-top/right/left/bottom INE 1020 Introduction to Internet Engineering
CSS – Brief Summary • Class • Pseudoclass • Span • Inheritance • Other (Position Elements, Text flow, Box Model) INE 1020 Introduction to Internet Engineering
CSS - Cascading Order • In the order of specificity The child styles are more specific than the styles for that child’s parent Eg. ul ul is more specific than ul • In the same specificity, the order will be: • External Style Sheets (lower priority) • Embedded Style Sheets • Inline Style Sheets (the highest priority) INE 1020 Introduction to Internet Engineering
CSS - Dreamweaver INE 1020 Introduction to Internet Engineering
CSS – User Style Sheet INE 1020 Introduction to Internet Engineering
CSS - Reference Internet & World Wide Web How to program 2nd Edition, Deitel Deitel Nieto Chapter 6 Cascading Style Sheets INE 1020 Introduction to Internet Engineering