Lab #3: Web Design with Graphics
|
|
- Jayson Dalton
- 6 years ago
- Views:
Transcription
1 English 413: Electronic Documents and Publications Dr. Jablonski Spring 2004 What You Need to Complete this Lab Lab #3: Web Design with Graphics 1. HTML editing software, preferably Dreamweaver MX 2. UNLV Student Computing Resources SCR account A basic understanding of how the Internet works and how Web pages are made 4. Knowledge of the readings assigned for today: Web Style Guide Ch. 3, 4, & 7 Charlie Morris' "Amateur Web sites The Top Ten Signs" abc_mistakes.html Robin Williams' "Web Design Features" (read both "good" and "bad" lists) Lab Assignment For this lab, you will practice incorporating graphics into Web pages. Web designers use graphics for not just pictures, but also for design elements like navigation buttons, banner (or logo) designs, backgrounds, and even to display non-standard text. Web page graphics are not created in the HTML editor, but other applications like Photoshop and Fireworks. These images then can easily be imported into Dreamweaver. For this lab, you ll use Macromedia s Fireworks MX to create a page header and a simple graphic navigation bar. You ll then incorporate these elements into a Web page that should resemble something like the following example when you re done: 1
2 Before you begin this tutorial, go to the comedy team Just the Funny s list of characters and pick a character you ll use for this lesson. You can also opt to use pictures of yourself for this lab. For this option, you ll just need to take some printed pictures of yourself to a public lab and ask the lab monitor to help you scan your pictures as.jpg files. Task Hint Sample 1. Open Fireworks and create a new file with the canvas size 650 pixels wide and 100 pixels high. Leave the canvas color white. Macromedia s Fireworks MX is found near Dreamweaver on most Start menus. 2. In the property inspector, change the canvas color to #FFFF33 (a yellow). This will be the banner portion of the example (the part that says Cracko the Clown ). Most designers call this location on a Web page the banner or page header. The Getting Started with Fireworks documentation (PDF form) is the best overview of the Fireworks interface: upport/documentatio n/en/fire works/ There s also a fairly lengthy but excellent Web-based overview of Fireworks basics by Macromedia at: upport/fireworks/workflow/fw mx_modeless_editing/ 3. Next, pick the text tool (the A shaped icon under Vector tools palette) and type a funny title for your site. 4. Add a black border to your banner image by selecting the rectangle tool (the square icon under Vector palette). You can change the font style and color in the property inspector before you type the text or after. The font used in the example is Kids, red, size 40 & 20. Before you draw the shape, in the property inspector, change the color (paint bucket icon) to transparent (white square with red diagonal line), and set the border color (pencil icon) to black, 3 pixels. 2
3 5. Save your file as banner.png 6. Convert your banner.png file into a Web-ready graphic 7. Create a New Fireworks file, dimensions 150 W x 100 H, and a white background. Draw your shape by placing the cursor in the upper left corner and then dragging across the canvas. Don t worry about getting it exact, because you can go to the property inspector and type the exact dimensions (you want 647 x 96). You can also select the square and adjust the location on the canvas with your arrow keys. NOTE: png (short for Portable Network Graphic) files cannot be viewed on the Web. This is the name of the Fireworks source file. Having a png file enables you to continually go back to the source file and make changes. To be viewed on the Web, you ll have to change your file into a.gif or jpg file by exporting from the source file. With the banner.png file open in Fireworks, go to File > Export Preview... The Export Preview options that appear are all for optimizing your graphic. Bigger image files take longer to download and optimization is the process of trimming file size from graphics. This process is complicated, so basically make sure your format option says gif and then click the export button. Then save the gif file into your public_html folder. Next, you need to create your page s logo, which is generally the space in the upper-left corner of the page. The Cracko example uses the small picture of Cracko from the characters page. Macromedia Fireworks tutorial on exporting: upport/fireworks/export/fw_ex port_vs_sav/ 3
4 8. Import your character s small picture into your logo file by selecting File > Import 9. Re-size/re-design your picture to fill the canvas size of the logo you re creating. 10. Save your file as logo.png From the characters page, save your character s small picture to your public_html folder (right mouse/save picture as...). Once you select your character s file, you will see a picture corner icon appear. Move that picture corner to a side of the canvas and leftmouse click. The picture should appear. You can move the picture around the canvas. The small character pictures are only 120 pixels wide, but the logo canvas is 150 pixels. To blend the picture into the background, go to Modify > Canvas > Image Color. Next, select the Custom option and then click on the small arrow in the lower-right corner of the color chooser square. A little eye -dropper should appear. Drag the eyedropper to the background of the character picture and leftmouse click, then click okay. This should make the canvas background the same color as the background color of the character image. 11. Convert the logo file into a logo.gif file. 12. Create a New Fireworks file, dimensions 150 W x 400 H, background color #FFFF Create a rectangle 150 pixels wide and 35 pixels high, with a transparent background and a 1 pixel wide black border. Repeat Step 6, saving the file in your public_html folder. Now you re creating the leftside navigation bar of the example. You re making your first graphic button. Set these attributes in the property inspector of the rectangle before inserting the rectangle. 4
5 14. Make 4 more rectangle/buttons. 15. Finish the navigation bar s bottom. Select the rectangle with the pointer tool (black arrow) and copy and paste the rectangle. Then, use your down arrow key to move the copied rectangle below the first rectangle. Repeat this 3 more times until you have 5 rectangles stacked on top of each other. Paste and move the 150 x 35 rectangle one more time, but this time change the final rectangle s dimensions to 150 x Add text to your buttons. Select the text tool and type the words Home, Photos, Rates, Contact, Links into the buttons. Maintain consistency and save yourself some work by copying, pasting, and modifying the first text you type to the remaining buttons. 17. Save the file as navbar.png, then export the file as navbar.gif. 18. Open a New file in Dreamweaver and save it as lab3.html. 19. Insert a 2 column, 2 row table, 800 pixels wide, cell padding=5, cell spacing=0, border=0. Now, you ll assemble the graphics you created in Fireworks using Dreamweaver You re using a fixed width table to layout your Web page. The width is set at 800 pixels wide because according to Counter.com, 87% of Internet users have a screen resolution of at least 800 x 600 pixels wide. Remember, you always want to design pages that conform to what most people are using, in terms of browser type and browser resolution. See the Counter.com s January statistics: stats/2004/january/res.php 20. Change the cell dimensions of your table. Upper-left = 150 x 100 Upper-right = 650 x 100 Lower-left = 150 x 400 Lower-right = 650 x 100. Also, make sure vertical alignment ( vert ) is set to top for both bottom cells. NOTE: Lynch and Horton, the authors of Web Style Guide, recommend dimensions of 760 x 410 as a safe viewing area for screen resolutions of 800 x om/page/dimensions.html 5
6 21. In the upper-left cell, insert your logo.gif image. 22. In your upper-right cell, insert your banner.gif image. 23. In the lower-left cell, insert the navbar.gif image. Save your page and preview it (F12) in the browser at this point. 24. Add links to the navbar To make the navbar work, you need to add what s called an image map, or linked hot spots to the image. Click on the navbar image and look at the property inspector. You should see some Map options, if not click on the expander arrow at the bottom far right of property inspector. Here s an easy tutorial on image maps: hnology/dreamweaver/advanc ed/image-map.html Here s another one: du/wondersresources/crimag e.htm Click on the rectangle hot spot tool (blue square) and draw a rectangle over the home button of the navbar. When you re done, you ll get the hotspot properties, where you should add a link ( index.html ) and some alt text ( link to home ). Repeat this process for a couple more of the buttons, then save and preview. The buttons on your navbar should now work like links in the browser (i.e., you should see the little hand cursor). 6
7 25. Add text and a graphic to the content (lower-right cell) portion of your page. 26. Wrap your text around your image in the lower-right cell. 27. Add alt text to all of your images. 28. Check that the file works on the Internet and the URL of your finished lab #3 to Dr. J. Type words of text into the lower-right cell (and make sure the cell vertical alignment is set to top, not default ). Next, insert a picture of your character pulled from the Just the Funny Web site (not the small picture). These should be jpg files, which have a higher resolution and are used mostly for photographs. Select the picture, change the alignment ( align in property inspector you might need to expand property inspector) to right, then drag the picture to the front of the text. This should wrap the text around the image. When wrapping images, you can add space between the image and text by setting the V Space and H Space properties. In Dreamweaver, click on each image, including the logo, banner, navbar, and character picture, and add alt text that explains each visual to users who are visually impaired or otherwise viewing your site as textonly. Make sure your lab3.html and all image files are in your public_html file. Check for broken images Make sure the image map in the navbar works (i.e., has working links to other pages, but don t actually need the other pages) Link to Just the Funny characters page: characters.html For more on setting image alignment properties, see: upport/dreamweaver/assets/ins ert_images/insert_images04.ht ml For adding space around images: upport/dreamweaver/assets/ins ert_images/insert_images05.ht ml See upport/dreamweaver/assets/ins ert_images/insert_images08.ht ml 7
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 informationPage Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.
This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the
More informationENGL 323: Writing for New Media Repurposing Content for the Web Part Two
ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in
More informationGIMP 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 informationDazzle the Web with Dynamic Dreamweaver, Part II
Dazzle the Web with Dynamic Dreamweaver, Part II In the second Dreamweaver workshop we will learn the following skills: 1. Adding hyperlinks to our home page 2. Adding images to our home page 3. Creating
More informationFireworks 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 informationUnit 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 informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationLab #2: Information Architecture (A.K.A. Site Planning)
English 413: Electronic Documents and Publications Dr. Jablonski Spring 2004 Lab #2: Information Architecture (A.K.A. Site Planning) What You Need to Complete this Lab 1. HTML editing software, preferably
More informationITP 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 informationFireworks 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 informationCreating 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 informationInDesign Part II. Create a Library by selecting File, New, Library. Save the library with a unique file name.
InDesign Part II Library A library is a file and holds a collection of commonly used objects. A library is a file (extension.indl) and it is stored on disk. A library file can be open at any time while
More informationOn the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW
STAROFFICE 8 DRAW Graphics They say a picture is worth a thousand words. Pictures are often used along with our words for good reason. They help communicate our thoughts. They give extra information that
More informationCiDA Certificate in Digital Applications
CiDA Certificate in Digital Applications CiDA EXAM TOP TIPS Make your home page with background colour, insert a table with 4 rows 3 columns and 0 padding. Add your fireworks banner, buttons, email
More informationElectronic Portfolios in the Classroom
Electronic Portfolios in the Classroom What are portfolios? Electronic Portfolios are a creative means of organizing, summarizing, and sharing artifacts, information, and ideas about teaching and/or learning,
More informationENGL 323: Writing for New Media Building a Blog Reader Using Links, Tables, Images, and Frames
ENGL 323: Writing for New Media Building a Blog Reader Using Links, Tables, Images, and Frames Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Office hours: MW 11-12, 1-2, F 11-12; TTh
More informationPhotoshop Basics A quick introduction to the basic tools in Photoshop
Photoshop Basics A quick introduction to the basic tools in Photoshop Photoshop logo courtesy Adobe Systems Inc. By Dr. Anthony R. Curtis Mass Communication Department University of North Carolina at Pembroke
More informationHO-1: INTRODUCTION TO FIREWORKS
HO-1: INTRODUCTION TO FIREWORKS The Fireworks Work Environment Adobe Fireworks CS4 is a hybrid vector and bitmap tool that provides an efficient design environment for rapidly prototyping websites and
More informationSection 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 informationHow 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 informationInserting and Editing Pictures in Dreamweaver 8. Terminal Objective: To insert and edit an image into Dreamweaver 8.
Inserting and Editing Pictures in Dreamweaver 8 Terminal Objective: To insert and edit an image into Dreamweaver 8. Information: If you have already inserted your image, go to page 3 to begin the process
More informationBuilding 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 informationPage 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 informationWould you like to put an image on your index page? There are several ways to do this and I will start with the easy way.
Home Frontpage & Other Tutorials Dreamweaver Tutorial Contact Images and Tables Would you like to put an image on your index page? There are several ways to do this and I will start with the easy way.
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationNovember 19,
http://www.eee.uci.edu/workshops/ Web Images: A Snapshot What kinds of images are GIF JPEG used on the web? What does the name stand for? Graphics Interchange Format Joint Photographic Experts Group Animations
More informationPhotoshop tutorial: Final Product in Photoshop:
Disclaimer: There are many, many ways to approach web design. This tutorial is neither the most cutting-edge nor most efficient. Instead, this tutorial is set-up to show you as many functions in Photoshop
More informationAdobe Fireworks CS Essential Techniques
Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally
More informationLocate it inside of your Class/DreamWeaver folders and open it up.
Simple Rollovers A simple rollover graphic is one that changes somehow when the mouse rolls over it. The language used to write rollovers is JavaScript. Luckily for us, when we use DreamWeaver we don t
More informationNVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
More informationClick File > New to create a new file. The following dialog appears:
MACROMEDIA FIREWORKS QUICK REFERENCE Fireworks is an application designed to create and edit graphics for use on the Web (or, more specifically, graphics to be viewed on a screen rather than on paper).
More informationIn 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 informationHYPERSTUDIO TOOLS. THE GRAPHIC TOOL Use this tool to select graphics to edit. SPRAY PAINT CAN Scatter lots of tiny dots with this tool.
THE BROWSE TOOL Us it to go through the stack and click on buttons THE BUTTON TOOL Use this tool to select buttons to edit.. RECTANGLE TOOL This tool lets you capture a rectangular area to copy, cut, move,
More information< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationFrontPage. 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 informationCROSSFADE ANIMATION with AFTEREFFECTS
CROSSFADE ANIMATION with AFTEREFFECTS Consider using the Internet as a new presentation medium for photographs. The fluid nature of the medium allows the removal of photography from its present static
More informationBasic Web Page Authoring with Dreamweaver MX2004
Basic Web Page Authoring with Dreamweaver MX2004 Panels and Windows p. 2 Page Properties Page Title p. 4 Background Image/Color p. 4 Add Text p. 5 Line Breaks p. 5 Format Text Size p. 6 Color p. 6 Font
More informationMacromedia - Fireworks TechNotes: How to create transparent Pop-up Menus
Page 1 of 6 Home > Products > Fireworks > Support > TechNote Index How to create transparent Pop-up Menus Pop-up Menus can be structured to have transparent or translucent backgrounds. Modifying the Pop-up
More information2. 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 informationHow 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 informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationBalsamiq manual. Balsamiq Main window. Image 1
1 Balsamiq manual Overview Balsamiq Mockups is a program that is produced by Balsamiq Studios (founded 2008). It is a relatively new program that allow users to create wireframes that feels like hand drawing
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationHOW TO. In this section, you will find. miscellaneous handouts that explain. HOW TO do various things.
In this section, you will find miscellaneous handouts that explain do various things. 140 SAVING Introduction Every time you do something, you should save it on the DESKTOP. Click Save and then click on
More informationCS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 02: Introduction to Photoshop Part 1
CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 02: Introduction to Photoshop Part 1 Upon completion of this lab, you should be able to: Open, create new, save
More informationUsing Dreamweaver to: add background images & colors centering Web page in the browser display modify button links with rollovers or No-Link graphics
Using Dreamweaver to: add background images & colors centering Web page in the browser display modify button links with rollovers or No-Link graphics By James A Watrous Using Dreamweaver to modify Web
More informationCreating a Website Using Weebly.com (July 2012 Update)
Creating a Website Using Weebly.com (July 2012 Update) Weebly.com is a website where anyone with basic word processing skills can create a website at no cost. No special software is required and there
More informationUsing 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 informationFrontPage 98 Quick Guide. Copyright 2000 Peter Pappas. edteck press All rights reserved.
Master web design skills with Microsoft FrontPage 98. This step-by-step guide uses over 40 full color close-up screen shots to clearly explain the fast and easy way to design a web site. Use edteck s QuickGuide
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationAbout Freeway. Freeway s Tools and Palettes
About Freeway The most important thing to appreciate before you start a site in Freeway is how the process works, especially if you have tried other Web publishing software before. Freeway is not an HTML
More informationIntroduction to Dreamweaver CS3
TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout
More informationPiktochart 101 Create your first infographic in 15 minutes
Piktochart 101 Create your first infographic in 15 minutes TABLE OF CONTENTS 01 Getting Started 5 Steps to Creating Your First Infographic in 15 Minutes 1.1 Pick a Template 1.2 Click Create and Start Adding
More informationPaint 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 informationGIMP 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 informationMicrosoft 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 informationNumbers Basics Website:
Website: http://etc.usf.edu/te/ Numbers is Apple's new spreadsheet application. It is installed as part of the iwork suite, which also includes the word processing program Pages and the presentation program
More informationFACULTY AND STAFF COMPUTER FOOTHILL-DE ANZA. Office Graphics
FACULTY AND STAFF COMPUTER TRAINING @ FOOTHILL-DE ANZA Office 2001 Graphics Microsoft Clip Art Introduction Office 2001 wants to be the application that does everything, including Windows! When it comes
More informationDreamweaver CS6. Level 3. Topics Working with Text, List, and tables Working with Images
Level 3 Topics Working with Text, List, and tables Working with Images Changing the Copy/ Paste Prefences in Dreamweaver You can set special paste preferences as default options when using Edit > Paste
More informationTable of Contents. Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe Textpoppers Math Characters and Equations...
Dallas County Community College District Table of Contents Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe... 4 Insert a Web Page... 4 Insert a PDF... 6 Textpoppers... 8 Insert a Text
More informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
More informationStep 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor.
All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step
More informationInDesign ACA Certification Test 50 terms hollymsmith TEACHER
InDesign ACA Certification Test 50 terms hollymsmith TEACHER reccommended use: matching, test, etc You cannot rotate the graphic around its upper-left corner with the Free Transform tool. The content is
More informationThis 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 Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the
More informationSlicing & Image Optimization
Slicing & Image Optimization Why Slicing? We have to take that awesome design you created and have to get it into Dreamweaver somehow, we accomplish this through slicing. What is Slicing? Slicing is essentially
More informationWelcome to Desktop Publishing with InDesign!
Welcome to Desktop Publishing with InDesign! What We ll Cover Today What is InDesign? Preparing a print project Creating a new document InDesign interface Working with layers and links Formatting and managing
More informationHow to Prepare Your Cards for Press Using InDesign
How to Prepare Your Cards for Press Using InDesign This Tutorial is Divided into Sections: 1. What do I Need? What is InDesign? 2. How to start a new document with InDesign (the template explained) 3.
More informationAdobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
More informationDreamweaver Domain 4: Adding Content by Using Dreamweaver CS5
Dreamweaver Domain 4: Adding Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Define a Dreamweaver site. Create,
More informationUsing Dreamweaver To Edit the Campus Template Version MX
Using Dreamweaver To Edit the Campus Template Version MX Tennessee Tech University Clement Hall 215 Dreamweaver is an HTML (Hypertext Markup Language) editor that allows you to create HTML pages. This
More informationSign in and join ADC Newsletters Feedback. Creating your first website Part 2: Creating the page layout
1 of 14 2/14/2008 2:31 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 2: Creating the page layout Jon Varese Adobe
More informationHandout created by Cheryl Tice, Instructional Support for Technology, GST BOCES
Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Intro to FrontPage OVERVIEW: This handout provides a general overview of Microsoft FrontPage. AUDIENCE: All Instructional
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationText Only Version of Lessons
Text Only Version of Lessons Introduction to Lessons Did you realize that creating web page is not much harder than creating word documents? Contrary to what you may believe, you do not need to know HTML,
More informationSedao Ltd. QuickChange PROject. User Manual for QuickChange PROject version 2.1.5
Sedao Ltd QuickChange PROject User Manual for QuickChange PROject version 2.1.5 Contents What is QuickChange PROject?... 2 Simple Artwork Creation... 5 Creating a project... 7 QuickChange PROject Template
More informationCREATING A BANNER IN PHOTOSHOP
CREATING A BANNER IN PHOTOSHOP 1 This tutorial will take you through how to create your own basic banner in Photoshop. We will go: A. Creating a background 1. Launch (Open) Photoshop CS5 The interface
More informationHow 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 informationITEC185. 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 informationIf these steps are not followed precisely as demonstrated in this tutorial, you will not be able to publish your site!
Outline *Viewing Note... 1 Myweb Important Setup Steps... 1 Before you begin... 1 Site Setup this must be done correctly in order to publish your files to the server... 2 Authentication Message... 4 Remove
More informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationAGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials
AGENT123 Full Q&A and Tutorials Table of Contents Website IDX Agent Gallery Step-by-Step Tutorials WEBSITE General 1. How do I log into my website? 2. How do I change the Meta Tags on my website? 3. How
More informationUsing Adobe Contribute 4 A guide for new website authors
Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute
More informationSevere 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 informationAppleWorks Tips & Tricks
DEFAULT FONT Did you know you can set the font and size that AppleWorks will use when you open it on your computer? You can set the font and size that you want your students to use on your classroom computers.
More informationQuick Guide for Photoshop CC Basics April 2016 Training:
Photoshop CC Basics Creating a New File 1. Click File > New 2. Keep Default Photoshop Size selected in the Preset drop-down list. 3. Click OK. Showing Rulers 1. On the Menu bar, click View. 2. Click Rulers.
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationSection 1: How The Internet Works
Dreamweaver for Dummies Jared Covili jcovili@media.utah.edu (801) 585-5667 www.uensd.org/dummies Section 1: How The Internet Works The Basic Process Let's say that you are sitting at your computer, surfing
More informationGIMP TEXT EFFECTS. GIMP is all about IT (Images and Text) OPEN GIMP
GIMP TEXT EFFECTS MAKE TEXT GLOW Text Effects: Glowing Text 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. At
More informationCropping 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 informationUsing 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 informationCreate and edit text. Create the title text First you ll create the title text for the car rental ad.
8 Choose the Pointer tool and click the mask thumbnail in the Layers panel. The Property inspector shows that the mask was applied using its grayscale appearance. The darker pixels in the mask knock out
More informationLogo Editing Video Tutorial
The following is a step by step guide to customising your MetaMorph logo image by replacing the logo text with your own organisation or company's name and logo. In order to utilise the Fireworks Source
More informationThe Fundamentals. Document Basics
3 The Fundamentals Opening a Program... 3 Similarities in All Programs... 3 It's On Now What?...4 Making things easier to see.. 4 Adjusting Text Size.....4 My Computer. 4 Control Panel... 5 Accessibility
More informationPublisher 2007 Creating Flyers and Brochures
MS Publisher 2007 User Guide Publisher 2007 Creating Flyers and Brochures THE NATURE OF DESKTOP PUBLISHING - INTRODUCTION Publisher is a desktop publishing program. You can create publications that
More informationPublisher 2007 Creating Flyers and Brochures
MS Publisher 2007 User Guide Publisher 2007 Creating Flyers and Brochures THE NATURE OF DESKTOP PUBLISHING - INTRODUCTION Publisher is a desktop publishing program. You can create publications that use
More information