WOW Blog- Kentucky Wesleyan College

November 16, 2009

Setting Page Properties - Links and Headings

Filed under: Graphic Design III / IV, West, T — Tags: , , , — taylorwe @ 12:30 pm

Links and Headings Page Properties

Taylor West

Graphic Design III

Lab Topics Week 12

Fall 2009

Setting Page Properties – Links and Headings (page 79 – 80)

Options for Links

Link Font – Specifies the default font family your Web pages will use to display links. You can set the font to be bold or italic.

Size – Sets the default font size for link text. You can choose an absolute size or a relative size. An absolute size allows you to pick any of the measurement points, such as pixels, points, %, etc.

Link Color – Sets the color to apply to link text.

Visited Links – Sets the color to apply to the links you have already visited.

Rollover Links – Sets the color to apply to link text when you place the mouse cursor over the text.

Active Links – Sets the color to apply to link text when you click the text.

Underline Style – Sets the way links will be underlined. Your choices are Always underline, Never underline, Show underline only on rollover, and Hide underline on rollover.

Options for Headings

Heading Font – Specifies the default font family used for headings. You can set the font to be bold or italic.

Heading 1 through Heading 6 – Allows you to set size and color options for each heading size. The size pop-up menus allow you to set absolute sizes or relative sizes, and you can choose from any available measurement units.

links

Paste Special and Headings

Filed under: Gawne, J, Graphic Design III / IV, Nitch, B, Uncategorized — Tags: , , — benni @ 11:54 am

spaste

Paste is Special

Goes over using Paste Special and applying Headings.

Status Bar, Property Inspector, Panels, and Setting Up Your Workspace

inspector_gadget

What is this stuff?

This link goes over the Status Bar, Property Inspector, Panels, and setting up your workspace.

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 13, 2009

Flipping and Rotating an Image.

Filed under: Graphic Design I, Hays, M — Tags: , , , — malloryha @ 8:31 am

Mallory Hays November 13, 2009

Flipping and Rotating an Image (p. 104).

· To rotate an image by a preset amount, choose IMAGE, ROTATE CANVAS, and then choose either 180, 90CW(clockwise), or 90CCW(counter-clockwise).

· To rotate an image by specifying a number, choose IMAGE, ROTATE CANVAS, and then choose Arbitrary.

· Once you click Arbitrary, a dialog box will pop up and you can then enter an Angle between -359.99 and 359.99 degrees.

· Then make sure you click to specify if its CW or CCW. Click ok.

Flipping and Rotating Image Handout

rotate1

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 11, 2009

Changing the canvas; cropping an image using the crop tool

Filed under: Graphic Design I, Simpson, C — chazsi @ 7:26 pm

changing-the-canvas-cropping-an-image-using-the-crop-tool

Chaz Simpson

Graphic Design

11/13/09

Changing the canvas; cropping an image using the crop tool

To resize the canvas

· Choose Image>Canvas size or press Command>Option>C for the keyboard shortcut

· Choose your desired width and height and your desired form of measurement

· To position the image in a new spot on the canvas, click on the desired grey arrow you would like underneath the text options

· Click OK to finish

To crop an image with the crop tool

· Click the “Crop Tool”, which is the third box down in the left column of the toolbox area

· Click and drag the marquee over the desired image you want

· After you have chosen the box, you may reposition the pointer inside the box to create an axis. You may then rotate your image on this axis.

· You may also change the width and height of the image as well

· You may change the options palette for the crop tool at the top of the screen to your liking

· You can change the shield color by clicking and picking a color, you may also change the opacity to our liking

· Press the return key when done, and your new image will be displayed

If at all during the cropping process you feel to do so because you don’t like the idea to crop, press the escape key

crop

Working With Selections

Filed under: Gawne, J, Graphic Design I, Uncategorized — Tags: , — warriorwoman @ 8:49 am

uncle_sam

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.

November 9, 2009

The Document Menu

Filed under: Graphic Design III / IV, West, T — taylorwe @ 1:23 pm

The Document Window

Taylor West

Graphic Design III

Lab Topic Week 11

Fall 2009

The Document Window

Menu Bar

Just like any other menu bar in the other programs we’ve used with drop-down menus for “File”, “Edit”, “Insert”, etc.

Insert Bar

Located directly below the menu bar. Used to insert content and objects into the website page. The insert bar also contains eight different layouts:

Common: Most commonly used objects such as links and images.

Layout: Includes tables, divs, layers, and frames.

Forms: Includes text fields, buttons, and check boxes.

Text: Lets you style text you have already inserted on the page.

HTML: Allows you to insert tables, frames, and scripts.

Application: Used with external data such as databases.

Flash Elements: Includes the Flash image viewer.

Favorites: Starts off empty, but you can add whatever you’d like in it from the other layouts.

Document Toolbar

Located under the insert bar. Consists of three parts:

View Mode Buttons: Let you choose between Design, Code, and Split views of your page.

Page Title: Simply changes the title of your page.

Miscellaneous Buttons: Contains numerous other buttons.

Status Bar

Located at the very bottom of the document window and is also referred to as the tag selector. Allows you to select everything in your tag and includes the Select, Hand, and Zoom tools.

Property Inspector

Located at the bottom of your screen. Can be used to both view ad modify the displayed options.

Panels

Panel Grip: Use to move each panel

Panel Group Bar: Bar across of an undocked panel

Panel Tab: Contains “Attributes” and “Behaviors”

Category View: Shows the attributes by categories

List View: The list view of the Attributes tab in the tag panel is selected, so they are listed in alphabetical order

Panel Options Button

Contains options such as group or close layers and rename, maximize, or close panel groups.

dreamweaver_logo1

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

« Newer PostsOlder Posts »

Powered by WordPress