Bonus Lesson: Working with Code

Size: px
Start display at page:

Download "Bonus Lesson: Working with Code"

Transcription

1 15 Bonus Lesson: Working with Code In this lesson, you ll learn how to work with code and do the following: Select code elements in new ways Collapse and expand code entries Write code using code hinting Use Code Navigator to identify and edit CSS code Use Live Code to test and troubleshoot dynamic code Use the Inspect mode to identify HTML elements and associated styling Access and edit attached files using the Related Files interface This lesson will take about 60 minutes to complete. Download the project files for this lesson from the Lesson & Update Files tab on your Account page at and store them on your computer in a convenient location, as described in the Getting Started section of this book. Your Accounts page is also where you ll find any updates to the lessons or to the lesson files. Look on the Lesson & Update Files tab to access the most current content. BL-2

2 Dreamweaver s claim to fame is as a visually based HTML editor, but its code-editing features don t take a back seat to its graphical interface and offer few compromises to professional coders and developers. BL-3

3 P Note: If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See Getting Started at the beginning of the book. P Note: If you are starting from scratch in this exercise, see the Jumpstart instructions in the Getting Started section at the beginning of the book. Then, follow the steps in this exercise. Code tools overview As the leading WYSIWYG HTML editor, Dreamweaver allows users to create elaborate webpages and applications without touching or even seeing the code that does all the work behind the scenes. But for many designers, working with the code is not only a desire but a necessity. But Dreamweaver also makes it as easy to work with a page in Code view as in Design view. Although the program is geared toward visual designers, Dreamweaver offers significant productivity tools for coders and developers, too. In fact, it helps to unify the entire web development team by providing a single platform that can handle almost any needed task. You ll find that often a specific task is actually easier to accomplish in Code view than in Design view alone. In this exercise, you ll learn more about how Dreamweaver makes working with the code an effortless task. 1 In Dreamweaver, open tips.html from the site root folder. 2 Switch to Code view. P Note: The Code view options are selectable only when Code view is active. 3 Choose View > Code View Options, and examine the options available. BL-4 Lesson 15 Bonus Lesson: Working with Code

4 Code view options Word Wrap Wraps long lines of code to fit it in the code window, making it easier to read and edit. Line Numbers Displays numbers at the left margin of the code window to help quickly identify specific lines of code. Hidden Characters Displays icons representing spacing and breaks within the code that are normally invisible. An invaluable option in certain applications where line breaks and whitespace can affect the way the code operates. Highlight Invalid Code Visually marks code that is improperly constructed. Syntax Coloring Formats specific types of code to display in color to help you quickly identify tags and other markup from content. Auto Indent Automatically indents child code elements to make the markup easier to read. Syntax Error Alerts in Info Bar Displays a warning at the top of the Code view window identifying any structural errors in the code and pointing to the line on which the error occurs. These seven options help to simplify code editing and improve productivity when working in the code. Note any check marks appearing beside the options, indicating that it s already selected. For most purposes, you ll want to have Word Wrap, Line Numbers, Syntax Coloring, and Syntax Error Alerts in Info Bar selected. 4 Select Word Wrap, Line Numbers, Syntax Coloring, and Syntax Error Alerts in Info Bar to enable the options, if necessary. Code view and Design view are closely integrated, and many of Dreamweaver s features work identically in both. For example, you can use tag selectors in Code view to help quickly and easily select entire code elements. Selecting code Dreamweaver provides several methods for interacting with and selecting code in Code view. Using line numbers You can use your cursor to interact with the code several ways. 1 Scroll down and locate the following code: <li>wash clothes in cold water</li>. Adobe Dreamweaver CC Classroom in a Book BL-5

5 2 Drag the cursor across the code. Using the cursor in this way you can select the code in any portion or in its entirety. However, using the cursor in this way can be prone to error, causing you to miss vital portions of the code. At times, using line numbers to select whole lines of code is easier. 3 Click the line number beside <li>wash clothes in cold water</li>. The entire line is selected within the window. 4 Drag down the edge of the window to select the next four lines of code. Dreamweaver highlights all four lines completely. Using line numbers can save a lot of time and avoid errors during selection, but doesn t take into account the actual structure of the code elements, which may begin and end in the middle of a line. Tag selectors provide a better way to select logical code structures. Using tag selectors One of the easiest and most efficient ways to select code is to use the tag selectors, as you have frequently done in previous lessons. 1 Scroll down and locate the following code: <li>wash clothes in cold water</li>. 2 Insert the cursor anywhere in the <li> element. Examine the tag selectors at the bottom of the document window. The tag selectors in Code view display the <li> tag and all its parent elements, the same way they do in Design view. Note how some elements are dimmed, indicating that they are part of the template and therefore locked. 3 Select the <li> tag selector. The entire <li> element, including its content, is highlighted in Code view. It can now be copied, cut, moved, or collapsed. The tag selectors clearly reveal the structure of the code, even without referring to the Code view display. The <li> element is a child of <ul>, which is in turn a child of a <div>, which is a child of <div#accordion1>, and so on. This element contains the <li> but also the jquery Accordion with all of its content. Although manually selecting the entire BL-6 Lesson 15 Bonus Lesson: Working with Code

