CREATE A WEBPAGE WEB DESIGN

EXAMPLE LAYOUT 2

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 3

GOOGLE VS. YAHOO 4

CREATING THUMBNAILS Thumbnails help us work out the basic website navigation structure 5

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

FINAL DESIGN FOR WIREFRAME 7

A MOCKUP BY PHOTOSHOP 8

CREATE A WEBPAGE LET’S TRY IT

EXAMPLE WEB LAYOUT 10

LAYOUT Header (Banner) Menu Content Footer 11

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 12

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” 13

INSERT IMAGE TO BANNER AREA 14

ADD COPYRIGHT IN FOOTER Click in the bottom row Click on “Bg” button Select light gray from color palette 15

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

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 17

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 18

RESULT OF ADDING HOME BUTTON Repeat the rollover image for all the rest of menus 19

RESULT OF ADDING ROLLOVER IMAGES 20

AN EXAMPLE OF COMPLETED PAGE 21

CREATE MENU WITH IMAGE MAP IMAGE MAP

INSERT IMAGE TO BE THE MENU 23

CREATING IMAGE MAP Enter Map name in the Map’s Textbox Select shape tools (in this case select “Polygon”) 24

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 25

ADDING VIDEO AND AUDIO OBJECT ADD MEDIA

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” 27 Your browser does not support the video tag.

RESULT OF VIDEO OBJECT 28

ADD AN AUDIO OBJECT This is an example of how to add an audio tag in the “code view” (HTML 5) 29 Your browser does not support the audio element.

INSERT A FLASH VIDEO FILE Click menu “Insert” -> “Media” -> “FLV…” 30

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 31

RESULT OF FLV OBJECT 32