Web Design, 5 th Edition

Size: px
Start display at page:

Download "Web Design, 5 th Edition"

Transcription

1 Planning a Successful Website: Part 2 Web Design, 5 th Edition Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step : Specify the s navigation system Complete Step 5: Design the look and feel of the Complete Step 6: Test, publish, and maintain the Use a checklist to review your web design plan Chapter : Planning a Successful Website: Part 2 2 The initial, visible screen area is extremely valuable space Place the most critical information above and to the left of the potential scroll zones Avoid a cluttered appearance Eye-tracking studies use various technologies to produce heat maps that represent data using color Eye-tracking heat maps are created by analyzing the movement of a visitor s eyes as he or she views a webpage Over the past several years, eye-tracking studies suggest that a site s visitors typically first look at the top and left areas of a page, and then look down and to the right Chapter : Planning a Successful Website: Part 2 3 Chapter : Planning a Successful Website: Part 2 When designing a webpage, you need to decide how to manage page width Fixed-width page Liquid or flexible page layout Hybrid page layout Step : Specify the Website s Navigation System A navigation system that is easy for visitors to understand and follow will draw them deeper into your to view detail pages with content that can satisfy their needs and expectations User-based navigation system User-controlled navigation system Chapter : Planning a Successful Website: Part 2 5 Chapter : Planning a Successful Website: Part 2 6 1

2 Text links Image links Navigation areas Breadcrumb trail Website map Search capability Text links are hyperlinks based on a word or words in an HTML document An image link assigns a link to a visual element, such as an illustration or a photograph Image map Hot spots Chapter : Planning a Successful Website: Part 2 7 Chapter : Planning a Successful Website: Part 2 8 You should group related links into a navigation area to create an eye-catching design element Navigation menu Navigation bar Drop-down menus Navigation tabs Chapter : Planning a Successful Website: Part 2 9 Chapter : Planning a Successful Website: Part 2 10 A breadcrumb trail is a hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the currently viewed page A with a large number of pages and a complex structure often provides a map, also called a index Chapter : Planning a Successful Website: Part 2 11 Chapter : Planning a Successful Website: Part

3 A search feature is another popular navigation tool for s with a large number of pages A hosted search provider is a thirdparty company that uses spiders or other tools to build a searchable index of your s pages and then hosts the index on their servers Chapter : Planning a Successful Website: Part 2 13 Chapter : Planning a Successful Website: Part 2 1 Step 5: Design the Look and Feel of the Website You can create visual consistency by repeating design features typeface, content position, color scheme company or name, logo, and major links across all pages at a site Inconsistent appearances confuse visitors Color and Visual Consistency Color schemes create unity Apply color scheme to the background, graphic art and illustrations, and text across all pages Choose background and text colors to provide sufficient contrast Choose graphics that match your color scheme Chapter : Planning a Successful Website: Part 2 15 Chapter : Planning a Successful Website: Part 2 16 Color and Visual Contrast The CSS specification allows web designers to use a text document, called a style sheet, to control the appearance of one or more pages at a Styles can create visual consistency Chapter : Planning a Successful Website: Part 2 17 Chapter : Planning a Successful Website: Part

4 Inline Style Inserted within a tag Internal Style Sheet Inserted within a page s heading tags External Style Sheet Saved in a folder with the s pages and linked to them with HTML tag Chapter : Planning a Successful Website: Part 2 19 Chapter : Planning a Successful Website: Part 2 20 Can ensure visual consistency across a s pages A well-designed layout creates a sense of balance Display certain items consistently (in the same place) on all pages Logo and name Search feature Links Content area Chapter : Planning a Successful Website: Part 2 21 Chapter : Planning a Successful Website: Part 2 22 Underlying structure of rows and columns, called a layout grid Allows you to precisely position and align page content CSS and page layout Style sheets can also be used to control page layout by dividing a page into sections, such as a header section or a navigation section <div> tag Chapter : Planning a Successful Website: Part 2 23 Chapter : Planning a Successful Website: Part 2 2

