Dreamweaver

From Digi Wiki
Jump to: navigation, search

Location

fig 1

Located: Macintosh HD/Applications/Adobe Dreamweaver CS4/Adobe Dreamweaver CS4 or icon in the dock (fig 1)



Dreamweaver Workspace

fig 2

Dreamweaver is designed to give you an optimal workspace, while you design or code your website. There are seven main areas. (fig 2)

  • Insert Bar: Used to insert buttons and object into your webpage.
  • Document Toolbar: An area that allows you to work in design or code view and allows you to check the recent changes to your page.
  • Document Window: The main work area for the design view.
  • Panel Groups: A group of retractable panels to help preform common task.
  • Tag Selector: An area to change code without having to leave the design view.
  • Property Inspector: An area that allows you to change the format of a cell, text, and link.
  • Files Panel: Shows that exact location for the files of your website.


Insert Bar

The insert bar is located at the top of the screen with several tabs. (Common, Layout, Forms, Data, Spry, Text, and Favorites)

fig 3
  • Common: Lets you insert most commonly used objects. (fig 3)
    • Hyperlink: Inserts Hyperlinks.
    • Email Link: Inserts email links.
    • Named Anchor: Creates set markers in a document that connect links to the markers, which quickly take your visitor to the specified position.
    • Table: Helps you lay down text, links, and images in your website.
    • Insert Div Tag: A tag that specifically defines sections within the content of your web page.
    • Image: Inserts Images.
    • Media: Inserts videos, animations, and plugins.
    • Date: Inserts the date and time.
    • Server-Slide Include: A file that the server incorporates into your document when a browser requests your document from the server
    • Comment: Inserts comments that can only be seen in code view.
    • Head: A portion that contains information used by browsers.
    • Script: Helps insert a script in the coding.
    • Template:You can create a template for a web page layout.
    • Tag Chooser: Lets you insert a variety of tags to help for code hints and browser checks.


fig 4
  • Layout: Lets you insert tables, div tags, frames, and spry widgets. (fig 4)
    • Standard: The standard layout view.
    • Expand: Expands the standard layout view to adds cell padding and spacing to all tables in a document; while increases the tables’ borders to make editing easier.
    • Insert Div Tag: Div Tags are useful in creating style sheets by laying out and position blocks within your page.
    • Draw AP Div: Inserts a div tag in the document and assigns the div an id value.
    • Spry Menu Bar: Creates a horizontal/vertical navigator menu.
    • Spry Tabbed Panels: Creates expandable/collapsible tabbed panels.
    • Spry Accordion: Creates expandable/collapsible accordion panels.
    • Spry Collapsible Panel: Creates one expandable/collapsible panel.
    • Table: Creates table to input information and objects.
    • Insert Row Above: Creates one row above the insertion point in the tables.
    • Insert Row Below: Creates one row below the insertion point in the tables.
    • Insert Column to the Left: Creates one column to the left of the insertion point in the tables.
    • Insert Column to the Right: Creates one column to the left of the insertion point in the tables.
    • IFrames: Use a frame for navigation and organizations in your page.
    • Frames: Use frames for navigation and organizations in your page.
    • Draw Layout Table (Layout Mode Only): Makes it easier to develop tables in the layout mode.
    • Draw Layout Cell (Layout Mode Only): Makes it easier to develop cells in the layout mode.


fig 5
  • Forms: Lets you create forms and insert form elements. (fig 5)
    • Form: The base for creating a form cell.
    • Text Field: Creates a text field within a document.
    • Hidden Field: Creates a hidden field within a document.
    • Text Area: Creates a text field within a document.
    • Check Box: Creates a check box button.
    • Radio Button: Creates a check box button.
    • Radio Group: Creates several check box buttons.
    • List Menu: Creates a list/ menu of current highlighted text.
    • Jump Menu: Creates a pop-up menu for your visitors.
    • Image Field: Creates a Images field and a submit/reset button.
    • File Field: Creates a browse source field with button.
    • Button: Create a button for anything need in your page.
    • Label: Creates labels i the code view to insert text, images, and obejcts.
    • Fieldset: Creates a field set.
    • Spry Validation Text Field: Creates a text field that check the valid/invalid states, if a user does not input the correct information.
    • Spry Validation Textarea: Creates a textarea that check the valid/invalid states, if a user does not input the correct information.
    • Spry Validation Checkbox: Creates a checkbox/s that check the valid/invalid states, if a user does not input the correct information.
    • Spry Validation Select: Creates a slection bar that check the valid/invalid states, if a user does not input the correct information.


