Shortcuts to most recently used files
Generally what we use to start a new webpag e
Videos explaining new features of dreamweaver
e
e
e
New icon for New Site Use ADVANCED
Notes:
Click on Define Site (or new
site)
When naming files or folders-
no spaces or special characters
(images, flash..etc.)
Click on HTML – to start a blank page
…or to get more options…
File >New …More options are available
(including a blankpage-HTML)….or…….
Page from Template –if you create new
templates you’ll be able to access them from
here
Page from Sample-Sample layouts and
sample CSS style sheets
Different looking screens-Use Designer Layout
If you switch to classic view you can go back to
the way It looked in CS3
Live View- preview interactive
features-rollovers, flash etc. You
can edit in Live View mode
Save FIRST blank sheet as
index.html ALWAYS (because the
browser will look for the file index
so the browser can find the first
page)
Title- when a person bookmarks Insert panel is not on
View grids and rulers, with ruler you can pull
your page that is the title that will down guides -(NEW) the top it is on the right -(NEW)
show on their bookmarks…also some browsers will search for that title.
Note- Grade 12- If there are changes from CS2 and MX-I will type-(NEW)
There is a history panel under windows like Photoshop
Code view- you can see the HTML code you type by using split view -(NEW)in CS4You can change it the
code to a vertical orientation, >view>split vertical
Inserting Images-Insert>Image…or from the Insert Panel on the right
1. Find your images in your file (does not have to be in root folder)
Grade 11 – insert your Photoshop button image and 2 film button images that were made ready
in Photoshop
2. Inserting images -alternate text screen appears (NEW)- type in a brief description- screen
readers will read your image for blind users, or will appear as text when a viewer has turned off
the images for a quicker download. Also search engines will look for relative images using the
text)
3. Hit the refresh button on your file panel- the images have been stored in your image folder
(NEW) Dreamweaver will do it automatically as long as you named an image folder.
4. Smart Objects (NEW)- you can bring in a large Photoshop .pdf file and a smart object screen will
come on to help you convert it for the web. It will stay linked to your original image. Now all you
have to do is hit the edit icon in the properties bar. Photoshop will open, you can fix the image
and it will resave in the optimized web image. Go back to dreamweaver- there is an icom on the
corner that shows a red arrow- right click and go to Update from Original.
5. You can also edit jpeg images in dreamweaver- crop, brightness and the optimize commands
(on Property Bar when you click on the image)
6. For all image to be edited by Photoshop= go to Edit>preferences>File Types/Editors….in the
Extension box= click on .jpeg…..select Photoshop and click on Make Primary….if Photoshop is
not on the list…go to the + button and find it in your files (I’m not sure that will work with the
network,
Inserting text
1. Click on picture (hint use arrow keys to get to right or left of pictures). TYPE
Note: Return - next line plus a blank one…Shift Return- new line but no extra space
2. Use Format to make headings…you can also use Class to add CSS styles as well as ID (Later)
3. Fonts are no longer in the
Properties Inspector (NEW)
they are in the CSS Panel. Most web standards are
now using CSS and adobe is insisting that we use CSS
for formatting.
4. Highlight your text and go to chose the font, this box
will appear
Keep it as a class- chose a name for your text style
(again no spaces or symbols in the name except
dashes and underscores)
- Use the groupings Dreamweaver gives you… or you
can create your own but make sure you add common
alternative.
-You can have this only affect only this document or does create an external style sheet (more
about that latter).
-Click OK---now there is a new targeted rule with your labeled text (note all class styles will begin
with a dot).
Aligning Images-Click on image
Size of image- Where image is located Alternate text
1. this property bar appears
To add space around an image- type in number of
pixels to the horizontal or vertical space, if on one
side we will use CSS syle sheets
Link- to a different page or website, Align image- text will wrap around pic if aligned (and image
2. Grade 11 -add 5 px. of space
click folder to find page you want to is moved over text)
between your image and your text link to.
Links
Grade 12- the links work the same as the old dreamweaver versions
Grade 11- Create 2 more pages call one photoshop and one Video, they must be saved first before
adding images (or dreamweaver will remind you).
On the photoshop page- insert the original photoshop projects (before you changed them) Save.
Go back to the index page.
Click on your Photoshop image. On the property bar- click on the file beside the links address field. Find
your newly created Photoshop.html file and click on it, the pages is now linked. Do the same with the
video image and the video page.
Both grades: There will be a blue line around the image- if you do not want this set the border at 0.
When linking to another website- use the hyperlink logo on the Insert panel- you must use the whole
address including the http://
Organizing your files
They can be moved around but only in the site panel- not in your files- This is so the relative links will
still work.
To create a subfolder- Right click on the main folder and add a new folder (no spaces or special
characters). Dreamweaver will ask if you want to update your links- click update.
Page Properties
Click on Page Properties in the Properties Bar. This screen will
appear. Use the CSS option.
It controls everything on that apge- if you want the same font
etc. Background colour you can click and chose or type in the
hexadecimal colour or click on an existing webpage and pull
any colour from it.
Background image- look for it in file- it will repeat- you can direct how it repeats
Margins: set at 0.
Links- change how you want links to appear.
At this time I would like you to take a look at the CSS styles we have created in the side panel.