Docstoc

Adobe Dreamweaver Crash Course

Document Sample
Adobe Dreamweaver Crash Course Powered By Docstoc
					                               Adobe Dreamweaver 8: Crash Course
                                            INFORMATION TECHNOLOGY SERVICES
                                           California State University, Los Angeles
Version 1.0                                                                                                                           Spring 2009



                                                               Contents
Introduction ....................................................................................................................................2

Creating a Dreamweaver Site .......................................................................................................2
   Creating a Site Definition ......................................................................................................... 2
   Creating a HyperText Markup Language (HTML) File ........................................................... 3
   Dreamweaver Interface ............................................................................................................. 4
   Windows and Panels ................................................................................................................. 5
   Toolbars .................................................................................................................................... 5
      The Insert Toolbar............................................................................................................... 5
      The Document Toolbar ....................................................................................................... 6
   Panels ........................................................................................................................................ 6
   Switching Views ....................................................................................................................... 7
   Modifying Page Properties ....................................................................................................... 7

Working with Div Tags .................................................................................................................8
  Inserting a Banner ..................................................................................................................... 8
  Cascading Style Sheets (CSS) .................................................................................................. 9
      Selector Type ...................................................................................................................... 9
      Formatting the Banner ...................................................................................................... 11
      Inserting an Image as a Banner ......................................................................................... 11

Saving Files ...................................................................................................................................12

Previewing a Web Site .................................................................................................................12

Inserting a Menu ..........................................................................................................................13
   Formatting the Menu............................................................................................................... 14
   Inserting Menu Items .............................................................................................................. 14
   Editing CSS Styles .................................................................................................................. 15
   Creating Hyperlinks for Menu Items ...................................................................................... 15
   Formatting Hyperlinks ............................................................................................................ 16

Inserting a Content Section .........................................................................................................17
   Formatting Content ................................................................................................................. 18
   Formatting Title Text .............................................................................................................. 18
   Inserting a Nested Div Tag ..................................................................................................... 19
   Formatting Content Text ......................................................................................................... 19

Exporting the Site Definition ......................................................................................................20

Importing the Site Definition ......................................................................................................21

Getting Help .................................................................................................................................22

For additional written instructional guides, visit us @ http://www.calstatela.edu/handouts
Introduction
Adobe Dreamweaver 8 is an industry standard WYSIWYG (What You See Is What You Get)
software application for Web site creation. Users can develop, modify, and maintain Web sites from
basic to advanced Web functionalities. This handout is designed to provide instructions on
creating a basic Web site from start to finish using Dreamweaver 8. It also addresses basic
principles in creating Web sites that are accessible for all users with or without disabilities.
Topics covered in this handout include creating a site definition, inserting div tags, applying CSS
styles, creating menus and hyperlinks, formatting the page content, and exporting the site
definition.


Creating a Dreamweaver Site
When designing or creating a Web site, it is always a good idea to plan how the site can be
navigated or structured. Once the site structure has been planned, the next step is to define a site
and set up a central location where all the site files will be stored.

CREATING A SITE DEFINITION
In Dreamweaver, users can define both local and remote server information, and even test the
server with its Site Definition feature. In this workshop, however, a site definition will be created
as a means to organize and keep track of the site files and folders by storing them in a root
folder. Thus, the Site Definition Wizard will be used for this purpose.

