create a webpage web design. example layout 2 web components header banner and logo footer copyright...
TRANSCRIPT
![Page 1: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/1.jpg)
C R E AT E A W E B PAG E
WEB DESIGN
![Page 2: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/2.jpg)
2
EXAMPLE LAYOUT
![Page 3: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/3.jpg)
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
![Page 4: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/4.jpg)
4
GOOGLE VS. YAHOO
![Page 5: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/5.jpg)
5
CREATING THUMBNAILS
• Thumbnails help us work out the basic website navigation structure
![Page 6: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/6.jpg)
6
WIREFRAMES
• Wireframes allow us to experiment with page designs quickly and easily without wasting time with code
![Page 7: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/7.jpg)
7
FINAL DESIGN FOR WIREFRAME
![Page 8: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/8.jpg)
8
A MOCKUP BY PHOTOSHOP
![Page 9: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/9.jpg)
C R E AT E A W E B PAG E
LET’S TRY IT
![Page 10: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/10.jpg)
10
EXAMPLE WEB LAYOUT
![Page 11: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/11.jpg)
11
LAYOUT
Header (Banner)
Menu
Content
Footer
![Page 12: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/12.jpg)
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
![Page 13: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/13.jpg)
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”
![Page 14: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/14.jpg)
14
INSERT IMAGE TO BANNER AREA
![Page 15: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/15.jpg)
15
ADD COPYRIGHT IN FOOTER
• Click in the bottom row• Click on “Bg” button• Select light gray from color palette
![Page 16: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/16.jpg)
16
INSERT COPYRIGHT
• Insert Copyright in the bottom row by• Click on “Insert” menu• Select “HTML” -> “Special Characters” -> “Copyright”• Then type the Copyright …….
![Page 17: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/17.jpg)
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
![Page 18: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/18.jpg)
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
![Page 19: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/19.jpg)
19
RESULT OF ADDING HOME BUTTON
• Repeat the rollover image for all the rest of menus
![Page 20: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/20.jpg)
20
RESULT OF ADDING ROLLOVER IMAGES
![Page 21: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/21.jpg)
21
AN EXAMPLE OF COMPLETED PAGE
![Page 22: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/22.jpg)
C R E AT E M E N U W I T H I M AG E M A P
IMAGE MAP
![Page 23: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/23.jpg)
23
INSERT IMAGE TO BE THE MENU
![Page 24: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/24.jpg)
24
CREATING IMAGE MAP
• Enter Map name in the Map’s Textbox
• Select shape tools (in this case select “Polygon”)
![Page 25: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/25.jpg)
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
![Page 26: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/26.jpg)
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
![Page 27: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/27.jpg)
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>
![Page 28: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/28.jpg)
28
RESULT OF VIDEO OBJECT
![Page 29: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/29.jpg)
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>
![Page 30: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/30.jpg)
30
INSERT A FLASH VIDEO FILE
• Click menu “Insert” -> “Media” -> “FLV…”
![Page 31: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/31.jpg)
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
![Page 32: CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For](https://reader035.vdocument.in/reader035/viewer/2022062713/56649cd65503460f9499e1d1/html5/thumbnails/32.jpg)
32
RESULT OF FLV OBJECT