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 Blackboard (www.ble.ac.uk), the college s online learning environment. You may enrol yourself onto the required course, IT Fitness, with the Birkbeck Self Enrolled courses link. 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 Small capitals e.g. ALT Press KEY1 + KEY2 Press KEY1, KEY2 Bulleted lists Choose Insert - Picture Will need to be typed or chosen from a menu or window Indicate keys that you press Press both keys together Press each key consecutively Are guidelines on how to perform a task 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: ITS-helpdesk@bbk.ac.uk 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://www.ble.ac.uk/ Login to Blackboard using your ITS username and password If you are not already enrolled on the IT fitness module, follow the link to Birkbeck self-enrolled courses (below your list of modules) and follow the links to sign up to the course Within IT fitness, follow the link to Materials for workshops Click on Dreamweaver Download the four 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 Netskills, University of Newcastle 5

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: Figure 2-1 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 Click OK Figure 2-2 Link External Style Sheet The style sheet, style2.css does not yet exist, so you will be prompted to create it: Click Yes Figure 2-3 Prompt box 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. Netskills, University of Newcastle 7

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. Click OK You will see the following: Figure 2-5 New CSS Style 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 Click OK Margin Left (You will need to clear the Same for All checkbox first). 5% You have set up a variety of style definitions, which are held in the external style sheet style2.css Acces sibility /Usabi lity Fonts: Colours: Background images Units Sans-serif fonts are best for reading on the screen If you specify colours, then you should specify both text colour and background-colour. These are best avoided since they are distracting and make it difficult to read any overlying text All units should be relative. Use % for positioning and em units for text 2.3 Repeat Activity 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 Netskills, University of Newcastle 9

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. 10

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: Click Create Figure 3-1 New Document window 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: Netskills, University of Newcastle 11

Figure 3-3 CSS Styles 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: Figure 3-4 access.htm 3.5 In the CSS Styles panel, scroll down the list of styles and select the class: footer Figure 3-5 CSS Styles 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 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: Classes 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 Netskills, University of Newcastle 13

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: Click Create Figure 4-1 New Document 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 Acces sibility 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: The Expanded Table 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 Netskills, University of Newcastle 15

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 Netskills, University of Newcastle 17

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 Activity 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. Click OK Figure 5-2 Creating a new class 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% Netskills, University of Newcastle 19

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: Figure 5-4 CSS Styles panel 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. Click OK Figure 6-6 Selecting Insert Div Tag options 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. Netskills, University of Newcastle 21

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: Figure 5-8 access.htm 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 Netskills, University of Newcastle 23

Save access.htm Acces sibility 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 3 May 2009