CSS / Dreamweaver instructions, Spring 2021

Open Dreamweaver.

Create new HTML (to start new file, either choose New HTML at startup, or File>New>HTML).

Establish Root Directory on PC (aka “defining your site” ); make it somewhere within your ENG 354 folder. You can do this by going to Site menu, choose New, then establish location.

Use index.html ONLY for your homepage (forthcoming, Assignment 5); ENG 354 Coursework index should be ENG_354-assignments.html (or ENG_354-coursework.html, or another logical filename)

Be sure either “Split” &/or “Design” tab is selected at the top of the software interface.

BEFORE PROCEEDING, THINK ABOUT WHAT YOU WANT YOUR PAGE TO LOOK LIKE: (a): colors for text, links, followed links, background; (b) text size (s); (c) typeface. See link below for using Google Fonts, if you want to try that (OPTIONAL).

If your page has images, make a plan (conceptual sketch or wireframing) for where they go (i.e., layout). If more than one, and they need to be aligned with each other you may need to use a Table (Insert>Table)

To make what is essentially the CSS for the page, go to File menu, choose Page Properties.

1. Fill out “Appearance (CSS)” information: this essentially becomes your CSS; press Apply
2. Fill out “Links (CSS)” info
3. If you think you are going to have several different sizes of text, fill out “Headings (CSS)”

KEEP TRACK OF THIS INFORMATION

1. Add title in Page Properties Title/Encoding Box (e.g. “Your Name ENG 354 Coursework Spring 2021”)

When you finish, click OK.

With HTML button selected in properties at the bottom, add text; to use your default style of text (#1 Above), be sure Format (next to html button) is selected as “Paragraph”; you can use bold or italics to change those aspects of text (also indentation, bullet points); “Target” box allows you to open links in another browser/tab.

You will use CSS button if you need to change font color or text size on-the-fly. Select the text you want to change, then select <new inline style> from the “Targeted Rule” menu to make changes. This will preserve your original CSS yet allow you to make changes to your design.  

INSERTING IMAGES:
Use .jpg

Place cursor where you want the image to go. Go to Insert menu and select image. Remember: your images need to be in the same folder as your .html file (or in an “images” folder if you have one inside public_html and your harddrive, to which you will point to using link icon)

MAKING LINKS:

With the HTML button selected in the Properties box (at bottom), select the text (or image) you want linked, then type/paste the link URL or filename into the “Link” box. If you want the link to open in a different tab, type “other” into the “Target” box.

OTHER NOTES:

ALL files must go inside the public_html directory, or inside a subdirectory you have created within it.

NEVER include spaces in your filenames; use dashes if necessary (e.g., “my-file.html” not “my file.html).

Use a logical filename and path; remember to mirror what is on your PC drive.

SAVE FREQUENTLY AND ALWAYS BACK UP YOUR WORK!

Embedding google font information (not required, save for later reference)

http://www.google.com/fonts/

Tutorial (may or not be helpful): http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php / I recommend setting up your CSS information (in DW) with a placeholder font & then pasting in the font family info from Google fonts