Macromedia Studio 8 Step-by-Step

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Macromedia Studio 8 Step-by-Step"

Transcription

1 Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 1: Personal Web Site FIGURE 1 Dangerous Frogs Web Site Project 1 2 Web Site Design Document Good plans produce good Web sites Design document derived from plan Uses for the design document Determining the structure of your site Setting document properties for pages Importing necessary graphics and text Formatting the text with appropriate styles Web Site Flowchart Shows relationships among pages Guides navigation through site Indicates content of pages Dangerous Frogs flowchart Immediately shows five pages Reveals that site is dedicated to frogs Project 1 3 Project 1 4 Web Site Storyboards Lay out Web page information Sketches for layout of page Colors that should be used Ideas about content and organization Represent common elements Site navigation Footers, such as contact information Dangerous Frogs has five storyboards Project 1 Lessons Lesson 1: Setting up a Web Site Lesson 2: Adding And Modifying Text On A Web Site Lesson 3: Working with Images Lesson 4: Working with Links Project 1 5 Project 1 6 1

2 Lesson 1 Objectives Create a site definition in Dreamweaver Create a new Web page Set document properties for a Web page Lesson 1 Introduction Requirements specify Web site Requirements for Dangerous Frogs Design document Flowchart Storyboards Beginning construction of Web site Identify document properties; e.g., titles Implement properties with Dreamweaver Project 1 7 Project 1 8 Defining a Local Site FIGURE 2 Design document and flowchart for the Dangerous Frogs Web site Project 1 9 Create a root folder on your hard drive Choose name, such as dangerous_frogs Store all site files in your root folder Create subfolders within root as needed The root folder is your local site Local site mirrors Web site on server Develop and test pages at local site Project 1 10 Creating Pages After defining site, create pages Refer to site flowchart One home page Four content pages Pages are linked after they are generated FIGURE 1-3 Site flowchart for the Dangerous Frogs Web site Project 1 11 Project

3 Giving Your Page a Title Every HTML document should be titled A title identifies a document Example: Dangerous Frogs Where a title is displayed In a browser s title bar As a bookmark name Creating a title Title length is arbitrary Short titles preferred Project 1 13 Specifying a Background Color Web-safe color palette 256 color values based on 8-bit system Located in Page Properties dialog box How to set a color Access Web-safe color palette Enter hexadecimal value or click icon Dangerous Frogs Web site colors Values specified in storyboard Example: homepage is dark green Project 1 14 FIGURE 1-4 Properties defined for the Dangerous Frogs home page Specifying the Default Font Color Background color correlates to text color Example 1: black text reads well on white Example 2: black text reads poorly on green Implication of changing background color Usually means text color should change Exception for Dangerous Frogs Web site Separate colored coordinated background No color clash, no need to change text color Project 1 15 Project 1 16 Specifying Link Colors Four link color types Links: The initial color of a link Normal default browser color is blue Visited links: Color after user click Normal default color is purple Rollover links: Color after pointer passes over Will not change if color is not selected Active links: Color while mouse held down Normal default color is red Change text links in Dangerous Frogs site Lesson 2 Objectives Add content to a Web page Understand Web page structure Format text on a Web page Project 1 17 Project

4 Lesson 2 Objectives (continued) Create unordered and ordered lists Insert special characters and other page elements Use CSS external style sheets Lesson 2 Introduction Learn how to structure and enhance text Bring in text from outside documents Use preset headings Position text Make lists Add a date Insert special characters Format the font face and color Learn to use cascading style sheets Project 1 19 Project 1 20 Structuring and Adding Content to a Page Add prepared content to Dangerous Frogs Use Dreamweaver to format content Specifications located in design documents Two ways to add your own text Type the text Copy and paste text from another source Add nontext elements using Insert bar Edit elements using Property inspector Applying Headings to Text Heading styles specified in design document "Dangerous Frogs: Pretty Poisons Title appearing at top of home page Should be set to Heading 1 style Subsection titles on home page Should be formatted using Heading 2 style Project 1 21 Project 1 22 Viewing Design View and Code View Simultaneously Design view: visual editing mode Code view: shows code; e.g., HTML tags Spilt view: Design and Code view together See Dreamweaver implement your design FIGURE 2-5: Headings indicated on the design document for the Dangerous Frogs Web site Project 1 23 Project

