DreamWeaver - ALEX - Alabama Learning Exchange by GeorgeIloka

VIEWS: 23 PAGES: 16

									Setup

1. Workspace Setup – Please choose the workspace layout you prefer - Select: Designer
2. Click: OK
3. Click: Continue

Defining Your Site

   Click: Manage Sites (from the right side panel)
   1. Click: New
   2. Select: Site
   3. Name your site – Example: HCS
   4. Click: Next
   5. Do you want to work with a server
       technology such as ColdFusion,
       ASP.NET, ASP, JSP, or PHP – Select:
       No, I do not want to use a server
       technology? (With ColdFusion MX,
       you can build and deploy web
       applications and web services with
       less training and fewer lines of code than ASP, PHP, and JSP).
   6. Click: Next
   7. How do you want to work with your files during development? – Edit local copies on my machine, then upload to
       server when ready Remember where you are designating this information.
   8. Where on your computer do you want to store your files? Keep default
   9. Click: Next
   10. How do you connect to your remote server? Local/Network –Setting this information up allows you to easily upload
       your files to the server.
   11. What folder on your server do you want to store your files in?
            Click folder to browse to your web folder.
            Double Click: My Network Places
            Double Click: Entire Network
            Double Click: Microsoft Windows Network
            Double Click: HCSDOM
            Double Click: HCSWEB1
            Double Click: Elementary, Middle, High, Centers, Magnet, K-8
            Double Click: Your school’s folder
            Ex: \\Hcsweb1\elementary, \\Hcsweb1\Middle, \\Hcsweb1\high, \\Hcsweb1\centers, \\Hcsweb1\magnet,
                \\Hcsweb1\k8
   12. Click: Next
   13. Do you want to enable checking in and checking out of files, to ensure that you and your co-workers cannot edit the
       same file at the same time? No, do not enable check in and check out.
   14. Click: Next
   15. Click: Done
   16. Click: Done (You may get a message saying Adobe Web cannot determine the remote server time. The Select
       Newest and Synchronize commands will not be available)




Adobe Web/Macromedia Dreamweaver                   Page 2                                                     11/25/2008
Huntsville City Schools                                                                Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Manage Sites – Edit or Change
   1. Choose: Site from the menu bar
   2. Click: Manage Sites
   3. Single Click: Name of your site, Select: Edit
   4. Click the Advanced tab
   5. Single Click: Local Info from the left side panel
       Note path beside Local Root Folder – that is where your web
           files are stored on your local machine
   6. Single Click: Remote Info from the left side panel
   7. Click the folder icon beside the Remote folder text box to browse to
      the folder where you store your site files on the HCS web server.
       Double Click: My Network Places
       Double Click: Entire Network
       Double Click: Microsoft Windows Network
       Double Click: HCSDOM
       Double Click: HCSWEB1
       Double Click: Elementary, Middle, High, Centers, Magnet, K-8
       Double Click: Your school’s folder
       Ex: \\Hcsweb1\elementary, \\Hcsweb1\Middle, \\Hcsweb1\high, \\Hcsweb1\centers, \\Hcsweb1\magnet,
           \\Hcsweb1\k8
   8. Click: Ok, then Done

Uploading and Downloading Files
   1. Make sure you are in local view (right side panel)




                                                    Local View




                                                  Expand/Collapse




   2. You can choose to look at a Local View or both your Local View and your Remote View. This allows you to see the
      files on the server and the files on your computer that you are working on. I always get a clean copy from the server
      before I begin to work on a page! You must keep the same directory structure as you have now on the server.
   3. Click: Expand/Collapse button to see the remote site and local files.
   4. You may need to click the refresh button at the top of the page

Adobe Web/Macromedia Dreamweaver                    Page 3                                                     11/25/2008
Huntsville City Schools                                                                 Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Getting Files

1. This is the Get Files button to get web pages from the server (located at Merts) and puts them on the computer you are
   using at your local school
2. Once you have gotten the files you can make changes to pages.
3. For training purposes you may only want to get the files you will be working with today.
4. At your school you should download or get your entire folder before beginning to work. This will take a large amount of
   time if your site is quite large but will give you a backup of all your files!
    Select your folder on the server
    Click the Get Files Icon
    Files will be downloaded to the area on your computer that you set up as the Local View.
    You will be making changes locally or on your computer you are working on at your school.
    You may need to click the refresh button at the top of the page



