2222 Visual Thinking for Design
Fundamentals of Dreamweaver CS3
Part 1: Working in Photoshop?
Understanding Slices
-Divides your image into multiple areas (.gif, .png, .jpg)
-Slicing is good when your page may optimize best in different file formats (illustrations and
jpgs)
-Slice each button as a separate link.
-What slices look like?
Creating User Slices Use Tea_01.psd
1. Make sure snap to on> view snap to>all
2. Slice tool on tool bar
3. Slice Javaco Logo> Magenta lines represent smart guides to help line up
4. Slice just drew has blue number>represents user slice
5. Grey numbers represent auto slices (photoshop makes those automatically for you)
6. Need auto slice because every pixel needs to be represented..will be reassembled into
an html. File.
7. You can adjust the borders of a user slice, but not the auto slice>unless you promote
it to a user slice
8. Go back to tool bar>select SLICE SELECT TOOL
9. Select auto slice 4 > options bar>click promote tool
10. Control click in #03>Divide slice (can save time)>2 slices horizontally>2 slices
vertically. Can change them back to one by control clicking> Combine slices into one
large user slice
11. Control Click>Can also delete slice
Layer
1.
2.
3.
4.
5.
6.
Based Slices Use Tea_02.psd
Layers Panel>click carrot our stores folder
Advantage is that slice will move with the layer>this is not true with user slices
Would have to redo user slices if we needed to move
With cup layer selected>Edit>free transform to make cup image smaller
Click check bar in right hand side in options bar> Undo Change
Now put a drop shadow on cup by double clicking on layer name>notice layer slice
changes with effects as well
7. Can create more than one layer slice at a time.
8. Layers Panel>hold down shift and select to 3 layers>
9. Layer>New Layer Bases Slices
10. Disadvantage>may not have a file prepared like this (may be a flat image)
11. Cannot adjust the borders
12. The less amount of slices the better
13. Can turn layer based slices into User Based Slices
14. Slice Select Tool>Options Bar>PROMOTE
15. Adjust Slices to edge
Adding Slices Options Use Same Document
1. Slice Select Tool> Select Logo 02> Options Bar>Select folder next to the Hide Auto
Slices button
2. Give a short and meaningful name. Helps us notify when we are working in
Dreamweaver. No spaces>uppercase>unusual chacters
3. Names are important when you are working in Dreamweaver
Optimizing and Saving Slices Use Tea_03.psd
1. Goal Optimize each slice
2. Select Slice Select Tool
3. Select 05>image of cup>change to a jpeg>get file size down>medium>preset to 50
1
4. Go to Map>gif because image is flat art > 128 colors>check transparency>matte
white>selective
5. Logo>Gif>Selctive>32 Colors
6. Shift click on all 4 button slices>Gif>increase number of colors to 16
7. Always check file size
8. Select “Easy to Find Hard to Forget”>Gif>Colors
9. Auto Slices are all linked together and will be optimized together
10. Click Save button>Select desktop>create new folder>name T
11. Formats>HTML and Images
12. All Slices
13. Photoshop has generated html file, images folder
Part 2: Dreamweaver
Why use Dreamweaver?
-Makes it easy to design and update webpages without having to know too much code.
-If you are serious about designing webpages…the more code you know the better.
Setting up Your Site
* The most common approach to creating a website with Dreamweaver is to create and edit
pages on your local drive, and then upload copies of those pages to a remote web server for
viewing on the web.
1.
2.
3.
4.
set up project files
Define a local folder
Local Folder-the folder that is usually located somewhere on your hard drive.
Remote Folder-The folder that is published to your web server. (we discuss this
towards the end of packet)
Web hosting service
http://www.dreamhost.com/ ($7.95/month)
http://www.uplinkearth.com/ ($4.95/month)
http://b2evolution.net/web-hosting/top-quality-best-webhosting.php
//best web hosting w/prices listed
Domain names
http://www.godaddy.com
http://register.com
http://www.networksolutions.com/whois/index.jsp (tells you who owns domain)
How to choose a good domain name
http://www.thesitewizard.com/archive/domainname.shtml
CSS (cascading style sheets)
http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html
http://www.adobe.com/designcenter/video_workshop/?id=vid0155
Dreamweaver Resources
http://www.trainingtools.com/online/dreamweaver3/index.htm
http://www.bu.edu/webcentral/learning/dreamweaver1/index.html
http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
(* FILES USED FOR THIS TUTORIAL)
___________________________________________________________________________
2
Site Definition Advanced Settings (for setting up a local folder for website files)
1. Select the images folder with the browse button for the Default images text
box>click OK
2. The file list in the Files panel acts as a file manager, allowing you to copy, paste,
delete, move, and open files just as you would on a desktop. Whenever you import
something into dreamweaver MAKE SURE THAT YOUR FILES PANEL IS AFFECTED.
3. Later, if you want to publish your pages and make them publicly available, you'll need
to define a remote folder—a place on a remote computer, running a web server that
will hold published copies of your local files. (once again we discuss this at end of
packet)
Part 2: Getting familiar with Dreamweaver Interface
Naming Conventions
1. No spaces in file names
a. Use underscore_
2. Shorten file names
3. Avoid using capital letters(Have to remember how you capitalized when typing in URL)
4. Avoid using characters
5. Only use letters and numbers
6. .html and .htm (both are acceptable)
7. index = default go to page in a website=homepage
8. File>new>save as> index.html
9. Give page a title name (this is what the browser will read)
Dreamweaver interface
1. workspace>default layout (window>default)
2. Windows layout is fairly different (Window>designer)
3. Mac version has free floating panel groups
Panels
o Window> Window menu for any panel you need to access
o Window>layout>default or save current