5 FIGURE 2-7: Document window is split view Understanding How Web Pages are Structured The early Web consisted of text only Text still critical at high and low level HTML code structures your Web pages Dreamweaver writes HTML code for you Hidden code implements your design Learning HTML improves understanding of Web site design Project 1 25 Project 1 26 Understanding Page Structure Dreamweaver codes as user acts Example: Open green.htm to see auto code Interpreting HTML in green.htm Line 1: DOCTYPE declaration Indicates the type of HTML your document complies with Line 2: <html> tag Indicates that page display as an HTML document Most page information between <html> and </html> Line 3: <head> tag Contains standard information, such as title and CSS FIGURE 2-8: Code that Dreamweaver creates in a new page Project 1 27 Project 1 28 Understanding Page Structure (continued) Interpreting HTML in green.htm (continued) Line 4: The <meta> tag Provides additional information, such as content type Does not require a separate closing tag Line 5: The <title> tag Indicates the title of the page Text appears in title bar of browser window Lines 8 and 9: All displayed data lies between <body> and </body> Formatting Text Follow specifications in design document Formatting tool: Property inspector Indent paragraphs in Coloration section Use Text Indent and Text Outdent icons Apply boldface to terms with Bold button Add footer for page links and copyright Separate lines with a line break Center the text using Align Center button Project 1 29 Project

6 FIGURE 2-9: Text formatting indicated on the design document for the Dangerous Frogs Web site Project 1 31 Making Lists Lists help organize information Three kinds of preformatted lists Ordered: numbers or letters Unordered: bulleted Definition lists: a term and its definition Two lists in Dangerous Frogs home page Ordered list for survival strategies Brief outline of content on other pages Apply list properties with Property inspector Project 1 32 Changing Font Properties Font properties: type (font), face, size, color Apply to text element using Font menu items Vary properties to show relative importance Font choices may not exist on user device Choices for Dangerous Frogs home page Verdana, Arial, Helvetica, sans serif All site colors listed on Assets panel Apply colors to text from the Assets panel Colors may be added to Asset Panel Project 1 33 Inserting Special Characters and Elements Add copyright symbol (special character ) Set Insert bar to Text category Add symbol from Characters menu Add links for information sharing Set Insert bar to Common Category Open Link dialog box, add address Add an automatically modified date Use date dialog box from Common Category Project 1 34 Using Cascading Style Sheets Apply stylistic rules across Web site Two kinds of cascading style sheets (CSS) Internal: added by Dreamweaver or user Apply (and rename) rule using Style dialog box Add and save rule using new CSS Rule dialog box (frogs.css) External: rules exported to separate file Using external style sheets Attach External Style Sheet links/imports CSS Apply external rule using Style dialog box FIGURE 2-25: New CSS Rule Dialog Box Project 1 35 Project

7 Lesson 3 Objectives Add graphics to a Web page Provide alternative text for images Crop and optimize i images in Dreamweaver FIGURE 2-27: Attach External Sheet Dialog Box Project 1 37 Project 1 38 Lesson 3 Objectives (continued) Open Fireworks from within Dreamweaver to modify an image Align an image on a Web page Create site navigation using an image map Lesson 3 Introduction The role of images in Dangerous Frogs Add visual dimension to document Break up text for easier reading Image related tasks Insert images on a page Size and optimize the images Align the images Position the images on the page Create image maps Project 1 39 Project 1 40 Placing Graphics on the Page Reference image one of two ways: Document-relative reference Path to graphics file relative to HTML document Site-root- relative reference Path to graphics file relative to site root Rule: use document-relative links and paths Migration less troublesome Save file before inserting an image Ornate Horned Frog Image for Dangerous Frogs home page Add ornate_horned.jpg using Insert bar Use document-relative reference Providing Alternative Text for Images The Alt (Alternate) attribute Used when graphics cannot be presented Useful in many circumstances Example: aids visually impaired individuals Dreamweaver and Alt Prompts user to add Alt attribute Property inspector controls alt text for image Project 1 41 Project

