Getting Started with Dreamweaver for the First Time

What is Dreamweaver – semi WYSIWYG HTML editor.

Key thing to note: there are 3 elements which make up a webpage.

1. Structure,
2. Presentation, and
3. Behavior (Interaction)

HTML vs. XHTML vs. HTML5

You may have heard about different types of HTML standards.

HTML has been around the longest, and was up to version 4.x.

XHTML has removed some deprecated tags, become standardized (closing tags required, all lower case tags & attributes).

HTML5, is the latest version, which many browsers are moving toward. It incorporated rich media, location services, and storage – for example – which are all helpful to today’s dynamic websites. To do this, they’ve added several tags, as well as some other organizational types of tags. For most of what we do, it will be the same regardless of what HTML type you will use.

HTML defines the structure of the web page

Do you need to know (X)HTML(5) to use Dreamweaver?

Well the answer is both Yes and No.

Yes because there are some tags & attributes that Dreamweaver doesn’t allow easy access to. If you are going to move into programming on the web, it will be more beneficial to know HTML, if you are strictly a designer, it is not as necessary.

No because you will rarely need them.

Sort Of if you are going to be a standards compliant CSS designer, web optimizer, or work with SEO then knowing the tags will simplify your life!

File Naming

Here are some best practices when it comes to using file names on the web.

• NO SPACES (not a rule per say – other than mine but it makes it easier to work with files, and reduces errors) use an underscore (_ ) or the dash (-) instead! Preferably, use the dash.
• avoid reserved characters like /,\,:
• HTML should usually have a .htm or .html extension (unless using a server side language – but we won’t in this class). Other common extensions are .gif, .jpg, .swf, .mov, .mp3m and .mp4 – for media files.
• try to use all lower case – just for constancy, to reduce errors

File/Directory Structure

You will find it easier, if you have a structure to your website. This will allow pages to naturally link to one another, and keep order out of many files. Here is a common structure which you might want to adapt on your local computer

• my documents
  • websites
    • site 1 (the site name)
      • images
        • sources (places for your Photoshop files if any)
      • assets (flash, css, JavaScript, etc)
        • sources (place for your flash .fla files, if any)
      • logical group of pages
    • site 2
      • images (notice how we don’t include folders we don’t need)
    • site 3
      • images
      • assets

What is CSS

• Cascading Style Sheet
• Defines the presentation of the web page
• allows you to redefine how a page looks based upon the rules that you write
• Dreamweaver allow you to “write” CSS with a built in tool

What is JavaScript

• Started by Netscape
• NO relation to Java (other than a similar name)
• defines the interaction (behaviors) of the web page

What is a Web Application

A web application generally is made up of many pages, that uses server driven behaviors. It may perform e-commerce, inventory, customer support, searching, etc.

Think of what a computer desktop application can do, but on the web! Odds, are, there is a web application that is already made to do that task from a web browser. This includes editing web pages – so yes, a web page can create another web page.

Dreamweaver Interface

 

Click on the image for a larger version.

Insert Bar

• Multiple sections (Common, Forms, Layout, etc.)
• Allows you to “Insert” common web elements into the active page

Document Tool Bar

• Allows you to access the different open documents (uses tabs at top of bar)
• FTP management
• Previewing
• How you want to view your page (Code, Split, Design)

Document Window

• Work area for existing document.
• Includes sub-tools like the tag selector , hand, and more.
• Can be viewed in three ways (Code, Split, Design)

Preferences

You can edit your preferences on how you want to Dreamweaver to be laid out – however, this is set by computer, not by user.

Short Cut Keys – While this would be helpful to know as it allows you work faster, you will not be tested on Dreamweaver specific short-cut keys unless specified.

Watch Video on YouTube

 

Getting Started with Dreamweaver for the First Time was originally found on Access 2 Learn