ILLUSTRATION BY 123KLAN

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "ILLUSTRATION BY 123KLAN www.123klan.com"

Transcription

1 ILLUSTRATION BY 123KLAN 62 Computer Arts_May 2004

2 Tutorial CREATIVE SUITE WEB DESIGN IN ADOBE CS We show you four different methods for prepping your Web designs, using ImageReady CS, Photoshop CS, Illustrator CS, InDesign CS or GoLive CS If you re a designer, you probably spent your formative years with a box of crayons rather than a calculator. As a result, the arcane machinations of the programming world are something you may have cold sweats about at night, but don t really want to tackle in the waking world. To be fair, no-one expects you to know how to put computer code around the text in a Word document to get the layout you want, so why should you have to worry about HTML tags, styles and other abstract computer code to bring your ideas to the Web? Both Macromedia and Adobe offer complete packages for bringing designs straight from concept to the online world, but with the release of the Creative Suite of products from Adobe, you will be able to sleep more soundly at night. Although no computer program can truly replace a good Web developer with a thorough knowledge of the ins and outs of browser mechanics, these programs can help designers deploy simple sites quickly and accurately. In the following four quick tutorials, you ll learn how to take a completed Web design from a flat image into a completed Web page, ready to be deployed from each of the programs included with Adobe s Creative Suite. INFO Tutorial by Jason Cranford Teague Learn more at ON THE CD Computer Arts_May

3 PART 1 IMAGEREADY CS Use the Web designer s workhorse to quickly carve up and add interactive elements to your design A lthough often overshadowed by its older and more experienced brother Photoshop, ImageReady has several key features that can enable even the inexperienced Web designer to add interactivity to their work. In this tutorial, start with the file Wonderworld_ Comp.psd to use slices to optimise the image for Web display, and also add interactive rollovers to the links before output. While working with the file, notice that slices you manually create (referred to as user slices) are outlined in blue. Around these, outlined in grey, are slices automatically generated to fill the intervening spaces. Although you can select any of the auto-slices, if you make any changes, the auto-slice becomes a user slice. If the slice is not being used for an image, you can enter text into the field that will then be used as either graphic text or, if you check the option underneath, as HTML text that can be easily changed in GoLive. You may also want to set the background colour for the slice. If the slice is an image, you should always include Alt text for the graphic, which is used for accessibility. You can also specify a hypertext link URL and target for the slice, as well as a name used to identify the image for JavaScript. Choose the Slice tool from the Tool palette 1 (press K) and slice your design into rectangular areas. Try to carve out distinct areas, including logos, individual photographs, text areas, and a separate slice for each navigation link. In the Web Content palette, click the slice you 4 want to add a rollover state to (most likely, this will be a navigation link). Now click the Palettes menu (top-right corner of the palette) and choose New Rollover State from the list. Now choose the Slice Select tool from the Tool 2 palette (press O), and select one of the slices you created in step 1. In the Slice panel, choose whether the content of the slice is an Image, No Image (in other words, text) or part of a table, then follow this and the next two steps for all user slices. With the new state selected, make changes to 5 the style of the slice and these will be used to change the links appearance when the user rolls over the link in the final Web page. For each Image slice, use the Optimise palette to 3 set its graphic format: GIF or PNG-8 (images with large areas of flat colour) or JPEG or PNG-24 (photos). Use the 2-Up or 4-Up views to compare the changes you make to the original, until you get the maximum reduction with acceptable appearance. 6 You are now ready to save the optimised image for the Web (File>Save Optimised As...), which works the same as in Photoshop CS and Illustrator CS, shown in steps 4-6 in part 2 (see facing page). 64 Computer Arts_May 2004

