Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004

USING STYLESHEETS TO DESIGN A WEB SITE IN DREAMWEAVER MX 2004

Introduction This document assumes that you are familiar with the use of a computer keyboard and mouse, have a working knowledge of Microsoft Windows and are familiar with using the World Wide Web. The files required to complete the exercises in these notes are available from WebCT (vle.bbk.ac.uk), the college’s online learning environment. If you are following these notes in a ITS workshop, you will have been subscribed to the necessary course. For access for self-teaching, please contact ITS reception, room 151. To purchase the software, see the CHEST Macromedia Educational Purchase Plan details, by searching on dreamweaver at http://www.eduserv.org.uk/chest/

Contents

1 Linking to an External Style Sheet 3

2 Create a Style Sheet 7

3 Use a Style Sheet 11

4 Tables for Layout 14

5 CSS For Layout 18

About this Document

Words in bold Will need to be typed or chosen from a menu or window

Small capitals – e.g. ALT Indicate keys that you press

Press KEY1 + KEY2 Press both keys together

Press KEY1, KEY2 Press each key consecutively

Bulleted lists Are guidelines on how to perform a task

Choose Insert - Picture Show menu commands – in this case, choose the option Picture from the Insert menu at the top of the screen

Aims & Objectives The aim of this document is to introduce CSS for web page

formatting and the use of both tables and CSS for web page layout

When you have completed these exercises you should be able to:

• Link to, create and edit external style sheets

• Use tables for page layout

• Use CSS for page layout

• Use Dreamweaver provided style sheets

Pre-requisites This document assumes that you are familiar with the use of a computer keyboard and mouse, and Microsoft Windows-based products. All participants should be familiar with the basic HTML structure of a web page. You will need to have created a Dreamweaver web site, such as that produced in the accompanying module "Creating Web Pages with Dreamweaver MX 2004"

Copyright © Netskills, University of Newcastle Copyright in the whole and every part of this Courseware whether in the form of a written manual, document, software program, service or otherwise belongs to the University of Newcastle upon Tyne ("the Owner") and may not be used, sold, licensed, transferred, copied or reproduced in whole or in part in any manner or form or in or on any media to any person other than in accordance with the terms of the Owner's Licence Agreement or otherwise without the prior written consent of the Owner. All use of this material is governed by the Owner's Standard Licence Agreement together with the appropriate Schedule. The following are available:

• A Standard Licence Schedule to cover all use including all for-profit use by any type of organisation and all use by non-educational establishments

• An Educational Licence Schedule for not-for-profit internal use only by a recognised educational establishment

The Netskills logo and this copyright notice must be included in any copy or adaptation. Netskills is a trademark of Netskills, University of Newcastle

Contact Information

Central Computing Services, Birkbeck, Malet Street WC1E 7HX Email: [email protected] Phone: UK 020 7631 6543

2

1. Linking to an External Style Sheet Objectives To learn how to link to an external style sheet. Method You will use the CSS Styles panel. Comments The W3C recommend use of style sheets for formatting. Style sheets may

be internal within a page but the greatest versatility is provided when linking to an external style sheet.

1.1 Download files • In your web browser go to the following

address:

http://vle.bbk.ac.uk/ • Click on the link Log in to WebCT; login to

WebCT using your ITS username and password • Follow the link to the IT Skills module • Click on Software Guides • Click on Dreamweaver • Click on Supporting Materials for ITS workshops • Click on 9.78 – Using Stylesheets to Design… • Download the three files listed by right-clicking each link in turn and from the

menu that appears selecting Save Target As (or Save Link As) • Save each file to the folder yournamesite – created on your N: drive in

exercise one of document 9.75 – Creating Accessible Web Sites in Dreamweaver MX 2004

xml.htm (you will already have these 2 files if you have access.htm completed doc 9.75 and need not download) style1.css (you will already have this file if you have completed doc

9.76)

