1. Cheat Sheet CSCI 100 JW Ryder
Dreamweaver CSS 2018
Cheat Sheet
CSCI 100
JW Ryder

2. Start Dreamweaver Web Design and Multimedia folder on Desktop
Adobe Creative Cloud folder
Adobe Dreamweaver CC 2018
Screen will appear. Click “No, I’m new”
Choose Standard Workspace
Choose color theme or use default
Start by watching the tutorial
You can X out of tutorial at any time

3. Set Up Right hand pane – Make Files – This PC showing
Double click on OneDrive folder
You may want to make a special folder for this assignment
This is where you MUST store all your files!

4. Your First HTML File
From menu choose File -> New. New Document Window appears.
In Title box type index. Make sure Document Type is HTML
In window for Dreamweaver Site, X out of it
The top pane is where you type. Bottom pane is generated HTML
On Menu bar click View -> View Mode -> Design
You will now see a single pane
On Menu bar click Window -> Properties
The properties window will appear. You can move it to a place on the screen that is comfortable for you

5. Name the File File -> Save As Click Save
Make sure you save it on your OneDrive folder. Name it index.html
Click Save
Notice now the tab says Index.html

6. Place a Title on the Browser Tab
Properties Window -> Page Properties -> Title/Encoding
Type the title in the Title box

7. Background Color, Text Color
Properties Window -> Page Properties
Click on Appearance (HTML)
Background and Text -> choose colors -> press enter
Click Apply then OK

8. H1 to H6 Headings, Center Text, Change Color
Select text -> Properties Window -> Format Heading X
Center text – Select text
CSS -> centering on top right
Change Text Color
Select text
CSS -> color box lower right -> press enter

9. Create a Hyperlink Write the text
Select part you want to have user click on
Properties Window -> HTML -> Link
Type in the web address (URL)

10. Bulleted List – Bold – Italic - Underline
Properties Window – bulleted list icon
Properties Window – B or I for bold and italic
Underline
Select text
Menu bar -> Edit ->Text -> Underline

11. Change Text Size
Select text
Properties Window – Size (Under Font)

12. Tables Menu bar -> Insert -> Table The table window pops up
Fill in values, click OK
Align a Table – centering it
Click Split (it is on the top center of the pane)
You will see code in the bottom pane
In the HTML find the table tag
Add align=“center” keyword parameter to table tag
Click Design (it is on the top center of the pane)

13. Insert Image
Place cursor at the point where you want the image to be placed
Menu Bar -> Insert -> Image
Find your image -> OK
Note: All your images MUST be in the same folder as index.html

14. Center Image Leave a blank line before image Center that line with
Properties Window -> Center
Put cursor in front of image -> press Backspace once
Alternative: Go to code and put a <center> </center> tag around the image tag

15. Modify Table Properties
Click on table border
Properties window will appear
Change properties in Properties Window

16. Insert Rollovers Menu Bar -> Insert -> HTML -> Rollover Image
This opens “Insert Rollover Image” window
Fill in name of original image and rollover image
Type in URL to go to when clicked
Click OK
To test, you must test from your web site. It will not work from DW design