Beginning Web Site Design
Download
1 / 20

- PowerPoint PPT Presentation


  • 254 Views
  • Updated On :

Beginning Web Site Design Stanford University Continuing Studies CS 21 Mark Branom [email protected] http://www.stanford.edu/people/markb/ Course Web Site: http://www.geocities.com/stanfordcs21/ Week 5 Agenda Unfinished business Using Graphics on web pages Types of web graphics

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

PowerPoint Slideshow about '' - bernad


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
Slide1 l.jpg

Beginning Web Site DesignStanford University Continuing Studies CS 21

Mark Branom

[email protected]

http://www.stanford.edu/people/markb/

Course Web Site: http://www.geocities.com/stanfordcs21/

Week 5


Week 5 agenda l.jpg
Week 5 Agenda

  • Unfinished business

  • Using Graphics on web pages

  • Types of web graphics

  • Using existing web graphics

  • Creating web graphics

  • Background graphics

Week 5


Using graphics on web pages l.jpg
Using Graphics on Web Pages

  • Graphics on web pages are separate files. Unlike a Word document, where the graphics actually "live" within the document, to get a graphic on a web page, designers point to the graphic file in the HTML source code like this:

    <IMG SRC="URL-of-graphic" ALT="description of graphic">

  • Graphics are copyrighted material and should only be used with permission.

Week 5


Graphics can be described as either relative or fully qualified urls l.jpg
Graphics can be described as either relative or fully qualified URLs

http://www.geocities.com/stanfordcs21/demos/bunny.html

<HTML>

<HEAD>

<TITLE>Bunny Webpage</TITLE>

</HEAD>

<BODY BGCOLOR="turquoise">

<H2 align="center">BUNNY!</H2>

<CENTER>

<IMG SRC="bunny.gif">

</CENTER>

</BODY>

</HTML>

Relative reference (relative to the location of the HTML document)

<HTML>

<HEAD>

<TITLE>Bunny Webpage</TITLE>

</HEAD>

<BODY BGCOLOR="turquoise">

<H2 align="center">BUNNY!</H2>

<CENTER>

<IMG SRC="http://www.geocities.com/stanfordcs21/demos/bunny.gif">

</CENTER>

</BODY>

</HTML>

Fully qualified URL

Week 5


Bunny html l.jpg
Bunny.html qualified URLs