To create a site definition:
   1. Launch Dreamweaver by clicking the Start button on the lower left corner of the screen
       ► All Programs ► Macromedia ► Macromedia Dreamweaver 8.

       NOTE: When Dreamweaver is launched for the first time, users will be asked to choose between
       the Designer or Coder workspace layout. For novice users, the Designer layout is recommended.
       A different layout can be selected later by clicking the Window menu and selecting Workspace
       Layout.

   2. Click the Site menu and select New Site. The Site Definition dialog box will open.
   3. In the What would you like to name your site? text box, type CIS_Site and click the
      Next button (see Figure 1).




                                  Figure 1 - Site Definition Dialog Box

   4. Make sure the No, I do not want to use a server technology option button is selected and
      click the Next button.
                                                                     Adobe Dreamweaver 8: Crash Course - 2
   5. Make sure the Edit local copies on my machine, then upload to server when ready
      (recommended) option button is selected.
   6. Click the folder icon    next to the Where on your computer do you want to store your
      files? text box. The Choose local root folder for site CIS_Site dialog box will open.

      NOTE: Users can either create a new folder to use as a root folder, or designate an existing folder
      as a root folder. In this workshop, we will select an existing folder named root since we have
      some images required for the workshop stored in the folder.

   7. Navigate to the folder in which the site files will be stored. In this case, navigate to the
       Desktop and click the root folder to select it.
   8. Click the Open button and then the Select button to close the Choose local root folder for
       site CIS_Site dialog box.
   9. Click the Next button in the Site Definition for CIS_Site dialog box.
   10. From the How do you connect to your remote server? drop-down list, select None.
   11. Click the Next button. A summary displaying the site settings will display.
   12. Review the information and click the Done button if everything is correct. A site has
       been created. The Files panel to the right of the screen should look similar to Figure 2
       below.




                         Figure 2 - Files Panel After Creating a Site Definition


CREATING A HYPERTEXT MARKUP LANGUAGE (HTML) FILE
HyperText Markup Language (HTML) is a basic language that displays text, images, and
objects on Web browsers. The home page has to always be named “index” in order for Web
browsers to recognize which Web site file to display first.

To create a new HTML file:
   1. Click HTML under the Create New column of the Start Page (see Figure 3).



              Create new HTML
              file




                                         Figure 3 - Start Page


                                                                      Adobe Dreamweaver 8: Crash Course - 3
   2. A new HTML file will open. Click the File menu and select Save As. The Save As dialog
      box will open.
   3. Type index in the File name text box.
   4. Make sure the root folder is selected in the Save in drop-down box and click the Save
      button.
   5. Type Computer Information Systems Home Page in the Title text box on the
      Document toolbar (see Figure 4).




                           Figure 4 - Title Text Box on the Document Toolbar

       NOTE: The title of a Web page will be the first item read by accessibility programs such as
       screen readers. The page title is the name displayed on the Title bar of a Web browser.


DREAMWEAVER INTERFACE
Like many applications, Dreamweaver has a Title bar, a Menu bar, and toolbars. The Document
toolbar and Insert toolbar appear by default; other toolbars have to be added manually. Below
the toolbars is the Document window in which Web pages are designed and programmed.
Below the work area is the Property inspector. If none of these are visible, go to the Window
menu and make sure Insert and Property are checked. On the far right side of the Document
window is the Panel groups (see Figure 5).

Title Bar        Menu Bar         Insert Toolbar           Document Toolbar             Panel Groups




 Tag Selector           Document Window              Property Inspector                Files Panel

                                   Figure 5 - Dreamweaver Interface




                                                                      Adobe Dreamweaver 8: Crash Course - 4
WINDOWS AND PANELS
Table 1 below describes the function of each element available in the Dreamweaver application
window.
Table 1 - Dreamweaver Interface Features
Feature                  Description
Title Bar                Displays the name of the application, which is Macromedia
                         Dreamweaver 8, and the name of the file currently shown.
Menu Bar                 Contains all the commands available within Dreamweaver 8.
Insert Toolbar           Contains buttons for inserting various types of "objects,"
                         such as images, tables, and layers into a document.
Document Toolbar         Contains buttons that provide options for different views
                         of the document window (such as Design view and Code view),
                         various viewing options, and some common operations (such
                         as previewing in a browser).
Panel Groups             Sets of related panels grouped together into tabs under one
                         heading. To expand a panel group, click the expander arrow
                         at the left of the group’s name; to undock a panel group,
                         drag the gripper at the left edge of the group’s Title bar.
Tag Selector             Shows the hierarchy of tags surrounding the current
                         selection. Click any tag in the hierarchy to select that
                         tag and all its contents. Using this feature requires a
                         basic knowledge of HTML.
Document Window          Displays the current document and allows editing of the
                         page content.
