CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469)

Size: px
Start display at page:

Download "CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469)"

Transcription

1 CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469) AGENDA: Homework Review: Website Logo (Save As: YourInitials_logo.psd ) Photoshop Lesson 6: Start Midterm Set-Up OBJECTIVE: Set-Up Photoshop Document Measurements and Content Placement TASKS: I. Create New Photoshop Document with Web Measurements (Save As: YourInitials_mockup.psd ) II. Place Logo III. Create Top Navigation (Shape & Text) IV. Create Bottom Navigation Dreamweaver Preamble: The Set-Up - Files, Folders, & Site Definition OBJECTIVE: Learn the basics of organizing and uploading files to a live server TASKS: I. File & Folder Structure Set Up II. Define A Website III. Upload Page to Iris Server via FTP (Save As: index.html ) 1

2 Photoshop Lesson 6: Start Midterm Mock-Up Set-Up OBJECTIVE: Set-Up Photoshop Document Measurements and Content Placement STEPS FOR CREATING A WEBSITE SIMPLIFIED: Brainstorm :: Determine Purpose of Site, Target Audience, Theme, Color Scheme Sketch :: Placement of logo, navigations, images, videos, icons, buttons, etc. Consider :: Fonts, flow of content, usability for site visitor, and call to action Prepare Mock-Ups in Photoshop :: Include images, media placeholders, links colors, etc Prepare Content for Web Production :: Save images, media, & documents in proper location Design A Wireframe :: Skeleton layout of boxes coded in HTML & previewed in a browser Web Design :: Add copy [text, images, media, hyperlinks] and style properties to wireframe Testing :: Alpha Internal Testing Beta Client Testing Website Launch :: All the world may view your content TASKS: I. Create New Photoshop Document with Web Measurements (Save As: YourInitials_mockup.psd ) a. When designing for the web, consider the screen size of MOST users around the world (View 2014 Stats Here). Create a new document :: Width: 1366px Height: 768px Turn on Rulers (Ctrl + R), and ensure the units are pixels (Right-Click Ruler > Choose Pixels) b. Create a New Fill Layer for Your Background: Go to bottom of Layers Panel > Click > Choose Solid Color or Gradient and pick your color of choice c. (If Desired) Create a New Fill Layer Pattern: Go to bottom of Layers Panel > Click > Choose Pattern NOTE: Experiment with Different Patterns and Scale. You may click the cogwheel (SEE BELOW) for different pattern options. You may also select a different Blend Mode and/or Opacity for the Pattern layer to achieve your desired effect. d. ORGANIZE: Place your Solid Color/Gradient plus Pattern Layer (if applicable) inside of a Group Folder: Hold Shift + Select the 2 layers, Click the Layer Options Button > New Group from Layers > Name: BACKGROUND > Click OK e. Save File As: YourInitials_mockup.psd 2

3 II. Place Logo a. Open your logo.psd file in Photoshop Go To File > Open > Browse to your File > Click Open Save for Web > YourInitials_logo.png OR.jpg (if rectangle or square background) b. If you only have one layer in your logo document, skip to step c. If you have more than one layer in your logo document, it is necessary to create a New Group from Layers. Name the group LOGO. c. Move the LOGO Layer to your mockup.psd document: 1. Right-Click the LOGO Layer or LOGO Group > 2. Choose Duplicate Layer or Duplicate Group > 3. Save As: LOGO 4. In Destination Section, next to Document: Choose mockup.psd from the drop-down 5. In the Canvas window, click the mockup.psd tab. Notice your LOGO Layer or Group (Folder) is now in your mockup Photoshop document. d. Ensure your LOGO Layer and Move Tool (V) are selected. Move your LOGO to the desired location. e. Drag guides from the X and Y axis to form a box around your logo: 1. Hover over X axis ruler, Click + Hold Left Mouse Button, Drag Guide down to top of logo. 2. Repeat step for bottom of logo. 3. Hover over Y axis ruler, Click + Hold Left Mouse Button, Drag Guide to left of logo. 4. Repeat step for right of logo f. Create Center Line Guides: 1. Go to Menu Bar > View > New Guide > Orientation: Vertical > Position: 50% 2. Go to Menu Bar > View > New Guide > Orientation: Horizontal > Position: 50% g. Lock Guides: 1. Go to Menu Bar > View > Lock Guides NOTE: To Hide/Show guides, Click Ctrl + ; III. Create Top Navigation (Shape & Text) a. Create Navigation Based on Your Sketches 1. Choose Layout of Navigation Menu 2. Coose Background Color of Menu Text/Buttons (if applicable) 3. Choose Font Style and Color 4. Choose Hover State Font and/or Background Color b. See DEMO for Horizontal menu c. See DEMO for Vertical menu NOTE: You may apply text shadows & outlines to your text, if it strengthens your design. 3

