Dreamweaver CS5 Basics

Learn the basics of Adobe Dreamweaver by creating a new page and inserting and formatting common HTML items such as links, images and lists using the WYSIWYG interface.

Objectives
o Learn about EdShare o Create a Site Definition o Understand the Adobe Dreamweaver CS5 Interface o Add Basic Text Formatting (bold, italic, headings) o Create Lists o Insert Images o Insert Links o Validate the HTML pages

EdShare

EdShare is a network server available to faculty, staff and students. EdShare is available from computers in offices and labs on campus and available through an SFTP client from residence halls and off campus. It is accessible from any Macintosh OS X or Windows (XP, Vista, 7) computer. Use the same password you use for EdWeb and e-mail. Edshare is used for storing/backing up files and publishing your own website. Publishing a Website through EdShare: Every faculty, staff and student has a "public_html" folder automatically created for them in their personal EdShare directory. We will use this space to publish web pages online. Your web address will be http://myweb.stedwards.edu/username Accessing EdShare on an on-campus Windows 7 PC: Go to the Computer icon on the desktop. Under the heading "Network Location," click the icon next to your username (see the example in the previous screenshot). In your EdShare window, you can copy and paste files for you want to back up and save. You will also see a folder called "public_html" where you will save your web files. Accessing EdShare on an on-campus Mac: In Finder, go to the Go menu, then choose "Connect to Server...". In the server address field, enter: smb://edshare.stedwards.edu/USERNAME (typing your SEU username after the slash). Click Connect, then enter your SEU username and password to access your EdShare window. In

Dreamweaver CS5 Basics - 1

your EdShare, you can copy and paste files for you want to back up and save. You will also see a folder called "public_html" where you will save your web files. Accessing EdShare from off-campus, or from a residence hall? Visit http://think.stedwards.edu/computerhelp/edshare for instructions, or get assistance from the Computer HelpDesk at 448-8443

Getting Ready: Downloading Files for this Tutorial

You can download the files needed for the following tutorial at http://myweb.stedwards.edu/megang/classfiles/index.html There are 3 files needed: 1. index_finish.html 2. cake.jpg 3. vinnie.jpg From the class files website, right-click on the files needed and choose "Save Link As" to download to your computer. After completing this tutorial, this is what the completed file will look like: services.html.

What is Adobe Dreamweaver?

Adobe Dreamweaver CS5: o is the latest professional web editing application for building and managing websites. o creates professional and personal web pages that are compatible with a variety of platforms such as Macintosh and PCs, as well as web browsers such as Internet Explorer, Chrome, Firefox, and Safari. o is often referred to as a What You See Is What You Get (WYSIWYG) software application. This is a term used to describe web-developing software that writes HyperText Mark-Up Language (HTML) code based on the text, images and layout produced in a document.

Dreamweaver CS5 Basics - 2

Setting Up A Site in Dreamweaver with an FTP Connection

Setting up a site in Dreamweaver is one of the first things that should be done when working on a new website. In order to create a new web site in Dreamweaver you will have to set up the site definition. While this setup process isn't required to begin working, site definition is highly recommended to avoid issues involving link updating and file management. On the Welcome Screen, click on the Dreamweaver Site icon under the "Create New" heading (see screenshot). Alternately, go to the Site menu and choose "New Site".

Dreamweaver CS5 Basics - 3

Site Definition

The Dreamweaver Site Setup dialog box gives a generic title of "Unnamed Site 1." However, when working with multiple sites, such as a personal site and a work site, if each name is named "Unnamed Site 1", "Unnamed Site 2", etc, it soon becomes hard to determine which site is which. Choose a name that is unique and descriptive for the site that you will be working on. 1. In the Site Name field, give your site a descriptive name. 2. Next to the Local Site Folder field, click on the folder icon to navigate either to your public_html folder (or a folder saved on your computer where your site files will be stored if you are using a different hosting provider. In this case, you will also need to go into the Advanced Settings to enter the URL for your site). 3. Click the Save button at the bottom of the dialog box.

Dreamweaver CS5 Basics - 4

4. Enter the information above for your EdShare account, substituting your username and password. 5. Click the Save button at the bottom of the dialog box. 6. Click Save again at the bottom of the Site Setup dialog box.

