1 / 14

J-50 lab 4

J-50 lab 4. Our agenda: Basic Web publishing concepts Directory structure Gathering images Scanning a picture using Photoshop Altering images with Photoshop Create your own weblog. Terminology. Client: your computer or program that requests programs or Web pages

carnig
Download Presentation

J-50 lab 4

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. J-50 lab 4 Our agenda: • Basic Web publishing concepts • Directory structure • Gathering images • Scanning a picture using Photoshop • Altering images with Photoshop • Create your own weblog JOMC 050 Lab Four Notes

  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 JOMC 050 Lab Four Notes

  3. Directory structure • 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. JOMC 050 Lab Four Notes

  4. More directory structure • 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. JOMC 050 Lab Four Notes

  5. Organize your Website • On the desktop, right-click on My Computer • 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(be sure to use lowercase ‘i’). You’ll file your graphics and photos in 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) JOMC 050 Lab Four Notes

  6. Graphics and 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) is another type of grahics file, but it’s not used as often • Do NOT use TIFs – these are high-resolultion, gigantic files that hog bandwidth JOMC 050 Lab Four Notes

  7. Gathering images for the page • Want a picture of a cow? Find it and save it to your disk. When you find one you like, right-click, “save image as,” select your H:\public_html\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. JOMC 050 Lab Four Notes

  8. Sources for finding images • Google: http://images.google.com/ • AllTheWeb: http://www.alltheweb.com/ • Stock pictures (for sale) http://www.corbis.com/ • Visual Search Engine: http://www.ditto.com/ • Extras: http://www.dynamicdrive.com/ JOMC 050 Lab Four Notes

  9. More sources for finding images • Government images and logoshttp://firstgov.gov/Topics/Graphics.shtml • Images and logos of UNC http://images.unc.edu/ http://www.licensing.unc.edu/July18Licensing/General/Logos.htm JOMC 050 Lab Four Notes

  10. Scanning and using Photoshop • Scanning Instructions DTE p. 218-224 • 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. JOMC 050 Lab Four Notes

  11. Photoshop tutorials • 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-232, Photoshop 6 Web Graphics (233-244) JOMC 050 Lab Four Notes

  12. Altering images with Photoshop • Optimize an image by changing the file size, image size, color, image type, transparency and more … • Add text to an image with the text tool • Using Photoshop layers to add effects on top of an image • ‘Save As’ in Photoshop format (.psd) AND a suitable format for the Web (.gif or .jpg) JOMC 050 Lab Four Notes

  13. Create your own weblog • A weblog is a frequently updated webpage. You can post anything you want to it, including pictures and essays. • Create your own weblog in just 5 minutes using the free service from Blogger. Follow the instructions posted at http://www.tarheelbloggers.org/thb/resources/blogger.html JOMC 050 Lab Four Notes

  14. Next time • Publish 2 or 3 short postings to your weblog. • Bring DTE JOMC 050 Lab Four Notes

More Related