4 Tutorial PART 2 PHOTOSHOP CS & ILLUSTRATOR CS Bitmap or vector? It makes no difference when it comes to output for the World Wide Web Although ImageReady CS was designed by Adobe to handle heavy Web design, both Photoshop CS and Illustrator CS include the ability to output directly to create a Web page. To do this, both programs use an identical dialog with most of the same options found in ImageReady, but in a single window. For many designers used to the comfortable environment of their favourite image-editing software, this is more than enough. However, there are a few pitfalls when using this system, the chief of which is that the HTML code generated uses tables to create structure, rather than the preferred Cascading Style Sheets. Although using tables will work to create the layout structure for your Web pages, it s better practice to use CSS instead. In this tutorial, you ll be starting with the file Wonderworld_Comp.psd. It s already sliced up, so we ll take it through the Save For Web process to create a completed HTML page, taking a slight detour along the way to switch over the output to CSS. Remember while working that if you have multiple slices selected, the settings are applied to all of the slices. You can then choose an individual slice and further tweak the settings to tailor that particular slice. Choose File>Save For Web to open the Save 1 For Web dialog which, although it s Powered by ImageReady, is used by both Photoshop CS and Illustrator CS to optimise your design for Web output (similar to steps 2 and 4 in part 1). Choose 2-Up or 4-Up to compare before and after versions. Use the Slice Select tool (a knife with an arrow 2 next to it) to choose a slice in either the second, third or fourth view in the window. You can also zoom in and out to make it easier to choose slices, or even Shift+click to choose multiple slices to process simultaneously. For example, you may want to optimise all of the photographs with the same settings, rather than alter each one individually. 4 Before you save your work in the Save Optimised As dialog, choose Other from the Settings dropdown menu. In the Slices panel, switch to Generate CSS as your option for how slices should be output. Click OK. Meanwhile, back in the Save Optimised As 5 dialog, navigate to where you want the files saved, make sure the format is HTML and Images, Settings are custom (as set in step 4), Slices is set to All Slices and finally click Save. Your design will now be automatically split into all of the relevant constituent files and saved. Alter the Optimisation settings by first choosing 3 one of the basic presets, and then tweaking the values from there. Once you re done, click Save. You can now locate the files on your computer 6 and open the HTML file that was generated in GoLive, and make changes as needed. Computer Arts_May

5 PART 3 FROM INDESIGN CS TO GOLIVE CS Your design may start out for print, but you can still use it to create exciting Web pages A lthough you can t use Adobe InDesign on its own to create a Web page as with ImageReady, Photoshop or Illustrator it does have the unique ability to output all of the content of a printed piece (both text and graphics) to a special PDF file which, when opened in GoLive, can be used to quickly move the print files from one medium to the other. This can greatly reduce the time needed to move from printed page to the screen, and save you a lot of grief when trying to convert file types. Now all you have to do is For this tutorial, open the file Wonderworld_ Comp.indd in InDesign to start the ball rolling... Open the material to be repurposed in InDesign 1 and choose File>Package for GoLive... In the Package Publications for GoLive dialog, enter a name for the folder the elements will be saved in, then Save the files to the folder of your choice. Click Package, and watch in amazement as 4 progress bars fly across the screen detailing the files being generated as a part of the package. Check the folder where you saved the package. You ll find a special PDF file that you can open in GoLive, which contains all of the original document s elements. Before the package is actually output, you need 2 to set how the files are to be created and images optimised. The first panel you ll see shows the General settings, which you can pretty much leave alone if you re using GoLive CS. In GoLive, with the package PDF already open 5 in the Page Items window, start a new Web page. The Page Items window works as a kind of palette holding all of the items, and you can drag and drop them into your Web designs or even columns of text directly. GoLive, for its part, will then lay them out in a Web format. Click the Images button and set how the images 3 in your package should be output. Generally, you ll want to use the Optimised Formatted Images option and enable Automatic Image Conversion. If image quality of your photographs is a concern, increase JPEG Image Quality to High or Maximum. 6 If you re having trouble picking through pieces in the PDF to add to your Web page, switch over to Assets view. This simply lists all of the elements, and you can drag them from there instead. 66 Computer Arts_May 2004