Insert Bar
Window>insert bar
Panel you will keep open all the time>this is a shortcut to many options accessed
through the menu bar
Eventually you can modify the Favorites


Properies Inspector
Best Friend | Keep it open all the time
Window>properties





Document Toolbar
Main Window | Where you create your web pages
Code – displays all code that is written for page
Split – you can see both
Design- what you see is what you get | select this option if not a coder
Window>code inspector (So you don’t have to share window with code)





Page Title – appears at the top of the window (when someone booksmark)
File management – when you upload and download
Preview – launches site in appropriate browser
Refresh-will refresh
Update options – changes depending on code/design


3



Visual Aids – Borders on your page
Validate Mark up button- settings (code)
Check Page- to do an on the spot check comparing browsers





Document Window
Top of page | Asterik- changes have been made and it hasn’t been saved
Bottom of page | tag selector area
Arrow | lets you select items on page
Hand tool & Magnifying tool (great for viewing tiny table cells)
Pop up menu - preset options for window perspective





Panel Groups
Window>default
Panels on the right (panel groups to keep organized)
Panel menu-in top right hand corner (more options)
Floating Panel > gripper space at top of panel
Saving Workspace Panel


1.
2.
3.
4.
Default Browser
Dreamweaver Preferences > Preview in Browser
Primary and Secondary>short cuts
type text
Option f12
Save file
Page should appear
4
Part 3:Creating Web Page Layout
-CSS (cascading style sheets) have become the standard for page layouts on the web
-CSS layouts can be very difficult to learn as a beginner
-Tables are the foundation for page layout
-Begin to learn page layout by using tables>and then quickly advance to CSS
Image Maps or Hot Spots
-Map area on bottom left of property inspector
-Go ahead and use one of the tools to draw around what ever you want to act as a button
-Give your image an alt name for visually impaired
-Go ahead and preview in browser and notice when cursor changes
-When done working with polygon map tool, must click on arrow to deselect shape or
dreamweaver will assume you are still working with shape
Tid-Bits of Knowledge
-Understanding Path Structure
-index.html is always home page
-Linking with Point to File
-you can always right click on folder or file to get more options
Coming Up
-Rollover
-Image Gallery
-Meta Tags
-Flash Video and Buttons
-Uploading Content to the Web
Tables
*In a table the rows and cells effectively act as container boxes for the content you add later.
Working with Photoshop
1. Must set up preferences in Dreamweaver
2. File tyes>editors
3. Select Photoshop
4. .png, .gif, .jpg = make primary button
5. select image within dreamweaver>go to properties panel next to edit you will see
photoshop icon
6. opens up photoshop>save image>and it will update in dreamweaver automatically
7. You can now copy and paste directly into dreamweaver from photoshop and firworks
Dreamweavers Built In Editing Tools
1. Properties Panel>Edit Tool>Next to Photoshop
2. Optimize,Sharpen, Brighten, cropping, etc..
3. Click ok and opens appropriate panel.
Insert a Flash File (slideshow)
*insert a slideshow
1. Select once inside the second row of the first table
2. Property Inspetor>Center form the Horz pop-up menu>Middle from the Vert pop up
3. Insert>Media>Flash
5. Properties Inspector>Play
6. Save Page
Insert a Flash Video File
1. Insert>Media>Flash Video
2. Select Progressive Download Video from the Video type pop-up menu
5
3. Progressive Download allows the video file to start playing before the download is
complete.
4. URL text box>select browse to navigate to video (café_townsend_home.flv)
5. Select Halo Skin 2 fro mthe Skin pop up menu
6. Properties Inspector>Width 180
7. Properties Inspector>Height 135
8. This specifies the height and width of .flv file
Add a Rollover Effect

To add a rollover effect>add a new rule that contains the :hover pseudo-class

Hover is defined by when a user holds the mouse over an element
1.
2.
3.
4.
5.
6.
7.
Open>.css file
Select the entire .navigation rule
Copy text (apple + C)
At end of rule> press return to create more space
Edit>paste the copied text
Add the :hover pseudo class to the pasted .navigation selector
In the new .navigation:hover rule>replace the current background color (#993300)
with #D03D03
8. Save>Preview index.html in browser
9. Should see mouse over taking hold of document
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
Center Content of Page
1. index.html>select the <body> tag in the tag selector located at the bottom of
window
2. Clicking this tag selects everything between the open and close <body> tags in the
window
3. Check out Code view to see
4. Property Inspector>Select Align Center button
5. Dreamweaver inserts CSS <div> tags that center the body content of the page.
6. Save the page
Part 6: Publishing Your Page
(1)A remote site is usually a place on a remote computer, running a web server that holds
copies of your local files. Users access the remote site running on the web server when they
view your pages in a browser
(2) After you create a website, the next step is to publish it by uploading the files to a remote
folder.
(3) You need to have your local site defined. (which we did in Part 1)
6
(4) This should be viewable in your files panel. You can expand your files panel by clicking the
icon on the upper righthandside of your panel.
1.
2.
3.
4.
5.
6.
7.
8.
9.
Site>Manage sites
Select Folder name site
Edit>Advanced
Select FTP (will use this almost always)
Select test
Click OK
Select Files Panel (make sure it is expanded)
Make sure serever is connected. Icon with power cords facing eachother
Select the up arrow (this puts files into remote server)>this may take some time
In Preparing to Publish to the World Wide Web
1. Site>reports>entire local site
2. HTML REPORTS “missing alt text” & “untitled documents” > RUN
3. Report Window will now pop up
4. Double click error message and it will bring you to the page to correct
5. Site>Check Links Sitewide | will tell you where you have broken links (looks
outside of file)
7