Web Design - Course by Wan

8/11/2019 Web Design - Course by Wan

1/89

Web Design

By

Wan Nurhayati Binti Wan Ab. Rahman


2/89

Contents

Overview of Web

Hypertext Markup Language (HTML) Cascading Style Sheet (CSS) E-learning Web Application


3/89

Overview of Web

The web was invented in 1990 by Tim Berners-Lee.

The web is an application running on theInternet.

The web primarily uses the Hypertext TransferProtocol (HTTP) as the communicationprotocol.


4/89

Overview of Web

Browsers: WorldWideWeb by Tim Berners-Lee Mosaic and Netscape Internet Explorer by Microsoft Mozilla Firefox by AOL Safari by Apple and Chrome Opera


5/89

Overview of Web

Visual Design Tools: Adobe Dreamweaver Microsoft Expression Web

Legacy Programs

Code-based Tools: TextEdit and Notepad Dreamweaver and Expression Web Eclipse HomeSite


6/89

Overview of Web

Graphics Programs Adobe Photoshop Adobe Illustrator Adobe Fireworks Corel Draw


7/89

Overview of Web

Planning Your Site: Design Concept Design Wireframe Storyboard Pages

Understanding Your Audience:

Market Studies Demographics Local Business with Global Customers


8/89

Overview of Web

Gather Your Materials Root Folder Images

Multimedia Assets Source Document

Plan Your Navigation Structure Main Navigation Section Subnavigation Think Like Users


9/89

Overview of Web

Plan Your File Structure: Organizing Below the Root Naming Folders Images Directory Other Assets


10/89

HTML

HTML documents are made up of textsurrounded by tags:

Elements are the basic pieces that make upHTML.

Attributes provide the additional details onhow that element should display.


11/89

Declare Your Document Type

Web Design

Declare YourDocument Type


12/89

Add Headings

Web Design

Welcome to my page

Add Headings


13/89

Add Headings

h1


14/89

Add Headings

h1

h6


15/89

Add Paragraphs

Web Design

Welcome to my page

Please look around the site.

Feel free to contact me for more information.

Add Paragraphs


16/89

Add Paragraphs

Add Paragraphs


17/89

Apply Logical Formatting

Web Design

Welcome to my page

Pleaselook around the site.

Feel free tocontact me for more information.

Bold

Italicize


18/89

Apply Logical Formatting

Italicize

Bold


19/89

Link to Other Pages in Your Site

Web Design

Welcome to my page



Second Page

Link


20/89

Link to Other Pages in Your Site

Link


21/89

Link to Pages on the Web

Web Design

Welcome to my page



Second Page

Search Google

Link


22/89

Link to Pages on the Web

Link


23/89

Link within a PageWeb Design

Welcome to my page



Second Page

Search Google

To top< /p>

Link


24/89

Link within a Page

Link


25/89

Link to an E-mail AddressWeb Design

Welcome to my page


Feel free tocontact

mefor more information.

Second Page

Search Google

To top

Link


26/89

Link to an E-mail Address

Link


27/89

Link to Other Document TypesWeb Design

Welcome to my page


Feel free to contact me for more

information.

You can also know more about us by downloading myinformation.

Second Page

Search Google

To top

Link


28/89

Link to Other Document Types

Link


29/89

Show Tool Tips for Links

Web Design

Welcome to my page


Feel free to contact me for more

information.

You can also know more about us bydownloading my information.

Second Page

Search Google

To top

Link


30/89

Show Tool Tips for Links

Link


31/89

Add an Image to Your Web Page

Web Design

Add an Image


32/89

Add an Image to Your Web Page

Add an Image


33/89

Use Images as Links

Web Design

Use Images asLinks


34/89

Use Images as Links

Use Images asLinks


35/89

Add an Unordered List

Web Design

Working experiences:

TutorLecturerSenior Lecturer

Add anUnordered List


36/89

Add an Ordered List

Web Design

Core activities:

TeachingResearch and PublicationSupervision

Add an OrderedList


37/89

Add Unordered & Ordered List

Add an OrderedList

Add anUnordered List


38/89

Add a Definition List

A Definition list is one in which definitionor description of the items are given.

A Definition list is defined by tag.

The items are encoded in ( defintion

term ) tag and the description of the itemsare encoded in ( definition data ) tag.


39/89


Web Design

ResearchGrant and PublicationSupervisionPhD and Master

Add a DefinitionList


40/89


Add a DefinitionList


41/89

Tables Tags ... - define table in HTML

... - specifies a table row within a table

... - defines a table header cell

...

- defines a table data cell

Add Data TablesTutorial to the basic HTML from www.3schools.com


42/89

Table demonstration

One row and One Column

one Row One column:

1,1



43/89

