HTML Exercise 21 Making Simple Rectangular Buttons

Size: px
Start display at page:

Download "HTML Exercise 21 Making Simple Rectangular Buttons"

Transcription

1 HTML Exercise 21 Making Simple Rectangular Buttons Buttons are extremely popular and found on virtually all Web sites with multiple pages. Buttons are graphical elements that help visitors move through different areas of the Web site. The easiest way to make a button in Paint Shop Pro is with the Preset Shapes tool. Paint Shop Pro 7 comes with many different types of predesigned buttons. All you need to do is add text. The general rule when creating a button is to follow these five steps. 1. Create the button background, adjusting the colors, design, and size. 2. Using a new layer, add the text for your button with the text tool. After positioning the text in the button, add any effects that you want to add to the text. 3. Add any other text on new layers. 4. Save your blank button as a Paint Shop Pro template. 5. Save each button as a GIF file. 1. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro Click File and select New. 3. The New Image dialog box opens. 4. Under Image Dimensions, select 400 pixels for the Width and 200 pixels for the Height. 5. The Resolution should be set to 72 ppi. 6. For Background Color, select White. 7. For Image Type, select 16.7 Million Colors. 8. Click OK. 9. Click the Normal Viewing button on the Toolbar. 10. The canvas is now at full size. Using Predesigned Buttons 11. Select the Preset Shapes tool on the Tool Palette. 12. On the Tool Options Window, click the drop-down arrow and select Button Check the two boxes you see in the picture to the right. 14. Drag out a small rectangle on the canvas. 15. Don t worry about the size. 16. Drag the resizing handles, so that the rectangle fills the canvas perfectly. HTML Exercise 21 Page 1

2 17. Look at Figure 1. Figure 1: The button fills the canvas. Saving Your Work as a PSP Image You make all of your buttons from a template with a number of layers. You must save your image as a Paint Shop Pro file in order to preserve the layers. 18. Click Save button on the Standard Toolbar. 19. The Save dialog box opens. 20. Save in your HTML folder. 21. Name your file Button 1 Template. 22. The Save As Type should read. 23. Click Save or press Enter. Setting the Fill Color 24. Click the triangle on the Foreground/Stroke button and select Null. 25. Click the triangle on the Background/Fill button and select Solid. 26. Click the Background/Fill button, but not on the triangle. 27. The Color dialog box opens. 28. Under Basic Colors, select Black. 29. Click OK. Creating Text Text on buttons must be placed precisely. Turn on the Rulers if they are not on. 30. Click View on the Menu bar and select Rulers. 31. Click Layers on the Menu bar and select New Raster Layer. 32. The Layer Properties dialog box opens. 33. In the Name text box type Home. HTML Exercise 21 Page 2

3 34. Click OK. 35. Select the Text tool on the Tool Palette. 36. Move the mouse over the drawing canvas. 37. Move the crosshair 120 pixels from the top and 200 pixels across. 38. Look at the Status bar in the left corner. 39. Click on the drawing canvas. 40. The Text Entry dialog box opens. 41. Select Tahoma as the Font. 42. Select a Size of Select the Bold and Center options. 44. Under Create As, select Floating and Antialias. 45. Click the Standard text button This turns off the Stroke color and leaves the Fill color. 47. Under Kerning, check Auto kern. 48. Press the Caps Lock key. 49. Type HOME in the text box. 50. Press the Caps Lock key to turn it off. 51. Click OK. 52. Press Ctrl+D to deselect the text. 53. Look at Figure Press the L key to turn on the Layers Palette. Figure 2 Creating a New Layer 55. Click the Eyeglasses icon on the Home layer. This will make the layer invisible. HTML Exercise 21 Page 3

4 56. Click the Create Layer button on the Layers Palette. 57. The Layer Properties dialog box opens. 58. In the Name text box, type Lists. 59. Click OK. Adding Text 60. Select the Text tool on the Tool Palette. 61. Move the mouse over the drawing canvas. 62. Move the crosshair 120 pixels from the top and 200 pixels across. 63. Look at the Status bar in the left corner. 64. Click on the drawing canvas. 65. The Text Entry dialog box opens. 66. Press the Caps Lock key. 67. Type LISTS in the text box. 68. Press the Caps Lock key to turn it off. 69. Click OK. 70. Press Ctrl+D to deselect the text. 71. Look at Figure 3. Figure 3 Creating a New Layer 72. Click the Eyeglasses icon on the Lists layer. This will make the layer invisible. 73. Click the Create Layer button on the Layers Palette. 74. The Layer Properties dialog box opens. 75. In the Name text box, type Hyperlinks. 76. Click OK. Adding Text 77. Select the Text tool on the Tool Palette. 78. Move the mouse over the drawing canvas. 79. Move the crosshair 120 pixels from the top and 200 pixels across. 80. Look at the Status bar in the left corner. 81. Click on the drawing canvas. 82. The Text Entry dialog box opens. 83. Press the Caps Lock key. HTML Exercise 21 Page 4