5 Tables Arrangement of cells in columns and rows Two common uses Create rows and columns of data Create webpage layout Step 6: Test, Publish, and Maintain the Website A formal usability test is an evaluation that generally takes place in a structured environment, such as a testing laboratory Create a that meets the needs of your hosting service Internal or external hosting vendor Size limits Update frequency Person in charge of updating Budget restrictions Chapter : Planning a Successful Website: Part 2 25 Chapter : Planning a Successful Website: Part 2 26 Site Plan Checklist Identify the s purpose and target audience Determine the s general content Select the s structure Specify the s navigation system Design the look and feel of the Test, publish, and maintain the Chapter Summary Discuss the relationship between page length, content placement, and usability Complete Step : Specify the s navigation system Complete Step 5: Design the look and feel of the Complete Step 6: Test, publish, and maintain the Use a checklist to review your web design plan Chapter : Planning a Successful Website: Part 2 27 Chapter : Planning a Successful Website: Part 2 28 Planning a Successful Website: Part 2 Web Design, 5 th Edition 5

Lecture 13. Page Layout. Mr. Mubashir Ali Lecturer (Dept. of Computer Science)

Lecture 13. Page Layout. Mr. Mubashir Ali Lecturer (Dept. of Computer Science) Lecture 13 Page Layout Mr. Mubashir Ali Lecturer (Dept. of dr.mubashirali1@gmail.com 1 Summary of the previous lecture Font properties Controlling text with CSS Styling links Styling background Styling

More information

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,

More information

HIERARCHICAL ORGANIZATION

HIERARCHICAL ORGANIZATION A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout

More information

Lesson 5 Introduction to Cascading Style Sheets

Lesson 5 Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes

More information

CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS

CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS BASICS OF WEB DESIGN CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS 1 LEARNING OUTCOMES Describe the most common types of website organization Describe principles of visual design Design for your target audience

More information

Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of

Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of the World Wide Web p. 3 Internet Standards and Coordination

More information

WEB PAGE ARCHITECTURE

WEB PAGE ARCHITECTURE The goals of webpage architecture: 1. Bring order to many types of information: text, images, links, navigation. 2. Create movement through the page. 3. Provide centers of visual interest that serve as

More information

Announcements. Term Paper due on Wednesday at the beginning of class Midterm #2 next Monday Fawzi Emad, Computer Science Department, UMCP

Announcements. Term Paper due on Wednesday at the beginning of class Midterm #2 next Monday Fawzi Emad, Computer Science Department, UMCP Announcements Term Paper due on Wednesday at the beginning of class Midterm #2 next Monday 1 Organization of Complex Web Site A complex site typically consists of three separate components: 1. HTML describes

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

Page 1 of 11 Units: - All - Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Introduction to the World of Web Standards Why do web development standards play a key role in the proliferation

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS: WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design

2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design Due Tuesday, Feb. 9 upload to Blackboard Locate five HTML (not Flash) websites you believe exhibit good web design, usability and accessibility principles. Each website s critique is worth 10 points (50

More information

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

More information

ADOBE 9A Adobe Dreamweaver CS4 ACE.

ADOBE 9A Adobe Dreamweaver CS4 ACE. ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without

More information

LECTURE 05 WEB DESIGN

LECTURE 05 WEB DESIGN MULTIMEDIA TECHNOLOGIES LECTURE 05 WEB DESIGN IMRAN IHSAN ASSISTANT PROFESSOR DESIGN FOR TARGET AUDIANCE CONSIDER THE TARGET AUDIENCE OF THESE SITES. WEB PAGE DESIGN BROWSER COMPATIBILITY Web pages do

More information

Layout Manager - Toolbar Reference Guide

Layout Manager - Toolbar Reference Guide Layout Manager - Toolbar Reference Guide Working with a Document Toolbar Button Description View or edit the source code of the document (for advanced users). Save the contents and submit its data to the

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Adobe Dreamweaver CS6 Digital Classroom

Adobe Dreamweaver CS6 Digital Classroom Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver

More information

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the complete URL of the linked document, including the domain

More information

Independence Community College Independence, Kansas

Independence Community College Independence, Kansas Independence Community College Independence, Kansas C O N T E N T S Unit 1: Creating, Modifying, and Enhancing FrontPage Webs and Pages 1 Chapter 1 Investigating FrontPage 2002 3 Exploring World Wide Web

More information

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...

More information

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer FORMS The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions Presented by: John Reamer Creating Forms Forms and Surveys: When and What to Use them For Both Allow you

More information

Tips & Tricks Making Accessible PowerPoint Presentations

Tips & Tricks Making Accessible PowerPoint Presentations Use Slide Layouts Why? Using the built-in slide layouts will ensure that the text you enter will be read correctly by a screen reader and will be shown in the Outline View. To add a new slide, select the

More information

Virto SharePoint Forms Designer for Office 365. Installation and User Guide

Virto SharePoint Forms Designer for Office 365. Installation and User Guide Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365...3 LICENSE ACTIVATION...4

More information

Overview. Importance of Design. Lost in hyperspace. Site Organisation. Designing Structure. Lecture 14 Web Usability

Overview. Importance of Design. Lost in hyperspace. Site Organisation. Designing Structure. Lecture 14 Web Usability Overview Lecture 14 Web Usability Boriana Koleva Room: C54 Email: bnk@cs.nott.ac.uk Website design Information structure Navigation Webpage design Text Graphics Audio Video Aesthetics Usability Importance

More information

How to deploy for multiple screens

How to deploy for multiple screens How to deploy for multiple screens Ethan Marcotte, a developer in Boston, coined the phrase responsive design to describe a website that adapts to the size of the viewer s screen. A demonstration site

More information

How to create a prototype

How to create a prototype Adobe Fireworks Guide How to create a prototype In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive prototype for a widget. A prototype is a

More information

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

COMSC-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 information

Discuss web browsers. Define HTML terms

Discuss web browsers. Define HTML terms Week 1 & 2 *discuss safety of the internet and classroom Describe the internet and it s associated key terms Describe the world wide web and key terms associated Discuss web browsers Define HTML terms

More information

Interactive Media CTAG Alignments

Interactive Media CTAG Alignments Interactive Media CTAG Alignments This document contains information about eight Career-Technical Articulation Numbers (CTANs) for the Media Arts Career-Technical Assurance Guide (CTAG). The CTANs are:

More information

Reading type and text on the web, what research shows us. How you can help to get your message across to your readers.

Reading type and text on the web, what research shows us. How you can help to get your message across to your readers. Reading type and text on the web, what research shows us. How you can help to get your message across to your readers. Assoc Professor Stephen Huxley, Swinburne University of Technology Research material

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

Editing your SiteAssist Professional Template

Editing your SiteAssist Professional Template Editing your SiteAssist Professional Template This Solution Recipe shows you how you can edit your SiteAssist Professional created templates to suit your needs. SiteAssist Professional creates your entire

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

WHAT YOU WILL LEARN IN THIS PHOTOSHOP TRAINING PROGRAM

WHAT YOU WILL LEARN IN THIS PHOTOSHOP TRAINING PROGRAM With Increase the online presence of business, create a website is first step for create online identity for any business. Every small and large enterprise need web designer, so they hire their own web

More information

Chapter 7 Typography, Style Sheets, and Color. Mrs. Johnson

Chapter 7 Typography, Style Sheets, and Color. Mrs. Johnson Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson Typography Typography refers to the arrangement, shape, size, style, and weight of text. Affects the navigation and usability of a web site and

More information

HTML5 & CSS 8 th Edition. Chapter 2 Building a Webpage Template with HTML5

HTML5 & CSS 8 th Edition. Chapter 2 Building a Webpage Template with HTML5 HTML5 & CSS 8 th Edition Chapter 2 Building a Webpage Template with HTML5 Objectives 1. Explain how to manage website files 2. Describe and use HTML5 semantic elements 3. Determine the elements to use

More information

In this tutorial, we are going to learn how to use the various features available in Flexbox.

In this tutorial, we are going to learn how to use the various features available in Flexbox. About the Tutorial Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. Flexbox layout gives complete control over the

More information

Word Tutorial 3. Creating a Multiple- Page Report COMPREHENSIVE

Word Tutorial 3. Creating a Multiple- Page Report COMPREHENSIVE Word Tutorial 3 Creating a Multiple- Page Report COMPREHENSIVE Objectives Format headings with Quick Styles Insert a manual page break Create and edit a table Sort rows in a table Modify a table s structure

More information

CSS: Layout, Floats, and More

CSS: Layout, Floats, and More CSS: Layout, Floats, and More CISC 282 September 27, 2017 Pseudo Selectors CSS selectors are typically document-related Reflect an element's context in the page Nesting, containing block, tag, class(es)...

More information

Adobe Web Authoring using Adobe Dreamweaver Exam and objectives

Adobe Web Authoring using Adobe Dreamweaver Exam and objectives Adobe Web Authoring using Adobe Dreamweaver Exam and objectives After taking the exam, your score is electronically reported. Please allow 2-4 weeks from the date you pass the exam to receive your ACA

More information

Bixby Public Schools Course Essential Elements Grade: Desktop Publishing

Bixby Public Schools Course Essential Elements Grade: Desktop Publishing Content Objective) applicable) Desktop Publishing Weeks 1-6 10-12 1. Create and edit a publication. 2. Design a newsletter. 3. Publish a tri-fold brochure 1-1 Start and quit Publisher 1-2 Describe the