1.2 • In the Files panel, double-click on access.htm to open it in the

Document window

Figure 1-1 Site files

© Netskills, University of Newcastle 3

Note Note that when you have more than one file open, you may move between them by clicking on the appropriate link in the top left corner of the Document window:

Figure 1-2 Tabs indicating open files

1.3 CSS Styles Panel From the Design panel group, locate the CSS Styles panel:

Figure 1-3 CSS Styles panel

1.4 Attach Style Sheet • From the bottom of the CSS Styles panel, click on the Attach Style Sheet

button: • In the pop-up window, click on the Browse button and choose style1.css • Click OK • Ensure that Add as: Link is selected:

4

Figure 1-4 Attach External Style Sheet window

• Click OK You should see your page take the formatting from the linked style sheet. Preview your page in the browser and it should look as follows:

Figure 1-5 access.htm

1.5 Also notice that the CSS Styles panel displays details about the style sheet (you may need to click the + to see it):

Figure 1-6 style1.css properties


1.6 Delete CSS Link • In the CSS Styles panel, select style1.css:

Figure 1-7 Selecting style1.css

• From the bottom of the panel, click on the Delete CSS Style button: You have removed the link to the style sheet and should see your page revert to its non-formatted state. The reference to the style sheet has also been removed from the CSS Styles panel. However, the style sheet file itself has not been deleted and should still be displayed in the File panel. • Save access.htm

6

2. Create a Style Sheet Objectives To learn how to create a style sheet using Dreamweaver MX 2004. Method You will use the CSS Styles panel and also the CSS Styles Definition

window. Comments Dreamweaver provides a tool for creating and editing styles. Style sheet

handling and rendering has improved further in Dreamweaver MX 2004.

2.1 CSS Styles Panel • With access.htm open in the document window, open the CSS Styles

panel:


• In the CSS Styles panel, click on the Attach Style Sheet button: • In the pop-up window and in the box labelled File/URL type style2.css

Figure 2-2 Link External Style Sheet

• Click OK • The style sheet, style2.css does not yet exist, so you will be prompted to

create it:

Figure 2-3 Prompt box

• Click Yes You have linked your web page to a new style sheet, called style2.css. At present style2.css is an empty document.

2.2 Ensure that the CSS Style panel looks as follows, with style2.css highlighted.


Figure 2-4 CSS Styles

• In the CSS Styles panel, click on the New CSS Style button: • In the pop-up window, first ensure the radio button for Type: Tag

(redefines the look of a specific tag) is selected • From the Tag drop-down menu select: body. Also ensure that Define in:

is style2.css.

Figure 2-5 New CSS Style

• Click OK You will see the following:

Figure 2-6 CSS Style Definition

• In the CSS Style Definition window, with the Category: Type, use the

drop-down menu button to make the Font: Arial, Helvetica, sans serif • Click Apply to see the effect of your changes • Make the following style definitions, ensure that your units are as specified

as shown below:

Category Style Value Type Size 1.1ems Type Color Light Green Background Background-color Black Box Width 80%

8

Box Margin Left (You will need to clear the Same for All checkbox first).

5%

• Click OK • You have set up a variety of style definitions, which are held in the external

style sheet style2.css

Accessibility/Usability

Fonts: Sans-serif fonts are best for reading on the screen Colours: If you specify colours, then you should specify both

text colour and background-colour. Background images

These are best avoided since they are distracting and make it difficult to read any overlying text

Units All units should be relative. Use % for positioning and em units for text

2.3 • Repeat 2.2. On this occasion, in the New CSS Styles window, select the tag:

h1. Set up some further style definitions for this tag.

2.4 Tag Inspector • Open the Tag Inspector panel group and select the Relevant CSS Panel • Ensure that the body tag is selected in the upper window • Click on the show list view button, between the two panel windows The panel should appear as shown below:

Show list view button

Currently defined CSS properties

