Week 04

Week 04 – Topics

Final project assignment
FTP (File Transfer Protocol)
Adding links
Adding images
Rollovers
Tables
Quiz 2


ASSIGNMENT  4

Below are your assignments due next week by noon, Friday, November 23.

READ

1. All class notes from Week 4
2. Assigned Reading from Textbook:

  • Chapter 6: Adding Links
  • Chapter 7: Adding Images
DISCUSS
Discussion is due by noon, Monday, November 19. Please post your responses by this date.

Discussion – Assignment 4: Final Project Website

Please post the following information regarding your final project to the Discussion section of the smconline.org website.

  • What is the name of the website you’d like to redesign for your final project
  • Please provide the URL (web address)
  • Why do you want to redesign this website?
  • Who is the target audience?
  • What did you learn from critiquing your group members’ work? And  how was the feedback you received from your peers helpful to you?
WATCH

The total viewing time of the 7 videos below is approximately 60 minutes. So plan your time accordingly.

1. My video on File Transfer Protocol (FTP). You can watch it here: http://www.youtube.com/watch?v=jotXiTmHL1M Or download it. I have created an instructional video for you. You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). You’ll need QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

2. What is Dreamweaver?
3. Defining a New Site
4. Creating New Documents
5. Adding Structure to Text
6. Placing images On The Page
7. Creating Links in Dreamweaver

EXERCISES (3 parts)

Part 1 – Adding links and images to an HTML page
Using the Smithsonian Education one-column web page you built in Week 03, insert 2 images, dummy (fake) text, and 2 links into the page. Below is  what I’d like the web page to look like when you’re finished.  You will upload a final_web folder with the HTML, CSS and images folder. Make sure you follow the correct file organization as discussed in the class notes. Here’s a link to a zip file with the two images you’ll need to complete this exercise.

Link the text to the following websites:
Sphinx: http://en.wikipedia.org/wiki/Sphinx
Papyrus: http://en.wikipedia.org/wiki/Papyrus

 

Part 2 – Exercises from Chapter 6 & 7
Please complete exercise 6-1, 6-2, 6-3, 6-4, 6-5, 6-6, 6-7, 6-8, from Chapter 6 and exercises 7-1, 7-2 from Chapter 7. Upload your files as a zip file to the “Dropbox” on smconline.org site by noon on Friday, November 23.

Part 3 Complete the Final Project site map and home page design comp. Please complete the sitemap and the design comp for the home page of your site. (See full details about the Final Project below, the info is also located on the “Final” page located in the main navigation.) Please post the sitemap as a PDF and your design comp as a Photoshop file to the Dropbox on smconline.org. Please note: be sure to create a Photoshop file that’s 72 dpi and which contains images at this same dpi. If you don’t, the weight of the Photoshop file may get too big and will be difficult to upload to the Dropbox!) Upload your files as a zip file to the “Dropbox” on smconline.org site by noon on Friday, November 23.

When you upload your zip file to the Dropbox, please put all parts of the assignment in one folder and be sure to include your name in your file names. For example: yourlastname_assignment4.zip

Also Please review the FTP page on this website. Be sure you understand how to upload files to the class server.

QUIZ 2

Click here to take Quiz 2
Many of the questions from Quiz 2 are from your assigned online readings from Week 02.
Complete Quiz 2 by noon on Friday, November 23.

 


Final Project – Due Thursday, December 13

Pick an existing website of your choice. The website must be a business or organization, and not a personal site for you or someone you know. Redesign this site for your final project but give it a new name – your final project will be inspired by this site but will not use the name from this site. (We want to avoid copyright issues surrounding the use of someone’s name, logo and content).

Write a couple paragraphs critiquing the effectiveness of the current site. Base your critique on the objectives from “The Basics of Web Design” reading and the critiques you did Week 03.

  1. The Grid
  2. Color Palette
  3. Navigation
  4. Design Principles
  5. Typography

Describe what works and does not work with the design. Who is the target audience? Post this critique to your Tumblr blog.