In the bunny web page example, both bunny.html and bunny.gif are located in the same directory.(http://www.geocities.com/stanfordcs21/demos/)

That's why we could use relative URL to insert the graphic (<img src="bunny.gif">). If we wanted to use the fully-qualified URL, it would have been:

<img src="http://www.geocities.com/stanfordcs21/demos/bunny.gif">

But since both bunny.gif and bunny.html are in the same webspace, it makes better sense to use the relative URL.

Week 5


Types of web graphics l.jpg
Types of Web Graphics qualified URLs

  • GIF:GIF (Graphics Interchange Formula) is the most common graphic type on the web. It can be pronounced with a hard or soft “g.” GIF is limited to 8-bit color information (256 colors) and works best for line art. It allows for transparent and animated graphics.

  • JPEG:JPEG (Joint Photographic Experts Group) was designed for color-rich images, such as photographs. JPEG compresses graphics with high color depth (24-bit color -- up to 16 million colors) so that they are smaller and download faster. JPEG compression is "lossy" -- some image detail is lost during compression

Week 5


Using existing web graphics l.jpg
Using Existing Web Graphics qualified URLs

  • Not a graphic artist? Don't despair! Few of us are!

  • There are numerous graphics archives on the Web where you can find wonderful, usable, professional-looking graphics for use on your web pages.

  • Remember, graphics are copyrighted -- don't use them unless they are from an archive or you have explicit written permission to use them.

  • To find a graphics archive, point your browser to Yahoo! (http://www.yahoo.com/) and search for "Clip Art" or "Web graphics". You'll likely find more than you could possibly use.

  • There are a couple of graphic archives listed on the Resources page.

Week 5


Downloading graphics l.jpg
Downloading Graphics qualified URLs

  • In Netscape & IE:

    • Point your mouse over the image and hold on the mouse button (on a PC, right-click the image)

    • Choose “Save Image (Picture) As . . .”

    • Specify the destination location of the image file on your computer. Click OK.

Week 5


Downloading graphics example l.jpg
Downloading Graphics example qualified URLs

  • Suppose you came across this website I’ve created which has some pictures of me. Suppose you really loved the picture of me on the left and you want to download it for use on your own website. How would you go about doing this?

BTW, the URL is: http://www.stanford.edu/~markb/pictures.html

Week 5


Downloading graphics example cont l.jpg
Downloading Graphics example (cont.) qualified URLs

  • Step 1: Move the mouse over the image that you want and right-click on the image you want (on a Macintosh, hold down the mouse over the image you want)

  • Step 2: Choose “Save Image As”

Week 5


Downloading graphics example11 l.jpg
Downloading Graphics example qualified URLs

  • Step 3: Choose the location on your hard drive where you want to save the image. I’m going to place it into a folder on my desktop called “Working Web Stuff”.

Week 5


Creating web graphics l.jpg
Creating Web Graphics qualified URLs

  • If you are familiar with creating computer graphics, applying that knowledge to creating web graphics isn't too difficult.

  • If you're not a graphic artist, the process and options could easily take up a course all their own.

  • Things to consider:

    • When you create your own graphic, save it in a "true image format" (BMP on Windows, PICT on the Mac). Make any changes to the graphic in the native file format. THEN resave a copy as GIF or JPEG

    • Save the graphics as 75-100 dpi -- anything much more than that is wasted

    • Smaller file sizes are better when it comes to web graphics. The larger the graphic, the longer the download time.

Week 5


Photographs l.jpg
Photographs qualified URLs

  • Existing photos can be converted to digital format using a scanner and scanner software. Most scanner software allows you to save the graphic as a GIF or JPEG. If you aren't happy with the resulting photo, it can be "cleaned up" using a program such as Adobe Photoshop or Photostyler. New photos can be converted to digital format (usually JPEG) by the processor. Kodak, Longs, and other processors can save your photos on a CD-ROM or diskette as well as creating prints for you. Again, these photos can be "cleaned up" using a program such as Photoshop.

Week 5


Creating web graphics14 l.jpg
Creating Web Graphics qualified URLs

  • Graphics Software Packages

    • There are a wide variety of software packages available for the creation of Web graphics. Some are designed specifically for this purpose while others can do much more than merely create Web graphics but do a great job at that task as well (such as Photoshop).

    • Creating graphics can be a simple process (creating a button with a text label) or a much more complicated process (creating a logo).

    • Visit the Resources page for suggestions on software. Also, there is a listing of free tools available for download on the web.

Week 5


Background graphics l.jpg
Background Graphics qualified URLs

  • Done by modifying the <BODY> tag: <BODY BACKGROUND="URL">, where "URL" is the location of the graphic

  • Creating a web page with a colored background can be nice but you can go one step further with a background graphic.

  • Background graphics are generally small graphics that tile across the browser window to create a filled-in effect. As such, some graphics are better suited to being background graphics than others.

  • General rules:

    • Keep the graphic/text contrast high

    • Keep the background graphic SIMPLE -- too much color, too much pattern can make it really hard to read over

    • Don't overuse background graphics -- it can become distracting

Week 5


Animated graphics l.jpg
Animated Graphics qualified URLs

  • Using Existing Animations

    • Most graphics archives include animated sections

    • Animations are a form of GIF format; in terms of placing animations on a web page, there is no difference between an animated GIF and a non-animated GIF (same tag, same process).

  • Creating New Animations

    • There are software packages specifically for creating animations. Animations are a series of static graphics that are "stitched" together and saved into one file. The browser shows each of the static images in sequence resulting in the animations.

Week 5


Uploading image to webspace l.jpg
Uploading image to webspace qualified URLs

  • Process is the same as uploading HTML files

  • Only difference -- graphics are BINARY, not plain ASCII text, so you'll need to press the BINARY or RAW DATA button in your FTP client (Fetch / WS_FTP)

  • Don’t forget to reset the button back to "ASCII" for when you send HTML files...

Week 5


In class assignments l.jpg
In-class assignments qualified URLs

  • Background graphic

  • Inserting pictures into web pages

Week 5


Weekly assignment l.jpg
Weekly Assignment qualified URLs

  • Visit some graphics archives. Choose some graphics you'd like to have on your pages. Save them to your hard drive so you'll have access to them (get permission if they're copyrighted!)

  • Or, if you have the software and skills, create a graphic or two to use on your site.

  • Or, scan a photo into your computer

Week 5


Preview of next week l.jpg
Preview of next week... qualified URLs

  • Lists

Week 5


ad