5 84. Type LINKS 1 in the text box. 85. Press the Caps Lock key to turn it off. 86. Click OK. 87. Press Ctrl+D to deselect the text. 88. Press Ctrl+S. 89. This saves the Button 1 Template. 90. Now you can edit any layer or add more layers later. Figure 4 Resizing the Button 91. Click Image on the Menu bar and select Resize. 92. The Resize dialog box opens. 93. Copy the settings in the picture to the right. 94. Click OK. 95. The button is now ¼ its original size. Hiding Layers and Saving as a GIF Image 96. The Layers Palette has five layers. 97. Click the Eyeglasses icon on the Lists layer. This will make the layer invisible. 98. Click the Eyeglasses icon on the Hyperlinks layer. This will make the layer invisible. 99. The other layers should be visible Click File on the Menu bar, point to Export, and select GIF Optimizer 101. The GIF Optimizer opens.. HTML Exercise 21 Page 5

6 102. Click the Transparency tab The background color on the psp.html page is white Select None Click the Colors tab Copy the settings in the picture to the right Click OK The Save As dialog box opens Save in your HTML folder Name the file home_button Click Save or press Enter Click the Eyeglasses icon on the Home layer. This will make the layer invisible Click the Eyeglasses icon on the Lists layer. This will make the layer visible Click File on the Menu bar, point to Export, and select GIF Optimizer 115. The GIF Optimizer opens Click OK. You will use the same settings as the home button The Save As dialog box opens Save in your HTML folder Name the file lists_button Click Save or press Enter Click the Eyeglasses icon on the Lists layer. This will make the layer invisible Click the Eyeglasses icon on the Hyperlinks layer. This will make the layer visible Click File on the Menu bar, point to Export, and select GIF Optimizer 124. The GIF Optimizer opens Click OK. You will use the same settings as the home button The Save As dialog box opens Save in your HTML folder Name the file links1_button Click Save or press Enter. HTML Exercise 21 Page 6

7 130. Close Paint Shop Pro but do not save the Button 1 Template This will leave the template at normal size. Inserting a Picture in HTML To insert a picture use the <IMG SRC= filename > tag. The tag is nonpaired With your HTML folder open, double-click your psp.html file to open it It will open in Internet Explorer Click View on the Menu bar and select Source The HTML code for the Web page will open in Notepad Change the Revision Date in the footer of the page to today s date Below the date, add this line of code. Revised--Date<BR> HTML Exercise 21<BR> IMPORTANT! 138. Select the line breaks below Bookmark2: 139. Type this to make a picture that links. Button alignment <P ALIGN="center"> <A HREF= index.html ><IMG SRC="home_button.gif" BORDER= 0 ></A> </P> The hyperlink The picture The subcommand 140. Below the first hyperlink type these lines of code. <P ALIGN="center"> <A HREF="index.html"><IMG SRC="home_button.gif" BORDER="0"></A> <A HREF="lists.html"><IMG SRC="lists_button.gif" BORDER="0"></A> <A HREF="hyperlinks1.html"><IMG SRC="links1_button.gif" BORDER="0"></A> </P> 141. Click File on the Menu bar and select Save. HTML Exercise 21 Page 7

8 142. Click the Internet Explorer button on the Taskbar Click the Refresh button Test your buttons to make sure that they link Look at Figure 5. Figure 5 Uploading Your Documents 146. In Internet Explorer, type in the Address bar text box and press Enter Type your user name and password Press Enter or click the Sign in button Under Advanced Toolbox, click. Upload psp.html Upload home_button.gif Upload lists_button.gif Upload links1_button.gif 150. Click the button to copy the files to the Geocities server A new page will open telling you that you have successfully uploaded the files Click the hyperlink to your home page Click. Printing the Web Page 154. Before printing, click View on the Menu bar, point to Text Size, and select Medium Press Ctrl+P. The Print dialog box opens Change the Name to Ireland Change the Number of copies to Click OK Your teacher will go online to check your Web page and mark the grade on the printed copy Close all windows. HTML Exercise 21 Page 8

HTML Exercise 15 Creating An Engraved Metal Heading For The Text Wrap Page

HTML Exercise 15 Creating An Engraved Metal Heading For The Text Wrap Page HTML Exercise 15 Creating An Engraved Metal Heading For The Text Wrap Page 1. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro 7. 2. Maximize the Paint Shop

