WOW Blog- Kentucky Wesleyan College

November 19, 2009

Changing Font Color, Adding Line Breaks

Filed under: Gawne, J, Graphic Design III / IV, VanHaaften, E — Tags: , , — Emilyva @ 5:53 pm

Changing Font Color, Adding Line Breaks

Changing Font Color

Page 97

· Select the text you want to color

· Click the color well in the Property Inspector, the color picker appears

· Click a color with the eyedropper to select it; it can be any color in the color picker or any color visible on your desktop or the page you are editing.

· When you select the color, the color picker closes and the text changes color.

Adding Line Breaks

Page 101

· At the end of the line you want to break, press Shift-Return

· Or, at the end of the line you want to break, in the Text category of the Insert Bar, select Line Break from the Characters pop-up menu. The text then changes

Changing Font Color

Colors

November 18, 2009

Changing Fonts in Dreamweaver…

Filed under: Deeg, C, Gawne, J, Graphic Design III / IV — Tags: , , , — cherishde @ 11:39 am

changing fonts

Graphic Design 3

Lab week 12 #2

Cherish Deeg

Topic: Changing Font

In Dreamweaver you have the ability to set the typeface, or font, for any text on your page. However, because there are not fonts that are universal Dreamwever uses font families. These are combinations of fonts that allow you to provide several options for the browser to choose from when displaying your font. If the browser viewing your work ends up not having one of these choices installed then the browser will open with the default font of that browser. There are six of these combinations or font families. When choosing font size Dreamweaver is reminiscent of a word processor but with the font handling characteristics of HTML or CSS styles. You may apply several font sizes from the pop-up menu in the property inspector or you can change the units of measurement.

To set a font…

1. Select the text you want to modify.

2. Choose a different font combination from the font pop-up menu in the property inspector, or choose Text> Font and then choose the font combination from the sub menu.

-The text changes appearance

Tip…

Most of these font combinations are found on computers sold in both Windows and Macintosh from the past few years. Making these combinations a good choice because they are available on any computer, for the most part.

To set font size…

1. Select the text you want to modify

2. Choose a different size form the Font size pop-up menu in the Property inspector

3. Choose the unit of measurement you want from the units pop-up menu, next to the Font size pop-up menu.

-The text changes appearance.

Tip…

Some of the sizes listed in the Font size pop-up are relative sizes, meaning they set a font size to be larger or smaller relative to the default font size

fonts1a

Setting Page Properties-Appearance

Filed under: Deeg, C, Gawne, J, Graphic Design III / IV — Tags: , , , — cherishde @ 11:33 am

Page Properties-Appearance

Graphic Desgin 3

Lab week 12 #1

Cherish Deeg

Topic: Page Properties- appearance (pages 77-78)

1. Choose Modify>page properties

-A dialog should open

2. Choose Appearance under the Categories

3. Here you can change your font (type, size and color), Background color, repetition and image, and your margins

- If you leave these unchanged Dreamweaver will use the automatic default

yellow-pages

November 16, 2009

Text! Text! Text!

Topics 11/16

Adding Text – the difference between structure and presentation; selecting, cutting, copying and pasting, dragging and dropping

Page 83-87

Structure and Presentation:

Structural elements are things like paragraphs, headings, lists, and the like; presentation is how the text looks, including things like the font, font size, text color, and so on. Structure is about organizing the content on the page, and presentation is concerned with making the content look good.

To insert text:

  • In the design view, click on the page where you want to add text
  • Type the text you want

Selecting text:

Besides selecting text by dragging your mouse over it; here are some shortcuts

· Double-click on a word to select it

· Move your cursor to the left of a line of text until the cursor changes from an I-beam to an arrow pointing at the text. Then click once to highlight a single line; or drag up or down to select multiple lines.

· Triple-click anywhere in a paragraph to select the entire paragraph

· For finer control over selecting individual letters, hold down Shift key and press the left or right arrow keys to extend the selection one letter at a time