6 Tutorial PART 4 GOLIVE CS Use Smart Tags to save time when you re making changes to your design in Photoshop CS or Illustrator CS M any designers will begin their work in Photoshop, ImageReady or Illustrator, carve up the static composition using slices, and then use the methods presented in parts 1 and 2 of this tutorial to create their Web pages. The problem is, when they go back and make changes to the design in the original composition, they then have to manually update the files in GoLive, which often leads to confusion and, in rare cases, tragedy when pieces get mixed up or lost. GoLive comes to our rescue with Smart Tags. When placed into a Web page, these will automatically monitor Illustrator or Photoshop documents and update the Web page when changes are made to the source file. This is spectacularly helpful if you prefer making your changes to the original image, rather than trying to mess about with HTML. Here, you ll be importing the file Wonderworld_Comp.psd from the CD as the file for your GoLive Smart Tag. Once GoLive is up and running, start a new file 1 and save it. Grab a Smart Tag (either Photoshop for PSDs or Illustrator for AI docs) from the Objects palette and drag it to your new Web page. You can now add multiple Smart Tags or any other content to the page as and when you need it. 4 Once you re finished with saving, you re automatically returned to GoLive with the design in your Web page window. You can click on individual slices in the design to make limited changes, including setting the Alt text or link and target for the slice, or manually entering HTML text. In the Inspector palette, choose the source PSD 2 or AI document by clicking the Folder button next to the Source field, then browse to the file. If you want to edit the optimisation settings for 5 the design used by the Smart Tag, click the edge of the Smart Tag area to select the Smart Tag and then click the Settings button in the Inspector palette. This reopens the Save For Web dialog (see step 3). For the next section, simply follow the Save 3 For Web instructions in part 2 (steps 2-5). The one limitation is you won t be able to set options; you re stuck with a table-based layout. 6 Once you re happy with the overall layout in GoLive, you re ready to preview your design in the browser of your choice (File>Preview In). Make sure you preview your design in as many browsers and on as many different platforms (Windows, Mac, Linux and so on) as you can before you actually go live with it on the Web. Computer Arts_May

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

Hello. What s inside? Ready to build a website?

Hello. What s inside? Ready to build a website? Beginner s guide Hello Ready to build a website? Our easy-to-use software allows to create and customise the style and layout of your site without you having to understand any coding or HTML. In this guide

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

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 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

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

KOMPOZER Web Design Software

KOMPOZER Web Design Software KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Adobe Illustrator CS6. Illustrating Innovative Web Design

Adobe Illustrator CS6. Illustrating Innovative Web Design Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe

More information

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

15 Adding Interactive Slices and Rollovers

15 Adding Interactive Slices and Rollovers 15 Adding Interactive Slices and Rollovers Slices are divisions of an image area that you can define using Adobe Photoshop or Adobe ImageReady. You can animate your slices, link them to URL addresses,

More information

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Sage Accountants Business Cloud EasyEditor Quick Start Guide Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing

More information

manage graphics in Serif PagePlus X5

manage graphics in Serif PagePlus X5 How to manage graphics in Serif PagePlus X5 Serif PagePlus lets you insert pictures from a wide variety of file formats, including bitmaps, vector images, and metafiles, and in several different ways.

More information

ART 170: Web Design 1

ART 170: Web Design 1 Banner Design Project Overview & Objectives Everyone will design a banner for a veterinary clinic. Objective Summary of the Project General objectives for the project in its entirety are: Design a banner

More information

You can make your own layout / theme for your PowerPoint project.

You can make your own layout / theme for your PowerPoint project. About the PowerPoint Intermediate Workshop The purpose of the PowerPoint Intermediate workshop is to inform users more about the design aspect of making presentations. We will build on the skills learned

More information

Sharing Files and Whiteboards

Sharing Files and Whiteboards Your user role in a meeting determines your level of file sharing. The type of files you can share include documents, presentations, and videos. About Sharing Files, page 1 Changing Views in a File or

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Hello. What s inside? Ready to build a website?

Hello. What s inside? Ready to build a website? Beginner s guide Hello Ready to build a website? Our easy-to-use software allows you to create and customise the style and layout of your site without having to understand any coding or HTML. In this guide

More information

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website.

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website. WIX: Building a Website with a Template Choosing a Template First you will need to choose a template from the Create section of the Wix website. To choose a template: 1. Go to wix.com. 2. From the top

More information

Adobe InDesign Creative Cloud

Adobe InDesign Creative Cloud Adobe InDesign Creative Cloud Beginning Layout and Design November, 2013 1 General guidelines InDesign creates links to media rather than copies so -Keep all text and graphics in one folder -Save the InDesign

