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.

Slides:



Advertisements
Similar presentations
DREAMWEAVER Welcome to our website!
Advertisements

Creating an Image Map what? An image map adds one or more hyperlinked areas (or hotspots) to a single image. why? You have a group photo as an exhibit.
X10 hosting Sign up for free account. Enter a domain name click continue Then Enter your address Enter a password.
Dreamweaver Cheat Sheet CSCI 100 – JW Ryder. CSCI 1002JW Ryder - Dreamweaver Notes Initial Site Set Up Goto W:\ drive – This is your web root directory.
Chapter 3 Tables and Page Layout
 Adding Background image  Creating internal links  Creating external links  Save your document as a webpage(.mht) file.
Student Homepages. Overview Introduction Adding a Banner Adding Text Adding a Link.
Training 1 FrontPage Creating Web Pages. 2 Objectives 1. Open FrontPage. 2. Create Web pages. 3. Insert pictures 4. Create a hyperlink from a picture.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Adding an image to a page in Dreamweaver Uploading files to x10hosting Editing uploaded files in x10hosting Adding links in Dreamweaver Uploading linked.
Using Dreamweaver getting started 1)Start in your “My Documents” folder 2)Create a new folder called “website” 3)Create a sub folder called “images” 4)Start.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
Web Technologies Website Development Trade & Industrial Education
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Website Development with Dreamweaver
WEBiT Adding a new page. 1. View a page like the one you wish to create a. Navigate to a page with a similar layout to the new page you wish to create.
CIT 256 Dreamweaver Sites and Image Maps Dr. Beryl Hoffman.
Importing/Exporting between Fireworks and Dreamweaver For Buttons, Navigation Bar and Animated Banners.
Dreamweaver Unit A. Project Files l Download files from l Search using l Download the data disk.
Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.
Open Dreamweaver Start All programs Adobe design and web premium Adobe Dreamweaver.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Creating Links – Lesson 31 Creating Links Lesson 3.
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.
Updating the Laboratory Website. Useful Info Address: Everything is saved in the desktop.
Region 3 Playbook for Website Friday, October 14, 2011 Rose Buchanan Hardin Construction Company Region 3 Webmaster Greater Orlando Chapter 73.
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.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
BY PRIYA M ROBOHELP HTML. INTRODUCTION RoboHELP is a program designed to assist the user in writing help files, including Windows help files (Win HELP)
Welcome to the PowerPoint on how to use PowerPoint 2007 Neil Hecht Instructional Technology Facilitator Onslow County Schools.
Layers, Image Maps, and Navigation Bars
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
Teacher Web Page Creation Eileen Musselman. Log on to Muhlenberg’s Intranet Click Submit button.
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.
Go to your Blog URL: Then click on “Log in” Your students do not need to remember their password, they can select.
Web Design-Lecture3-QN-2003 Web Design Enhancing a Website.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
Building a Website: Images Editing Fall Editing Image Four Built-In Editing Tools – Cropping – Resizing – Sharpening – Adjusting brightness and.
Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School.
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.
Creating Web Pages with Links, Images, and Embedded Style Sheets
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.
Before We Begin Please download the files from as we will be using them in our walkthroughs.
Weebly is Your Friend. * To Enhance And Promote Your Curriculum * To Provide A Student Resource * Add Efficiency to Your Planning * Informational * Promote.
Contributing to the WCARC Website
Creating Links – Lesson 3
Continuing Studies CS22 • Stanford University
USING DREAMWEAVER Contents: Assigning a Root Folder
How to make a website in dreamweaver a website
Your First & Last Name (Make sure you capitalize your first and last name!) Follow these instructions: 1. Center your name on the slide (use the “Centered”
Using Fetch to Upload Your Website Source Files
Updating Your Section’s Website
6 Steps to a smart looking paper!
Lesson Objectives Lesson Outcomes
Cheat Sheet CSCI 100 JW Ryder
File Upload.
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Cheat Sheet CSCI 100 JW Ryder
Introduction to the ISB Intranet
How to PostPower Point Presentations
Adding information to provider pages
2. Press Browse and search for the video file you need.
Autodesk Inventor Tips and Tricks for New Users
Presentation transcript:

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

Page 2 of 15 3) Enter ImageMap Example, then click Next.

Page 3 of 15 4) Select No, then click Next.

Page 4 of 15 5) Click the Folder Icon and navigate to your floppy disk (A:\). Then click Next.

Page 5 of 15 6)Select None, then click Next. 7) Click Done.

Page 6 of 15 8)Under File, choose New. In the General tab, select Basic Page, HTML, then click Create. 9)In the Title field, enter Pick A School Website Then, under File, choose Save

Page 7 of 15 10) In the Save in field, make sure you are still at 3½ Floppy. In the File name field, enter schools.html, then click Save.

Page 8 of 15 11) In the main window area, enter Pick A School Website:, then press ENTER. 12) Highlight the text. In the Properties palette, choose the Heading 1 format.

Page 9 of 15 13) Under Insert, select Image. 14) Select navbar.gif, then click OK.

Page 10 of 15 15) Select the image. 16) In the Properties palette, in the Map field, enter schools, then click the Rectangle Hotspot Tool.

Page 11 of 15 17) Draw a box around the Stanford image. 18) In the Properties palette: In the Link field, enter In the Alt field, enter Stanford University

Page 12 of 15 19) Click the Rectangle Hotspot Tool. 20) Draw a box around the Berkeley image. 21) In the Properties palette: In the Link field, enter In the Alt field, enter UC Berkeley

Page 13 of 15 22) Click the Rectangle Hotspot Tool. 23) Draw a box around the Harvard image. 24) In the Properties palette: In the Link field, enter In the Alt field, enter Harvard University

Page 14 of 15 25) Click the Rectangle Hotspot Tool. 26) Draw a box around the Yale image. 27) In the Properties palette: In the Link field, enter In the Alt field, enter Yale University

Page 15 of 15 28) Under File, choose Save. 29) Using Tripod, publish schools.html and navbar.gif to your tripod account (see Uploading Using Tripod). 30) Open your browser to see your published imagemap.