Tutorial to the basic HTML from www.3schools.com


44/89

One Row Two Column

One Row and Two Columns

1,1 1,2


f


45/89



46/89

Two Row and Two ColumnTwo Rows and Two Columns:

1,1 1,2

2,1 2,2


T i l h b i HTML f 3 h l


47/89



48/89

Adding Forms to Your Site

A form in HTML consists of a group of form controlswrapped in a tag.

The tag takes two common attributes: action andmethod.

The value of action is a URL to a page that contains thecode necessary to process the forms data. The method attribute accepts one of two values. Setting the values to get instructs the browser to send

the forms data by appending it to the actions URL,whereas the value post has the browser send the dataas part of the background information it normallysends to the server.

Web Design by Huddleston


49/89

Create a Form and Add a Text Field

Adding Forms

Contact Me

First Name:

Add a Form

Add a Text Field


50/89

Create a Form and Add a Text Field

Add a Text Field


51/89

Add a Label and Check BoxesAdding Forms

Contact Me

My query is in regard to:
Bachelor Project

Master ProjectPhD Project

Add Check Boxes

Add Labels


52/89

Add a Label and Check Boxes

Add Check Boxesand Labels


53/89

Add Radio ButtonsAdding Forms

Contact Me

I am:

Current StudentFuture Student

Add Radio Buttons


54/89

Add Radio Buttons

Add Radio Buttons


55/89

Create a Drop-Down ListAdding Forms

Contact Me

Please contact me via:

EmailPhoneMail

Create a Drop-Down List


56/89




57/89

Insert a Text AreaAdding Forms

Contact Me

Additional comments:

Insert a Text Area


58/89

Insert a Text Area

Insert a Text Area


59/89

Add a Button to Your Form

Adding Forms

Contact Me

Insert a Button


60/89

Add a Button to Your Form

Insert a Button


61/89

HTML Style AttributeThe purpose of the style attribute is to provide

a common way to style all HTML elements.

HTML Style Examples:style= "background-color:yellow"

style= "font-size:10px"style= "font-family:Times"

style= "text-align:center

HTML Style AttributeTutorial to the basic HTML from www.3schools.com


62/89

HTML Style Attribute

Look! Styles and colors

This text is inVerdana and red

This text is in Times

and green

This text is 30 pixels high

This is the new style attributes.The obsolete old style was:




63/89



64/89

CSS

CSS documents are plain text and can bewritten in any text editor.

CSS documents are made up of a series ofrules.

Each rule includes a selector and adeclaration.


65/89

CSS

Selectors define the parts of the HTMLdocument to which the rules will apply.

CSS declarations are made up properties andvalues.


66/89

Types of CSS

Inline Styles Configured in the body of the Web page Use the style attribute of an XHTML tag

Apply only to the specific element

Embedded Styles Configured in the header section of a Web page. Use the XHTML element Apply to the entire Web page document


67/89

Types of CSS

External Styles Configured in a separate text file with .css file

extension

The XHTML element in the header section of aWeb page associates it with the .css file

Imported Styles Similar to External Styles Well concentrate on the other three types of styles


68/89

Common CSS Properties

background-color color font-family font-size font-style font-weight line-height

margin text-align text-decoration width


69/89

Using color on Web Page

Computer monitors display color as intensities ofred, green, and blue light - RGB color.

The values of red, green, and blue vary from 0 to255.

Hexadecimal numbers (base 16) represent thesecolor values. # is used to indicate a hexadecimal value Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color


70/89

Using color on Web Page

Color Chart http://webdevfoundations.net/color
http://webdevfoundations.net/colorhttp://webdevfoundations.net/color


71/89

How to choose a color scheme?

Monochromatic http://meyerweb.com/eric/tools/color-blend

Choose from a photograph or other image http://www.colr.org

Begin with a favorite color

Use one of the sites below to choose other colors http://colorsontheweb.com/colorwizard.asp http://kuler.Adobe.com http://colorschemedesigner.com/
http://meyerweb.com/eric/tools/color-blendhttp://www.colr.org/http://colorsontheweb.com/colorwizard.asphttp://kuler.adobe.com/http://colorschemedesigner.com/http://colorschemedesigner.com/http://kuler.adobe.com/http://colorsontheweb.com/colorwizard.asphttp://www.colr.org/http://meyerweb.com/eric/tools/color-blendhttp://meyerweb.com/eric/tools/color-blendhttp://meyerweb.com/eric/tools/color-blend


72/89

Accessibility & Color

Not everyone are able to see or distinguish between colors

Information must be conveyed even if color cannot be viewed

According to Vischeck http://www.vischeck.com/vischeck 1 out of 20 people experience some type of color deficiency Color choice can be crucial Avoid using red, green, brown, gray, or purple next to each other