More information

QUICK REFERENCE: ADOBE ILLUSTRATOR CS2 AND CS3 SECTION 1: CS3 TOOL BOX: PAGE 2 SECTION 2: CS2 TOOL BOX: PAGE 11

QUICK REFERENCE: ADOBE ILLUSTRATOR CS2 AND CS3 SECTION 1: CS3 TOOL BOX: PAGE 2 SECTION 2: CS2 TOOL BOX: PAGE 11 QUICK REFERENCE, ADOBE ILLUSTRATOR, PAGE 1 QUICK REFERENCE: ADOBE ILLUSTRATOR CS2 AND CS3 CS2 SECTION 1: CS3 TOOL BOX: PAGE 2 SECTION 2: CS2 TOOL BOX: PAGE 11 SECTION 3: GENERAL CONCEPTS: PAGE 14 SELECTING

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

ACADEMIC TECHNOLOGY SUPPORT

ACADEMIC TECHNOLOGY SUPPORT ACADEMIC TECHNOLOGY SUPPORT Adobe Photoshop Introduction Part 1 (Basics- Image Manipulation) ats@etsu.edu 439-8611 www.etsu.edu/ats Table of Contents: Overview... 1 Objectives... 1 Basic Graphic Terminology...

More information

Customizing your Blackboard Course

Customizing your Blackboard Course Customizing your Blackboard Course Changing the visual appearance Menu Buttons Changing your course buttons can add a splash of color to your course and make it more visually appealing to your students.

More information

Google Sites: Creating, editing, and sharing a site

Google Sites: Creating, editing, and sharing a site Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly

More information

Print Services User Guide

Print Services User Guide Print Services User Guide Understanding Artwork for Print 1 Preferred Formats: Preferred formats should contain only vector-based graphics and text, and/or high-resolution images. Low resolution images

More information

Adobe Illustrator CS5 Part 1: Introduction to Illustrator

Adobe Illustrator CS5 Part 1: Introduction to Illustrator CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Illustrator CS5 Part 1: Introduction to Illustrator Summer 2011, Version 1.0 Table of Contents Introduction...2 Downloading

More information

We hold these truths to be self-evident... 3. Fireworks can create CSS. However, see article 2 for clarification.

We hold these truths to be self-evident... 3. Fireworks can create CSS. However, see article 2 for clarification. We hold these truths to be self-evident... 1. Fireworks is a DESIGN program. 2. While Fireworks can design a website or interface, it should not be used for live websites only prototypes and presentations.

More information

DESIGN GUIDELINES FOR GENER8 WEBSITES

DESIGN GUIDELINES FOR GENER8 WEBSITES ONLINE COMMUNICATION SERVICES FACTSHEET - DESIGN Created by: Mark Selan Version 1.1 Date Last Modified: April 2008 DESIGN GUIDELINES FOR GENER8 WEBSITES The purpose of this document is to provide Online

More information

Creating Webpages in Dreamweaver MX for PC

