Week 6 Summary

Dreamweaver

Creating new documents:

1. from the welcome screen simply select ‘create new html document’

2. Files–>right click root directory folder (folder icon)–> ‘new file’ (will automatically make new file based on the type of file you have set as your default in preferences).

3. File–>New: brings up dialog box with lots of options. Through this prompt you can select DocType declarations. Currently XHTML 1.0 Transitional is the most popular Doctype.You can attach pre-made style sheets from this menu as well. Click ‘create’.

You can set/change your new document preferences  by going to Edit–>Preferences–>New Document

Specify if you want your default document to be HTML, XHTML, which version, etc. If your document is set for HTML you can choose whether you want the file extension to be ‘htm’ or ‘html’ (it doesn’t matter, just personal preference).

Ctrl + n is a keyboard shortcut to the ‘create new’ dialog box. This will only work if you check a check box for it in Preferences.

You can manage the images in your site through the assets panel (images are the top icon on the left hand side of the assets panel). You can choose to view your assets panel by clicking at the top of it to choose either a list of all images on the site or a ‘favorites list’ where you can keep only the most important images. Placing an image on the favorites list does not alter it’s appearance in the regular list, it is just making a shortcut for accessing it. You can rename the image in favorites and it will not change the original file, and you can also further organize the favorites list into folders to make viewing and finding more manageable. You can add images to the favorites panel by right clicking on it in the site view and selecting “add to favorites”. You can also add and subtract images to the favorites panel by highlighting and clicking the ribbon icon at the bottom of the panel (it will have a plus or minus next to it for adding or deleting). You can also add images to favorites by right clicking on them in the files menu.

The assets menu makes it easy to place images on your page. There are several ways to do so:

1.Place your cursor where you want the image. Menu–>Insert–>Image. You can select the file you wish to insert from a dialog box.

2. Place your cursor where you wish to add an image on your page. Highlight the image you want in the assets menu. Click the ‘insert’ button at the bottom of the assets menu.

3. Drag and drop an image from the assets panel directly onto your page.

If you select an image in the assets panel and click on the ‘edit’ icon at the bottom of the panel the image will automatically open in whatever editing program you have set as your default for that type of image file extension (ie, you can have it set so all jpegs open in Photoshop, etc). You can also accomplish this by double clicking on the image in the assets panel. You can choose which editors to set for which file extensions by going to  Edit–>Preferences–>File Types/Editors. Click ‘Make primary’ to set an editor as a default. If an editor you wish to use does not automatically show up to choose from, click the plus sign over the Editor Window.  This allows you to browse your hard drive for the program you want. If you wish to edit an image in a different program from what you set as the default, right click on the image name in the assets panel and select ‘edit with’ and then choose the desired editor.

It is a good idea to turn on the setting that will cause Dreamweaver to prompt you to fill in alternative text for your image (Edit–>Preferences–>Accessibility). Having alternative text will make your website more accessible. You can fill in this info at any time through the properties inspector, but it is best to do it immediately upon placing an image so that you do not forget to add it later.

If you want the text on your page to flow around an image you’ve placed, you can accomplish this by changing the class style of the image through the pull-down menu in the properties inspector. Selecting “article-image” will cause the text to flow around it.

Fireworks

View–>Smart Guides–>’Show smart guides’ and ‘snap to smart guides’ = select to turn smart guides on or off.

View–>Tool Tips. If you turn on tool tips it will display the X and Y pixel coordinates when you move an object around.

You cannot delete the web layer from a fireworks document.

In the layers panel you can have sub-layers. You can even have sub-layers within a sublayer.

You can create a master page layer to use throughout the design (sounds to me similar to the feature in InDesign, although the lesson did not go in depth into this feature yet).

Clicking on a layer in the layers panel causes everything in that layer to be selected.

File–>Image Preview (Provides export options that are different from the ones you get from the optimize panel, although many of the options are also the same.)

Compound shape tool: Using the different options for compound shapes allows you to have paths automatically grouped as you use the tools. If you select the punch tool and draw a shape over another shape the top shape is cut out of the bottom shape. However you can still move it around as if it were a separate but grouped shape. This seems to me similar to using the pathfinder tools in Illustrator CS3/4 except you have even more control over editing the end result.

Live filters allow you to place an effect on an object but the effect stays completely editable.

Select a layer and click on the plus sign next to the word ‘filter’ in the properties menu. You can select different filters like drop shadows, glow, blur, color correction, etc. You can turn the effect on and off without deleting it entirely if you change your mind about wanting the effect.

Auto Vector Mask Tool Commands–>Creative–>Mask–>(choose which direction you want the fade to orient to)–>Apply

You can apply styles to text.

A style is a collection of effects that are already grouped together. Using styles saves you time because you only have to apply one selection to your object instead of choosing several different effects.

If an object already has a style applied and you duplicate it, the duplicate will be linked to the styles.

If you edit the style that is applied to a duplicate object, and want to apply the edited version to the original as well,click the ‘redefine style’ icon (small square with a bent arrow next to it). The icon is found beneath the style drop-down in the properties menu, second icon from the left.

Styles usually work better with vector images than bitmap.

To apply a clipping mask: select–>Restore Bitmap selection–>ok

Once the object you wish to mask has been selected click on ‘Add Mask’ icon in the layers panel (looks like a circle inside a square).

Blending Modes are a quick way to make adjustments to things like a photo being overexposed, etc.

Make a duplicate of your image and make adjustments to the top layer. In the layers panel the drop-down at the top is default set to ‘normal’ you can change the blending mode by choosing different options like ‘darken’ or ‘multiply’. If a blending mode gives too strong of an effect you can decrease the opacity to make the contrast more subtle. The blending mode can also be adjusted from the properties panel. Blending modes do not work with symbols.

More on Kuler:  If you create a color theme on the Kuler site you can save it as an Adobe Swatch Exchange File (ASE).  Click the second icon which looks like a page with a bent corner and an arrow pointing down next to it. To load in Adobe, click the options tab in the upper right corner of the swatch menu. select ‘replace swatches.’

If you use Kuler directly in Fireworks through an extension, right click on a color theme in the menu and select ‘add to swatches.’

To save click the options drop-down in the swatch panel and select ‘save swatches.’ Choose the ASE extension.

Advertisements
This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s