CGS 2820C Web Development
Continue your Expression Web page, from Chapters 7 and 8: Cascading Style Sheets with Menu Navigation and DWT
In Chapter 8 you will set up a Dynamic Web Template (DWT), similar to the one used to create this Grading Criteria Web page. When you are done you can choose either the linked Style Sheet from Chapter 7 or the DWT from Chapter 8 as the main basis for your index.htm page, and at that point you should have a nearly finished index page complete with Menu Navigation.
Note: Dynamic Web Templates are easy to use if you want to create new pages from a template, and if you make a change to the DWT it will prompt you to update all files based on the template. But then you may have to upload numerous files, even though you only made one small change. Consequently, I do not recommend DTW templates for larger sites.
In the end of this assignment you will either link all of your pages to your External Cascading Style Sheet (recommended) OR to your DTW that uses a CSS and is the basis of index.htm and portfolio.htm. Either way you will also have a common Menu Navigation to index.htm, portfolio.htm, and resume.htm and yourSiteNameLayout.css.
Remember are 3 types of Selectors used with styles:
Existing HTML tags, Class Selectors to define custom styles, and ID Selectors to define a division on a page. The external Cascading Style Sheet created in this project will primarily define ID selectors. The Web page that links to the Cascading Style Sheet will use <div> tags with the IDs defined in the CSS for its page layout.
Notes from Chapter 7: CSS Layouts- One Cascading Style Sheet to define the layout of your entire site
P144 You can further modify Selectors by adding Pseudo-Elements. For example:
Selector: Pseudo-Element {Property: Value}
a {color: blue; background-color: white;}
a:hover {color: white; background-color: blue;}
OR
p:first-letter {font-weight: bold; font-family: "Copperplate Gothic Bold"}
P158 Positioning
Absolute positioning: places content relative to the upper-left corner
Relative positioning: relative to current block
Fixed positioning: places content block relative to the upper-left corner; allows background images to stay fixed as page scrolls.
P159 Sizes
px: (pixel) the default size. Ex: width: 780px; or padding: 4px; or border: 2px;
em: (size of the capital letter M) provides better relative spacing. Ex: padding: 0.5em;
pt: (points) There are 72 points to an inch. A typical font size is 12pt, a heading may be 24pt.
%: (percent) Ex: width: 80%;
Notes from Chapter 8: Dynamic Web Template (DWT)- A template file used to easily and consistently set up each page. Metadata is used to manage interpage relationships to automatically update links and content as linked pages are changed. So make sure your metadata is set to on if you are going to use a Dynamic Web Template or Menu Navigation system:
Site | Site Settings | General tab | check Manage the Website using hidden metadata files.
For sample Style Sheets with tutorials see:
Expression Web Style Layout: CSS and Div tags
Quick CSS Tutorial and Samples that you can copy
CSS Navigation Styles
Zen Garden CSS demos - click links on right to keep text but change CSS
For sample Dynamic Web Templates (DWT) see:
(Be careful - some templates are very hard to modify!!! So stick with DWT templates that you can control.)
http://by-expression.com/samples
http://www.frewebsitetemplates.com/forum
File | New | Page | Style Sheets to create only a Style Sheet and then later link it to your Web pages. If you choose this technique - follow Chapter 7 page by page.
OR
P154 You can create both a linked Style Sheet and a Web page in one step and follow the directions to the right - this is more powerful and in the end easier.
File | New | Page | CSS Layouts then choose your layout, such as [Header, Top Nav, 2 columns, footer] then click [OK].
Two files will be automatically created and linked as a result: Untitled_1.htm and Untitled_1.css.
If you choose this technique - follow the directions in this column or click the link below for live CSS <div> directions:
Expression Web Layout using CSS and Div tags
point values
shown below
File | New | Page | CSS Layouts
Once you are done with your css tag selectors, classes and IDs, you can open the Apply Styles task pane and
1. hover over a style to see its properties
2. right-click a style and choose modify to quickly and easily modify a style
3. double-click some Web page text in Design view, then simply click on a style in the Styles task pane to apply it to the selected text.
Click the link below to see real how-to css samples:
../ExpressionSiteDemo/cssCode.htm
Making changes to Untitled_1.css will change the appearance of Untitled_1.htm.
Click the link below to see the real code for the html file:
../ExpressionSiteDemo/htmlCode.htm
SAVE Untitled_1.htm as index.htm and Expression Web will prompt you to save the associated Untitled_1.css file.
I suggest the file name: yourSiteNameLayout.css.
As the .css file is saved, Expression Web will automatically link the .css file to the index.htm file.
In this case, the line below:
<link href="siteLayout.css" rel="stylesheet" type="text/css" /> was automatically added to the <head> tag of index.htm.
a:hover {color: white; background-color: blue;}
The line above will make hyperlinks change colors when you hover over them.
1. In the top banner/masthead/header
OR
2. On your page for the body.
Depending on the size of the image, you may need the add the following code to your selector:
background-repeat:no-repeat;
#masthead {background-image: url('images/MastHeadWinchester.jpg') }
Example 1 in html page:
<div id="masthead">
<!-- All masthead content comes from .css -->
</div>
OR
Example 2:
body {background-image: url('0ClassFolders/2820Web/images/bg2820Image.jpg')}
.box {border-color:blue; border-style:ridge;
padding-left: 10px; padding-right: 10px;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif}
ul {list-style-image: url(images/point.gif)}
li {color:blue; padding-left:.5em;}
The padding-left:.5em; property puts space between the image and list items.
Whether you use Rollover images or CSS, make sure your Navigation changes when you hover over each Menu selection. Change either the image, text color, background color...
If you use the book sample, instead of the book samples of a.bakery or a.biz, use a.nav. OR
You can modify the css ID selector and the html <div> tag shown at the right.
When done add your Cascading Style Sheet and your common Menu Navigation to index.htm, portfolio.htm and (resume.htm - you do not have to add the CSS to resume.htm because it was built in Word).
For more samples of CSS navigation that you can use (such as css buttons) see: CSS_Nav_Demo.htm
CSS_NavDemoChangeable.htm
In your CSS file:
#HNav {width:500px; text-align:center;
color:white; background-color: #003366;
padding-top:0.5em; padding-bottom:0.5em}
In your HTML file:
<!-- Begin Horizontal #Nav -->
<div id="HNav">
<a href="index.htm">Home</a> |
<a href="portfolio.htm">Portfolio</a> |
<a href="resume.htm">Resume</a> |
</div>
<!-- End Horizontal Nav -->
Consider cleaning the HTML of your Word Resume into a file that can link to your Cascading Style sheet. Both Dreamweaver and Expression Web have options to clean up Word Web pages.
In Dreamweaver: Commands | Clean up Word HTML
In Expression Web: Tools | Optimize HTML | Remove Generated HTML | Work HTML
Make sure there are no unused Classes or IDs in your Cascading Style sheet. Also make sure there are no instances of "Missmatched Cases" - Unix servers are case sensitive.
2. Click Task Panes | CSS Reports to open Reports window at bottom of page
3. Click the green menu arrow > in the upper-left corner of pane
4. On the Errors tab, check "Current page" and click the [Check] button
Upload your Web site URL to the [Assignment Dropbox] as usual.
P169 Set your editable regions in your template file - this will only allow the Web weaver the ability to change the sections marked as Editable.
Make sure you link a CSS file to your Dynamic Web Template (DWT) file.
Also make sure your DWT file has Menu Navigation.
If you make changes to the non-editable portions of the DWT, those changes can automatically be applied to all the files created from the DWT.
In this case I created a DWT called GradingCriteriaTemplate.dwt. All the assignments for this course are based off of this template.
1. Set up your Web site (folder)
2. Create your Dynamic Web Template (.dwt)
3. Create files from the Dynamic Template
1. In order for a Dynamic Web Template to work in Expression Web, you must first set up your Web site in Expression Web:
A. File | Open site and point to your existing Web site folder.
B. To further set up a site, choose a file to upload in the Folder List or from the Site View tab. Right-click on the file and choose Publish Selected Files
C. Enter the FTP URL in the Remote Website Location textbox and click OK. Then enter the User name and Password when prompted.
2. Once your Web site is set up your Dynamic Templates will work:
File | New | Page Dynamic Web Template
When using a page created from a DWT, in code view, non-editable regions are clearly demarcated by a light yellow color. Non-editable is the default for almost an entire new DTW page (with the exceptions of small areas inside the <title> and <body> tags) until other regions are set as a Editable. In code view you can see this as:
<!-- #EndEditable -->
OR
See GradingCriteriaTemplate.dwt and
GradingCriteriaLayout.css in the Grading Criteria folder for this course.
a. File | New | Page | Create from Dynamic Web Template or
b. Format | Dynamic Web Template | Attach DWT or
c. Copy an existing file created from an DWT and save it with a new name.
When the DTW is changed, those changes are automatically applied to the linked files.
When created correctly, the following line will automatically be inserted in the line following the <html> tag for a file based on a Dynamic Web Template:
<!-- #BeginTemplate "TemplateName.dwt" -->
Upload the DWT file to the Angel [Assignment Dropbox]
(X=across; Y=down; Z=depth)
I suggest you first create a new page called junk.htm and practice on this page first.
2a. Click the Draw icon on the Layers pane, then position the mouse over the HTML page and draw the layer. This will be called Layer1 with a Z-index of 1.
2b. Click inside Layer1 and Insert | Picture... then grab the sizing handles to resize your layer to fit the picture.
3a. Click the Draw icon on the Layers pane, then position the mouse overlapping part of Layer1 and draw Layer2. This will be called Layer2 with a Z-index of 2.
3b. Click inside Layer2 and Insert | Picture... then grab the sizing handles to resize your layer to fit the picture.
images [Dir]
favicon.ico
index.htm
portfolio.htm
resume.htm
yourSiteNameLayout.css
Upload the URL to the SCF Angel online site.