Web page design Static pages –Content stays the same at all times –Informative elements –Using HTML codes (usually) Dynamic pages –Content varies from.

Slides:



Advertisements
Similar presentations
Web Page Design Critical Elements for a Well Designed Web Page.
Advertisements

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.
AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Chapter 3 – Web Design Tables & Page Layout
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
About this Web Site Disclaimer: This site has been designed as a project for CS3505. It is for educational purposes only. All content is based upon a fictional.
CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
Create a table Resize, split and merge cells Insert and align graphics within table cells Insert text and format cell content Maintain Web site Working.
Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone.
Basic HTML. Guide to HTML code Not case sensitive Use tag for formatting output: new line, paragraph, text size, color, font type, etc. Can be a single.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
Building a Web Site Back to Table of Contents. Building a Web Site Fundamentals of Web Design Creating an Attractive Site 2 Building a Web Site Section.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.
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.
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.
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.
Web Design ATBs. ATB #1 List headings and size ATB #2 Define HTML.
HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
1 HTML Frames
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
HTML: Tables & Frames Internet Technology.
Lotus 认证培训 Notes Domino 6/6.5 Application Development Foundation Skills ( 610 ) Exam Number: 610 Competencies: Please see exam guide. Length:
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
1 Creating the Header Page The header frame always displays on the AHS Web site The image (screagle.gif) that will go in the header is contained on the.
Start Dreamweaver program From file menu click new Blank page appears.
HTML Hyper Text Markup Language. Create TABLE in an HTML Tables are defined with the tag. A table is divided into rows (with the tag), and each row is.
Basic Table Elements. 2 Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table with text.
Louisa Lambregts, Louisa Lambregts
Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2 Define terms related to frames Describe the steps used.
Microsoft FrontPage 2003 Illustrated Complete Designing Web Pages with Layout Tables.
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
Web programming Part 1: HTML 由 NordriDesign 提供
Exploring Microsoft Microsoft FrontPage Chapter 21 Exploring Microsoft FrontPage 2002 Chapter 1 Creating a Home Page: Introduction to MS FrontPage.
1 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags. Plan an HTML site. Create a table with HTML.
Basic HTML.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
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.
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
1 3/30/05CS120 The Information Era CS120 The Information Era Chapter 4 – More HTML Specifics TOPICS: Frames Problem Review, Nested Frames.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
Web Basics: HTML/CSS/JavaScript What are they?
Background color: tan.jpg
LESSON 4 Module 4: Working with Images Navigation Tools.
Page plans A01 Design.
Creating a Successful Web Presence
Create and edit web pages 2
Tutorial 6 Creating Dynamic Pages
Layout and Design with Tables and Frames
Designing Web Site Layout Using Fireworks
Presentation transcript:

Web page design Static pages –Content stays the same at all times –Informative elements –Using HTML codes (usually) Dynamic pages –Content varies from one time to the next –Interactive elements –Using DHTML & JavaScript (usually)

Design elements Content –Document –Form –Graphics –Multimedia* Navigation –Link –Frame –Button –Image map Appearance –Text formatting –Paragraph, Header –Table –List –Color –Special effect* Rollovers Menus

Breakfast LinkLunch LinkDinner Link COMPANY LOGO LOGO.jpg brkfast.html#anchor1 [BREAKFAST MENU] [DINNER MENU] lunch.html [LUNCH MENU] Background color: tan.jpg brkfast.html

Breakfast Hot SpotLunch Hot SpotDinner Hot Spot COMPANY LOGO banner.jpg image map brkfast.html lunch.html banner.html before using frames

Breakfast Hot SpotLunch Hot SpotDinner Hot Spot COMPANY LOGO banner.jpg image map brkfast.html lunch.html banner.html with frames 1 st Row Frame 2 nd Row Frame

Breakfast Hot SpotLunch Hot SpotDinner Hot Spot COMPANY LOGO banner.jpg image map brkfast.html lunch.html banner.html with nested frames 1 st Row Frame 1 st Column Frame 2 nd Column Frame toc.html Breakfast Link Lunch Link Dinner Link

banner.jpg brkfastnf.html dinnernf.html lunchnf.html brkfastnf.html for frame-blind browsers LOGO.jpg Breakfast Link Lunch Link Dinner Link A table with 2 columns