Creating and Saving a New File

Creating new documents is simple in Dreamweaver, and there are many ways to quickly create a new page: - From the Welcome Screen, click HTML from under the "Create New" heading. This will create a
Dreamweaver CS5 Basics - 5

blank HTML document. - Select File > New. This will open the New Document dialog box, which lets you choose a template for your new document. By default, this dialog box will look like the above screenshot. - Right-click on the folder icon in the Files panel next to the name of your site and choose "New file". This will not open the document, but will instead add the document into your Files panel list and allow you to rename the document. This is convenient for creating future pages you would like to have but aren't ready to work on yet. For a detailed look, watch the video at http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs02-creating-new-documents Note: Before you continue, it is very important that you save your file first! You don't want to unexpectedly lose your work. In this lesson save the file as aboutme.html Naming Conventions (adpated from http://caheinfo.wsu.edu/webtips/names.html) Deciding what to name your Web files and folders can be an important part of creating a cohesive Web site. The Web is not as flexible as most desktop computer systems when it comes to file naming. Improperly named files can, at best, be unwieldy and difficult for users to decipher, and at worst, make it impossible for people to visit your pages. Here are some things to avoid when naming files or folders for Web use: - spaces (For example, my file.html is an invalid filename.) Do you ever notice the characters %20 in a URL? This results when the browser or server converts a space in a URL into a code that is more universally understood by computers. - periods that do not immediately precede a file extension (myfile.html is correct; my.file.html is not) - any character that is not a letter, number, dash, or an underscore (while underscores are legal, they are often unnecessary, creating barriers in linking and typing the URL) - capitalization (technically, capitalization is legal, but like underscores, capital letters may not be recognized properly and create unnecessary barriers in linking and typing the URL)

Dreamweaver CS5 Basics - 6

Exploring Dreamweaver

Dreamweaver's workspace consists of the Document Window and a collection of panels, each containing a series of options for formatting, managing and inserting content. Document Window: the browser-approximate main workspace where web pages are created and edited using the panels and toolbars. Files Panel: view and manage the files in your Dreamweaver site. Insert Panel: create and insert new elements (anything that is manually inserted onto your Document Window). The buttons found in this toolbar are organized into categories. Select catagories using the dropdown menu above the icons. Properties Panel: edit the attributes and formatting of any page element that is currently selected on your web page. Take note that your Properties Panel buttons and options may change to reflect any attributes of any selected element, such as when an image is selected. CSS Styles Panel lets you track the cascading style sheet rules and properties that affect a current page element (Current Mode), or the entire document (All Mode). A toggle button at the top of the panel allows you to switch between the two modes. You can also modify the CSS properties in both All and Current mode. Embedded within is the document toolbar that includes three main viewing options: Code, Split, and Design. These three viewing options help you view and manipulate your web pages.

Changing Views in the Document Window

o Code View - This option allows you to view your web page's entire HTML coding as it is generated by Dreamweaver. Many designers use this option in order to enter or edit the HTML code.
Dreamweaver CS5 Basics - 7

o Split View - This viewing option divides both the Design and Code view to allow you to see the HTML coding as you lay out your website. The upper pane displays your HTML code while the lower pane shows you the page as it will appear in the web browser. This view allows a designer excellent mobility between the coding and the layout. It is also best used when you want to debug or troubleshoot a web page. o Design View - This option is the primary view that allows you to view your web page the way it will appear in your web browser. Take note that when you are viewing your web page in this view, all of your HTML coding is hidden. The finished product should look the way it does in this viewing option.

Document Toolbar

The rest of the Document Toolbar includes many other important features: Live View - Sometimes there are discrepancies between whe you see in Design view and what your webpage looks like live on the Web. To preview what your page will look like live on the Web, click the Live View button to toggle these views. Preview/Debug in Browser - Choose what browser you preview your page in. Title Field - Create a Title for your page. This is visible to visitors in the Browser and in search engine results. Your title should be no longer than 65 characters. Visual Aids - Display or hide element borders in Design view.

Workspace Layouts

Dreamweaver CS5 provides 8 preset workspace layouts designed to suit different types of developers or projects. To switch workspace layouts, select a layout from the workspace switcher, in the top-right corner of the application window, as shown in the screenshot. "Classic" refers to the
Dreamweaver CS5 Basics - 8

layout of Dreamweaver CS3. For this tutorial, leave Dreamweaver in the default "Designer" workspace. Creating a Custom Workspace Layout: In addition to using the default workspace layouts, you can also arrange the workspace to your specific needs and save that layout for later use. 1. Arrange the panels and toolbars in the workspace as desired. 2. From the workspace switcher menu, choose "New Workspace". The "New Workspace" dialog box opens. 3. Enter a descriptive name for the workspace and click OK. The new workspace name appears at the top of the application window. You can rename or delete custom workspaces by choosing "Manage Workspaces" from the workspace switcher menu.

Adding and Formatting Text

Formatting text in Dreamweaver is the same as using a standard word processor, such as Microsoft Word. You can: o set formatting styles (such as Paragraphs, Heading 1, Heading 2, Heading 3) for a block of text, o apply text styles such as bold, and italic. NOTE: Other formatting options such as changing the font, size, color, and alignment of a selected text should be done in cascading style sheets , instead of the Properties Panel in Adobe Dreamweaver. Text is entered into Dreamweaver by either typing directly onto the Document Window or inserting the text directly into the code using the Code view. Once this text is in the Document Window you can format it very similar to most word processors. Pressing Enter (Windows) or Return (Macintosh) create a new paragraph. You can start a new paragraph by inserting a line break. The following are some of the most important formatting tools found in Dreamweaver.

The Title Element

In the Document toolbar's Title text field, type in the title. Press Enter (Windows) or Return (Mac). This will define the page title for this page. The page title appears at the top of the browser when the page is being viewed, in search engines

Dreamweaver CS5 Basics - 9

when your site is listed among search results, and is the name used by browsers when the page is bookmarked. Titles should be less than 65 characters (including spaces) to prevent getting cut off when listed in search engine results.

Adding a Heading with the Property Inspector

1. Place your cursor in the Document Window in the desired location. 2. Select from the Property Inspector under Format, Heading 1 3. Type the desired text for your Heading 1.

Text Format in the Property Inspector

Dreamweaver contains three basic paragraph styles: paragraph, heading, and preformatting. They are applied using the Format drop-down list in the Property Inspector panel. o Paragraph - This format ignores white space, so extra spaces within the paragraph appear as only one space when viewed in a browser. Paragraph format uses the HTML code <p></p>, which indicates the text will automatically wrap. o Heading - Headings are used to identify different sections of content on a page. They range from largest and boldest <h1> to smallest <h6>. Headings are applied to the entire paragraph, so you can't mix heading styles within the same line of text. o Preformatted - The preformatted format enables you to space text exactly as you want, including using white space and line breaks. Text doesn't automatically word wrap, so you must press Enter to end a line.

Adding Paragraphs

1. Press Enter (Windows) or Return (Macintosh) after the Heading 1 or previous text. 2. Pressing enter idesignates any following text as a plain paragraph until formatted differently. Type any desired text; for this lesson you can type an introductory paragraph about yourself like

Dreamweaver CS5 Basics - 10

the one above. Note: Dreamweaver always assumes that any inserted text is one complete paragraph. Unless you apply a proper format, then the text found within the <p> </p> tag pair will appear as one complete paragraph.

Adding Line Breaks

The use of white space is important in the design and readability of any website. In Dreamweaver, when you press Return (Enter) key, a new <p> is inserted. Follow any of these simple steps in order to insert a line break. In the Code view, the screenshot above is what the line break will look like. o Press Shift + Enter (Windows) or Shift + Return (Macintosh). o In the Text category of the Insert bar, select Character and click the Line Break icon. o Select Insert > HTML > Special Characters > Line Break. Note: Dreamweaver will also assign a new HTML paragraph for non-breaking space "&n bsp;" between the opening and end tags. If you type on this new line, the non-breaking space is replaced with your content. However, if you leave it blank, that non-breaking space will remain there. Because the tag is not empty, web browsers automatically interpret this paragraph as a blank line.

Spell Check
Use the Check Spelling command to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values. By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, select Edit > Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh), then in the Spelling Dictionary popup menu select the dictionary you want to use. Dictionaries for additional languages can be downloaded from the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support. 1. Select Commands > Check Spelling or press Shift+F7. When Dreamweaver encounters an unrecognized word, the Check Spelling dialog box appears. 2. Select the appropriate option based on how you want the discrepancy handled: Add To Personal - Adds the unrecognized word to your personal dictionary. Ignore - Ignores this instance of the unrecognized word.

