1 / 11

Lab Four: Agenda

Lab Four: Agenda Basic Web publishing concepts Directory structure Gathering images Scanning a picture using Photoshop Altering images with Photoshop Terminology Client: your computer or program that requests programs or Web pages

MikeCarlo
Télécharger la présentation

Lab Four: Agenda

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. Lab Four: Agenda • Basic Web publishing concepts • Directory structure • Gathering images • Scanning a picture using Photoshop • Altering images with Photoshop

  2. Terminology • Client: your computer or program that requests programs or Web pages • Server: a computer that stores and "delivers" programs and Web pages (isis is a server) • Host: a computer that allows you to log in and use resources • Download: taking a file from the server • Upload: putting a file onto the server • Bandwidth: capacity

  3. Directory Structure: THE most important topic • The most important thing about creating a good Web page isn’t graphics or design, it’s organization. Know exactly how your files, your Web page, and Web site are organized. • To make a Web page work correctly, the graphics, typography, text, and images must link together perfectly. To make links work perfectly, you have to know WHY, HOW, and WHERE the links are connected.

  4. Directory Structure (Cont’d.) • Directories are folders. Sub-directories are folders inside folders. Individual files are stored inside folders. • The rule of directory organization: KISS -- Keep It Simple. Give files names that make sense so you know what they are before you open them. Try to limit the number of directories.

  5. Organize Your Web Site • Find and click on the plus sign on the H:/ drive • The H:/ drive is a UNC drive that accessible only to computers on campus • Go to folder “public_html.” • Click on File >> New Folder >> “Images.” Graphics -- jpegs and gifs -- can go into this folder. • Later you will add four HTML files (web pages created using Dreamweaver) to the public_html folder:(index.html, resume.html, portfolio.html, research.html)

  6. Graphics/Images • Two common types: • GIFs (Graphic Interchange Format) • JPGs (Joint Photographic-experts Group) • Use JPGs (.jpg files) when graphic elements are less sharply distinguished -- e.g., for photos • Use GIFs (.gif files) for everything else (logos, icons, animated figures) • PNG (Portable Network Graphics) Not used very often, large format • Do NOT use TIFs • FAQs and information about pictures and scanning are on DTE pp. 211-243

  7. Gathering Images for the Page • Want a picture of a cow? Find it and save it to your disk. (Search for images. When you find one you like, right click, “save image as,” select your images folder, name it “cow.jpg” or “cow.gif”) • When you save things for the Web, make sure all the file names are lowercase with no spaces. In other words: a photo of Mia Hamm could become “mia_hamm.jpg.” NOT “Mia Hamm.jpg” and NOT “Picture of Mia.jpg.” Caps are hard to type and the Web doesn’t recognize spaces.

  8. Sources for images & features • Google Search engine http://images.google.com/ • Stock pictures (for sale) http://www.corbis.com/ • Images of UNC http://images.unc.edu/ • Visual Search Engine http://www.ditto.com/ • JAVA Scripts and DHTML http://www.dynamicdrive.com/

  9. Scanning and Using Photoshop • Scanning Instructions DTE p. 218-222 • To crop images, left-click and hold to the top square of the toolbar. Select last item on right (the cropping tool). Crop picture. Go to Image menu and select crop. • To change image size: Go to Image menu and select image size. Enlarging images tends to distort them. Make your image as small as you would like it to appear on your Web page. It saves space and time. • Read the Health Sciences Library guide to Photoshop: • http://www.hsl.unc.edu/lm/psmodulenew/index.htm • Read DTE – Photoshop 6.0 Introduction (pp. 223-233, Photoshop 5.0 Web Graphics (234-243)

  10. Altering Images w/ Photoshop • Optimizing images (file size, image size, color, image type, transparency, etc.) • Adding text to an image • Using Photoshop layers • Saving in Photoshop format (.psd) AND a suitable format for the Web (.gif or .jpg)

  11. Next Time • Turn to DTE 269-70 and create your own Web account • Read DTE 160-189 (Web authoring, HTML, Advanced HTML) • Bring DTE.

More Related