Week 41 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom

Slides:

Advertisements

Similar presentations

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques ©2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.

Advertisements

Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.

With Microsoft FrontPage 2003 Publishing a Web Page.

Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.

Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.

Chapter 5 Creating an Image Map.

Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.

1 Setting up Your Website Using HTML and JavaScript to Develop Websites.

Image Maps. 2 What it Does n Different parts of the image activate different hyperlinks.

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

COS 125 DAY 15. Agenda Assignment 4 Posted –Due March 25 Assignment 5 posted –Due April 1 (no joke!) Left to do –5 Assignments (9 total) One per week.

COS 125 DAY 16. Agenda Second Capstone Progress Report Due March 23 (next class ) Assignment #4 assigned –Due Tuesday March 23 Exam #3 will March 26 –Castro.

7-2 Similarity and transformations

COS 125 DAY 15. Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due Thursday, March 24 Exam #3 will be on March 24 –Castro Chaps.

Hyperlinks. Working with Linked Images  A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page.

10.6 Equations of Circles Advanced Geometry. What do you need to find the equation of a circle? Coordinates of the Center of the circle. Radius – Distance.

Creating and Using Podcasts Stanford University Continuing Studies CS 43 Mark Branom

Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 4 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 4: Adding Content.

Web Design I Spring 2009 Kevin Cole Gallaudet University

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.

Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

+ Web Design Terminology Digital Communications III- Frameworks-2.1 Terminology HTML Domain Name Hot Spot Site Maps.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques.

CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.

Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.

Create an Image Map Web Publishing & Design. Hot Spots  hot spot: An area on an object containing a hyperlink. An entire object can be a single hot spot,

 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.

Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –

Chapter 5 Creating an Image Map.

Week 11 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom

PhotoShop Image Maps Midwestern States Info Pages.

Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.

Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.

Page 1 of 6 Stanford Continuing Studies CS 38 ·Hands-on Graphics Production for the Web Week Five EXERCISE 1: JAVASCRIPT ROLL-OVERS 1) Launch Internet.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 2 Outline frameset Element 5.10 Nested frameset s.

1 Week Four– Advance HTML 2 Dr. Fadi Safieddine. 2 Lecture Content Basic HTML Tables Using based Feedback form Creating and Using Image Maps Nested.

Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

Enhanced Web Site Design Stanford University Continuing Studies CS 22

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

Ch. 8 Web Page Design – Animation and Behaviors Mr. Ursone.

CS 22: Enhanced Web Site Design - Week 5Slide 1 (of 22) Enhanced Web Site Design Stanford University Continuing Studies CS 22 Mark Branom

Image Map You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag.

 You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any.

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

Slide 1 (of 16) 1) Launch Dreamweaver 8. 2)Under Site, choose New Site. Stanford Continuing Studies CS 22 · Enhanced Web Site Design Week Two DREAMWEAVER.

© 2001 – All Rights Reserved – Page 1 Web Graphics & Animating Web Graphics.

IT204 – Web Scripting and Authoring I Forms and Image Maps Unit 4.

Warm Up Week 2. Section 10.6 Day 1 I will write the equation of a circle. Circle Equation Must know the coordinate of the center and the radius.

1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate.

Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School.

When I am embedding under, I do not close the li tag until I complete the items that are embedded. Looking at outlines.

Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS.

Slide 1 of 12 1) Launch Fireworks. 2) Under File, choose Open 3) Choose your CS38 folder on the Desktop. 4) Open the navbar.gif file Stanford Continuing.

Page 1 of 8 Stanford Continuing Studies CS 38 ·Hands-on Graphics Production for the Web Week Five EXERCISE 2: ANIMATION 1) Launch Fireworks. 2) Open blackbackground-stanford.gif.

Chapter 5.   A special type of inline image in which one or more areas is a hotspot (clickable) Image Map.

Linking Using Image Maps. What is an Image Map? An image map is an image in which several areas of an image are linked to different sites The areas of.

Chapter 3 Lesson 2 The Graph Translation Theorem.

Images were sourced from the following web sites: Slide 2:commons.wikimedia.org/wiki/File:BorromeanRing...commons.wikimedia.org/wiki/File:BorromeanRing...

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.

Congruence and Transformations on the coordinate plane

DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW

Continuing Studies CS22 • Stanford University

Acquiring Images for Web Graphics

HTML Image Maps Teacher: Ms. Olifer.

Introduction to HTML: Image Maps

Creating an Image Map.

Module 05: Building ASP .NET Applications

Exercise 55 - Skills Slices and rollovers are useful interactive elements you can add to your Fireworks documents. Slices not only enable you to add features.

Enhanced Web Site Design Stanford University Continuing Studies CS 22

Presentation transcript:

Week 41 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom Course Web Site:

CS38: Graphics Production for the Web Week 4Slide 2 of 12 Week 4 Agenda ImageMaps Slicing

CS38: Graphics Production for the Web Week 4Slide 3 of 12 What is an image map? Image maps allow a webmaster to take an image and define more than one hyperlink for the image. Each hyperlinked section is called a "hotspot". To define a hotspot, webmasters open the image in a graphics program and record the coordinates of the points corresponding to the hotspot boundaries. Some Examples: – – –

CS38: Graphics Production for the Web Week 4Slide 4 of 12 Map tags

CS38: Graphics Production for the Web Week 4Slide 5 of 12 rect Coordinates refer to the x/y coordinates for the upper left and the lower right coordinates for the rectangle.

CS38: Graphics Production for the Web Week 4Slide 6 of 12 circle The x/y coordinates refer to the center of the circle. The r refers to the size of the radius (in pixels).

CS38: Graphics Production for the Web Week 4Slide 7 of 12 polygon Coordinates refer to the x/y coordinates for as many are needed to define the polygon.

CS38: Graphics Production for the Web Week 4Slide 8 of 12 Class Exercise 1.Graphics Production & ImageMaps Exercise

CS38: Graphics Production for the Web Week 4Slide 9 of 12 Slicing Web pages with very large graphics take longer to load than web pages with smaller graphics. One way to make a web page with a large graphic load faster is to take the large image and break it up into many smaller pieces. This process is known as slicing.

CS38: Graphics Production for the Web Week 4Slide 10 of 12 Slicing Examples

CS38: Graphics Production for the Web Week 4Slide 11 of 12 Class Exercise Slicing Exercise

CS38: Graphics Production for the Web Week 4Slide 12 of 12 Next Week JavaScript – Rollovers, pop-ups, etc. Animations