4 GENERAL RULES FOR CREATING NAVIGATION TEXT/BUTTONS IN PHOTOSHOP: 1. Create Original Background Shape (if applicable) 2. Duplicate Background Shape & Change color for Rollover 3. Name the Layers Accordingly: MENUBOX Layer Created First Duplicate of MENUBOX with Rollover Color of Choice 5. Create an Original Text Layer 6. Duplicate Text & Change the color for Rollover 7. Name the Layers Accordingly: HOME Text Layer Created First Duplicate of HOME Text Layer with Rollover Color of Choice 8. Arrange Layers Accordingly: 9. Create A New Group from the ROLLOVER Layers: Step 1: Hold Shift + Highlight HOME ROLLOVER and MENUBOX ROLLOVER Layers Step 2: Click > Layer Options Button + Choose New Group From Layers Step 3: Name the Group: ROLLOVER 4

5 10. Create A New Group from the ROLLOVER Group plus the HOME and MENUBOX Layers: NOTE: Now you should have Two Groups in Your Layers Panel: NAV HOME (on top) and BACKGROUND (on bottom) Step 1: Hold Shift + Highlight - ROLLOVER Group - HOME Text Layer and - MENUBOX Layer Step 2: Click > Layer Options Button + Choose New Group From Layers Step 3: Name the Group: NAV HOME NOTE: You may name this Group anything you wish. I chose this name to :: 1. Indicate the group contains Navigation content 2. To inform me which menu button is contained within this group 11. Duplicate NAV HOME: (Right-Click > Duplicate Group ) 12. RENAME: NAV WORKS and Click OK 13. Choose Move Tool and move NAV WORKS to desired spot 14. Open the NAV- WORKS Group and: a. Click on the HOME Text Layer b. Select the Text Tool (T), Click Cursor WITHIN Existing Text, and Change Home to Works c. Open the ROLLOVER Group d. Click on the HOME ROLLOVER Layer e. Select the Text Tool (T), Click Cursor WITHIN Existing Text, and Change Home to Works 15. Collapse the NAV- WORKS Group and Repeat steps for remaining menu buttons. 16. Save Your File (Ctrl + S) 5

6 IV. Create Bottom Navigation Your top Navigation is typically fancy and appealing to your visitors. Let s call it top shelf. On a typical site, the top menu may have animation, icons, mega drop down menus, etc. The Navigation appearing at the bottom of most websites is the footer navigation menu. It is a practical list of pages you want your visitor to visit. It is your trusty backup if the top shelf is out of one browser s league. In addition to a backup website menu, the footer typically contains copyright information, a business website URL, terms of use, contact info, and more. Today you will complete the following for your footer: 1. A small version of your logo 2. Back up menu with links to your main pages: HOME (ABOUT if applicable) WORKS CONTACT or Copyright 2014 To Create Symbol: MAC Users :: Hold Alt + G, then release Alt PC Users :: Hold Alt (on keypad only), then release Alt 4. iris.nyit.edu/~nyitusername Social Network Buttons may be added by accessing your favorite social media s development tools page. Each site varies. Further instruction will be given next week. 6

7 Dreamweaver Preamble: The Set-Up - Files, Folders, & Site Definition OBJECTIVE: Learn the basics of organizing and uploading files to a live server TASKS: I. File & Folder Structure Set Up Below is a basic file and folder set-up for your website. The top folder public_html is the name required by NYIT s Iris Server to locate your homepage. The code_snippets is where you will save and grab code (shortcuts) for your web projects. The images folder is where ALL of your image assets from your mock-up will be saved. The remaining files are.html. The about, contact, index, skills, and works.html webpages will make up your website. The index.html page = Your Homepage = ALL browsers look for the index.html when visiting a websites URL Address. Type in Notice you arrived to its home 1. In Windows Explorer, Browse to your Student Folder 2. Inside the student folder create a New folder called public_html 3. Open the public_html and create a New folder called code_snippets. 4. Go back inside your public_html folder and create a New folder called images 5. Copy YourInitials_logo.png to your images folder 7