Font color picker

Figure 2-7 Relevant CSS Panel

The lower window of the panel displays a list of the styles that apply to the currently selected page content. • Use the color picker to change the text colour to pink. The changes to the

text formatting should be applied to your page • Now increase the left margin of the page to 10%. Again, the change should be

applied to the page immediately


10

• Save access.htm

Note The Relevant CSS Panel is a new feature in Dreamweaver MX 2004. It allows style rules to be inspected and edited far more easily and quickly than previously. Remember that changes to style rules will be reflected in all the pages that link to that style sheet. Style properties can also be edited by clicking the Edit Style Sheet button in the CSS Styles panel.

3. Use a Style Sheet Objectives To use pre-built style sheets supplied with Dreamweaver. Method You will apply a Dreamweaver style sheet to one of your pages. Comments Dreamweaver MX 2004 provides a number of style sheets.

3.1 Use the CSS Styles panel to remove any linked style sheets from the web page access.htm. [Hint: If unsure, consult Task 1.6].

3.2 New Document • From the main menu, select File – New • Ensure that the New Document window is open with the General tab

selected. Select:

Category: CSS Style Sheets and CSS Style Sheets: Full Design: Accessible

This is shown below:

Figure 3-1 New Document window

• Click Create You will see a style sheet displayed in the Document window. Direct editing of the style sheet is possible

Figure 3-2 The Document window

The CSS Styles panel will display the details of the style sheet:



3.3 • From the main menu, select File – Save As and save the file as

dreamstyles.css

3.4 • In the Document window return to access.htm • Use the CSS Styles panel to link access.htm to dreamstyles.css. [Hint:

If unsure, consult Task 1.4] • Preview your page in the browser and it should look as below:


3.5 • In the CSS Styles panel, scroll down the list of styles and select the class:

footer


3.6 Using a class • In the Document window, scroll to the bottom of the page and select

the line of text:

© Netskills, University of Newcastle Last Updated: 18 July 2003

• In the CSS Styles panel, with the class: footer selected, right click and from the context menu that appears select Apply:

12

Figure 3-6 Using a class in a style sheet

You should see the footer text in your web page take on the styles defined in the class footer.

Note Classes

You can also apply a class style by selecting the relevant class in the CSS Styles panel then selecting the appropriate property from the Style menu in the Property Inspector, as shown:

Up to now, style sheets have been used for defining style for existing HTML tags throughout whole web pages. This is limited, since you may want the first paragraph to have a distinct appearance, or every other heading. Classes allow for this flexibility. Classes are groups of styles given a unique name and then applied to one or more HTML tag. In Dreamweaver, they may be created using the CSS Styles panel, clicking the New CSS Style button and selecting Selector Type: Class (can apply to any tag)

3.7 • In the Document window select the first paragraph of text, which begins:

An increasing awareness of accessibility issues suggests that.. • Use the CSS Styles panel to assign a new class to the text. Remember that

from the main menu you can select Edit – Undo Apply to undo your last change

• Save access.htm


4. Tables for Layout Objectives To learn how to use tables for layout. Method You will create a layout table and add some content. Comments In web pages, tables are more commonly used for layout than for data.

The W3C recommend CSS as preferable to tables for layout. However due to older browsers not fully supporting CSS, many designers still choose tables.

4.1 • From the main menu, select File – New • Ensure that the New Document window is open on the General tab.

Select:

Category: Basic Page and

Basic Page: HTML Also ensure that Make Document XHTML Compliant is selected:

Figure 4-1 New Document

• Click Create • From the main menu, select File – Save As and save your new page as

tablelayout.htm

4.2 Layout mode • From the Insert Bar menu select Layout:

Figure 4-2 Insert bar

• Use the Table button to add a table with 1 row and 3 columns, taking up 100% of the page width, with border thickness set to 0 and a cell padding of 5. Leave the accessibility options blank. (These apply to data tables).

