Lab Four: Agenda - PowerPoint PPT Presentation

Lab four agenda l.jpg
Download
1 / 11

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Lab four agenda l.jpg

Lab Four: Agenda

  • Basic Web publishing concepts

  • Directory structure

  • Gathering images

  • Scanning a picture using Photoshop

  • Altering images with Photoshop


Terminology l.jpg

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


Directory structure the most important topic l.jpg

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.


Directory structure cont d l.jpg

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.


Organize your web site l.jpg

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)


Graphics images l.jpg

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


Gathering images for the page l.jpg

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.


Sources for images features l.jpg

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/


Scanning and using photoshop l.jpg

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)


Altering images w photoshop l.jpg

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)


Next time l.jpg

Next Time

  • Turn to DTE 269-70 and create your own Web account

  • Read DTE 160-189 (Web authoring, HTML, Advanced HTML)

  • Bring DTE.


  • Login