Putting Files
1. This is the Put Files button to put the web pages back on the HCS server at Merts after making changes to pages
   (Remote).
    Select the file you have made changes to by clicking on it.
    Click the Put Files Icon.
    The newly updated file will be placed on your computer.




Adobe Web/Macromedia Dreamweaver                    Page 4                                                     11/25/2008
Huntsville City Schools                                                                 Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Creating A New Page

1. Click: HTML Under the Create New column.




Interface
    1. Menu Bar
    2. Page Title – This is
       the title of what will
       be bookmarked!
    3. Panels and panel
       groups (right) side
        Hide on a PC
            with the > button
    4. Document window
        Tag selector
        Window size
            pop-up window
    5. Estimated download
       time (28.8 – change
       that in edit sizes - 30
       K or less is good)
    6. Properties




The Properties Toolbar

This is the area you will use to set fonts, size of fonts, set links, and other special features of your fonts.




Adobe Web/Macromedia Dreamweaver                        Page 5                                                        11/25/2008
Huntsville City Schools                                                                        Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Adding Text

   1. Untitled Document – Write in a title for your
      document (This is the name that will be bookmarked

      when someone visits your page) Choose a short, descriptive title with names that
      readers will identify with your page.
       Page Title is not the same as the File name!
   2. Select Fonts from the Category list on the left.
       Keep fonts simple – Don’t use more than 2 font styles per page.
       Remember that a computer that doesn’t have a font on it can’t be read. If you use Script and
          the person reading your web page doesn’t have Script on their computer the font will be
          changed.
   3. To avoid extra space when you hit “Enter” you can hold down the “shift key” while hitting “Enter”.
   4. Asterisk * indicates the document is unsaved. If no * appears the page is saved.
   5. To add text to your document, do one of the following:
       Type text directly into the Document window.
       Copy text from another application, switch to Adobe Web, position the insertion point in the Design view of the
          Document window, and select Edit > Paste or Edit > Paste Special.
       When you select Edit > Paste Special, a dialog box provides you with several paste formatting options. For
          more information, click the Help button in the dialog box.
       You can also paste text using the keyboard shortcuts - Control+V (Windows)
   6. Formatting text in Adobe Web is similar to using a standard word processor.
       Paragraph, Heading 1, Heading 2, and so on
       Change the font, size, color, and alignment of selected text
       Apply text styles such as bold, italic, and underline (Text>Style>Underline).
       By default, Adobe Web formats text using Cascading Style Sheets (CSS). As you format and align text using
          Adobe Web formatting commands, CSS rules are embedded in the current document. This lets you more easily
                                                                                                                reuse
                                                                                                                existing
                                                                                                                styles,
                                                                                                                as well
                                                                                                                as
                                                                                                                name
          the styles you create.

   Alignment and Style




   Bulleted                 Numbered                   Lists

   Text Color




Adobe Web/Macromedia Dreamweaver                   Page 6                                                     11/25/2008
Huntsville City Schools                                                                Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Page Properties

    1. Select: Modify
    2. Select: Page Properties OR Right-click on the document window and choose: Page Properties
    3. Appearance: Lets you specify the default font family and font size, text color, background color, margins,
        Background Image: Browse for an image to place as your background. Make sure the image is very faint so
           you can see the text.
        Click on the square next to: Background, Text, Links, etc. You can use the eye dropper to select a color
           anywhere on the page.
        To Match background color using the eye dropper,
           a. Use eye dropper to pick up color in the picture, banner, text, etc.
           b. Click: Apply and Click: OK
        If you use both a background image and a background color, the color appears while the image downloads,
           and then the image covers up the color. If the background image contains any transparent pixels, the
           background color shows through
    4. Link: Lets you specify the default link font family and font size, link color, visited link color and link style
    5. You can assign new page properties for each new page you create, and modify those for existing pages




Saving

    1. Find or Create a folder to save your work
        Right-mouse click on the Site area on the right-side panel
        Choose: New Folder
        Give the folder a name – NO spaces
    2. From your document - Choose: File
    3. Select: Save As or Save (Usually the first page in any folder will be named index. The Internet always looks for the
       word index first and loads that page faster.)
    4. Make sure you are in the directory you created under manage sites
    5. Give your file a name. Remember web page names contain NO spaces and keep the names short!
    6. File name is not the title that visitors see when they open a web page.

NOTE: Pressing F12 will allow you to see your page as it will appear on line.