6 <li> element within the Code view window would be easy, selecting the entire list or the <div> that contains it would be more difficult. But the tag selectors make the chore a simple click. 4 Select the <ul> tag selector. The code for the list under the heading At Home is entirely selected. 5 Select the <div> tag selector. The code for the content window of the top Accordion panel is selected. 6 Select the <div#accordion1> tag selector. The code for the entire Accordion is now selected. Using the tag selectors allows you to identify and select the structure of any element on your page, but it requires you to select the parent tag yourself. Dreamweaver offers another tool that can do it for you automatically. Using parent tags Using the Parent Tag selector in the Code view window makes the job of selecting the hierarchical structure of your page even simpler. 1 Choose View > Toolbar > Coding to display the Coding toolbar, if necessary. 2 Insert the cursor anywhere in the tip text Wash clothes in cold water in the <li> element. 3 In the Coding toolbar, click the Select Parent Tag ( ) icon. The <li> element is highlighted. 4 Click the Select Parent Tag ( ) icon again or press the Ctrl/Cmd-[ (left bracket) shortcut. The entire <ul> element is selected. 5 Click the Select Parent Tag ( ) icon again. The entire <div> element is selected. 6 Press Ctrl/Cmd-[ (left bracket) to select <div#accordion1>. Each time you click the icon or press the shortcut key Dreamweaver selects the parent element of the current selection. Once you ve selected it, working with long sections of code can be unwieldy. Code view offers other handy options to collapse long sections to make them easier to work with. Adobe Dreamweaver CC Classroom in a Book BL-7

7 Collapsing code Collapsing code is a productivity tool that makes a simple process out of copying or moving large sections of code. Code sections are also collapsed when coders and developers are looking for a particular element or section of a page and they want to temporarily hide unneeded code sections from view. Code can be collapsed either by selection or by logical element. Use the Collapse Selection ( ) and Expand Selection ( ) icons on the toolbar on the left edge of the Code view window to collapse or expand sections of code. 1 Select the first three items in the unordered list, starting with <li>wash clothes in cold water</li>. These items are part of a long list of tips within an unordered list, within an Accordion panel. Note the selection markers by the line numbers on the left. The minus/arrow ( ) icons indicate that the selection is currently expanded. 2 In the Coding toolbar, click one of the minus/arrow ( ) icons on the left or the Collapse Selection ( ) icon to collapse the selection. The selection collapses, showing only the <li> code element and a snippet of text from the collapsed code. You can also collapse code based on logical elements, like <ul> or <div>. 3 Insert the cursor in the <ul> tag. Click the Collapse Full Tag ( ) icon. The entire <ul> element collapses in the Code window, showing only the <ul> element and a portion of the next element. In either case, the code hasn t been deleted or damaged in any way. It still functions and operates as expected. Also, the collapse functionality appears only in Dreamweaver Code view; on the web or in another application the code will appear normally. To expand the code, just reverse the process, as described in the following section. BL-8 Lesson 15 Bonus Lesson: Working with Code

8 Expanding code When the code is collapsed, you can copy, cut, or move it like you would any other selected element. You can expand elements one at a time, or all at once. 1 If necessary, insert the cursor in the collapsed <ul> element. A plus/arrow ( ) is displayed, indicating that the code has been collapsed. To expand the code you can click this icon. 2 Click the plus/arrow icon to the left of the collapsed code to expand it. E Tip: You can also double-click a collapsed selection to expand it. Windows Macintosh The <ul> element expands, but the three <li> elements collapsed earlier are still collapsed. Dreamweaver provides a method to expand all elements at once. 3 In the Coding toolbar, click the Expand All ( ) icon. All collapsed elements are now expanded. Code can be added, edited, or deleted in Code view. Adding new code Code view isn t just for tweaking or troubleshooting the code, it s a fully functioning code writing environment with numerous productivity enhancements for coders. Code view can not only color-code the tags and markup to make it easier to read, but it also offers code hinting for 10 different web development languages, including but not limited to HTML, CSS, JavaScript, and PHP. Coding hinting for HTML markup is extensive and includes support for CSS, too. In this exercise, you will create a hyperlink to jump to the top of the page as in Lesson Open news.html. Switch to Code view, if necessary. 2 Scroll down and insert the cursor before the following code: <h2>shopping green saves energy</h2>. Adobe Dreamweaver CC Classroom in a Book BL-9

9 3 Type < The code hinting window appears showing you a list of HTML-compatible codes you can select from. 4 Type p and press the spacebar to insert a space. The code-hinting window opens again; this time it displays compatible HTML attributes for the <p> element. 5 Double-click the class attribute. Code hinting now shows a list of available CSS classes. 6 Double-click the CSS ctr class. Dreamweaver inserts the ctr class within the quotation (" ") marks and moves the insertion point outside the closing quotation mark. 7 Type > The opening <p> tag is complete. Now you can build the hyperlink. 8 Type <a and press the spacebar to insert a space. Coding hinting offers a list of compatible attributes for the anchor element. 9 Type or double-click the href attribute. Dreamweaver automatically creates the attribute and adds the proper structure, moving the insertion point between two quotation marks. A Browse link appears enabling you to navigate to a file on the hard drive, if desired. In this case, the link is an internal reference to the anchor named top that you created in Lesson 10 and added to the template. BL-10 Lesson 15 Bonus Lesson: Working with Code

