Project1



ProjectDreamweaver:in class quiz+tutorial

jjhiggins. TW8:30-12:30

webspace

in class project : quiz grade 30 points

reference: [you should all be registered by now for tutorials. course requirement in lieu of the textbook. Program references, homework + quizzes will be based on these tutorials]

programs used: Dreamweaver MX + Photoshop CS2

____ Make a folder on the desktop to contain your image files.

Photoshop

____ First open the postcard files from the project. Reduce the resolution to 72dpi and the image height/width ratio to 4 inches x 6 inches [proportionate to horizontal and vertical formats]

____ Save each as a .jpg under a new file name, and place in your desktop image folder.

____ Merge visible images or flatten images to reduce layers [if you have not done this yet]

____ thumbnail size each of the files by reducing the size to 1x1.5 inches and save as thumb1.jpg, thumb2.jpg, etc.

____ Make a new file with the following proportions: H 7.5 inches, W 10.14 inches, 72dpi.

____ Background color: R 180, G179, B 179 and H 0, S 0, B 70

____ Save file as .jpg ‘background_file’

____ Using the rule lines, set a space 1 inch from the top of the file and 6 inches from the left of the file. At the intersection should be the end of the word POSTCARD, which should be in 24 point White type. The text should be readable, although it will become part of this background. Merge the layers and resave the file.

Prepare nameplate for rollover image: You will need 2 image files, same measurements

____ Make each a New File w/ Image size: Height 1 inch Width 3.5 inches resolution 72DPI

____ Content: select separate background colors for each plate, your first and last name in readable/legible [both in size and for screen space] text and color on one or both.

____ On one file include text ‘digital montage’ in Helvetica Regular, 24 point type .

____ On the second file, include text ‘University of Florida’ in 36 point type, Times Regular.

____ Save files as .jpg, File names: rollover 1 and rollover 2

Dreamweaver

[Macromedia Dreamweaver, check in Macromedia file in Applications folder]

____ on the desktop, make a new folder for your site. name the folder [your name]_site

____ Open program. Go to preferences, check and make sure Preview in Browser is set to Safari as primary browser

____ make a new HTML document

____ go to the Site menu [top of page] and Manage Sites. Select New Site, [Basic] and name it

[no server technologies, edit local copies the upload, remain on local/network for now and save your site to the folder you designated for it on the desktop] We can change assignments and load the site from the Manage Sites menu at a later time.

____ on the HTML page, be sure the menu is in Layout.

____ Go to Modify [top menu] and select Page Properties. Appearance.

Page font. Select from list. 14 point size.

Text color. Select the overall color from the palette for the text on this page.

Background color. Select a color from the palette for the background for this page.

____ Links [still on Page Properties]. Assign link color, visited link color, underline style.

____ name the page digital index, save the page as digital_index, this is your index page

____ Return to the page. Select the Draw Layer icon [third from left, top of page], and draw a rectangle proportionate to the nameplate images you constructed in photoshop on this page. Go to the Insert menu, and find Image Objects, choosing Rollover images.

Under Image 1, Browse file, locate your image file on the desktop and select the first image. [This will be the visible image, the second becoming visible when the mouse crosses the position on the page.] Browse file, locate the folder again for the rollover image. The files will be placed in your web folder.

____ Preview the rollover image in the Browser, selecting the globe icon at the top of the constructed page. Save the file before testing the browser.

____ Return to the page and reposition the image as you wish, for appearance. Choose the layer drawing tool again, and create a layer in which you may place text. Select the box so that the cursor is activated and add some lines of text. The boxes can be reformatted and the text altered, including changing size and color per letter or word.

____ select one word or section of text. Copy this website: [edit, copy]

and paste into the page properties menu link space at the bottom right of the page you are making. This is how you would make a link to an outside page, a source external to your source.

____ Draw Layer, thumbnail size. Insert image, place thumbnail size images on page and arrange

save and check the appearance in the browser occasionally, changing what you need to change as you go. Save changes as you make them.

____ Add a new page. HTML. Name this page stamps. Go to Page Properties, and this time instead of background color, insert image in background. Choose your background image from the source file you made, background.jpg Change other properties as you need to.

____ Draw Layer menu, format for the 4x6 card size. Insert image, or insert Image Objects/Rollover, your choice. You can place all images on the page, it will continue into eternity or so it appears. Below each image create small layer boxes and include text with your name/ the title of the piece/ date of completion. . .

____ In addition, include a link that returns the viewer to Home. Link the page to the first page through the folder, or through copying and pasting the link source from the safari preview menu [which would be changed when loading the site to an active space, such as your plaza account site]. On the index page there should be a link, either an object link or a text link or a hotspot link to the next page, accessing the postcards and additional pages you create.

____ Make sure the images work [rollovers and layers and inserted images] and that the links work within their own space [when you launch your site, you will have to retest or reconnect them], and that you can change the type and alter it as you need to.

____

manage sites and editing the site menu allows you to load the site to FTP on your plaza site. be sure you check passive server if you choose to do this, and reload all the images to the remote server. The tutorials will be helpful, as are the dreamweaver help menus. This will be a part of our course, uploading your files as a presentation space as well as in the development of color and color spaces, and accessing additional forms of media. We will look at that on Wednesday, unless we are ready for this sooner.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download