fig 6
  • Data: Lets you insert spry data objects, records sets, regions, and update forms. (fig 6)
    • Import Tabular Data: You can import data from other databases, Word, or Excel.
    • Spry XML Data Set: You can insert data objects to allow users to interact with a page quickly and dynamically from a browser window.
    • Spry Region: Works with a master table object to allow dynamic updating of data on a page.
    • Spry Repeat: A simple data structure that you can format as needed to present your data.
    • Spry Repeat List: You can add repeat lists to display your data as a list.
    • Spry Table: Create one or more HTML tables that dynamically update other page data in response to a user action.
    • Record Set: A group of database records.
    • Stored Procedures: A reusable database item that performs some operation on the database.
    • Dynamic Data: Creates a framework that enables you to quickly build a functional data-driven application that controls in the form of smart validation and the ability to easily change the display of these controls using templates.
    • Repeat Region:A section within a template that can be replicated as many times needed.
    • Show Region: A region that can be seen or not on a template.
    • Recordset Paging: The process of breaking up a recordset into multiple "pages" of information for display.
    • Go to Detail Page: Use the information presented from a master page and locates a record set.
    • Display Record Count: Provides a record count for users to reference a point as they navigate through a set of records.
    • Master Detail Page Set: Provide your visitors wit a previewed and/or detailed information.
    • Insert Record: Inserts a new empty record set.
    • Update Record: Updates a record set with the latest information.
    • Delete Record:Deletes a record set.
    • User Authentication: Provides authentication for a valid user.
    • XSL Transformation: Provided a stylesheet language for transforming XML documents into other XML documents.


fig 7
  • Spry: Lets you create a variety of spry widgets. (fig 7)
    • Spry XML Data Set: You can insert data objects to allow users to interact with a page quickly and dynamically from a browser window.
    • Spry Region: Works with a master table object to allow dynamic updating of data on a page.
    • Spry Repeat: A simple data structure that you can format as needed to present your data.
    • Spry Repeat List: You can add repeat lists to display your data as a list.
    • Spry Table: Create one or more HTML tables that dynamically update other page data in response to a user action.
    • Spry Validation Text Field: Creates a text field that check the valid/invalid states, if a user does not input the correct information.
    • Spry Validation Select: Creates a slection bar that check the valid/invalid states, if a user does not input the correct information.
    • Spry Validation Checkbox: Creates a checkbox/s that check the valid/invalid states, if a user does not input the correct information.
    • Spry Validation Textarea: Creates a textarea that check the valid/invalid states, if a user does not input the correct information.
    • Spry Menu Bar: Creates a horizontal/vertical navigator menu.
    • Spry Tabbed Panels: Creates expandable/collapsible tabbed panels.
    • Spry Accordion: Creates expandable/collapsible accordion panels.
    • Spry Collapsible Panel: Creates one expandable/collapsible panel.


fig 8
  • Text: Lets you inset and format text. (fig 8)
    • Bold: Makes the type bold.
    • Italic: Makes the type italic.
    • Strong: Makes the type strong.
    • Emphasis: Italicizes the text.
    • Paragraph: Place the type into a paragraph format.
    • Blocked Quotes: Tab the text over.
    • Preformatted Text: Text that has already been Dreamweaver formatted.
    • Heading 1: Place the type into a heading 1 format.
    • Heading 2: Place the type into a heading 2 format.
    • Heading 3: Place the type into a heading 1 format.
    • Unorder List: Place the type into a unorder list format.
    • Order List: Places selected list into an order.
    • List Item: Places selected items into a list.
    • Definition List: Creates a hierarchy list.
    • Definition Term: A tag listed for a word.
    • Definition Description: A tag listed for the description.
    • Abbreviation: Provides tags that let you define/ abbreviate or provide and acronym you can use for your search engines. (ex: ME for Medical Engineer)
    • Acronym: Provides tags that let you define/ abbreviate or provide and acronym you can use for your search engines. (ex: ME for Medical Engineer)
    • Characters: Provides standard symbols and characters for your text.


