Html Expression Web


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html Expression Web

  1. 1. (X)HTML WITH EXPRESSION WEB Mark Frydenberg Technology Intensive IT 101, Bentley College
  2. 2. Concepts <ul><li>HTML </li></ul><ul><li>XHTML </li></ul><ul><li>Hypertext </li></ul><ul><li>Hyperlink </li></ul><ul><li>Deprecated </li></ul><ul><li>Tags </li></ul><ul><li>Attributes </li></ul><ul><li>Style sheet </li></ul><ul><li>CSS </li></ul><ul><li>Layers </li></ul><ul><li>EW: Interactive Buttons </li></ul><ul><li>EW: Dynamic Web Templates </li></ul><ul><li>Local Reference </li></ul><ul><li>Relative Reference </li></ul><ul><li>Absolute Reference </li></ul><ul><li>Microsoft Expression Web </li></ul><ul><ul><li>WYSIWYG </li></ul></ul><ul><ul><li>Released May, 2006 </li></ul></ul><ul><ul><li>Beta 1: Sept, 2006 </li></ul></ul><ul><ul><li>Public: Dec. 2006 </li></ul></ul>
  3. 3. Microsoft Expression Web <ul><li>Microsoft ® Expression ® Web is a professional design tool to create modern, standards-based sites that deliver superior quality on the Web. </li></ul>
  4. 4. Why XHTML? <ul><li>Use XML to describe data. </li></ul><ul><li>Use HTML to display data. </li></ul><ul><li>XHTML </li></ul><ul><li>Works in all browsers </li></ul><ul><li>Backward browser compatible </li></ul><ul><li>Pages can be read by all XML enabled devices (phones, PDAs, browsers) </li></ul><ul><li>Documents must be &quot;well-formed&quot; </li></ul><ul><li>XHTML tags must be </li></ul><ul><li>properly nested </li></ul><ul><li>closed </li></ul><ul><li>lowercase </li></ul><ul><li>Attributes must be </li></ul><ul><li>lower case </li></ul><ul><li>quoted </li></ul><ul><li>Examples </li></ul><ul><li><img src=&quot;pic.jpg&quot; /> </li></ul><ul><li><a href=&quot;page2.htm&quot;>Page 2</a> </li></ul>
  5. 5. Local References <ul><li>File, web page, or image is in the same folder as the page referencing it </li></ul><ul><ul><li><img src=&quot;mypic.jpg&quot; /> </li></ul></ul><ul><ul><li><a href=&quot;page2.htm&quot;>Page 2</a> </li></ul></ul>Attributes name=&quot;value&quot;
  6. 6. Relative References <ul><li>File, web page, or image is in a subfolder of the page referencing it </li></ul><ul><ul><li><img src=&quot;images/mypic.jpg&quot;/> </li></ul></ul><ul><ul><li><a href=&quot;project/projecthome.htm&quot;>Project Home</a> </li></ul></ul>
  7. 7. Absolute References <ul><li>File, web page, or image somewhere else on the World Wide Web </li></ul><ul><ul><li><img src=&quot;; /> </li></ul></ul><ul><ul><li><a href=&quot;;>Bentley</a> </li></ul></ul>
  8. 8. Common HTML Tags <ul><li>Headers </li></ul><ul><ul><li><h1> … </h1> through <h5> … </h5> </li></ul></ul><ul><li>Horizontal Line </li></ul><ul><ul><li><hr /> </li></ul></ul><ul><li>Paragraph </li></ul><ul><ul><li><p> </p> </li></ul></ul><ul><li>Line Break </li></ul><ul><ul><li><br> </br> (or <br/> ) </li></ul></ul><ul><li>Preformatted </li></ul><ul><ul><li><pre> </pre> </li></ul></ul><ul><li>Big Text <big> </big> </li></ul><ul><li>Bold <b> </b> </li></ul><ul><li>Emphasis <em> </em> </li></ul><ul><li>More <strong> </strong> </li></ul>
  9. 9. Lists <ul><li><ol> </li></ul><ul><li><li>Item 1</li> </li></ul><ul><li><li>Item 2</li> </li></ul><ul><li><li>Item 3</li> </li></ul><ul><li></ol> </li></ul><ul><ul><ul><li>Item 1 </li></ul></ul></ul><ul><ul><ul><li>Item 2 </li></ul></ul></ul><ul><ul><ul><li>Item 3 </li></ul></ul></ul><ul><li><ul> </li></ul><ul><li><li>Item 1</li> </li></ul><ul><li><li>Item 2</li> </li></ul><ul><li><li>Item 3</li> </li></ul><ul><li></ul> </li></ul><ul><ul><ul><li>Item 1 </li></ul></ul></ul><ul><ul><ul><li>Item 2 </li></ul></ul></ul><ul><ul><ul><li>Item 3 </li></ul></ul></ul><ul><li>Ordered (Numbered) </li></ul><ul><li>Unordered (Bulleted) </li></ul>
  10. 10. Tables <ul><li><table style=&quot;width: 100%&quot; class=&quot;style1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td>A</td> </li></ul><ul><li><td>B>td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>C</td> </li></ul><ul><li><td>D</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li>.style1 { </li></ul><ul><li>border: 1px solid #008080; </li></ul><ul><li>background-color: #CCCCFF; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul>
  11. 11. Common XHTML Style Attributes <ul><li>color </li></ul><ul><li>text-decoration </li></ul><ul><li>text-size </li></ul><ul><li>font-weight </li></ul><ul><li>font-style </li></ul><ul><li>font-family </li></ul><ul><li>font-size </li></ul><ul><li>background-color </li></ul><ul><li>background-image </li></ul><ul><li>You can string together as many attribute:value pairs as you wish in a single style. </li></ul><ul><li>Each attribute:value pair must end with a semicolon. </li></ul><ul><ul><li>style=&quot;attribute:value;attribute:value;&quot; </li></ul></ul>
  12. 12. Div and Span <ul><li>Defines logical divisions of a page </li></ul><ul><li>Lets you define a style for a particular section of a page </li></ul><ul><li>Breaks paragraphs </li></ul><ul><li>Identifies Layers </li></ul><ul><li>Changes style of the text it encloses </li></ul><ul><li>Apply the style to whatever’s in the span, but no paragraph break after </li></ul><ul><li>Example: Style a specific word to be red </li></ul><ul><li>This word is <span style=&quot;color: #FF0000;&quot;>red</span> </li></ul><ul><li>div </li></ul><ul><li>span </li></ul>
  13. 13. Deprecated Tags and Attributes in HTML 4.0: <ul><li>Tags </li></ul><ul><li>Attributes </li></ul>align=left style=&quot;text-align:left ;&quot; background=cat.jpg style=&quot;background-image: url(''); &quot; bgcolor=#FF00FF style=&quot;background-color: #FF00FF; &quot; Deprecated: Use this instead: <center> style=&quot;text-align:center; &quot; <font> … </font> style=&quot;color : #f00; &quot; <u> </u> style=&quot;text-decoration:underline; &quot;
  14. 14. Hyperlink and Image Tags <ul><li><a href=&quot;mypage.htm&quot;>My Page</a> </li></ul><ul><li>Common Attributes: </li></ul><ul><li>href </li></ul><ul><li>name </li></ul><ul><li><a name=“top”>Top</a> </li></ul><ul><li><a href=“page.html#top”>Top</a> </li></ul><ul><li>target=“_blank” (open in new window) </li></ul><ul><li><img src=&quot;picture.jpg&quot; /> </li></ul><ul><li>Common Attributes: </li></ul><ul><li>src </li></ul><ul><li>alt </li></ul><ul><li>height </li></ul><ul><li>width </li></ul><ul><li>Hyperlink (Anchor) </li></ul><ul><li>Image </li></ul>
  15. 15. Colors <ul><li>XHTML allows these 16 color names . </li></ul><ul><li>Web Safe RGB Values </li></ul><ul><li>(Older) Browser-Specific Names </li></ul><ul><li>color: #ff6600; </li></ul><ul><li>color: red; </li></ul><ul><li>color: #ff0000; </li></ul><ul><li>color: rgb(100%, 0%, 0%); </li></ul><ul><ul><li>Each RGB values ranges from 0 to 255 </li></ul></ul>
  16. 16. CSS <ul><li>In line (this tag) </li></ul><ul><li>Internal (this page) </li></ul><ul><li>External (this site) </li></ul><ul><li>To create a style sheet: </li></ul><ul><li>File  New  CSS </li></ul><ul><li>Save it as YourNameStyles.css </li></ul><ul><li>Add it to all pages in your web site </li></ul><ul><li>Add styles to the style sheet </li></ul>
  17. 17. Inline Styles <ul><li>Inline styles appear as a style attribute of the tag being styled </li></ul><ul><li>Use it once to style individual elements </li></ul><ul><li><p style=&quot;font-family: Arial Black; font-size: 20px; font-weight: bold; color: #FF0000&quot; > This is an inline style</p> </li></ul>
  18. 18. Internal Styles <ul><li>Define in the head section of the document </li></ul><ul><li>Can re-use styles within the document </li></ul><ul><li><head> <meta http-equiv=&quot;Content-Language&quot; content=&quot;en-gb&quot; /> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot; /> <title>Internal Style</title> <style type=&quot;text/css&quot;> p { font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-variant: small-caps; color: #0000FF; } </style> </head> <body> <p>This text is controlled by an internal style.</p> </li></ul><ul><li><p> Here is more text controlled by the same internal style.</p> </body> </html> </li></ul>
  19. 19. External Styles <ul><li>Style syntax is the same as inline and internal styles </li></ul><ul><li>Share styles among web pages by attaching a style sheet to each page in the web site using the link tag </li></ul><ul><li>Identify the style by its name (no style tags in the HTML document) </li></ul><ul><li><p class=&quot;cssexample&quot;> </li></ul><ul><li>StyleSheet.css : </li></ul><ul><li>.cssexample { font-family: Courier New, Courier, monospace; border-style: dashed; border-width: 1px; border-color: #FF6600; padding: 5px; background-color: #FFFFCC; } </li></ul>< link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;MarkStyles.css&quot; />
  20. 20. Styling Hyperlinks <ul><li>a:link { } a:visited { } a:hover { } a:active { } </li></ul><ul><li>Hover is useful for creating rollovers </li></ul><ul><li>Order of defining styles for links is important: </li></ul><ul><ul><li>LoVe/HAte </li></ul></ul>
  21. 21. Interactive Buttons <ul><li>Insert Interactive Button </li></ul><ul><li>Set button properties </li></ul><ul><li>Save the page. </li></ul><ul><li>Change folder for saving button images to one within your web site </li></ul>What HTML code does this generate?
  22. 22. Layers <ul><li>Any absolutely positioned page element is a layer . </li></ul><ul><li>Position is taken from top/left of browser window. </li></ul><ul><li>Layers generate a div tag </li></ul><ul><li>Design areas of the site in layers </li></ul><ul><li>Create a navigation bar layer </li></ul><ul><li>Create a content layer </li></ul><ul><li>Use layers with a dynamic web template to specify content regions to be copied to each page </li></ul><ul><li><!-- #BeginEditable &quot;contentregion&quot; --> </li></ul><ul><li><div style=&quot;position: absolute; width: 600px; height: 400px; z-index: 2; left: 136px; top: 67px&quot; id=&quot;layer2&quot;> </li></ul><ul><li>This is the main content.</div> </li></ul><ul><li><!-- #EndEditable --> </li></ul>
  23. 23. Dynamic Web Templates/ Editable Regions <ul><li>Use a DWT to specify an overall Web-site design. </li></ul><ul><li>When you edit individual pages, you can modify regions designated on the template as editable. </li></ul><ul><li>Create a Dynamic Web Template. </li></ul><ul><li>Attach the template to individual web pages in your site. </li></ul><ul><li>Match regions (i.e., body tag to a content region) </li></ul><ul><li>EW will ask you if you want to update pages in the site when your template changes. </li></ul>