Lesson 3 - The Dreamweaver Workspace
In this lesson I'll introduce you to some of the major elements of the Design Workspace which you saw in the previous lesson. You may have a different arrangement and view of your panels and windows but you should be able to understand and figure out where to find your commands and tools from my screen shots.
You have already learned that when you launch DW, a Start Page will appear offering you quick access to recently used files and options for creation of new files, templates or tutorials. The Start Page will appear whenever there is no document displayed. If you don't want the Start Page to appear each time you close a file, or upon launching DW, you can select the Don't Show Again checkbox in the lower left corner of the page. If you decide later that you'd like the Start Page to display, you can change your settings in the Preferences window under the General category. Before creating a page bring up the Preferences window and select the New Document category and set the Default Document Type (DTD) to xhtml 1.0 Transitional or Strict. This will allow Dreamweaver to create HTML code that is xhtml compliant.
For now, open one of the files you created inside your content folder for Lesson 2. You can open this file either from the Recent list in the Start Page, or from your Local Files of the Files Panel. If your Files Panel is not displayed, toggle it on using the F8 key or go to the Window Menu - Window>Files. The Document Window is on the left-main part of the screen, the Properties Panel is below the document window, and the Insert, CSS Styles, Databases, and Files Panel is on the right of your screen. If your Files Panel is collapsed, click on the title bar to expand the panel.
Dreamweaver Workspaces
Dreamweaver CS4 makes it easy to customize the workspace the best fits the workflow that you will be using. There is a layout button that lets you select how you will be working. If you are going to work only in code then you might select Code. If you prefer the design window but would also like access to the code then you would select Code and Design.
There is a link to the Adobe Extension Manager which is a separate application where you can browse for widgets like the Lightbox Gallery. Not all of them are free. Once you download a widget it gets installed into Dreamweaver and is accessed through the Insert Panel dropdown menu under TCN Widgets or the Insert menu on the Dreamweaver menubar.
The Extension Manager application is shown below:
The next drop down menu is the Site selector. You may create a new site or manage an existing site.
There are eight predefined workspace layouts targeted for application developers, coders and web designers. You may also create and save new workspaces. To select the workspace click on the Designer drop down menu:
Each of the workspaces includes the same elements (a Design or Code window, panels and toolbars), but Dreamweaver arranges them for enhanced workflow, displaying and hiding elements as appropriate for the development task. Click on each one to find which works best for you.
The Insert Panel
The Insert Panel is a quick way for you to insert content into your Dreamweaver project. For the most part, everything on the Insert Bar can be found in the Insert Menu on the Menu Bar at the top of the Document Window. The Insert Panel lets you enter content with the quick click of a button. The default display for the Insert Panel is the Common category. If you look at the top of the Insert Panel, you'll see the word Common with a small black down pointing triangle. This down arrow indicates that there are additional categories below the Common category.
Below is the list of icons in the Common Group in the Insert Panel:
Take some time to click all the buttons in the Common Panel to see the effect in your document window. You'll note that many of the buttons open windows where you can set attributes for the selected item.
Note: You can display the Insert Panel as a toolbar the way CS3 displayed it by selecting the Classic view under the Designer drop down menu.
Hyperlinks
Click on the Hyperlink icon. You have already linked files within your site from your Expanded Files Panel using the Local Files and the Point to File icon. Now you will learn to use the Hyperlink button too.
Type some text into your document. Then click the hyperlink button. The Hyperlink window will display. This is where you can create the text which you want as the linked text, and then select the file to which you want to link. Use the browse folder icon - pictured in the image below - to browse to the root folder for your site and select one of the files you created. Your current file will link to the file you selected from the text you entered in the Text: field.
For now, just fill out the two top fields and leave the remaining 4 fields blank. Save your file and preview it in the browser by going to the File Menu - File>Preview in Browser, or hitting F12 on your keyboard. Does the link work?
You can also link to a file outside your web site by using an "absolute" path. An absolute path means you type in the entire URL, such as http://www.someplace.com/somepage.html. For example, the following text, Foothill College, uses an absolute path to link to the Foothill College web site (http://www.foothill.edu).
You can also type the text which you would like to link first and then click the Hyperlink button. Below, I select the Foothill College text and then click the Hyperlink icon.
When the Hyperlink window displays, Foothill College appears automatically in the Text: text field. I then entered the URL of Foothill College in the Link: text field.
After pressing the OK button, the text becomes underlined, which provides a visual cue to the user that the text is a hyperlink.
Images
To insert an image into a web page, click your cursor in your document where you'd like to place the image. Go to the Common Insert Panel and click the Image button and select Image.
When you click on the image button, Dreamweaver opens a dialog box for you to browse for the image on your hard drive. Please note carefully the following features of the Select Image Source: window.
Use the Look in: field to select the image file you'd like to insert into your html file. The selected name will appear in the File name: field. Valid image files have file extensions of .gif, .jpg or .png.
When you select an image, the preview of the image will appear in the right pane of the Select Image Source Window along with several image attributes. In my image above, you can see the image preview with the pixel dimensions of 319 (width) x 405 (height). It confirms that this image is in JPEG format, that it's size is 44 kilobytes and that it will take approximately 7 seconds to load on a 28.8 connection. I have set the connection time in my preferences.
The next two fields are very important. The URL: field shows me that my image is inside a folder called images. The last field, Relative To: Document, describes how the path to the image will be entered into my HTML page. For most of our beginning course, set your Relative To: field to Document. The name of my HTML file is to the right of the Document drop down menu.
Here is the image that I just inserted.
I'll show you how to align images to text in another lesson. For now, let's move on to the other categories on the Insert Panel.
Categories of the Insert Panel Drop-Down Menu
Take some time to explore each of the icons on the Insert Panel. Open a new document and click buttons on the different panels to see what appears in your Document Window. Here is a general overview of the Insert Bar:
Common - By now you have familiarized yourselves with the icons in the Common category. This is the group you will use most in this course.
Layout - The Layout group is to assist in the layout of elements on your page. You will use this category when creating tables, divisions, and layers. Note that some of the icons are optioned-out or dimmed, meaning that they aren't available until you have already created an object that requires the use of one of the icons. We will use the Layout category when you learn tables, css, and layers.
Forms - You will learn to create a simple form to collect data later in the course. The Forms group has all the elements you will need to set up your form. For those who know how to create forms in MS Word, you will find the Forms group to be familiar, as you will create form elements such as text areas, lists, drop down menus, check buttons, radio buttons, submit and cancel (reset) buttons. We will discuss forms later in the course. Remember that these same elements are available through the Insert Menu - Insert>Form.
Data - The Data menu group makes connecting to a database as easy as clicking a few button. New data may be added, existing data may be modified or even deleted. The Spry dataset feature allows you to display interactive data in a table that visitors to the web site may sort and even change without having to reload an additional web page.
Spry - The Spry menu group lets you to easily add interactive features such as drop-down menus, animated effects, and complex displays of data to your web site.
InContext Editing - InContext Editing is an online service that allows clients make their own content updates, while enabling designers to maintain the integrity of their Dreamweaver-built website.
Text - The Text menu group has some of the same - and a few additional - attributes or options as the Properties Inspector has for selected text. You can work with the Text category for the next part of this lesson when you begin to format text. You can also access Text options from the Insert Menu - Insert>HTML>Text Objects.
Favorites - This category lets you add your favorite objects from the insert panel.
OK, explore these panels. I spend most time in the Common Category. Here is a brief description of the icons in the Common Menu:
- Hyperlink - insert a hyperlink
- Email Link - insert an email link
- Anchor - insert a named anchor (a link to a named location within a particular page)
- Table - insert a table
- Insert Div Tag - This icon inserts an HTML div tag into your page.
- Images: Image - this icon has a drop down menu with selections for several image-related options. We will use most of these options for this course and I will introduce them to you in the lesson on images.
- Media - this icon has a drop down menu with selections for several media-related options. We will use FLV later in this course.
- Date - insert the date with option to automatically update upon save. You can select different a different format for the display of the date.
- Server Side Includes - instructs your server to insert a file into your HTML code when your page is requested by a browser. We will not use this icon in this course.
- Comment - insert a comment into your source code that can not be viewed from the web page.
- Head - insert meta data, links and other tags in the head.
- Script - insert script or no script into html.
- Templates - this icon has a drop down menu with selections for template-related options.
- Tag Chooser - you can select a tag from the Tag Chooser and then insert it into your page. You can also choose a tag and then select the Tag Info button, which will expand the O'Reilly HTML Reference library in the bottom panel.
Additional Tool Bars
There are four tool bars which can be opened or hidden, as well as the status bar at the bottom of the Document Window. To see the optional toolbars, go to the View Menu and select View>Toolbars. You may choose any combination of these toolbars for your use.
The Document Toolbar is displayed above the Document window and contains buttons for Code, Split, and Design views; Live View; Live Code; the Title: input text area; buttons for File management, Preview/Debug in browser, Refresh Design View (F5), and View options and Visual Aids, Validate Markup, Browser Compatibility. Note that several of the buttons have down pointing arrows indicating there are menu options associated with the button. The Live View button lets you view your document as it would render in a browser in your Dreamweaver workspace.
The image displayed below shows the Document Toolbar in the top row. The second row, which is not part of the Document Toolbar, has buttons for the Source Code followed by all of the files that the current document is linking to. In this case the linked files are screen_styles.css and print_styles.css. When you click on either of these the selected file is displayed in the document window where it may be edited.
The Standard Toolbar is displayed below the Document Toolbar and contains buttons for New Document creation, Open file, Browse in Bridge, Save file, Save All files, Print Code, Cut, Copy, Paste, Undo, and Redo.
The Coding Toolbar is displayed to the left of the Code view window, while the Style Rendering Toolbar displays above the Document Toolbar. Both toolbars contain a number of tools which are extremely useful for HTML and CSS coding, but are beyond the scope of this course.
The Status Bar at the base of the Document Window is always visible, and contains a great deal of useful information. In the lower left of the status bar you'll find the Tag Selector, which shows the hierarchy of tags surrounding the current selection. When you click in or on an element on the screen, the Tag Selector will select the corresponding HTML tag to help you differentiate the items on the page. For example right now, I'm typing in a paragraph which is inside a cell in a table in the body of my document object. The Tag Selector presents a visual hierarchy of the tags to help me identify which tag I might want to select in order to do something with that tag. What would I do with the tag? Change some of the attributes. For example, I might want to change this paragraph from left aligned to center. Look at the following image and notice that I have selected the <p> tag in the Tag Selector and this entire paragraph is selected in the document.
If you're working in Split view, you can see the entire selection highlighted in both the top and bottom panes of the Document Window.
On the right lower side of the Status Bar you'll find icons for the Select tool, the Hand tool (which allows you to click and drag your document), and the Zoom tool and Set magnification pop-up menu (which allows you to set a magnification level for your document). Next are the Window Size drop down menu and the Page Size/Download Speed indicator. The Window Size menu lets you resize your document window to various preset or custom pixel dimensions. Don't worry about this now. We'll discuss the value of doing this in one of our Special Topics discussions on the Myth of 800x600 later in the course. The Download Speed indicator displays the approximate file size of the current file, including the dependent media that are embedded into the file, and the approximate download time for the current pages based on the preference you set. You can tailor the connection speed in the Preferences in order to meet the needs of your target audience.
You can have multiple documents open at once in DW. In windows, your documents will appear as tabs in the left upper part of the Document window. On a Mac, the different documents will float.
* click the link below to continue with this lesson *
Creating Content