Adobe Web/Macromedia Dreamweaver                     Page 7                                                    11/25/2008
Huntsville City Schools                                                                 Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Tables

   1.  Choose: Insert
   2.  Select: Table
   3.  Rows: How many rows do you want in your table?
   4.  Columns: How many columns do you want in your table?
   5.  Table Width: Do you want your table to be the entire width of the webpage
       or a certain pixels or percent?
   6. Border Thickness: The thickness of the table border. A blank value or 0
       will give you a table without a border. As you increase the number the
       border will increase (some versions-if left blank the default is1).
   7. Cell Padding: Specifies the space between the table border and the cell.
   8. Cell Spacing: Specifies spacing between table cells.
   9. Bg Color - table’s background color.
   10. Brdr Color – border color for the table.
   11. Bg Image - table’s background image.
   12. Type desired labels in the cells


To Set Properties For A Table Element
   1. Horz - horizontal alignment of the contents of a cell, row, or column - left, right, or center of the cells, or default
       (usually left for regular cells and center for header cells)
   2. Vert - vertical alignment of the contents of a cell, row, or column - top, middle, bottom, baseline, or default (usually
       middle)
   3. W and H - the width and height of selected cells in pixels, or as a percentage of the entire table’s width or height
       (percentage may not display correctly in browser)
        To specify a percentage, follow the value with a percent symbol (%).
        To let the browser determine the proper width or height based on the contents of the cell and the widths and
           heights of the other columns and rows, leave the field blank (the default).
        By default, a browser chooses a column width to accommodate the widest image or the longest line in a column.
           This is why a column sometimes becomes much wider than the other columns in the table when you add
           content to it.
        By default, a browser chooses a row height to accommodate all the text and images in the row.
   4. Bg - (upper text field) is the filename for the background image for a cell, column, or row. Click the folder icon to
       browse to an image, or use the Point-to-File icon to select an image file.
   5. Bg - (lower color swatch & text field) is the background color for a cell, column, or row, chosen with the color picker.
   6. Brdr - is the border color for the cells.
   7. Merge Cells - combines selected cells, rows, or columns into one cell.
   8. Split Cell - divides a cell, creating two or more cells. You can split only one cell at a time.
   9. No Wrap - prevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells
       widen to accommodate all data as you type it or paste it into a cell.
   10. Header - formats the selected cells as table header cells - contents of table header cells are bold and centered




Adobe Web/Macromedia Dreamweaver                    Page 8                                                      11/25/2008
Huntsville City Schools                                                                  Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Inserting a Row or Column

    1. Right mouse click in one of the cells
    2. Choose: Table, Select: Insert Rows or Columns
    3. This particular selection allows you to decide if you
       want it above or below the selected cell.




Deleting a Row or Column

    1. Right mouse click in one of the cells
    2. Choose: Table
    3. Select: Delete Row or Delete Column


New Page

    1. Choose: File
    2. Select: New
        Adobe Web supports accessibility
        Has pre-made templates
        Choose Basic Page / HTML / and check
           make XHMTL compliant - Xhtml
           (Extensible Hypertext Markup Language) –
           next standard for web development.
           This will close all the tags for you!!!


Preview in Browser - Three ways to open the file
in your default browser

    1. File > Preview in browser
    2. Click on the world on the toolbar
    3. F12 – This is very important! This will allow you to look at the page you have created.




Adobe Web/Macromedia Dreamweaver                     Page 9                                                     11/25/2008
Huntsville City Schools                                                                  Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Images

   1. Create a folder (images) inside the Local Root folder you created under manage sites (top folder)
   2. Download some images into this folder from the Microsoft Clipart on Office Online, Internet or other sources such
      as digital camera or scanner.
      Microsoft Clipart on Office Online,
       In the Search text box, type a word that describes what you want
       Click: Search
       Check the boxes of the clip art you want to download (Puts these clips in a Selection Basket)
       Click in the Selection Basket: Download __ items
       Click: Download Now
       If Prompted click: Open
       Image is automatically stored in My Documents, My Pictures, (maybe in Microsoft Clip Organizer)
   3. Copy images into web images folder
       Find your image and right mouse click: Copy
       Browse the computer to your Local Root Folder where your web files are stored on your local machine (pg. 3)
          -Right mouse click My Computer, Select: Explore
       Browse and open your images folder, right mouse click: Paste
   4. Resize Images (Fireworks)
       Open Fireworks (Start-All Programs)
       Click: File – Open – open all images you want to resize OR double click desired images from images folder
       You need to change the height of this image so that it fits on your banner.
       Select the image (arrow under “Select” toolbar). Image will have blue lines around it.
       Click: Modify – Canvas – Image Size
       Change the height (up/down arrows)
       The width will change proportionately
   5. Save your image (Fireworks)
       If you go to file – save or save as, your image will be saved as a .png graphic – supported by newer browsers
       Save image as a .jpg - supported by all browsers, smaller file, quicker to display
          a. Click: File
          b. Select: Export Wizard – Continue – The Web – Continue – Exit
          c. Click on the bottom image, make sure .jpg – Click: Export
          d. Make sure you are saving it in the right folder –your images folder
          e. Name your file, Click: OK
       Remember, no spaces in file names – whatever image format you use.
   6. Add images to your web page (Adobe Web)
       Choose: Insert, Select: Image
       Browse to your images folder and locate the image you wish to insert.
       Click: OK
      OR
       You can drag and drop the image from the File Panel directly into your document.