8 Editing Images from Within Dreamweaver Use Property inspector to manage images Reduce image file size (via Fireworks) Adjust image brightness or contrast Sharpen image or crop it Image tasks related to Dangerous Frogs Ornate Horned Frog Crop the image according to design specifications Reduce image file size in Fireworks New frog inserted in green.htm Adjust brightness and contrast via Property inspector FIGURE 3-6 Fireworks Optimize Images dialog box Project 1 43 Project 1 44 Sizing Images Add Golden Poison Dart Frog to third page Image must be resized Two ways to resize an image Select image and drag control handles Disadvantage: user s browser must scale image Use image-editing application (Fireworks) Scales image to precisely specified proportions Scales image file to desired size Wrapping Text Around Images Required for images in Dangerous Frogs Home page has the image on right side green.htm and gold.htm have images on left Use Align to wrap text around frog images Multiline text can wrap left or right only Use Left or Right options in Dangerous Frogs Text wraps too tightly when Align is used Adjust margin using Property inspector Project 1 45 Project 1 46 Creating Image Maps Hotspot: region with clickable hyperlink Image map: image containing hotspot(s) Create image map with Property inspector Image maps in Dangerous Frogs Navigation bar (series of frog images at top) Hotspots for Navigation bar are rectangular Add image map to all pages Use copy and paste techniques Project 1 47 FIGURE 3-13 Home hotspot on the frognav Image map Project

9 Lesson 4 Objectives Create a hyperlink to another page in your site Create a hyperlink to another site Use a hyperlink to open content in a new browser window Create a hyperlink to a named anchor Lesson 4 Introduction A link in HTML has two parts Path to the target file (or URL) Text or graphic that serves as a clickable link Events following user click of a link Browser uses path to jump to linked document Link path may display in status area of browser Main lesson tasks: creating text links Some links will move visitors to new pages Some links will move visitor to position in page Project 1 49 Project 1 50 Creating Hyperlinks Hyperlink: jumps user to other documents Documents may be internal or external to site Correct path must be supplied to browser Three types of paths can be used Site-root-relative paths Absolute paths Document-relative paths Dangerous Frogs task: add link to footer Project 1 51 FIGURE 4-1 Property inspector, showing an URL link Project 1 52 Displaying Linked Content in a New Browser Window Two ways to load new page via link Linked page replaces current page (default) Linked page opens in new window Reason for opening page in new window User not led out of your pages Dangerous Frogs task Link to external site will be set to new window Project 1 53 Linking to Named Anchors Named anchor: jump-to point on page Linking to anchors saves scrolling time Dangerous Frogs task Create links from top to coloration sections Named anchors are case-sensitive Use Point to File icon to avoid naming errors Project

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

ITD 210 EXAM 1 STUDY GUIDE

ITD 210 EXAM 1 STUDY GUIDE ITD 210 EXAM 1 STUDY GUIDE FINAL EXAM: ADOBE WEB COMMUNICATION USING DREAMWEAVER CS3 OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website.

More information

Micro soft Expression Web 4

Micro soft Expression Web 4 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open

More information

Dreamweaver Domain 1: Setting Project Requirements

Dreamweaver Domain 1: Setting Project Requirements Dreamweaver Domain 1: Setting Project Requirements TRUE/FALSE 1. A new work using copyrighted work can be copyrightable in and of itself, but it must differ sufficiently from the original or it must contain

More information

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

More information

Dreamweaver Tutorials Basic Photo Editing for the Web using Adobe (Macromedia) Fireworks

Dreamweaver Tutorials Basic Photo Editing for the Web using Adobe (Macromedia) Fireworks Dreamweaver Tutorials Basic Photo Editing for the Web using Adobe (Macromedia) Fireworks This tutorial will explain the fundamentals of how to edit a photo with Adobe (Macromedia) Fireworks for use on

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

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

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

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Create your Web page in layout view Insert Flash Text and Flash Button objects

More information

Dreamweaver 8 Basics

Dreamweaver 8 Basics Dreamweaver 8 Basics Software: Dreamweaver 8 Platform: Mac/PC Overview Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up the development process

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

Web Design. Links and Navigation

Web Design. Links and Navigation Web Design Links and Navigation Web Design Link Terms HTTP, FTP, Hyperlink, Email Links, Anchor HTTP (HyperText Transfer Protocol) - The most common link type and allows the user to connect to any page

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

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *

Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called

More information

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

How to create and edit a CSS rule

How to create and edit a CSS rule Adobe Dreamweaver CS6 Project 1 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to

More information

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a

More information

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver Dreamweaver Introduction -- Creating Web Pages with Dreamweaver This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a webpage including creating tables, inserting

More information

ECDL / ICDL Web Editing Syllabus Version 2.0

