Dreamweaver CS5. Module 2: Website Modification
|
|
- Melvyn Hopkins
- 2 years ago
- Views:
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
Dreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
Adobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Web Design. Links and Navigation
Web Design Links and Navigation Web Design Link Terms HTTP, FTP, Hyperlink, Email Links, Anchor HTTP (HyperText Transfer Protocol) - The most common link type and allows the user to connect to any page
Introduction to Web Development with Dreamweaver
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a
Intro to Web Development
Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
IAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit
DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)
understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver
LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive
Adobe Dreamweaver - Basic Web Page Tutorial
Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized
Dreamweaver CS6 Basics
Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a
Chapter 14: Links. Types of Links. 1 Chapter 14: Links
1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and
How to create pop-up menus
How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached
ACE: Dreamweaver CC Exam Guide
Adobe Training Services Exam Guide ACE: Dreamweaver CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation
(These instructions are only meant to get you started. They do not include advanced features.)
FrontPage XP/2003 HOW DO I GET STARTED CREATING A WEB PAGE? Previously, the process of creating a page on the World Wide Web was complicated. Hypertext Markup Language (HTML) is a relatively simple computer
Adobe Certified Expert Program
Adobe Certified Expert Program Product Proficiency Exam Bulletin Adobe Dreamweaver CS5 Exam # 9A0-146 ACE Certification Checklist The checklist below will help guide you through the process of obtaining
ADOBE Dreamweaver CS3 Basics
ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/27/2008 Contents Before you start with Dreamweaver....
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
CourseBuilder Extension ADOBE elearning SUITE 6
CourseBuilder Extension ADOBE elearning SUITE 6 Legal notices Legal notices For legal notices, see http://help.adobe.com/en_us/legalnotices/index.html. iii Contents Chapter 1: Getting Started Overview..............................................................................................................
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Micro soft Expression Web 4
University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open
Dreamweaver Domain 1: Setting Project Requirements
Dreamweaver Domain 1: Setting Project Requirements TRUE/FALSE 1. A new work using copyrighted work can be copyrightable in and of itself, but it must differ sufficiently from the original or it must contain
Microsoft Outlook 2007. Effective Email Inbox Organization
Microsoft Outlook 2007 Effective Email Inbox Organization University of California, Berkeley Haas School of Business Presented by AcademyX San Francisco, CA www.academyx.com Nishikai Consulting Oakland,
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called
CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide
CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 5216260 or helpdesk@uncp.edu, or visit
Training Manual Version 1.0
State of Indiana Content Management System Open Text v.11.2 Training Manual Version 1.0 Developed by Table of Contents 1. Getting Started... 4 1.1 Logging In... 4 1.2 OpenText Menu...5 1.3 Selecting a
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...
SmartBar for MS CRM 2013
SmartBar for MS CRM 2013 Version 2013.26 - April 2014 Installation and User Guide (How to install/uninstall and use SmartBar for MS CRM 2013) The content of this document is subject to change without notice.
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
WYSIWYG Manual Ironcities Stadt Kolbermoor 2012
WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Editor Manual TinyMCE used on http://www.ironcities.net is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing
II. Creating Your Website
II. Creating Your Website In this part of Dazzle the Web with Dynamic Dreamweaver, we will learn the following skills: 1. Define a website 2. Create our home page 3. Add content to the home page 4. Format
Quick Guide for Dreamweaver CC Basics April 2016 Training:
Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
How to work with external Cascading Style Sheets
Adobe Dreamweaver CS5 Activity 3.6 guide How to work with external Cascading Style Sheets Many web professionals find it that using an external style sheet--a style sheet that exists in its own file--offers
Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...
Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with
Joomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
Web Ambassador Training on the CMS
Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create
CMS Training. Prepared for the Nature Conservancy. March 2012
CMS Training Prepared for the Nature Conservancy March 2012 Session Objectives... 3 Structure and General Functionality... 4 Section Objectives... 4 Six Advantages of using CMS... 4 Basic navigation...
Dreamweaver Tutorial - Dreamweaver Interface
Expertrating - Dreamweaver Interface 1 of 5 6/14/2012 9:21 PM ExpertRating Home ExpertRating Benefits Recommend ExpertRating Suggest More Tests Privacy Policy FAQ Login Home > Courses, Tutorials & ebooks
Human Resources Website Drupal User Guide
Human Resources Website Drupal User Guide Logon http://www.hr.ucsb.edu/user You will be given a unique username and password for editing the website. Basic Tools Quick Start 1. EDIT TAB on content page
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Macromedia Dreamweaver 8 Developer Certification Examination Specification
Macromedia Dreamweaver 8 Developer Certification Examination Specification Introduction This is an exam specification for Macromedia Dreamweaver 8 Developer. The skills and knowledge certified by this
Content Manager User Guide Information Technology Web Services
Content Manager User Guide Information Technology Web Services The login information in this guide is for training purposes only in a test environment. The login information will change and be redistributed
How-to Guide: MIT DLC Drupal Cloud Theme
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
Dreamweaver 8 Basics
Dreamweaver 8 Basics Software: Dreamweaver 8 Platform: Mac/PC Overview Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up the development process
Table of Contents. Welcome... 2. Login... 3. Password Assistance... 4. Self Registration... 5. Secure Mail... 7. Compose... 8. Drafts...
Table of Contents Welcome... 2 Login... 3 Password Assistance... 4 Self Registration... 5 Secure Mail... 7 Compose... 8 Drafts... 10 Outbox... 11 Sent Items... 12 View Package Details... 12 File Manager...
Dreamweaver - Adding content
Dreamweaver - Adding content Creating your first website Part 3: Adding content to pages This part will show you how to add content to web pages in Adobe Dreamweaver CS3. You can add many different kinds
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
WinSCP: Secure File Transfer Using WinSCP for Secure File Transfer on Windows
WinSCP: Secure File Transfer Using WinSCP for Secure File Transfer on Windows Overview WinSCP is an SFTP (Secure File Transfer Protocol), FTP (File Transfer Protocol), and SCP (Secure Copy Protocol) application
Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager
Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager ce-dennis@wiu.edu Malpass Library 637 Phone: 309.298.2434 1 Setting
Microsoft Expression Web
Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as
Creating a Website with Publisher 2013
Creating a Website with Publisher 2013 University Information Technology Services Training, Outreach, Learning Technologies & Video Production Copyright 2015 KSU Division of University Information Technology
COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA
COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA ADOBE DREAMWEAVER AUTHORING TOOL DTM 3612 SEMESTER 1 SESI 2010/2011 DTM 3612 ADOBE DREAMWEAVER AUTHORING
CWU Content Management System (CMS) User Guide
CWU Content Management System (CMS) User Guide Last Revision: July 14, 2014 Version: 1.7 CWU Content management System (CMS) User Guide 2 Table of Contents NOTE: Copyright Guidelines... 4 What is a content
How to add rich media to a web page
Adobe Dreamweaver CS6 Project 3 guide How to add rich media to a web page To add interest and interactivity, you can easily add rich media to web pages. Rich media includes most kinds of video, Flash videos,
Web Editing Basics 1 TOPICS
Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from
Website Editor User Guide
CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
How to create buttons and navigation bars
How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,
Basic Web Development @ Fullerton College
Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your
How to Edit an Email. Here are some of the things you can do to customize your email:
How to Edit an Email Editing a new email created during the Create an Email wizard or editing an existing email in the Edit Email section of the Manage Emails tab is easy, using editing tools you re probably
Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface...
2 CONTENTS Module One: Getting Started... 6 Opening Outlook... 6 Setting Up Outlook for the First Time... 7 Understanding the Interface...12 Using Backstage View...14 Viewing Your Inbox...15 Closing Outlook...17
Dreamweaver: Managing Your Site and Content. Oxford University Computing Services
Dreamweaver: Managing Your Site and Content Oxford University Computing Services How to Use This Book The Exercises This handbook accompanies the taught sessions for the course. Each section contains a
User s Guide. Version 2.1
Content Management System User s Guide Version 2.1 Page 1 of 51 OVERVIEW CMS organizes all content in a tree hierarchy similar to folder structure in your computer. The structure is typically predefined
Cascade Server CMS Quick Start Guide
Cascade Server CMS Quick Start Guide 1. How to log in 2. How to open page 3. How to edit a page 4. How to create a new page 5. How to publish a page 6. How to change settings to view publish status page
Writer Guide. Chapter 15 Using Forms in Writer
Writer Guide Chapter 15 Using Forms in Writer Copyright This document is Copyright 2005 2008 by its contributors as listed in the section titled Authors. You may distribute it and/or modify it under the
Using ADOBE CONTRIBUTE CS5
Using ADOBE CONTRIBUTE CS5 Legal notices Legal notices For legal notices, see http://help.adobe.com/en_us/legalnotices/index.html. iii Contents Chapter 1: What s new Chapter 2: Setting up Contribute The
Content Author's Reference and Cookbook
Sitecore CMS 6.2 Content Author's Reference and Cookbook Rev. 091019 Sitecore CMS 6.2 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents
Content Management System User Guide
CWD Clark Web Development Ltd Content Management System User Guide Version 1.0 1 Introduction... 3 What is a content management system?... 3 Browser requirements... 3 Logging in... 3 Page module... 6 List
Adobe CQ5 Authoring Basics Print Manual
Adobe CQ5 Authoring Basics Print Manual SFU s Content Management System SFU IT Services CMS Team ABSTRACT A summary of CQ5 Authoring Basics including: Setup and Login, CQ Interface Tour, Versioning, Uploading
Web Design - Css Layout (Page 1)
Web Design - Css Layout (Page 1) A CSS layout is made up of a set of nested div tags (rectangular containers), as seen below. We will give each div tag an ID so that we can target it with a CSS style of
Getting Started with Dynamic Web Sites
PHP Tutorial 1 Getting Started with Dynamic Web Sites Setting Up Your Computer To follow this tutorial, you ll need to have PHP, MySQL and a Web server up and running on your computer. This will be your
Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business
2015 Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take you through all the areas that you are likely to use in order to maintain, update
ITD 210 EXAM 1 STUDY GUIDE
ITD 210 EXAM 1 STUDY GUIDE FINAL EXAM: ADOBE WEB COMMUNICATION USING DREAMWEAVER CS3 OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website.
Step 2 Open Kompozer and establish your site. 1. Open Kompozer from the Start Menu (at the Polytechnic) or from the downloaded program.
Kompozer User Guide KompoZer is web authoring software that combines web file management and easy-to-use WYSIWYG web page editing. It is designed to be easy to use, making it ideal for non-technical computer
Combe Abbey School Online Fixtures Diary
Combe Abbey School Online Fixtures Diary USER GUIDE Including Technical Guide Contents Purpose...4 Frequently Asked Questions...5 What is the purpose of the system?...5 Where can the system be used?...5
Terminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471
Need help? Call the ITD Lab, x7471 1 Contents Introduction... 2 Login to Terminal 4... 2 What is the Difference between a Section and Content... 2 The Interface Explained... 2 Modify Content... 3 Basic
EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators
EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators Version 1.0 Last Updated on 15 th October 2011 Table of Contents Introduction... 3 File Manager... 5 Site Log...
Chapter 15 Using Forms in Writer
Writer Guide Chapter 15 Using Forms in Writer OpenOffice.org Copyright This document is Copyright 2005 2006 by its contributors as listed in the section titled Authors. You can distribute it and/or modify
Internet Explorer 7. Getting Started The Internet Explorer Window. Tabs NEW! Working with the Tab Row. Microsoft QUICK Source
Microsoft QUICK Source Internet Explorer 7 Getting Started The Internet Explorer Window u v w x y { Using the Command Bar The Command Bar contains shortcut buttons for Internet Explorer tools. To expand
Administrator s Guide
SEO Toolkit 1.3.0 for Sitecore CMS 6.5 Administrator s Guide Rev: 2011-06-07 SEO Toolkit 1.3.0 for Sitecore CMS 6.5 Administrator s Guide How to use the Search Engine Optimization Toolkit to optimize your
Creating a Web Site with Publisher 2010
Creating a Web Site with Publisher 2010 Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This document may be
USER GUIDE. Unit 2: Synergy. Chapter 2: Using Schoolwires Synergy
USER GUIDE Unit 2: Synergy Chapter 2: Using Schoolwires Synergy Schoolwires Synergy & Assist Version 2.0 TABLE OF CONTENTS Introductions... 1 Audience... 1 Objectives... 1 Before You Begin... 1 Getting
Vignette CMS V7 Content User Instruction Manual
Vignette CMS V7 Content User Instruction Manual College of Literature, Science, and the Arts University of Michigan Version 2.8 Prepared by LSA Development, Marketing & Communications lsa.web.support@umich.edu
Microsoft. Outlook 2007 Calendar Management Tools For. Jerry Maletsky Dash Designs Consulting Technology Training And Consulting
Microsoft 1 Outlook 2007 Calendar Management Tools For Jerry Maletsky Dash Designs Consulting Technology Training And Consulting Microsoft Outlook 2007 Calendar Management Tools For The Haas School of
Create a Simple Website. Intel Easy Steps 1 2012 Intel Corporation All rights reserved.
Create a Simple Website Intel Easy Steps 1 2012 Intel Corporation Website Creating a Simple Website As more and more people are using the Internet to get information, it has become very important for businesses
www.dfcconsultants.com 800-277-5561 Microsoft Dynamics GP Audit Trails
www.dfcconsultants.com 800-277-5561 Microsoft Dynamics GP Audit Trails Copyright Copyright 2010 Microsoft. All rights reserved. Limitation of liability This document is provided as-is. Information and
Appendix A How to create a data-sharing lab
Appendix A How to create a data-sharing lab Creating a lab involves completing five major steps: creating lists, then graphs, then the page for lab instructions, then adding forms to the lab instructions,
Creating a Web Site with Adobe Dreamweaver
Creating a Web Site with Adobe Dreamweaver This tutorial will teach you how to: 1. Create a new web site using Adobe Dreamweaver 2. Create a new webpage using the Dreamweaver editor 3. Create numbered
Create a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
Dreamweaver Cascading Style Sheets
Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...
Transferring Your Hosting Account
Transferring Your Hosting Account Setting up your Web site on our secure hosting servers So you want to host your Web site on our secure servers, but you want to avoid costly mistakes and excessive site
Site Maintenance Using Dreamweaver
Site Maintenance Using Dreamweaver As you know, it is possible to transfer the files that make up your web site from your local computer to the remote server using FTP (file transfer protocol) or some
JTouch Mobile Extension for Joomla! User Guide
JTouch Mobile Extension for Joomla! User Guide A Mobilization Plugin & Touch Friendly Template for Joomla! 2.5 Author: Huy Nguyen Co- Author: John Nguyen ABSTRACT The JTouch Mobile extension was developed
Sitecore InDesign Connector 1.1
Sitecore Adaptive Print Studio Sitecore InDesign Connector 1.1 - User Manual, October 2, 2012 Sitecore InDesign Connector 1.1 User Manual Creating InDesign Documents with Sitecore CMS User Manual Page