Web Design Outline

7/27/2019 Web Design Outline

1/8

WEB DESIGN OUTLINE N25,000

1. Introduction to web designing Definition of terms

o HTMLo Web pageo Website etc

Types of pages

Static pages Dynamic pages Web design tools Word processors notepad,wordpad etc Graphics applications- Fireworks,Flash,CorelDraw HTML editors-Dreamweaver, Frontpage

WEB DESIGN CONSIDERATIONS

File size Content Audience Space layout

Class work:10 ways to arrange a six cell table

Elements of a web page

Header Navigation bar Content area Footnote

Assignment:Browse through 3 web sites and draw the layout

.Draw the layout of 3 news papers and draw your own

Layout for web adaptation.


2/8

2. Introduction to HTML

HTML Document Object Model (DOM) Properties Methods Events

HTML Tags

Page composition Tags Page Element Tags Formatting and Layout Lists Forms Tables Scripting

HTML Tag properties

color font Height Width Name Id Src Vspace Hspace

HTML Tag Methods

BlurO


3/8

ClickO FocusO SubmitO

HTML Tag Events

Onblur Onclick Onfocus Onload

Structure of HTML page

Opening and closing tages Tag properties Sample HTML code 1-Blank page Sample HTML code 2- Table page Sample HTML code 3- Table with pictures

Assignment:2: Creating a page with tables image in notepad

3.

Introduction to web design using Adobe Dreamweaver

Installing Dreamweaver Understanding Dreamweaver user interface Modifying page properties Creating a static site in Dreamweaver

Assignment 3:creating a site in Dreamweaver and changing the page

property.

4. Text Creating a text object Formatting a text Font Style Size Color

Formatting a paragraph


4/8

Paragraph Heading 1-6 Preformatted text

Modifying a paragraph

Indent/ Block quote Out dent Align

Creating a list

Unordered list Ordered list

Special character

Line Break Non-breaking space Horizontal rule Other special characters Creating name anchors Creating hyperlink

Assignment: 4: Create a HTML help page.

5. Table objectView mode

Standard mode Expanded mode Layout mode

Creating tables in standerd mode

Adding rows and columns Deleting row and columus Splitting cells


5/8

Table properties Border width Border color Background color Background image Cell width Cell height

Creating tables in layout mode

Drawing a table Drawing a cell Inserting rows and columus around a cell Modifying table and cell properties

Assignment: 5; create premiership league table

6 Image object

Creating image Creating image placeholder

Modifying image properties

Height Width Align Source Alternate text

Making an image an anchor/hyperlink

Creating hotspots

Rectangular hostpot Circular hotspot Pologon

-Creating a rollover image

-Creating Navigation bar image

-Firework HTML

Drawing simple shapes Trimming your canvass Creating a button Exporting to dreamweaver


6/8

Assignment6:Creating names register, result, andattendance

Register with hotspot to anchor to 3 different classes

7. media embedding a flash document creating a flash button creating a flash text creating a flash paper creating a flash video creating a shockwave plugging creating a java applet Using the param object Inserting a sound plug-in Inserting a video plug-in Creating a marquee Modifying a marquee

Assignment 7:Create a video player page with a marquee of the playing file

and flash control button

8. lavers Creating a div tag Creating a layer modifying layer properties Animating layers Timeline Key frames Path Layer animation.

Assignment8. A simple balloon rising up in a page

Semi-project: Create a web site for a hotel. Features should include:

List of rooms Prices for different rooms Address of the hotel A marquee display of the rooms.

9. Forms

Form Text field Text area


7/8

Hidden field Button Check box Radio button/ radio group List /menu/ jump menu File fied Image field Field set Label

Assignment 9: Create a students registration forms.

Cascading sheet style (css)

Types of css Creating a new css Css rule definition category Type Background Block Box Border List Positioning Extensions Modifing a css Deleting a css Importing a css Applying a css to tags

Assignment 10: create css and apply it to semi-project work.

Behaviors

Different pre-defined behaviors. Different events for a behavior. Changing events for a particular behavior.

Assignment 11: Adding behaviors to semi- project.

Frames

Introduction to frames Types of frames Frameset Inline frame (iframes)


8/8

Creating frameset Using frameset Creating iframe Using iframes

Assignment 12: Create a library with frames.

Project: Desigh a website for a university with the following pages

Homepage Faculties Courses Fees News and events Students registration Staff recruitment

Documents

Web Design Outline