Html Expression Web

  • 5,346 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,346
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
80
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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