Property                 Used to view and change a variety of properties for the
Inspector                selected object or text. Each object has different
                         properties.
Files Panel              Enables management of files and folders, whether they are
                         part of a Dreamweaver site or on a remote server.


TOOLBARS
Unlike many other applications, Dreamweaver 8 has only a few toolbars, containing mostly basic
features. Most of the advanced features are contained within the panels.

To display the Standard toolbar:
   1. Click the View menu, point to Toolbars, and click Standard.

The Insert Toolbar
The Insert toolbar provides a quick way of inserting different types of objects into a Web page.
There are several categories of objects that can be inserted. Table 2 below contains only a short
list of the buttons under the Common category that do not require knowledge of HTML.
Table 2 - Insert Toolbar, Common Objects
Icon        Feature             Description
            Hyperlink           Allows insertion of a hyperlink.

            Email Link          Inserts an e-mail link.

            Named Anchor        Inserts a named anchor. Hyperlinks can be set to
                                jump to named anchors.
            Table               Inserts a table onto the page.

            Images Drop-        Lists the image tool buttons, some of which are
            down Menu           listed below.

                                                                Adobe Dreamweaver 8: Crash Course - 5
Icon       Feature             Description
           Image               Inserts an image onto the page.
           Image               Inserts an image placeholder.
           Placeholder
           Rollover            Allows insertion of a rollover image. Two images are
           Image               required for this feature.
           Navigation          Inserts an image navigation bar on the page.
           Bar
           Media Drop-         Lists the media tool buttons, some of which are
           down Menu           listed below.
           Flash               Inserts an existing Macromedia Flash object onto the
                               page.
           Flash Button        Allows users to create a Flash button as a
                               hyperlink.
           Flash Text          Allows users to create a Flash text object.

           Date                Inserts today’s date onto the page. The date can be
                               updated automatically each time the page is edited.
           Comment             Inserts comments onto the page. Comments are hidden
                               once the page is displayed in a Web browser.


The Document Toolbar
In Dreamweaver, the page being worked on can be viewed in several different ways. The buttons
on the Document toolbar can be used to easily switch the view, simplifying the editing and
organizing process (see Table 3).
Table 3 - Document Toolbar Buttons
Icon        Feature                  Description
            Show Code view           Displays the HTML code editing view of the Web
                                     page.
            Show Code and            Displays a split screen with HTML code of the Web
            Design views             page on the top and its WYSIWYG (What You See Is
                                     What You Get) equivalent on the bottom.
            Show Design view         Displays the Web page in WYSIWYG editing mode.
            Document Title           The page title, which will appear on the Title
                                     bar of Web browsers, can be entered here.
            Preview/Debug in         Choose a Web browser from the drop-down list to
            browser                  preview the Web page.
            Refresh Design           Refreshes the content of the Design view.
            view
            View options             Displays and hides several features of the
                                     Document window in Design view, such as rulers,
                                     grids, and guides.


PANELS
Panels are extremely useful because they contain most of the advanced features in Dreamweaver.
Users can display, hide, move, group, or arrange panels any way desired in the workspace. Some
panels can be docked only to the left or right of the application window, while some can be
docked only to the top or bottom of the window. When several panels are grouped into a single
panel, each panel is displayed as a tab. Each panel has its specific purpose and must be brought
to view before using. Panels can be accessed from the Window menu (see Figure 6).

                                                              Adobe Dreamweaver 8: Crash Course - 6
                       Figure 6 - Hide or Display Panels from the Window Menu


SWITCHING VIEWS
There are three different views that Web developers can work with in Dreamweaver. These
views can be accessed from the Document toolbar (see Figure 7):
   • Code: This view displays the raw code.
   • Split: This view displays Code view in one half of the screen and Design view in the
       other half.
   • Design: This view displays the page as it might look in a Web browser. Images can be
       dropped inside Design view and code will automatically be generated.



                      Figure 7 - Different View Buttons on the Document Toolbar


MODIFYING PAGE PROPERTIES
Page Properties allow users to specify settings to control the overall theme of the Web site.
There are options available to change background color, background image, and font type. Once
settings have been changed inside Page Properties, they become the default formatting.

