Introduction to Elements of Web Design: WYSIWYG WYSIWYG. What You See Is What You Get

Similar documents
Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.

เพ มภาพตามเน อหาของแต ละบท. Basic of Web Design by Assoc. Prof. Churee Techawut and Dr. Ratsameetip Wita adapted into English by Dr.

11/5/16 WEB DESIGN. Branding Fall 2016

RICH ENTERPRISES. Small Business Series. Getting Started with HTML

CCM Website toolkit. Version 1.2 working draft Author Bobby Kimutai. Change revisions. Video links updated

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

Website Design and Development CSCI 311

How to create a prototype

Harlan County Public Schools. NTI Days Web Design, Advanced Multimedia. Grades 9-12, HCHS

OSF UnifyCOMMERCE for Commerce Cloud. OSF UnifyCOMMERCE COMMUNITY Integration. User Guide

Navigating Your e-portfolios

INTRODUCTION (1) Recognize HTML code (2) Understand the minimum requirements inside a HTML page (3) Know what the viewer sees and the system uses

PRODUCTION PHASES CHANGES

How to Create Accessible PowerPoint (2016) Documents

A network is a group of two or more computers that are connected to share resources and information.

Introduction to web development and HTML MGMT 230 LAB

Module 9: WayBackMachine Redesign

BMS2062 Introduction to Bioinformatics. Lecture outline. What is multimedia? Use of information technology and telecommunications in bioinformatics

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

HIERARCHICAL ORGANIZATION

ADOBE DREAMWEAVER CS4 BASICS

Basic Internet Skills

Adobe Dreamweaver CS5 Tutorial

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

Bixby Public Schools Course Essential Elements Grade: Desktop Publishing

Creating an with Constant Contact. A step-by-step guide

unformatted text: this is also known as plaintext and enables pages to be created which comprise strings of fixed-

How to Create Accessible Word (2016) Documents

Editing the Home Page

Web Design and Development ACS-1809

Web Design. Basic Concepts

Adobe Dreamweaver CC 17 Tutorial

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

The viewer makes it easy to view and collaborate on virtually any file, including Microsoft Office documents, PDFs, CAD drawings, and image files.

Text and Lists Use Styles. What Are Styles?

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

How to do an On-Page SEO Analysis Table of Contents

Creating an with Constant Contact. A step-by-step guide

Chapter 13. Applets and HTML. HTML Applets. Chapter 13 Java: an Introduction to Computer Science & Programming - Walter Savitch 1

FCKEditor v1.0 Basic Formatting Create Links Insert Tables

Using Dreamweaver CS6

Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme

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

Creating and Managing Snippets

Introduction: History of HTML & XHTML

MS Word 2010 Accessibility Fundamentals

Dreamweaver Primer. Using Dreamweaver to Create and Publish Simple Web Pages. Mark Branom, Stanford University, Continuing Studies June 2011

Dreamweaver is a full-featured Web application

Creating your own Website

Getting Started with. PowerPoint 2010

FileNET Guide for AHC PageMasters

Authoring World Wide Web Pages with Dreamweaver

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

Using Picasa Web Albums North Canton City Schools - Eric Curts

How to lay out a web page with CSS

Html basics Course Outline

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

The head Web designer walks into your sumptuous office and says, We

! " # $%& Html.htm Note: Files under html.htm are created in the previous lab exercises. (Just link it up)

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.

Introduction to DreamWeaver CS4

Web design and development ACS Chapter 5. Working with Text

Using Dreamweaver CS3 to Create and Publish Simple Web Pages

UX Case Study 1 Objective

FileNET Guide for AHC PageMasters

Foundation of Web Goal 4: Proficiency in Adobe Dreamweaver CC

Getting Started with the Aloha Community Template for Salesforce Identity

CREATING WEBSITES. What you need to build a website Part One The Basics. Chas Large. Welcome one and all

CREATING CONTENT WITH MICROSOFT POWERPOINT

Event Manager Instructor Start-Up Guide

Dahlia Web Designs LLC Dahlia Benaroya SEO Terms and Definitions that Affect Ranking