More information

UNIVERSITY OF NORTH CAROLINA WILMINGTON

UNIVERSITY OF NORTH CAROLINA WILMINGTON Department: Contact Person: Date: Email: Online - Web & Course Accessibility Checklist Text, presentation & content Text equivalent is provided for every non-text element (i.e., image) (Solution: add an

More information

Chapter 4 Creating Tables in a Web Site Using an External Style Sheet

Chapter 4 Creating Tables in a Web Site Using an External Style Sheet Chapter 4 Creating Tables in a Web Site Using an External Style Sheet MULTIPLE RESPONSE Modified Multiple Choice 1. Attributes are set relative to the elements in a table. a. line c. row b. column d. cell

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

Call: SharePoint 2013 Course Content:35-40hours Course Outline

Call: SharePoint 2013 Course Content:35-40hours Course Outline SharePoint 2013 Course Content:35-40hours Course Outline Exploring SharePoint Designer 2013 Understanding SharePoint Designer 2013 Using SharePoint Designer to Carry Out Common Tasks Understanding What's

More information

Blackboard staff how to guide Accessible Course Design

Blackboard staff how to guide Accessible Course Design The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0

More information

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 1 Web Development & Design Foundations with HTML5 CHAPTER 5 WEB DESIGN Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to... Describe the most common types of website

More information

Guide for Creating Accessible Content in D2L. Office of Distance Education. J u n e 2 1, P a g e 0 27

Guide for Creating Accessible Content in D2L. Office of Distance Education. J u n e 2 1, P a g e 0 27 Guide for Creating Accessible Content in D2L Learn how to create accessible web content within D2L from scratch. The guidelines listed in this guide will help ensure the content becomes WCAG 2.0 AA compliant.

More information

Micronet International College

Micronet International College Name: /50 Class: Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 2 (20%) QUESTION 1 a) JPEG is a commonly used image file format on the web. What