ECDL / ICDL Web Editing Syllabus Version 2.0 ECDL / ICDL Web Editing Syllabus Version 2.0 Purpose This document details the syllabus for ECDL / ICDL Web Editing. The syllabus describes, through learning outcomes, the knowledge and skills that a candidate

More information

Dreamweaver Domain 2: Planning Site Design and Page Layout

Dreamweaver Domain 2: Planning Site Design and Page Layout Dreamweaver Domain 2: Planning Site Design and Page Layout Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Identify best practices for designing

More information

II. Creating Your Website

II. Creating Your Website II. Creating Your Website In this part of Dazzle the Web with Dynamic Dreamweaver, we will learn the following skills: 1. Define a website 2. Create our home page 3. Add content to the home page 4. Format

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

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

Your Personal Homepage

Your Personal Homepage Your Personal Homepage You can use your Personal Homepage to share information about yourself, something that interests you, or a course topic. Your classmates can view your home page from the Classlist

More information

Using the Text Editor in the Pressero System

Using the Text Editor in the Pressero System Using the Text Editor in the Pressero System Updated 5-15-11 Table of Contents About The Editor... 2 Toolbars... 3 Toolbar Buttons... 4 Formatting Text Appearance... 4 Formatting Paragraphs & Lists...

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

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

Guide to the Text Editor. *Note: Compliance Assist may not use every feature described.

Guide to the Text Editor. *Note: Compliance Assist may not use every feature described. *Note: Compliance Assist may not use every feature described. Table of Contents 1.1: Toolbar Buttons...3 1.1.1: Miscellaneous Buttons...3 1.1.2: Inserting Elements...4 1.1.3: Formatting Text Appearance...5

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

Dreamweaver Tutorial: Adding Text and Images. Dreamweaver Tutorial: Adding Text and Images. Starting up

Dreamweaver Tutorial: Adding Text and Images. Dreamweaver Tutorial: Adding Text and Images. Starting up Dreamweaver Tutorial: Adding Text and Images What you?ll learn in this Dreamweaver Tutorial: Adding text and images This tutorial provides you with a foundation for working with Adobe Dreamweaver typography.

More information

Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Below is the toolbar for the Rich Text Editor on the SharePoint Portal. Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4.

More information

Page 1 of 5. Dreamweaver CC Course Outline

Page 1 of 5. Dreamweaver CC Course Outline Page 1 of 5 Dreamweaver CC Course Outline Dreamweaver CC Course Outline Introduction to The Basics Web Browsers What is HTML? Browser incompatibilities Nesting tags Duration: 4 Days Related Courses: PHP

More information

Simulations or Question & Answers. First 10

Simulations or Question & Answers. First 10 Simulations or Question & Answers. First 10 1. Q. Describe the Elements of Dreamweaver? A. * document bar * menu bar * title bar * files panel *assets panel 2. Q. Change the dimensions of an AP element?

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

Introduction to Drupal 6

Introduction to Drupal 6 Ready Reference 063014 Introduction Introduction to Drupal 6 This page provides instructions for using the Drupal Web Content Management System. Drupal makes publishing content relatively easy and allows

More information

Dreamweaver - Formatting your page with CSS

Dreamweaver - Formatting your page with CSS Dreamweaver - Formatting your page with CSS Creating your first website Part 4: Formatting your page with CSS Now I ll show you how to format text on your page using cascading style sheets (CSS). Learn

More information

Web Design - Css Layout (Page 1)

Web Design - Css Layout (Page 1) Web Design - Css Layout (Page 1) A CSS layout is made up of a set of nested div tags (rectangular containers), as seen below. We will give each div tag an ID so that we can target it with a CSS style of

More information

Dreamweaver Help: common functions and operations

Dreamweaver Help: common functions and operations Dreamweaver Help: common functions and operations To learn about Dreamweaver CS6 environment view YouTube video: https://www.youtube.com/watch?v=dczjfrgyms0 Setting up Dreamweaver Preferences By default,

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

Adobe Dreamweaver CS4: Learning the Tools

Adobe Dreamweaver CS4: Learning the Tools Adobe Dreamweaver CS4: 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 information

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...

More information

Chapter 3: The Schoolwires Editor

Chapter 3: The Schoolwires Editor : The Schoolwires Editor By the end of this chapter, you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages.

More information

How to Build a SharePoint Website

How to Build a SharePoint Website How to Build a SharePoint Website Beginners Guide to SharePoint Overview: 1. Introduction 2. Access your SharePoint Site 3. Edit Your Home Page 4. Working With Text 5. Inserting Pictures 6. Making Tables

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