Adobe Web/Macromedia Dreamweaver                  Page 10                                                   11/25/2008
Huntsville City Schools                                                              Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Creating a Web Photo Album

   You can automatically generate a website that showcases a photo album of images located in a given folder.
   Fireworks is used to create a thumbnail image and a larger-sized image for each of the images in the folder.
   A web page is created containing all the thumbnails, as well as links to the larger images.
   You must have both Adobe/Dreamweaver and Fireworks 4 or later installed on your system.
   1. Place all of the images for your photo album in a single folder. (The folder is not required to be in a site.)
   2. Make sure that the image filenames have any of the following extensions: .gif, .jpg, .jpeg, .png, .psd, .tif, or .tiff.
       Images with unrecognized file extensions are not included in the photo album.
   3. In Adobe/Dreamweaver, select Commands > Create Web Photo Album.
   4. In the Photo Album Title text box, enter a title. The title will be displayed in a gray rectangle at the top of the page.
        You can enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and
           Other Info text boxes.
   5. Select the folder containing source images – Click: the Browse button next to the Source Images Folder text box.
   6. Then select (or create) a destination folder in which to place all the exported images and HTML files by clicking the
       Browse button next to the Destination Folder text box.
        The destination folder should not already contain a photo album--if it does, and if any new images have the
           same names as previously used images, you will overwrite existing thumbnail and image files.
   7. Select a size for the thumbnail images from the Thumbnail Size pop-up menu. Images are scaled proportionally to
       create thumbnails that fit within a square that has the indicated pixel dimensions (I have used 100x100).
   8. To display the filename of each original image below the corresponding thumbnail, check: Show Filenames.
   9. Enter the number of columns for the table that displays the thumbnails (I have used 5).
   10. Select a format for the thumbnail images- Thumbnail Format pop-up menu –(I have used JPEG-Better Quality)
        GIF WebSnap 128 creates GIF thumbnails that use a web adaptive palette of up to 128 colors.
        GIF WebSnap 256 creates GIF thumbnails that use a web adaptive palette of up to 256 colors.
        JPEG--Better Quality creates JPEG thumbnails with relatively higher quality and larger file sizes.
        JPEG--Smaller File creates JPEG thumbnails with relatively lower quality and smaller file sizes.
   11. Select a format for the large-size images from the Photo Format pop-up menu. A large-size image of the specified
       format is created for each of your original images. You may specify a format for the large-size images that differs
       from the format you specified for the thumbnails. (I have used JPEG-Better Quality)
   12. The Create Web Photo Album command does not let you use your original image files as the large-size images,
       because original image formats other than GIF and JPEG might not display properly on all browsers.
   13. Select a Scale percentage for the large-size images.
        Setting Scale to 100% creates large-size images the same size as the originals. Note that the scale percentage
           is applied to all of the images; if your original images aren’t all the same size, scaling them by the same
           percentage may not produce the desired results. (I have used 100% but you may need a smaller %)
   14. Check: Create navigation page for each photo to create an individual web page for each source image,
       containing navigation links labeled Back, Home, and Next.
        If you select this option, the thumbnails link to the navigation pages. If you don’t select this option, the
           thumbnails link directly to the large-size images.
   15. Click: OK to create the HTML and image files for the web photo album.
        Fireworks starts (if it’s not already running), and creates the thumbnails and large-size images. This may take
           several minutes if you’ve included a large number of image files.
   16. When a dialog box appears that says "Album Created," click OK.
   17. You may have to wait a few seconds for your photo album page to appear. The thumbnails are shown in
       alphabetical order by filename.
        Clicking the Cancel button after processing has begun does not stop the process of creating the photo album; it
           merely prevents Adobe/Dreamweaver from displaying the main photo album page.


