Dreamweaver Cheat Sheet CSCI 100 JW Ryder Initial

Dreamweaver Cheat Sheet CSCI 100 – JW Ryder

Initial Site Set Up • Goto W: drive – This is your web root directory • Create a folder called images in W: folder – W: images CSCI 100 JW Ryder - Dreamweaver Notes 2

Start Dreamweaver • Start -> Adobe Design and Web Premium CS 6 ->Adobe Dreamweaver CS 6 CSCI 100 JW Ryder - Dreamweaver Notes 3

First Page Set Up • Create New - HTML • Click on menu item ‘Site’ -> ‘New Site …’ – You see the ‘Site Definition Window’ • Click the ‘Advanced’ tab -> Local Info – Site Name: Type in your name – Local Root Folder: W: – Default Images Folder: W: images – Click OK button CSCI 100 JW Ryder - Dreamweaver Notes 4

First Page Set Up Continued • Right-Click on your Site name in the ‘Local Files’ window • Click ‘New File’ and save it as index. html • Double-click in the index. html file in you ‘local Files’ list – It will appear on your screen CSCI 100 JW Ryder - Dreamweaver Notes 5

QR Scan Code Images • http: //www. barcode-generator. org • Choose QR code on top left • Enter your web page address. It will be • http: //students. oneonta. edu/your_user_id • Choose size • Click on “Create Barcode” • At top-left of screen, right click on new barcode • Save image in your W: images folder • You can change the file name but do not change the file extension. Use the ‘png’ default value. CSCI 100 JW Ryder - Dreamweaver Notes 6

Creating your Page Content • Properties window - On bottom of screen • Font, Font Size, Text Color – Click the CSS button if you do not see a size or color • Unordered, Ordered Lists, Out-dent, Indent, bold, center, etc. all on properties CSCI 100 JW Ryder - Dreamweaver Notes 7

Headings 1 through 6 • Type your heading • Select the words • Click on ‘Properties’ --> ‘Format’ – Choose the heading level CSCI 100 JW Ryder - Dreamweaver Notes 8

Title Bar Title – Page Background • In Design View, next to the ‘Title: ’ label, type in your title • Page background – Properties --> Page Properties button • Choose background color, text color, etc. CSCI 100 JW Ryder - Dreamweaver Notes 9

Hyperlinks • Type in your words, select word(s) to be clicked on • Properties --> Link – Type the whole web address (http: // too!!) – Mail links use ‘mailto: ryderj@oneonta. edu’ • You can preview in either browser or click on the globe in design area • Can also be done from the Common category in the Insert panel CSCI 100 JW Ryder - Dreamweaver Notes 10

Lists • Unordered – Properties --> Click Bullet list button – When no more bullets desired, click bullet list button again • Ordered – Same as above but use ordered button CSCI 100 JW Ryder - Dreamweaver Notes 11

Images • Place cursor where you would like the image to be located • Place all images in your images folder!!!!! • Click the insert image menu button in the Common category of the Insert panel and select the Image Button CSCI 100 JW Ryder - Dreamweaver Notes 12

Tables • Same as Images but choose table button CSCI 100 JW Ryder - Dreamweaver Notes 13