Creating Webpages in Dreamweaver MX for PC Creating Webpages in Dreamweaver MX for PC Getting Started Before you can create a webpage you need to think about where the page will be stored both locally (i.e., hard drive, CD, disk) and remotely (i.e.,

More information

Working with the Ektron Content Management System

Working with the Ektron Content Management System Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e

More information

Creating Hyperlinks & Buttons InDesign CS6

Creating Hyperlinks & Buttons InDesign CS6 Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,

More information

PaperlessPrinter. Version 3.0. User s Manual

PaperlessPrinter. Version 3.0. User s Manual Version 3.0 User s Manual The User s Manual is Copyright 2003 RAREFIND ENGINEERING INNOVATIONS All Rights Reserved. 1 of 77 Table of Contents 1. 2. 3. 4. 5. Overview...3 Introduction...3 Installation...4

More information

Why use Illustrator? Getting Started. Use Photoshop For: Use Illustrator For:

Why use Illustrator? Getting Started. Use Photoshop For: Use Illustrator For: Why use Illustrator? made of pixels made of vector shapes Adobe Illustrator is the brother of the more famous Photoshop. Like Photoshop it is a program intended for graphics, but Illustrator is vector

More information

Layout Tutorial. Getting Started

Layout Tutorial. Getting Started Getting Started Layout Tutorial This tutorial will explain how create a layout template, send views to a layout page, then save the document in PDF format. In this tutorial you will learn about: Creating

More information

Texas Woman s University RedDot Webspinner s Manual Revised 7/23/2015. webteam@twu.edu

Texas Woman s University RedDot Webspinner s Manual Revised 7/23/2015. webteam@twu.edu Texas Woman s University RedDot Webspinner s Manual Revised 7/23/2015 webteam@twu.edu 1 Contents CONNECTING TO YOUR SITE... 3 MAIN MENU... 4 REPEATED CONTENT AREAS... 4 OPENING PAGE LAYOUTS AND EXISTING

More information

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013 INPUT OUTPUT 08 / IMAGE QUALITY & VIEWING In this section we will cover common image file formats you are likely to come across and examine image quality in terms of resolution and bit depth. We will cover

More information

ACE: Dreamweaver CC Exam Guide

ACE: Dreamweaver CC Exam Guide Adobe Training Services Exam Guide ACE: Dreamweaver CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations Creating Interactive Documents with PDFs and SWFs Adapted from Chris Converse, http://www.codifydesign.com/ Laurie Burruss laurie@lynda.com Pasadena City College Dec 9 3 pm Lynda.com > InDesign CS5 Tutorials

More information

What s New in Adobe Fireworks CS4

What s New in Adobe Fireworks CS4 What s New in Adobe Fireworks CS4 UITS - IT Training and Education About IT Training & Education The University Information Technology Services (UITS) IT Training & Education program at Indiana University

More information

Create an interactive syllabus for your students

Create an interactive syllabus for your students Step-by-Step Guide Create an interactive syllabus for your students In a world of instant messaging and social media, many instructors find the traditional text and paper approach to publishing a course

More information

LITE TUTORIAL. Trinity Innovations 2010 All Rights Reserved.

LITE TUTORIAL. Trinity Innovations 2010 All Rights Reserved. LITE TUTORIAL Trinity Innovations 2010 All Rights Reserved www.3dissue.com INTRODUCTION: Converting your press ready PDFs into digital publications After installing 3D Issue Lite, click on the 3D Issue

More information

Content Manager User Guide Information Technology Web Services

Content Manager User Guide Information Technology Web Services Content Manager User Guide Information Technology Web Services The login information in this guide is for training purposes only in a test environment. The login information will change and be redistributed

More information

Using MindManager 14

Using MindManager 14 Using MindManager 14 Susi Peacock, Graeme Ferris, Susie Beasley, Matt Sanders and Lindesay Irvine Version 4 September 2014 2011 Queen Margaret University 1. Navigating MindManager 14... 3 Tool Bars and

More information

HOW Interactive Design Conference 2013

HOW Interactive Design Conference 2013 HOW Interactive Design Conference 2013 Photoshop to HTML Chris Converse Use this QR code to get the mobile schedule for this conference. Get session and speaker info, lunch ideas, and links for getting

More information

Cascade Content Management System Training

Cascade Content Management System Training Cascade Content Management System Training 2 3 HOW TO LOGIN 1. Visit cms.unomaha.edu 2. Using your NetID and password, login in here. THE DASHBOARD Here is an example of the dashboard: CASCADE CONTENT

More information

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive

More information

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130 UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS Silva Introduction to Silva Document No. IS-130 Contents What is Silva?... 1 Requesting a website / Web page(s) in Silva 1 Building the site and making

More information

Creating a Digital Signature for Fillable PDF Forms

Creating a Digital Signature for Fillable PDF Forms Creating a Digital Signature for Fillable PDF Forms If you have a smart-phone or another way to get a digital image of your signature on your computer, such as a scanner or emailing from a copier, and

More information

Adobe Certified Associate

Adobe Certified Associate Adobe Certified Associate Dreamweaver CS6 Study Guide Sample Items SELECTED RESPONSE EXAMPLES DW.1.1.4 Which two issues should be considered when designing a website for a restaurant? (Choose two.) A.

More information

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL

More information

KB COPY CENTRE. RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ. Telephone: 0131 6505001

KB COPY CENTRE. RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ. Telephone: 0131 6505001 KB COPY CENTRE RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ Telephone: 0131 6505001 Email: kbcopy@ed.ac.uk martin.byrne@ed.ac.uk colin.doherty@ed.ac.uk Step 1. Set up page orientation

More information

ITP 101 Project 3 - Dreamweaver

ITP 101 Project 3 - Dreamweaver ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with

More information

Adobe Dreamweaver - Basic Web Page Tutorial

Adobe Dreamweaver - Basic Web Page Tutorial Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized

More information

Audiobook Builder Help

Audiobook Builder Help Getting Started 3 Introduction 3 The Basics 4 Creating Your First Project 6 Setting Up Your Project s Cover 8 Importing Your Project Files 10 Building Your Project 15 Tips 17 Creating a Project 19 Working

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)