10 10 Type #top When you enter code manually, you have to move the cursor manually outside the element before you can continue. 11 Press the Right Arrow key to move the cursor outside the closing quote (") mark. 12 Type >Return to top This closes the opening <a> tag and creates the link text. 13 Type </ Dreamweaver automatically closes the appropriate tag, in this case using the closing </a> tag. You can now close the <p> element, too. 14 Type </ and press Enter/Return to insert a new paragraph. The </p> closing tag is created automatically by Dreamweaver, and the element and link are complete. 15 Copy the entire <p> element, including the hyperlink, and paste copies after each of the news items. 16 Save all files. As you can see, Dreamweaver simplifies the task of writing code by providing a variety of productivity enhancements, including code hinting and automatic code completion. These features work in a similar fashion for all the supported languages. Another task that you can do as easily in Code view as you do in Design view is troubleshooting your CSS styling. Identifying CSS styling Code Navigator and CSS Designer work equally as well in Code view as they do in Design view. You can work in confidence knowing that these tools have your back. Using Code Navigator Code Navigator is an essential tool for troubleshooting CSS problems and identifying pertinent CSS rules for specific markup. It functions identically in Design, Code, or Live view. Adobe Dreamweaver CC Classroom in a Book BL-11

11 1 Click the document tab for tips.html to bring it to the front, or open it from the site root folder. Select Split view. The document window splits, showing both Code and Design view side by side. The document features a jquery Accordion containing three sections of green tips. 2 In the Design view window, right-click the text Green Tips. Choose Code Navigator from the context menu. The Code Navigator window appears. 3 Note the names and order of the CSS rules displayed in Code Navigator. 4 Repeat step 2 in the Code view window with the <h1>green Tips</h1> code. The names and order of the rules in Design and Code view are identical. You can even use it in Live view. 5 Click the Live view button. Test the functionality of the Accordion panels on the Design view side of the split. The Accordion panels open and close interactively. Note how each panel displays a hover effect when the cursor passes over the panel tab. You can use Code Navigator to help identify the CSS rules that format the Accordion structure. Code Navigator can be accessed in any view of Dreamweaver. 6 Position the cursor over a closed tab. Note how the tab changes color when the cursor passes over it. 7 Right-click the tab, and choose Code Navigator from the context menu. Examine the names and the order of the rules that appear. In Live view the list of CSS rules is much larger, indicating that much of the styling is applied dynamically via JavaScript. Note that the last rule displayed in the window is one that formats the a:hover behavior of the tab. 8 Position the cursor over an open tab. Note how the heading is styled in white and does not display the hover effect when the cursor passes over it. BL-12 Lesson 15 Bonus Lesson: Working with Code

12 9 Right-click the tab and choose Code Navigator from the context menu. Note that the last rule displayed in the window is one that formats the a:active behavior of the tab, overriding the styling applied by the a:hover rule. Code Navigator was able to identify the various rules that play a role in the formatting of the Accordion. But Code Navigator is a static tool, you have to go out of your way to activate it to check your CSS styling. The new CSS Designer plays a similar role but actually displays the CSS styling dynamically. Using CSS Designer CSS Designer plays two major functions: It allows you to create CSS styling visually and then displays the rules applied to or affecting any selected element live. 1 If necessary, open tips.html, and turn off Live view. CSS Designer works the same way in Code or Design view. 2 Select Split view and insert the cursor into a heading of an open tab in the Design view window. Note the display in the CSS Designer Selectors pane. The Selectors pane shows a list of CSS rules that are formatting the a:active tab behavior. 3 Insert the cursor into a heading in the same element in the Code view window. The list of CSS selectors remains the same. 4 Insert the cursor in the heading of a closed Accordion tab in Code view. Note the list of CSS selectors. The Selectors pane displays the rule formatting the a:hover state of the Accordion tab. 5 Insert the cursor in the heading of a closed Accordion tab in Design view. Note the list of CSS selectors. The list of CSS selectors remains the same. The CSS Designer works equally well in Design and Code views, allowing you to troubleshoot your styling no matter where you are at the moment. Adobe Dreamweaver CC Classroom in a Book BL-13

13 Working with Live Code Checking the styling and effects of static CSS styling by using the CSS Designer is a relatively easy matter. But the jquery Accordion and other types of processes use JavaScript and other dynamic processes to apply CSS styling. Since these behaviors occur only in a browser with user interaction, troubleshooting these processes is impossible using the methods you ve learned so far in this book. Live Code permits you to view how the code actually functions when it is displayed live in the browser. This is especially helpful for all interactive processes or web applications that can alter the code through user interaction, such as with the JQuery Accordion widget. 1 If necessary, open tips.html, and display the page in Split view with Live view turned off. Observe the code that comprises the headings for the jquery Accordion tabs. Each heading is composed of an <h3> element containing a hyperlink placeholder. None of the headings features any class or ID attributes. 2 Switch to Live view and click the Live Code button. The Code view side of the document window changes color, indicating that Live Code is active. The HTML code can t be edited when Live Code is active. 3 Examine the same Accordion tab headings again. The headings now display dynamically applied class and ID attributes. 4 Click a closed tab to open it. Observe the code applied to the Accordion tab. Parts of the code will flash pink for a moment as the attributes change before your eyes based on your selection. The attributes are applied dynamically by JavaScript. 5 Click the At Home tab to open it. Move the cursor over and off the tab and observe how the code changes. Although the tab is open and doesn t display any hover effects, the jquery behavior still applies the ui-state-hover class to the element whenever the mouse cursor passes over it. BL-14 Lesson 15 Bonus Lesson: Working with Code

