Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.
|
|
- Cecilia Palmer
- 6 years ago
- Views:
Transcription
1 Chapter 5 Images Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell
2 Image Introduction Images are good for illustrating ideas showing strictly visual information providing navigation And yes, decoration You need to think about the value of the image because it does come with a price. Does the look matter? Yes Does functionality matter? Yes Over time decorative graphics will not be seen. This is the same with overly animated pages. The idea at play here is sensory adaptation.
3 Image Intro. Contd. Images are made up of pixels (picture elements) small dot which can be set to a color Resolution is number of pixels across and down Consider typical screen resolutions: 640x480, 800x600, 1024x768, 1200x1600 Bit depth = number of bits to represent each color 4 bit per pixel = 16 colors 8 bits = 256 colors 16 bits = thousands of colors 24 or 32 bit = millions of colors Two general image storage formats Vector format -- describe image as set of curves Illustrations, geometric style displays Bitmap a bunch of dots with colors Photos and complex imagery Image display formats are always bitmap! Vectors are rendered into bitmaps Bitmaps are decompressed (typically) into other bitmap
4 Web Graphic Formats The Web supports numerous image file types No actual limit to types of images delivered Problem is browser support Limited to GIF, JPEG, and somewhat PNG BMP also commonly supported but not efficient for delivery File Type GIF (Graphics Interchange Format) File Extension.gif JPEG (Joint Photographic Experts Group) XBM (X Bitmaps) XPM (X Pixelmaps) PNG (Portable Network Graphics).jpg or.jpeg.xbm.xpm.png
5 GIF GIF (graphics interchange format).gif 256 colors only lossless compression low degree of compression run length encoding compresses continuous horizontal regions well good for illustrations and line art can make interlaced and transparent Pronunciation seems a big deal Unisys patent rumor and PNG
6 Some Examples of GIF Characteristics GIF compression Dithering Transparency Interlacing
7 JPEG JPEG (Joint Photographic Experts Group).jpeg or.jpg 24bit color possible Lossy compression Can adjust the compression level Not good with continuous color regions or text (introduces residue) Good for photographs Can make progressive Can t make transparent New version called JPEG 2000 promises wavelet based compression
8 Format Comparison
9 Format Comparison Contd. Format Compression Scheme Color Depth Supported Progressive or Interlaced Rendering Transparency Animation GIF Lossless (preserves file size for minimal compression of continuous horizontal regions of color) 8-bit (256 colors) Interlaced Yes (1 degree) Yes JPEG Lossy (trade image quality for file size) 24-bit (millions of colors Progressive No No
10 Images and Download Image download issues 56Kbps = 2.5 mins 1MB@T1 (1.544Mbps) = 5 seconds Image size is determined by physical size in pixels number of bits to represent the colors in a pixel One approach to reduction of image size is reduction of color another is higher degrees of compression (quality vs. file size) When it comes to high speed Web pages, compression of images is not the only thing to consider. Remember, small images doesn t necessairly translate into a fast Web page. Server load, number of connections, HTTP compression, HTML optimization, etc.
11 Obtaining Images Where people get images Make them Photoshop, Illustrator Capture them Scanner, digital camera, etc. Buy them CD-ROM clip-art libraries ( Steal them This is VERY illegal! Note: Fair use law is unclear and many people are abusing it
12 Image Basics <img> element is used to insert an image into a page <img src= /> Absolute link <img src= logo.gif /> Relative links are probably better The alt attribute used to set alternative text rendering for the image <img src= logo.gif alt= Big Company, Inc. /> Be careful with meaningful alt values red ball? Picture of building, etc. alt attributes not just for text browsers but may be for people who turn images off or show as tooltips
13 Alignment of Images Image alignment is with align attribute, table, or style sheet <img align= TOP src= logo.gif /> Initial values are top, middle, and bottom
14 Alignment of Images Netscape initially added text flow capability with align= left and align= right There are few other possibilities align values like baseline, texttop, absmiddle, absbottom, etc. These attributes are very proprietary and CSS should be used instead.
15 HSPACE and VSAPCE With text flowing around images you need to set some buffer horizontally and vertically using hspace and vspace respectively. <img src= logo.gif align= left hspace= 10 vspace= 20 />
16 Controlling Text Flow With text flow you also need to consider the returns so <br /> has the attribute clear. The clear attribute allows you to clear columns flowing around images <br clear= left /> Clear until left column can be reached <br clear= right /> Clear until right column can be reached <br clear= all /> Clear until both left and right columns can be reached Some developers use tables needlessly when this minor extension could be employed Under CSS you do not need these extensions
17 Image Height and Width To allow the browser to layout a page right away it is important to indicate the size of images using the height and width attributes set in pixels or percentage. <img src= logo.gif height= 100 width= 300 /> You can resize things with height and width but it will distort when getting bigger and getting smaller may provide little obvious benefit. <img src= logo.gif height= 1 width= 1 /> height and width can be used with percentage values to create interesting effects, try <img src= logo.gif height= 100% width= 100% / >
18 Lowsrc Another useful performance improvement comes in the form of the lowsrc attribute. Set this attribute to an image to load before the current image (usually it is smaller or black and white) <img src= colorlogo.gif lowsrc= bwlogo.gif /> Simple animation is possible with the lowsrc attribute but be careful since speed of loading is unpredictable, use animated GIFs instead
19 Image Tricks Be aware that there are tricks that can be employed with images particularly with invisible images with which you can push things around in a variety of ways <img src= clearpixel.gif height= 100 width= 100 > <img src= clearpixel.gif hspace= 100 > Note: Netscape 4 later introduces a non-standard tag <spacer> to provide the same function as the image trick. Do not use this tag
20 Images and Links Images can be used with links <a href= ><img src= button.gif ></a> Remove the border put around the image because of linking <img src= button.gif alt= button border= 0 /> When removing the color around an image you should strive to make the image look like it is pressable with a bevel or similar feature. Don t make the user hunt for what is active in the document. Careful with spaces between the close <img> and the close tag </a> this may introduce a tick though some browsers fix this for you In general an entire image is clickable but with the idea of imagemaps it is possible to make certain areas of an image go to one location or another. This hotspot style image is useful to make complex user interfaces. Two basic types of image maps: client-side and server-side
21 Image Maps Server-side images are older and have drawbacks in that they require the server to decode the selection Set using the ismap attribute <a href= ><img src= bozo.gif ismap></a> Client side image maps include the information locally to decode the click so they are faster Set using the usemap attribute in the <img> element to reference a client side map <img src= logo.gif usemap= #bozomap /> <map name= bozomap id= bozomap > <area shape= rect coords= 1,0, 10,10 href= index.htm /> <area shape= rect coords= 10,10, 20,20 href= index2.htm /> </map>
INFS 2150 / 7150 Intro to Web Development / HTML Programming
XP INFS 2150 / 7150 Intro to Web Development / HTML Programming Working with Graphics in a Web Page 1 Objectives Learn about different image formats Control the placement and appearance of images on a
More information1/27/2013. Outline. Adding images to your site. Images and Objects INTRODUCTION TO WEB DEVELOPMENT AND HTML
Outline INTRODUCTION TO WEB DEVELOPMENT AND HTML Images and Objects: Adding images to your site Adding Objects with Using Images as Links Image Maps Exercise Lecture 05 - Spring 2013 Adding images
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Horizontal Rule Element
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 4 Visual Elements and Graphics Learning Objectives (1 of 2) 4.1 Create and format lines and borders on web pages 4.2 Apply the image
More informationWeb Development & Design Foundations with XHTML. Chapter 4 Key Concepts
Web Development & Design Foundations with XHTML Chapter 4 Key Concepts Learning Outcomes In this chapter, you will learn to: Create and format lines and borders on Web pages Decide when to use graphics
More informationWelcome. Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs
Welcome Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs Health and Safety Course Information General Information Objectives To understand the need for photo
More informationHTML/XML. XHTML Authoring
HTML/XML XHTML Authoring Adding Images The most commonly used graphics file formats found on the Web are GIF, JPEG and PNG. JPEG (Joint Photographic Experts Group) format is primarily used for realistic,
More informationFrequently Asked Questions about Text and Graphics
1 Frequently Asked Questions about Text and Graphics 1. What is a font? A font is a set of printable or displayable text characters that are in a specific style and size. The type design for a set of fonts
More informationWeb Design, 5 th Edition
Typography and Images Web Design, th Edition Chapter Objectives Explain webpage typography issues Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images
More informationMore HTML. Images and links. Tables and lists. <h1>running in the family</h1> <h2>tonight 9pm BBC One</h2>
More HTML Images and links Tables and lists running in the family tonight 9pm BBC One hurdles legend Colin Jackson traces his family tree to Jamaica in Who Do You Think You Are?
More informationPage 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.
This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 4 VISUAL ELEMENTS AND GRAPHICS 2 Learning Outcomes In this chapter, you will learn how to... Create and format lines and borders on web pages Apply
More information1.6 Graphics Packages
1.6 Graphics Packages Graphics Graphics refers to any computer device or program that makes a computer capable of displaying and manipulating pictures. The term also refers to the images themselves. A
More informationFonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB
Fonts, text, and colour on the web Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts and font families Font families are used in web development rather than just the name of one font
More informationLogo & Icon. Fit Together Logo (color) Transome Logo (black and white) Quick Reference Print Specifications
GRAPHIC USAGE GUIDE Logo & Icon The logo files on the Fit Together logos CD are separated first by color model, and then by file format. Each version is included in a small and large size marked by S or
More informationAdvanced High Graphics
VISUAL MEDIA FILE TYPES JPG/JPEG: (Joint photographic expert group) The JPEG is one of the most common raster file formats. It s a format often used by digital cameras as it was designed primarily for
More information255, 255, 0 0, 255, 255 XHTML:
Colour Concepts How Colours are Displayed FIG-5.1 Have you looked closely at your television screen recently? It's in full colour, showing every colour and shade that your eye is capable of seeing. And
More informationImage Types Vector vs. Raster
Image Types Have you ever wondered when you should use a JPG instead of a PNG? Or maybe you are just trying to figure out which program opens an INDD? Unless you are a graphic designer by training (like
More informationcolor bit depth dithered
EPS The EPS (Encapsulated PostScript) format is widely accepted by the graphic arts industry for saving images that will be placed into programs such as Adobe Illustrator and QuarkXPress. It is used on
More informationDIS: Design and imaging software
Using IT productivity tools and applications This is the ability to use a software application designed to create, modify and layout artwork or images for display in print or on a screen (eg vector graphics
More informationWhere to get Images.
Where to get Images Images are under copywrite from the author, we need to either use free images or purchase the right to use them. Places to Get Images: www.istockphoto.com www.gettyimages.com www.veer.com
More informationMS Publisher 2007: Graphics. Lesson Notes Author: Pamela Schmidt
MS Publisher 2007: Graphics Lesson Notes Author: Pamela Schmidt Auto Shapes When a shape tool is selected, a precision pointer (cross hair) will appear when the mouse pointer is taken over the document.
More informationMS Word 2007: Graphics. Lesson Notes Author: Pamela Schmidt. The Drawing Tools Format Ribbon appears when the object is selected.
AutoShapes MS Word 2007: Graphics Lesson Notes Author: Pamela Schmidt To insert a shape, on the Insert Ribbon choose the Shapes control. When a shape tool is selected, a cross hair will appear when the
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 informationCreating and Building Websites
Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21/ Week 4 Slide 1 of 20 Week 4 Agenda
More informationClipArt and Image Files
ClipArt and Image Files Chapter 4 Adding pictures and graphics to our document not only breaks the monotony of text it can help convey the message quickly. Objectives In this section you will learn how
More informationData Representation From 0s and 1s to images CPSC 101
Data Representation From 0s and 1s to images CPSC 101 Learning Goals After the Data Representation: Images unit, you will be able to: Recognize and translate between binary and decimal numbers Define bit,
More informationPerfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5
Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives
More informationSession 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
More informationLesson 7 Working with Graphics
Lesson 7 Working with Graphics *Insert pictures from files *Insert picture from Microsoft Clip Art Collections *Resize and reposition a picture *Create and modify WordArt *Create and modify SmartArt *Create
More informationCommon Technology Words and Definitions
Common Technology Words and Definitions 77 78 Common Technology Words and Definitions: ASCII American Standard Code for Information Interchange, a code that makes it possible to send information from one
More informationImage mapping One of the things that mystifies newcomers to the Web is how to
Image mapping One of the things that mystifies newcomers to the Web is how to set up an image so that when you click on something in it, you re taken to a specific location on the Web. The answer: image
More informationImage Optimisation. Image Dimensions...1 Image File Formats...2 Adding Images...5 Thumbnails...13 Summary...15
Table of Contents Image Optimisation Image Dimensions...1 Image File Formats...2 Adding Images...5 Thumbnails...13 Summary...15 Introduction Images are placed on a website to enhance its appearance. However,
More informationUSQ/CSC2046 Web Publishing
USQ/CSC2046 Web Publishing Lecture 2: Design Guidelines, Graphics & Image Maps Tralvex (Rex) Yeap 29 November 2002 Outline Quick Review on Lecture 1 Search Engine Video Tutorial Topic 2: Advanced HTML
More informationWeb Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 4 Test Bank
1. Choose the item that creates an image link to the school.htm page when the school.gif graphic is clicked. a. b.
More informationTutorial 3: Working with Cascading Style Sheets
Tutorial 3: Working with Cascading Style Sheets College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology Objectives Review the history and concepts of CSS Explore
More informationVirus from hack - Original page
Virus from hack - Original page Virus Adding images to your web pages File types Most web browsers support 3 types of image files.jpg.gif.png Simplified definition of usage: JPG s used for big images (most
More informationStandard File Formats
Standard File Formats Introduction:... 2 Text: TXT and RTF... 4 Grapics: BMP, GIF, JPG and PNG... 5 Audio: WAV and MP3... 8 Video: AVI and MPG... 11 Page 1 Introduction You can store many different types
More information< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationUnderstanding file formats
Understanding file formats When you save files from Elements, you need to pick a file format in the Format drop-down menu found in both the Save and Save As dialog boxes. When you choose from the different
More informationChapter 4 A Hypertext Markup Language Primer
Chapter 4 A Hypertext Markup Language Primer XHTML Mark Up with Tags Extensible Hypertext Markup Language Format Word/abbreviation in < > PAIR Singleton (not surround text) />
More informationChapter 7 Tables and Layout
Chapter 7 Tables and Layout Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell We want Layout! Design requirements: pixel level layout,
More informationVector- drawn: what is the meaning of " on the fly " in vector images? It means that computers draw the image as per instructions.
Bitmaps: what is bit and map means? bit is the simplest element in the digital world. map is a two-dimensional matrix of these bits. Vector- drawn: what is the meaning of " on the fly " in vector images?
More informationHTML5 and CSS3--Images Page 1
HTML5 and CSS3--Images Page 1 1 HTML5 and CSS3 IMAGES 2 3 4 5 6 Images in HTML Since HTML is text, images are not inserted into the HTML document using the tag Different image types used on the Web:.jpg
More informationDazzle the Web with Dynamic Dreamweaver, Part II
Dazzle the Web with Dynamic Dreamweaver, Part II In the second Dreamweaver workshop we will learn the following skills: 1. Adding hyperlinks to our home page 2. Adding images to our home page 3. Creating
More information2004 WebGUI Users Conference
WebGUI Site Design 2004 WebGUI Users Conference General Rules of Web Design Content is King good content is more important than anything else. keeps people interested. even if your design is bad, content
More informationCreating Web Pages. Getting Started
Creating Web Pages Getting Started Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking to other Files What Web Pages Are Web Pages combine
More informationMultimedia Content. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents. Erik Wilde, UC Berkeley School of
Contents Multimedia Content Contents Web Architecture and Information Management [./] Spring 2009 INFO 190-02 (CCN 42509) Erik Wilde, UC Berkeley School of Information [http://creativecommons.org/licenses/by/3.0/]
More informationChapter 7 Tables and Layout
Chapter 7 Tables and Layout Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell We want Layout! Design requirements: pixel level layout,
More informationM4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) DURATION: 03 Hrs
M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) Max Marks: 100 DURATION: 03 Hrs M1-R4-01-19 1.3 Which of the following tag pair is used to list the text? (a) and (b) and (c)
More informationImage Formats. Ioannis Rekleitis
Image Formats Ioannis Rekleitis JPEG/JFIF JPEG 2000 GIF PNG TIFF PPM, PGM, PBM, and PNM Exif BMP WebP HDR raster formats HEIF BAT BPG CSCE 590: Introduction to Image Processing https://en.wikipedia.org/wiki/image_file_formats
More informationMidterm Review. October 17
Midterm Review October 17 Midterm Layout Some multiple choice, matching, true/false Not much though Will mostly be short answer You will have to write/edit/sketch some HTML You will have to write/edit/sketch
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
More informationUsing Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
More informationGraphics File Formats
1 Graphics File Formats Why have graphics file formats? What to look for when choosing a file format A sample tour of different file formats, including bitmap-based formats vector-based formats metafiles
More informationChapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false.
Name Date Chapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false. T F 1. WYSIWYG stands for What You See Is What You Get. T F 2. The menu bar shows the application
More informationPart III: Survey of Internet technologies
Part III: Survey of Internet technologies Content (e.g., HTML) kinds of objects we re moving around? References (e.g, URLs) how to talk about something not in hand? Protocols (e.g., HTTP) how do things
More informationWords: Lynda Weinman Design: Uli Karp
Words: Lynda Weinman Design: Uli Karp Designing Web Graphics.3 Table of Contents Introduction xxiii wit Getting Started Lynda's Career Counseling 2 Training 3 Teach Yourself 4 Improve Your General Design
More informationCMPT 165 Graphics Part 2. Nov 3 rd, 2015
CMPT 165 Graphics Part 2 Nov 3 rd, 2015 Key concepts of Unit 5-Part 1 Image resolution Pixel, bits and bytes Colour info (intensity) vs. coordinates Colour-depth Color Dithering Compression Transparency
More informationComputing Basics. Business Education & Computer Science Mr. Dukes
Computing Basics Business Education & Computer Science Mr. Dukes Types of Computer Software Operating system (OS) Controls communication with hardware Controls interaction with user Examples: Windows,
More informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationImage coding and compression
Image coding and compression Robin Strand Centre for Image Analysis Swedish University of Agricultural Sciences Uppsala University Today Information and Data Redundancy Image Quality Compression Coding
More informationDownloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -
Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will
More informationCropping an Image for the Web
Cropping an Image for the Web This guide covers how to use the Paint software included with Microsoft Windows to crop images for use on a web page. Opening Microsoft Paint (In Windows Accessories) On your
More informationHTML Exercise 20 Linking Pictures To Other Documents Or Web Sites
HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites Turning pictures into hyperlinks is nearly the same as what you learned in Exercises 4 and 5. If a picture is essential to a Web page,
More informationInteractive Multimedia. Multimedia and the World Wide Web
Interactive Multimedia Multimedia and the World Wide Web Multimedia and WWW What is Multimedia? why is it important? Who needs to know about Multimedia? Interactive Multimedia hypermedia, hypertext media
More informationMultimedia on the Web
Multimedia on the Web Graphics in web pages Downloading software & media Digital photography JPEG & GIF Streaming media Macromedia Flash Graphics in web pages Graphics are very popular in web pages Graphics
More informationDifferent File Types and their Use
Different File Types and their Use.DOC (Microsoft Word Document) Text Files A DOC file is a Word processing document created by Microsoft Word, a word processor included with all versions of Microsoft
More informationChapter 5. Introduction to XHTML: Part 2
Chapter 5. Introduction to XHTML: Part 2 Tables Attributes of the table element: border: width of the table border in pixels (0 makes all lines invisible) align: horizontal alignment (left, center, or
More informationQuick Guide for Photoshop CS 6 Advanced June 2012 Training:
3. If desired, click the desired tab to see the differences. Photoshop CS 6 Advanced Changing Workspace Note: Changing Workspace will change the Panel Group appears on the screen. The default Workspace
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More informationChapter 15 Plug-ins, ActiveX, and Applets
Chapter 15 Plug-ins, ActiveX, and Applets Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell Web Programming Toolbox Redux Java Applets
More informationPublication Quality Graphics
Publication Quality Graphics Biochemistry Boot Camp 2018 Session #6 Nick Fitzkee nfitzkee@chemistry.msstate.edu Why Quality Graphics? Clarity of Presentation Sharp-looking Posters, Presentations, Papers
More informationHTML Element A pair of tags and the content these include are known as an element
HTML Tags HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters < and >. The surrounding characters are called angle brackets HTML tags are not case sensitive,
More informationProfessional Powerpoint Presentation II
Professional Powerpoint Presentation II Facilitator: Patrick Ng Fall 2012 Practical concerns in delivering presentation Creative Visual Possibility & Optimization for Presentation PPTII & IV: Quick Style,
More informationWeb graphics. Introduction
Web graphics Introduction Role of Web Graphics Role of Web Graphics Although web designers could build a site without graphics, most users would not readily recognize a collection of bare pages as a cohesive
More informationCreating and Editing Images in Paint Shop Pro Version XI. File Types
Creating and Editing Images in Paint Shop Pro Version XI Paint Shop Pro (PSP) from JASC software (http://www.jasc.com) is an imageediting and creation program. You can download a 30-day trial version from
More informationPrentice Hall. Learning Microsoft PowerPoint , (Weixel et al.) Arkansas Multimedia Applications I - Curriculum Content Frameworks
Prentice Hall Learning Microsoft PowerPoint 2007 2008, (Weixel et al.) C O R R E L A T E D T O Arkansas Multimedia s I - Curriculum Content Frameworks Arkansas Multimedia s I - Curriculum Content Frameworks
More informationRev. A 02/02/2016 Downers Grove Public Library Page 1 of 50
Objectives... 3 PowerPoint 2016 Screen Overview... 4 File Tab on the Ribbon... 5 Use Tell Me for Interactive Help... 6 Accessing Documents and Templates... 7 Searching for Templates... 8 Printing... 9
More informationHTML: Fragments, Frames, and Forms. Overview
HTML: Fragments, Frames, and Forms Michael B. Spring Department of Information Science and Telecommunications University of Pittsburgh spring@ imap.pitt.edu http://www.sis. pitt.edu/~spring Overview Fragment
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationCS101 Lecture 12: Image Compression. What You ll Learn Today
CS101 Lecture 12: Image Compression Vector Graphics Compression Techniques Aaron Stevens (azs@bu.edu) 11 October 2012 What You ll Learn Today Review: how big are image files? How can we make image files
More informationPrint Services User Guide
Print Services User Guide Understanding Artwork for Print 1 Preferred Formats: Preferred formats should contain only vector-based graphics and text, and/or high-resolution images. Low resolution images
More informationPrentice Hall. Learning Media Design with Adobe CS4 (Skintik) Alabama - Course of Study - Interactive Multimedia Design
Prentice Hall Learning Media Design with Adobe CS4 C O R R E L A T E D T O Learning Media Design with Adobe CS4 Students will: Multimedia Components 1. Compare aspects of multimedia. Presentation Desktop
More informationComputers Are Your Future Prentice-Hall, Inc.
Computers Are Your Future 2006 Prentice-Hall, Inc. Computers Are Your Future Chapter 5 Application Software: Tools for Productivity 2006 Prentice-Hall, Inc Slide 2 You Will Learn... ü How system software
More informationCOMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal
COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 9 9 Working with Tables Are you looking for a method to organize data on a page? Need a way to control our page layout?
More informationChapter 2 Creating and Editing a Web Page
Chapter 2 Creating and Editing a Web Page MULTIPLE CHOICE 1. is a basic text editor installed with Windows that you can use for simple documents or for creating Web pages using HTML. a. Microsoft Word
More informationrequest HTML Document send HTML Document
1 HTML PROGRAMMERS GUIDE LESSON 1 File: HtmlGuideL1.pdf Date Started: Dec 14,1999 Last Update: March 15, 2003 ISBN: 0-9730824-0-2 Version: 1.0 LESSON 1 HTML PROGRAMMING FUNDAMENTALS Pre-resequites You
More informationCreating Accessible Web Sites with EPiServer
Creating Accessible Web Sites with EPiServer Abstract This white paper describes how EPiServer promotes the creation of accessible Web sites. Product version: 4.50 Document version: 1.0 2 Creating Accessible
More informationHOW TO SAVE YOUR DESIGN FILES
HOW TO SAVE YOUR DESIGN FILES READ YOUR BOOK. ART-2423 > raster > vector > holds both raster and layered o Can work in whatever color mode preferred. o Platform-specific (PC vs. Mac) and often version-specific
More informationHYPERTEXT MARKUP LANGUAGE ( HTML )
1 HTML BASICS MARK-UP LANGUAGES Traditionally used to provide typesetting information to printers where text should be indented, margin sizes, bold text, special font sizes and styles, etc. Word processors
More informationCompression; Error detection & correction
Compression; Error detection & correction compression: squeeze out redundancy to use less memory or use less network bandwidth encode the same information in fewer bits some bits carry no information some
More informationMultimedia Technology
Multimedia Application An (usually) interactive piece of software which communicates to the user using several media e.g Text, graphics (illustrations, photos), audio (music, sounds), animation and video.
More informationBrand guide template. A few things to note: Remove this page. This is an example guideline for a made up company called ACME CO.
Brand guide template A few things to note: This is an example guideline for a made up company called ACME CO. Add your own images that capture the client s personality. text and colors based on branding.
More informationCommon File Formats. Need a standard to store images Raster data Photos Synthetic renderings. Vector Graphic Illustrations Fonts
1 Image Files Common File Formats Need a standard to store images Raster data Photos Synthetic renderings Vector Graphic Illustrations Fonts Bitmap Format - Center for Graphics and Geometric Computing,
More informationUsing Dreamweaver, Photoshop, and Fireworks: CS38: Graphics Production for the Web. Stanford University Continuing Studies CS 38
Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom markb@stanford.edu http://www.stanford.edu/people/markb/ Course Web
More informationThis is not yellow. Image Files - Center for Graphics and Geometric Computing, Technion 2
1 Image Files This is not yellow Image Files - Center for Graphics and Geometric Computing, Technion 2 Common File Formats Need a standard to store images Raster data Photos Synthetic renderings Vector
More informationEDLD 5366 Digital Graphics and Web Design. Directions. Assignment 1.1
Directions Assignment 1.1 In Week 1, you have been introduced to the principles of design. In this assignment, you will be identifying these principles in three graphic designs. The first design you will
More information1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5
Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following
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 informationExercise 1: Understand the CSS box model
Concordia University SOEN 287: Web Programming 1 Winter 2016 Assignment 2 Due Date: By 11:55pm Sunday February 14, 2016 Evaluation: 4% of final mark Late Submission: none accepted Type: Individual Assignment
More information