Aligning Text
1. Click inside the paragraph you want to align.
2. Go to the top, choose Text, then Align, and then either left, center, right or justify.
3. Another way to do that is to go to Properties, at the bottom of your screen and choose either left, center, right or justify.
Indenting Text
1. You can indent by going up to Insert,
2. Then choose HTML,
3. Then choose the Special Characters submenu and click on non-breaking space.
Using the Start Page; Using the New Dialog Box
1. The start page is the starting point for both creating and modifying pages and sites. If you close all your open dreamweaver windows, the start page reappears.
2. Choose File, then New,
3. The New Document Dialog box appears
4. Set to General Tab
5. Click to choose one of the items in the category column
6. The second column changes to show available items for that category
7. Click the item you want in the second column
8. Click create
Dreamweaver creates the new document and displays it in a new window
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
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
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
This link goes over the Status Bar, Property Inspector, Panels, and setting up your workspace.
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:
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.
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.
Working With Selections (Chapter 8, through page 133)
Selecting causes only the area selected to be editable. A selection contains pixels from whichever layer is currently active (selected). Selections have a moving dotted line around them – “marching ants”.
To create a freeform selection
· Click a layer
· Choose the Lasso tool. You may enter a Feather value at this time, in the Lasso options bar.
· Drag around an area of the layer. When you release the mouse, the selection will “close” automatically. TIP: close your selections yourself, so that you have control over the shape of the selection.
· You can create a straight line with the Lasso by pressing and holding Option, and clicking to create a corner where the straight line will start. Drag and then release the Option key to resume drawing “freehand”.
To create a selection with the Polygon tool
· Click a layer; Choose the Polygon lasso tool
· Click, move your mouse, then click again. This creates straight lines.
· Double click to close the selection automatically. You can also end where you begin, when you see the small circle appear (like using the Pen tool to close a shape).
· Add the Option key-and drag to create curves
The Magic Wand
· When you click with this tool on a image, a selection is created that includes adjacent pixels of a shade, color or transparency level similar to the one you clicked on.
· If you are selecting too few, or too many pixels, then try changing the Tolerance number in Magic Wand options (top). A larger number results in more pixels and a smaller number results in fewer.
· Click a layer; Choose the Magic Wand tool
· In the Options bar that appears, check Anti Alias. This will pick up semi-transparent pixels along the edge of an image (making the selection softer looking).
· Check Contiguous to select pixels near the original click
· Check Sample all Layers if you want to pick up a color that was created due to multiple, overlapping layers. Or, uncheck it to select pixels in the current layer only.
Magnetic Lasso
· Selects irregular shapes, but only use this when you are wishing to select an edge of an image that has high contrast in terms of color or value
· Play with the settings in the tool options to modify things such as Feathering and Edge Contrast – which will help you be more successful in selecting edges with this tool.
Moving a Selection
· With the selection tool still active, you can move your mouse inside the selection are and move it to another area in your document.
· With the Move tool, moving a selection will cut it. You will see the underlying image exposed afterward.
Adding to a Selection
Often using a tool makes for an imperfect selection. Don’t start over! Use the Options for each of the selection tools to add or subtract small areas of current selections.
· To add to a selection: Select the selection tool, and either add the Shift key as you use it, OR click on the Add icon in the Options that appear for the tool.
· To subtract from a selection, add the Option key while the tool is selected OR click on the Subtract icon in the Options that appear for the tool.
The Select Menu
· Memorize the keyboard shortcut for Deselect (command D) and Select all (command A). These are used often.
· Similar – choosing this after making a selection causes the select to grow to pick up pixels of a similar color
· Grow also picks up additional pixels
· Modify…Expand, Contract, Soften are all ways to modify your current selections.
· Feather: You can feather a selection AFTER making the selection here.
Powered by WordPress
