Building a Website: Images

1. Building a Website:Images Fall 2013

2. Create a Complete Page LayoutSeven Box Layout width: 150px height: 50px top: 5 left: 10 upperLeft upperRight1 upperRight2 width: 50px height: 50px top: 5 left: 700 width: 50px height: 50px top: 5 left: 760 main width: 800px height: 600px top: 65 left: 10 width: 150px height: 100px top: 675 left: 660 width: 450px height: 100px top: 675 left: 185 width: 150px height: 100px top: 675 left: 10 lowerRight lowerMiddle lowerLeft

3. Add Image • Create and save the image • I like to use a subdirectory called images • Must be in one of three formats: • GIF (Graphics Interchange Format) • JPEG (Joint Photographic Experts Group) • PNG (Portable Network Graphics) • Click in upperLeft <div> • Insert  Image • Locate folder with images • Click on desired image • Click OK • Type Picture 1 in Alternate text: • Click OK

4. Image Placeholder • Can have an image placeholder • Us FPO (For Placement Only) if you don’t have the actual graphic but want to do the page layout. • Insert  Image Object  Image Placeholder (or select Image Placeholder icon from the image menu) • Give it a name and enter the width and height • Once have the image • Double click the placeholder • The Select Image Source window appears • Find and add the image

5. Modifying an Image • Attach a link to the image • Click on image • In Properties at bottom of screen • To right of Link box click on the folder icon • Click the file to link • Click OK

6. Modifying an Image • Use Property Inspector to set the image properties • Click on image • Crop • Resize: click on image and use handles • Sharpen • Adjust contract and brightness

7. Image Properties • Should name the image • Should add text description • Should add alt description, used by people who cannot see the image

8. Changing Image Size • Dreamweaver calculates size when image is first loaded • Can use resize handles to change size • Small black squares on right edge, bottom edge, and lower-right corner • Making smaller works pretty well • Making larger usually results in distortion of picture • Also need to keep aspect ratio correct (height to width ration)

9. Aligning Images • Picture can appear in paragraph by itself or within a sentence or paragraph with text. • Use Align menu: right-click on image and choose Align  one of following • Default: same as selecting Bottom • Middle: text aligned with middle of image • Top: align image with top of the line of text • Left: places image to the left of any text which wraps down the right side of image • Right: moves the image to the right and wraps text to left edge • Baseline, TextTop, Absolute Middle, and Absolute Bottom: Not supported by all browsers

10. Properties to Avoid • These are no longer supported and are being phased out • V Space • H Space • Border • Cascading Style Sheets (CSS) offers alternatives

11. Add Links • Click in lowerLeft <div> • Type Link to Page 2 • Enter Shift-Enter keys together • Type Link to Page 3 • Enter Shift-Enter keys together • Type Link to Page 4 • Create a new page by select File  New or clicking on New Page icon in upper right New Page

12. Add Links • In new page type: This is Page 2 Make this Heading 1 Link back to Page 1 Link to Page 3 Link to Page 4 • Highlight Link back to Page 1 in Page 2 by clicking and dragging across the words • In Property pane click <>HTML on left of pane • Click folder icon to right of Link box • Click on index.html file • Click OK • Create pages 3 and 4 and do the same thing.

14. Overall Structure:Content Page CSC 2020 Microcomputer Programming MeetingTime Meeting Days Location Textbook: Office: Telephone: Email: Office Hours: Description Syllabus Assignment Homework Slides Handouts Semester Home Courses Previous