8 II. Define A Website DEFINITION: Define A Site: Establish/reestablish a root folder and file structure within Dreamweaver Defining a site enables Dreamweaver to: organize files based on your root folder, update multiple pages based on your changes, and synchronize your local files with the remote (live) server. STEP 1. Go to Menu Bar > Site > New Site 8

9 STEP 2. Fill in text fields a. Site Name: Name of Your Choice (Does not have to match your root folder name). The Site Name, in this instance, is only used by Dreamweaver to distinguish one site from another. b. Local Site Folder: Click the folder to the right of the text field and browse to your website folder: StudentFolders> YourName > public_html NOTE: Ensure your folder name AND your website name contains NO SPACES or SPECIAL CHARACTERS c. Click Select 9

10 STEP 3. Set-Up your FTP connection a. Locate and click Servers option (in the left column of pop-up window) b. Click the + button located below the Name column 10

11 STEP 4. Fill in the required text fields [FOR PC/WINDOWS]: a. Server Name: iris b. Connect using: FTP c. FTP Address: iris.nyit.edu d. Port: 21 e. Username: SAME AS YOUR NYIT MAIL USER NAME f. Password: SAME AS YOUR NYIT MAIL PASSWORD g. Check Save checkbox (UNCHECK BEFORE LEAVING CLASS) h. Click Test button 11

12 >> SKIP THIS STEP IF YOU HAVE A PC or PHOTOSHOP CS6/CC ON MAC >> STEP 4. [FOR MAC/ADOBE CS3]: Fill in the required text fields a. Access: FTP b. FTP Host: iris.nyit.edu c. Host Directory: public_html/ d. Login: SAME AS YOUR NYIT MAIL USER NAME e. Password: SAME AS YOUR NYIT MAIL PASSWORD f. Check/uncheck Save checkbox (Based on your preference) g. Check Use passive FTP checkbox h. Click Test button 12

13 STEP 5. If the test goes well, the following pop-up message will appear: Dreamweaver connected to your Web server successfully a. Click OK b. Click Save in Basic form window c. Click Save in Site Setup window 13

14 III. Upload Page to Iris Server via FTP a. Create a New HTML 5 Document: 1. File > New > Blank Page > Page Type: HTML > Layout: None > DocType: HTML 5 2. Place Mouse after <title> and before </title>, then Click + highlight default text 3. Type: Your Website Name Home 4. Place Mouse after <body> and before </body>, then Click Left Mouse Button & Hit Return 5. Type: Hello World! 6. Save As: Browse to public_html folder, Save As: index.html 7. File > Preview in Browser > Chrome NOTE: This is a preview of your site in a local browser. Next we re doing it Live!!!! b. Go to Your Local Files Panel (F8 to toggle on/off) c. Click button to Expand view of local and remote files d. In the toolbar, Click Connect to Remote Server (iris) button The remote server (iris) files will appear on the left. Your local (computer) files appear on the right. e. Upload your files to the live server: In local file view, Click public_html folder Go to Files toolbar, Click the up arrow Do not put dependent files on your server (Click No) Do not Update links (if Dreamweaver asks you) Open a browser window and type your new web address (URL): YOUR SITE IS ALIVE! f. View your logo on the live server: 14

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

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

More information

:: MULTIMEDIA TOOLS :: CLASS NOTES

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

More information

Adobe Dreamweaver CS5 Tutorial

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

ADOBE DREAMWEAVER CS4 BASICS

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

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views! Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying

More information

Adobe Dreamweaver CC 17 Tutorial

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

ITP 101 Project 2 - Photoshop

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

More information

Creating and Publishing Faculty Webpages

Creating and Publishing Faculty Webpages Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can

More information

Web Publishing Basics II

Web Publishing Basics II Web Publishing Basics II Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 Create a Site Definition... 3 The Dreamweaver CS4 Interface... 4 Panels are groups of icons

More information

Creating a Website with Publisher 2016

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

More information

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information

More information

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel. Adobe Dreamweaver CS6 Project 3 guide How to create forms You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback, sign a guest book, take

More information

How to lay out a web page with CSS

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

More information

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

build a digital portfolio in WebPlus X4

build a digital portfolio in WebPlus X4 How to build a digital portfolio in WebPlus X4 Get started Open Serif WebPlus and select Start New Site from the Startup Wizard. WebPlus will open a blank website for you. Take a few moments to familiarise

