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