External Style Sheets and Linking Pages…. Notes... · Web viewembedded style information to an...
13
Exasper3.doc rev 02/05/2013 External Style Sheets and Linking Pages…. External CSS Let’s save the NE.htm embedded style information to an external file and link to it from NE.htm and NE_Contact.htm NE_Contact.htm is very bland right now. Could re-enter the styles from NE_htm…not good idea Instead we will copy the styles from NE.htm, and move them to an external . css file and then link both pages to the new style sheet file Start Dreamweaver and select your site, if necessary Moving the existing styles to an external file Open NE.htm Find the CSS Styles panel on the right Open it Select first style, (body) and then shift-click on last one: Exasper 3 Page 1
Transcript of External Style Sheets and Linking Pages…. Notes... · Web viewembedded style information to an...
Exasper3.doc rev 02/05/2013
External Style Sheets and Linking Pages….
External CSSLet’s save the NE.htm embedded style information to an external file and link to it from NE.htm and NE_Contact.htm
NE_Contact.htm is very bland right now. Could re-enter the styles from NE_htm…not good idea
Instead we will copy the styles from NE.htm, and move them to an external . css file and then link both pages to the new style sheet file
Start Dreamweaver and select your site, if necessary
Moving the existing styles to an external file Open NE.htm Find the CSS Styles panel on the right Open it Select first style, (body) and then shift-click on last one:
Right-click>Move CSS Rules
Exasper 3 Page 1
Choose A new style sheet:
Click OK Browse to your exasper folder Name the CSS file as Exasper .css automatically appended:
You might get this:
Exasper 3 Page 2
If so, click Yes
Look at your exasper folder now:
See exasper.css? That’s the collection of CSS rules we just saved
open it, and you can see the actual rules Now, switch to NE_Contact page
Exasper 3 Page 3
Let’s link that NE_Contact page to the new stylesheet file
OOPs, Slight Problem: Had a div tag in NE.htmNeed to create one here also,
Click anywhere inside NE_Contact.htm Click <body> tag selector to select the entire body
Exasper 3 Page 4
Now select Insert>Layout Object>Div Tag
o Recall this makes a box inside the <body> of the document Type content in the ID box:
Click OK Now, enter a background color to the div
Exasper 3 Page 5
Select it and enter #D0E5E5 Click on the Div
Need to attach the CSS file .
Browse to your exasper.css file Select it, and click the link option
Look at the changes!
Make line 1 a <h1> , modify the <h1 >box style to be 2em in size, mine was 3em)
Exasper 3 Page 6
OOPs, no Banner: Want to Insert the banner at the top Want the banner to be inside the light-colored area Position the cursor at the beginning of the word “Our” Insert>Image>Banner.gif
Select it Choose class bannerimage:
Exasper 3 Page 7
If necessary, drag the banner inside the top area: Mine was OK
Linking the Pages… Want to:Link NE.htm to NE_Contact.htm and back to index.htm
And Link NE_Contact to NE.htm
Switch to NE.htm page so we can link it to NE_Contact.htm Scroll to bottom of NE.htm
Type View our privacy policy after the Advertising Bureau line:
Exasper 3 Page 8
Select the new text In the Properties panel, find “Link” box and browse or point to
NE_Contact.htm
Result:
F12 to test
Takes you to the privacy page
Exasper 3 Page 9
Switch back to NE.htm Add the word “Home” below the copyright line Select the word and link to index.htm (The jma260 root. ). Here is my Link box:
Note the two ../
We are in exasper, one level up is Practice, index another level up
Now we need to link the NE_Contact.htm page back to the NE.htm page
Use the banner as the link
Select the banner In the Link box, point to, or browse to, NE.htm
Save and test
Exasper 3 Page 10
Depending on how you set up your site, you may need to FTP everything
Can do so from Files Panel, or can FTP the current page from the Document page itself
Let’s FTP the entire exasper folder (Note, actually don’t need to because we made testing server being same as main server (site definitions)
Select the folder in the Files panel Click the up arrow
Be sure to FTP your styles sheet
Link your portfolio page (index.htm) to NE.htm
Open index.htm (in JMA260 folder) Add a new line that says “Exasperator” Select the text, and in the Link box, drag or browse to
Practice/Exasper/NE.htm ( Your folder names may be different)
Exasper 3 Page 11
Test by using http to go to your index page
Here was my actual URL to ne:
www.jma.duq.edu/users/webtest/pub/jma260/practice/exasper/ne.htm
END
Exasper 3 Page 12