Dreamweaver CS5 Basics - 11

Ignore All - Ignores all instances of the unrecognized word. Change - Replaces this instance of the unrecognized word with text that you type in the Change To text box or with the selection in the Suggestions list. Change All - Replaces all instances of the unrecognized word in the same manner.

Bolding Text with "Strong" Tag

1. In the Document Window select the text that you would like to bold. 2. In the Property toolbar, click on the bold icon. Inside the Document Window in Design View, you will notice that the highlighted text is now bolded.

Italics with the "Emphasis" Tag

Similar to bolding text, it's simple to format text as italics. 1. Select the text that you would like to italicize. 2. In the Property toolbar, click on the Italics icon. Inside the Document Window in Design View, you will notice that the highlighted text has been italicized. The screenshot above shows the emphasis tags that were inserted when the Italics icon was clicked.

Dreamweaver CS5 Basics - 12

Adding a Second Heading and an Unordered List

Before you can add a list, you will need a title, something to describe your list. Type the title for your list and highlight the text, and select Heading 2 or an appropriate heading level from the Properties Panel. Click on the unordered list icon (circled above) or bulleted list icon in the Properties Panel. Type in the first item in your list. After doing so, click enter, and there is a second bullet created below the first. Finish the list with as many items as you like. To change from a list to a plain paragraph press enter twice.

