Dreamweaver Tutorial #2 My web page II In this tutorial you will learn: how to use more advanced features for your web pages in Dreamweaver what Cascading Style Sheets (CSS) are and how to use these in Dreamweaver what is a web site hierarchy and how to make a web site Note: The red boxes with “To Do” are small activities for you to complete before continuing with the tutorial. Advanced Features and CSS With your first web page, we used standard web page elements (Headers, Paragraphs, Lists, Links, Colours, and Tables). There are many other features available and in this tutorial, we will explore some of these. Templates and Layouts In your first web page, you did not use a template or look at different layouts for your page. It was a simple one page design without any distinguishing features on the page. Dreamweaver has a number of pre-designed templates of different web page layouts that are available. For this tutorial we are going to make a new home page using one of these layouts. Create a New Page with Dreamweaver’s Templates Select “HTML”; under “Create New” (See Figure 1). Figure 1. Creating a new Blank Web Page in Dreamweaver Dreamweaver – Tutorial 2 1
Transcript
Dreamweaver Tutorial #2
My web page II In this tutorial you will learn:
how to use more advanced features for your web pages in Dreamweaver
what Cascading Style Sheets (CSS) are and how to use these in Dreamweaver
what is a web site hierarchy and how to make a web site Note: The red boxes with “To Do” are small activities for you to complete before continuing with the tutorial. Advanced Features and CSS With your first web page, we used standard web page elements (Headers, Paragraphs, Lists, Links, Colours, and Tables). There are many other features available and in this tutorial, we will explore some of these. Templates and Layouts In your first web page, you did not use a template or look at different layouts for your page. It was a simple one page design without any distinguishing features on the page. Dreamweaver has a number of pre-designed templates of different web page layouts that are available. For this tutorial we are going to make a new home page using one of these layouts. Create a New Page with Dreamweaver’s Templates Select “HTML”; under “Create New” (See Figure 1).
Figure 1. Creating a new Blank Web Page in Dreamweaver
Dreamweaver – Tutorial 2
1
Under the Menu, select File / New which will bring up a dialog box with different options for a new document (Figure 2).
Since we want to create a new web page using a Dreamweaver template, select Blank Page (to create a template to use in Dreamweaver, you would select Blank Template). Then select Page Type: HTML, Layout: 2 column elastic, left sidebar, header and footer. For each template, a visual is available. Below are short descriptions of the different layout options:
Fixed: Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.
Elastic: Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid: Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Hybrid: Columns are a combination of any of the previous three options. For example, in the two-column hybrid, the right sidebar layout has a liquid main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.1
Now your web page has the applied template applied to it (see Figure 3). To show the layout, Dreamweaver adds garbled text. You will delete the text before adding new text.
Figure 3. The Look and Feel of the Template
When you make changes to the template, you can either make changes to the actual page or you can make changes to the template that can be applied to the entire web site for a similar look and feel between different pages in a web site. To make changes to the template that can be applied to all pages in the site, you use CSS (Cascading Style Sheets). While HTML has some formatting abilities (e.g., font type and size), the main function of HTML is to help structure or define the content for a web document (e.g., hyperlinks, headings, paragraphs, lists, tables, etc.). For more advanced layout and formatting features for web pages, designers use CSS in addition to HTML (CSS does not replace HTML rather it enhances it).
With CSS designers: can create different formatting styles for different web site can create a consistent look within a web site (which also helps when
users navigate a web site to know that are still within a web site and have not navigated to a new site)
can easily the whole look and feel of the site from one file (as opposed to changing all the pages within the site)
To make changes in the CSS for the template, you can use the side area menu “CSS Styles” or you can select “CSS” at the bottom on the window in Properties (see red arrows in Figure 4).
Dreamweaver – Tutorial 2
3
Figure 4. The CSS areas
First, we’ll change the look and feel of the Header. Highlight by clicking
the border outline of the Header area on the template (see Figure 5). To ensure that you are making changes to the header, make sure that you see the grey bar on the left-hand side in the Header. As well, in the Properties section you will see Header.
Figure 5. Highlight the Header area
Dreamweaver – Tutorial 2
4
You can change the colour of the Header area by doubling clicking “background” in CSS Styles which will bring up a dialog box with colour options (see Figure 6). You can double check that you are making changes to the wanted selected region by looking at the name in the dialog (in this case CSS Rule definition for …. Header).
Figure 6. Change the background colour in the Header
You can also add a background image using the same dialog menu (see
the blue arrow in Figure 6). By selecting the folder beside this, you it will bring up a file management window. Go to the Image folder in “firstWebPage” and select image1_banner.png (see Figure 7). Once the image is in the header, delete the text (“Header”).
Figure 7. Add a background image to the Header
Dreamweaver – Tutorial 2
5
See Figure 8 for the result of adding the background image.
Figure 8. The background image in the Header
To Do: Do the same for the Footer in the page. Highlight the Footer and double click the background in the CSS Style Area. In the dialog box (Figure 6), open the same image (image1_banner.png) as the background image. Remember to delete the text “Footer”.
Next, change the font colour to a dark blue to match better. Highlight the page again (Main Content) and double click color on the CSS Style Area. This will bring up a dialog box with a colour chart. Select dark blue (see Figure 9) and press Apply.
Figure 9. Change the Font Colour to Blue
By pressing Apply the dialog box will still be open. Go to the Background tab on the box and you can change the background colour of the page from grey to a colour that matches the background image in the Header (see Figure 10).
Dreamweaver – Tutorial 2
6
Page 10. Select a background colour for the Page
This will change the background on the page (see Figure 11)
Figure 11. The background page colour changed from grey to beige.
Next save the template so that you can use it for other pages in your web
site (under the Menu select File / Save as Template) (see Figure 12)
Figure 12. Save the template
Dreamweaver – Tutorial 2
7
A dialog box will appear. The Site should be firstWebPage and save the
template as templateDesign_homepage (see Figure 13). This will create a Templates folder in the directory firstWebPage and your template will be saved here.
Figure 13. Save your template
Before working on your page, save it to your computer in the same folder as your first home page from Tutorial 1 “firstWebPage”. Call the file “homePage_2” (Figure 14).
Figure 14. Save the Web Page
Enter the information that you used in the first home page in the Main Content: your name, add URLs and a list of courses (see Figure 15).
Dreamweaver – Tutorial 2
8
Figure 15. Entered information on the Home Page
In the first tutorial, we just created as single web page; however, pages are often part of a web site. A web site is made up of several related web pages. The pages in the website are connected together using links. An important feature of a web site is its structure. Web Site Structure When reading a novel, we tend to read from start to finish. When reading a text book, we can go back and forth to examine different concepts and examples. With a web page we also tend to move in a non-linear fashion. This is commonly referred to as a “hypertext” system. Hypertext is a network of nodes (usually screens that contain text, images, and other components) that are linked together. The Web in general is a hypertext system made up of a huge number of web pages all linked together in some way (see Figure 16). It is important to clearly structure your site which is often done as a hierarchy (similar to a family tree) with a home page as the root node (see Figure 16). Create and organize your web site hierarchy before starting to develop the pages. Organize and group pages in a meaningful and sensible way (for example, in Figure 16, all products are contained under “Product Information” not under “Company Profile”).
Products
Figure 16. The structure of a web site with the first page in the hierarchy being the Home Page.
You can see the relationship between the pages within the web site by following the lines. For example, from the home page you can go to “Login”, “Company Profile”, “Contact Us”
and “Product Information”. From the “Product Information” page you can go to “Hardware”, “Applications” and “Contact Sales”.
Create a Personal Information page using the template. We’ll use the same template that we previously created to keep a consistent look and feel in your website. On the Menu go to File / Open. Go to the “firstWebPage” directory and the “Template” folder. Select templateDesign_homePage (see Figure 17).
Figure 17. Open the template for the next page
Once the page is open, add some personal information in the Main Content section: your hometown, and current address (Figure 18).
Dreamweaver – Tutorial 2
10
Figure 18. Add in Personal Information
Notice in Figure 18, that the there is space between the lines in the address information. This is because when you hit <enter> Dreamweaver treats the line as a paragraph and adds spacing as you would for a paragraph. However, we don’t really want this space. To avoid this space you enter a line break by hitting <shift>+<enter> after each line in the address (see Figure 19).
Figure 19. Using <shift>+<enter> instead of Paragraph
Now add some formatting to the text: highlight the line Home town to make this a Heading 3 (on the menu Format / Paragraph Format / Heading 3) (Figure 20). Do the same for Current Address (see Figure 21 for the result of formatting).
Dreamweaver – Tutorial 2
11
Figure 20. Format some text as Heading 3
Figure 21. Result of Heading Formatting We can add an email address with Dreamweaver which will embed the address in the page. Select Email Link on the Insert Area on the side menu (Figure 21) and a dialog box will appear. Add your email address in E-mail. For Text which will show up on your web page considering adapting your email address to a different format so when crawlers search pages for email addresses, your text does not match the typical format thereby reducing unwanted spam (see Figure 22 and Figure 23).
Figure 22. Filling in Email information
Dreamweaver – Tutorial 2
12
Figure 23. Email address link added
Often on a personal page, you will see photos. To add images to your page go to the menu to Insert / Image (see Figure 24)
Figure 24. Insert an Image
In the dialog box, select one of the images that end with “friends” in the Images folder in “firstWebPage” (see Figure 25). On the right side, you can view the image before selecting.
Dreamweaver – Tutorial 2
13
Figure 25. Select an image to insert
After selecting an image and pressing OK, the message box in Figure 26 will appear, just press Cancel.
Figure 26. Press Cancel
Insert a heading “Some Photos:” and make it a Heading 3. Put a short description before the picture. Also, note that when you highlight the image, the image information in the Properties area at the bottom of the window is displayed (e.g., height of the image “H” and width “W”) (see Figure 27).
Dreamweaver – Tutorial 2
14
Figure 27. The Image inserted and the Properties Area shows the image information You can align the text and image by first highlighting the text and image and then going to the menu Format / Align / Center which will center the data (Figure 28).
Figure 28. Align the photo and description to the center To Do: Add another photo. There are a couple “pet like” images included in the Images folder. Give the photo a description and align it to the center (see Figure 29).
Dreamweaver – Tutorial 2
15
Figure 29. A new image added, described and centered. Dreamweaver allows you to do some simple editing of images. When you click on an image (in this case the turtle) the image information will appear in the Properties area at the bottom of the window (see Figure 30). You can use the three tools to edit the image: brighten, crop, and sharpen (Figure 30).
Brighten the Image Crop the Image Sharpen the Image
Figure 30. Image Editing When we set up our first web page in Tutorial 1, we created a site called “firstWebPage”. We will continue to use that site. We already have our new home page added (homepage_2.html) and now we’ll save the personal information page in the same folder as personal_2.html (Figure 31).
Dreamweaver – Tutorial 2
16
Figure 31. Save the Personal Information Page
The current pages in our site are: a Home Page (newest one), Personal Information page, and an old Home Page. For the sake of this tutorial, let’s also assume that there is another page with school information. So based on these pages, the hierarchy would look like: Home Page (second one) Personal Info School Info Old Home Page As we can see, we need a way to move and navigate between all the pages. We are going to look at two approaches: links and navigation menus. Navigation Links We’ll add the links on the Home Page first that will navigate to the other pages in the site. First, in the side section of the web page, delete the text and add the following: a title “Links” (as a Header 3 – Format / Paragraph Format / Header 3), then the link names: Personal Information, School Information and Old Home Page (see Figure 32).
Dreamweaver – Tutorial 2
17
Figure 32. Add the text for the links
Next, you will need to add links to the text. First, highlight “Personal Information” and on the side Insert Area select Hyperlink or on the Menu select Insert / Hyperlink. From the dialog window, select the file personal_2.html as the link address (Figure 33).
Figure 33. Add the URL of personal_2.html to the text Personal Information
We don’t have a page for School Information, but we can add the URL of our first web page to the text “Old Home Page” (see Figure 34). After both links have been added our page looks like that in Figure 35.
Dreamweaver – Tutorial 2
18
Figure 34. Add the old home page URL to the text
Figure 35. The Home Page after the links have been added. Now that we have links on the home page, we need to add the links to the Personal Information page. To Do: Add to the Personal Information Page the Links title and the link text of Home Page, School Information and Old Home Page on the Side Area and make links for the Home Page and the Old Home Page (see Figure 36).
Dreamweaver – Tutorial 2
19
Figure 36. Links added to the Personal Information Page Using a Navigation Menu Another common way for users to move between sites is to use a menu. When you create a menu in Dreamweaver you need to create images for the menu items. We’ll do a simple menu with three options from the following possibilities: Personal Info, School Info, and the Old Home Page and the Home Page. Before we can make the menu, we first need to create four images of the textual options. Open Word and type in the four possible pages: Personal Info, School Info, Old Home Page and the Home Page. Use a 12 point font and change the font type to Arial. Also change the font to dark blue to match our web page font colour (see Figure 37).
Figure 37. Type the Menu item names in Word
Next Open Paint and copy the list into Paint. Then cut and paste each menu item in Paint and save it to your Images folder in “firstWebPage” (Figure 38).
Dreamweaver – Tutorial 2
20
Figure 38. Cut and paste each menu item in Paint and save each image in the Images folder in “firstWebPage”
To Do: Cut and paste all four items into Paint and save as images for the menu in the Images folder in “firstWebPage”. Similar to the links, we will insert a navigation menu into the Home Page First. On the side menu, below where we had the links for now, go to the main menu and select Insert / Image Objects / Navigation Bar (Figure 39).
Figure 39. Insert the Navigation Bar
Dreamweaver – Tutorial 2
21
This will bring up a dialog box that allows you to enter all the menu items (e.g., the images) into the menu (Figure 40).
Figure 40. The Dialog to enter Menu Items
The + and – sign buttons allow you to add new items or to delete ones you
have already entered. The up and down arrows across from the + and – sign, allow you to
change the order of the entered menu items You can see the menu items and their order in the Nav bar elements box. On the Home Page, we will make the Personal Information Page the first
element. In the Element name box enter personal. To add an image you need to tell Dreamweaver where the “Up Image” is
located. Hit “Browse” and select the appropriate image file from your Images folder (Figure 41a). You do not need to enter the other images (i.e., over image, down image, over while down image) for this menu.
Ensure Insert is vertical as we are putting our menu down the side menu.
Figure 41a. Add the image for Personal Info to the Menu dialog
Dreamweaver – Tutorial 2
22
Now in the Nav bar elements box, personal will be added to the top (Figure 41b). To add a new element, press the “+” button. Do the same for School; enter the Element name as school and then in the Up Image box browse the images folder for the image of School Info (Figure 41b).
Figure 41b. Add a new element to the menu
To Do: Press the + button and add in the information for the Old Home Page (name and image). (Figure 42). Press OK
Figure 42. Enter the Old Home information to the Menu
Dreamweaver – Tutorial 2
23
The Menu will be added as a table in the side area (Figure 43). As we can see, the table rows are the same colour as the side area (grey) and since the menu item images aren’t the same size, they all look different.
Figure 43. The Menu has been added to the Side Area of the Page
To fix the different colours, simply select each row and in the Properties Area, select Bg and a colour chart will appear. Select white (Figure 44). Repeat for the other two rows to get a menu that looks more uniform (Figure 45).
Figure 44. Change the background colour of each row to match the images
Dreamweaver – Tutorial 2
24
Figure 45. All the rows are white matching the Image background colour.
If you want to adjust the table size to make it similar width to the side area, select the whole table and then put your cursor on the right-hand margin. Your curser will change its look and allow you to drag the margins (Figure 46). You can also change the size of the rows by doing the same thing (highlight the row and then when your cursor changes you can drag the margins).
Figure 46. Change the margins of the Page by dragging
You can change the alignment of the menu from the default of the left-hand side to the center. Select the table and in the Properties Area change Align to Center (Figure 47).
Drag the margins of the table
Figure 47. Center the Table
Dreamweaver – Tutorial 2
25
You can also align the menu item images. You first need to select a row and then the image. The default puts it to the left-hand side. To align the images to the right-hand side select “Right” in the Properties Area under Align. Repeat for all the rows (Figure 48).
Figure 48. Align the menu items to the right You can also add a border to your menu by selecting the table then in the Properties Area add “1” to the Border (Figure 49).
Figure 49. Add a border to the menu
Dreamweaver – Tutorial 2
26
Next you need to add a link to each of the images in the menu. Click on the first image in the menu (Personal Info). In the Properties Area the image information will be displayed. Beside Link type personal_2.html (you can also select the folder and find the web page file in your files). (See Figure 50). Do the same for the Old Home Page (add homepage_1.html as the link). There isn’t a page for School Info so you don’t need to do anything with it.
Figure 50. Add links to the images Figure 51 shows the menu finished on the Home Page.
Figure 51. The Home Page with both the list of links and the menu To do: Add a navigation Menu to the Personal Information page and preview your site. .
Dreamweaver – Tutorial 2
27
Save your pages to the server: Once you have your pages working as you want, you can save the pages to the server. In Tutorial 1 we already set up the site on the server so you just need to save the pages to the site on bluenose. In the Menu select File / Save to Remote Server. This will bring up the dialog box. First save your new home page (homepage_2.html) (see Figure 52)
Figure 52. Save the new home page to the server
Once you press “Save” another dialog will appear (Figure 53). You want to save all the information that is associated with the page (e.g., images) so select “Yes”.
Figure 53. Select Yes
Save your personal information page to the server as well (personal_2.html). Once both pages have been saved to the server you can view your home site online by going to:
Dreamweaver Resources: http://www.adobe.com/devnet/dreamweaver/ http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7effa.html http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7c45a.html http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7f62a.html http://www.siteground.com/tutorials/dreamweaver/insert_images.htm http://www.guidesandtutorials.com/dreamweaver_tutorial.html Choosing Colours for your Web Site In the pages that we created we used a colour combination that was influenced by the banner image used in the header and footer (see Figure 1). Other times, it might be based on personal preference.
Figure 1. The colour combination of the pages Open the page (homepage_2.html) and save the page using a different name in the same folder (e.g., tryingColours). What if we had used a different colour combination? Select the header and in the side area menu and select background. Delete the reference to the image in the banner and change the colour to a bright blue like the one in Figure 2.
Figure 2. Change the background colour of the Header Now change the colour of the side menu, from the light blue to the darker green like in Figure 3 (highlight the side menu, then in side area double click background).
Figure 3. Change the colour of the side menu
Dreamweaver – Tutorial 2
30
Now the page looks like Figure 4.
Figure 4. Result of changing the colours Questions: What do you think of the colour combination? Is it easy to read the list of the URLs? Is there a difference for reading the links with the heading “Links” (brighter blue vs. the dark blue)? Why is our first page colour combination easier to read the URL text than the second one? Why is the menu easy to read regardless of the background colour?
Dreamweaver – Tutorial 2
31
The reason that the second colour combination is more difficult to read is the contrast between the colours on the web page. The higher the contrast, the easier it is to read the text (e.g., avoid having a dark background with dark text). This point is especially important for users who may have some vision issues.
This is a video that critics a web page’s lack of contrast http://www.youtube.com/watch?v=Wdan6HA6hS0&feature=related The main authority on web pages (W3C www.W3.org) recommends that web pages have a contrast ration of 4.51 (see http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html for a definition of this ratio).
You can test the contrast value of your own web page using online tools, such as http://snook.ca/technical/colour_contrast/colour.html Let’s test the second colour combination on the side menu. Open the above site in a browser. Then on your web page, highlight the side menu. In the side area, note the background-colour (080) (Figure 5). Next you need the colour of the font. Highlight “Links:” and note the colour (004)(Figure 6).
Figure 5. Get the background colour number
Figure 6. Get the font colour Next in the browser, you need to record the background colour and foreground colour (the font colour) and press enter. Note that the numbers will change when you enter them in the form (the program automatically puts them into proper HEX format). You can see from the results that the contrast for the colour combination fails (Figure 7). It rates 4.17 which is less than the W3C’s recommended 4.51. The other numbers represent the W3C’s WCAG (Web Content Accessibility Guidelines) recommendations to differentiate between text smaller than 18pt text larger than 18pt (or text that is bold and larger than 14pt). For AA compliance, text should have a ratio of at
least 4.5:1 (larger text, at least 3:1). For AAA compliance, text should have a ratio of at least 7:1 (larger text, at least 4.5:1).
Figure 7. The colour combination contrast test failed Now test the colour of the links. Keep the background colour the same. To get the colour of the links, highlight one of the links and double-click the side area Color. Then you can use the “dropper” cursor and go to the visited link colour until it registers in the colour box (in this case the number if 00C as seen in Figure 8).
Figure 8. Get the colour for visited links Change the foreground colour to 00C, to see the results (Figure 9). This colour combination did worse the first comparison. In this case, the result was 2.42 and it failed all the WCAG recommendations.
Dreamweaver – Tutorial 2
33
Figure 9. Testing the contrast for visited links (fail) The first colour combination we used in the original page passed (Figure 10). It scored 12.07.
Figure 10. The first colour combination contrast passed To Do: Try some different colour combinations and test the contrast ratio. Record the different colour combinations that you use.
Dreamweaver – Tutorial 2
34
CSS Examples: We used CSS in our home site. CSS is a very powerful tool to help design your web pages and sites. Below are figures that show the same content presented differently using style sheets (see Figures 1, 2, 3, and 4). You can go to the site if you want and play with the style sheets as well (you may need further CSS resources to help). http://www.csszengarden.com/
Figure 1. The main (first) Page (http://www.csszengarden.com/)
Figure 2. A example of the same page content but using a different CSS (http://www.csszengarden.com/?cssfile=/208/208.css&page=0)
Dreamweaver – Tutorial 2
35
Figure 3. A example of the same page content but using a different CSS (http://www.csszengarden.com/?cssfile=/209/209.css&page=0)
Figure 4. A example of the same page content but using a different CSS (http://www.csszengarden.com/?cssfile=/212/212.css&page=0)
Dreamweaver – Tutorial 2
36
Dreamweaver – Tutorial 2
37
CSS Resources http://siteground.com/tutorials/dreamweaver/css_styles.htm http://www.adobe.com/devnet/dreamweaver/css.html References http://www.cmssupport.utoronto.ca/Help/web_site_page_hierarchy.htm www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html http://www.useit.com/ http://www.w3.org/WhatIs.html http://www.useit.com/alertbox/history.html Deitel, H.M., Deitel, P.J., Neito, T.R. (2001). Internet and the World Wide Web: How to program, 2nd Edition: Prentice-Hall Canada, Toronto. Sharp, Rogers, Preece. (2007). Interaction Design: beyond human-computer interaction, 2nd Edition: John Wiley & Sons, England.
