12-8-15 - Art for New Media TO DO today: 1 - Sketchbook - Due Next class - Thursday 12/10 Assignments listed on next slide - make sure you have all of.

Slides:

Advertisements

Similar presentations

DREAMWEAVER Welcome to our website!

Advertisements

Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.

Learning the Basics – Lesson 1

Dawn Pedersen Art Institute. What is Spry? Spry is Dreamweaver’s version of JavaScript libraries. Spry effects alter the look of a page element—or of.

Graphic Fun with Photoshop and Dreamweaver Presented by Roger L. Runquist, WIU.

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.

FIRST COURSE Creating Web Pages with Microsoft Office 2007.

Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.

Adding an image to a page in Dreamweaver Uploading files to x10hosting Editing uploaded files in x10hosting Adding links in Dreamweaver Uploading linked.

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.

Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit F Creating Links and Navigation Bars.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.

Website Development with Dreamweaver

Formatting Text Unit D. Import Text l Open TripSmart Web Site l Open dmd_1.htm from Unit D data l Save it as newsletter.htm to tripsmart folder l Save.

Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.

CIT 256 Dreamweaver Sites and Image Maps Dr. Beryl Hoffman.

Importing/Exporting between Fireworks and Dreamweaver For Buttons, Navigation Bar and Animated Banners.

Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.

CIS 205—Web Design & Development Fireworks Chapter 1.

Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.

Chapter 1 Creating a Dreamweaver Web Page and Local Site

Click your mouse for next slide Dreamweaver – Inserting and Formatting Text Inserting text is just as easy as inserting pictures If you wish to type text.

Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.

Sports Website Creation. In this project you will design and produce your own website.

The Internet Using the Internet Web addresses Searching Favourites Saving / Printing web pages.

> Agenda 1 - Museum Review DUE TODAY! 2 - Sketchbooks DUE - Wed, Dec Flash continued: More drawing tools: pen tool, text, gradients Basic.

Bike and Hike Skills: Graphics, Image Maps, Photo Galleries, Layers.

Agenda Sketchbook DUE today - assignment dates listed on next page 1 - Flash Environment and workspace continued - Movie clip symbols - timeline.

Art for New Media TO DO today: 1 - Sketchbook assignment (see next page) 2 - Animation using Photoshop - - Animation Panel > view, frames - Frame.

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

We Are Learning To (WALT): To create a working homepage for our websites What I am Looking For (WILF): A completed homepage containing a working navigation.

Agenda Sketchbook DUE next Tues - assignment dates listed on next page 1 - Get out your sketchbook and note these terms: Symbols (reusable object):

Creating interactive web pages using Fireworks Creating a 5 page mock up.

Art for New Media 1 - Sketchbook Assignment > on next page Links on today’s date on calendar 2 - Photoshop and Animation … continued sample files.

Art for New Media 1 - Photoshop and Animation … Intro sample files in shared folder background images, transparent background Save for web and.

Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,

Art for New Media 1 - Sketchbook assignment We viewed the movie “Rivers and Tides: Working with Time” about Andy Goldsworthy. He creates a type.

Designing a Web Page Layout Using a Professional Bitmap & Vector Graphic Editing Suite 1IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas.

Art for New Media TO DO today: 1 - Fireworks Introduction continued - Finish remote rollovers - Rollovers with multiple states (over and hit.

Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.

Home page Web page link 1 Web page link 2Web page link 3Web page link 4.

1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.

Art for New Media 1 - Sketchbook: Look through past examples of the Dreamweaver Practice Gallery on the class website. Pick one that you think.

Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

Creating Web Pages with Links, Images, and Embedded Style Sheets

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.

Click your mouse for next slide Dreamweaver – Synchronizing your Site to a Network Drive In the first lesson we defined our site and we associated a root.

COMP 143 Web Development with Adobe Dreamweaver CC.

Dreamweaver MX. 2 Timeline Overview (p. 480) n Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers.

XP Creating Web Pages with Microsoft Office

Unit 15 – Web Authoring Web Authoring Project.

Art for New Media TO DO today: 1 - Saving your work, using with Dreamweaver CSS style sheets, externally linked Work on Photoshop Animation.

Unit Objectives Insert an image Align an image Enhance an image

Chapter 2 Developing a Web Page.

Project Objectives Lay out Web pages Create layers

Learning the Basics – Lesson 1

Dreamweaver – Project #1

Chapter A - Getting Started with Dreamweaver MX 2004

How to Make a Power Point

Exercise 55 - Skills Slices and rollovers are useful interactive elements you can add to your Fireworks documents. Slices not only enable you to add features.

4.00 Apply procedures to add content by using Dreamweaver. (22%)

Presentation transcript:

Art for New Media TO DO today: 1 - Sketchbook - Due Next class - Thursday 12/10 Assignments listed on next slide - make sure you have all of them completed, even if you were absent! 2 - OAG WEBSITE - Continue to create overall style of site (color scheme, relevant type choice, additional design elements, artist images) 3 - Make sure to KEEP ALL FILES IN OAG FOLDER! 4 - Work on Nav Bar and Home page, style sheets, gallery, content pages…

Sketchbook 9/1 - good vs. bad design 9/3 - pixels/PS terms 9/10 - PS terms, layers 9/15 - copyright 9/17 - shaded ball 9/29 - facts about Internet 10/1 - iceberg drawing/questions 10/5 - color blindness 10/9 - website review from gallery 10/15 - file formats 11/4 - art history (2 artists) 11/6 - Goldsworthy reaction

Art for New Media Steps to make a REMOTE or DISJOINT rollover - - create image in photoshop (use layers for states) - open in FW - slice active areas (any area that will have rollover behavior, including “remote” area) - create states for each rollover area for normal state, turn on visibility of all buttons, turn off visibility (eyeball in layers) of all remote area layers copy normal state to make new states (so that all layers will be there) turn on visibility of remote area you wish to show make change to button (ex. Filter in properties inspector - make sure your “button” layer is selected to add a filter) - use behavior handle to create disjoint rollover (click and drag crosshair/handle to slice add swap image to slice (click on behavior handle) select state that you will be swapping with current image - save as png - file > export - make sure to select the following: export: HTML and images html: html file slices: export slices pages: current page check only these boxes: include area w/o slices and images in subfolder - open html file in dreamweaver

Steps to make a rollover with multiple states - - create image in photoshop (use layers for states) - open in FW - create states for each rollover behavior (off or normal, over and down) copy normal state to maintain layers in all states name each state (ex: coffee-off, coffee-over, and coffee-down) - make changes to the states to show rollover image (turn on visibility of layer you want to show in each state) - save as png - file > export - make sure to select the following: export: states to files uncheck trim images box - open a new dreamweaver file, save it - place image for off state (insert > image) - add rollover behavior > go to behaviors panel add (click on plus sign) swap image browse for image > choose over state add another behavior > this time choose down image then change it to onMouseDown in list to left of behavior (click on blue arrows to see list) - save and preview in browser