Dreamweaver CS6 Basics

Dreamweaver CS6 Basics Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a

More information

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

More information

Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally.

Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode

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

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

Dreamweaver MX Tutorials

Dreamweaver MX Tutorials Dreamweaver MX Tutorials macromedia Trademarks Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware

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

Drupal Tutorial Editing the Vision and Security Technology (VAST) Website

Drupal Tutorial Editing the Vision and Security Technology (VAST) Website Drupal Tutorial Editing the Vision and Security Technology (VAST) Website How to use the Drupal content management system to edit the Vision and Security Technology (VAST) website. Note: This tutorial

More information

Dreamweaver CS6 Manual

Dreamweaver CS6 Manual Dreamweaver CS6 Manual Joan Weeks SLIS Computer Labs Mgr. March 2013 Topic 1 What is Dreamweaver CS6? Dreamweaver CS6 is a complete website development tool that gives you the ability to create multiple

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Dreamweaver CS3 THE MISSING MANUAL David Sawyer McFarland POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction 1 Part

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

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

HTML Editor Contents. User Guide Updated August 22, 2008

HTML Editor Contents. User Guide Updated August 22, 2008 HTML Editor 8.3.0 User Guide Updated August 22, 2008 Contents About this guide Audience Related guides HTML Editor Overview Accessing the HTML Editor HTML Editor tabs HTML Editor Views HTML Editor Icons

More information

Using econtentmanager s ewebeditpro Editor

Using econtentmanager s ewebeditpro Editor Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Creating a Web Presentation

Creating a Web Presentation 9.1 LESSON 9 Creating a Web Presentation After completing this lesson, you will be able to: Create an agenda slide or home page. Create a hyperlink to a slide. Create a Web presentation with the AutoContent

More information

Tables. Miscellaneous. Tips

Tables. Miscellaneous. Tips Getting Started Definitions Screen layout Views Create a web using the web wizard Create a web page from a template Report view Open a web Save a web Page Properties Text General properties Themes Removing

More information

Inspiration Quick Start Tutorial

Inspiration Quick Start Tutorial Inspiration Quick Start Tutorial This tutorial is a great starting point for learning how to use Inspiration. Please plan on about 45 minutes from start to finish. If you re new to Inspiration and like

More information

HTML Chapter 3. Working with links

HTML Chapter 3. Working with links HTML Chapter 3 Working with links Chapter 3 Project for Chapter 3 Pasta Divine Website Pages 91-132 Apply Your Knowledge Pages 134-135 Extend Your Knowledge Pages 135-136 Make It Right Page 137 In The

More information

Dreamweaver CS 5.5. Information Technology Services. Outreach and Distance Learning Technologies. Creating Web Pages with a Template

Dreamweaver CS 5.5. Information Technology Services. Outreach and Distance Learning Technologies. Creating Web Pages with a Template Dreamweaver CS 5.5 Creating Web Pages with a Template Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This document

More information

Website Design Practice Final Exam

Website Design Practice Final Exam Website Design Practice Final Exam Multiple Choice Identify the letter of the choice that best completes the statement or answers the question. 1. is the current standard language used to create Web pages.

More information

Expression Web 4 Tutorial

Expression Web 4 Tutorial Expressions Web 4 Tutorial This is a basic look at the interface and workings of Expression Web. Here is the opening screen. It is divided into five windows which include; 1. A folder window top left 2.

More information

Word 2007/2010 Level II Styles

Word 2007/2010 Level II Styles Word 2007/2010 Level II Styles A style is a set of formatting characteristics, such as font name, size, color, paragraph alignment and spacing. Some styles are automatically included in your document in

More information

Editing the Main Template Using Microsoft Front Page

Editing the Main Template Using Microsoft Front Page Editing the Main Template Using Microsoft Front Page This is the Solutions for Your Life main template. Below you will find information on how to edit each section. The first thing to realize about Front

More information

SharePoint Basic Editing. Text. Creating List

SharePoint Basic Editing. Text. Creating List Text Putting Text on the Page 1. Entering text on the web page is just like typing in a word processing document. Lines will wrap within a paragraph. 2. Enter = Paragraph Break (leaves a blank line) 3.

More information

Basic Instructions for Using the HISD Word Template

