Upload
charleen-fleming
View
230
Download
0
Embed Size (px)
Citation preview
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