· Ctrl-Shift(Cmd-Shift) plus the left or right arrow key extends the selection one word at a time. Ctrl(Cmd) plus the left or right arrow key moves the cursor one word to the left or right.

· Press Cmd A to Select All

Cutting, Copying, and Pasting Text

To cut or copy text:

· Select the text you want to cut or copy

· To cut the text to the Clipboard, choose Edit>Cut, or press Cmd-X on the keyboard or…

· To copy the text to the Clipboard, choose Edit>Copy, or press Cmd-C on the keyboard

To paste plain text:

· Click to place the insertion point on the page where you want the text to appear

· Choose Edit>Paste, or press Cmd-V on the keyboard

Dragging and Dropping Text

To drag and drop text:

· Select the text you want to move

· Move the cursor over the selected text. The cursor will change from an I-beam to an arrow

· Click and hold your mouse button over the selected text, and drag it to its new location, releasing the mouse button when the cursor is where you want the text. The text moves to its new home.

Text

flickr-words

November 12, 2009

Insert Bar

Filed under: Gawne, J, Graphic Design III / IV, VanHaaften, E — Tags: , , — Emilyva @ 9:44 pm

Emily VanHaaften

Week 11 – Lab Topics

The Insert bar, including a brief definition of each of the options in figure 1.12. Also scroll over the items in Common and give us a brief description of each.

Page 8-9

· Directly under the Menu bar is what’s called the Insert Bar.

· There are several different items in this bar which include;

o Hyperlink - icon looks like a chain link

o Email link – icon looks like an envelope

o Named anchor – icon looks like a ship anchor

o Table – icon looks like a window

o Insert Div Tag – icon looks like a piece of paper/chart

o Images – icon has a picture of a tree

o Media – icon has geometric shapes

o Date – icon looks like a calendar

o Server Side Include – icon looks like a piece of paper with number symbol

o Comment – icon looks like a quote bubble

o Templates – icon looks like a piece of paper w/ green boxes

o Tag Chooser – icon looks like a chart with a right and left arrow

· In the Common bar there are 8 different layouts

o Layout – This set includes tables, divs, layers, and frames: all objects that let you describe how you want to lay out your page

o Forms – The forms set includes form elements such as text fields, buttons, and check boxes.

o Text – The text set doesn’t actually contain objects to insert on the page; instead, it let’s you style text that’s already on the page.

o HTML – allows you to insert objects such as tables, frames, and scripts that are better done elsewhere.

o Application – If you’re someday going to work with external date such as databases, that’s when you’ll use the Application set.

o Flash elements – This set only holds one object, the Flash image viewer. If you want to add other Flash elements, go back to the Common set, where they can be found under Media Plugins.

o Favorites – This starts off empty but you can modify it to hold just what you’d like for it to. Choose Favorites then Control click, dialog box appears that allows you to add your most commonly used objects.

Insert Bar

colour-bars-smpte-75-640x480

November 9, 2009

Dreamweaver document views and toolbar…

Document toolbar and views

Graphic Design 3

Lab topics week 11

Cherish Deeg

Topic: Document Toolbar and Document Window views (pg 10-13)

Document Toolbar

-Found underneath the Insert Bar and below any tabs open

-Consists of three parts

1. View mode buttons

-These let you choose between Design, Code, and Split, which are the Document Views available

2. The page title

-Each page needs a title and this is where you will change yours

-See chapter 3 on how page title differs from the name of the page itself (pg 57)

3. Miscellaneous buttons

-These contain everything from a Preview in Browser button, to a button to validate content, to a button to show additional visual aids inside Dreamweaver itself

Document Window views

1. Design

-This view will give you an idea of what your page will look like when viewed in a browser

-Almost everything you want to do in Dreamweaver can be done in this view

-Also called the WYSIWYG (What You See Is What You Get)

2. Code

-Shows exactly the same thing but in code view

-Chapter 15 will cover this view and how to work the ins-and-outs of tags (pg 407)

3. Split

-This view gives you both if that’s how you like to work

-Code view appears on top while Design (WYSIWYG) view is below

documents

Powered by WordPress