Adobe Dreamweaver CC: The Professional Portfolio Project 3: Photographer’s Web Site Working with static images Controlling backgrounds with CSS Working.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Five Working with Images.
Advertisements

Tutorial 6 Creating Special Effects with Graphics and Gradients.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
SVG Scalable Vector Graphics. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines.
SM5312 week 3: web graphics1 Web Graphics Nick Foxall.
Designing for Web stuff you need to know before you start.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
Introduction to Computer Graphics
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Web Design, 4 th Edition 5 Typography and Images.
Internet as a resource tutorial – part steps, 3 different actions 1. Search content 2. Use Text 3. Use Images.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 4 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 4: Adding Content.
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
Chapter 1 Review Images Links Images II Pictures and Extensions.
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
Tutorial 6 Working with Bitmaps and Gradients, and Publishing Flash Files.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques.
Basic Knowledge of Web creation. Computer graphic knowledge Graphic file has 2 types Raster Graphic A bitmap or raster image are comprised of pixels in.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
CHAPTER 4 LINKS Creating links between pages Linking to other sites links.
Image File Types Module 4: Working with Images LESSON 5.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.
BY CASEY KUCERA Multimedia. Vector Graphics Composed of objects not pixels Object oriented graphics = vector graphics Stores a series of mathematical.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.
Project 6: Kayaking HTML5 Site
FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
Raster Graphics 2.01 Investigate graphic image design.
Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
Structured Content Philosophy. Structure 4 Meaning Content meaning is tagged: Tag application is more consistent Special browsers can act smarter Aids.
21 st Century Technology. Painting Uses Pixels Quality of image Changes Drawing Uses Vectors or Lines Quality of Image Does NOT Change.
Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions.
Adobe Dreamweaver CS5 - Illustrated Unit E:Using and Managing Images.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Adobe Flash Professional CS5 – Illustrated Unit E: Optimizing and Publishing a Movie.
Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.
Efficient Game Graphics From Flash MX 2004 Game Design Demystified.
Tutorial 5 Working with Graphics and Tables. Objectives Session 5.1 – Review graphic formats and compression – Add, format, edit, and replace graphics.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 5: Images.
WELCOME TO WEB PAGE DESIGN- BEGINNERS COURSE Mrs Barry.
Unit 15 – Web Authoring Web Authoring Project.
Common Bitmap Image File Types
Unit Objectives Insert an image Align an image Enhance an image
Inserting and Working with Images
DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW
Basic Knowledge of Web creation
Sci Vis I Exam Review Unit 6 File Formats.
Chapter 4 Adding Images.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
IMAGE SIZE AND RESOLUTION
Image File Size and File Compression
1.01 Investigate graphic types and file formats.
Chapter 2 Adding Web Pages, Links, and Images
Creating Images for the Web
Exam Objectives: Identify Design Elements When Preparing Images
The Web Collection Standard CS3 Revealed
Presentation transcript:

Adobe Dreamweaver CC: The Professional Portfolio Project 3: Photographer’s Web Site Working with static images Controlling backgrounds with CSS Working with other image types

Adobe Dreamweaver CC: The Professional Portfolio Image File Types JPEG –24-bit color (photographs) –Lossy compression –No transparency GIF –8-bit color (illustrations) –Lossless compression –Index transparency PNG –24-bit color –Lossless compression –Index and alpha transparency SVG –Vector based

Adobe Dreamweaver CC: The Professional Portfolio Placing Images

Adobe Dreamweaver CC: The Professional Portfolio Placing Images (cont’d)

Adobe Dreamweaver CC: The Professional Portfolio Image Properties panel Define attributes of the tag Create image map Edit in original application Edit in Dreamweaver

Adobe Dreamweaver CC: The Professional Portfolio Resizing Change the dimensions of the placed image Does not change the source file

Adobe Dreamweaver CC: The Professional Portfolio Resampling Reduce the file weight of downsized images Permanently change the source file

Adobe Dreamweaver CC: The Professional Portfolio Background Images

Adobe Dreamweaver CC: The Professional Portfolio Understanding CSS Format every element individually Use unique ID attributes:

Adobe Dreamweaver CC: The Professional Portfolio Related Files External CSS files Indirectly opened and edited

Adobe Dreamweaver CC: The Professional Portfolio Flash Animation (SWF) Common Insert panel Play in Live view Dependent files

Adobe Dreamweaver CC: The Professional Portfolio Flash Video (FLV) Common Insert panel Skin container Preview in Live view

Adobe Dreamweaver CC: The Professional Portfolio Favicons Favorites/Bookmarks list Browser title bar Browser tab

Feedback: Privacy Policy Feedback
Do Not Sell My Personal Information
About project: SlidePlayer Terms of Service

© 2025 SlidePlayer.com. Inc. All rights reserved.