CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright...
-
Upload
meredith-chandler -
Category
Documents
-
view
214 -
download
0
Transcript of CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright...
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