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 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

 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

 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