Type the name you want to appear on your web page (here you can type whatever want to appear on top of your page, i.e. Ms.

Beyond Captioning: Tips and Tricks for Accessible Course Design

APPENDIX. Using Google Sites. After you read this appendix, you will be able to:

Full file at DW Chapter 2: Developing a Web Page

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

ArtOfTest Inc. Automation Design Canvas 2.0 Beta Quick-Start Guide

+1 (646) (US) +44 (20) (UK) Blog. for Magento 2. ecommerce.aheadworks.com/magento-2-extensions

Website, Content, and Design Terminology

MS Word 2013 Accessibility Fundamentals

Creating Accessible Word Documents Tutorial

request HTML Document send HTML Document

DAS Disability & Accessibility Services. Creating Accessible PowerPoints

More about HTML. Digging in a little deeper

Andale Store Getting Started Manual

HTML, XHTML, and CSS. Sixth Edition. Chapter 1. Introduction to HTML, XHTML, and

205CDE: Developing the Modern Web. Assignment 1: Designing a Website. Scenario: D Bookshop

Secrets of Profitable Freelance Writing

RIT Wiki 5.1 Upgrade - May 21, 2013

AUDIT REPORT BELMONT TV.COM. Sep 14, Report Content Last Updated. On-Page Optimization. Off-Page Optimization. Keywords Report.

The online customer experience: researching and planning a web presence MBA 563 WEEK 5

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles

Beginning HTML. A tag is a command written between angle brackets (the less than and greater than symbols). Ex. <html>

> > > Portfolio Project

Dreamweaver is a full-featured Web application

Faculty Training. Blackboard I Workshop Bobbi Dubins

Web Development & Design Foundations with HTML5

Chatter Answers Implementation Guide

Karlen Communications Track Changes and Comments in Word. Karen McCall, M.Ed.

How to use the Molecular Workbench (MW) authoring environment to modify an existing activity.

Transcription:

Introduction to Elements of Web Design: WYSIWYG WYSIWYG What You See Is What You Get There are many WYSIWYG Web design programs available, including Dreamweaver and WIX. These programs generate the HTML code in the background while you create the web page graphically.

Introduction to Elements of Web Design: HTML HTML HyperText Markup Language is the standard language utilized for the creation of web pages. WIX and other WYSIWYG editors create the HTML code in the background. Here is some HTML code from the Coe.edu web page:

Introduction to Elements of Web Design: URL URL URL is an acronym for Uniform Resource Locator and is a reference (or address) to a resource on the Internet. It has two components: Protocol Identifier, the first part http:// https:// and Resource Name, the second part www.google.com www.amazon.com etc. In a sentence: Can you email me the URL of your new website?

Introduction to Elements of Web Design: Above the Fold Above the Fold Above the Fold This is the area of the web page that is visible when the page loads before any scrolling by the user. When the user scrolls down, he/she is viewing content below-the-fold, or outside-the-fold. The most important information must be above the fold.

Introduction to Elements of Web Design: Masthead Masthead (Sometimes known as Header ) The masthead is the top area of a web page that contains important identification information, like the business name, slogan, navigation buttons, and the shopping cart button. You have a chance to establish a sense of brand in this area viewers should be able to get a strong idea of what the business is about. Building the masthead with WIX is going to be fun! WIX has a great interface. The Apple Masthead Area

Introduction to Elements of Web Design: Font Faces Sans-Serif versus Serif Font Faces Sans-Serif font faces are plain and do not have decorations. These may be easier to read on a computer screen. W E B Serif font faces have decorations. These may be used to draw attention to certain areas of the Web page, like the business name and slogan. W E B WEB

121 121 ( One-To-One ) It is typically beneficial to all parties involved in e-commerce if the end-user is treated as a unique individual as opposed to treating customers as part of a group of similar people. Try to establish a one-to-one relationship with your customers. One way you can do this is by providing special modifications to products, like the inseam and hemming options the B2C Lands End website provides to customers (this is actually quite rare online): https://business.landsend.com/

Site Structure, Sitemap Site Structure, Sitemap Organizing the link structure of the website is very important. Begin this by making sketches or by using Microsoft Word SmartArt. This is also called the Sitemap.

Wireframes Wireframes Wireframes are blueprints for the design of your website. It helps you visualize the layout of the page before it is made, and decide where to put important content. A hand-drawn sketch is usually completed, or Microsoft Word can be used. Let s try creating a Wireframe for ESPN.com with Word

Research Research The most common form research takes is asking the client to name web sites that he or she likes and dislikes. Questioning the client further, asking why they like or dislike those web sites or elements of those sites is even more helpful. - Elliot Jay Stocks, Sexy Web Design (Book)

In Class Group Activity: Research Directions In groups of 2 or 3 look online for wonderfully designed websites. After a brief discussion, select one to share with the class. Tell us why do you like the website? Pick someone in the group to tell us about the website. Use details in your response. Sharing will be done seated at your computer. I will bring your computer screen up on the front screen, and you can use the cursor to point to specific aspects of the website.