C R E AT E A W E B PAG E

WEB DESIGN

2

EXAMPLE LAYOUT

3

WEB COMPONENTS

• Header• Banner and logo

• Footer• Copyright information or Address

• Horizontal Navigation• For internal reference, i.e., Home, About Us, Contact Us

• Vertical Navigation• Links to products and services

• Main Content• One-column with a chance of two or more

4

GOOGLE VS. YAHOO

5

CREATING THUMBNAILS

• Thumbnails help us work out the basic website navigation structure

6

WIREFRAMES

• Wireframes allow us to experiment with page designs quickly and easily without wasting time with code

7

FINAL DESIGN FOR WIREFRAME

8

A MOCKUP BY PHOTOSHOP

C R E AT E A W E B PAG E

LET’S TRY IT

10

EXAMPLE WEB LAYOUT

11

LAYOUT

Header (Banner)

Menu

Content

Footer

12

HOW TO CREATE THIS WEBPAGE

• Create layout using a table

• Add a banner to the “Header” area

• Add “Copyright” to the “Footer” area

• Add “Rollover Image” object with links to the “Menu” area

• Add contents as desired in the “Content” area

13

CREATE TABLE AS THE MAIN LAYOUT

• Create a table with 2 columns and 3 rows• Set table width to 800 pixels• Set border, cellpad, and cellspace to 0

• Merge 2 cells in the top row for banner• Merge 2 cells in the bottom row for footer• Select 2 cells• Right click -> select “Table” -> “Merge Cells”

14

INSERT IMAGE TO BANNER AREA

15

ADD COPYRIGHT IN FOOTER

• Click in the bottom row• Click on “Bg” button• Select light gray from color palette

16

INSERT COPYRIGHT

• Insert Copyright in the bottom row by• Click on “Insert” menu• Select “HTML” -> “Special Characters” -> “Copyright”• Then type the Copyright …….

17

CREATE MENU

• Click in the menu area• Insert a table with 1 column and 4 rows• Enter 150 pixels width• Set border, cellpad, and cellspace to 0

18

INSERT ROLLOVER IMAGE IN THE MENU AREA

• Insert Rollover image in each menu cell• Select “Original image:” and “Rollover image:

• Add the destination of the link in the “When clicked, Go to URL” textbox

19

RESULT OF ADDING HOME BUTTON

• Repeat the rollover image for all the rest of menus

20

RESULT OF ADDING ROLLOVER IMAGES

21

AN EXAMPLE OF COMPLETED PAGE

C R E AT E M E N U W I T H I M AG E M A P

IMAGE MAP

23

INSERT IMAGE TO BE THE MENU

24

CREATING IMAGE MAP

• Enter Map name in the Map’s Textbox

• Select shape tools (in this case select “Polygon”)

25

CREATE LINKS ON A SELECTED SHAPE

• Use “Polygon” Tool to create a shape

• Enter the destination where we want to the link to go to

• Repeat this for the rest of menus

A D D I N G V I D E O A N D A U D I O O B J E C T

ADD MEDIA

27

HOW TO INSERT A VIDEO CLIP

• Open “code” view• Add “video” tag (for HTML 5)• Set width and height• Add controls (if we need the play/pause and other

controls buttons)• Add autoplay (If we need the clip to start automatically)• Add “source” tag with properties: src = “filename” and

type=“video/file type”

<p> <video width="320“ height="240" controls autoplay> <source src="vdo.mp4" type="video/mp4"> Your browser does not support the video tag. </video></p>

28

RESULT OF VIDEO OBJECT

29

ADD AN AUDIO OBJECT

• This is an example of how to add an audio tag in the “code view” (HTML 5)

<audio controls autoplay>  <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3“ type="audio/mpeg"> Your browser does not support the audio element.</audio>

30

INSERT A FLASH VIDEO FILE

• Click menu “Insert” -> “Media” -> “FLV…”

31

ADD PARAMETER FOR FLV OBJECT

• Enter “URL” for the file location

• Select Skin as wanted

• Click “Detect Size” button for the real size or enter width and height

• Select “Auto play” if need clip to start automatically

32

RESULT OF FLV OBJECT