Dreamweaver workshops | Main Links
Dreamweaver New Version - Dreamweaver MX – http://www.macromedia.com/software/dreamweaver/productinfo/faq/
Setting up a Site vs. Creating a Page
Dreamweaver has the ability to keep all elements of a web site stored in one place. You can also create individual files and sites without using the site feature.
1. Start Dreamweaver.
2. From the Site Menu choose New Site. Make sure local info. is selected in the category section. Save the site as your last name. Ignore the Link Management options for now (we are doing a local site with no connection for direct publishing).
3. Click the folder icon to the right of the Local Root Folder and navigate to the C: drive. Find a folder called Dreamweaver. Click the Open button and then click the Select button that appears. This folder is now your local root directory for your site. Click OK and Click Create when asked to create a cache file (this creates a record of existing files so Dreamweaver can update links when you move or rename files, pretty handy J
4. Minimize the site window for now and click on the document window.
Starting a New page
1. We will create the index page. If no document is open, you can choose New from the File Menu.
2. From the File Menu choose save. Make sure you are saving in your Dreamweaver folder. Name the file index.htm (the .htm is the default extension and does not need to be typed). Click Save.
3. We want to create the title for the page. The Title box is at the top of the window under the Menu bar. Just type the title in (something like main page). You can also open the Modify Menu. Choose Page Properties. In the Title field, type in My Home Page. Click OK. Save your document.
Formatting Text
1. Type in your first and last name. Hold down the Shift key and press the Enter key. Now type the name of your school. Press the enter key and type the subject you teach.
2. Make sure the Property Inspector is open. When an element is selected in the document window, the Property Inspector commands apply only to the selected element.
3. Select just your name. Use the Property Inspector to change the font type, size, and alignment. WATCH OUT - some properties will change just your name, some (like alignment and headings) change both your name and school. This is because your name and school are separated by a line break (Shift + Enter) instead of a paragraph break (just Enter).
4. The text color can also be set from the Property Inspector. Click on any color to select it.
5. There are three button in the lower right corner of the color box. The eyedropper button can be used to pickup a color from ANYWHERE (try picking up color from another object using the eyedropper). The middle button is the erase button and returns color to default. The button in the right corner takes you to the palette where you can type in any color code number.
6. Checking spelling - Use the Check Spelling command in the Text Menu 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, choose Edit > Preferences > General and select a different dictionary from the pop-up menu.
7. Save the document (CTRL + S).
Previewing Your Page and Viewing HTML
1. Press F12 to view the page in a browser. This creates a temp file in Internet Explorer. You may want to actually open the index file in Explorer and just refresh the file each time there is a change.
2. Close Internet Explorer and go back to Dreamweaver.
3. Now click on the HTML button (you have three choices above the document window: all HTML, No HTML and half and half) and view your page in HTML. Add the <blockquote> tag right after the <body> tag at the top of the screen and the </blockquote> tag right before the </body> tag at the bottom of the HTML screen. Close the HTML editor by click on the No HTML button.
Changing the Background and starting the Index Page (text formatting, date insertion, horizontal rules and special characters)
1. Now we will set up the basic index page. Select all text typed so far and delete.
2. Open the Modify Menu and choose Page Properties. Select a background color or try some of the background images in the image folder.
3. Make sure you set the page title using Page Properties. You can also right click and choose Page Properties from the shortcut menu that appears.
4. You can set the margins from the Page Properties.
Left Margin and Top Margin vs. Margin Width and Margin Height - Specifies the sizes of page margins in the BODY tag. Netscape Navigator ignores these values; Internet Explorer displays margins of the given sizes. For best cross-browser results, provide values for Margin Width and Margin Height whenever you provide values for Left Margin and Top Margin. Dreamweaver doesn't display page margins in the Document window; use Preview in Browser to see the margins
5. Type in the information provided for the example web page. You do not know how to create links or place graphics yet, but place text on the page to represent these items. Go ahead and format the text to your liking.
6. When you do the Date Modified line, use the current date feature Dreamweaver provides (from the Insert Menu choose Date). If you check the Update Automatically box, the date will change every time you save.
7. Special characters can be inserted from the Object palette. Select the Special Characters Panel and choose your character. Or open the Insert Menu and choose Characters.
8. You can insert a line to break up the page using horizontal rules (open the Insert Menu and choose Horizontal Rules). Select the Horizontal rule (click on it) and change the properties using the Property Inspector.
9. Start a new file. Change the background to match your index page background. The page title should be Lesson Plans. Save this page in the Dreamweaver folder with the name lessonplans.htm. We will learn later how to automate certain format defaults for entire web sites.
10. Change the page title to Resources. Use the Save As command and name the file resources.htm.
11. Close this document (make sure your index document is still open).
Creating Links
Document-relative paths (recommended) are the most appropriate paths to use for local links in most Web sites. They're particularly useful when the current document and the linked-to document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder, by specifying the path through the folder hierarchy from the current document to the linked document.
Root-relative paths provide the path from the site's root folder to a document. You might want to use these types of paths if you are working on a large Web site that uses several servers, or one server that hosts several different sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths.
All links in this workshop will be created using Document-relative paths.
1. External Links (sometimes called absolute links) are created by selecting the content you wish the user to {Click} as a link, and use the Properties Inspector to input the URL of the link into the "Link" field. For example, if you had the text "Macromedia" on your page and wanted to make it a link to Macromedia's web page, you highlight the text in the Document Window and input the full (absolute) URL into the "Link" field, in this case http://www.macromedia.com.
2. Internal links include links to other pages within your site. Highlight the text for the Lesson Plan page link.
3. Make sure the Property Inspector is open. Click in the white box next to link. Click the file folder button to browse for a file. Find the lessonplan.htm file you created in the Dreamweaver folder and select the file.
4. Make sure the Relative To drop-down box reads document. You can use the Target drop-down menu to open the link in a different area (used especially with frames).
5. You can use the point-to-file icon to make a link to another file. Open the site window and make sure you can see all of the files created thus far.
6. Highlight the text for the Resources link. Click the point-to-file icon (circle with lines next to the link box. Drag the icon to the file named Resources in the site window as soon as the file name appears in the link box, let go of the mouse button (you can also select the text, hold down the shift button and drag to the file in the site window).
7. Email links can be started from the Insert Menu (select E-Mail Link) or from the Object Palette. Make sure the text for the email link is highlighted before starting the link. When the email link dialog box appears, type the email address and click OK.
8. External links can be typed directly in the Link Box. Always start with http://
Inserting an Image and changing Image Properties
Images and backgrounds are from the following sites
www.hoxie.org/clipart/CLIP00.HTM
www.arthur.k12.il.us/arthurgs/aesbggr.htm
1. Make sure you are viewing your index page. Place the cursor at the bottom of the document (CTRL + End).
2. Make sure the Objects Palette is displayed and the Common Panel is showing.
3. Place your cursor at the location you wish to insert an image in the Document Window and click the “Insert Image” icon in the Objects Palette. Alternately, you can select “Insert/Image” from the main menu.
4. The “Select Image Source” dialog-box pops up. Navigate to your Dreamweaver folder and open the images folder. Select an image file and click the Select button. Important: Make sure "Relative to Document" is selected and not "Relative to Site Root".
5. Clicking on an image causes the Properties Palette to present us with common image properties. Properties include Image Name, Width and Height, Source, Link, Alignment, Alternative text, V and H Space, Target, Low Resolution Source, Border, Map, Refresh, and Edit.
Image Name
Input a name for the image when using Dreamweaver’s Behaviors. Names are
required by JavaScript, the language which Dreamweaver’s Behaviors use. Behaviors
are covered in a later chapter.
W (Width) and H (Height)
Modify the width and height of the image with the “W” and “H” fields. Modifying
an images width and height in HTML is not recommended. A better solution is
to modify the dimensions in an imaging program and place it in your documents.
Src
The “Src” field contains the path to the image relative to the current document.
Link
To make an image act as a hyperlink (instead of text), browse to the file
you wish to link to or input a URL into the “Link” field. Users can {Click}
on the image in the web page to link to another page or site.
Align
Select from standard image alignment settings. These alignment settings
affect the way text is aligned relative to the image as it sits to the left
or right of an image. Keep in mind that the baseline of text is an imaginary
line that characters sit on. For instance, the baseline of the letter “a” sits
at the bottom of the “a”. The baseline of the letter “y” does not sit at the
bottom of the letter, but rather at the bottom of the “v” shaped part of the
“y”. Select from Browser Default (text aligns to the base of the image
along the text’s baseline): Baseline (text aligns to the base of the image along
the text’s baseline), Top (text aligns to the top of the image), Middle (text
aligns to the middle of the image), Bottom (the same as Baseline), Text Top
(text aligns to the top of the image relative to the top of the text (as in
the word to, the top is at the top of the “t”)), Absolute Middle (text aligns
to the middle of the image and the middle of the text), Absolute Bottom (text
aligns to the bottom of the image and the bottom of the text, below the baseline
if characters such as “y” are part of the content). Left and Right to shift
the text to the left or right of the image.
Alt
Input a name for the image in the Alt field. This name differs from
the name you designate for use by Behaviors. The value of the “alt” attribute
is displayed in a small pop-up box when users pass their pointer over the image.
It is also used as an indicator for non-graphics browsers and for browsers that
users have designated should not display graphics. To keep you website compatible
with the widest possible audience, it’s a good idea to input a name into the
Alt field.
V Space / H Space
The V Space and H Space attributes are used to place a value, in pixels,
around the image that designates invisible space. Any other content, such as
text for example, is pushed away from the edges of the image by setting V Space
(for top and bottom) and H Space (for left and right).
Target
The Target attribute is used with Frames. Frames are covered in a later chapter.
Low Src
Select a lower resolution version of the image to display while the higher resolution
image loads. This feature is seldom used in current web development.
Border
When you make an image act as a hyperlink, HTML, by default, places a blue border
around it (or whatever color you’ve designated as the link color). To eliminate
the border, you must input a value of “0”. Dreamweaver does this for you automatically.
If you want to make the border visible, input “1” into the “Border” field.
Borders are seldom, if ever, used in current web development
Align
{Click} the “Align Left, Center, or Right” icons to set the alignment of the
image on the web page.
Map
The “Map” controls are used to create image maps. Image maps are covered later in this chapter.
Refresh
{Click} “Refresh” to import the latest version of the image file. If you’ve
modified the image in an imaging program and saved it to the precise location
and with the precise dimensions of the original, Dreamweaver places the new
version of the image in the Document Window.
Edit
{Click} “Edit” to launch the external image editor you can designate in Preferences
in the “External Editors” category. The image is placed in the image-editing
program where you can perform modifications and resave it.
To Resize an Image:
1. Select the image in the Document window. Resize handles appear at the bottom and right sides of the image and in the bottom right corner.
2. Resize the element, by doing one of the following:
3. To adjust the width of the element, drag the selection handle on the right side.
4. To adjust the height of the element, drag the bottom selection handle.
5. To adjust the width and the height of the element at the same time, drag the corner selection handle.
6. To preserve the element's aspect ratio (its width-to-height ratio) as you adjust its dimensions, Shift-drag the corner selection handle. Elements can be visually resized to a minimum of 6 by 6 pixels.
7. To adjust the width and height of an element to a smaller size (for example, 1 by 1 pixel), use the Property inspector to enter a numeric value. To return a resized element to its original dimensions, click the Refresh button in the Property inspector
Creating Lists
1. Place the insertion point on the line where you want to add a list of new items.
2. Click the Bulleted or Numbered List buttons in the Property inspector.
3. Begin typing the list, pressing Enter to begin another list item.
4. To complete the list, press Enter twice.
5. To create a list using existing text, select a series of paragraphs to make into a list. Click the Bulleted or Numbered List button in the Property inspector
6. To create a nested list, select the list items you want to nest. Click the Indent button in the Property inspector.
7. To change the type of list bullet or number, select the list and click the 'List Item' button in the Properties panel. (You may need to expand the window using the more icon in the panel).
background graphics from www.eosdev.com