Presentation on theme: "CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For."— Presentation transcript:
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
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
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
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.
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