Transcript Lec19 ( Page Layout).pptx
Page Layout
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1
Summary of the previous lecture
• • • • •
Font properties Controlling text with CSS Styling links Styling background Styling tables
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 2
Outline
• • •
The process to design a page layout div tag Coding a page using divs and CSS
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 3
Consider a web application to develop
• • • •
CONNECTIONS: a smaller version of social web Users can register themselves After registration they can send a text message to anybody who is registered with the website User’s can view the received messages
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 4
1. The process
• • • • • •
Determine the requirements of the site Group the required information Make a site map Identify key elements for each page Decide about the arrangement information on each page of Translate the design into code
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 5
1.1 Determining requirements
• • •
Under standing the audience Who? Who will visit the site?
–
You can create fictional visitors
–
Men and women of 20 to 50 years of age Why? Why have they come to your site?
–
Send messages
–
View received messages
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 6
1.1 Determining requirements…
• •
What? What does a visitor need to achieve a goal?
–
Will they be familiar with your product?
How often? How often can you realistically expect them to visit?
–
In-order to make changes
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 7
1.1 Determining requirements…
• •
Things You Want the Site to Do Determining the requirement of the owner of the site which are not already listed
–
User must register themselves in-order to send and receive messages
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 8
1.2 Grouping and categorization
•
Group related information/sections
–
Home page: login form, registration form
–
User page: user’s information, recent messages
–
Inbox: Received messages
–
Outbox: Sent messages
–
Send a message: Send message form
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 9
1.3 Make a site map…
• •
Site map shows how many and how they relate pages you need Usually look like either a family tree list or folder
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 10
1.3 Make a site map
Home page User page Inbox Outbox Send a message
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 11
1.4 Key element for each page
• • • • • •
Common sections (header, navigation, footer etc.) Page specific sections Common Sections (header, footer) Page specific sections Home page: login form, registration form User page: user’s information, recent messages
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 12
1.4 Key element for each page…
• • •
Inbox page: received messages Outbox page: messages sent by the user Send message page: form to send a message
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 13
1.5 Arranging elements on pages header Logo Web Page Login form Sign-In form
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan
Footer
14
1.5 Arranging elements on pages… User Info User Picture Actions
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan
User data Message Recent Messages
15
2. Translating design into code
• • •
Liquid vs Fixed design The Div tag Coding the design
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 16
2.1 Liquid vs Fixed design
• •
Liquid Design
–
designs automatically fits to the screen
–
Use percentage values to declare height and width of sections Fixed design
–
Designs remain fixed width
–
Use fixed sections values to declare height and width of
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 17
2.2 The tag
• Defines a
division or section in an HTML document
• Visually, allows us to make
containers that can be formatted
• Can be declared as • …… Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 18
2.2 The tag
Starts a div Div ends Div style Div contents Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 19
2.2 The tag…
First div Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 20
2.3 Coding the design
//header div ends //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 21
2.3 Coding the design…
Header and logo divs Heading text Form element //form container ends //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 22
2.3 Coding the design…
Header and logo divs Login form div’s Heading text Form element //form container ends //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 23
2.3 Coding the design…
Header and logo divs Login form div’s Registration form div’s //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 24
2.3 Coding the design…
• • • • • • • •
Divs required to make the structure: Main container Header Logo Center container Form container Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 25
2.3 Coding the design…
Main container
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 26
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan
Header div
27
2.3 Coding the design…
Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 28
2.3 Coding the design…
Center content
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 29
2.3 Coding the design…
Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 30
2.3 Coding the design…
Styling label Styling input field
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 31
2.3 Coding the design…
Div adding space Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 32
2.3 Coding the design…
Container div Header div Header ends Container ends Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 33
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 34
2.3 Coding the design…
Center content starts Form container start Form starts Row starts Form heading Label Input field Row ends Form container end Center content ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 35
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 36
2.3 Coding the design…
Space is added Form container heading Form row Second row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 37
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 38
2.3 Coding the design…
Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 39
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 40
Summary
• • •
The process to design a page layout div tag Coding a page using divs and CSS
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 41
References
• Chapter 9, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470 54070-1. Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
42
• Defines a
division or section in an HTML document
• Visually, allows us to make
containers that can be formatted
• Can be declared as •
2.2 The tag
Starts a div Div ends Div style Div contents Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 19
2.2 The tag…
First div Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 20
2.3 Coding the design
//header div ends //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 21
2.3 Coding the design…
Header and logo divs Heading text Form element //form container ends //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 22
2.3 Coding the design…
Header and logo divs Login form div’s Heading text Form element //form container ends //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 23
2.3 Coding the design…
Header and logo divs Login form div’s Registration form div’s //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 24
2.3 Coding the design…
• • • • • • • •
Divs required to make the structure: Main container Header Logo Center container Form container Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 25
2.3 Coding the design…
Main container
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 26
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan
Header div
27
2.3 Coding the design…
Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 28
2.3 Coding the design…
Center content
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 29
2.3 Coding the design…
Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 30
2.3 Coding the design…
Styling label Styling input field
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 31
2.3 Coding the design…
Div adding space Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 32
2.3 Coding the design…
Container div Header div Header ends Container ends Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 33
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 34
2.3 Coding the design…
Center content starts Form container start Form starts Row starts Form heading Label Input field Row ends Form container end Center content ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 35
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 36
2.3 Coding the design…
Space is added Form container heading Form row Second row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 37
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 38
2.3 Coding the design…
Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 39
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 40
Summary
• • •
The process to design a page layout div tag Coding a page using divs and CSS
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 41
References
• Chapter 9, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470 54070-1. Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
42
Starts a div Div ends Div style Div contents Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 19
2.2 The tag…
First div Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 20
2.3 Coding the design
//header div ends //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 21
2.3 Coding the design…
Header and logo divs Heading text Form element //form container ends //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 22
2.3 Coding the design…
Header and logo divs Login form div’s Heading text Form element //form container ends //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 23
2.3 Coding the design…
Header and logo divs Login form div’s Registration form div’s //end of center content //container div ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 24
2.3 Coding the design…
• • • • • • • •
Divs required to make the structure: Main container Header Logo Center container Form container Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 25
2.3 Coding the design…
Main container
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 26
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan
Header div
27
2.3 Coding the design…
Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 28
2.3 Coding the design…
Center content
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 29
2.3 Coding the design…
Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 30
2.3 Coding the design…
Styling label Styling input field
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 31
2.3 Coding the design…
Div adding space Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 32
2.3 Coding the design…
Container div Header div Header ends Container ends Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 33
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 34
2.3 Coding the design…
Center content starts Form container start Form starts Row starts Form heading Label Input field Row ends Form container end Center content ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 35
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 36
2.3 Coding the design…
Space is added Form container heading Form row Second row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 37
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 38
2.3 Coding the design…
Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 39
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 40
Summary
• • •
The process to design a page layout div tag Coding a page using divs and CSS
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 41
References
• Chapter 9, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470 54070-1. Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
42
First div Second div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 20
2.3 Coding the design
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 21
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 22
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 23
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 24
2.3 Coding the design…
• • • • • • • •
Divs required to make the structure: Main container Header Logo Center container Form container Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 25
2.3 Coding the design…
Main container
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 26
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan
Header div
27
2.3 Coding the design…
Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 28
2.3 Coding the design…
Center content
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 29
2.3 Coding the design…
Form heading Form row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 30
2.3 Coding the design…
Styling label Styling input field
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 31
2.3 Coding the design…
Div adding space Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 32
2.3 Coding the design…
Container div Header div Header ends Container ends Logo div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 33
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 34
2.3 Coding the design…
Center content starts Form container start Form starts Row starts Form heading Label Input field Row ends Form container end Center content ends
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 35
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 36
2.3 Coding the design…
Space is added Form container heading Form row Second row
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 37
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 38
2.3 Coding the design…
Footer div
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 39
2.3 Coding the design…
Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 40
Summary
• • •
The process to design a page layout div tag Coding a page using divs and CSS
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 41
References
• Chapter 9, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470 54070-1. Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
42