Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on 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

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.

CREATING WEB PAGES INTERNET IN THE CURRICULUM MODULE 8:

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.

Iframes & Images Using HTML.

Charmaine NormanCopyright What Is a Web Page Presented by Webpagemaker. Net Left click your mouse to view each frame, Web Page.

Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet.

Website design basics QUME Learning objectives Understand the basic elements of a Web page and how it is produced Be aware of different approaches.

Basic HTML Workshop Session 1: Introduction to HTML Fall 2006.

Instructor: A. Burns 1 HTML Images. Instructor: A. Burns 2 Inserting a Graphic Images can be displayed in two ways: as inline images or as external images.

Internet Publishing / Dreamweaver Luke E. Reese CARRS

Basic HTML Workshop Session 1: Introduction to HTML Fall 2006.

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

CPSC 203: Introduction to Computers Tutorials 03 & 29 by Jie (Jeff) Gao.

HYPERTEXT MARKUP LANGUAGE (HTML)

HYPERTEXT MARKUP LANGUAGE (HTML) Vijaya K Pandey.

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,

Nat 4/5 - Software Design and Development – Low Level Operations - 1 National 4/5 – Computing Science Information Systems Design and Development Media.

HTML Comprehensive Concepts and Techniques Intro Project Introduction to HTML.

Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 1 St Andrew’s.

Sem 1 v2 Chapter 14: Layer 6 - The Presentation layer.

Multimedia and the Web Chapter Overview  This chapter covers:  What Web-based multimedia is  how it is used today  advantages and disadvantages.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

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.

Unit 8.2 / Lesson 1 / presentation1a Web Elements.

English for ICT. Multimedia Multi = many, multiple Media = An intervening substance through which something is transmitted or carried on 2.

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.

XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.

Welcome to CMPE003 Personal Computer Concepts: Hardware and Software Winter 2003 UC Santa Cruz Instructor: Guy Cox.

Chapter 13-Tools for the World Wide Web. Overview Web servers. Web browsers. Web page makers and site builders. Plug-ins and delivery vehicles. Beyond.

Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.

An Introduction To Websites With a little of help from “WebPages That Suck.

Understanding a Web Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the.

Web Design-Lecture1-QN-2003 Web Design Web Design Using HTML.

Contents MULTIMEDIA –Audio –Video –Animation –PDF.

Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.

Introduction to web development and HTML MGMT 230 LAB.

Web Page Fundamentals HTML: The Language of the Web.

Graphics in HTML. Graphics  Question: How does a web page include graphics?  Are the graphics included in the HTML file or separate files?

File Format. Graphics file Format GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) TIFF (Tag.

PowerPoint: Images Randy Graff UF HSC IT Center

File Format. Graphic file Format GIF –cross-platform compatibility –developed by CompuServe as a common format for exchanging bitmapped images between.

Multimedia and the Web.

Introduction to HTML Unit 3: E-business.

Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.

Raster Graphics 2.01 Investigate graphic image design.

Page Design Issues IWM 14 Information Services for the Web.

Chap 14 Presentation Layer Andres, Wen-Yuan Liao Department of Computer Science and Engineering De Lin Institute of Technology

Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 

Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.

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.

Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.

Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!

Web Page Programming Terms. Chapter 1 Objectives Describe Internet and Understand Key terms Describe World Wide Web and its Key terms Identify types and.

Section 9.1 Section 9.2 Identify multimedia design guidelines

Chapter 10 Multimedia and the Web.

Chapter 1 Introduction to HTML.

2.01 Investigate graphic image design.

Unit 2, Lesson 5 Website Development Tools

A computer display is made up of small squares, called pixels.

Unit 2, Lesson 5 Website Development Tools

1.01 Investigate graphic types and file formats.

2.01 Investigate graphic image design.

Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!

2.01 Investigate graphic image design.

2.01 Investigate graphic image design.

Presentation transcript:

Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web

Web publishing – the steps Plan your site content Make your pages using a program Publish your site Test your site thoroughly

Plan your site content 1. Establish the goal of your site and its users 2. Sketch site structure 3. Sketch a common layout

Make your pages The tools you can use Notepad (need to write HTML code) Microsoft Word WYSIWYG Web editors (e.g. FrontPage, Dreamweaver)

Test your site Different browsers (e.g. Internet Explore, Netscape) Different screen resolutions (640 x 480, 800 X 600, 1024 x 768)

Publish your site What is a web server? Where can you find a web server? How to put your pages on a web server?

HTML basics HyperText Markup Language Inventor: Tim Berners-Lee A set of tags which tells a browser how to format and display a web page

HTML tags Tag structure a starting tag (e.g. ) a closing tag (e.g. ) The starting tag A sample tag Something really cool. Some basic tags (see the handout)

HTML tables Using tables enables you to neatly arrange your stuff on a page. Three main tags: The tag, the tag and the tag Table attributes: border, width, cellpadding, cellspacing, bordercolor, bgcolor, etc.

Web design What makes a good website? From a user’s point of view, a good web site is one that… …has something he/she wants …is usable …doesn’t waste his/her time and …isn’t irritating. (Kelly, 2000) Useful Usable

Make your site useful What is the purpose of your site? Consider the characteristics of your users. What key tasks do they want to do on your site? What information do they want to look for?

Make your site usable How people use the web? Users don’t like to think or wait! Users don’t read pages, they scan them. Users choose the first reasonable link. How to make a site usable? Break a page into clearly defined areas. Create a visual hierarchy. Keep the “noise” down. Keep the file size small and reduce the download time.

Web design principles Consistency of presentation Clear structure to help the user to identify information Clarity of display (i.e. not too much displayed) Visual attractiveness (Clarke, 1997, p 84)

Task Plan your own website for future development (see the handout)

Multimedia on the Web Text Images (jpg, gif, png) Sound (mp3, asf, ram, wav…) Video (mpeg, wmv, ram, mov, avi…) Flash (swf)

Images for the Web photos.jpg cartoons.gif animated cartoons.gif

Images for the Web File Format JPEG (Joint Photographic Experts Group) GIF (Graphic Interchange Format) Best for photographsBest for cartoons, line art and computer-generated drawings. Full-colour images (24 bit or true colour) Limited to 256 colours; can have transparent backgrounds How to change the file format

Images for the Web File Size Ways to reduce the file size of an image: reducing/cropping the dimensions of the image reducing the number of colours used scanning images at a lower resolution Thumbnails

Images for the Web Resources Search the Web (copyright protected?) Use clipart collections Take photos using a digital camera Scan images using a scanner

Tasks Edit images for your web page Make a logo