14 You have already learned that many times effects you see within a webpage are the results of multiple CSS rules applied to multiple elements, sometimes one nested inside the other. Although you can use Code Navigator and/or CSS Designer to identify the specific elements and rules at play, Dreamweaver provides a tool Inspect mode that makes the job of tracking down the specific rules quick and easy. Using Inspect mode Inspect mode works together with Live view to quickly survey your page content and visually connect HTML elements to the pertinent CSS styling. Inspect mode can work with Live view alone, or combined with Live view and Live Code. 1 If necessary, open tips.html, switch to Split view, and choose View > Split Vertically. 2 If necessary, open the CSS Designer. 3 If necessary, select Live view and Live Code. 4 Click the Inspect button. When Inspect mode is invoked, Dreamweaver highlights elements in color within Design view as the cursor passes over them. At the same time, the selected element is highlighted in Code view, and the CSS Designer displays the pertinent styling information. 5 Pass the cursor over the headings within the Accordion tabs, the text items within the bulleted list, and other elements on the page. Dreamweaver highlights each element in Code view and displays the appropriate formatting in the CSS Designer. Notice how hyperlinks are displayed differently than the element containing them. 6 Position the cursor near but not over any of the bullets in the list. Dreamweaver now highlights the <ul> element and its formatting. 7 Position the cursor over text within one of the bullets. E Tip: If you click an element in the document window, Inspect mode is disengaged automatically. The <li> element is highlighted. Once the elements or formatting is identified, you can also use Code view to edit the HTML or any of the files. Adobe Dreamweaver CC Classroom in a Book BL-15

15 Working in related files The Related Files interface is practically black magic for coders and developers. It provides access to most of the attached files without having to look for them on the hard drive or server, or even to open them. Each of the related files is displayed at the top of the document window and is basically only a click away. For example, you can use the Related Files interface to access the CSS formatting right inside Code view. 1 Click mygreen_styles.css in the Referenced Files display. The mygreen_styles.css file appears in the Code view split. You can edit the CSS rules directly in this window. Code Navigator can also help to locate specific rules. For instance, the rule formatting the <h1> element is stored in mygreen_styles.css. Using Code Navigator, you can locate the appropriate rule with a single click. 2 Right-click the Green Tips heading, and choose Code Navigator from the context menu. Select h1 from the Code Navigator window. The Split view code window focuses on the h1 in mygreen_styles.css rule. Code Navigator will focus on the pertinent rule no matter what file it is stored within. E Tip: Changes made in any related file are not saved when you save the HTML document itself. When you close the document, Dreamweaver will prompt you to save these files. Be sure to click Yes. Choose File > Save All at regular intervals to prevent the loss of any changes should the program crash. 3 Right-click the At Home tab text. Using Code Navigator, select the.ui-helper-reset rule. Dreamweaver loads the style sheet jquery.ui.core.min.css and focuses on the.ui-helper-reset rule automatically. If desired, you can access CSS formatting and work on the source code in Code view simultaneously. BL-16 Lesson 15 Bonus Lesson: Working with Code

16 Accessing Split Code view Why should coders be denied the ability to work in two windows at the same time? Split Code view enables you to work in two different documents or two different sections of the same document at once. Take your pick. 1 Choose View > Split Code. Turn off Live view. The document displays two Code view windows: one focusing on the source code and the other on the CSS style sheet. You can use Code Navigator in Code view to access CSS formatting as you did in Design view. 2 Right-click one of the <ul> elements in the jquery Accordion. Choose Code Navigator, and select the.content ul,.content ol rule. The window displaying the CSS file focuses on the selected rule. You can even use Split Code view to display two views of the source code. 3 Insert the cursor in the window displaying the CSS code. In the Related Files interface, select Source Code. Scroll to the bottom of the source code. The window loads a second version of the source code. Both windows are editable, both can be scrolled independently of each other, and both can make changes to the selected document, if desired. Commenting your code Comments allow you to leave notes within the code that won t be visible in the browser that can provide important information, say to describe the purpose of certain markup. Dreamweaver has a built-in feature for adding comments. 1 Open tips.html, and switch to Code view, if necessary and select Source Code from the Related Files list. 2 Insert the cursor before <div id="accordion1">. Adobe Dreamweaver CC Classroom in a Book BL-17

