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