More information

How to Use Serif WebPlus 10

How to Use Serif WebPlus 10 How to Use Serif WebPlus 10 Getting started 1. Open Serif WebPlus and select Start New Site from the Startup Screen 2. WebPlus will start a blank website for you. Take a few moments to familiarise yourself

More information

MULTIMEDIA WEB DESIGN

MULTIMEDIA WEB DESIGN CLASS :: 02 02.02 2018 4 Hours THE AGENDA HOMEWORK 1 REVIEW [ Upload to Comm Arts Server ] :: Completed Questionnaire :: Best Works [Saved to Server] GIF ANIMATION DEMO :: Best Practices for GIF Animations

More information

MULTIMEDIA TOOLS :: CLASS NOTES THE AGENDA

MULTIMEDIA TOOLS :: CLASS NOTES THE AGENDA CLASS :: 05 10.09 2017 3 Hours HOMEWORK [ TURN-IN ] THE AGENDA PHOTOSHOP MOCK-UP PREPARATION :: What is a Photoshop Mock-Up? :: Color Scheme [from paletton.aco file // from Photoshop Swatches ] :: Download

More information

OU EDUCATE TRAINING MANUAL

OU EDUCATE TRAINING MANUAL OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface

More information

Cascade V8.4 Website Content Management for the Site Manager UMSL

Cascade V8.4 Website Content Management for the Site Manager UMSL Cascade V8.4 Website Content Management for the Site Manager UMSL Contents Purpose & How to Use This Guide... 5 Getting Started and Logging In... 5 Login... 5 Dashboard... 5 Notifications... 5 Setting

More information

Creating a Website in Schoolwires

Creating a Website in Schoolwires Creating a Website in Schoolwires Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Navigating to an assigned section... 2 Accessing Site Manager... 2 Section Workspace

More information

SoftChalk 10. Level 1. University Information Technology Services. Learning Technologies, Training, Audiovisual, and Outreach

SoftChalk 10. Level 1. University Information Technology Services. Learning Technologies, Training, Audiovisual, and Outreach SoftChalk 10 Level 1 University Information Technology Services Learning Technologies, Training, Audiovisual, and Outreach Copyright 2018 KSU Division of University Information Technology Services This

More information

The Official E-Portfolio Tutorial Guide

The Official E-Portfolio Tutorial Guide School of Education Last Updated: January 2009 The Official E-Portfolio Tutorial Guide Includes Instructions For: -Setting Up Dreamweaver -Editing Images Using Photoshop -Creating & Inserting Evidence

More information

Dreamweaver MX The Basics

Dreamweaver MX The Basics Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia

More information

Dreamweaver Handout. University of Connecticut Prof. Kent Golden

Dreamweaver Handout. University of Connecticut Prof. Kent Golden Dreamweaver Handout University of Connecticut Prof. Kent Golden Kent@GoldenMultimedia.com www.goldenmultimedia.com Main goal of this handout: To give you the steps needed to create a basic personal website

More information

Objective % Select and utilize tools to design and develop websites.

Objective % Select and utilize tools to design and develop websites. Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret

More information

Vetstreet Web Builder Editor Tool User Guide v2.1. Web Builder. User Guide v2.1

Vetstreet Web Builder Editor Tool User Guide v2.1. Web Builder. User Guide v2.1 Web Builder User Guide v2.1 Contact your Account Manager at (888) 799-8387 or email support@vetstreet.com with questions. Page 1 Index... 1 The Editor Tool... 7 Forgot Your Username or Password?... 7 How

More information

Adobe Dreamweaver CS5/6: Learning the Tools

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

What is EasyWeb?! 3 EasyWeb QuickStart! 4. Publishing Your Website! 10

What is EasyWeb?! 3 EasyWeb QuickStart! 4. Publishing Your Website! 10 What is EasyWeb?! 3 EasyWeb QuickStart! 4 Website List! 6 Toolbar! 6 Inspector, Assets and Widgets! 7 Assets! 8 Widgets! 8 EasyWeb s Web Page Designer! 8 Publishing Your Website! 10 Head and Footer Code!

More information

Beginners Guide to Snippet Master PRO

Beginners Guide to Snippet Master PRO Beginners Guide to Snippet Master PRO This document assumes that Snippet Master has been installed on your site. If not please contact the Bakas IT web team at webreg@bakasit.com.au. Initial Login Screen...

More information

MULTIMEDIA WEB DESIGN

MULTIMEDIA WEB DESIGN CLASS :: 03 02.09 2018 3 Hours THE AGENDA HOMEWORK 2 REVIEW [ Upload to Comm Arts Server ] :: Upload GIF Face assets to Your PSD Folder [ Inside of Folder> Create Gif Face Folder ] GIF ANIMATION :: File

More information

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next. Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection

More information

Building TPS Web Pages with Dreamweaver

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

More information

Dear Candidate, Thank you, Adobe Education

Dear Candidate, Thank you, Adobe Education Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:

More information

PowerPoint 2016 Building a Presentation

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

More information

The Dreamweaver Interface

The Dreamweaver Interface The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going

More information

Enterprise Portal Train the Trainer User Manual WEB PARTS

Enterprise Portal Train the Trainer User Manual WEB PARTS Enterprise Portal Train the Trainer User Manual WEB PARTS Version 1.2.1 Date: January 31, 2012 Table of Contents Table of Contents... 2 1 I Need To... 3 2 Media Web Part... 10 3 Content Editor... 15 4

More information

Creating a Website with Wordpress

Creating a Website with Wordpress Creating a Website with Wordpress Wordpress Fundamentals Version 1.6 Fayette County Public Schools June 28, 2013 Sow-Foong Hedman Technology Web Team Contents What is Wordpress?... 4 Overview... 4 Key

More information

Section 6: Dreamweaver

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

More information

Creating Web Pages with a Template

Creating Web Pages with a Template Creating Web Pages with a Template Adobe Dreamweaver Creative Cloud 2017 University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2017 KSU Division of

More information

Creating Buttons and Pop-up Menus

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

More information

Dreamweaver Template Tutorial - How to create a website from a template

Dreamweaver Template Tutorial - How to create a website from a template Dreamweaver Template Tutorial - How to create a website from a template In this tutorial you will create a website using Dreamweaver s premade templates. You are going to learn how to style them using

More information

About Freeway. Freeway s Tools and Palettes

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

User Guide. Web Intelligence Rich Client. Business Objects 4.1

User Guide. Web Intelligence Rich Client. Business Objects 4.1 User Guide Web Intelligence Rich Client Business Objects 4.1 2 P a g e Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence 4.1... 5 Log into EDDIE...

More information

Welcome to the CP Portal

Welcome to the CP Portal Welcome to the CP Portal Access your school documents from home Launch Internet Explorer and navigate to: https://files.cpcsc.k12.in.us/htcomnet/ Click on Continue to this website (not recommended) Key

More information

User Guide. Chapter 6. Teacher Pages

User Guide. Chapter 6. Teacher Pages User Guide Chapter 6 s Table of Contents Introduction... 5 Tips for s... 6 Pitfalls... 7 Key Information... 8 I. How to add a... 8 II. How to Edit... 10 SharpSchool s WYSIWYG Editor... 11 Publish a...

More information

Keynote 08 Basics Website:

Keynote 08 Basics Website: Website: http://etc.usf.edu/te/ Keynote is Apple's presentation application. Keynote is installed as part of the iwork suite, which also includes the word processing program Pages and the spreadsheet program

More information

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

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

More information

Creating Classroom Websites Using Contribute By Macromedia

Creating Classroom Websites Using Contribute By Macromedia Creating Classroom Websites Using Contribute By Macromedia Revised: 10/7/05 Creating Classroom Websites Page 1 of 22 Table of Contents Getting Started Creating a Connection to your Server Space.. Page

More information

Client Interview. Interview Topics. Goals and Target Audience. Activity 3.1 Worksheet. Client Name:

Client Interview. Interview Topics. Goals and Target Audience. Activity 3.1 Worksheet. Client Name: Activity 3.1 Worksheet Client Interview Team Name: Date: Client Name: Interview Topics Goals and target audience Content Design requirements Delivery requirements Goals and Target Audience Identify three

More information

Designing a Web Page Using MS SharePoint Designer Reference Manual

Designing a Web Page Using MS SharePoint Designer Reference Manual Designing a Web Page Using MS SharePoint Designer 2007 Reference Manual SHAREPOINT DESIGNER 2007 BASICS 1. Opening SharePoint Designer 2007 application - Click start>all Programs>Microsoft Office>Microsoft

More information

Electronic Portfolios in the Classroom

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

Table of Contents. Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe Textpoppers Math Characters and Equations...

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

:: MULTIMEDIA TOOLS :: (2131) :: CLASS NOTES

:: MULTIMEDIA TOOLS :: (2131) :: CLASS NOTES CLASS :: 06 03.04 2016 3 Hours THE AGENDA LOGO CREATION [Adobe Illustrator] :: Text Tool [Creating Outlines] :: Type on Path :: Shapes and Pathfinder :: Pen Tool [DEMO] :: Trace a Simple Illustration/Image

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/16/2011 Contents Before you start with Dreamweaver....

More information

Web Publishing Basics 1

Web Publishing Basics 1 Web Publishing Basics 1 Website Maintenance Essentials Jeff Pankin Information Services and Technology Contents Course Objectives and Your Role As Site Maintainer... 3 Course Objectives... 3 Your Role...

More information

Useful Google Apps for Teaching and Learning

Useful Google Apps for Teaching and Learning Useful Google Apps for Teaching and Learning Centre for Development of Teaching and Learning (CDTL) National University of Singapore email: edtech@groups.nus.edu.sg Table of Contents About the Workshop...

More information

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)

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