More information

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word

More information

Chapter 12 Creating Web Pages

Chapter 12 Creating Web Pages Getting Started Guide Chapter 12 Creating Web Pages Saving Documents as HTML Files This PDF is designed to be read onscreen, two pages at a time. If you want to print a copy, your PDF viewer should have

More information

Using FileMaker Pro with Microsoft Office

Using FileMaker Pro with Microsoft Office Hands-on Guide Using FileMaker Pro with Microsoft Office Making FileMaker Pro Your Office Companion page 1 Table of Contents Introduction... 3 Before You Get Started... 4 Sharing Data between FileMaker

More information

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

SiteBuilder User Guide

SiteBuilder User Guide SiteBuilder User Guide Page 1 of 41 SiteBuilder Manual Table of contents SiteBuilder Manual... 2 Table of contents... 2 What is SiteBuilder?... 4 Tips for building a great site... 4 Getting started...

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades. 28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML

More information

14.1 Scanning photographs

14.1 Scanning photographs 14.1 Scanning photographs What is scanning and why is it useful? A scanner is like a photocopy machine. It makes copies of photos and documents, but instead of creating another piece of paper, it creates

More information

Using HTML5 Pack for ADOBE ILLUSTRATOR CS5

Using HTML5 Pack for ADOBE ILLUSTRATOR CS5 Using HTML5 Pack for ADOBE ILLUSTRATOR CS5 ii Contents Chapter 1: Parameterized SVG.....................................................................................................1 Multi-screen SVG.......................................................................................................4

More information

m ac romed ia Fl a s h Curriculum Guide

m ac romed ia Fl a s h Curriculum Guide m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks

More information

ios App for Mobile Website! Documentation!

ios App for Mobile Website! Documentation! ios App for Mobile Website Documentation What is IOS App for Mobile Website? IOS App for Mobile Website allows you to run any website inside it and if that website is responsive or mobile compatible, you

More information

Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager

Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager Beginning Dreamweaver Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager ce-dennis@wiu.edu Malpass Library 637 Phone: 309.298.2434 1 Setting

More information

File types There are certain image file types that can be used in a web page. They are:

File types There are certain image file types that can be used in a web page. They are: Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner

More information

NDSU Technology Learning & Media Center

NDSU Technology Learning & Media Center 1 NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Creating a Large Format Poster (Plot) Using PowerPoint 2013 Posters should be designed and created in a manner that best

More information

Web Editing Basics 1 TOPICS

Web Editing Basics 1 TOPICS Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from

More information

Content Author's Reference and Cookbook

Content Author's Reference and Cookbook Sitecore CMS 6.2 Content Author's Reference and Cookbook Rev. 091019 Sitecore CMS 6.2 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents

More information

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title CANAJOHARIE CENTRAL SCHOOL

More information

To be productive in today s graphic s industry, a designer, artist, or. photographer needs to have some basic knowledge of various file

To be productive in today s graphic s industry, a designer, artist, or. photographer needs to have some basic knowledge of various file An Artist s Digital Toolkit Allan Wood, for educational use only Understanding File Formats File Formats To be productive in today s graphic s industry, a designer, artist, or photographer needs to have

More information

Using Camtasia to Record Audio in a PowerPoint Presentation

