1 / 14

Building a Website: Images

Building a Website: Images. Fall 2013. Create a Complete Page Layout Seven 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

Download Presentation

Building a Website: Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

  13. 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

More Related