Dreamweaver CS5
Dreamweaver CS5
Module 2: Website Modification Last revised: October 31, 2010
Copyrights and Trademarks
©2010 Nishikai Consulting, Helen Nishikai Oakland, CA 94610
www.nishikai.com [email protected]
Nishikai Consulting gives permission to the Haas School of Business of the University of California at Berkeley to reprint this training manual for internal use only. No re-sale of this material or renunciation of copyrights are granted by this author.
Any mention or use of Adobe®, University of California, or any third party products is hereby acknowledged by Nishikai Consulting to be for the sole purpose of editorial and educational use of this training manual and for the benefit of the mentioned parties.
Table of Contents
I.
Course Overview and Resources ... 1
II.
Analyzing an Existing Website ... 3
III.
Browser and Add-on Tools ... 5
IV.
Dreamweaver CS5 Tools ... 9
V.
Create a New Page using a Sample Page ... 22
I. Course Overview and Resources
A. Purpose of this class
The objective of this course is to learn how to analyze an existing website and to modify it by adding a new page. We will cover typical issues as well as useful tools in Dreamweaver CS5 and from other sources.
As examples in class, we will use sample pages from the Haas Computer Services website and then add a page to a previous version of the Haas Consulting Club website.
B. Target audience and prerequisites for this class
The target audience for this course is anyone who has been given the task to update an existing website using Dreamweaver and who is not very familiar with web technologies.
You should be familiar with basic features within Dreamweaver, such as defining a Local Site, working with the Files panel, and inserting a link or image. If you have not worked with
Dreamweaver previously, Dreamweaver CS5: Module 1 Website Development is a prerequisite for this course.
Although this course does not assume that you know HTML or CSS, it is highly recommended that you learn more about HTML and CSS later, especially if you find that your website is more
complicated than what we can cover in this course.
C. Resources
For additional information about website development and Dreamweaver, see: • http://www.w3schools.com/
Great resource for how to build a website with hundreds of HTML and CSS examples. • http://www.usability.gov/
Best practices guidelines for building websites that are human-friendly. • http://www.adobe.com/support/dreamweaver
Official support site for Adobe Dreamweaver. • http://www.w3.org/
Official website for the World Wide Web Consortium, which sets standards for HTML, CSS, and other web technologies.
• http://www.csszengarden.com/ One of many good websites about CSS.
II. Analyzing an Existing Website
If you have just taken over a website that had been created by someone else, first you must determine how complicated the website is.
A. Static websites
The simplest type of website is a static website. In this website, each web page is a separate HTML file created by a person. The file could have been written directly in HTML by that person, or it could have been created using a web design software like Dreamweaver. In a modern static website, formatting is controlled by one or more CSS files.
We will be working with static websites in this course using Dreamweaver.
B. Dynamic websites
In a dynamic website, the HTML for each web page is generated by a server-side script that gathers information from a database at the moment the user clicks a link to that page. Common languages for the server-side script are PHP, Java/JSP, ASP.NET, Perl, and Coldfusion. Common web databases are MySQL, Microsoft SQL Server, and Oracle.
Although Dreamweaver CS5 can manage files to be used in a dynamic website, that is beyond the scope of this course. If your website is a dynamic website, you must learn enough about the
scripting language and the database to make changes to your website, as well as how Dreamweaver interfaces with those components.
C. Content Management Systems
However, a popular type of dynamic website is a CMS (Content Management System). For a CMS, someone who knows the scripting language and the database must create the code for the design and set up the CMS on a web server. After that, anyone else who has been given the proper
permissions can update the content of the website using a simple browser-based interface, without needing to know HTML, CSS, scripting languages, or databases. Common CMS systems include Drupal, Joomla, and Wordpress.
If you are the content manager of a CMS-based website, you do not need to use Dreamweaver.
D. Websites with client-side scripting
Whether the website is static or dynamic, it may include additional client-side scripting in the HTML page. For example, a picture can be swapped randomly using Javascript, or a drop-down menu created using HTML, CSS, and Javascript.
This course will not cover these types of scripting, besides identifying the code sections and leaving them alone. Although Dreamweaver can generate and update simple scripting, you should learn Javascript if you want to modify these scripts.
E. Websites with additional components
In addition to client-side scripting, there may be additional components included in the HTML page. For example, the HTML page may include a Flash video, an animated GIF, or “include” files.
We will identify some of these components in this course. However, if you want to modify any of these additional components, you should learn more about that feature separately. For example, if you want to modify a Flash video, you should learn how to use the Adobe Flash software.
III. Browser and Add-on Tools
There are many web tools available to help us analyze a web page. First, we will review some browser-based tools. In the next section, we will cover Dreamweaver tools.
A. View source code
One of the most basic ways to analyze a web page is to view the page source code from the browser. This is the HTML code that the browser receives from the web server, either generated by a server-side script in a dynamic website or created by a person in a static website.
1. Open a browser and go to a web page in that browser.
2. If you have a menu bar in your browser, go to the View menu and select Page Source or Source Code.
Alternately, right-click a blank area in your web page and select View Page Source or View Source.
3. A separate window appears displaying the source code.
B. Basic HTML structure
HTML (Hypertext Markup Language) is the language that all web pages must be written in. The
browser interprets the HTML to generate the graphical web page. A web design software such as Dreamweaver can generate the HTML code for you, but you need to know enough about HTML to know what you can change and what to leave alone.
HTML is a tag-based language. Tags (also called elements) are enclosed in angle brackets < >, and most tags come in pairs that surround content. For example, the following code contains an opening <title> tag with a closing </title> tag that marks the enclosed content as the document title of the web page.
<title> Haas School of Business, University of California – Leading Through Innovation </title> Important tags to spot are:
<head> ... </head> This surrounds meta information, such as keywords and scripts.
<script> ... </script> This surrounds any client-side scripting, such as Javascript.
C. Firefox with Web Developer or Firebug add-on
If you want to learn more about an existing web page, the Firefox browser has many free add-on tools that can help. Some popular add-on tools are Web Developer and Firebug.
1. Open Firefox.
If you do not have Firefox installed, go to firefox.com to download and install the browser.
2. Go to Tools → Add-ons.
3. In the ons dialog box, click Get Add-ons if necessary.
4. Click Browse All Add-ons. Firefox will open the Add-ons webpage.
5. In the Add-ons for Firefox web page, click the Web Development category on the left side.
6. In the Web Development category page, scroll down or search for Web Developer or Firebug. 7. If necessary, click the link for the Add-on to view the product page.
8. Click Add to Firefox.
9. In the Software Installation dialog box, select the product and click Install Now.
10. After the product is installed, if you see the Add-on dialog box with a note to restart Firefox, click Restart Firefox.
11. After Firefox has restarted, close the Add-ons dialog box.
You may need to turn on the Add-on product by going to the View menu and selecting the add-on.
IV. Dreamweaver CS5 Tools
If you are using Dreamweaver CS5, you have a number of analysis tools available to you. Most of them require that you have a copy of your website files downloaded to a folder in your computer.
A. Downloading a copy of the website
You must have access to your website files directly in the web server. Usually, this is through an
FTP connection or through a Local Area Network drive. You should not use a copy of the web
page that you saved from your browser, because scripting, linking, images, and other components may not save correctly.
In this course, we have three folders with sample website files: Consulting Club, Sample Pages v1, and Sample Pages v2.
B. Defining the Local Site
Before working on any website file in Dreamweaver, you should always define a Local Site for the website folder.
1. In Dreamweaver, go to Site → New Site...
2. In the Site Setup dialog box, type the name of the site in the Site Name field, such as Consulting Club.
4. In the Choose Root Folder dialog box, navigate to find the folder that contains your website files. Open that folder and make sure that the correct folder is selected in the lower left message.
5. Click Select.
6. In the Site Setup window, click Save.
Define a Local Site for all three class folders: Consulting Club, Sample Pages v1, and Sample Pages v2.
C. Source code and CSS files
In Dreamweaver, you can easily view the HTML source code as well as the external CSS files. In this way, you can analyze the code and make changes directly to the code.
1. In the Files panel, switch to the Consulting Club Local Site. 2. From the Files panel, double-click index.htm to open it.
3. In the Document toolbar under the file name, Source Code should be selected.
Click pacific.css to view the CSS code. Click Source Code to view the HTML code.
If there were more than one external CSS file linked to this HTML file, you will see a button for each CSS file.
D. Code view, Split view, and Design view
Whether you are looking at the HTML source code or the CSS code, you can view only the Code, only the Design, or both in Split view.
1. In the Document toolbar, click Code, Split, or Design to switch among those views.
Split view
To switch the split from vertical to horizontal, go to View → Split Vertically. Design view
E. Visual Aids
If you are in Design view, you can turn on and off visual aids that will display information about the various sections of the web page.
1. Make sure you are viewing the page in Design view.
F. Preview/Debug in Browser
If your page contains client-side scripts or other interactive elements, those will not display in the Dreamweaver window. One traditional method to test those elements is to preview the page in a browser.
1. In the Document toolbar, click the Preview/Debug in Browser button, and then select a browser from the list.
You can add a browser that is installed in your computer by clicking Edit Browser List...
G. Live View
If you want to stay within Dreamweaver to test those interactive elements, there is a new feature called Live View. This will display client-side scripting as well as display dynamic pages if you have that configured within Dreamweaver.
1. In the Document toolbar, click Live View. Click Live View again to turn it off.
H. CSS Inspect
If you want to analyze a certain element on a page, you can use Live View in conjunction with the
CSS Inspect feature. For example, if you want to change the spacing above or below some text, you
have to find out what is controlling that spacing – what HTML tag and what CSS rule. 1. In the Document toolbar, click Inspect. This will turn on Live View and CSS Inspect.
2. Hover over any element in the web page. The element will highlight, along with spacing and CSS data.
4. This will split the view and highlight the HTML code of the element that you are hovering over.
To turn off CSS Inspect, click the Inspect button again. To turn off Live View, click the Live View button again. To unsplit the view, click the Design button.
I. Code Navigator
To find out what CSS rules are controlling an element on your web page, you can use the Code Navigator.
1. On a Windows computer, press Alt and click on an element on the page. A pop up window will display the CSS rules that are affecting this element.
On a Macintosh computer, press Command-Option and click on an element. If you see the Code Navigator icon, you can click that as well to view the pop-up
window.
2. To view the CSS code, hover over the CSS rule for a pop up summary, or click the CSS rule in the list to view the CSS file.
J. CSS Enable
To test the effect of a CSS rule, you can easily enable or disable properties within a rule. This is helpful when you are creating or modifying a CSS rule.
1. Click in any of the navigation links on the left side.
2. In the CSS Styles panel, select the CSS rule, #navcontainer UL.
3. In the Properties list for this rule, click to the left of the font-size property. This will disable the property so you can view the effect.
4. Click on the disabled icon on the left of the font-size property to turn on the property again.
K. Live View with a live website
If you want to analyze a live website, you can do it through Live View in Dreamweaver.
1. From any HTML page in Dreamweaver, click on the Live View button to turn it on if necessary. 2. In the Document toolbar, enter a URL into the Address field.
3. You are viewing a live web page. You can analyze most areas of this page by viewing the Source Code and supplemental files, and by using CSS Inspect, the Code Navigator, and other Dreamweaver analysis features.
V. Create a New Page using a Sample Page
In this scenario, you have been asked to create a new web page for a training class at the Haas Computing Services website. There will be a link to this page from a paragraph in another page, so you do not need to update any navigation links.
You have been given a sample 2 column layout page (tools.html), a sample 3 column layout page (index.html), and a Microsoft Word document containing the text of the new page.
A. Reviewing the original sample pages
The original sample pages are in the class folder named Sample Pages v1. If you have already created a Local Site for that folder, you can easily see the pages.
1. Close any open files from the previous Local Site. 2. In the Files panel, select Sample Pages v1 from the Local
Site list.
3. Double-click index.html and tools.html to open those files. 4. Notice that there are missing images and missing
formatting. This is because the supplemental CSS files, images, and other files were not given to you.
B. Reviewing the modified sample pages
A modified version of the sample pages is in the class folder named Sample Pages v2. This is what the files might look like if you had been given the key files within the website. If you have already created a Local Site for that folder, you can easily see the pages.
1. Close any open files from the previous Local Site.
2. In the Files panel, select Sample Pages v2 from the Local Site list.
3. Double-click index.html and tools.html to open those files. 4. Notice that index.html still does not look correct. View the
C. Creating and saving a new page
To create a new page, use the original files provided in Sample Page v1. Although the page may not look good in Dreamweaver on your computer, it should look fine when it is copied to the web server and has access to all the supplemental files that it needs.
1. Close any open files from the previous Local Site. 2. In the Files panel, select Sample Pages v1 from the Local
Site list.
3. Double-click index.html and tools.html to open those files. To create a new 2 column layout page, we make a copy
of tools.html.
To create a new 3 column layout page, we make a copy of index.html.
4. From the page that you want to copy, go to File → Save As...
5. In the Save As dialog box, select the top level of your Local Site as the location.
6. In the File name field, enter a new file name.
The file name should be lowercase and contain no spaces. You should use the same file name extension as the already existing HTML files (ie. .htm or .html). Keep in mind that all file names are public, so use appropriate terms.
D. Modifying the new page
When modifying this new page, make changes only in the area where you are going to replace content. Do not make changes to any other areas.
1. From the Files panel, double-click the New training class.doc document in the CONTENT folder.
2. In Microsoft Word, select all the text and copy it.
3. In Dreamweaver, click inside the content area that you want to change.
4. You can drag to select the text to replace, or you can press Ctrl-A to select all the text.
5. Paste the new text from Microsoft Word over the selected old text in Dreamweaver.
6. Modify the new text as necessary by applying Heading or Paragraph formats. 7. Save the file.
VI. Adding a New Page to a Website
In this scenario, you are managing the Haas Consulting Club website and have a copy of the entire site. You want to create a new page for Alumni Information. You would like to add a link to this page in the navigation section of all the current website pages.
A. Reviewing the website structure and code
The website files are in the class folder named Consulting Club. If you have already created a Local Site for that folder, you can easily see the pages.
1. Close any open files from the previous Local Site.
2. In the Files panel, select Consulting Club from the Local Site list.
3. Double-click index.html to open it.
4. Use Dreamweaver tools to analyze the page.
In the Document toolbar, notice that there is a CSS file named pacific.css. In Code view, notice that there are scripts in the HTML code.
In Code view, notice that the page layout is created using <table> tags instead of <div> tags. In Live View, notice that there is one script to switch the image at the top of the page, and
another script to change the content title from “Good afternoon” to “Good evening”. 5. Open some other pages and review them as well.
B. Creating and saving a new page
The easiest way to create a new page is to copy an existing one. We will copy the about.htm page, because it is simpler than the index.htm page.
1. If necessary, double-click about.htm from the Files panel to open it.
2. Go to File → Save As... 3. In the Save As dialog box,
make sure you are viewing the top level of the
Consulting Club Local Site. 4. In the File name field, enter
alumni.htm. 5. Click Save.
C. Updating Meta information
When you make a copy of another page, you should update the Meta information of the new page so it is appropriate to the new page.
1. In the Document toolbar, change the Document Title as necessary.
2. Go to View → Head Content.
3. In the Head content toolbar, select each of the icons to review any keywords or descriptions that may need to be modified in the Property Inspector.
D. Reviewing the CSS stylesheet
Verify that the new page still contains the link to the website’s CSS file.
E. Modifying text
You can type text directly into the new page or copy it from a text document. 1. Make sure you are viewing the Source Code in the Design
view.
2. Change the content title from “About us” to “Alumni Information”.
3. In the Files panel, double-click alumni.doc in the NEW_CONTENT folder.
4. In Microsoft Word, select all the text and copy it.
6. Paste the new text over the selected paragraphs.
F. Inserting an image by dragging
If you want to insert an image, you can use the Insert menu or use this shortcut by dragging the image.
1. In the Files panel, click the plus symbol next to the images folder to expand the folder.
2. Find the image file named rock_outman.jpg.
3. Drag the filename from the Files panel into the web page where you want it to display.
4. In the Image Tab Accessibility Attributes dialog box, enter an appropriate Alternate text, such as “Alumni Photo”. 5. Click OK.
G. Creating a link to an internal page by pointing
If you want to create a link from a word or phrase in a paragraph to an internal web page, you can use the Browse for File icon in the Property Inspector or you can use the Point to File icon.
1. Select the word or phrase that you want to link, such as the word “officers”.
2. In the Property Inspector, drag the Point to File icon next to the Link field to the officers.htm file in the Files panel.
H. Creating a link to an email address
You can create an email link to an email address in your text.
1. Select the email text that you want to link, such as the email “[email protected]”.
2. In the Property Inspector, in the Link field type “mailto:” plus the email address. For example, you can type
I. Adding a link to navigation
Now that we have a new page, we need to create a link in the left navigation area. This left navigation code must be changed on every page in the website.
An easy approach is to create the code on one page, and then use “Find and Replace” to update the HTML code throughout the website.
1. In alumni.htm, click after the text “Join” in the left navigation area.
2. Press Enter, and then type “Alumni”. Notice that the word Alumni does not look like the other links.
3. Select the text “Alumni” and add a link to alumni.htm. Now, the CSS rule properly formats the text to look like the other links.
J. Using Find and Replace to update the website pages
1. Go to Edit → Find and Replace.
2. In the Find and Replace dialog box, from the Find in list, select Entire Current Local Site. 3. From the Search list, select Source Code.
4. In alumni.htm, select the text “Join” from the left navigation, and click Split to view the code. 5. Select the entire codeline for the text “Join”.
<li><a href="join.htm">Join</a></li> 6. Copy it.
8. In the Split view, select the codelines for “Join” and “Alumni”. <li><a href="join.htm">Join</a></li>
<li><a href="alumni.htm">Alumni</a></li> 9. Copy it.
10. In the Find and Replace dialog box, click in the Replace field and paste the code.
11. Click Replace All.
12. In the warning dialog box, click Yes.
13. The Search panel will display all the files where the code was updated. Notice that some files are not listed, such as academics.htm, events.htm, and join.htm.
K. Modifying the HTML code on individual pages
The Find and Replace will update most of the pages in the website, but some pages may need to be updated manually because they were not matched in the Find and Replace.
1. From the Files panel, open academics.htm, events.htm, and join.htm. 2. In alumni.htm, delete the duplicate Alumni codeline if necessary.
3. Select and copy the codeline for the Alumni link. <li><a href="alumni.htm">Alumni</a></li>
4. In each of the three files, paste the Alumni code below the appropriate Join code.
5. Save all files.
L. Applying the “active” id to the left navigation link
Notice that there is another problem. When you view the alumni.htm file in a browser, the left navigation still highlights “About” instead of “Alumni”. This is due to the wrong list item being marked with a CSS ID of “active”.
1. In alumni.htm, notice in the code that the <li> tag for the text “About” has an id=”active” property. If you are comfortable with HTML, you can simply cut and paste this code into the <li> tag for “Alumni”. Otherwise, do the following.
2. In the Design view, click in the text “About”.
3. In the Tag Selector, click on the tag <li#active>. This selects the tag that is marked with the CSS rule.
4. In the Property Inspector, from the ID list, select none to remove the CSS rule.
5. Click in the text “Alumni”.
6. In the Tag Selector, click on the tag <li>. This selects the tag that you want to mark with the CSS rule.