fig 9
  • Favorites: An area to drag commonly used task. (fig 9)





Document Toolbar

fig 10
  • Code: A view mode that can change the layout of the website by imputing in code.
  • Split: Shows both Code and Design view modes.
  • Design: A view mode that can change the layout of the website by changing visual designs.
  • Title: Type into the text box to title a specific page.
  • File Management: Helps to manage file and pages.
  • Preview/Debug in Browser: Show the recent changes to the layout of the website or page.
  • Refresh Design View (F5): Refresh the design view to reflect the recent change.
  • View Options: Several view aids to help you while you work.
  • Visual Aid: Used to display background, borders, and box models.
  • Validate Markup: Checks the document for syntax errors.
  • Check Browser Compatibility: Checks accessibility and browser compatibility.



Document window

fig 11


The Document windows is the main area you will work while in the design view. You have the ability to arrange, organize, and edit anything in this region. While working in his area, you can add rulers, grids, guides, and head content to help you as you work. (fig 11)








Panel Groups

Along the right-side of the screen, you will notice a group of panels. These panels help you alter the actions within your page. (fig 12 & 13)

fig 12
fig 13


















  • Adding Panels:

Click on Window > ... Automatically, it will open in the panels sections. The panels can be dragged anywhere else on the screen.

  • Remove Panels:

Right-click on the blue tile bar of the panel and select Close File or Close Panel Group.

Tag Selector

fig 14a

The Tag Selector lets you edit or add attributes and attributes’ values to the object in your page.


Altering Objects: Select an object and go to the Attributes tab. Click on any of the attributes, write a new value to the right, and press Enter. (fig 14a)


Adding Behaviors: Select an object and go to the Behaviors tab. Click on plus icon with the downward arrow and select behavior. (fig 14b)


fig 14b
  • Call JavaScript:Executes a custom line of function in JavaScript code.
  • Change Property: Changes the value of a object's property.
  • Check Plugin : send visitors to different pages for plugins.
  • Drag AP Element: Used to create puzzles, slider controls, and other movable elements.
  • Effects: Applies effect to selected objects.
  • Go To URL: Upon clicking an object, it will take you to another URL.
  • Jump Menu: A pop-up menu feature.
  • Jump Menu Go: A pop-up menu feature with a Go button.
  • Open Browser Window: Upon clicking an object or link, a browser window will open taking the visitor to another URL.
  • Popup Message: Upon clicking an object or link, a drop-down message will appear.
  • Preload Images Shortens display time by caching images that are not shown when the page first appears. (ex: rollover images)
  • Set Nav Bar Images: Turns an image into a navigation bar image.
  • Show-Hide Elements: Show and hide AP elements.
  • Swap Image: Used to create rollover buttons and images.
  • Swap Image Restore: Restores the last set of swapped images to the previous source file.
  • Timeline: Used to create animations.
  • Validate Form: Uses JavaScript code to check content of fields and data.
  • ~Depreciated: Checks browser compatibility, plays sound, and checks Shockwave and Flash files.
  • Show Events: Shows events that are related to your page.






Property Inspector

fig 15


The Property Inspector format text, paragraphs, cells, and page; while creating links to your pages. (fig 15)

  • Format Text and Paragraphs: In this area, you can change the font, size, style, alignment, and color inside a table by highlighting the text or paragraph.
  • Format Page:' By clicking Page Properties button, you can change the font, background, margins, headings, and encoding on the page.
  • Linking Pages: See Linking and Navigation. [[1]]






Files Panel

fig 16


The File panel helps you manage and organize your folders, web pages and other necessary files as you create your website.(fig 16) In this panel, you can link your pages, create the site root, and check the file activity.


























Basics

Creating a Site

Adding Content

  • Adding a Table into a Page: (fig 17)