More information

HTML Exercise 12 Making A Transparent 3-D Heading For The Hyperlinks 3 Page

HTML Exercise 12 Making A Transparent 3-D Heading For The Hyperlinks 3 Page HTML Exercise 12 Making A Transparent 3-D Heading For The Hyperlinks 3 Page This exercise will give you practice downloading and installing your own SuperBladePro presets, creating a transparent heading

More information

HTML Exercise 11 Making A Transparent 3-D Heading For The Hyperlinks 2 Page

HTML Exercise 11 Making A Transparent 3-D Heading For The Hyperlinks 2 Page HTML Exercise 11 Making A Transparent 3-D Heading For The Hyperlinks 2 Page This exercise will give you practice downloading and installing your own SuperBladePro presets, creating a transparent heading

More information

HTML Exercise 9 Making A Transparent 3-D Heading For The Hyperlinks 1 Page

HTML Exercise 9 Making A Transparent 3-D Heading For The Hyperlinks 1 Page HTML Exercise 9 Making A Transparent 3-D Heading For The Hyperlinks 1 Page Paint Shop Pro will make many different kinds of text. Here is a way to make a transparent 3-D heading. The heading must be transparent

More information

Making Backgrounds With Paint Shop Pro

Making Backgrounds With Paint Shop Pro Making Backgrounds With Paint Shop Pro A good Web site deserves a good background. Whether you decide on a single color, a faded repeated logo, a textured tile, or a border, the background of your Web

More information

HTML Exercise 24 Tables

HTML Exercise 24 Tables HTML Exercise 24 Tables Tables allow you to put things in columns and rows. Without tables, you can only have one long list of text and graphics (check Exercise 20). If you have ever made a table in a

More information

HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites

HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites Turning pictures into hyperlinks is nearly the same as what you learned in Exercises 4 and 5. If a picture is essential to a Web page,

More information

HTML Exercise 27 Creating A Van Gogh Background Using Plug-in Filters

HTML Exercise 27 Creating A Van Gogh Background Using Plug-in Filters HTML Exercise 27 Creating A Van Gogh Background Using Plug-in Filters Background pictures need to be small so the Web page will download quickly. The browser automatically will repeat the picture to fill

More information

HTML Exercise 29 Adding JavaScript To Your Web Pages

HTML Exercise 29 Adding JavaScript To Your Web Pages HTML Exercise 29 Adding JavaScript To Your Web Pages Here s Joe Burn s explanation of JavaScript. What is the difference between Java and JavaScript anyway? They are both similar and quite different depending

More information

Nauticom NetEditor: A How-to Guide

Nauticom NetEditor: A How-to Guide Nauticom NetEditor: A How-to Guide Table of Contents 1. Getting Started 2. The Editor Full Screen Preview Search Check Spelling Clipboard: Cut, Copy, and Paste Undo / Redo Foreground Color Background Color

More information

Creating and Editing Images in Paint Shop Pro Version XI. File Types

Creating and Editing Images in Paint Shop Pro Version XI. File Types Creating and Editing Images in Paint Shop Pro Version XI Paint Shop Pro (PSP) from JASC software (http://www.jasc.com) is an imageediting and creation program. You can download a 30-day trial version from

More information

GIMP WEB 2.0 BUTTONS

GIMP WEB 2.0 BUTTONS GIMP WEB 2.0 BUTTONS Web 2.0 Navigation: Bar with Icons WEB 2.0 NAVIGATION: NAVIGATION BAR WITH ICONS This navigation bar will be designed with four clickable text links and icon links. In the Menus section,

More information

Libre Writer Exercise - 4

Libre Writer Exercise - 4 Libre Writer Exercise - 4 Aim: Introduction to Writer, importance of Writer as Word Processor, overview of toolbars, saving, accessing files, using help and resources. i). Create a document using the features:

More information

GIMP TEXT EFFECTS. Text Effects: Outline Completed Project

GIMP TEXT EFFECTS. Text Effects: Outline Completed Project GIMP TEXT EFFECTS ADD AN OUTLINE TO TEXT Text Effects: Outline Completed Project GIMP is all about IT (Images and Text) OPEN GIMP Step 1: To begin a new GIMP project, from the Menu Bar, select File New.

More information

Tutorials. Lesson 3 Work with Text

Tutorials. Lesson 3 Work with Text In this lesson you will learn how to: Add a border and shadow to the title. Add a block of freeform text. Customize freeform text. Tutorials Display dates with symbols. Annotate a symbol using symbol text.

More information

Using the Web in Mathematics Foundations Course An Introduction to Microsoft PowerPoint Sarah L. Mabrouk, Framingham State College