Creating Interactive PDF Forms

Creating Interactive PDF Forms Creating Interactive PDF Forms Using Adobe Acrobat X Pro for the Mac University Information Technology Services Training, Outreach, Learning Technologies and Video Production Copyright 2012 KSU Department

More information

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

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

More information

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout

More information

Microsoft FrontPage Practical Session

Microsoft FrontPage Practical Session Ministry of manpower Higher college of technology Department of Information Technology QA Umbrella Workshop 30 th August- 3 rd September 2008 IT Skills Microsoft FrontPage Practical Session Copyright of

More information

Login: Quick Guide for Qualtrics May 2018 Training:

Login:   Quick Guide for Qualtrics May 2018 Training: Qualtrics Basics Creating a New Qualtrics Account Note: Anyone with a Purdue career account can create a Qualtrics account. 1. In a Web browser, navigate to purdue.qualtrics.com. 2. Enter your Purdue Career

More information

You can also search online templates which can be picked based on background themes or based on content needs. Page eleven will explain more.

You can also search online templates which can be picked based on background themes or based on content needs. Page eleven will explain more. Microsoft PowerPoint 2016 Part 1: The Basics Opening PowerPoint Double click on the PowerPoint icon on the desktop. When you first open PowerPoint you will see a list of new presentation themes. You can

