Dreamweaver CS6

From Digi Wiki
Jump to: navigation, search

Overview

Location: Macintosh HD > Applications > Adobe Dreamweaver CS6 > Adobe Dreamweaver CS6 or icon in the dock. - fig.1

fig.1

Workspace

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

fig.2

A) Document Toolbar: Area that allows you to work in design or code view and allows you to check the recent changes to your page.

B) Document Window: The main work area for the design view.

C) Panel Groups: A group of retractable panels to help preform common task.

  • Insert Panel: Used to insert buttons and object into your webpage.
  • Files Panel: Shows that exact location for the files of your website.

D) Property Inspector: An area that allows you to change the format of a cell, text, and link.

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 3)

fig 3


  • 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.



Insert Panel

The insert panel is located on the right side of the screen, you may need double click to expand it. (Common, Layout, Forms, Data, Spry, Text, and Favorites)

Cs6dreamweaver 2.png

fig 4
  • Common: Lets you insert most commonly used objects. (fig 4)
    • 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.
    • Horizontal Rule: Creates a horizontal rule.
    • 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 5
  • Layout: Lets you insert tables, div tags, frames, and spry widgets. (fig 5)
    • 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.
    • Insert Fluid Grid Layout Div Tag
    • 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.


fig 6
  • Forms: Lets you create forms and insert form elements. (fig 6)
    • 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.
    • Checkbox Group: Adds a group of checkboxes
    • 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.
    • Spry Validation Password:Creates a box to input a password securely.
    • Spry Validation Confirm: Creates a box to confirm a password input
    • Spry Validation Radio Group: Creates several checkbox buttons


fig 7
  • Data: Lets you insert spry data objects, records sets, regions, and update forms. (fig 7)
    • Import Tabular Data: You can import data from other databases, Word, or Excel.
    • Spry 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 8
  • Spry: Lets you create a variety of spry widgets. (fig 8)
    • Spry 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 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.
    • Spry Validation Password:Creates a box to input a password securely.
    • Spry Validation Confirm: Creates a box to confirm a password input
    • Spry Validation Radio Group: Creates several checkbox buttons
    • 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.
    • Spry Tooltip
fig 9
  • jQuery Mobile: Lets you create a variety of jQuery Mobile widgets. (fig 9)
    • Page
    • List View
    • Layout Grid
    • Collapsible Block
    • Text Input
    • Password Input
    • Text Area
    • Select Menu
    • Checkbox
    • Radio Button
    • Button'
    • 'Slider
    • Flip Toggle Switch






fig 10
  • InContext Editing Lets you create a variety of jQuery Mobile widgets. (fig 10)
    • Create Editable Region
    • Create Repeating Region




















fig 11
  • Text: Lets you inset and format text. (fig 11)
    • 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.
    • Unordered List: Place the type into a unorder list format.
    • Ordered 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 12
  • Favorites: An area to drag commonly used task. (fig 12)





















Files Panel

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

fig 13

CSS Styles Panel

The CSS Styles panel allows you to see what styles are applied to certain parts of the webpage. This can be very useful for trying to quickly change something minor, or even to add another style to something. It is just a fast way to view these things without having to scour the code to find it yourself.

fig 14

Document Toolbar

fig 15
  • A. Code: A view mode that can change the layout of the website by imputing in code (fig. 16).
fig 16
  • B. Split: Shows both Code and Design view modes (figs. 18-19). (You can change the way it is divided by using View>Split Vertically seen in fig. 17)
fig 17
fig 18
fig 19
  • C. Design: A view mode that can change the layout of the website by changing visual designs (fig. 20).
fig 20
  • D. Live: View mode that shows what the website will look like when it is live.
  • E. Multiscreen Preview: Shows the site on a mobile device, tablet, and on a desktop computer (fig. 21).
fig 21
  • F. Preview/Debug in Browser: Show the recent changes to the layout of the website or page.
  • G. File Management: Helps to manage file and pages.
  • H. W3C Validation: Sends the document to be validated by W3C Standards.
  • I. Check Browser Compatibility: Checks accessibility and browser compatibility.
  • J. Refresh Design View (F5): Refreshes the view if you are in Design view mode.
  • K. Title: Type into the text box to title a specific page.



Document window

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 22)

fig 22

Property Inspector

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

fig 23
  • 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]]






Basics

Creating a Site

The first thing to do, before anything else, is making sure you have a local directory for your site files to go on your computer. This will make everything in one place and easy to find. You can do this easily by clicking Site> New Site (fig. 24).

fig.24

