introduction to dreamweaver 8. what we already know… design basics contrast repetition ...

INTRODUCTION TO DREAMWEAVER 8

What we already know…

Design basics Contrast Repetition Alignment Repetition

HTML

What we already know…

Basic web pages Banners Links Images

Web site organization Root folders

Knowing all of these elements will serve you well as we move to creating websites with

Dreamweaver

Dreamweaver Does It For You

Dreamweaver Does It For You Dreamweaver allows you to focus on

designing, rather than coding As you design your page, Dreamweaver

writes the code for you

However…

Basic knowledge of HTML & XHTML code is very valuable

It is often the best way to make quick fixes to your Dreamweaver project

If you want to pursue a career in web design, it is critical that you know the basics of code as a foundation to your skill set.

Naming Conventions

Naming conventions When working with HTML, did you notice

this? About%20my%20birthday%20.html

Why? A lot of web browsers fill in spaces in file

names with %20 SO…

Naming Conventions

Don’t use spaces in filenames Either make everything all one word

aboutmybirthday.html

OR Use underscores

about_my_birthday.html

Naming Conventions

Don’t use spaces in filenames Make your filenames as short as possible Avoid using capital letters in your file

names Avoid special characters (other than

underscores and hyphens) Dots (.) are reserved for use for the file

extension name (.html) Slashes (/ or \) are used to denote a file’s

location in a directory or folder

index.html

The main page of your site should always be titled index.html

It designates that page as the default “go to” page of the site

AKA the Home page or front page

Okay, let’s open Dreamweaver Designer vs. Coder

Select Designer

Start screen

Insert Bar

• Provides quick access to common tasks (hyperlinks, graphics, etc)

• Can also be accessed from the file bar

Insert Bar

• Inserts a link

Insert Bar

• Inserts a table• You will be asked how many columns and

rows you want to have in your table

Insert Bar

• Inserts an image• Make sure you have the image stored in

your root folder

Properties Inspector

Probably the most important panel to have open when working with your sites

Its elements change depending on what you have selected on your web page

This example shows text formatting

Properties Inspector

Unlike the insert bar, where you can also access many of the functions under the “insert” menu, you can only access the properties inspector functions on the properties inspector bar.

So, make sure you keep it open while you work on your project.

Document Toolbar

Document Toolbar

Allows you to look at HTML Code, design or a split of the two

I recommend you use “split” view so you can see the HTML code “write itself” and gain a better understanding of how the code works and looks on a page

Document Toolbar

Where you will enter the title of the page This title is what would be visible if

someone bookmarked your page, so use a good, descriptive title for each page in your site

Document Toolbar

Preview in browser Allows you to see what your page looks

like in your browser

Document Window

Displays the filename of the page you are working on (ex: index.html)

The asterisk (*) indicates that changes have been made to the page that have not been saved

SAVE YOUR WORK OFTEN!

Panel and Panel Groups

Panel and Panel Groups

All tabs in Dreamweaver are called “panels”

Each panel serves a specific purpose

To stay organized, the panels are put into panel groups (CSS, Application, etc)

Some panels you’ll use a lot (Files, Tag Inspector) and others you won’t use at all

Root Folders

Proper organization of your files is CRITICAL to building websites

All of your site elements must be stored in a ROOT FOLDER

Why?

Each site you work on must have its own root folder

Defining Your Site

Defining your site will not only properly start your site in Dreamweaver, but it will also create your root folder for that site

Defining Your Site

Let’s define a site Select “Dreamweaver Site” under

“Create New” Delete the temporary name “unnamed

site 1” and enter a new name for your site (“First Dreamweaver Site”)

Leave the URL field blank Make sure “No, I do not want to use a

server technology” is selected and click next

Defining Your Site

Make sure “Edit local copies on my machine then upload to server when ready”

Click the folder icon to the right of “where on your computer do you want to store your files?”

Create a new folder in your folder on the server

Click “next”

Defining Your Site

Select “None” in the “How do you connect to your remote server.” menu

Click “next” When you see a summary of your

settings, click “Done”

Your root folder is defined and should be visible in the “Files” panel

Now that you’ve defined a site…

Create a basic 3-page site using Dreamweaver

Re-create your “About my birthday” site in Dreamweaver Index About my birthday People who share my birthday

Must include a navigation bar (with working links) and images