Docstoc

INTRODUCTION TO DREAMWEAVER CS5.5

Document Sample
INTRODUCTION TO DREAMWEAVER CS5.5 Powered By Docstoc
					SIU Medical Library




                                       INTRODUCTION TO DREAMWEAVER CS5.5
DEFINITIONS:
        HTML – Hypertext Markup Language
        HTML documents contain two main sections: the HEAD section and the Body section.
        HEAD
             Mostly invisible to visitors to your web site.
             Contains text tagged as TITLE, which appears in the title bar of both the browser and the
             document window of Dreamweaver.
             Contains other information such as JavaScript and keywords for search engines.
        BODY
                The part of the document that is visible in a browser window.


SETTING UP A SITE IN DREAMWEAVER

ENTERING YOUR SITE INFORMATION
LOCAL INFO
                                                                         Choose Site -> Manage Sites ->New
                                                                         ->Site

                                                                         Follow the Basic instructions or click
                                                                         the Advanced tab near the top of the
                                                                         page. Pictured at left are the
                                                                         Advanced screens.

                                                                         Site Name: Enter in a name for your
                                                                         site.

                                                                         Local root folder: where your web
                                                                         pages, pictures, and other data are
                                                                         stored on your computer. Click the
                                                                         folder icon to pick the directory
                                                                         where you would like to store your
                                                                         files.

                                                                         HTTP address: enter the          web
                                                                         address of your home page.
SIU Medical Library