More information

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

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

More information

Introduction to Qualtrics

Introduction to Qualtrics Introduction to Qualtrics Copyright 2014, Software Application Training, West Chester University. A member of the Pennsylvania State Systems of Higher Education. No portion of this document may be reproduced

More information

How to set up a local root folder and site structure

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

JSN PageBuilder 3 Configuration Manual Introduction

JSN PageBuilder 3 Configuration Manual Introduction JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user

More information

FrontPage 2000 Tutorial -- Advanced

FrontPage 2000 Tutorial -- Advanced FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right

More information

The figure below shows the Dreamweaver Interface.

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

Dreamweaver Basics Outline

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

IT153 Midterm Study Guide

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

More information

Chapter 2 Using Slide Masters, Styles, and Templates

Chapter 2 Using Slide Masters, Styles, and Templates Impress Guide Chapter 2 Using Slide Masters, Styles, and Templates OpenOffice.org Copyright This document is Copyright 2007 by its contributors as listed in the section titled Authors. You can distribute

More information

Beginning Web Administrator Training

Beginning Web Administrator Training Welcome Beginning Web Administrator Training for School Site and District Staff Welcome Please log on to your computer workstation using your SCUSD login and password Guests use our training login Username:

More information

Adobe Fireworks CS Essential Techniques

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

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual 1 Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several

More information

Blackboard 1: Course Sites

Blackboard 1: Course Sites Blackboard 1: Course Sites This handout outlines the material covered in the first of four workshops on teaching with Blackboard. It will help you begin building your Blackboard course site. You will learn

More information

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme Introduction Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme In this Getting Started Guide, you can follow along as a website is built using the MIT DLC Theme. Whether you

More information

Transitioning Teacher Websites

Transitioning Teacher Websites Transitioning Teacher Websites Google sites is an online web building tool that can be accessed and updated from anywhere there is an internet connection. Here is a brief video introduction of Google sites.