Figure 4-3 Accessibility Options for Tables

14

• Click OK

Accessibility

The accessibility options that you are prompted for are for data tables. When you are creating layout tables, leave the options blank. Instead remember that devices such as screen readers will read your tables row-by-row and from left to right. Ensure that your content makes sense when read in this linearised manner.

4.3 Copy and Paste text • In the top left corner of the Document window, click on the link to

display the page access.htm:

Figure 4-4 Changing document displayed

• In access.htm, highlight all the text from the beginning of the document, including the main heading, until just before the horizontal rule:

Figure 4-5 Highlight text in access.htm

• From the main menu, select Edit – Copy • In the Document window, display tablelayout.htm. Click in the middle

table cell. From the main menu, select Edit – Paste • The text from access.htm has been copied into the middle cell of the table

in tablelayout.htm.

4.4 Expanded Table Mode • On the Insert bar (Layout) click on the Expanded mode button:


Figure 4-6 Viewing tables in expanded mode

Viewing tables in Expanded Mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editing easier. This enables you to select items in tables or precisely place the insertion

The Expanded Table Mode button

point.

Note Once you make your selection or place the insertion point, you should return to the Standard mode of Design view to make your edits. Some visual operations, such as resizing, will not give expected results in Expanded Tables Mode.

4.5 Repeat task 4.3 , this time copying the contents of xml.htm into the right table cell of tablelayout.htm. [Remember you can open files by double clicking on their name, listed in the Files panel].

4.6 Add a Link • With the Document window displaying tablelayout.htm, click in the

left table cell. Type the text:

Netskills TONIC

Use the Property inspector to make the text, Netskills, link to

http://www.netskills.ac.uk and TONIC link to

http://www.bbk.ac.uk/ITS/courses/ Preview your page in the browser and it should look as follows with the text in each column vertically centred:

Figure 4-7 tablelayout.htm

16

4.7 Vertical Alignment • Return to Dreamweaver • Select each table column in turn • Use the Property inspector to make the vertical alignment of each table

cell Top:

Figure 4-8 The Property inspector

4.8 Save tablelayout.htm

Preview your page in the browser and it should look as follows:

Figure 4-9 tablelayout.htm


5. CSS For Layout Objectives To learn how to create and apply style sheets to control the layout of a

web page. Method You will use style sheets to create classes that will determine the

positioning of different elements of a web page. Comments Although not very widely used yet, CSS is the W3C recommended

method for creating web page layouts. CSS handling has improved in Dreamweaver MX 2004.

5.1 • Open access.htm in the Document window and remove any linked

style sheets

5.2 Link a style sheet • Use the CSS Styles panel to link access.htm to a new style sheet called

layout.css (see 2.1).

Figure 5-1 CSS Styles panel showing layout.css

5.3 Create New CSS Style • With layout.css selected in the CSS Styles panel, click on the New CSS

Style button: • In the New CSS Style window, ensure that Selector Type:Class (can

apply to any tag) and Define In: layout.css are both selected • In the Name: box, type leftcol.

Figure 5-2 Creating a new class

• Click OK The CSS Style Definition panel will open:

18

Figure 5-3 CSS Style Definition

5.4 • Make the following style definitions, ensuring that the units are as specified:

Category Style Background: Background-color: Light blue Box: Width: 40% Positioning: Type: absolute Positioning: Placement Top: 44% Positioning: Placement Left: 5%

• In the CSS Style Definition window, click OK to save your styles in

layout.css You have created a new class called leftcol. Your page, won't yet display any of the classes defined in leftcol since you have not yet associated the class with any of your HTML tags.

Note Classes are independent styles that can be applied either to specific elements of a web page, or as is the case in this exercise, declared generically and applied to groups of elements.

5.5 • Create a second class called rightcol and save it in layout.css. Make the

following style definitions:

