Managing Web Document in Dreamweaver

Opening the Web Documents

I hope that before you've read about Instructions How to Use Latest Versions Dreamweaver, because it is the first article about dreamweaver and a follow-up article after article.

To open a document on dream weaver web there are three ways you can do, namely:

• Using Starter Page

To open a document using a starter web page can be done at the beginning of a new dreamweaver opened. The way to do is:

1. Select it and click Open in the Open Recent Item.
2. By using this method means that you already know and save a web document before, so determine the location of document storage directory that will be opened. Eg C: xampp htdocs multibisnisindo file-name Because the directory of web documents generally consist of multiple files.

• Using the Menu Bar

Do as follows: File → Open, followed by a search directory layout of web documents.

• Using the Files panel

Files panel located on the right side, here's how to open a web document using files panel:

If you have not used this panel files, then the first thing to do is to enable the panel file with press F + 8. Next specify the document storage directory that will be opened.

Know the Work Area Dreamweaver

In the Dreamweaver work area there are many facilities that can be used to do all the things related to the activity of making web (new document creation and editing files that have been created previously).
Here are the facilities available in Adobe Dreamweaver CS6: Menu Bar, Toolbar Document, Document Window, Panel Group, Workspace Switcher, Tag Selector and Property Inspector.
In order to understand the layout and position of these facilities please look at the picture below:

Menu Bar:

On the menu bar consists of several menu, namely: Edit, View, Insert, Modify, Format, Command, Web, Window, and Help.
In each menu still has submenus kategory accordance with their respective functions.

Document Window:

Document window displays the files being created or are working on. In the document window are the Title Bar displays the name of the file that is being worked on, a zoom facility, Document Toolbar, and the Tag Selector.

Document Toolbar:

Document Toolbar is a button that can be used to organize and select the mode on the document window. Buttons are available at the document toolbar are: Show Code View, Show Code and Design View, Show Design View, and Live.
By using the buttons provided we can choose the mode for the document window, namely: Using window mode code as a whole, using the preview window mode code and work, and the mode of work overall (graphic or visual mode).

Tag Selector:

Tag Selector located on the bottom, below the document window. Function to display HTML tag of the object in the given selection (subject to selection).

Panel Group:

Panel Group dreamweaver located on the right side, next to the document window. One of the conveniences found on the group panel including the panel there is a file that directly displays the directory computer. So to open a particular file we can more easily through the panel group.

Insert Panel:

Insert Panel function to insert objects into a web page that is being done. On the panel insert, there are several tabs, including: Common, Layout, Forms, Data, Spry, Text, and Favorites.

Common Tab: There is a tool used to create and insert an object into a web page or file that is being worked on, including:

• Hyperlink: To create a hyperlink.
• Email Link: To insert an email link.
• Named Achor: To name the anchor.
• Table: To create a table.
• Insert Div Tag: To insert a div tag.
• Images: To insert a picture.
• Media: To insert media, such as flash files (SWF), FLV and other media.
• Date: To insert a date.
• Server-side Include: To insert a server-side document.
• Comment: To insert a comment in the file.
• Head: To add elements to the head section in the document, such as meta, keywords, description, and others.
• Script: To insert javascript.
• Templates: To create a template.
• Tag Chooser: To insert a tag such as HTML tags, ASP, .NET, PHP, JSP, and others.

Tab Layout: On the layout there is a tool that has a function to support in making a web page, such as: tools for creating tables, frames, and so on.

Below are descriptions of tools contained on the tab layout:

• Insert Div Tag: To insert a div tag.
• Draw AP Div: To create a layer.
• Spry Menu Bar: To make the menu button on the web page.
• Spry Tabbed Panels: To make the panel tabs on the web page.
• Spry Accordion: To make the accordion panel.
• Spry Collapsible Panel: To create a tab in which there are the contents of the document and displayed to the bottom.
• Table: To create a table
• Insert Row Above: To insert a line at the top of the table.
• Insert Row Bellow: To insert a line at the bottom of the table.
• Insert Column To the Left: To insert a column in the table to the left.
• Insert Column Ti The Right: To insert a column in the table to the right.
• Iframe: To insert an iframe on the web page.
• Frames: To make the frame.