More information

Website Management with the CMS

Website Management with the CMS Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging

More information

UW WEB CONTENT MANAGEMENT SYSTEM (CASCADE SERVER)

UW WEB CONTENT MANAGEMENT SYSTEM (CASCADE SERVER) UW WEB CONTENT MANAGEMENT SYSTEM (CASCADE SERVER) LEVEL 1 (INTRODUCTION) Information Technology Updated February 2018 Presented By: UW Institutional Marketing and IT Client Support Services University

More information

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your

More information

New Website User Manual

New Website User Manual New Website User Manual General Notes 3 How To Login To Your Website And Access Admin Dashboard 4 Adding / Editing Sliders 5 Home Slider 5 School Slider (Same steps for ALL school pages) - Add a Slide

More information

What is OU Campus? Log into OU Campus

What is OU Campus? Log into OU Campus OU Campus v10 Content Providers User Guide This document is designed to provide (level 5) Content Providers with basic information needed to do most tasks. Those needing additional information are encouraged

More information

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

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

More information

An Introduction to. WordPress.com. ICA40311 Certificate IV in Web-Based Technologies Southbank Institute of Technology

An Introduction to. WordPress.com. ICA40311 Certificate IV in Web-Based Technologies Southbank Institute of Technology An Introduction to WordPress.com ICA40311 Certificate IV in Web-Based Technologies Southbank Institute of Technology Acknowledgement: This document was compiled from notes available via the WordPress.com

More information

Introduction to Dreamweaver

Introduction to Dreamweaver COMMUNITY TECHNICAL SUPPORT Introduction to Dreamweaver What is Dreamweaver? Dreamweaver helps you to create Web pages while it codes html (and more) for you. It is located on the bottom tray or in the

More information

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating

More information

WEEK NO. 12 MICROSOFT EXCEL 2007

WEEK NO. 12 MICROSOFT EXCEL 2007 WEEK NO. 12 MICROSOFT EXCEL 2007 LESSONS OVERVIEW: GOODBYE CALCULATORS, HELLO SPREADSHEET! 1. The Excel Environment 2. Starting A Workbook 3. Modifying Columns, Rows, & Cells 4. Working with Worksheets

More information

Create a Contact Sheet of Your Images Design a Picture Package Customize Your Picture Package Layout Resample Your Image...

Create a Contact Sheet of Your Images Design a Picture Package Customize Your Picture Package Layout Resample Your Image... 72 71 Create a Contact Sheet of Your Images................... 158 Design a Picture Package............ 160 73 Customize Your Picture Package Layout.... 162 74 Resample Your Image.................... 164

More information

Do It Yourself Website Editing Training Guide

Do It Yourself Website Editing Training Guide Do It Yourself Website Editing Training Guide Version 3.0 Copyright 2000-2011 Sesame Communications. All Rights Reserved. Table of Contents DIY Overview 3 What pages are editable using the DIY Editing

More information

Creating a Website in Schoolwires Technology Integration Center

Creating a Website in Schoolwires Technology Integration Center Creating a Website in Schoolwires Technology Integration Center Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Accessing Site Manager... 2 Section Workspace Overview...

More information

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

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the

More information

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.

More information

Professional Web Design Tutorial. By Nathan Hernandez

Professional Web Design Tutorial. By Nathan Hernandez Professional Web Design Tutorial By Nathan Hernandez Learning Objectives THE PURPOSE of this tutorial is to allow you to use techniques previously acquired in Adobe Photoshop and apply them to the following:

More information

HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS

HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS GETTING STARTED (LOGIN) 2 SITE MAP (ORGANIZE WEBPAGES) 2 CREATE NEW PAGE 3 REMOVE PAGE 6 SORT PAGES IN CHANNEL 7 MOVE PAGE 8 PAGE PROPERTIES

More information

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

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

More information

Ektron Advanced. Learning Objectives. Getting Started

Ektron Advanced. Learning Objectives. Getting Started Ektron Advanced 1 Learning Objectives This workshop introduces you beyond the basics of Ektron, the USF web content management system that is being used to modify department web pages. This workshop focuses

More information

New website Training:

New website Training: New website Training: Table of Contents 1. Logging in and out of the new site. 2. Edit Content a. How to edit content b. Paragraph types c. Adding links d. Adding an image e. Adding a document f. Saving

More information

Taking Fireworks Template and Applying it to Dreamweaver

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