More information

4. You should provide direct links to the areas of your site that you feel are most in demand.

4. You should provide direct links to the areas of your site that you feel are most in demand. Chapter 2: Web Site Design Principles TRUE/FALSE 1. Almost every Web site has at least one flaw. T PTS: 1 REF: 49 2. Not only should you plan for a deliberate look and feel for your Web site, but you must

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives. Overall Design Is Related to the Site Purpose. Website Organization

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives. Overall Design Is Related to the Site Purpose. Website Organization Web Development & Design Foundations with HTML5 Ninth Edition Chapter 5 Web Design Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links by using INSERT+F7 Learning

More information

E-Business Systems 1 INTE2047 Lab Exercises. Lab 5 Valid HTML, Home Page & Editor Tables

E-Business Systems 1 INTE2047 Lab Exercises. Lab 5 Valid HTML, Home Page & Editor Tables Lab 5 Valid HTML, Home Page & Editor Tables Navigation Topics Covered Server Side Includes (SSI) PHP Scripts menu.php.htaccess assessment.html labtasks.html Software Used: HTML Editor Background Reading:

More information

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best

More information

Learning DreamWeaver MX 2004

Learning DreamWeaver MX 2004 Contents Users Notes Software Requirements...xi The DW Support Files...xi Copying the DW Support Files...xi Windows Systems...xi Macintosh Systems...xi Using the Activities in Schools... xii The Chapter