Tab Form: The role is very important and useful form on a website, due to form a user can interact.

Here is a tool that is contained in tab form:

• Form: To create a form.
• Text Field: To create a text filed on the form.
• Hidden Field: To create hidden fields in the form.
• Textarea: To create a textarea on the form.
• Checkbox: To create a checkbox on the form.
• Checkbox Group: To create a checkbox that number more than one.
• Radio Button: To create radio buttons on the form.
• Radio Group: To create a group of radio buttons on the form.
• List / Menu: To create a list on the form.
• Jump Menu: To create a jump menu on the form.
• Image Field: For the input image on the form.
• Field field: To make the file search button.
• Button: To create a button.
• Label: To create a label on the form.
• Fieldset: To make fieldset.
• Spry Validation Text Field: To create a text field spry models.
• Spry Validation Textarea: To create a model textarea spry.
• Spry Validation Checkbox: To create a model checkbox spry.
• Spry Validation Select: To create a list of models spry.
• Spry Validation Password: For the password field.

Data Tab: Tab data on Adobe Dreamweaver CS6 is used to input the data object models spry also other dynamic elements. For example: Recordset, Repeated Regions, Insert Record, Update Record, Delete Record, and so on.

Spry Tab: Tab Spry contains several buttons for page creation spry, includes data and spry.
Spry is a JavaScript library that can be used to design web pages, including: Creating a menu bar, textarea, text fields, and so on.

Text Tab: Tab text serves to organize and compose text formatting, paragraphs, and other text characters.

The following is a description of the tools contained in the text tab:

• Bold: To create a text becomes thicker.
• Italic: To make text become skewed.
• Strong: Just as Bold, as well as to make the text bold.
• Emphasis: Same as Ityalic, making the text oblique.
• Paragraphs: To create and organize paragraphs.
• Blockqiote: To mark the text as an important record. The text will have a layout and special characters.
• Preformatted Text: To form a paragraph as well as on the script.
• Heading 1: To make text heading 1.
• Heading 2: To make text heading 2.
• Heading 3: To make text heading 3.
• Unordered List: To create a list that has the symbol format.
• Ordered List: To create a list with numbers or alphabetical format.
• List Item: To make the list.
• Definition List: To define something.
• Term Definition: To input the definition of the term.
• Definition Description: To define the text.
• Abbreviation: To provide information about the abbreviations in the text designated or intended.
• Acronym: To create an acronym.
• Characters: To insert a specific character in the text, for example, replace the line, copyright, and so forth.

Favorites Tab: Tab favorites function to add the contents of the various tabs in the favorites tab, such as Table Row, Hyperlink, Comment, Dynamic Teext, and so forth.
How to add another tab in the favorites tab:

Right-click on an empty area of the favorites tab → Customize Favorites. In the Available Objects select the tab to be taken or entered, then press the button Then proceed by pressing the OK button.

CSS Style Panel: CSS Style Panel is Adobe Dreamweaver CS6 facility that has a function to set the CSS script that web page becomes more interesting. CSS Style Panel consists of two modes, namely All and Current mode.

• Mode All: Have two panels, namely the All Rules and Properties. Rules pane displays a list or list style sheet of web pages on the document selection. Medium Properties pane displays the contents or the attributes of the style sheet in the selection on the All Rules pane.
• Current Mode: it has three panels, namely the Summary for Selection Panel, About Panel, and the Panel Properties.
  • Summary For Selection Panel: Displays the contents of CSS.
  • About Panel: Displays information on the location of the CSS script by selection.
  • Properties Panel: Displays the contents or attributes of the style sheet in the selection.

Files Panel: To be continued on a follow-up article.