Using the Web in Mathematics Foundations Course An Introduction to Microsoft PowerPoint Sarah L. Mabrouk, Framingham State College Using the Web in Mathematics Foundations Course An Introduction to Microsoft PowerPoint Sarah L. Mabrouk, Framingham State College Overview: MS PowerPoint is powerful presentation software that enables

More information

INFORMATION TECHNOLOGY

INFORMATION TECHNOLOGY INFORMATION TECHNOLOGY PowerPoint Presentation Section Two: Formatting, Editing & Printing Section Two: Formatting, Editing & Printing By the end of this section you will be able to: Insert, Edit and Delete

More information

Severe Weather Safety PSA

Severe Weather Safety PSA Contents Add Text 2 Format Text 3 Add Stickers 4 Resize Stickers 8 Change the Color of the Canvas 9 Name the Project 12 Add a Page 12 Practice Adding and Formatting Text 13 Use the Paint Brush Tool 14

More information

InDesign CS Basics. To learn the tools and features of InDesign CS to create publications efficiently and effectively.

InDesign CS Basics. To learn the tools and features of InDesign CS to create publications efficiently and effectively. InDesign CS Basics InDesign Basics Training Objective To learn the tools and features of InDesign CS to create publications efficiently and effectively. What you can expect to learn from this class: How

More information

GIMP ANIMATION EFFECTS

GIMP ANIMATION EFFECTS GIMP ANIMATION EFFECTS Animation: Text Word by Word ANIMATION: TEXT WORD BY WORD GIMP is all about IT (Images and Text) BACKGROUND IMAGE Before you begin the text animation, you will download a public

More information

Cropping an Image for the Web

Cropping an Image for the Web Cropping an Image for the Web This guide covers how to use the Paint software included with Microsoft Windows to crop images for use on a web page. Opening Microsoft Paint (In Windows Accessories) On your

More information

Kidspiration 3 Basics Website:

Kidspiration 3 Basics Website: Website: http://etc.usf.edu/te/ Kidspiration is the visual learning tool for K-5 learners from the makers of Inspiration. With Kidspiration, students can build graphic organizers such as webs, concept

More information

Creating a Website with Publisher 2016

Creating a Website with Publisher 2016 Creating a Website with Publisher 2016 Getting Started University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2017 KSU Division of University Information

More information

Creating a Web Page with Microsoft Front Page Express Exercise 1

Creating a Web Page with Microsoft Front Page Express Exercise 1 Creating a Web Page with Microsoft Front Page Express Exercise 1 Today you are going to build your first Web page. Normally, Web pages are written in a language called Hypertext Markup Language (HTML).

More information

InDesign CC 2014 Intermediate Skills

InDesign CC 2014 Intermediate Skills InDesign CC 2014 Intermediate Skills Adobe InDesign Creative Cloud 2014 University Information Technology Services Training, Outreach, Learning Technologies & Video Production Copyright 2016 KSU Division

More information

Creating a Flyer. Open Microsoft Publisher. You will see the list of Popular Publication Types. Click the Blank Page Sizes.

Creating a Flyer. Open Microsoft Publisher. You will see the list of Popular Publication Types. Click the Blank Page Sizes. Creating a Flyer Open Microsoft Publisher. You will see the list of Popular Publication Types. Click the Blank Page Sizes. Double click on Letter (Portrait) 8.56 x 11 to open up a Blank Page. Go to File

More information

Introduction to Microsoft Word 2008

Introduction to Microsoft Word 2008 1. Launch Microsoft Word icon in Applications > Microsoft Office 2008 (or on the Dock). 2. When the Project Gallery opens, view some of the available Word templates by clicking to expand the Groups, and

More information

Page 1. Fireworks Exercise

Page 1. Fireworks Exercise Page 1 Fireworks Exercise 1. Create a New Fireworks Document - File>New. For this exercise, choose 800 for width, 600 for height, resolution 72 pixels/inch, canvas color to Transparent, then choose OK.

More information

Program and Graphical User Interface Design

Program and Graphical User Interface Design CHAPTER 2 Program and Graphical User Interface Design OBJECTIVES You will have mastered the material in this chapter when you can: Open and close Visual Studio 2010 Create a Visual Basic 2010 Windows Application

More information

Using Microsoft Word. Working With Objects

Using Microsoft Word. Working With Objects Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects

More information

ITEC185. Introduction to Digital Media

ITEC185. Introduction to Digital Media ITEC185 Introduction to Digital Media ADOBE ILLUSTRATOR CC 2015 What is Adobe Illustrator? Adobe Illustrator is a program used by both artists and graphic designers to create vector images. These images