Redesign 5 pages of the website you’ve selected to redesign. Create a sitemap for your project and save it as a PDF to your “source_files” folder. Create a design comp (for all 5 pages) in Photoshop paying close attention to the layout and the balance and composition of the page. Using image slicing (we will cover this in later in class), create the assets and compress their file sizes effectively. Pay particular attention to the consistency and functionality of the navigation system. Using either a one-column structure or two-column, build the pages in HTML using one external CSS file.

Specifications:

  • Optimize your design for a browser resolution size of 1024 x 768 (remember the dimension of your page should be 990 pixels wide and “the fold” is around 560 pixels. The page should not end at 560 pixels!)
  • Your Photoshop file must be RGB and 72 dpi.
  • Set up your file structure correctly with a “lastname_firstname_final” folder containing 2 separate folders: “final_web” and “source_files.”
  • Complete 5 HTML pages with one external CSS file
  • Must use HTML text for the main content of your site, not images.
  • Please use images you have created, or free or royalty-free images on your site. (See possible sources below).
  • Upload your final project to the class server via FTP.

Possible sources for images:

FTP (file transfer protocol)

Please review the FTP page on this website. Be sure you understand how to upload files to the class server. You’re required to upload your final project website to the class server so please let me know if you have any questions about this!

Dreamweaver: Inserting images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To copy an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

flower
flower.jpg

flower.gif

Image: FreeDigitalPhotos.net

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
  • Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
  • Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in thelower right hand corner of the palette. Experiment with the following:

  • Change the height and width of the image
  • Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
  • Change the alignment so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the VSpace and Hspace to change the margin around an image when text if flowing around it
Insert Rollover

Now we’ll go over how to insert a rollover image into a page. This is important because many times your navigation will be built using rollover images. And finally, I show you a way to insert a “swap inage” into your web page. You may want to design your web site using this behavior. If so, the instructions below will be helpful.

Create a rollover

  • Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
  • Click on the “Insert Rollover Image” icon in the objects palette
  • Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
  • Browse to the “Original Image” file. This is the image that is shown when the cursor is not over the graphic.
  • Browse to the “Rollover Image” file. This is the image that is shown when the cursor is over the graphic.
  • Normally, you check the “Preload Rollover Image” box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
  • Type in the alternate text associated with this graphic
  • Browse or type in the link you want associated with this graphic. If you don’t want to link anywhere, just put a “#” in this space.
Image maps

Image maps are links created inside of images.

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

  1. Click on the image
  2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
  3. Select a shape (rectangle, circle, or polygon) from the lower left
  4. Draw a shape with the drawing tool
  5. Dreamweaver will create a translucent shape for your hotspot
  6. Enter a URL or local web page file name in the Link section
  7. If you want a link to open in a new browser window, set the “Target” selection to “_blank”
  8. Set the “ALT” section to the desired alternate text
  9. Create additional hotspots by repeating steps 3-8
  10. When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.

Helpful video resource: http://www.ehow.com/video_4751886_create-clickable-image-map-dreamweaver.html

Tables
A cell an image with some text in the cell
cell cel

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

  • Number of rows
  • Number of columns
  • Width in Percent or Pixels
  • The width of the border (the beveled edge on the outer part of the table)
  • The cell padding (the text margin, left, right, top, bottom)
  • The cell spacing (the width of the cell walls)

Table properties

Table properties are accessible by selecting the whole table.

Table Cell properties

Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixelsIf the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.

Flowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.
Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.
Border size
The setting of the table border in pixels affects the width of the border around the edge of the table.
Cellspacing size
The setting of the table cellspacing affects the width of the border around each cell
Cellpadding size
The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom
Selecting a table
There are three ways to select the whole table.
  • click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
  • click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
  • click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.
Row and Column Span
Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.
This cell has a rowspan of two. This cell has a column span oftwo.
Changing the style of text in multiple cells
You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a <font> tag around the whole table–this will not change the style of the text inside the table.
Cell alignment — horizontal and vertical
The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.
The contents of a cell affects its size
Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.
Clear row heights or column widths
When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.
Convert table widths to pixels or percent
If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.
Nesting tables
You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.
This table is inside anothertable


Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65