Basic Instructions for Using the HISD Word Template Houston Independent School District Basic Instructions for Using the HISD Word Template Updated June 2014 Download the Microsoft Word Template HISD_One-Page-Template-ENG.dotx can be downloaded from the

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

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

Creating a Web Site with Adobe Dreamweaver

Creating a Web Site with Adobe Dreamweaver Creating a Web Site with Adobe Dreamweaver This tutorial will teach you how to: 1. Create a new web site using Adobe Dreamweaver 2. Create a new webpage using the Dreamweaver editor 3. Create numbered

More information

DREAMWEAVER 2 Path Structure

DREAMWEAVER 2 Path Structure DREAMWEAVER 2 Path Structure Tip #1: Always save a new document to your root folder before creating your links. SO IMPORTANT! Save the file immediately before you do anything. Saving the file creates the

More information

Creating and a Web Page HTML5 and CSS

Creating and a Web Page HTML5 and CSS Preface viii CHAPTER TWO Creating and a Web Page HTML5 and CSS Using Inline Objectives HTML 33 CHAPTER ONE Introduction HTML 34 Introduction to HTML, XHTML, Project Rock Climbing Fun Web Page HTML 34 and

More information

Introduction to Macromedia Dreamweaver MX

Introduction to Macromedia Dreamweaver MX Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver

More information

One of the most important features of Web graphics is the ability to link to other pages using Image Maps.

One of the most important features of Web graphics is the ability to link to other pages using Image Maps. LESSON 6: IMAGE MAPS AND SLICING OBJECTIVES By the end of this lesson you will be able to: create and edit links copy graphics to URL objects make URL link choices understand Slicing export different aspects

More information

Creating Web Pages with Dreamweaver CS 6 and CSS

Creating Web Pages with Dreamweaver CS 6 and CSS Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding

More information

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver

More information

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/27/2008 Contents Before you start with Dreamweaver....

More information

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen

More information

Images Inserting into Dreamweaver and Resizing

Images Inserting into Dreamweaver and Resizing Outline Photos must be resized prior to being posted on a website!... 1 Insert Images into a Dreamweaver Page... 1 View Properties Window after inserting images... 2 Link image to a website or document...

More information

New characteristics of Office 2007 software

New characteristics of Office 2007 software New characteristics of Office 2007 software Table of Contents p. 2 Office Button p. 2 Quick Access Toolbar p. 2 Close a Document p. 2 Print Preview p. 2 Help button p. 3 Ribbons p. 4 Some Common Functions

More information

SKILL SET 1 BASICS...

SKILL SET 1 BASICS... ITQ Level 2 Presentation Software Contents SKILL SET 1 BASICS... 9 1 - PRESENTATIONS... 10 2 - CREATING A NEW PRESENTATION... 11 3 - SAVING A PRESENTATION... 13 4 - CLOSING A PRESENTATION... 15 5 - OPENING

More information

Developing Website Using Tools

Developing Website Using Tools 7 Developing Website Using Tools 7.1 INTRODUCTION A number of Software Packages are available in market for creating a website. Among popular softwares are Dreamweaver, Microsoft FrontPage and Flash. These

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

Expression Web Lab Exercises

Expression Web Lab Exercises Expression Web Lab Exercises Expression Web Quick Start Tutorial Heavy Metal Show Car By Aseem Badshah Heavy Metal Show Car Tutorial Page 1 Information in this document, including URL and other Internet

More information

Umbraco v6 Editors Manual

Umbraco v6 Editors Manual Umbraco v6 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

BLACKBOARD 9.1: Text Editor

BLACKBOARD 9.1: Text Editor BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed

More information

Using the Content Management System 05-02-12

Using the Content Management System 05-02-12 Using the Content Management System 05-02-12 Using the Content Management System Introduction 2 Logging In 3 Using the Editor 4 Basic Text Editing 5 Pasting Text 7 Adding Hyperlinks 8 Adding Images 9 Style

More information

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4

Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4 CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...

More information

Chapter 3: Quick Start Tutorial

Chapter 3: Quick Start Tutorial 1 Quick Start Tutorial Chapter 3: Quick Start Tutorial This chapter helps you become acquainted with the workspace, the commands, and the features that you use to create your own website. The step-by-step

More information

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

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 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

Working with Publisher Websites

Working with Publisher Websites Working with Publisher Websites Open your Publisher website file (probably saved in htdocs directory). If you are starting a new one, you will need to open a template which may be revised. Navigating and

More information