To set page properties:
   1. Click the Modify menu and select Page Properties. The Page Properties dialog box will
        open with the Appearance category selected (see Figure 8).
   2. Click the Background color box          and select the desired color for the background.
   3. Click the Browse button               next to the Background image text box. The Select
      Image Source dialog box will open.
   4. Double-click the images folder.
   5. Select the “darkTile.gif” image file and click the OK button.
   6. Select repeat from the Repeat drop-down menu.
   7. Type 0 in the Left margin text box.
   8. Type 0 in the Top margin text box.
   9. Click the OK button.

       NOTE: If values for both Background color and Background image are inputted, the
       background image will be displayed on top of the background color.




                                                                  Adobe Dreamweaver 8: Crash Course - 7
                                 Figure 8 - Page Properties Dialog Box


Working with Div Tags
Div tags are used to define a section or logical division of an HTML document, such as a banner,
header, table, or content area. By using div tags, developers can easily format, position, or
manipulate elements within the tag as a single unit. When creating a div tag, always assign a
meaningful label to it, such as <div id="maincontent">.

Another benefit of using div tags is to prevent information from being scattered around the Web
site. By grouping information into div tags, it allows for better readability for assistive software
such as screen readers, since it can immediately identify which part of the page it is reading
from.

INSERTING A BANNER
To create a consistent look for the site, a div tag will be created to position and style page
banners. Inside the <div id=“banner”>, developers can position banners in any area of the
page, add space or a border around the banner, or style it in any way desired.

To insert a div tag for the banner:
   1. On the Insert toolbar, click the Common button                            and select Layout.
   2. Click the Insert Div Tag button         . The Insert Div Tag dialog box will open (see Figure
      9).
   3. Type banner in the ID text box.
   4. Click the OK button.




                                                                   Adobe Dreamweaver 8: Crash Course - 8
                                 Figure 9 - Insert Div Tag Dialog Box


CASCADING STYLE SHEETS (CSS)
Cascading Style Sheets (CSS) define how an HTML document is displayed on a Web site.
When using a CSS rule for the first time, a new CSS file must be created. This technique of
applying CSS to an HTML document is known as using an external style sheet. When an HTML
document is linked to an external style sheet, it will retrieve from the CSS file directions on
formatting text, images, and objects. External style sheets help reduce lengthy coding within an
HTML document. Excessive code may cause the Web site to load slower and may prevent
accessibility programs from properly reading the content of the Web site.

Selector Type
A CSS rule is a set of instructions used to format a particular group, tag element, or single item.
When creating a new CSS rule, a proper selector type must be assigned. Selector types define the
type of CSS rule to be used on a particular group of elements. Selecting the right kind of selector
type will ease the process of applying CSS to a Web site (see Table 4).

Table 4 - Selector Types
Selector Type                  Description
Class (can apply to any        This tag applies itself to multiple tags of an
tag)                           element. A class tag should be used when formatting a
                               group of tags of the same element.
Tag (redefines the look        This tag applies itself to all tags of an element. It
of a specific tag)             is used for setting the default look of an element.
Advanced (IDs, pseudo-         This tag is applied once and to a single element.
class selectors)               Advanced tags are used only when an element needs to
                               be formatted differently from everything else.

To create a new CSS:
   1. In the Document window, click the dash line surrounding the banner div tag to select it
       (see Figure 10).



                               Figure 10 - Selecting the Banner Div Tag

    2. Click the Edit CSS button from the Properties panel at the bottom of the screen (see
       Figure 11) The CSS panel, which is located on the right-hand side, will expand (see
       Figure 12).




                                                                   Adobe Dreamweaver 8: Crash Course - 9
                       Figure 11 - Editing CSS of the Banner Div Tag




                                                                 New CSS Rule button
                             Figure 12 - Expanded CSS Panel


3. Click the New CSS Rule button         from the CSS panel. The New CSS Rule dialog box
   will open (see Figure 13).




                           Figure 13 - New CSS Rule Dialog Box