More information

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP GIMP WEB 2.0 ICONS Web 2.0 Banners: Download E-Book WEB 2.0 ICONS: DOWNLOAD E-BOOK OPEN GIMP GIMP is all about IT (Images and Text) Step 1: To begin a new GIMP project, from the Menu Bar, select File New.

More information

HAPPY HOLIDAYS PHOTO BORDER

HAPPY HOLIDAYS PHOTO BORDER HAPPY HOLIDAYS PHOTO BORDER In this Photoshop tutorial, we ll learn how to create a simple and fun Happy Holidays winter photo border! Photoshop ships with some great snowflake shapes that we can use in

More information

How to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements?

How to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements? BASIC GAUGE CREATION The Video VBox setup software is capable of using many different image formats for gauge backgrounds, static images, or logos, including Bitmaps, JPEGs, or PNG s. When the software

More information

FrontPage. Directions & Reference

FrontPage. Directions & Reference FrontPage Directions & Reference August 2006 Table of Contents Page No. Open, Create, Save WebPages Open Webpage... 1 Create and Save a New Page... 1-2 Change the Background Color of Your Web Page...

More information

Paint Tutorial (Project #14a)

Paint Tutorial (Project #14a) Paint Tutorial (Project #14a) In order to learn all there is to know about this drawing program, go through the Microsoft Tutorial (below). (Do not save this to your folder.) Practice using the different

More information

Layout. Usual menu tabs. Top toolbar. Right toolbar. Left toolbar. Work area

Layout. Usual menu tabs. Top toolbar. Right toolbar. Left toolbar. Work area Layout Top toolbar Usual menu tabs Left toolbar Right toolbar Work area Layout - left toolbar Contains tools like textbox, mediabox, line etc. Textbox tool Mediabox tool Layout - top toolbar Edit size,

More information

Creating or enlarging a hole in the center of a kaleidoscope (Paint Shop Pro)

Creating or enlarging a hole in the center of a kaleidoscope (Paint Shop Pro) TM Kaleidoscope Kreator Tutorial Series Creating or enlarging a hole in the center of a kaleidoscope (Paint Shop Pro) There may be times when you want to create (or enlarge) a hole in the center of a kaleidoscope:

More information

Microsoft Office Publisher

Microsoft Office Publisher Microsoft Office 2007- Publisher Opening Microsoft Publisher Using the Start Menu, click on All Programs and navigate to the Microsoft Office folder. Click on Microsoft Office Publisher 2007. Choosing

More information

Adding Objects Creating Shapes Adding. Text Printing and Exporting Getting Started Creating a. Creating Shapes Adding Text Printing and Exporting

Adding Objects Creating Shapes Adding. Text Printing and Exporting Getting Started Creating a. Creating Shapes Adding Text Printing and Exporting Getting Started Creating a Workspace Pages, Masters and Guides Adding Objects Creating Shapes Adding Text Printing and Exporting Getting Started Creating a Workspace Pages, Masters and Guides Adding Objects

More information

Fall 2016 Exam Review 3 Module Test

Fall 2016 Exam Review 3 Module Test 1. What is the block of text at the bottom of the page called? Header Footer Document Area Ribbon 2. Which word processing tool can help you find synonyms to improve your word choice? Spelling and Grammar

More information

Programme. Introduction to Animation Shop

Programme. Introduction to Animation Shop HEART Trust NTA Vocational Training Development Institute Programme Course Animations Learning Objectives: Use the animation tools Prepare for an animation Create an animation with animation

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information

GIMP ANIMATION EFFECTS

GIMP ANIMATION EFFECTS GIMP ANIMATION EFFECTS Animation: Image ANIMATION: IMAGE GIMP is all about IT (Images and Text) DOWNLOADING THE SUNFLOWER AND BUMBLE BEE IMAGES Both images will come from the Public Domain. To find the

More information

Lesson 4 Customize the ToolBox

Lesson 4 Customize the ToolBox Lesson 4 Customize the ToolBox In this lesson you will learn how to: Change the toolbox to be a Floating toolbox or a toolbox anchored on the Sidebar. Change the combo ToolBox size and highlighting. Change

More information

Building TPS Web Pages with Dreamweaver

Building TPS Web Pages with Dreamweaver Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the

More information

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,

More information

1. Open PowerPoint and you will see the introductory screen that contains different themes and templates. From the selection displayed, choose Slice.

1. Open PowerPoint and you will see the introductory screen that contains different themes and templates. From the selection displayed, choose Slice. PowerPoint Assessment ***Remember! This is a test and you cannot ask for help. This must be done completely on your own. If you have forgotten a skill, please go to my Tutorials page on my website and

More information

Layers (Just the Basics) By Jerry Koons

Layers (Just the Basics) By Jerry Koons and their applications are always a topic of concern and confusion, especially to those that are new to the Photoshop and Elements programs. will become one of your best tools after you understand their

More information

- Is the process of combining texts and graphics layout to produce publications e.g. cards,

- Is the process of combining texts and graphics layout to produce publications e.g. cards, DESKTOP PUBLISHING (DTP) - Is the process of combining texts and graphics layout to produce publications e.g. cards, newspapers, catalogues etc. - A special DTP software is always used. PURPOSE OF DTP

More information

:: MULTIMEDIA TOOLS :: CLASS NOTES

:: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 04 02.15 2017 AGENDA :: Homework Upload [ A-2 ] Ultimate Composite! Upload A-2 Project to Student PSD Folder :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: a. Dimensions

More information

In this exercise you will be creating the graphics for the index page of a Website for children about reptiles.

In this exercise you will be creating the graphics for the index page of a Website for children about reptiles. LESSON 2: CREATING AND MANIPULATING IMAGES OBJECTIVES By the end of this lesson, you will be able to: create and import graphics use the text tool attach text to a path create shapes create curved and

More information

IT153 Midterm Study Guide

IT153 Midterm Study Guide IT153 Midterm Study Guide These are facts about the Adobe Dreamweaver CS4 Application. If you know these facts, you should be able to do well on your midterm. Dreamweaver users work in the Document window

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,

More information

VHSE - COMPUTERISED OFFICE MANAGEMENT MODULE III - Communication and Publishing Art - PageMaker

VHSE - COMPUTERISED OFFICE MANAGEMENT MODULE III - Communication and Publishing Art - PageMaker INTRODUCTION : It is one Adobe PageMaker 7.0 software is the ideal page layout program for business, education, and small- and home-office professionals who want to create high-quality publications such

More information

Working with PDF s. To open a recent file on the Start screen, double click on the file name.

Working with PDF s. To open a recent file on the Start screen, double click on the file name. Working with PDF s Acrobat DC Start Screen (Home Tab) When Acrobat opens, the Acrobat Start screen (Home Tab) populates displaying a list of recently opened files. The search feature on the top of the

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...

More information

ITP 101 Project 2 - Photoshop

ITP 101 Project 2 - Photoshop ITP 101 Project 2 - Photoshop Project Objectives Learn how to use an image editing application to create digital images. We will use Adobe Photoshop for this project. Project Details To continue the development

More information

Pen Tool, Fill Layers, Color Range, Levels Adjustments, Magic Wand tool, and shadowing techniques

Pen Tool, Fill Layers, Color Range, Levels Adjustments, Magic Wand tool, and shadowing techniques Creating a superhero using the pen tool Topics covered: Pen Tool, Fill Layers, Color Range, Levels Adjustments, Magic Wand tool, and shadowing techniques Getting Started 1. Reset your work environment

More information

JASCO CANVAS PROGRAM OPERATION MANUAL

JASCO CANVAS PROGRAM OPERATION MANUAL JASCO CANVAS PROGRAM OPERATION MANUAL P/N: 0302-1840A April 1999 Contents 1. What is JASCO Canvas?...1 1.1 Features...1 1.2 About this Manual...1 2. Installation...1 3. Operating Procedure - Tutorial...2

More information

Section 3. Editing a Web Page

Section 3. Editing a Web Page New CLAIT FrontPage 2003 Section 3 Editing a Web Page By the end of this Section you will be able to: Work in Page View Enter Text Insert Text Edit the Page Format Text Insert an Image Preview the Page

More information

Session 7 MS Word. Graphics. Inserting Clipart, and Graphics Modify graphics Position graphics

Session 7 MS Word. Graphics. Inserting Clipart, and Graphics Modify graphics Position graphics Session 7 MS Word Graphics Inserting Clipart, and Graphics Modify graphics Position graphics Table of Contents Session 7 Working with Graphics... 1 The Toolbar... 1 Drawing Toolbar... 1 Picture Toolbar...

More information

How to create a prototype

How to create a prototype Adobe Fireworks Guide How to create a prototype In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive prototype for a widget. A prototype is a

More information

Lesson 4 - Creating a Text Document Using WordPad

Lesson 4 - Creating a Text Document Using WordPad Lesson 4 - Creating a Text Document Using WordPad OBJECTIVES: To learn the basics of word processing programs and to create a document in WordPad from Microsoft Windows. A word processing program is the

More information

Word Tutorial 3. Creating a Multiple- Page Report COMPREHENSIVE

Word Tutorial 3. Creating a Multiple- Page Report COMPREHENSIVE Word Tutorial 3 Creating a Multiple- Page Report COMPREHENSIVE Objectives Format headings with Quick Styles Insert a manual page break Create and edit a table Sort rows in a table Modify a table s structure

More information

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading

More information

PowerPoint Launching PowerPointX

PowerPoint Launching PowerPointX PowerPoint 2004 Launching PowerPointX 1. Start PowerPoint by clicking on the PowerPoint icon in the dock or finding it in the hard drive in the Applications folder under Microsoft Office 2004. PowerPoint

More information

AGENDA. :: Homework Upload. :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: II. DRAWING SHAPES III.

AGENDA. :: Homework Upload. :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: II. DRAWING SHAPES III. CLASS :: 04 MULTIMEDIA TOOLS :: CLASS NOTES 10.02 2017 AGENDA :: Homework Upload [ A-2 ] Ultimate Composite! Upload A-2 Project to Student PSD Folder :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage]

More information

Goldfish 4. Quick Start Tutorial

Goldfish 4. Quick Start Tutorial Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know

More information

2. If a window pops up that asks if you want to customize your color settings, click No.

2. If a window pops up that asks if you want to customize your color settings, click No. Practice Activity: Adobe Photoshop 7.0 ATTENTION! Before doing this practice activity you must have all of the following materials saved to your USB: runningshoe.gif basketballshoe.gif soccershoe.gif baseballshoe.gif

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

Microsoft Visio Working with Shapes

Microsoft Visio Working with Shapes Working with Visio Shapes Shape is the general term for the objects you will find on a stencil and objects created using the drawing tools. These include geometric shapes such as rectangles, triangles

More information

Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand

Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand Adobe Photoshop Sh S.K. Sublania and Sh. Naresh Chand Photoshop is the software for image processing. With this you can manipulate your pictures, either scanned or otherwise inserted to a great extant.

More information

creating files and saving for web

creating files and saving for web creating files and saving for web the template files assume a default image size of 300 x 300 pixels images intended for the web should be produced in rgb mode name your images in a logical format, so

More information

InDesign Tools Overview

InDesign Tools Overview InDesign Tools Overview REFERENCE If your palettes aren t visible you can activate them by selecting: Window > Tools Transform Color Tool Box A Use the selection tool to select, move, and resize objects.

More information

Fireworks Basics. The Fireworks Interface

Fireworks Basics. The Fireworks Interface Fireworks Basics Scenario Firework is a graphics application that allows you to create and manipulate Web (and other) graphics. It combines both bitmap and vector editing tools, and integrates well with

More information

Section 6: Dreamweaver

Section 6: Dreamweaver Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working

More information

Acrobat X Professional

Acrobat X Professional Acrobat X Professional Toolbar Well Page Navigations/Page Indicator Buttons for paging through document Scroll Bar/box page indicator appears when using the scroll button to navigate. When you release

More information

Desktop Publishing (Word)

Desktop Publishing (Word) Desktop Publishing (Word) In addition to word processing, Microsoft Word is a suprisingly capable desktop publishing application. It is no substitute for a professional grade program like Adobe PageMaker

More information

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters Using Microsoft Word Paragraph Formatting Every time you press the full-stop key in a document, you are telling Word that you are finishing one sentence and starting a new one. Similarly, if you press

More information

Lesson 6 Adding Graphics

Lesson 6 Adding Graphics Lesson 6 Adding Graphics Inserting Graphics Images Graphics files (pictures, drawings, and other images) can be inserted into documents, or into frames within documents. They can either be embedded or

More information

Microsoft Word Project Bookmarks

Microsoft Word Project Bookmarks Microsoft Word Project Bookmarks In this project you will create a Bookmark Front & Back. The Bookmark may be about Character Counts, Study Skills, Preparing for Tests, Taking a Test, hobby or an interest

More information

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

Creating Buttons and Pop-up Menus

Creating Buttons and Pop-up Menus Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about

More information

Tree and Data Grid for Micro Charts User Guide

Tree and Data Grid for Micro Charts User Guide COMPONENTS FOR XCELSIUS Tree and Data Grid for Micro Charts User Guide Version 1.1 Inovista Copyright 2009 All Rights Reserved Page 1 TABLE OF CONTENTS Components for Xcelsius... 1 Introduction... 4 Data

More information

Text box. Command button. 1. Click the tool for the control you choose to draw in this case, the text box.

Text box. Command button. 1. Click the tool for the control you choose to draw in this case, the text box. Visual Basic Concepts Hello, Visual Basic See Also There are three main steps to creating an application in Visual Basic: 1. Create the interface. 2. Set properties. 3. Write code. To see how this is done,

More information

COPYRIGHTED MATERIAL PHOTOSHOP WORKSPACE. Interface Overview 3. Menus 15. The Toolbox 29. Palettes 61. Presets and Preferences 83 WEB TASKS

COPYRIGHTED MATERIAL PHOTOSHOP WORKSPACE. Interface Overview 3. Menus 15. The Toolbox 29. Palettes 61. Presets and Preferences 83 WEB TASKS PHOTOSHOP WORKSPACE CHAPTER 1 Interface Overview 3 CHAPTER 2 Menus 15 CHAPTER 3 The Toolbox 29 CHAPTER 4 Palettes 61 CHAPTER 5 Presets and Preferences 83 COPYRIGHTED MATERIAL PHOTOSHOP WORK SPACE UNIVERSAL

More information

Think of layers as a stack of transparencies. Layers can be changed independently of other layers by clicking on its name in the layers palette.

Think of layers as a stack of transparencies. Layers can be changed independently of other layers by clicking on its name in the layers palette. Layer Techniques Think of layers as a stack of transparencies. Layers can be changed independently of other layers by clicking on its name in the layers palette. Reviewing the Layers Palette: A: Show/Hide

More information

Anleitungen für Word 2016 als Word-Dokument zum Ausdrucken und fürs Intranet

Anleitungen für Word 2016 als Word-Dokument zum Ausdrucken und fürs Intranet Anleitungen für Word 2016 als Word-Dokument zum Ausdrucken und fürs Intranet 19 Text and Tabs Tabs (tab stops) help you to write a list, for example, for an order or invoice. Larger spaces should not be

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

PowerPoint 2003 Intermediate PowerPoint: Tips and Tricks

PowerPoint 2003 Intermediate PowerPoint: Tips and Tricks PowerPoint 2003 Intermediate PowerPoint: Tips and Tricks Table of Contents 1. Course Description 2. Recoloring Clip Art 3. Cropping Clip Art and Images 4. Ungrouping Clip Art 5. Using the Picture Toolbar

More information

To learn more about the Milestones window choose: Help Help Topics Select the Index tab and type in the feature. For Example toolbox.

To learn more about the Milestones window choose: Help Help Topics Select the Index tab and type in the feature. For Example toolbox. To learn more about the Milestones window choose: Help Help Topics Select the Index tab and type in the feature. For Example toolbox. 1 of 12 CHOOSE THE DATES TAB TO: 1. Set the schedule s Date Range.

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

TABLE OF CONTENTS TABLE OF CONTENTS... 1 INTRODUCTION... 2 USING WORD S MENUS... 3 USING WORD S TOOLBARS... 5 TASK PANE... 9

TABLE OF CONTENTS TABLE OF CONTENTS... 1 INTRODUCTION... 2 USING WORD S MENUS... 3 USING WORD S TOOLBARS... 5 TASK PANE... 9 TABLE OF CONTENTS TABLE OF CONTENTS... 1 INTRODUCTION... 2 USING WORD S MENUS... 3 DEFINITIONS... 3 WHY WOULD YOU USE THIS?... 3 STEP BY STEP... 3 USING WORD S TOOLBARS... 5 DEFINITIONS... 5 WHY WOULD

More information

Learning to use the drawing tools

Learning to use the drawing tools Create a blank slide This module was developed for Office 2000 and 2001, but although there are cosmetic changes in the appearance of some of the tools, the basic functionality is the same in Powerpoint

More information

PowerPoint 2016 Building a Presentation

PowerPoint 2016 Building a Presentation PowerPoint 2016 Building a Presentation What is PowerPoint? PowerPoint is presentation software that helps users quickly and efficiently create dynamic, professional-looking presentations through the use

More information

SeaMonkey Composer: Creating Web Pages

SeaMonkey Composer: Creating Web Pages SeaMonkey Composer: Creating Web Pages v.1101 There are many ways to create and modify Web pages to be published on the Web. You can use any text editor such as Notepad to directly enter or modify the

More information

WHAT S NEW IN WORD 2007 & HOW TO CUSTOMIZE IT

WHAT S NEW IN WORD 2007 & HOW TO CUSTOMIZE IT WHAT S NEW IN WORD 2007 & HOW TO CUSTOMIZE IT The Ribbon...2 Tabs...2 Contextual Tabs...2 Dialog Box Launchers...3 The Microsoft Office Button...4 Galleries...4 Minimizing the Ribbon...5 The Quick Access

More information

Candy is Dandy Project (Project #12)

Candy is Dandy Project (Project #12) Candy is Dandy Project (Project #12) You have been hired to conduct some market research about M&M's. First, you had your team purchase 4 large bags and the results are given for the contents of those

More information