A new window will appear and ask for you to name your site, and choose a local site folder. (fig. 25)

fig. 25

If you do not already have a folder created, do so, and use that for this site. There are quite a few other options in this window, but for now we will only focus on the name and file folder. When you are ready, hit save.

At the bottom right of your workspace, under files, you will see your site folder; right now there should be nothing inside since we have not made the document yet (fig. 26).

fig. 26

Now, after doing that, you need to go to File>New Document or Command+N and choose how you would like to start your website. At first glance, the new document window seems daunting, but it isn't as complicated as it may look (fig. 27).

fig. 27

The first column on the left are the main options (fig. 28).

fig. 28
  • Blank Page is exactly what it sounds like. Whatever options you choose from there will leave the page virtually blank.
  • Blank Template allows you to begin building a template for a site that you can use.
  • Fluid Grid Layout is a way of designing sites based on a fluid grid that can adapt for the device that is looking at it.
  • Page from Template allows you to make a webpage from a template that you may have already created.
  • Page from Sample has many options allowing the user to create a page based on simple css stylesheets that have already been created. Most of them are just color schemes that have already been laid out. Not really recommended.
  • Lastly, there is Other, which allows you to make pages for other coding languages like Actionscript, C#, and Java.

In this case, we will be sticking with Blank Page. Next is the Page Type, which simply states the kind of page we will be making. We will be selecting an HTML page (fig. 29).

fig. 29

Next is the Layout of the page (fig. 30).

fig. 30

There are a lot of options here, but luckily Dreamweaver shows the preview of most of these options when you click on them. If you know what you want your site to look like at the beginning here, choosing one of the layouts would be a good way to make your job a little easier later on. But if you do not, choosing no layout would be the best way to go.

Lastly, there is the final column, with the Preview, DocType, and Layout CSS (fig. 31).

fig. 31

As of now, using XHTML 1.0 Transitional for the DocType is a standard, and a good way to go. HTML5 seems to be where things are headed, but XHTML is still widely used. The Layout CSS option is asking whether you would like to have the code that makes the columns added to the head of the html page, or if you would like to create a new css page for that, or add it to one that is already existing. If you do not have a CSS page already, choosing to Create New File would be the best choice here and save you some time later on. If you do end up choosing this option, it will ask you what you want to Save the Style Sheet File As. Name the file whatever you would like, and save it in the site folder you created earlier.

Your new document should show up looking something like this (fig. 32).

fig. 32

From there, you can begin adding content to your site!

  • Note: There will still be nothing in your site folder if you do not choose to Create a New CSS sheet. The HTML file will not be there until you save it for the first time.

Adding Content

  • Adding a Table into a Page: (fig 33)
fig 33
  • 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 34)
fig 34
  • On the bottom, you can add caption, alginment, or a summary. Click OK. (fig 35)
fig 35


  • 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 36)or click on the Insert Toolbar under the Common Category the image button.

fig 36
  • A box will open asking for the image file. (fig 37)
fig 37
  • 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 38)
fig 38


  • 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 39) Click OK.

fig 39

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

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 40) Next to Link, you will notice three way ways to link your web pages.

fig 40
  • 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 Rollover Button

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


Click Insert > Image Objects > Rollover Image (fig 41)

fig 41

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 42)

fig 42
  • 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 43 & 44)

fig 43
fig 44

Previewing Pages

To view a page in a web browser, click File > Preview in Browser > ... (fig 45) or click the globe on the Document Toolbar.

fig 45

A drop-down menu will appear; select a browser. A box will open asking you to save. Click Save. (fig 46)

fig 46

Working with Other Programs

Bridge

Inserting a File

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 47) It will now copy the file and place it in you site folder and at the insertion point.

fig 47

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

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 48)or click on the Insert Toolbar under the Common Category the image button. Find your Photoshop PSD file and click Open.

fig 48

An Image Optimization window will pop up. 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 49)

fig 49

A Save Web Image window pops up next. Check to make sure everything looks fine, and when you are ready, click Save.

fig 50

Lastly, the Image Tag window will pop up. It is recommended you tag your images correctly now so you do not have to do it later.

fig 51

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.

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

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

fig 52
  • Add or Delete Panels: (fig 53)

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.

fig 53
  • Type in Each Panel: (fig 54)

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

fig 54


Inserting in a Menu Bar

Click any where on the page, select Insert > Spry > Spry Menu Bar, (fig 55)

fig 55

Select Horizontal or Vertical, and click OK. (fig 56)

fig 56
  • 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 57)

fig 57
  • 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 58
  • 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

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

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