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

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

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!

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

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

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

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

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

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)

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

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

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)

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

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

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

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