![Page 1: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/1.jpg)
INTRODUCTION TO DREAMWEAVER 8
![Page 2: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/2.jpg)
What we already know…
Design basics Contrast Repetition Alignment Repetition
HTML
![Page 3: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/3.jpg)
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
![Page 4: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/4.jpg)
Dreamweaver Does It For You
![Page 5: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/5.jpg)
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
![Page 6: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/6.jpg)
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.
![Page 7: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/7.jpg)
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…
![Page 8: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/8.jpg)
Naming Conventions
Don’t use spaces in filenames Either make everything all one word
aboutmybirthday.html
OR Use underscores
about_my_birthday.html
![Page 9: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/9.jpg)
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
![Page 10: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/10.jpg)
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
![Page 11: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/11.jpg)
Okay, let’s open Dreamweaver Designer vs. Coder
Select Designer
Start screen
![Page 12: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/12.jpg)
![Page 13: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/13.jpg)
Insert Bar
• Provides quick access to common tasks (hyperlinks, graphics, etc)
• Can also be accessed from the file bar
![Page 14: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/14.jpg)
Insert Bar
• Inserts a link
![Page 15: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/15.jpg)
Insert Bar
• Inserts a table• You will be asked how many columns and
rows you want to have in your table
![Page 16: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/16.jpg)
Insert Bar
• Inserts an image• Make sure you have the image stored in
your root folder
![Page 17: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/17.jpg)
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
![Page 18: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/18.jpg)
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.
![Page 19: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/19.jpg)
Document Toolbar
![Page 20: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/20.jpg)
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
![Page 21: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/21.jpg)
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
![Page 22: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/22.jpg)
Document Toolbar
Preview in browser Allows you to see what your page looks
like in your browser
![Page 23: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/23.jpg)
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!
![Page 24: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/24.jpg)
Panel and Panel Groups
![Page 25: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/25.jpg)
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
![Page 26: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/26.jpg)
![Page 27: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/27.jpg)
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
![Page 28: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/28.jpg)
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
![Page 29: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/29.jpg)
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
![Page 30: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/30.jpg)
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”
![Page 31: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/31.jpg)
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
![Page 32: INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML](https://reader035.vdocuments.us/reader035/viewer/2022062217/56649e235503460f94b10802/html5/thumbnails/32.jpg)
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