CGS 2820C Web Development
Continue your Expression Web page, from Chapters 5 & 6 in Expression Web 2 Text: Inline, Internal & External Styles
Notes from Chapter 5: Tags and the Expression Web Tag Editor
You can check for compatibility issues based on, HTML, CSS and DTD (Doc Type Declaration):
P98 Task Panes | Compatibility (or Accessibility or CSS Reports) then click Generate Reports icon on bottom.
P102 Intellisense gives you context sensitive help as your write your code in code view. For instance, start typing a tag, such as <p then tap the space bar to see a list of possible attributes that you can point to and quickly select.
P104 You can add existing Snippets of code (such as quickly building meta keywords), by selecting a blank area in code view and tapping [Ctrl] + [Enter]. You can also create your own snippets. For instance, there are two built-in snippet examples for Meta tags and linking CSS files.
P106 In the lab, please display code Line Numbers: Tools | Pane Editor Options | General | check Line Numbers
P111 Quick Tag Editor: For instance, to edit a hyperlink, click on the <a> in the gray bar at the top of the Design Window, click the small dropdown arrow that appears to the right of the tag, and choose Properties, or choose Select Tag Contents.
Notes from Chapter 6: Styles- define tag and class properties to consistently display Web page content
There are 3 types of Selectors used with styles. In css they use this syntax: Selector: {Property: Value}
Examples: body {width: 780px} or .important {color: red} or #masthead {background-color: #99FFCC}
1. Existing HTML tags. Examples: <body> or <h1> or <p>
2. Class Selectors or custom defined styles in a style sheet. They start with a period (.) Examples: .title or .important.
In the the actual HTML code they can be called in the following manner: <p class="important">Notes:</p>
3. ID Selectors which are used in a style sheet to define a division on a page. They start with a #, for example: #Nav or #masthead or #leftColumn
In the the actual HTML code they can be called in the following manner: <div id="masthead"> or <div id="Nav">
P121 To keep Expression Web from automatically creating .style1 and .style2... every time you format some text:
Tools | Page Editor Options | CSS tab, uncheck "Auto Style Application"
P125 Apply Styles panel: Click to apply; or to see a Style's rules - hold your cursor over the style's name
For sample Style Sheets with tutorials see:
Quick CSS Tutorial and Samples that you can copy
CSS Navigation Styles
Expression Web Style Layout using CSS and Div tags
Zen Garden CSS demos - click links on right to keep text but change CSS
Ex: <!-- Created by Floyd Winters on 08/01/09 -->
Add a second relevant comment later in the page to describe a section or explain why some code was added
<p style="font-weight: bold; color: #0000FF"> Notes</p>
or
Very <span style="font-weight: bold; color: red"> important</span>
P116 For the purposes of this assignment, on your index.htm page, add an Internal Style Sheet within the <head> tags to
1. Modify 2 existing tags, such as <body>, <h1>, <p>
2. Define 2 custom classes (they start with a .), such as .title, .subtitle, .important
3, Define 2 ID selectors (start with #),
such as #masthead, #nav, #container
Style names like Style1 and Style2 are not acceptable. (In Expression Web, right-click on the style name in the Apply Styles panel and rename it to a descriptive name.)
For a demo to see exactly how this works, you can copy and paste the <head> code with the internal style sheet at the right directly into <head> of a new page.
I suggest you first create a new page called junk.htm and practice on the junk page first. But in the end turn in a real and attractive project.
<head>
<title>Style Demo</title>
<style type="text/css">
body {width: 780px; margin-left: auto; margin-right: auto;}
h1 { font-family: Arial, Helvetica, sans-serif; color: #0000FF;}
.title { font-size:32px; font-weight: bold; color: purple;}
#masthead {background-color: #99FFCC; border-color: blue; text-align: center; border-style: ridge;}
#container {background-color: #FFFFCC; border-color: blue; border-style: ridge;}
#footer {background-color: #99FFCC; border-color: blue; text-align: center; border-style: ridge;}
</style>
</head>
You will have at least 6 selectors created or modified
2 Classes: 10
2 IDs: 10
1. The modified existing tags
2. The newly created custom classes
3. The ID selectors in a <div> tag
For a demo to see exactly how this works, you can copy and paste the <body> code at the right directly in the <body> of a new page.
<body>
<div id="masthead">
<h1>My Styles Demo</h1>
</div>
<div id="container">
<p class="title">Chapter 1</p>
<p>This is an introduction to HTML...</p>
</div>
<div id="footer">
Email me at
<a href="mailto:MyName@myDomain.com">
MyName@myDomain.com</a>
</div>
</body>
2 Classes: 10
2 IDs: 10
1. Create a new blank style sheet. Name it something like siteNameStyles.css
2. Copy your index.htm page and name the copy CssDemo.htm
3. Copy and Cut all the style code from your CssDemo.htm internal style sheet.
4. Paste all the copied style code from your internal style sheet into the new siteNameStyles.css page
5. Link the siteNameStyles.css page to the CssDemo.htm page
6. Add the appropriate ID, class, and Div attributes and code to use every selector defined in the external siteNameStyles.css page.
2. Copy index.htm and name the copy CssDemo.htm
3a. In CssDemo.htm, Select, Copy and Cut all the code between the <style type="text/css"> and </style> tags
3b. Then delete the <style type="text/css"> and </style> tags
4. Paste all of the copied styles code into the blank siteNameStyles.css file and then save it.
5. Open CssDemo.htm. and between the <head> tags, just under the <title> tag, add the following line of code to link to the siteNameStyles.css file.
<link href="siteNameStyles.css" rel="stylesheet" type="text/css />
6. Following the directions and patterns above, and use each selector defined in the external siteNameStyles.css page.
link to css: 10
1. hover over a style to see its properties
2. right-click a style and choose Modify Style to quickly and easily modify a style
3. highlight some text from your Web page in Design view, then simply click on a style in the Apply Styles task pane to apply it to the selected text.
Upload the URL to the SCF Angel online site.