17 3 Click the Apply Comment ( ) icon. A pop-up menu appears with several comment options. 4 Choose Apply HTML Comment. An HTML comment block appears with the text cursor positioned in the center. 5 Type Formatting for the Accordion widget is applied by jquery files located in the jqueryassets folder as your comment. The comment appears in gray within the code. 6 Insert a new paragraph after the comment. 7 Switch to Design view and examine the page content above the jquery Accordion. The comment text is not visible in Design view. 8 Preview the page in Live view. Examine the page content above the jquery Accordion. The comment text is not visible in Live view. 9 Preview the page in the default browser. Examine the page content above the jquery Accordion. The HTML comment is visible in Code view, but doesn t appear in Design view, Live view, or the browser. 10 Save all files. You have used a number of techniques to make working with code easier and more efficient. You have learned how to select code, collapse/expand code; you have used the Code Navigator, CSS Designer, Live Code, and Inspect mode to locate and edit CSS formatting; and you have added an HTML comment. Overall, you have learned that whether you are a visual designer or a hands-on coder you can rely on Dreamweaver to offer vital features and power to create and edit HTML code without compromises. BL-18 Lesson 15 Bonus Lesson: Working with Code

18 Review questions 1 What could cause code and the related tag selectors to appear dimmed? 2 True or false: Collapsed code will not appear in Design view or the browser until it is expanded. 3 In what ways does Dreamweaver assist you in creating new code? 4 What display mode allows you to see how code is dynamically changed, as in the case of the jquery Accordion? 5 What Dreamweaver feature provides instant access to most attached files? Review answers 1 Code that is locked and uneditable like that supplied by a Dreamweaver template and text in the body of a comment all appear in gray. 2 False. Collapsing code has no effect on the display or operation of the code. 3 Dreamweaver provides code hinting for HTML tags, attributes, and CSS styling as you type, along with support for ColdFusion, JavaScript, and PHP among other languages. 4 Live Code mode displays the code dynamically, changing it as you click or hover over hyperlinks and interactive elements on the page. 5 The Related Files interface appears at the top of the document window and allows users to instantly access and edit CSS, JavaScript, and other compatible file types linked to the webpage to provide styling, interactivity or other support. Adobe Dreamweaver CC Classroom in a Book BL-19

Dreamweaver MX The Basics

Dreamweaver MX The Basics Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia

More information

With Dreamweaver CS4, Adobe has radically

With Dreamweaver CS4, Adobe has radically Introduction to the Dreamweaver Interface With Dreamweaver CS4, Adobe has radically reengineered the Dreamweaver interface to provide a more unified experience across all of the Creative Suite applications.

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

Figure 1 Properties panel, HTML mode

Figure 1 Properties panel, HTML mode How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

Using Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles

Using Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Parish . User Manual

Parish  . User Manual Parish Email User Manual Table of Contents LOGGING IN TO PARISH EMAIL... 3 GETTING STARTED... 3 GENERAL OVERVIEW OF THE USER INTERFACE... 3 TERMINATE THE SESSION... 4 EMAIL... 4 MESSAGES LIST... 4 Open

More information

ver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^

ver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^ Betsy Bruce John Ray Robyn Ness Sams Teach Yourself Adobe Wfl lif ver W ^msssi^ mm WlM ^lg^ SAMS 800 East 96th Street, Indianapolis, Indiana, 46240 USA Table of Contents Introduction What Is Dreamweaver

More information

Adobe Dreamweaver CS6 Digital Classroom

Adobe Dreamweaver CS6 Digital Classroom Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver

More information

ORGANIZING YOUR ARTWORK WITH LAYERS

ORGANIZING YOUR ARTWORK WITH LAYERS 9 ORGANIZING YOUR ARTWORK WITH LAYERS Lesson overview In this lesson, you ll learn how to do the following: Work with the Layers panel. Create, rearrange, and lock layers and sublayers. Move objects between

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

More information

PVII Pop Menu Magic 3

PVII Pop Menu Magic 3 The state of the art in Dreamweaver menu systems... Create gorgeous and responsive multi-level menus in Dreamweaver with just a few clicks! We hope you enjoy using this product as much as we did making

More information

Section 1. How to use Brackets to develop JavaScript applications

Section 1. How to use Brackets to develop JavaScript applications Section 1 How to use Brackets to develop JavaScript applications This document is a free download from Murach books. It is especially designed for people who are using Murach s JavaScript and jquery, because

More information

Dreamweaver CS6. Level 1. Topics Workspaces Basic HTML Basic CSS

Dreamweaver CS6. Level 1. Topics Workspaces Basic HTML Basic CSS Level 1 Topics Workspaces Basic HTML Basic CSS Tour the Workspace The arrangement of panels and menus you use to interact with a document is called the workspace. Much of Illustrator is customizable: you

More information

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout

More information

Creating a Navigation Bar with a Rollover Effect

Creating a Navigation Bar with a Rollover Effect Creating a Navigation Bar with a Rollover Effect These instructions will teach you how to create your own navigation bar with a roll over effect for your personal website using Adobe Dreamweaver CS4. Your

More information

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next. Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection

More information

Guidelines for doing the short exercises

Guidelines for doing the short exercises 1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel

More information

Site Owners: Cascade Basics. May 2017

Site Owners: Cascade Basics. May 2017 Site Owners: Cascade Basics May 2017 Page 2 Logging In & Your Site Logging In Open a browser and enter the following URL (or click this link): http://mordac.itcs.northwestern.edu/ OR http://www.northwestern.edu/cms/

More information

HEADINGS & TOCS IN WORD 2007