More information

Full file at DW Chapter 2: Developing a Web Page

Full file at   DW Chapter 2: Developing a Web Page DW Chapter 2: Developing a Web Page TRUE/FALSE 1. To ensure that all links are current and work correctly, you need to test them regularly. ANS: T PTS: 1 REF: Dreamweaver 2-2 2. Too many text blocks, links,

More information

Virto SharePoint Forms Designer for Office 365. Installation and User Guide

Virto SharePoint Forms Designer for Office 365. Installation and User Guide Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365... 3 LICENSE ACTIVATION...

More information

PASTPERFECT-ONLINE. No web design or programming expertise is needed to give your museum a worldclass web presence.

PASTPERFECT-ONLINE. No web design or programming expertise is needed to give your museum a worldclass web presence. PASTPERFECT-ONLINE PastPerfect-Online is the fast, affordable and easy way to provide public access to your PastPerfect data via the World Wide Web. Built on proven MWeb technology, PastPerfect-Online

More information

Eng 110, Spring Week 03 Lab02- Dreamwaver Session

Eng 110, Spring Week 03 Lab02- Dreamwaver Session Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts,

More information

Dreamweaver. Links and Tables

Dreamweaver. Links and Tables Dreamweaver Links and Tables WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 ADDING HYPERLINKS... 2 New Text Hyperlink 2 Existing Text or Image Hyperlink 2 EXERCISE 1 3 New Text E-mail

More information

Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping

Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website. 1.2

More information

Working with Images and Multimedia

Working 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 information

Multimedia Design Guidelines MMP

Multimedia Design Guidelines MMP Multimedia Design Guidelines MMP 100-141 Metaphor A metaphor is a figurative representation that links the content of your website to an established mental model. Using metaphors in your website allows

More information

Create a Web Page with Spry Navigation Bar. March 30, 2010

