CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469)
|
|
- Karin Hoover
- 6 years ago
- Views:
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.
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
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 informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationDreamweaver 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 informationAdobe 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 informationITP 101 Project 2 - Photoshop
ITP 101 Project 2 - Photoshop Project Objectives Learn how to use an image editing application to create digital images. We will use Adobe Photoshop for this project. Project Details To continue the development
More informationCreating 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 informationWeb 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 informationCreating 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 informationDreamweaver 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 informationFigure 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 informationHow 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 informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationbuild 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 informationHow 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 informationMULTIMEDIA 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 informationMULTIMEDIA 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 informationOU 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 informationCascade 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 informationCreating 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 informationSoftChalk 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 informationThe 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 informationDreamweaver 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 informationDreamweaver 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 informationObjective % 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 informationVetstreet 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 informationAdobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
More informationWhat 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 informationBeginners 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 informationMULTIMEDIA 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 informationGoLive 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 informationBuilding TPS Web Pages with Dreamweaver
Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the
More informationDear 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 informationPowerPoint 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 informationThe 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 informationEnterprise 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 informationCreating 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 informationSection 6: Dreamweaver
Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working
More informationCreating 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 informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationDreamweaver 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 informationAbout Freeway. Freeway s Tools and Palettes
About Freeway The most important thing to appreciate before you start a site in Freeway is how the process works, especially if you have tried other Web publishing software before. Freeway is not an HTML
More informationUser 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 informationWelcome 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 informationUser 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 informationKeynote 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 informationUnit 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 informationCreating 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 informationClient 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 informationDesigning 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 informationElectronic Portfolios in the Classroom
Electronic Portfolios in the Classroom What are portfolios? Electronic Portfolios are a creative means of organizing, summarizing, and sharing artifacts, information, and ideas about teaching and/or learning,
More informationTable of Contents. Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe Textpoppers Math Characters and Equations...
Dallas County Community College District Table of Contents Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe... 4 Insert a Web Page... 4 Insert a PDF... 6 Textpoppers... 8 Insert a Text
More information:: 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 informationADOBE 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 informationWeb 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 informationUseful 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 informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationCreating 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 information2. If a window pops up that asks if you want to customize your color settings, click No.
Practice Activity: Adobe Photoshop 7.0 ATTENTION! Before doing this practice activity you must have all of the following materials saved to your USB: runningshoe.gif basketballshoe.gif soccershoe.gif baseballshoe.gif
More information1. 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 informationMicrosoft 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 informationLogin: 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 informationYou 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 informationThis Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...
More informationIntroduction 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 informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationJSN 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 informationFrontPage 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 informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationIT153 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 informationChapter 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 informationBeginning 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 informationAdobe Fireworks CS Essential Techniques
Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally
More informationJoomla! 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 informationBlackboard 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 informationDrupal 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 informationTransitioning 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 informationWebsite 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 informationUW 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 informationProject 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 informationNew 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 informationWhat 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 informationWorking 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 informationAn 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 informationIntroduction 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 informationA 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 informationWEEK 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 informationCreate 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 informationDo 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 informationCreating 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 informationThis Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the
More informationDreamweaver 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 informationProfessional 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 informationHOW 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 informationUnit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage
Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,
More informationEktron 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 informationNew 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 informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More information