Using Camtasia to Record Audio in a PowerPoint Presentation NOTE: In order to record audio in a PowerPoint presentation using Camtasia, you must have Camtasia installed on your computer. NOTE: Always plug your headset (or other recording device) in before opening

More information

Digital Marketing EasyEditor Guide Dynamic

Digital Marketing EasyEditor Guide Dynamic Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury

More information

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe

More information

Dynamics CRM for Outlook Basics

Dynamics CRM for Outlook Basics Dynamics CRM for Outlook Basics Microsoft Dynamics CRM April, 2015 Contents Welcome to the CRM for Outlook Basics guide... 1 Meet CRM for Outlook.... 2 A new, but comfortably familiar face................................................................

More information

Creating an Animated Navigation Bar in InDesign*

Creating an Animated Navigation Bar in InDesign* Creating an Animated Navigation Bar in InDesign* *for SWF or FLA export only Here s a digital dilemma: You want to provide navigation controls for readers, but you don t want to take up screen real estate

More information

Content Management System User Guide

Content Management System User Guide CWD Clark Web Development Ltd Content Management System User Guide Version 1.0 1 Introduction... 3 What is a content management system?... 3 Browser requirements... 3 Logging in... 3 Page module... 6 List

More information

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 5216260 or helpdesk@uncp.edu, or visit

More information

Chapter 12 Creating Web Pages

Chapter 12 Creating Web Pages Getting Started Guide Chapter 12 Creating Web Pages Saving Documents as HTML Files Copyright This document is Copyright 2010 2012 by its contributors as listed below. You may distribute it and/or modify

More information

Finding and Opening Documents

Finding and Opening Documents In this chapter Learn how to get around in the Open File dialog box. See how to navigate through drives and folders and display the files in other folders. Learn how to search for a file when you can t

More information

ID Studio. Help. DOC0017 Version 4.0. 2015... Nortech Control Systems Ltd

ID Studio. Help. DOC0017 Version 4.0. 2015... Nortech Control Systems Ltd ID Studio Help DOC0017 Version 4.0 ID Studio Table of Contents Part I Product Overview 1 Part II Installation and Settings 2 1 Installation... 2 2 Settings... 4 Part III Card Printing 6 1 Card Printing...

More information

Dashcode User Guide. (Retired Document)

Dashcode User Guide. (Retired Document) Dashcode User Guide (Retired Document) Contents Introduction to Dashcode User Guide 7 Who Should Read This Document? 7 Organization of This Document 7 Getting and Running Dashcode 8 Reporting Bugs 8 See

More information

Digital photo management using iview MediaPro 3 and Capture One PRO

Digital photo management using iview MediaPro 3 and Capture One PRO Y O U R C O M P L E T E W O R K F L O W S O L U T I O N Digital photo management using iview MediaPro 3 and Capture One PRO How to integrate Phase One s Raw workflow software for color correction and Raw

More information

Basic Web Development @ Fullerton College

Basic Web Development @ Fullerton College Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your

More information

Adobe Certified Expert Program

Adobe Certified Expert Program Adobe Certified Expert Program Product Proficiency Exam Bulletin Adobe Photoshop CS4 Exam # 9A0-094 ACE Certification Checklist The checklist below will help guide you through the process of obtaining

More information

HYPERLINK TO EXISTING FILE

HYPERLINK TO EXISTING FILE PUBLISHER-HYPERLINKS When a hyperlink in Publisher is clicked it can open another Web page, a picture, an email message, or another program. This feature works for documents that will be saved as a PDF

More information

Hands-on Guide. FileMaker Pro. Using FileMaker Pro with Microsoft Office

Hands-on Guide. FileMaker Pro. Using FileMaker Pro with Microsoft Office Hands-on Guide FileMaker Pro Using FileMaker Pro with Microsoft Office Table of Contents Introduction... 3 Before You Get Started... 4 Sharing Data between FileMaker Pro and Microsoft Excel... 5 Drag and

More information

Data Visualization with Google Fusion Tables

Data Visualization with Google Fusion Tables Data Visualization with Google Fusion Tables a.k.a Don t Be Scared. It s Not That Hard. handout created by Brittny Goodsell Spring 2012 britg07@gmail.com Google Fusion Tables. It s just a phrase that means

More information