Dreamweaver and CSS II
I.
Review ................................................................................................................................... 1
II.
Define a Site with Host Information ..................................................................................... 1
III.
Introduction to CSS ............................................................................................................... 2
IV.
Tables ..................................................................................................................................... 9
V.
Going Live ............................................................................................................................ 10
VI.
Q & A .................................................................................................................................... 11
I. Review
a.
b.
c.
d.
e.
f.
g.
h.
Terms
Warnings
Interface
Defining a Site
Creating a New Page
Adding Page Elements
Previewing
Publishing your Web site
II. Define a Site with Host Information
During the Dreamweaver I course we created and defined a local site and discussed
the importance of having a defined site for file management purposes. At the end of
this course we will post the pages we create to the SFSU Web space. Therefore, for
this course, we need to define our local site and add our host/publishing information
to the site definition.
a. Download the course files
1. The zipped file, wild_apple contains all the files for this course and can be
downloaded at: www.sfsu.edu/~training/coursefiles/Dreamweaver
2. Once downloaded, unzip the file and extract the folder called wild_apple and
its contents to your desktop.
b. Define the site
1. Open Dreamweaver.
2. On the Welcome screen under the Create New section select Dreamweaver
Site.
1
3. Select the Advanced tab (the Basic tab allows you to set the same
information but uses a series of questions to help you if you get stuck).
4. Give your site a name – This name will only exist in Dreamweaver. It is used
to differentiate between multiple sites you may have defined.
5. Select the folder icon to the far right of Local Root Folder.
6. Navigate to the wild_apple folder you placed on your desktop and select it as
your Local Root. (Windows users will need to open the folder before it will be
possible to select it.)
7. Use the same steps to set the images folder located inside the wild_apple
folder as your default images folder.
8. Leave the ‘Links relative to’ field with the default option of Document –
Remember; this is important for the path structure.
9. In the HTTP Address field enter http://userwww.sfsu.edu/~acctname
(replace acctname with your e-mail account name).
10. In the Category column select Remote Info.
11. The Access type for the SFSU servers is FTP. Select this from the drop-down
menu labeled Access. If you are using another host the access type may be
different. You will need to contact your host to determine your access type
and any other necessary settings.
12. Enter the following host information:
i.
FTP host: apollo.sfsu.edu
ii.
Host directory: public_html
iii. Login: your e-mail login (i.e. if your e-mail is janedoe@sfsu.edu your
log-in name is janedoe).
iv. Password: your e-mail password.
13. Select the check-box for Use Secure FTP (SFTP).
14. Click the Test button to verify that you have entered all the information
correctly. You should receive a conformation message stating that
Dreamweaver was able to connect – if not, correct your information.
15. Uncheck the box marked Save next to the password field. Unless this box is
unchecked Dreamweaver will save your password and, because
Dreamweaver does not require a password to log in, it will be available to
anyone who accesses the program.
16. Click OK.
III. Introduction to CSS
Cascading Style Sheets or CSS was briefly mentioned in the Dreamweaver I course.
We are going to examine it further and use it to add layout (formatting) to our
content.
2
a. Background
The Internet, HTML and their accompanying components were originally
designed for scientific purposes and the communication of data. They were not
created as design elements and were not intended to extend into the vast
informational system they have become. As a result, in the days before CSS,
designers who wished to add design elements to a Web page had to use basic
data components to create design as well as display content. Most Web pages,
including many still in use today, contained tables, images and characters used
not as data but as formatting elements, added to a page solely for the purpose
of making it look ‘good’. While the designers are to be commended on their
creativity in using data elements to create some amazing designs the pages often
have some real problems in today’s Web economy. Accessibility is a huge issue
and many of these pages make little to no sense to someone trying to access
them with a screen reader or mobile device. Large sites designed this way are
often unwieldy to manage and update.
The solution to these issues was the innovation of CSS. CSS allows the data and
design to be completely separate. This separation can improve content
accessibility, provide more flexibility and control in the specification of
presentation characteristics, and reduce complexity and repetition in the
structural content. CSS can also allow the same markup page to be presented in
different styles for different rendering methods, such as on-screen, in print, by
voice, etc.
CSS can be used to create formatting in two ways, Internal and External. Internal
CSS is located in the HTML code of an individual document. It is used solely by
the document within which it is located. External CSS involves having a
document that contains only CSS Rules. Web page that needs the rules can then
be linked to the CSS document. By linking to the CSS document changes or
updates to the format can be completed on multiple Web pages by making
changes in the single CSS file.
b. Create CSS Ready HTML
1. Set up your workspace
i.
Using your Web browser, go to:
http://userwww.sfsu.edu/~training/apples/. This site consists of
four pages all about apples. Browse around and see what is
there…
3
ii.
iii.
iv.
Back in Dreamweaver open apples.html, links.html and pie.html
from the wild_apple root folder. Notice how these pages contain
all of the data but none of the formatting from the site you were
just looking at.
Right click on your root folder and select New File.
Rename the file to index.html. This will be the Home page for our
site and we will build our internal CSS here before moving it to
external.
Open the index.html file and add a Page Title.
v.
2. Div Tags
When looking at the unfinished apple, links, and pie pages you probably
noticed a number of ‘boxes’ marked by dashed lines. Each of these boxes is
the outline of a Div tag. A Div tag defines a division or section on a Web
page. It can be used to create groups of elements that can be formatted as a
group. The Div tags themselves will not be visible when viewing the page in a
browser.
i. Create ‘content’ Div Tag
a. With the cursor at the beginning of your document, select the
Layout tab/dropdown from the Insert bar and click the Insert Div
Tag button.
b. In the Insert Div Tag window set the Insert field to ‘At insertion
point’.
c. Leave the class field blank - classes are used for elements that will
have multiple occurrences on a page.
d. Type ‘content’ in the ID field - IDs are used for unique elements
on a page. (Technically, you can name a Div anything you wish as
long as there are no spaces, special characters and the name does
not start with a number. However, for this course, the other
pages of this site have already been created and we need to
match their Div structure so using the same ID names will be
important.)
e. Click OK and a Div with a default line of text will appear.
ii. Create ‘header’ Div Tag
a. Place the insertion point at the end of the text of the ‘content’ Div
tag.
b. Click the Insert Div Tab button and give it the ID of ‘header’.
c. Leave the Insert field set to ‘At insertion point’.
d. Click OK.
4
iii. Create ‘text’ Div Tag
a. Place the insertion point at the end of the text of the ‘header’ Div
tag.
b. Set the Insert field to ‘After Tag’ and select the <Div id=”header”>
tag from the drop-down box.
c. Type ‘text’ in the ID field.
iv. Create ‘sidebar’ and ‘footer’ Div Tags
a. Use the previous steps to create two more Div tags named
‘sidebar’ and ‘footer’ that appear one after the other.
3. Add Page Content
i. Delete the text ‘Content for id “content” Goes Here’ in the first Div.
a. This Div will act as a container for all of our other Div tags but will
not contain any individual data.
ii. Insert the the_wild_apple.jpg image in the header
a. Place your cursor after the text ‘Content for id “header” Goes
Here’ in the second Div.
b. Change the Insert panel to the Common tab/dropdown.
c. Click the Images button, select Image and insert the image,
the_wild_apple.jpg from the images folder.
d. Enter a name or brief description in the Alternate text field!
e. Delete the ‘Content for id “header” Goes Here’ text.
iii. Copy file content from Contents.txt file to the index.html document.
a. Using the File Panel, expand the folder called assets and double
click on the file Contents.txt to open it. This file contains all the
text for the index page.
b. Use copy and paste to replace the default text in the text and
footer Div tags on the index.html document with the text from
the corresponding sections of the Contents.txt file.
c. Skip the DATA TABLE section – we will work with that later.
iv. Establish settings for the text, Apples
a. Highlight the word Apples in the text Div and use the Properties
Panel to set it as type H1 (Header 1).
v. Change the Insert bar to the Text tab/dropdown.
vi. Enter the bullet list in the sidebar Div
a. Erase the default text in the sidebar Div, but make sure to leave
the insertion point in the Div.
b. Click the ul (unordered list) button on the Insert panel.
5
c. Type the following three list items making sure to press
Enter/return key between items: Types of Apples, Apple Pie,
Links.
vii. Modify each line you just added to be links to your site’s other pages:
a. Change the Insert bar to the Common tab/dropdown.
b. Highlight the text and click the Hyperlink button on the Insert bar.
c. Click the Folder button next to the Link field.
d. Select the apple.html, links.html or pie.html file from your root
folder as appropriate.
e. Add a Title and click OK.
c. Create CSS Rules
1. Add Internal CSS
i. Set styles that affect the entire page we are working on
a. Click the Page Properties button on the Properties Inspector.
b. Under the Appearance Category, establish the following settings
 Page font: Arial, Helvetica, sans-serif
 Size: small
 Text color: #990000
 Background color: black
