html expression web
TRANSCRIPT
(X)HTML WITH EXPRESSION WEBMark FrydenbergTechnology 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="pic.jpg" /><a href="page2.htm">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="mypic.jpg" />
<a href="page2.htm">Page 2</a>
Attributesname="value"
Relative References
File, web page, or image is in a subfolder of the page referencing it
<img src="images/mypic.jpg"/>
<a href="project/projecthome.htm">Project Home</a>
Absolute References
File, web page, or image somewhere else on the World Wide Web
<img src="http://www.catfacts.org/cat-facts.jpg" />
<a href="http://www.bentley.edu">Bentley</a>
Common HTML Tags
Headers<h1> … </h1> through
<h5> … </h5> Horizontal Line
<hr /> Paragraph
<p> </p> Line Break
<br> </br> (or <br/> )
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>
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>
1. Item 12. Item 23. 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="width: 100%" class="style1"><tr>
<td>A</td><td>B>td>
</tr><tr>
<td>C</td><td>D</td>
</tr></table>
<table style="width: 100%" class="style1"><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>
.style1 { border: 1px solid #008080; background-color: #CCCCFF;}</style>
Common XHTML Style Attributes
color text-decoration text-size font-weight font-style
color text-decoration text-size font-weight font-style
font-family font-size background-color background-image
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="attribute:value;attribute:value;"
• 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="attribute:value;attribute:value;"
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 redThis word is <span style="color: #FF0000;">red</span>
divdiv spanspan
Deprecated Tags and Attributes in HTML 4.0: Tags
Attributesalign=left style="text-align:left ;"
background=cat.jpg style="background-image: url('http://www.catfacts.org/cat-picture.jpg'); "
bgcolor=#FF00FF style="background-color: #FF00FF; "
Deprecated: Use this instead:
<center> style="text-align:center; "
<font> … </font> style="color : #f00; "
<u> </u> style="text-decoration:underline; "
Hyperlink and Image Tags
<a href="mypage.htm">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)
<a href="mypage.htm">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="picture.jpg" />
Common Attributes: src alt height width
<img src="picture.jpg" />
Common Attributes: src alt height width
Hyperlink (Anchor) Image
Colors
XHTML allows these 16 color names.
Web Safe RGB Values
(Older) Browser-Specific Names
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
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
Inline styles appear as a style attribute of the tag being styled
Use it once to style individual elements
<p style="font-family: Arial Black; font-size: 20px; font-weight: bold; color: #FF0000">This is an inline style</p>
<p style="font-family: Arial Black; font-size: 20px; font-weight: bold; color: #FF0000">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="Content-Language" content="en-gb" /><meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /><title>Internal Style</title><style type="text/css">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)
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="cssexample">
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="stylesheet" type="text/css" href="MarkStyles.css" />
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
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 "contentregion" --> <div style="position: absolute; width: 600px; height: 400px; z-
index: 2; left: 136px; top: 67px" id="layer2"> 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.