Setting up the Site
Text and Page Properties
Links, Editing HTML, and Images

TEXT AND PAGE PROPERTIES

 

Dreamweaver allows you to set all of the standard HTML text properties. You can control the size, color, position, and font family of text. You can even choose to use a non-standard type set, with a standard font family as back-up if the user doesnt have the non-standard font. How cool.

You can also set all of the standard page properties like: Background color, text color, link color, and the title of the web page.

 

Text Formatting

Entering and formatting text in Dreamweaver is easy.

1.      Make sure that you are looking at "index.htm"
If youre not, make sure that youre in First Site. (Hit F8 and choose "First Site" form the pull down menu in the upper right hand corner of the Site Files window. Then double click "index.htm")
If you need to, create a new site called "First Site" and make a blank index page.

  1. Type "I love Dreamweaver"
    Notice that you can type in Dreamweaver just like in any word processor. You can edit, delete, highlight, and move text with cut and paste.
  2. Click after "I love" and hit ENTER.
  3. Click after "I" and hit SHIFT+ENTER.

Notice that ENTER skips a line, while SHIFT+ENTER doesnt. Remember that Dreamweaver is translating your key commands into HTML. When you hit ENTER, Dreamweaver enters in a <P> tag. SHIFT+ENTER enters in a break tag.

The Properties Palette

Sadly, HTML always uses the Times New Roman font at size "3" unless you specially tell it not to. Because Dreamweaver is an HTML generator, it always follows HTML rules. Youll need to change your font formatting every time you dont want to use Times New Roman at font size "3", (which in my opinion should be every time). To edit text (and do most things in Dreamweaver), youll need the help of a floating box called a Palette. A Palette is just a box with buttons on it.

Every Palette is kept in the "Window" Pull down Menu.

 

  1. Click the WINDOW pull down menu and then click PROPERTIES. The "Properties" palette should open:

Youll use the Properties palette to change your text formatting.

 

NOTE: If your Properties palette is smaller than the one above, click the arrow in the lower right hand corner to expand the palette:

 

  1. Highlight the word "Dreamweaver". If your text is not highlighted, you wont be able to change it.
  2. On the Properties Palette click the "Format" Pull down menu. You can set heading sizes here. Experiment with them, and then return the setting to "none".

 

  1. Click the Default Font pull down and change the font face:

 

  1. Change the size:

 

  1. Change the font color:

Notice that there are a limited number of colors. These are the web safe colors that will display uniformly cross-platform browsers.

***A Note about color matching in Dreamweaver

Colors in the same row have the same color value, or brightness. They usually work well with each other.

 

  1. Feel free to play with Bold, Italic, and the three justifications (left, center, right)

 

Using Non-Standard Fonts

When building a web page you can use whatever fonts you feel like. The problem is that your user might not have those fonts in his Font Folder, and youll end up with an ugly site. Wouldnt it be nice if you could pick whatever font you wanted to use, but then stipulate a standard font as back-up if the user didnt have your chosen font? Well, guess what? You can do it, allthough our web design course recommends against it unless you do a lot of testing to make sure it looks okay on the screen.

  1. Highlight a word.
  2. On the properties palette click the Font pull down and choose "Edit Font List"

  1. Youll see the edit font list. Youre going to make a list of fonts, in order of preference that the users computer should try. If the user doesnt have the font map for the first, itll look for the second in the list. Choose fonts by clicking a font in "Available Fonts" and clicking the double arrow next to the "Available Fonts". You can add as many fonts to your as you want, but usually you wouldnt need more than your desired font and a couple of back ups. When youre done, hit OK

 

  1. Apply your new font to a word.

 

Bet youre feeling pretty cool now, huh?

 

Page Properties

You can change all kinds of page-wide attributes in the "Page Properties" dialogue box. The hardest thing about the Page Properties Window is remembering where it is. The Page Properties Window is kept in:

Modify -> Page Properties

 

When the Page Properties window opens, it should look like:

The following items are of interest to us right now:

�.       Title: this is where the <title> tag gets filled in. Remember how important the title tag is for search engines.

�.       Color for Background, Text, Links, Visited Links, Active Links.
You can choose a color by clicking the square next to each choice, or you can enter in a Hexadecimal Value.

 

We will use the other options in the Page Properties Window. Were just saving them for later.

 

Viewing Your Website in a Browser

You should periodically check your work in a browser. Youll be able to see what your pages will look like on the web, and youll be able to test items that dont function in the Dreamweaver window like JavaScripts and Links. To Preview in your browser, simply:

Hit F12 on your keyboard (Ctrl + F12 for secondary browser)

Or

Click FILE-> PREVIEW IN BROWSER, and choose your browser.

 

To Set Your Default Browsers

Dreamweaver may not instantly recognize your browsers, or it might use Netscape when you want to use Internet Explorer. You can manually set your default browsers.

  1. Click EDIT-> PREFERENCES



  1. On the left side, choose Preview in Browser
  2. Click the to add another browser



Youll have to tell Dreamweaver where the browser is in your computer

  1. Name your new browser and click the big Browse
  2. Navigate to the location of your desired browser, or its shortcut

Continue to HTML and Images |