c. Under the Links category, establish the following settings
 Link color: #006600
 Visited links: #666600
 Underline style: Hide underline on rollover
d. Under the Headings category, establish the following settings
 Heading 1: font color #009900
f. Click OK.
ii. Establish CSS Rules
a. Expand the CSS Panel group and make sure the CSS Styles tab and
All button are selected. You should see a tag labeled <style> that
has information on all of the CSS rules we have already created
through Page Properties.
b. Click on the New CSS Rule button at the bottom of the panel.
c. Select the Advanced Selector Type radio button
 We will now work on the CSS for the individual Div tags we
created earlier.
d. Set the style for the content Div.
1. Enter #content in the Selector field (Dreamweaver tries to
fill this field in automatically but the values it provides are
generally not correct).
6
ii.
iii.
iv.
v.
vi.
vii.
viii.
ix.
2. Leave the Define In field set to This Document Only – we
will change this once we have an external style sheet.
3. Click OK.
4. You should now have a CSS Rule definition for #content
window, where you can set all of the standard elements
for the Div.
5. Select Background from the Category list, establish the
following settings:
 Background color: #DCEAF5 (this is the light blue
color from the logo image)
6. Select Box from the Category list.
 Width: 720 pixels (the exact size of our logo image).
This will cause all of the Div tags inside the content
Div to also change size (this is, in part, where the
‘cascading’ in CSS comes from).
Because we want our content to float in the middle of the browser
window rather than be aligned to the left, uncheck the ‘Same for all’
box under Margin and enter 0 pixels for the Top and Bottom. Then
select auto from the drop-down menu for the Right and Left.
Click OK.
Click on the New CSS Rule button at the bottom of the CSS panel.
Using the same steps as above but with Selector #text create the
following CSS Rule for the text Div:
a.
Border Right Style: Solid Width: 5px Color: #990000
b.
Box Float: left
c.
Box Margin Left: 10px
d.
Box Padding Bottom: 0px
e.
Box Padding Right: 10px
f.
Box Width: 555px
g.
Block Text-align: justify
Click on the New CSS Rule button at the bottom of the panel.
Using the same steps as above but with Selector #sidebar create the
following CSS Rule for the sidebar Div:
a. Box Width: 130px
b. Box Float: left
Click on the New CSS Rule button at the bottom of the panel.
Using the same steps as above but with Selector #footer create the
following CSS Rule for the footer Div:
7
a. Box Width: 720
b. Clear: left
c. Padding Top: 0px
2. Create External Style Sheet
The format of the page we are creating should now look very similar to the
live version we visited at the beginning of this course. But all of the styles we
created are only valid for this document. What happens when we want to
apply the same styles to another page?
a. View the Code Dreamweaver has Created.
i. Select the Code View button on the Document Window.
ii. Scroll almost to the top and stop when you see the tag <style
type="text/css">. Everything between this tag and the closing
</style> tag is the CSS code Dreamweaver has created for you.
We have two options for adding this code to another Web page. We can
copy and paste it into the other page… If we do this every time we wish to
make a change we will have to change it on every page where it is located. Or
we can create an external style sheet and link all the pages to it.
b. Create a Style Sheet
i. In the CSS panel select the first item under the <style> tag (it should
be body,td,th but may be different if you have had to go back and
correct any of your work).
ii. While holding the shift key select the last item under the <style> tag
(it should be #footer).
iii. Right click on one of the now selected items and select ‘Move CSS
Rules’ from the popup menu.
iv. In the Move To External Style Sheet window select A new style
sheet and click OK.
v. Save the document as styles.css under the assets folder located in
the site root folder.
vi. Back in your Document Window you should now see that the code
between the two <style> tags has disappeared and, just below, a
<link> tag has appeared pointing to your styles.css document. In the
CSS panel a new entry titled styles.css has been added with all of
your styles listed under it.
vii. Also, a new document tab exists in the document window with the
name styles.css.
viii. Switch back to the Design View.
c. Connect a Style Sheet to an Existing Web Page.
8
i.
Select the tab for the apple, links or pie page in the Document
Window.
ii. Click the Attach Style Sheet button from the bottom of the CSS
Styles panel.
iii. Click the Browse button and select the styles.css file from your
assets folder.
iv. Leave the Add as type as ‘Link’ (selecting Import would copy the
CSS into the local document rather than linking too it).
v. Click OK.
vi. Do the same for the other two HTML files.
vii. Select File > Save All.
3. Add External CSS
a. Preview your pages in a browser. On the live site we looked at previously
the footer consisted of centered, red text on a black background. Notice
how our background is currently blue and the text is justified left.
b. In Dreamweaver, click on the New CSS Rule button at the bottom of the
CSS panel.
c. Use the same Advanced Selector Type as our previous examples and set
the Selector to #footer.
d. Select the Define in radio button with styles.css displayed. Click OK.
e. Set the Background Color to Black and Block Text Align to Center.
f. Click OK.
g. Look through your pages and notice how the footer is now black and
centered on all 4 pages – yet you only changed the setting in one place.
h. Using the Files panel open your styles.css file.
i. Scroll to the bottom and notice how you have two selectors with name
#footer. If these selectors had conflicting information (i.e. the top one
said Width 720px but the bottom one said Width 500px) the bottom one
would take precedence. This comes from the cascading functionality of
the style sheet. Whichever selector is ‘closer’ to the code will be the one
that is active. The ability to have a selector twice in the CSS can be both
helpful and problematic so take care when choosing to create a new CSS
Rule or edit an existing one.
j. Save and close styles.css.
IV. Tables
Tables are a significant issue when creating accessible Web pages. You have now
seen how to do basic formatting using CSS so you should not need to use a table for
9
formatting but how do you add a table that displays data in a format that is
accessible?
a. Select your index.html page in the Document Window if you are not already
there.
b. Add a line or two below the text but still within the text Div.
c. Select the Common tab/dropdown from the Insert Palette.
d. Click the Table button.
e. Set your table size to have 4 Rows, 3 Columns, 80% Width, Border 1px and
Padding of 1.
f. Set the Header to ‘Both’ (depending on your table data selecting Left, Top or
Both may be correct but using the None setting is not appropriate for an
accessible table.)
g. In the Accessibility section, add a Caption. This caption will appear with the table
based on the alignment setting. Set this to Left.
h. Add a summary. The summary is a detailed description of the table that allows
someone with a screen reader to have a better understanding of what is being
read out to them. It will not appear to a traditional viewer.
i. Select OK.
j. It is important to note that this is not the total extent to which a table can be
made accessible – but it is all that is available through Dreamweaver’s graphic
interface. If you need to guarantee that a table is accessible you can, through
HTML code, add axis, header and id information. For more information on this
topic visit www.3c.org.
k. Save your work.
V. Going Live
Our site is done… time to post it to the Web.
a. In the Files panel group click the ‘Expand to show local and remote sites’ button
from the buttons along the top of the panel.
b. The window that opens will display your local files on the Right and, once
connected, the files on your server to the Left. Click the Connect button (the blue
‘plug’ icon) and enter your password when prompted.
c. Highlight your site folder on the Local Files side of the window.
d. Click the blue ‘Put Files’ arrow.
e. You will be prompted ‘Are you sure you wish to put the entire site?’ Select OK.
(Note: In general you would want to upload only those pages you have made
changes too but because we have not posted any of this site previously we will
10
put the entire site. This is a warning because uploading a whole site can take a
lot of time if the site is big!)
f. Open a Web browser and go to http://userwww.sfsu.edu/~acctname (where
acctname is your account name).
VI. Q & A
a. Next Week: Templates, Hovers, Publishing, Accessibility
11