lab four agenda l.
Skip this Video
Loading SlideShow in 5 Seconds..
Lab Four: Agenda PowerPoint Presentation
Download Presentation
Lab Four: Agenda

Loading in 2 Seconds...

play fullscreen
1 / 11

Lab Four: Agenda - PowerPoint PPT Presentation

  • Uploaded on

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

PowerPoint Slideshow about 'Lab Four: Agenda' - MikeCarlo

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
Lab Four: Agenda
  • Basic Web publishing concepts
  • Directory structure
  • Gathering images
  • Scanning a picture using Photoshop
  • Altering images with Photoshop
  • 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
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
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
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
  • 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
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
Sources for images & features
  • Google Search engine

  • Stock pictures (for sale)
  • Images of UNC

  • Visual Search Engine

  • JAVA Scripts and DHTML

scanning and using photoshop
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:
  • Read DTE – Photoshop 6.0 Introduction (pp. 223-233, Photoshop 5.0 Web Graphics (234-243)
altering images w photoshop
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
Next Time
  • Turn to DTE 269-70 and create your own Web account
  • Read DTE 160-189 (Web authoring, HTML, Advanced HTML)
  • Bring DTE.