Web Portfolio Design and Applications

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

Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping

Dreamweaver MX The Basics

Foundation of Web Goal 4: Proficiency in Adobe Dreamweaver CC

Digital Web Design Syllabus/Online Course Plan

PRODUCTION PHASES CHANGES

Mrs. R. Jeanine Ewert Beaverton High School Beaverton, Michigan

DIGITAL ANIMATION AND MULTIMEDIA BS (1 st or 2 nd Semester)

Planning and Designing Your Site p. 109 Design Concepts p. 116 Summary p. 118 Defining Your Site p. 119 The Files Panel p. 119 Accessing Your Remote

MP5: Hypermedia Integration- Dreamweaver

Identify how the use of different browsers and devices affects the look of a webpage. Competencies

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab

Job Aid. Remote Access BAIRS Printing and Saving a Report. Table of Contents

WebDev. Web Design COMBINES A NUMBER OF DISCIPLINES. Web Development Process DESIGN DEVELOPMENT CONTENT MULTIMEDIA

II.1 Running a Crystal Report from Infoview

ver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^

Adobe Web Authoring using Adobe Dreamweaver Exam and objectives

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the

Interactive Media CTAG Alignments

Entry Level Assessment Blueprint Web Design

Art170. Final Project Planning

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

Facilities Manager Local Device Tracking

Contents. Acknowledgments

MP4: Hypermedia Integration- Dreamweaver

Interactive Art. Nathan McCrum Union University

WEB APPLICATION DEVELOPMENT. How the Web Works

1D CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist Apr 2018

BUILDING A TOWN WEBSITE Teacher s Guide

Unit 2 Web portfolios using Adobe Dreamweaver CS4

Course Syllabus. Course Title. Who should attend? Course Description. Adobe Dreamweaver CC 2014

User Guide Version 4.3

Table of Contents. Preface...iii. INTRODUCTION 1. Introduction to M ultimedia and Web Design 1. ILLUSTRATOR CS6 1. Introducing Illustrator CS6 17

SharePoint Designer Customizing and Branding SharePoint 2010 and Office 365

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

HALTON SKILLS COMPETITION WEBSITE DEVELOPMENT SCOPE SECONDARY LEVEL Coordinator: Ron Boyd,

Jim Jackson II Ian Gilman

Infinite Device Management

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1

The 4D Web Companion. David Adams

CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist. ( Add-On ) 16 Sep 2018

Assessed Project 1: Magnetic North. 5: Working to a Brief. 64: Motion Graphics and Compositing Video. 20 credits 20 credits

Mississippi Department of Education Office of Curriculum and Instruction

Step 1 - Learning & Discovery

CompuScholar, Inc. Alignment to Utah's Web Development I Standards

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

CURRICULUM MAPPING FORM

Working with Images and Multimedia

New Media Production week 3

How to lay out a web page with CSS

Web Design: Business Site Project

How to Guide. Create a Data Set. Version: Release 3.0

Santa Monica College. GRAPHIC DESIGN 65: Web Design I Course Syllabus

SLO to ILO Alignment Reports

Website Development (WEB) Lab Exercises

Graphic Communications Course Descriptions

Multimedia Design and Authoring

documentation Editing Files and Folders

Website Designing Training

TERMS OF REFERENCE National Institutional Consultancy UNICEF IN TURKEY

Web Page, Digital/Multimedia and Information Resources Design CIP Task Grid

Design Importer User Guide

Test Code: 8095 / Version 1

Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of

Contents. Contents iii

Seema Sirpal Delhi University Computer Centre

SMK SEKSYEN 5,WANGSAMAJU KUALA LUMPUR FORM

Shankersinh Vaghela Bapu Institue of Technology

11 Database Management

INSTITUTE OF TECHNOLOGY AND ADVANCED LEARNING SCHOOL OF APPLIED TECHNOLOGY COURSE OUTLINE ACADEMIC YEAR 2012/2013

WHAT IS BFA NEW MEDIA?

Tennessee. Trade & Industrial Course Web Page Design II - Site Designer Standards. A Guide to Web Development Using Adobe Dreamweaver CS3 2009

Introduction to Game Design

Introduction to Dreamweaver CS4:

Sky Retail Partners May Feb Director of Web Creative, Manager of Online Marketing and Business Development Subsidiary

Simple sets of data can be expressed in a simple table, much like a

Measuring What Matters in. Job Ready Assessment Blueprint. Web Design. Test Code: 2750 / Version: 01

Business Education Program Understandings

Entry Level Assessment Blueprint Web Design

Texas Gateway CMDS: Course Creation Guide

Unit code: R/601/1288 QCF Level 4: BTEC Higher National Credit value: 15

Adam Lin. Graphic Designer & Experience Designer PORTFOLIO

Assignment 1~ ICONS Grading Assessment

Concepts of Information Technology. Introduction to Windows 8

Exemplar candidate work. Introduction

Course Syllabus. Course Title. Who should attend? Course Description. Adobe Animate CC

Dear Candidate, Thank you, Adobe Education

Flash Domain 2: Identifying Rich Media Design Elements

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Using Joomla O'REILLY. foreword by Louis Landry. Ron Severdia and Kenneth Crowder. Taipei Tokyo. Cambridge. Beijing. Farnham Kbln Sebastopol

m ac romed ia D r e a mw e av e r Curriculum Guide

,

PUBLISHING FLASH. Lesson Overview

Computing at Cox Green Curriculum Plan. Key Stage 3 Year 7