Adobe Web/Macromedia Dreamweaver                     Page 11                                                     11/25/2008
Huntsville City Schools                                                                   Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Flash Text
   1. Start and Save a New page. Make sure you have saved your page before
       inserting a Flash object!
   2. Choose: Insert
   3. Select: Media
   4. Select: Flash Text
   5. Select Font and Font Size
   6. Select your Color and Rollover Color
   7. Type: Text – (Ex: Return to Home Page)
   8. Click: Browse after the Links Box
   9. Find your page you want to link to (Ex:: index.htm or index.html (You will use this method of creating links when
       using both Flash Text and Flash Buttons)
   10. Name your object, keep file extension -.swf
   11. Click: OK
   12. To preview you must Put the flash .swf file to the remote server

Flash Buttons
   1. Choose: Insert
   2. Select: Media
   3. Select: Flash Button
   4. From the Insert Flash Button Dialog Box enter the button name, font, size
      of font, what you want the button to link to, and other information.
   5. To make the background blend with your other page properties: click the
      small square next to Bg Color and use the eyedropper to pick up the
      background color that you selected in your page properties.
   6. Click: OK
   7. Repeat the process for each button you wish to create.
   8. These files will appear in the same directory as the page you placed them on. The file will end with: .swf
      Do not move these file to another directory or they will not work!
   9. To preview you must Put the flash .swf file to the remote server

Calendars
   1.    Open: Microsoft Word
   2.    Click: File, Select: New
   3.    From Taks Pane - Select: Templates on Office Online
   4.    Template Catergories – Select: Calendars
   5.    Browse Categories -make selection (Ex: Calendars 2008)
   6.    Click: calendar type and style (Ex: 2008 Calendar (12-pp basic)
   7.    Click: Download button - Downloads calendar into Word
   8.    Save your file and template
   9.    Open Adobe Web/Dreamweaver page in Design view
   10.   Copy Calendar from Word
          Click: square at top left of calendar to select all, Click: Edit > Copy
   11.   Paste Calendar on web page
          Click: Edit > Paste Special
          Bullet:Text with structure plus full formatting
   12.   Add text and images
   13.   Save web calendar
   14.   When you Put – you must put any new images, ect.

Adobe Web/Macromedia Dreamweaver                      Page 12                                                  11/25/2008
Huntsville City Schools                                                                 Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Links
    1. To avoid broken links in your site, activate link management so that Adobe Web/Dreamweaver updates links.
        Adobe Web/Dreamweaver can update links whenever you move or rename the document within a local site.
           This feature works best when you store your site on your local disk.
        Adobe Web/Dreamweaver does not change files in the remote folder until you Put the local files to the remote
           server.
    2. To enable link management
        Select: Edit > Preferences
        The Preferences dialog box appears.
        Select General from the category list on the left.
        The General preferences options appear.
        Select: Prompt or Always from the Update links when moving files pop-up menu.
    3. Prompt, a dialog box appears with a prompt Scan site for links to rename files?
        Select: Scan or Don’t Scan. Sometimes this takes a few minutes.
        When scan is complete, Click Update to update the links or click Don’t Update to leave the files unchanged.
    4. Always, links are automatically updated whenever you move or rename a file.
    5. Click OK.

Point-to-File icon - Links from an image, object, or text to another file (.pdf, .doc, .xls, etc.) in your site.
   1. Open the page where you want to add the link.
   2. Select text or an image in the Document window’s Design view.
   3. Drag the Point-to-File icon at the right of the Link text box in
        the Property inspector and point to another file in the Files panel.
   4. The Link text box updates to show the link.
Absolute -Links to an Internet site
   1. Type the full Internet address (URL) in the Link box including the http://
   2. BE CAREFUL to make sure all information is correct. If you know how to use your short cut keys it is better to
        locate the page, copy (ctrl + C) the URL and paste (ctrl + V) it into the links box.
Anchor Links -Links to a location within the same page
   1. Place the insertion point where you want the named anchor
   2. Select: Insert, Named Anchor
   3. In the Named Anchor text box, type a name for the anchor and
        click: OK. (Anchor names cannot contain spaces)
         Anchor marker appears at the insertion point.
         If you do not see the anchor, select View, Visual Aids, Invisible Elements
   4. On the page where you want the anchor link - Choose: Insert
   5. Select: Named Anchor
   6. Type: #name (the name of the anchor), Click: OK
Email links - Opens a new blank message window
   1. Click where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link
         Click: Insert > Email Link
             OR Click: the E-mail Link button on the Insert                           toolbar
         Text box - type or edit the text to appear in the
             document
         Example: Contact Me or Email Me
         In the E-Mail text box, type the e-mail address
         Click OK.
         OR Highlight text and type mailto:username@hsv.k12.al.us in the link text box.


Adobe Web/Macromedia Dreamweaver                    Page 13                                                     11/25/2008
Huntsville City Schools                                                                  Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Image Maps - An image that has been divided into regions, or "hotspots"; when a user clicks a hotspot, an action occurs
(for example, a new file opens).
1. Drag-and-drop an image on the page or click: Insert > Image
1. Click on image
2. Name image map in properties bar
3. Draw a box around a state (You can use the Square, Circle, or Polygon)
4. In the Link Box type the URL of the webpage OR use the Point-to-file
     icon and point to a file that you want to open when this section is clicked.
5. In the Target select _blank (This will force the link to open a new browser
     window.)




Rollovers Images
With a Rollover Image when your mouse passes on top of the image, the image will change to the specified image you have
designated.

Each image must be the same size!
   1. Insert: Image Objects
   2. Select: Rollover Image
   3. Click: Browse in the Original Image box
       and select an image
   4. Click: Browse in the Rollover Image box
       and select an image
   5. If you want the images preloaded in the
       browser’s cache so no delay occurs when
       the user rolls the pointer over the image,
       Click: Preload Rollover Image.
   6. (Optional) In Alternate Text, enter text to
       describe the image for viewers using a text-only browser.
   7. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want
       to open when a user clicks the rollover image.
   8. Click: OK




Adobe Web/Macromedia Dreamweaver                      Page 14                                                  11/25/2008
Huntsville City Schools                                                                 Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Forms

    1. Before you place your
       first form object on the page, you need to insert a form tag.

    2. Click:       All form objects must be in a defined form.
    3. Now you can start entering form buttons
    4. There are three fields you must fill out in order to activate your form. The form
       name is not necessary but recommended.


Text Fields
                                                                       Your Name Here
If you would like an initial value to
be displayed, type the value into the Initial Value field.

Multi line Text Area
Click on the Multi line button.

Checkboxes
Here is an example of checkboxes:
What is your favorite color?
Red       Blue      Yellow

Radio Buttons
What type of software program do you like best?



PowerPoint        Adobe Web         Fireworks

Lists and Menus
    1. Click on the button of the Form Objects Palette.
    2. To add some choices to the list, click: List Values button on the
       Properties Toolbar.
    3. Click: +
    4. Enter the first value in the Item Label field. This is what the user will see.
       You can then enter a value, which depends on the nature of the form.
    5. To add a new value, simply click on the + (plus) button.

Buttons                                                      Submit
    1.   How do you send it? With a submit button.
    2.   To insert a button click on the button on the Form Objects Palette.
    3.   Click: form#form1 information above the Properties Menu.
    4.   In the Action area type the email address where you want the form posted.
         Example: mailto:lpearce@hsv.k12.al.us



Adobe Web/Macromedia Dreamweaver                        Page 15                                                   11/25/2008
Huntsville City Schools                                                                    Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us
Panels
     5 dots – Allows you to move the toolbar to another location. Macromedia designs the layout in the best fashion so
      all the items are readily available for use.
     White triangles - Expand and collapse the panel




CSS – Casscading Style Sheets (helps pages to load faster
and helps make pages look more consistent!) Choose: Files panel
group
    1. Select: Design tab
    2. Click: Attach Style Sheet Icon
    3. Select: Sample Style Sheets - C:\Program
        Files\Macromedia\Adobe Web
        MX\Samples\GettingStarted\Tutorials\Assets
    4. Find the style sheet you wish to use from the Sample Style
        Sheets Dialog box and previews shown.
    5. Click: OK
             OR
    6. Click on the + to create New CSS Style Sheet
    7. Make a custom style (class) (1st Radio Button)
    8. Name must begin with a period (.Header)
    9. Define in new style sheet
    10. Click on the + sign again and select the (2nd Radio Button) for Tag and one of the options (H1, H2, etc.) from the
        drop-down box.
    11. Click: OK
    12. File in the appropriate type of font, size font, color, etc. you desire.
    13. Click: OK




Adobe Web/Macromedia Dreamweaver                   Page 16                                                     11/25/2008
Huntsville City Schools                                                                 Ginny Murray: gmurray@hsv.k12.al.us
http://www.hsv.k12.al.us

								
To top