Page Design Issues IWM 14 Information Services for the Web.

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
Server Web Server Pages Client Browser  HTML can do everything  We will limit our use to defining the content units – NOT formatting  Why? ›
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
DECO1001: Optimising for the Web Format Colour File Size.
Designing for Web stuff you need to know before you start.
Images.
Let me control over my pages: Tables, Frames, and CSS.
2.01 Understand Digital Raster Graphics
Graphics in the web Digital Media: Communication and Design
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
Website Design BTT1OC/2OC. What is web design? O A web site is a digital page consisting of HTML (hypertext markup language) files, images, movies, sound,
Digital Art is Interactive Visual Art. How has art been changed because of technology ?
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Photoshop Domain 5: Publishing Digital Images Using Adobe Photoshop CS5 Adobe Creative Suite.
Ch10 QQ T F 1.The appearance of text (such as font face and style) incorporated into a Web page graphic will appear as it was when it was created, regardless.
WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.
Ivailo Chakarov Web Design Ivo Chakarov Telephone: Ext Room: NL11 (above New Library)
MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.
Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.
Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no guarantee that people will see/experience your web pages.
 View Ribbon, Document Views group, click “Print Layout”  Standard working view for print documents  Default view in Word 2010  Shows you how your.
Looking Good Online Design and Presentation of Websites 1.
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.
Module Code: CU0001NI Technical Information on Digital Images Week -2.
HTML and Style. Session overview Leveling-off on the basic concepts of HTML and Styles Discuss Web authoring options.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.
COLOR In Web Design. Designing with Color Use contrasting colors Using a small palette of colors helps unify and enhance a design Using a dominant color.
1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web.
Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.
Introduction to Web Page Design. General Design Tips.
Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.
Start Dreamweaver program From file menu click new Blank page appears.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
Strand 3 Maya Mangindin 3.6 Multimedia/ Digital Media.
Chapter 12 Web Publishing. Goals Become an image optimization master Get a handle on Web file formats, including SVG and SWF Learn about Web image color.
Saving PowerPoint Presentations as Web Pages Your Logo Here Open the PowerPoint Presentation. To convert to a format compatible with web browsers, launch.
Raster Graphics 2.01 Investigate graphic image design.
FrontPage: Introduction and Review. Today’s Topics  Layout Resolution  What is a pixel anyway?!? Page Layout Special Layouts  Files Names  Page Titles.
WLLS 102 Class 7 3/19/2004 Professor C. Shilepsky Wells College.
CSC/FAR 020, Computer Graphics, March 25, 2010 Dr. Dale E. Parson Outline for week 9, class 2 Exporting Files.
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.
Digital Images are represented by manipulating this…
WRA 210: 10/7/13 IMAGES. TODAY’S AGENDA Reminder about Module 8 - test your links!Module 8 Overview of hierarchies, naming How images work on the web.
Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Web Design M. Jacie Yang Assistant Professor
Raster Images CPSC 1030.
A computer display is made up of small squares, called pixels.
Screen Based Design: An Introduction DW9V 34
1.01 Investigate graphic types and file formats.
Hyperlinks, Images and Tables
Graphics.
ការណែនាំពី កម្មវិធី Microsoft POWERPOINT 2010
Web Design Designing for the Unknown.
Photoshop: Creating and Preparing Images for the Web
Hyperlinks, Images and Tables
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
2.01 Investigate graphic image design.
Summer 31: Web Authoring A trainee has started to create a single stylesheet to be used with the website. The stylesheet was not finished and contains.
CSC/FAR 020, Computer Graphics, November 9, 2009
ME 123 Computer Applications I Lecture 38: More on HTML 5/20/03
Presentation transcript:

Page Design Issues IWM 14 Information Services for the Web

Topics Page design & layout Graphics Typography Editorial Style - writing for the Web

Page Design Topics Visual hierarchy Consistency Headers & footers Design grids Page layout with tables Page dimension Page length

Visual hierarchy

Consistency

Headers & footers

Design Grids

Page Layout with Tables

Tables & accessibility

Image Layout with Tables

Page Dimensions

Page Length

Web Graphics Colour displays & screen resolution Pixels & colour depth Palettes Browser safe colours Dithering File formats - GIF & JPEG HTML & graphics

Colour Display

Palettes

Dithering

Dithering & browser safe colours

File formats - GIF

GIF

Transparent GIF

Transparency & antialised images

JPEG for full colour

Which format? GIF JPEG

Wallpaper?

HTML & colour

Next session Typography and text layout Writing for the Web