MIT 511- Web Design & Usability

Slides:

Advertisements

Similar presentations

HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>

Advertisements

Introduction to HTML & CSS

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.

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

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.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011.

4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

Welcome to Our Website Comments and Suggestions Welcomed! Presented by: Vicky Green.

Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.

18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Website Development with Dreamweaver

Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

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.

Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober

Planning your site/organization on the Web Please use speaker notes for additional information!

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.

Miguel Lara, PhD. 1:10 – 1:15 Pre-test 1:15 – 1:30 Course overview 1:30 – 2:00 Setting up DW Site 2:00 – 2:05 > 2:05 – 2:55 Hands-on Lecture 2:55 – 3:00.

4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

CHAPTER 4 CREATING STYLES AND LAYOUTS WITH CSS. CHAPTER OBJECTIVES Create ID-based styles Position content with CSS Format text with CSS Identify CSS.

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

1 ITEC 4830 Graphics Design Chapter 1 Dreamweaver MX 2004 Basics.

Before We Begin Please download the files from as we will be using them in our walkthroughs.

COMP 143 Web Development with Adobe Dreamweaver CC.

WEB DESIGN Presentated By Amit Kapri Contact No

1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…

Cascading Style Sheets - CSS December 20, 2008 NTPCUG Expression Web SIG.

Unit 15 – Web Authoring Web Authoring Project.

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

Miguel Lara, PhD. Design and development instructional websites using a variety of web technologies such as HTML5, CSS, JavaScript, and jQuery.

Cascading Style Sheets (CSS) Internal Style Sheets Classes

Web Basics: HTML/CSS/JavaScript What are they?

Objective % Select and utilize tools to design and develop websites.

CSS HTML and website development.

>> Introduction to CSS

HTML and Website Development

Cascading Style Sheets (Layout)

HTML Basics and CSS style

Objective % Select and utilize tools to design and develop websites.

Introduction to web design discussing which languages is used for website designing

CASCADING STYLE SHEET CSS.

Introduction to Web Authoring

Introduction to Web Authoring

Lesson 4 – Introduction to CSS

Web Design and Development

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.

CS7026: Authoring for Digital Media

Presentation transcript:

MIT 511- Web Design & Usability

Agenda Housekeeping Discussion of readings Webpage: Project lab Html hierarchy & CSS box model Web Usability & Accessibility Educational Website Redesign Project lab

HTML Document hierarchy

HTML tag Cheatsheet http://www.w3schools.com/tags/ http://www.w3.org/2009/cheatsheet/

CSS (Cascading Style Sheets) Source: (Lynch and Horton, 2011) Language for describing the presentation of Web pages, including colors, layout, and fonts. Source: W3C

CSS Box model

Peter Morville’s User Experience Honeycomb Web Usability Peter Morville’s User Experience Honeycomb

https://youtu.be/BEFgnYktC7U Web Accessibility When building a website, follow: Principles of Accessible Design https://youtu.be/BEFgnYktC7U

Educational Website Redesign

Educational Website Redesign

1. Setting up the website Defining the site Creating and saving a html page Setting up the main sections of the site Creating and saving CSS file.

2. Designing the header section Extracting assets from Photoshop Defining the background color Adding image and Alternative (Alt)-text (accessibility) Creating a div

3. Designing the navigation section Defining the background color Adding a navigation list/ CSS selector Adding links to the navigation list/CSS selector CSS transitions

4. Designing the content section Adding the image and Alternative (Alt)-text (accessibility) Creating a Div Adding text (Heading & Paragraph)

5. Designing the footer section Defining the background color Adding text (Hyperlinks) Creating a Div

Next class Read Rapid Elearning Authoring Tool Dreamweaver Project Draft is due next class Oct 24th. Please have it at least 1-2 pages of your website redesign completed for feedback. Breakout session: share your website with peers and provide any suggestions before submission.