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.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

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?
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
COE201 – Computer Proficiency Mr. Hamze Msheik
 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes:
 Steps how to design a web page using Microsoft Frontage Steps how to design a web page using Microsoft Frontage  Video related to the topic Video related.
Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.
Creating Accessible Word Documents by Debbie Lyn Jones, IT Manager I, NSU Webmaster FRIDAY, JANUARY 23, 2015.
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Basic Web Design Considerations CS /6/07. Basic terms Web page Web page Web site Web site Home page Home page Sub pages Sub pages.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Planning a Web Site Unit Two Planning Steps 1. Determine the audience & objectives. 2. Sketch a storyboard or flowchart of the pages. 3. Create a folder.
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
Web Technologies Website Development Trade & Industrial Education
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.
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.
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.
Chapter 2 Web Site Design Principles
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Web Site Design Principles
Schoolwires 101 Frequently used “shortcut key” within the editor. ~Created by, Shannon Conley.
GUIDED LESSON HYPERLINKS. OBJECTIVE In this lesson, you will learn the basics of working with hyperlinks, including how to insert and remove them in your.
Website Development with Dreamweaver
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Using Dreamweaver Web Page Design. Introduction to Web Page Design Developing a New Site Building a web site involves creating individual pages and linking.
COMMON APPLICATION FUNCTIONS Presentation. Bullets  Symbols used to organize data into a list.  This  Is  An  Example  Of  A  Bullet  List.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart.
Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Dreamweaver Edulaunch Project 1 EQ: What are the key concepts when building the first page of a web site?
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.
Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Introduction to Web Page Design. General Design Tips.
Tools For State and Local Web Sites Web Style, Site Headers and Promotion Banners.
Web Site Design 15 Easy Steps to an Excellent Web Site.
1 After completing this lesson, you will be able to: Plan a FrontPage Web site. Create a new Web. Create a subpage layout. Use the subpage layout to build.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
“Just look at our web site…” I hate the title of this session, and so should you.
Principles of Web Design Keep it simple Content is critical--Form is not. Speed is “King”. Consistent filenames are key. Design efficiently. Cite your.
Word 2003 The Word Screen. Word 2003 Screen File Menu –Holds the options for creating a new document, opening a document, saving a document, printing.
Storyboard, Design, Layout.  Create storyboards  Decide upon navigation  Prepare short page summaries.
Webpages 7 th Grade Quest What Are Your Webpage Pet Peeves? Incorrect Spelling and Grammar Errors Page Takes Forever to Load Information is Out.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Web Site Development - Process of planning and creating a website.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Copyright © 2006 by The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill Technology Education Copyright © 2006 by The McGraw-Hill Companies,
HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.
Chapter 2 Web Site Design Principles
Section 6.1 Section 6.2 Write Web text Use a mission statement
With Microsoft FrontPage 2000
Section 7.1 Section 7.2 Identify presentation design principles
Chapter 2 Developing a Web Page.
Unit 17 Website Development
Margins In a New page, go to Page Layout, Margins, Normal (for 1” margins) I already set the font to Times New Roman, 12 point in Home.
ICT Communications Lesson 4: Creating Content for the Web
Chapter 2 Web Site Design Principles
Microsoft Publisher 2016.
Presentation transcript:

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 screen is slower than reading from paper Content- the text and graphics included on a web page the most important info should be at the top of the page

Creating Web Site Content Should provide info that captures readers attention by using headings, short paragraphs, and lists to keep short and easy to read DO NOT use blue font for words

Placing Items on a Page Layout- position of web elements on a computer screen Pixel- a single point in a graphic image Screen resolution- amount of pixels a monitor can display Safe Area- Amount of space on every web browser, usually 640 x 480 pixels which is the size of smallest monitor available. White space- area without content

Placing Items on a Page Avoid unnecessary content, animation, or blinking Links within the web site should be at the top and bottom of page to minimize scrolling People look at the most colorful element on a page

Creating a Page Logo- symbol used to represent a business or organization. Normally in the upper-left corner of page

Creating a Page Template Title Graphic- an image that appears at the top of every page Table- columns and rows that can be used to organize a Web page’s content

Navigation Navigation Link-hyperlink users click to locate more info and to move to other web pages Text Link- hyperlink of text Active Link- text hyperlink in the process of being clicked Visited Link- a text hyperlink that has been clicked Rollover Link- how a link looks when the cursor is pointing at it. a:hover Footer- the bottom portion of a Web page usually containing copyright, text links, and contact info