web foundations monday, november 18, 2013 lecture 30: dreamweaver: getting started, interface, tag...

Web FoundationsMONDAY, NOVEMBER 18, 2013

LECTURE 30 : DREAMWEAVER: GETTING STARTED, INTERFACE, TAG SELECTORS, LOCAL SITE, REMOTE SITE, SYNCHRONIZATION

Recommended Tool: Komodo Edit

Recommended Tool (Free!)

ActiveState's Komodo Edit

Komodo Edit is a free lean editor with a sleek interface. You'll enjoy excellent coding in many web languages, including HTML, CSS, JavaScript, Python, PHP, Ruby, and Perl.

It features:

• Auto-Complete and Call Tips• Syntax Highlighting and Checking• Variable Highlighting• Soft Characters and Matching Braces• Split View Editing

http://www.activestate.com/komodo-edit

• Interface Customization• Extensions and Add-Ons• 3rd Party Library Support• Column and Block Editing• Snippets and Macros

Dreamweaver: Getting Started

Dreamweaver Start Screen

Templates create a page that can be used as a template for similar pages throughout your site, and allows only selected sections of that page to be editable.

In order to use a template, you first have to create a project site, then call your template file from there when creating new pages from the template.

For this walkthrough, we're going to select Blank Page > HTML > <none> and DocType HTML 5, then Create

Design View

Code View

Split View

Live View

Dreamweaver: Interface

Dreamweaver: Workspaces

Dreamweaver: Custom Workspace

You can get rid of Panels that you might use infrequently by closing them, either by right-clicking on the panel name and selecting close, or by dragging it out in your workspace and closing it by selecting the close 'x' in the upper right-hand corner

Since you can get rid of Panels that you might use infrequently by closing them, you can also get them back when needed by selecting them from the menu bar under the Window menu element

After you're done customizing your workspace, you can save it by selecting the Workspace drop-down (in my case 'Designer') and selecting New Workspace, then giving it a name (in my case, 'Craig 1')

After saving, my custom workspace becomes an option from the dropdown Workspace menu. I can still select other workspaces when needed, but my custom workspace can be selected again when I want to return to it.

Dreamweaver: Tag Selector

http://faculty.cascadia.edu/cduckett/foundations/test/tag_selector_demo.html

Dreamweaver: Defining a Local Site

Give your site a name, then point to the local folder where the site is being housed, then Save.

Once the local site is populated into Dreamweaver, the files in that site can now be viewed and accessed through the Files panel.

Dreamweaver: Getting Organized with the Files Panel

The Files panel will display the name of your site folder and also show you that you are working on the local site ("local view"). What ever changes you make in the Files panel are done in your local folder, and vice versa. For instance, if you delete a file from the Files panel, it is deleted from your folder. On the flip side of this, if you had a new file to your site folder, then it will show up in the Files panel. The Files panel is simply a mirror of your local site folder.

By right-clicking on the green site folder in the Files panel, you can create new files, new folders, etc.

You can also drag and drop the files in the Files panel inside the File panel, or you can do that locally within the local site file itself.

Dreamweaver: Setting the Remote Site Info

Dreamweaver: Uploading to the Remote Site

http://faculty.cascadia.edu/cduckett/foundations/demosite/

Dreamweaver: Synchronizing Local & Remote Sites

The Synchronize button will allow you to compare your local files with your remote files.

To synchronize, click the Synchronize button, then select the type of schronization you'd like, either synchronizing only a selected file (or files) or the entire site.

You can also select you you want the synchronization to go, from local to remote, or from remote to local, or a combination of both making sure both sites have all the newest files.

You can preview you synchronization to determine whether you even need to do it. If all the files on your local and remote sites compare to be the same, then you will be given a no synchronization is necessary popup.

If your synchronization preview does the comparison and finds a file (or files) not on one of the sites, it will queue that files for you and then you can transfer it as pertinent.

Synchronization comes in real handy if you've made a lot of changes in several files and/or in multiple directories, and you might otherwise forgot a file or two that needs to be uploaded. Synchronization will find all the changed files for you, allowing you to upload them all with one click of the button

Tomorrow: The Modify Menu, and the Properties Panel