Html Expression Web
Upcoming SlideShare
Loading in...5
×
 

Html Expression Web

on

  • 7,590 views

 

Statistics

Views

Total Views
7,590
Views on SlideShare
7,456
Embed Views
134

Actions

Likes
1
Downloads
78
Comments
0

5 Embeds 134

http://cis.bentley.edu 113
http://www.slideshare.net 14
http://s08it101x.blogspot.com 5
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html Expression Web Html Expression Web Presentation Transcript

  • (X)HTML WITH EXPRESSION WEB Mark Frydenberg Technology Intensive IT 101, Bentley College
  • 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
  • Microsoft Expression Web
    • Microsoft ® Expression ® Web is a professional design tool to create modern, standards-based sites that deliver superior quality on the Web.
  • 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
  • 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;
  • 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>
  • 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>
  • 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>
  • 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)
  • 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>
  • 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;
  • 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
  • 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;
  • 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
  • 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
  • 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
  • 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>
  • 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>
  • 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; />
  • 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
  • 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?
  • 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 -->
  • 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.