White, black, and shades of blue and yellow are easier to differentiate.

Simulation:http://www.vischeck.com/vischeck/vischeckURL.php
http://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeck


73/89

Configuring Color with Inline CSS

Example 1: configure red color text in an elementHeading text is red

Example 2: configure red text and gray background in theheading

Separate style rule declarations with ;This isdisplayed as a red heading with gray background


74/89

CSS Embedded Styles

body { background-color: #E6E6FA;

color: #191970;font-family: Arial, Verdana, sans-

serif; }h1 { background-color: #191970;

color: #E6E6FA;line-height: 200%;font-family: Georgia, "Times New

Roman", serif; }h2 { background-color: #AEAED4;

color: #191970;font-family: Georgia, "Times New

Roman", serif; }p {font-size: .90em; }ul {font-weight: bold; }


75/89

CSS Selectors

CSS style rules can be configured for:

HTML element selector

class selector

id selector


76/89

Using CSS with Class Selector

Apply a CSS rule to a certain "class" ofelements on a Web page

Does not associate the style to aparticular XHTML element

Configure with .classname The sample creates a class called

new with red italic text.

To use the class, code the followingXHTML:

This is text is redand in italics

.new { color: #FF0000; font-style: italic;

}


77/89

Using CSS with Id Selector

Apply a CSS rule to ONE elementon a Web page.

Configure with #idname

The sample creates an id callednew with red, large, italic text.

To use the id, code the followingXHTML:

This is text is red,large, and in italics

#new { color: #FF0000;

font-size:2em;font-style: italic;

}


78/89

XHTML element

A block-level element purposely to configure aspecially formatted division or area of a Webpage.

There is a line break before and after the division Can contain other block-level and inline elements

Useful to define an area that will contain otherblock-level tags (such as paragraphs or spans)within it.


79/89

XHTML Element Example

Configure a page footer area with embedded CSS:

.footer { font-size: small; text-align: center; }

XHTML:


80/89

XHTML element

An inline-level element purposely to configurea specially formatted area displayed in-linewith other elements, such as within a

paragraph.

There is no line break before and after the

span.


81/89

XHTML Element Example Embedded CSS:

.companyname { font-weight: bold;font-family: Georgia, "Times New Roman", serif;font-size: 1.25em;}

XHTML:

Your needs are important to us at


82/89

External Style Sheets

CSS style rules are contained in a text fileseparate from the XHTML documents.

The External Style Sheet text file: extension ".css" contains only style rules does not contain any XHTML tags


83/89

External Style Sheets

Multiple web pages can associate with thesame external style sheet file.

body {background-color:#E6E6FA;

color:#000000;font-family:Arial, sans-

serif;

font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px;

font-weight: bold; }

index.htm

clients.htm

about.htm

Etc

site.css

h l k l


84/89

The Element

A self-contained tag

Placed in the header section

Purpose: associates the external style sheetfile with the web page.

Example:

l l h


85/89

Using an External Style Sheet

External Style Sheet color.css

body { background-color: #0000FF; color: #FFFFFF;}

To link to the external style sheet calledcolor.css, the XHTML code placed in the headersection is:

C i P C i h CSS


86/89

Centering Page Content with CSS #container { margin-left: auto; margin-right: auto; width:80%; }

E l i W b A li i


87/89

E-learning Web Application

Effective e-learning application features ( www.cisin.com ): Virtual classrooms Audio, video, chat via text Whiteboard and screen sharing Online forums Online quizzes Exam/test engine, self evaluation Tracing performance, report and statistics Student and instructor management Training and scheduling Course builder, content management Document management Multi-language UI

E l i W b A li i
http://www.cisin.com/http://www.cisin.com/http://www.cisin.com/http://www.cisin.com/http://www.cisin.com/http://www.cisin.com/


88/89

E-learning Web Application

Some examples of e-learning applications: http://lms.upm.edu.my/i3learn/www/about.htm http://openlearn.open.ac.uk/

http://www.e-learningforkids.org/

Th k Y
http://lms.upm.edu.my/i3learn/www/about.htmhttp://openlearn.open.ac.uk/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://www.e-learningforkids.org/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://openlearn.open.ac.uk/http://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htmhttp://lms.upm.edu.my/i3learn/www/about.htm


89/89

Thank You

Email:

[email protected]

Website:

http://www.fsktm.upm.edu.my/~wannur/index.html
mailto:[email protected]://www.fsktm.upm.edu.my/~wannur/index.htmlhttp://www.fsktm.upm.edu.my/~wannur/index.htmlmailto:[email protected]

Date post:	03-Jun-2018
Category:	Documents
Upload:	elvimalik
View:	218 times
Download:	0 times

Web Design - Course by Wan

Documents