Category Style Background: Background-color: Light pink Box: Width: 40% Positioning: Type: absolute Positioning: Placement Left: 50% Positioning: Placement Top: 44%


5.6 • Create a third new class called container and save it in layout.css. Make

the following style definitions:

Category Style Positioning: Type: relative Positioning: Placement Top: 0% Positioning: Placement Left: 0%

Note that your CSS Styles panel should display the new classes:


• From the main menu select File – Save All

20

5.7 In the document window, examine access.htm in Design View. After the introductory paragraph, note that there two sections with headers: The Content and Requirements. • Select all the text in the section headed The Content, as shown below:

Figure 6-5 Selecting text for the first content block

• With the Insert Bar displaying the Layout category, click on the Insert Div Tag button .

• In the Insert Div Tag window, select class: leftcol. Leave the other options as

they are.

Figure 6-6 Selecting Insert Div Tag options

• Click OK You should see some changes to access.htm :

Figure 6-7 Results of applying leftcol class

5.8 • Repeat the above procedure, this time for the section with the heading:

Requirements (include the footer, which ends “July 2003”), but use the class .rightcol. You should see the second content block displayed in the document window.


Note <div> is a block level HTML tag, meaning that it adds a carriage return either

side when it is used. It contains no inherent style and is commonly used to group together a section of a web page for the purposes of employing styles.

5.9 Preview access.htm in your browser. Your page should look as follows:


• From the top-right corner of your browser, click on the Restore Down button: and reduce the size of your browser window

You will find that the blocks of text that are absolutely positioned will run over the top of other text:

Figure 5-9 access.htm in small browser window

Note Absolute positioning removes content from the flow of the page, meaning that content either side of it would read contiguously. Absolute positioning is relative to either the top-left corner of the browser window or, if it is nested within a relatively positioned element, then relative to the position of the nesting element. In our example, the absolute positioning of each class is relative to the top-left corner of the browser window. However, since the individual placement units within each class are relative (for accessibility), the absolutely positioned content can appear over other content.

5.10 • In the Document window, change to Code View and add the div tags as

shown in bold below, so that they enclose the existing div tags:

...<p>This workshop is aimed at anyone who produces web pages and wishes to understand and explore the principles and practice of producing accessible content. </p> <div>

22

<div class=”leftcol”> <h2>The Content</h2> <p>The workshop comprises presentations, demonstrations and hands-on sessions with opportunities for questions and discussion. Participants each ... ...<hr /> <p>© <a href="http://www.netskills.ac.uk/">Netskills</a>, University of Newcastle Last Updated: 18 July 2003 </p> </div> </div> </body>

</html>

5.11 • In the Document window, return to Design View and click anywhere in

the content of the new <div> block • In the bottom bar of the Document window click on the outermost

<div> (shown below) so that the two existing <div> blocks are highlighted:

Figure 5-10 Nesting tags

• Use the Insert Div Tag button on the Insert Bar to apply the class container to this content block. [Hint: If unsure, consult Task 5.7].

• Preview access.htm in the browser. Your page should look as follows:

Figure 5-11 Results of applying class: container The gap between the positioned and non-positioned content is because the absolutely positioned classes have a value of top: 44%, appropriate when relative to the top of the browser window, but inappropriate to the relatively positioned containing element.

5.12 • Using the Edit Styles button in the CSS Styles panel, edit the classes leftcol

and rightcol to reduce the amount of white space • Preview access.htm in your browser • Adjust the browser display window and see the effect of containing your

absolutely positioned elements in a relatively positioned element


• Save access.htm

Accessibility

Not all browsers support CSS. Using absolute positioning, it is possible to present content on a graphical browser in a completely different order to that in the HTML. Always ensure that your content makes sense when read without CSS. It is easy to turn off CSS in Netscape 4. From the main menu, select Edit – Preferences – Advanced and de-select Enable style sheets.

24 Document 9.78 Version 2 August 2007

Technology

Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004