HEADINGS & TOCS IN WORD 2007 HEADINGS & TOCS IN WORD 2007 MODUS OPERANDI WORD TRAINING Prepared by: Karen Dyson 07-August-2009 ABSTRACT: This training session teaches you how to control how headings look and how to use automatic features

More information

Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 Adobe Dreamweaver CS4 About Dreamweaver Whether creating simple blog pages complex web sites, Dreamweaver provides users with a powerful set of web-design tools necessary f the task. Its userfriendly interface

More information

How to Use Internet Explorer 9

How to Use Internet Explorer 9 How to Use Internet Explorer 9 The Basics: 1. The Address Bar is located at the very top of your open webpage. This is where you will type in the address of the website you d like to visit. For example,

More information

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website. 9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather

More information

Adobe Fireworks CS Essential Techniques

Adobe Fireworks CS Essential Techniques Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally

More information

Dreamweaver CS4. Introduction. References :

Dreamweaver CS4. Introduction. References : Dreamweaver CS4 Introduction References : http://help.adobe.com 1 What s new in Dreamweaver CS4 Live view Dreamweaver CS4 lets you design your web pages under realworld browser conditions with new Live

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,

More information

Creating Buttons and Pop-up Menus

Creating Buttons and Pop-up Menus Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about

More information

CHAPTER 1 COPYRIGHTED MATERIAL. Finding Your Way in the Inventor Interface

CHAPTER 1 COPYRIGHTED MATERIAL. Finding Your Way in the Inventor Interface CHAPTER 1 Finding Your Way in the Inventor Interface COPYRIGHTED MATERIAL Understanding Inventor s interface behavior Opening existing files Creating new files Modifying the look and feel of Inventor Managing

More information

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?

More information

WORKING WITH TEMPLATES

WORKING WITH TEMPLATES 6 WORKING WITH TEMPLATES Lesson Overview In this lesson, you ll learn how to work faster, make updating easier, and be more productive. You ll use Dreamweaver templates, library items, and server-side

More information

Quark XML Author September 2016 Update for Platform with Business Documents

Quark XML Author September 2016 Update for Platform with Business Documents Quark XML Author 05 - September 06 Update for Platform with Business Documents Contents Getting started... About Quark XML Author... Working with the Platform repository... Creating a new document from

More information

Exploring the Interface

Exploring the Interface 2 Exploring the Interface Touring the Interface 13 Setting a Default Workspace 26 Saving Workspace Layouts 26 Defining a Default Browser 27 Using Shortcut Keys 28 One of the most daunting aspects of working

More information

HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS

HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS GETTING STARTED (LOGIN) 2 SITE MAP (ORGANIZE WEBPAGES) 2 CREATE NEW PAGE 3 REMOVE PAGE 6 SORT PAGES IN CHANNEL 7 MOVE PAGE 8 PAGE PROPERTIES

More information

FrontPage 2000 Tutorial -- Advanced

FrontPage 2000 Tutorial -- Advanced FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right

More information

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant

More information

A Guide to Quark Author Web Edition 2015

A Guide to Quark Author Web Edition 2015 A Guide to Quark Author Web Edition 2015 CONTENTS Contents Getting Started...4 About Quark Author - Web Edition...4 Smart documents...4 Introduction to the Quark Author - Web Edition User Guide...4 Quark

More information

Table of Contents. Chapter 2. Looking at the Work Area

Table of Contents. Chapter 2. Looking at the Work Area Table of Contents... 1 Opening a PDF file in the work area... 2 Working with Acrobat tools and toolbars... 4 Working with Acrobat task buttons... 13 Working with the navigation pane... 14 Review... 18

More information

Quark XML Author October 2017 Update for Platform with Business Documents

Quark XML Author October 2017 Update for Platform with Business Documents Quark XML Author 05 - October 07 Update for Platform with Business Documents Contents Getting started... About Quark XML Author... Working with the Platform repository...3 Creating a new document from

More information

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property

More information

m ac romed ia D r e a mw e av e r Curriculum Guide

m ac romed ia D r e a mw e av e r Curriculum Guide m ac romed ia D r e a mw e av e r Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and

More information

Hands On: Dreamweaver CS3 NEW SPRY Widgets

Hands On: Dreamweaver CS3 NEW SPRY Widgets What is a Spry Widget? Spry widgets provide access to dynamic and interactive elements you might like to have on your Web page. These Spry elements include: Menu Bars Tabbed Panels Accordion Effects Collapsible

More information

Quark XML Author for FileNet 2.8 with BusDocs Guide

Quark XML Author for FileNet 2.8 with BusDocs Guide Quark XML Author for FileNet.8 with BusDocs Guide Contents Getting started... About Quark XML Author... System setup and preferences... Logging on to the repository... Specifying the location of checked-out

More information

Introduction to the MODx Manager

Introduction to the MODx Manager Introduction to the MODx Manager To login to your site's Manager: Go to your school s website, then add /manager/ ex. http://alamosa.k12.co.us/school/manager/ Enter your username and password, then click

More information

Dreamweaver is a full-featured Web application

Dreamweaver is a full-featured Web application Create a Dreamweaver Site Dreamweaver is a full-featured Web application development tool. Dreamweaver s features not only assist you with creating and editing Web pages, but also with managing and maintaining