Adding a Third Heading

Before our next step where you'll add an image, you might want to add a title - something to describe your image. Type the title for your text, select the text and, select Heading 3 or an appropriate heading level from the Properties Panel.

Dreamweaver CS5 Basics - 13

Adding an Image

1. In the Insert Panel, choose Common from the drop-down menu (if not already open). 2. Under the Common menu, choose the icon with a little tree - it should say Images next to it. After clicking on the icon, an open dialog box will appear. 3. Navigate to where the image is located. In the instance where the picture is located on your hard drive but not in the site folder, then a pop-up dialog box will appear. If you are prompted with this box, you will want to click on yes. After doing so, Dreamweaver will create a copy of the file, and place it into your root directory (the place where your images will be saved).

Alternative ("Alt") Text

After clicking on "yes" to the "files outside of the root folder " (if you happen to get this screen) or after hitting OK, you will be brought to this dialog box. An alternative text is helpful for those using an external device such as a screen reader, or those who have images disabled. If images are disabled, then it will display the alternative text. When testing your page and you happen to see that you have misspelled something in the alternative text, you can easily correct it by clicking on the image and using the Property Toolbar. You can change the alternative text in the alt field of the toolbar.

Dreamweaver CS5 Basics - 14

Image File Formats

Creating an E-mail Link

Aside from creating links to pages, you can create email links that send you correspondence directly to any email account. Creating an email link is easy; first type the text that you want to appear as a hyperlink. When users click on this text, the user's default email application (Eudora, Outlook, etc) will automatically launch a new email message with your email already addressed in the To: field. The following steps are ways to create an email link: 1. Drag-select the text Email YourName. This will highlight the text. 2. In the Properties Panel, type in the command "mailto:" then an email address. Watch your spelling! 3. Hit the Enter key.

Creating a Relative (Internal) Link using Text

The capability to link to pages and sites is what makes the Web dynamic. You can create text or image hyperlinks using the Properties Panel to associate the text with a specific file or web page. The following are steps on how to create hyperlinks using text or images.
Dreamweaver CS5 Basics - 15

1. Type the text you would like to become the anchor text. 2. Select this text. 3. Click the Browse for File icon, next to the Link option, in the Properties Panel. Select an HTML page from your web site, for example your index or home page. Click OK. This text is now linked to an HTML page within your Web Site. 4. Hit enter to make the selected text a link. This link is called a Relative Link. It is relative simply because its linked to a document within this site, not to an external Web site.

