Dreamweaver CS5. Module 2: Website Modification

Transcription

1 Dreamweaver CS5 Module 2: Website Modification

2 Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA 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 Nishikai Consulting Page i

3 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 VI. Adding a New Page to a Website Nishikai Consulting Page ii

4 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 Nishikai Consulting Page 1

5 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: Great resource for how to build a website with hundreds of HTML and CSS examples. Best practices guidelines for building websites that are human-friendly. Official support site for Adobe Dreamweaver. Official website for the World Wide Web Consortium, which sets standards for HTML, CSS, and other web technologies. One of many good websites about CSS Nishikai Consulting Page 2

6 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 Nishikai Consulting Page 3

7 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 Nishikai Consulting Page 4

8 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 Nishikai Consulting Page 5

9 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> <script>... </script> <link rel= stylesheet /> <body>... </body> This surrounds meta information, such as keywords and scripts. This surrounds any client-side scripting, such as Javascript. This contains links to external CSS stylesheets. This surrounds the content that is displayed in the page Nishikai Consulting Page 6

10 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 Add-ons dialog box, click Get Addons 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 Nishikai Consulting Page 7

11 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 Addons dialog box. You may need to turn on the Add-on product by going to the View menu and selecting the add-on Nishikai Consulting Page 8

12 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 In the Site Setup dialog box, type the name of the site in the Site Name field, such as Consulting Club. 3. Click the folder icon to the right of the Local Site Folder field Nishikai Consulting Page 9

13 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. 7. In the Manage Sites dialog box, click Done Nishikai Consulting Page 10

14 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 Nishikai Consulting Page 11

15 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. Code view 2010 Nishikai Consulting Page 12

16 Split view To switch the split from vertical to horizontal, go to View Split Vertically. Design view 2010 Nishikai Consulting Page 13

17 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. 2. In the Document toolbar, click the Visual Aids button and turn on or off your choices Nishikai Consulting Page 14

18 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 The web page will open in a browser and display most interactive elements Nishikai Consulting Page 15

19 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 Nishikai Consulting Page 16

20 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. 3. To view this data better, click the Switch now link in the Document toolbar Nishikai Consulting Page 17

21 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 Nishikai Consulting Page 18

22 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 Nishikai Consulting Page 19

23 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 Nishikai Consulting Page 20

24 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 Nishikai Consulting Page 21

25 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 Nishikai Consulting Page 22

26 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 page in Live View to make it look better Nishikai Consulting Page 23

27 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 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. 7. Click Save Nishikai Consulting Page 24

28 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 Nishikai Consulting Page 25

29 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. After this, simply upload the file to the web server and test to see if it works Nishikai Consulting Page 26

30 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 Nishikai Consulting Page 27

31 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 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 Nishikai Consulting Page 28

32 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. 1. In the Document toolbar, click on the pacific.css link to verify that the CSS file is available Nishikai Consulting Page 29

33 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. 5. In Dreamweaver, select the paragraphs that you want to replace Nishikai Consulting Page 30

34 6. Paste the new text over the selected paragraphs. 7. Apply any Heading, Paragraph, or CSS rule formats as necessary Nishikai Consulting Page 31

35 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 Nishikai Consulting Page 32

36 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 Nishikai Consulting Page 33

37 H. Creating a link to an address You can create an link to an address in your text. 1. Select the text that you want to link, such as the 2. In the Property Inspector, in the Link field type mailto: plus the address. For example, you can type 2010 Nishikai Consulting Page 34

38 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. 4. Save the file Nishikai Consulting Page 35

39 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. 7. In the Find and Replace dialog box, click in the Find field and paste the code Nishikai Consulting Page 36

40 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 Nishikai Consulting Page 37

41 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. 6. Preview in a browser to test the files Nishikai Consulting Page 38

42 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 Nishikai Consulting Page 39

43 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. 7. In the Property Inspector, from the ID list, select active to add the CSS rule Nishikai Consulting Page 40

44 8. Preview the web page to test the change Nishikai Consulting Page 41