More information

OU EDUCATE TRAINING MANUAL

OU EDUCATE TRAINING MANUAL OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface

More information

Quark XML Author for FileNet 2.5 with BusDocs Guide

Quark XML Author for FileNet 2.5 with BusDocs Guide Quark XML Author for FileNet 2.5 with BusDocs Guide CONTENTS Contents Getting started...6 About Quark XML Author...6 System setup and preferences...8 Logging in to the repository...8 Specifying the location

More information

AutoCAD 2009 User InterfaceChapter1:

AutoCAD 2009 User InterfaceChapter1: AutoCAD 2009 User InterfaceChapter1: Chapter 1 The AutoCAD 2009 interface has been enhanced to make AutoCAD even easier to use, while making as much screen space available as possible. In this chapter,

More information

Dear Candidate, Thank you, Adobe Education

Dear Candidate, Thank you, Adobe Education Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:

More information

QuickStart Guide MindManager 7 MAC

QuickStart Guide MindManager 7 MAC QuickStart Guide MindManager 7 MAC Contents Welcome to Mindjet MindManager...... 1 Technical Support and Registration... 1 About this User Guide............... 1 Learn about MindManager and maps... 2 What

More information

Design Importer User Guide

Design Importer User Guide Design Importer User Guide Rev: 9 February 2012 Sitecore CMS 6.5 Design Importer User Guide How to import the design of an external webpage as a Sitecore layout or sublayout Table of Contents Chapter 1

More information

Computer Applications Info Processing

Computer Applications Info Processing Lesson 2: Modify the Structure and Appearance of Text Microsoft Word 2016 IN THIS CHAPTER, YOU WILL LEARN HOW TO: Apply styles to text. Change a document s theme. Manually change the look of characters

More information

Web Content. Overview. Web Content Mini WYSIWYG Editor

Web Content. Overview. Web Content Mini WYSIWYG Editor Web Content Overview Web Content Assets are used for entering HTML-formatted text or media items. They are created and edited via a mini-wysiwyg Editor. Web Content Assets support Dependency Manager tags

More information

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this

More information

Lava New Media s CMS. Documentation Page 1

Lava New Media s CMS. Documentation Page 1 Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the

More information

Adding Frames. In This Chapter

Adding Frames. In This Chapter B1 Adding Frames Normally, a Web page fills an entire browser window. However, a browser window can be split into two or more smaller individual panes called frames. Each frame contains an individual Web

More information

Exploring SharePoint Designer

Exploring SharePoint Designer Exploring SharePoint Designer Microsoft Windows SharePoint Services 3.0 and Microsoft Office SharePoint Server 2007 are large and sophisticated web applications. It should come as no surprise, therefore,

More information

Objective % Select and utilize tools to design and develop websites.

Objective % Select and utilize tools to design and develop websites. Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret

More information

Creating Pages with the CivicPlus System

Creating Pages with the CivicPlus System Creating Pages with the CivicPlus System Getting Started...2 Logging into the Administration Side...2 Icon Glossary...3 Mouse Over Menus...4 Description of Menu Options...4 Creating a Page...5 Menu Item

More information

COPYRIGHTED MATERIAL. Using Adobe Bridge. Lesson 1

COPYRIGHTED MATERIAL. Using Adobe Bridge. Lesson 1 Lesson Using Adobe Bridge What you ll learn in this lesson: Navigating Adobe Bridge Using folders in Bridge Making a Favorite Creating metadata Using automated tools Adobe Bridge is the command center

More information

Dreamweaver Basics Workshop

Dreamweaver Basics Workshop Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What

More information

Dreamweaver MX Overview. Maintaining a Web Site

Dreamweaver MX Overview. Maintaining a Web Site Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...

More information

Getting Started with CSS Sculptor 3

Getting Started with CSS Sculptor 3 Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use

More information

Excel Intermediate

Excel Intermediate Excel 2013 - Intermediate (103-124) Multiple Worksheets Quick Links Manipulating Sheets Pages EX16 EX17 Copying Worksheets Page EX337 Grouping Worksheets Pages EX330 EX332 Multi-Sheet Cell References Page

More information

Confluence User Training Guide

Confluence User Training Guide Confluence User Training Guide Below is a short overview of wikis and Confluence and a basic user training guide for completing common tasks in Confluence. This document outlines the basic features that

More information

Using Microsoft Excel

Using Microsoft Excel About Excel Using Microsoft Excel What is a Spreadsheet? Microsoft Excel is a program that s used for creating spreadsheets. So what is a spreadsheet? Before personal computers were common, spreadsheet

More information

Create the Left Navigation SSI Quick Guide

Create the Left Navigation SSI Quick Guide Create the Left Navigation SSI Quick Guide The WCMS system gives you the flexibility to assemble lists of existing content items manually to create the Left Navigation. The Server Side Include [WYSIWYG]

More information

USER GUIDE MADCAP FLARE Topics

USER GUIDE MADCAP FLARE Topics USER GUIDE MADCAP FLARE 2018 Topics Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished

More information

Tabbing Between Fields and Control Elements

Tabbing Between Fields and Control Elements Note: This discussion is based on MacOS, 10.12.6 (Sierra). Some illustrations may differ when using other versions of macos or OS X. The capability and features of the Mac have grown considerably over

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Animation and style sheets