Creating an Absolute (External) Link

An absolute link is defined in XHTML because it begins with an "http://" header and includes a full address. The process is almost identical to creating a relative link: 1. Select the text that you want to become a hyperlink. 2. Type the entire the URL into the Link option in the Properties Panel and press Enter (Windows) or Return (Mac). Alternately, for long URLs you may choose to copy the entire URL from the address bar of an open browser then paste the URL into Dreamweaver. 3. Click OK. This text is now linked to an HTML page within your Web Site.

Creating an Image Link

1. Select an image that you want to become a hyperlink. 2. You can create an Absolute Link to an external website by typing the URL, such as http://www.stedwards.edu into the Link field in the Properties toolbar and press Enter (Windows) or Return (Mac). This link is an Absolute Link, because it begins with an http header and includes the full address.

Dreamweaver CS5 Basics - 16

TIP: If your URL is long and complicated, it's best to go to that page in a browser and copy and paste the URL from the browser into Dreamweaver. This will ensure no typos are made.

Adding Special Characters

There are times when your text may contain special characters and diacritical marks. Dreamweaver provides most of these special characters such as the copyright symbol(), trademark(), registered(), or an em dash(-). To add special characters to your text: 1. Position your cursor where you want these special characters on your Document Window. 2. From the Insert Panel, choose Text from the drop-down menu and click on the Characters icon (circled above). By default, the Copyright symbol is chosen. Clicking the downward-pointing triangle will give more options.

Dreamweaver CS5 Basics - 17

Inserting Date & Time Stamps

Most Web pages include date/time stamps, and Dreamweaver can you help you include both of these objects. Here are a few steps on how to insert these onto your Web pages: 1. Place your cursor into the area where you would like to have your date stamp shown. Usually this is located at the bottom of your Web site. 2. Type Updated on: or Created on: 3. In the Common tab of the Insert Panel, click the Date button. 4. An Insert Date dialog box will appear. In this dialog box, choose the format Dreamweaver will use to display the date and time. Check the option for "Update automatically on save". This means that each time you edit this file and save, Dreamweaver will automatically update this date and time. 5. Click OK.

Previewing in Browser from the Design Window

In the Design view there are multiple ways to access the Preview in Browser function. 1. Select a shortcut key for your primary and secondary browsers. This can be set in the Preferences (see previous step) but most likely will be F12 for the primary browser and CTRL +

Dreamweaver CS5 Basics - 18

F12 (Windows) or Command + F12 (Mac) for the secondary browser (if set). 2. At the top of the Design Window on the Document Toolbar there is also a Preview in Browser icon. By clicking the drop down menu any of the browsers set up previously can be chosen. (pictured above) 3. Navigate to File > Preview in Browser and choose a browser. * Always test your webpages in multiple browsers as there are many differences on how each browser might interpret the HTML code.

Dreamweaver Resources
Dreamweaver product page: http://www.adobe.com/products/dreamweaver Official Video Tutorials: http://tv.adobe.com/show/learn-dreamweaver-cs5 Dreamweaver Development Center: http://www.adobe.com/devnet/dreamweaver.html Looking to purchase Dreamweaver and other Adobe software? As a student/staff/faculty member, you are eligible for great discounts on Adobe software: http://www.adobe.com/education/students Alternately, check out Adobe education resellers: http://www.adobe.com/education/solutions/students/studentteacheredition/reseller.html The prices should be comparable, but you may get a deal. IT Circuit certificate program The IT Circuit tracks are designed to improve your technical skills for personal and professional development. Certification through St. Edward's shows employers your strong foundation in professional level software and skills during job searches, changing technological needs or completing personal projects. Learn more and register online: http://think.stedwards.edu/computerhelp/itcircuit

Contact Information
St. Edward's University Instructional Technology Training Office http://think.stedwards.edu/computerhelp/training [email protected] Megan Ura Computer Training Coordinator office: Moody Hall 313, in the Computer HelpDesk MH 309 email: [email protected] phone: 512-448-8554 blog: http://meganura.tumblr.com

Dreamweaver CS5 Basics - 19

twitter: @MeganLUra Special thanks to Vinnie Luu at 2hearts1wedding.com

Dreamweaver CS5 Basics - 20