REMOTE INFO
                                                                                        This is where you will put you
                                                                                        page so it can be viewed by the
                                                                                        outside world.

                                                                                        Server Access – select FTP
                                                                                        (File Transfer Protocol

                                                                                        FTP Host – enter the address of
                                                                                        your web server

                                                                                        (e.g. web.siumed.edu)

                                                                                        Host Directory – the directory
                                                                                        on the server where your
                                                                                        information is to be stored.

                                                                                        Login – first initial, lastname

                                                                                        Password –click the save box if
                                                                                        you want save your password in
                                                                                        this window.



THE SITE WINDOW




    You can control the files for your site in this window. The connect button        will connect and log you into your
    web server to transfer your files. You can move your files to or from the server by using the get and put buttons, or
    by clicking a dragging the files from one window to another.




                                                           2
SIU Medical Library


SYNCHRONIZE YOUR SITE
                                                                         Once you've created files in your local and
                                                                         remote sites, you can synchronize the files
                                                                         between the two sites.
                                                                         While in the Site window use the Site >
                                                                         Synchronize command to transfer the latest
                                                                         versions of your files to and from your remote
                                                                         site. You may choose to synchronize the
                                                                         entire site or selected files only.



INDEX .HTML
Create an index page for each folder representing a category for your site.

Most servers recognize index.htm or index.html as the default home page for a directory. Both .htm and .html are
recognized by the web server as HTML pages

Example – http://www.siumed.edu/index.html. When http://www.siumed.edu/ is typed in, the server automatically
opens the index.html file without requiring the full URL to be typed.



PROPERTIES INSPECTOR




To display the property inspector window: choose Windows -> Properties
Use this window to create links, modify and add formatting to images, tables, text and other items.
First select text or an object and then apply formatting using the property inspector window.


HEADINGS AND PARAGRAPH FORMATS
                                                  Paragraph:       for normal text in your document
                                                  Use Headings: to structure your document rather than physical
                                                  formating such as bold and font size.
                                                  Preformatted: preserves the whitespace (including multiple spaces
                                                  between words and new lines) entered into the source code for the
                                                  content. The default text is a monospaced font.




                                                            3
SIU Medical Library



LISTS

                                                                     F ORMAT -> L IST
                                                                       Bulleted Lists (unordered list) – OR     use the
                                                                       icon on the Properties Panel
                                                                       Numbered Lists (ordered list ) – OR use the
                                                                       icon on the Properties Panel
                                                                       Definition List – Not on the Properties Panel




USING CONTEXT MENUS
        Open the context menu by right-clicking the object or window
        Dreamweaver makes extensive use of context menus, which provide a method for quickly accessing the most
        useful command and properties related to the object or window you’re working with.
        Context menus list only commands pertaining to the current selection.


INSERT PANEL



                                                                                                                TO
DISPLAY THE INSERT PALETTE: CHOOSE WINDOW -> I NSERT
    The Insert panel is context sensitive. It defaults to the Common panel shown above. By clicking on the tabs you
    can change the Insert panel to show other categories of objects when you need them.


META TAGS
Insert keywords in META tags so that search engines will find and correctly index your site.

                                                                                         With the Common Insert panel
                                                                                        selected, click on the small
                                                                                        black triangle next to the Meta
                                                                                        icon and choose Keywords
                                                                                        Enter your keywords, separated
                                                                                        by commas, in the text box
                                                                                        labeled Keywords.




                                                           4
SIU Medical Library

LINE BREAKS AND PARAGRAPH BREAKS
    Line Break                    hold down the SHIFT key while you press ENTER to break the text to the next line
                                  with no extra space between the lines.

    Paragraph Break               press the ENTER key. This leaves a space between the two lines.

IMAGES
        JPG and GIF are the two image formats supported by all browsers.
        Use JPG for photographic images.
        Use GIF for clip art and images with large areas of flat color.
        Image files must be inside your current site or directory.

T O INSERT AN IMAGE
    1. Place the insertion point in the document where you want the image to appear.
       Choose Insert -> Image OR click the Insert Image button on the Common panel of the Object palette
    2. In the dialog box that appears, browse and select an image or type the path for the image file.
    3. Set image properties in the Properties Panel , including alternate text

LINKS
    Relative vs. absolute links:

    Use relative links for files that are part of your site. Example: index.html

    To link to an external file you need an absolute link. Example: http://www.siumed.edu/

TO MAKE HYPERTEXT LINKS:
    1. Select the text to be linked
    2. In the Properties Panel type or paste the web address of another site in the link box or click on the folder next
       to the link box to select the local document to be linked.


Type of link                                                      Example

Link to a document at another site: (absolute link)               http://www.somewhere.com

Link to a file in the same directory (relative link)              docname.html

Link to a file in a subdirectory (relative link)                  subdir/docname.html

Link to a file in a higher directory (relative link_              /docname.html

Link to another spot in the same document                         #anchorname

Link an email address                                             mailto:username@siumed.edu

TO LINK TO ANOTHER SPOT IN A LONG DOCUMENT :
    1. Insert an anchor at your chosen spot (where you want to jump to in the document)
       Either choose Insert -> Named Anchor OR click on the anchor icon on the Common Insert panel.
    2. Type a name for the anchor in the dialog box.
    3. Select the text to be linked
    4. In the Properties window, type #anchorname in the link box.
                                                              5
SIU Medical Library

TABLES
TO INSERT A TABLE :
    Insert -> Table OR click the Table button on the Common insert.

                                                    TABLE WIDTH:A percentage based table will stretch with the width
                                                    of the browser. If a table has a width of 75%, the table with stretch to
                                                    fill 75% of the window. If you specify the width in pixels, the table will
                                                    have a fixed with.

                                                    Note: It is highly recommended that most tables be percentage
                                                    based.

                                                    HEADER: Designate row and column headers in data tables.

                                                    CAPTION:Provides a table title which displays outside of the table

                                                    SUMMARY: Provides a table description. Screen readers read the
                                                    summary text, but the text does not appear in the user’s browser.




SELECTING TABLE ELEMENTS
TO SELECT THE ENTIRE TABLE, DO ONE OF THE FOLLOWING :
    Click the top left corner of the table, or click anywhere on the right or bottom edge
    Click once anywhere in the table and choose Modify -> Table -> Select Table
    Click anywhere in the table and select the <table> tag at the bottom left corner of the Document window.

INCLUDE A DATE ON YOUR PAGE
TO INSERT A DATE ON YOUR PAGE THAT WILL AUTOMATICALLY UPDATE WHEN YOU SAVE CHANGES TO THE PAGE :
    Choose Insert -> Date
    Select a date format and check “Update Automatically on Save” box.




                                                             6
SIU Medical Library

LIBRARY ITEMS
             Items you want to reuse or update often should be saved as library items. When you place a library item
             into a document, Dreamweaver inserts a copy and creates a reference to the original.
             Update content on the entire web site by changing a library item using the Update command in the
             <Modify->Library submenu.
             A library item can be any BODY element including forms, text tables, images, plugins, etc.
             Library items are stored in a Library folder within the local site root folder.

CREATE A LIBRARY ITEM :
        1. Select a portion of a document to save as a library item.
        2. Choose Modify->Library->Add Object to Library
        3. Enter a name for the new item.

ADD A LIBRARY ITEM TO A DOCUMENT:
        1. Choose Window->Assets to open the Assets panel.
        2. Drag an item from the library (Assets) panel to the document window, OR select an item and click the
           Insert button.

EDIT A LIBRARY ITEM :
        1.   Choose Window->Library
        2.   Double-click an item to open the edit window.
        3.   Edit the item and save your changes.
        4.   In the dialog box that appears, choose whether to update the documents on the local site which contain
             the library item.

UPDATE PAGES WHICH USE AN EDITED LIBRARY ITEM:
        1. Choose Modify->Library->Update pages.
        2. In the dialog box that appears, choose the files that you want to update.
        3. Click Start.

MAKE A LIBRARY ITEM EDITABLE:
    If you want to edit the item specifically for that page, you must break the link between the item in the document and
    the library. Once you’ve made an instance of a library item editable, that instance cannot be updated from the
    library.
        1. Select a library item in the current document.
        2. Do one of the following:
           Click Detach from Original in the Property Inspector.
           OR right click and choose Detach from Original in the context menu.


TEMPLATES
A template is a document you can use to create multiple pages that share the same layout. When you create a
template, you can indicate which elements of a page should remain constant (noneditable, or locked) in documents
based on that template, and which elements can be changed.

Templates are best for situations in which you want a set of pages to have an identical layout—where you want to
design the complete final layout for a set of pages first, and then add content later. If you simply want your pages to
have the same headers and footers, with different layouts in between, use library items to store the headers and
footers.

                                                           7
SIU Medical Library

TO SAVE AN EXISTING DOCUMENT AS A TEMPLATE:
    1. With the document open, choose File > Save as Template.
    2. In the dialog box that appears, select a site from the pop-up menu, then enter a name for the template in the
       Save As box.
    3. Click Save. The template file is saved in the site's Templates folder, with a .dwt file extension.

TO DEFINE A TEMPLATE'S EDITABLE REGIONS
In a template, editable regions are the parts of the page that can be changed in files based on the template. Locked
(noneditable) regions are the parts of the page layout that remain constant from one page to another. All regions in a
new template are locked when you create the template, so to make the template useful, you must make some regions
editable (unlock them).

    1. In the template file, select the text or content you want to change to an editable region.
    2. Choose Insert > Template Objects >Editable Region.
    3. In the New Editable Region dialog box, enter a unique name for the region.

TO INSERT AN EMPTY EDITABLE REGION IN A TEMPLATE:
    1. In the template, place the insertion point where you want to insert an editable region.
    2. Choose Insert > Templates Objects> Editable Region.
    3. In the New Editable Region dialog box, enter a name for the region.


In template files, only editable regions are marked with highlighted outlines. You can make changes to both editable
and locked content. In a file based on a template, changes can only be made to the editable regions.



10/2/12 CPG




                                                            8

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:12/17/2012
language:
pages:8