Create a Web Page with Spry Navigation Bar. March 30, 2010 Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 [AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course

More information

Creating Page Layouts 25 min

Creating Page Layouts 25 min 1 of 10 09/11/2011 19:08 Home > Design Tips > Creating Page Layouts Creating Page Layouts 25 min Effective document design depends on a clear visual structure that conveys and complements the main message.

More information

Lesson 21 Getting Started with PowerPoint Essentials

Lesson 21 Getting Started with PowerPoint Essentials Getting Started with PowerPoint Essentials Computer Literacy BASICS: A Comprehensive Guide to IC 3, 4 th Edition 1 Objectives Identify the parts of the PowerPoint screen and navigate through a presentation.

More information

FrontPage 2000 Tutorial -- Advanced

FrontPage 2000 Tutorial -- Advanced FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right

More information

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab OBJECTIVES- 1.0 Setting Project Requirement 1.1 Identify the purpose, audience, and audience needs for

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

Interface Redesign: Thomson.com

Interface Redesign: Thomson.com Interface Redesign: Thomson.com December 7, 2004 Anne Finlayson Interface Designer INP Associates Interface Redesign: Thomson.com page 2 Table of Contents Executive Summary... 3 Analysis of Current Interface...

More information

NOTE: For this tutorial you will need Internet Explorer Click Site, then New Site, go to the Templates tab. Fig. 1.0

NOTE: For this tutorial you will need Internet Explorer Click Site, then New Site, go to the Templates tab. Fig. 1.0 1 NOTE: For this tutorial you will need Internet Explorer 8 1. Click Site, then New Site, go to the Templates tab. Fig. 1.0 2. Choose Organization 5 Fig.1.2 2 3. Double click default.html at the bottom

More information

Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES

Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Intro to FrontPage OVERVIEW: This handout provides a general overview of Microsoft FrontPage. AUDIENCE: All Instructional

More information

Lesson 15 Working with Tables

Lesson 15 Working with Tables Working with Tables Computer Literacy BASICS: A Comprehensive Guide to IC 3, 4 th Edition 1 Objectives Create a table and insert text. Insert and delete rows and columns. Adjust column width and row height.

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

JSN PageBuilder 3 Configuration Manual Introduction

JSN PageBuilder 3 Configuration Manual Introduction JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user

More information

Bootstrap All-in-One

Bootstrap All-in-One Solving big problems is easier than solving little problems. Sergey Brin Bootstrap All-in-One A Quick Introduction to Managing Content in Cascade Alex King, Jay Whaley 4/28/17 Bootstrap Docs Facilities

More information

Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio Release 8.1 Version 05

Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio Release 8.1 Version 05 Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio Release 8.1 Version 05 May 9, 2018 Active Technologies, EDA, EDA/SQL, FIDEL, FOCUS, Information Builders, the Information

More information

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments. Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

More information

Foundation of Web Goal 4: Proficiency in Adobe Dreamweaver CC

Foundation of Web Goal 4: Proficiency in Adobe Dreamweaver CC 1. Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website. 1.2 Identify web page content that is relevant to the website purpose and appropriate for the target

More information

Creating a Website with Publisher 2016

Creating a Website with Publisher 2016 Creating a Website with Publisher 2016 Getting Started University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2017 KSU Division of University Information

More information

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017 ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global

More information

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel. Adobe Dreamweaver CS6 Project 3 guide How to create forms You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback, sign a guest book, take

More information

Lesson 15 Working with Tables

Lesson 15 Working with Tables Working with Tables Computer Literacy BASICS: A Comprehensive Guide to IC 3, 5 th Edition 1 Objectives Create a table and insert text. Insert and delete rows and columns. Adjust column width and row height.

More information

Creating Universally Designed PowerPoint 2010 Documents - Quick Start Guide

Creating Universally Designed PowerPoint 2010 Documents - Quick Start Guide Creating Universally Designed PowerPoint 2010 Documents - Quick Start Guide Overview A universally designed PowerPoint presentation takes into account the various needs of the audience, whether they are

More information

Dreamweaver CS3 Concepts and Techniques

Dreamweaver CS3 Concepts and Techniques Dreamweaver CS3 Concepts and Techniques Chapter 3 Tables and Page Layout Part 1 Other pages will be inserted in the website Hierarchical structure shown in page DW206 Chapter 3: Tables and Page Layout

More information

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1 STRANDS AND STANDARDS Course Description Web Development is a course designed to guide students in a project-based environment, in the development of up-to-date concepts and skills that are used in the

More information

1.7 Uniform Resource Identifiers and Domain Names 13 URIs and URLs 13 Domain Names 13

1.7 Uniform Resource Identifiers and Domain Names 13 URIs and URLs 13 Domain Names 13 Chapter 1 Introduction to the Internet and World Wide Web 1 1.1 The Internet and the Web 2 The Internet 2 Birth of the Internet 2 Growth of the Internet 2 Birth of the Web 2 The First Graphical Browser

More information

POWERPOINT Build a Presentation to Remember

POWERPOINT Build a Presentation to Remember POWERPOINT 2007 Build a Presentation to Remember Microsoft Office 2007 TABLE OF CONTENTS DOCUMENT THEMES... 1 THEMES... 1 COLOR SETS... 1 FONT SETS... 1 MASTER SLIDES... 2 USING THEMES IN THE SLIDE MASTER...

More information

Getting to Know PowerPoint. Use IT+

Getting to Know PowerPoint. Use IT+ Getting to Know PowerPoint Use IT+ Introduction PowerPoint 2013 is a presentation software that allows you to create dynamic slide presentations. Slideshows can include animation, description, images,

More information