Animation and style sheets L E S S O N 6 Animation and style sheets Lesson objectives To learn about animation and style sheets, you will: Suggested teaching time 35-40 minutes a b Animate text, outlines, and web pages with Dynamic

More information

Café Soylent Green Chapters 4

Café Soylent Green Chapters 4 Café Soylent Green Chapters 4 You will be completing the Links Tutorial from your textbook, Chapter 4, pgs. 223-227 AND the Images Tutorial, Chapter 5, pgs. 278-287. You will need to be at a computer that

More information

Creating Simple Links

Creating Simple Links Creating Simple Links Linking to another place is one of the most used features on web pages. Some links are internal within a page. Some links are to pages within the same web site, and yet other links

More information

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters Using Microsoft Word Paragraph Formatting Every time you press the full-stop key in a document, you are telling Word that you are finishing one sentence and starting a new one. Similarly, if you press

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

Getting Started with. PowerPoint 2010

Getting Started with. PowerPoint 2010 Getting Started with 13 PowerPoint 2010 You can use PowerPoint to create presentations for almost any occasion, such as a business meeting, government forum, school project or lecture, church function,

More information

Introduction to Dreamweaver CS3

Introduction to Dreamweaver CS3 TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout

More information

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Set and modify document

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

Using Dreamweaver CC. 5 More Page Editing. Bulleted and Numbered Lists

Using Dreamweaver CC. 5 More Page Editing. Bulleted and Numbered Lists Using Dreamweaver CC 5 By now, you should have a functional template, with one simple page based on that template. For the remaining pages, we ll create each page based on the template and then save each

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and

More information

Authoring World Wide Web Pages with Dreamweaver

Authoring World Wide Web Pages with Dreamweaver Authoring World Wide Web Pages with Dreamweaver Overview: Now that you have read a little bit about HTML in the textbook, we turn our attention to creating basic web pages using HTML and a WYSIWYG Web

More information

Dreamweaver. An Introduction to editing webpages

Dreamweaver. An Introduction to editing webpages Dreamweaver An Introduction to editing webpages Edited: 2/7/18 Salter, Sharina D Contents Session Description... 3 Overview... 3 Introduction to Dreamweaver... 3 Toolbar... 5 Getting Started... 6 Create

More information

CHAPTER 3. Entering Text and Moving Around

CHAPTER 3. Entering Text and Moving Around CHAPTER 3 Entering Text and Moving Around Typing text is what word processing is all about. You can, in fact, create a perfectly respectable document by typing alone. Everything else all of the formatting

More information

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.

More information

Interface. 2. Interface Adobe InDesign CS2 H O T

Interface. 2. Interface Adobe InDesign CS2 H O T 2. Interface Adobe InDesign CS2 H O T 2 Interface The Welcome Screen Interface Overview The Toolbox Toolbox Fly-Out Menus InDesign Palettes Collapsing and Grouping Palettes Moving and Resizing Docked or

More information

Getting Started with Access

Getting Started with Access MS Access Chapter 2 Getting Started with Access Course Guide 2 Getting Started with Access The Ribbon The strip across the top of the program window that contains groups of commands is a component of the

More information

< building websites with dreamweaver mx >

< building websites with dreamweaver mx > < building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.

More information

Scorebook Navigator. Stage 1 Independent Review User Manual Version

Scorebook Navigator. Stage 1 Independent Review User Manual Version Scorebook Navigator Stage 1 Independent Review User Manual Version 11.2013 TABLE OF CONTENTS Getting Started... 1 Browser Requirements... 1 Scorebook Navigator Browser Compatability... 1 Logging in...

More information

PVII HEADLINE SCROLLER MAGIC

PVII HEADLINE SCROLLER MAGIC PVII HEADLINE SCROLLER MAGIC The state of the art in Dreamweaver widgets... Create gorgeous and responsive headline scrollers in Dreamweaver with just a few clicks! We hope you enjoy using this product

More information

MS Components: Quick Start

MS Components: Quick Start MS Components: Quick Start A selection of the most commonly used CMS components with guides on why and how to use them Author: Vic Fascio, based on EMG s CCSF Component User Guide (the complete reference

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

Photoshop Fundamentals

Photoshop Fundamentals Lesson 3 Photoshop Fundamentals Photoshop Fundamentals How to Navigate your Document Zooming in and out To zoom in and out on your Photoshop document, hold down the Command key (Ctrl on Win) and press

More information

Publishing Electronic Portfolios using Adobe Acrobat 5.0

Publishing Electronic Portfolios using Adobe Acrobat 5.0 Step-by-Step Publishing Electronic Portfolios using Adobe Acrobat 5.0 2002, Helen C. Barrett Here is the process we will use to publish a digital portfolio using Adobe Acrobat. The portfolio will include

More information

A Guided Tour of Doc-To-Help

A Guided Tour of Doc-To-Help A Guided Tour of Doc-To-Help ii Table of Contents Table of Contents...ii A Guided Tour of Doc-To-Help... 1 Converting Projects to Doc-To-Help 2005... 1 Using Microsoft Word... 10 Using HTML Source Documents...

More information