Co. Louth VEC & Co. Monaghan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910

You can use Dreamweaver to build master and detail Web pages, which

DESIGN PORTFOLIO. Julia Smith graphic + web designer juliasmithdesigns.com

Fireworks 3 Animation and Rollovers

AGENDA. :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer

Inserting an irite text editor to your to your DataAssist insert and update pages

Transcription:

Web Portfolio Design and Applications Table of Contents Preface... viii Chapter I. Introduction to the Web Portfolio... 1 Introduction... 1 Background... 2 Web Literature and Review... 4 Who Needs a Web Portfolio?... 10 Defining the Electronic Portfolio and the Web Portfolio... 12 The Web Portfolio as the Preferred Electronic Portfolio... 13 Types of Web Portfolios... 16 The Web Portfolio Fosters Valuable Learning Experiences... 20 Skills Fostered by the Web Portfolio Process... 24 The Web Portfolio as an Appearance... 25 The Benefits of Web Portfolios... 26 What You Should Get Out of This Book... 27 Review and Conclusion... 31 Chapter II. Conceptualization... 32 Introduction... 32 Defining the User, Understanding the Audience... 33 Define Your User and Their Goals... 36 Concept... 38 Write Your Concept Statement... 41 Content Gathering... 41 Text as Content... 43 Create Your Content List... 44

Create Your Content Outline... 45 The Web Portfolio as a Content Management Tool... 50 Review and Conclusion... 50 Chapter III. Information Design... 52 Introduction... 52 Structure... 53 Web Portfolio Information Organization... 54 Flowcharts as Skeletons... 54 Navigation... 55 Usability... 57 Pre-Evaluation of Usability... 58 Create Your Flowchart... 59 Review and Conclusion... 61 Chapter IV. Visual Design... 62 Introduction... 62 Style... 64 Composition and the Web Portfolio... 72 Space... 73 Type... 80 Images and Graphics... 81 Metaphors and Image Maps... 83 Identity... 83 Color Schemes... 84 Navigation Systems... 84 Backgrounds... 85 Pop-Up Windows... 86 Storyboards... 86 Conclusion... 88 Chapter V. Content, Collection, Development and Management... 89 Introduction... 89 Revisiting the Content Outline... 90 Setting Up the Folder Structure... 91 Image Types... 92 PDF... 92 Web Color... 94 Size... 96 Resolution... 97 Using Photography to Develop Content... 98 Scanning Your Work... 99

vii Taking Screen Captures... 99 Image Preparation, Crop, Scale and Save... 100 Text-Based Content... 102 Web Resumes and CVs... 102 Project Descriptions... 103 Review and Conclusion... 104 Chapter VI. Web Page Design... 105 Introduction... 105 Digital Tools... 106 Visual Design of Web Screens... 108 Pop-Up Windows... 109 Text Decisions... 110 Icons and Logos... 111 Navigation and Buttons... 112 A Word About Slicing and Exporting Pages... 112 Slicing Pages... 115 Optimizing and Exporting Pages and Graphics... 116 Review and Conclusion... 121 Chapter VII. Web Authoring... 122 Introduction... 122 WYSIWYG Applications vs. HTML Hand Coding... 123 Opening Sliced Web Pages from Fireworks... 124 Tables... 125 Creating a Web Page Using Macromedia Dreamweaver... 127 Layers... 130 A Brief Review... 137 Links... 137 CSS... 144 Behaviors... 146 Meta Tags and Keywords... 153 Review and Conclusion... 154 Chapter VIII. Motion, Graphics and Multimedia Production... 157 Introduction... 157 Overview of Web Multimedia Applications and Design Processes... 158 Motion Graphics Defined... 159 Basic Concepts in Macromedia Flash... 161 Creating the Text Animation... 166 Symbol Editor... 171

viii Preparing Audio in Adobe Audition... 180 Placing Audio in Flash... 185 Making Edits to the Flash Files... 191 Conclusion... 192 Chapter IX. Uploading and Testing Your Web Portfolio Site... 193 Introduction... 193 What You Need to Put Your Portfolio on the Web... 194 Where You Can Post Your Web Portfolio... 196 File Transfer Protocol (FTP)... 198 Towards Redesign... 206 Conclusion... 207 Chapter X. Launch and Promotion... 208 Introduction... 208 Marketing... 209 Review and Conclusion... 212 Chapter XI. Server-Side Technologies... 213 Introduction... 213 PHP... 214 Active Server Pages (ASP)... 214 ASP.NET... 215 CGI... 217 Perl... 219 ColdFusion... 220 Conclusion... 221 Chapter XII. Cases and Interviews... 222 Introduction... 222 Web Portfolio Program Case... 223 Sample E-Portfolio Proposal... 227 Interviews... 244 Interview Conclusion... 250 Case Study of Teacher Web Portfolios... 250 Review and Conclusion... 275 Chapter XIII. Web Portfolios in the Information Society and Future... 277 Introduction... 277 The Web Portfolio s Place in the Information Society... 278 The Web Portfolio as Personal, On-Demand, Mass Media and Advertising... 279

ix The Web Portfolio in the Knowledge Worker Age... 280 The Web Portfolio as the Postmodern Appearance... 281 The Web Portfolio as Postmodern Narrative Connection... 283 A Web Portfolio Makes You Digital in a Wired World... 285 The Web Portfolio as a Personal Knowledge Portal... 288 The Web Portfolio as a Responsive Environment... 290 Conclusions... 291 References... 293 About the Authors... 299 Index... 301