Place the insertion point where you would like to add the image. Go to Insert > Table or click on the Insert Toolbar under the Common Category the image button. A box will open. Enter in the number of rows, columns, table width, and border of thickness. (fig 18)On the bottom, you can add caption, alginment, or a summary. Click OK. (fig 19)

fig 17
fig 18
fig 19








  • Adding an Image into a Cell or Page:

Place the insertion point where you would like to add the image. Go to Insert > Image (fig 20)or click on the Insert Toolbar under the Common Category the image button. A box will open asking for the image file. (fig 21) Click OK. A new box will open asking if you would like to insert a optional tag with alternative text and web address. Click OK. (fig 22)

fig 20
fig 21
fig 22










fig 23
  • Adding a Video/Animation into a Cell or Page:

Place the insertion point where you would like to add the video/animation. Go to Insert > Media > .... or click on the Insert Toolbar under the Common Category the media button. A box will open asking for the video or flash file. (fig 23) Click OK.










Linking and Navigation

Dreamweaver has made it easy to link and navigate among you web pages with text, images, and video.

Linking Pages to Text and Images

fig 24

After applying text or an image, select it and go down to the Property Inspector. In the top right-hand corner, you will notice the Link. (fig 24) Next to Link, you will notice three way ways to link your web pages.

  • You can type the we address into the text box. (ex: http://digi.stedwards.edu)
  • Drag the target icon over the file/web page in the File Panel.
  • Click on the folder, to open up a browser window and locate the file/web page.

Creating a Navigation Bar

fig 25

Dreamweaver can only allow you to create one navigational bar, but you can always go back to alter it.


Click Insert > Image Objects > Navigation Bar (fig 25) or click on the Insert Toolbar under the Common Category the image button downward arrow, to see Navigation Bar. In the new box, you can specify how many buttons, their images, and links. (fig 26)

fig 26
  • Nav Bar Elements: You can add the buttons or change their placement order.
  • Element Name: Title your buttons. (ex: _1, _2, etc...)
  • Up Image: The image you see when you first enter the page. Locate your create image.
  • Over Image: The image you see when you hover over the image. Locate your create image.
  • Down Image: (Optional) The images you see after you have click on it. Locate your create image.
  • Over While Down Image: (Optional) Another image you would see after you've clicked it while you are hovering over it.
  • Alternative Text: Supplement instruction text seen only in the properties.
  • When Clicked, Go To URL: type in address or locate with Browser.
  • Options: You have the option to preload the images and/or to show Down Image initially.

Click OK. (fig 27)

fig 27







Creating a Rollover Button

You can add as many rollover buttons as you want, anywhere on the page'

fig 28

Click Insert > Image Objects > Rollover Image (fig 28) or click on the Insert Toolbar under the Common Category the image button downward arrow, to see Rollover Image. In the new box, you can specify the name, their images, and link. (fig 29)

fig 29
  • Image Name: Title it
  • Original Image: The image you see when you first enter the page. Locate your create image.
  • Rollover Image: The image you see when you hover over the image. Locate your create image.
  • Preload Rollover Image: It will preload the button.
  • Alternative Text: Supplement instruction text seen only in the properties.
  • When Clicked, Go To URL: type in address or locate with Browser.

Click OK. (fig 30 & 31)

fig 30
fig 31























Previewing Pages

To view a page in a web browser, click File > Preview in Browser > ... (fig 33) or click the globe on the Document Toolbar. A drop-down menu will appear; select a browser. A box will open asking you to save. Click Save. (fig 34)

fig 33
fig 34













Working with Other Programs

Bridge

Inserting a File

fig 35

In Design View within Dreamweaver, place the insertion point in the position where you would like to see the file go. In Bridge, select the file and click File > Place in Dreamweaver. (fig 35) It will now copy the file and place it in you site folder and at the insertion point.

If the file did not copy to your site folder, you will need to copy into the folder and save the page. If you did not copy it, the file will not appear the next time you open the page and you will have to reconnect it again.














Photoshop

Inserting a Photo

fig 36

In Design View within Dreamweaver, place the insertion point in the position where you would like to see the file go. Click Insert > Image (fig 36)or click on the Insert Toolbar under the Common Category the image button. Find your Photoshop PSD file and click OK. In the Image Preview box, you have three tabs.

  • Options: Set the format for your picture: JPEG, PNG, or GIF and the quality. Bear in mind, the better the quality the larger the file. (fig 37)
  • File: Set the amount the image will need to be scaled and the amount of area that will be seen when exported. (fig 38)
    • (Optional) On the lower right-hand corner, you have several options to alter or view the image.
  • Saved Settings:' Set it to the type of quality consistent with Options tab. (fig 39) Click Save.
  • In the new window, click Save again. (fig 40)The image to your Default Image folder in your site folder.



fig 37
fig 38
fig 39
fig 40




























Fireworks

Editing a Fireworks Pop-up Menu in Dreamweaver

Do not edit a pop-up menu in both Dreamweaver and Fireworks. Do one or the other. Create a pop-up menu in Fireworks and edit in Dreamweaver or vise-versa.

In Dreamweaver, select the Firework table that contains the pop‑up menu, and click Edit in the Property Inspector. The source PNG file opens in Fireworks.

In Fireworks, edit the menu with the Pop‑up Menu Editor, and click Done on the Fireworks toolbar. Fireworks sends the edited pop‑up menu back to Dreamweaver.

Creating a Photo Ablum

fig 41


In Dreamweaver select Commands > Create Web Photo Album. (fig 41) A Photo Album box opens. (fig 42)

  • Photo Ablum Title: Enter the title.
  • Subheading Info: (Optional)
  • Other Info: (Optional)
  • Source Images Folder: Locate where Dreamweaver should grab the photos.
  • Destination Folder: Designate where to save the final product.

Do not place two destinations folder of two different albums in the same place. You can overwrite existing files.

  • Thumbnail Size: Designate the size of the thumbnails.
  • Columns: Number of Columns.
  • Thumbnail Format: How to save the thumbnail pics.
  • Photo Format: How to save the photo pics.
  • Create Navigation Page for Each Photo: Creates an individual web page for each source image. If you do not check the box, the thumbnails link to the large images.

Click OK. Fireworks will open and begin the process of creating the album. (fig 43) When the album is created, a pop-up message will appear and a tab will appear in Dreamweaver of the new .htm album created. (fig 44 & 45)

fig 42
fig 43
fig 44
fig 45






















Building Spry Pages

The Spry framework is a JavaScript library that provides the ability to build web pages that create widgets such as accordions and menu bars, and add different kinds of effects to various page elements.


Inserting in a According Widget

fig 46

Click anywhere on the page and select Insert > Spry > Spry Accordion. (fig 46)The accordion will appear on your page with only two labels.

  • Add or Delete Panels: (fig 47)

Click on title bar on the accordion and go down to the property inspector. You will notice one add/minus column. Use the add/minus to add or subtract and the up/down arrows to organize panel.

  • Type in Each Panel: (fig 48)

Click on a Panel Heading. It will open and you can begin to type.

fig 47
fig 48











Inserting in a Menu Bar

fig 49
fig 50

Click any where on the page, select Insert > Spry > Spry Menu Bar, (fig 49)select Horizontal or Vertical, and click OK. (fig 50)

  • Add or Delete Menus and Submenus:

Click on the Spry Menu title bar, in your document. Go down to the Property Inspector and you will see three add/minus columns and a text, link, title, and target bars. (fig 51)

  • Columns: Each Column represents a item hierarchy. Use the add/minus to add or subtract and the up/down arrows to organize items. Continue to preform this action for each column, as needed. To edit and connect each item to links, select the item and type the needed information on the right side.
fig 51
fig 52
  • Text Bar: Type the name of the item.
  • Link Bar: The link to connect to.
  • Title Bar: The title of the new page.
  • Target Bar: Tells Dreamweaver how to open up the link.

Inserting a Collapsible Panel

fig 53

Click anywhere on the page and select Insert > Spry > Spry Collapsible Panel. (fig 53) Go down to the Property Inspector and you will see two drop-down menus: Display and Default State. (fig 54)

  • Display: How it will appear when clicked.
  • Default State: The inital state the panel was first seen by your visitor.
fig 54
fig 55