4. Make sure that for Selector Type, the Advanced (IDs, pseudo-class selectors) option
   button is selected, and for Selector, #banner is selected.
5. For Define in, click the (New Style Sheet File) option button.
6. Click the OK button. The Save Style Sheet File As dialog box will open.
7. Type style in the File name text box.
8. Click the Save button to save the new CSS file. The CSS Rule Definition for #banner in
   style.css dialog box will open (see Figure 14).




                                                            Adobe Dreamweaver 8: Crash Course - 10
                    Figure 14 - CSS Rule Definition for #banner in style.css Dialog Box


Formatting the Banner
In the CSS Rule Definition dialog box, users can format various attributes of div tags such as
type, background, border, list, or position. In this example, the banner div tag will be set in the
same size as the image to be used as a banner.

To format the banner:
   1. In the CSS Rule Definition for #banner in style.css dialog box, click to select
       Background from the Category list.
   2.   Click the Background color box       and select black [#000000].
   3.   Click to select Box from the Category list.
   4.   Type 600 in the Width text box.
   5.   Type 167 in the Height text box.
   6.   Click the OK button.

Inserting an Image as a Banner
A banner is appealing to site viewers because it is usually the first item seen on a Web site.
When inserting an image, an alternate text or “alt text” must be added so that screen readers can
read aloud what is displayed on the screen.

To insert an image as a banner:
   1. In the Document window, click once inside the banner div tag and delete the Content
       for id “banner” Goes Here text. Make sure the cursor is still located inside the banner
       div tag.
   2. On the Insert toolbar, click the Layout button                              and select Common.
   3. Click the arrow next to the Images button and select Image           from the drop-
      down list. The Select Image Source dialog box will open.
   4. Navigate to the images folder and select the “banner.jpg” file.
   5. Click the OK button. The Image Tag Accessibility Attributes dialog box will open.

        NOTE: In the case that the image files selected are located outside of the root folder,
        Dreamweaver will ask if you want to copy the files into the root folder. In that case, click the Yes
        button and follow the prompt to save the file.

                                                                     Adobe Dreamweaver 8: Crash Course - 11
    6. Type banner in the Alternate text text box and click the OK button (see Figure 15).




                         Figure 15 - Image Tag Accessibility Attributes Dialog Box


Saving Files
When working on a Web site, it is a good practice to save files frequently to prevent unexpected
loss of content. An easy way to see whether or not the document has been saved after the
changes are made is to look for an asterisk located next to the file name in the file tab
            . If there is an asterisk, the file has not been saved.

NOTE: To preview the page properly, both the “index.html” and “style.css” files must be saved before
previewing.

To save a file:
   1. Click the style.css tab to select the document to be saved. Then, click the File menu and
       select Save. The asterisk on the style.css tab will disappear.
   2. Click the index.html tab to select the document to be saved. Then, click the File menu
       and select Save. The asterisk on the index.html tab will disappear.

NOTE: Files are automatically saved to the root folder.


Previewing a Web Site
To make sure that a Web page is displayed properly, it needs to be previewed in a Web browser.
Keep in mind that some Web browsers display content differently. Thus, it is best to preview the
pages in multiple browsers while working on the pages to ensure that information is presented
properly for users using different browsers.

To preview a page:
    1. Click the Preview/Debug in browser button        on the Document toolbar.
    2. Select Preview in IExplore 7.0. The Internet Explorer Web browser will open
       displaying the Web page (see Figure 16).




                                                                     Adobe Dreamweaver 8: Crash Course - 12
                         Figure 16 - Internet Explorer Web Browser Preview


Inserting a Menu
A menu is useful for Web site viewers to navigate to different parts of a Web site. In this
exercise, a menu will be placed underneath the banner and inside a div tag. Web developers are
free to position and format the menu any way they prefer by placing the menu inside a div tag.

To insert a div tag for the menu:
   1. Click anywhere below the banner. The cursor will appear to the right of the banner.
   2. Press the [Enter] key on the keyboard. The cursor will appear below the banner.
   3. On the Insert toolbar, click the Common button                            and select Layout.
   4. Click the Insert Div Tag button    on the Insert toolbar. The Insert Div Tag dialog box
      will open (see Figure 17).
   5. Type menu in the ID text box and click the OK button.




                                Figure 17 - Insert Div Tag Dialog Box

   6. Click the dash line surrounding the menu div tag to select it.
   7. Click the New CSS Rule button            from the CSS panel. The New CSS Rule dialog box
      will open (see Figure 18).


                                                                  Adobe Dreamweaver 8: Crash Course - 13
                                  Figure 18 - New CSS Rule Dialog Box

    8. Make sure that for Selector Type, the Advanced (IDs, pseudo-class selectors) option
       button is selected, for Selector, #menu is selected, and for Define in, the style.css option
       button is selected.
    9. Click the OK button to start formatting the menu. The CSS Rule Definition for #menu in
       style.css dialog box will open with the Type category selected.

FORMATTING THE MENU
The menu div tag must first be formatted before adding any menu items. The menu size and
background color will be specified in this exercise. To make the menu items more visible, the
background will be white and text will be black.

NOTE: It is important to choose a background color and font color that have enough contrast for easy
viewing. If a dark background is used, then a light font color should be used.

To format the menu:
   1. From the Font drop-down list, select Arial, Helvetica, sans-serif.
   2. From the Size drop-down list, select 12.
   3. In the Decoration section, select the none check box.
    4. Click the Color box     and select black [#000000] as the font color.
    5. Click to select Background from the Category list.

    6. Click the Background color box       and select white [#FFFFFF].
    7. Click to select Box from the Category list.
    8. Type 600 in the Width text box.
    9. Type 25 in the Height text box.
    10. Click the OK button.

INSERTING MENU ITEMS
Address links of the actual menu items are needed. Use short, clear, and meaningful names for
the menu items.

To insert menu items:
   1. Delete the Content for id “menu” Goes Here text inside the menu area. Make sure the
       cursor is still located inside the menu div tag.
   2. Type College Home | CIS Home | Undergraduate | Graduate | Internships | MIS
       Brochure | Faculty inside the menu area.
   3. Select all text inside the menu area.
    4. Click the Align Center button          on the Properties panel (see Figure 19).
                                                                   Adobe Dreamweaver 8: Crash Course - 14
                                Figure 19 - Preview of Centered Menu Bar


EDITING CSS STYLES
The style sheet can be reopened so corrections can be made to previous settings. After the menu
items were added, there was extra white space underneath the menu. To fix this problem, the box
height can be decreased to remove the extra space.

To edit CSS styles:
   1. Click anywhere inside the menu div tag.
   2. Select <div#menu> from the Tag selector below the Document window.
   3. Click the Edit Style button        from the CSS panel. The CSS Rule Definition for #menu
        in style.css dialog box will open.
   4. Click to select Box from the Category list.
   5. Type 15 in the Height text box to resize the height.
   6. Click the OK button.

CREATING HYPERLINKS FOR MENU ITEMS
Each menu item will be linked to its corresponding Web page. To make the hyperlinks
accessible, a title will be added to each hyperlink. A title is a short description of the hyperlink.
The text written in the Title text box can be seen by hovering the mouse pointer over the
hyperlink. A screen tip will appear showing the text.

To create a hyperlink:
   1. On the Insert toolbar, click the Layout button                          and select Common.
   2. Highlight the College Home text from the menu area.
   3. Click the Hyperlink button       on the Insert toolbar. The Hyperlink dialog box will
      open (see Figure 20).
   4. In the Link text box, type http://cbe.calstatela.edu.
   5. From the Target drop-down list, select _blank.
   6. In the Title text box, type Business and Economics Home Page.
   7. Click the OK button.
   8. For the remaining menu items, repeat steps 2 through 7 by using the information in Table
      5 (see Figure 21).




                                                                  Adobe Dreamweaver 8: Crash Course - 15
                                      Figure 20 - Hyperlink Dialog Box

Table 5 - Hyperlink Information for Menu Items
Menu Item           Link                                                                    Title
CIS Home            http://cbe.calstatela.edu/is/index.php                                  Computer
                                                                                            Information
                                                                                            Systems Home
                                                                                            Page
Undergraduate       http://www.calstatela.edu/univ/admiss/                                  Undergraduate
                                                                                            Admissions
Graduate            http://cbe.calstatela.edu/is/admiss_IS.php                              Graduate
                                                                                            Admissions
Internships         http://cbe.calstatela.edu/is/cis_intern.php                             Internships
                                                                                            Opportunities
MIS Brochure        http://cbe.calstatela.edu/is/pdfs/MSISBrochure.pdf                      Masters
                                                                                            Information
                                                                                            Systems
                                                                                            Brochure Page
Faculty             http://cbe.calstatela.edu/is/faculty.php                                Faculty
                                                                                            Directory




                                      Figure 21 - Menu as Hyperlinks


FORMATTING HYPERLINKS
CSS will be applied to the default hyperlinks in order to match the look of the Web site.

To format hyperlinks:
   1. Click anywhere inside the menu items.
    2. Click the New CSS Rule button          from the CSS panel.
    3. Make sure that for Selector Type, the Advanced (IDs, pseudo-class selectors) option
       button is selected, for Selector, #menu a is selected, and for Define in, the style.css
       option button is selected (see Figure 22).




                                                                       Adobe Dreamweaver 8: Crash Course - 16
                                Figure 22 - New CSS Rule Dialog Box

   4. Click the OK button. The CSS Rule Definition for #menu a in style.css dialog box will
      open with the Type category selected (see Figure 23).




                  Figure 23 - CSS Rule Definition for #menu a in style.css Dialog Box

   5. From the Font drop-down list, select Arial, Helvetica, sans-serif.
   6. From the Size drop-down list, select 12.
   7. Click the Color box      and select black [#000000].
   8. In the Decoration section, select the none check box.
   9. Click the OK button to apply the settings.

       NOTE: Test all hyperlinks by previewing the Web page and clicking every link. Make sure each
       link is directed to its corresponding Web page.


Inserting a Content Section
The content section will hold any information the Web developer wants to display. A title and an
introductory paragraph will be added inside the content.

To insert a content section:
    1. Click anywhere below the menu. The cursor will appear below the menu section.
    2. On the Insert toolbar, click the Common button                              and select Layout.


                                                                   Adobe Dreamweaver 8: Crash Course - 17
    3. Click the Insert Div Tag button         on the Insert toolbar. The Insert Div Tag dialog
       box will open (see Figure 24).
    4. Type content in the ID text box.
    5. Click the OK button.




                                 Figure 24 - Insert Div Tag Dialog Box

    6. Click the dash line surrounding the content div tag to select it.
    7. Click the New CSS Rule button           from the CSS panel.
    8. Make sure that for Selector Type, the Advanced (IDs, pseudo-class selectors) option
       button is selected, for Selector, #content is selected, and for Define in, the style.css
       option button is selected.
    9. Click the OK button. The CSS Rule Definition for #content in style.css dialog box will
       open.

FORMATTING CONTENT
The content area will be formatted to be a lengthy area where information can be displayed.

To format the content area:
   1. Click to select Background from the Category list.
   2.   Click the Background color box        and select white [#FFFFFF].
   3.   Click to select Box from the Category list.
   4.   Type 600 in the Width text box.
   5.   Type 500 in the Height text box.
   6.   Click to select Positioning from the Category list.
   7.   Select Auto from the Overflow drop-down list.
   8.   Click the OK button.

FORMATTING TITLE TEXT
Use CSS rules to set up the font type, size, and color to match the ongoing theme of the site.
Padding for the content area will be adjusted so the text can be placed in the proper area.

To insert and format title text:
    1. Delete the Content for id “content” Goes Here text inside the content area. Make sure
       the cursor is still located inside the content div tag.
    2. Type Department of Computer Information Systems in the content area, and then
       highlight the text.
    3. In the Properties panel, select Arial, Helvetica, sans-serif from the Font drop-down list.
    4. Select 18 from the Size drop-down list.
   5. Click the color box       and select black [#000000] as the text color.
                                                                   Adobe Dreamweaver 8: Crash Course - 18
   6. Click the Bold button.
   7. Click the Align Left button.
   8. Click anywhere inside the Department of Computer Information Systems text.
   9. Click the Edit Style button      from the CSS panel.
   10. Click to select Box from the Category list.
   11. In the Padding section, uncheck the Same for all check box.
   12. Type 20 in the Top text box.
   13. Click to select Block from the Category list.
   14. Type 30 in the Text indent text box.
   15. Click the OK button (see Figure 25).




                                       Figure 25 - Title Preview


INSERTING A NESTED DIV TAG
A nested div tag is a div tag inside another div tag.

To insert a nested div tag:
    1. Place the cursor to the right of the Department of Computer Information Systems text.
    2. Press the [Enter] key on the keyboard.
   3. Click the Insert Div Tag button     on the Insert toolbar. The Insert Div Tag dialog box
      will open.
   4. Type intro in the ID text box.
   5. Click the OK button to complete the insertion.
   6. Delete any text inside the div tag.

FORMATTING CONTENT TEXT
To format content text:
   1. Click the dash line surrounding the intro div tag to select it.
   2. Click the New CSS Rule button            from the CSS panel.
   3. Make sure that for Selector Type, the Advanced (IDs, pseudo-class selectors) option
      button is selected, for Selector, #content #intro is selected, and for Define in, the
      style.css option button is selected (see Figure 26).
   4. Click the OK button. The CSS Rule Definition for #content #intro in style.css dialog box
      will open with the Type category selected.




                                                                   Adobe Dreamweaver 8: Crash Course - 19
                                 Figure 26 - New CSS Rule Dialog Box

   5. From the Font drop-down list, select Arial, Helvetica, sans-serif.
   6. From the Size drop-down list, select 12.
   7. In the Decoration section, select the none check box.
   8. Click the color box       and select black [#000000].
   9. Click to select Block from the Category list.
   10. Type 40 in the Text indent text box.
   11. Click to select Box from the Category list.
   12. In the Padding section, uncheck the Same for all check box.
   13. Type 30 in the Left text box.
   14. Type 30 in the Right text box.
   15. Click the OK button.
   16. Copy text from a Web site and paste it inside the div tag (see Figure 27).




                                      Figure 27 - Content Added


Exporting the Site Definition
When exporting the site, an .ste file will be created which holds all the information that organizes
the site’s files. The .ste file and the root folder have to be saved in the same location.

To export the site definition:
   1. From the Site menu, select Manage Sites. The Manage Sites dialog box will open (see
      Figure 28).

                                                                  Adobe Dreamweaver 8: Crash Course - 20
   2. Click the Export button. The Export Site dialog box will open.
   3. Select the desired location to save the .ste file and click the Save button.
   4. Click the Done button in the Manage Sites dialog box.




                       Figure 28 - Manage Sites Dialog Box When Exporting a Site


Importing the Site Definition
Before working on a Web site, it is better to first import the site definition. This will allow all the
files to be displayed in the Files panel.

To import the site definition:
   1. From the Site menu, select Manage Sites. The Manage Sites dialog box will open (see
      Figure 29).
   2. Click the Import button. The Import Site dialog box will open.
   3. Select the “CIS_Site.ste” file.
   4. Click the Open button.
   5. Click the Done button in the Manage Sites dialog box.




                       Figure 29 - Manage Sites Dialog Box When Importing a Site




                                                                  Adobe Dreamweaver 8: Crash Course - 21
Getting Help
Dreamweaver 8 has a Help menu to provide useful information for users. In the Dreamweaver 8
Help dialog box, users can use the Contents, Index, and Search tabs to look for answers to
particular questions.

To open the Dreamweaver 8 Help dialog box:
   1. From the Help menu, select Dreamweaver Help. The Dreamweaver 8 Help dialog box
      will open (see Figure 29).




                           Figure 30 - Dreamweaver 8 Help Dialog Box




                                                              Adobe Dreamweaver 8: Crash Course - 22