grid syste layout (960)
TRANSCRIPT
![Page 1: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/1.jpg)
Grid System Layout
Grid System Layout New Technique in Web Layout Implementation
![Page 2: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/2.jpg)
Welcome
![Page 3: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/3.jpg)
Grid System Layout
Instructions
![Page 4: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/4.jpg)
For Integrated Web Solutions
CEO & Founder at Ubrand+5 Years Web Engineering
Pre-Master in Computer EngineeringDeveloped +100 websites
Interests- Web Standards- UI/UX Development- Project Management- Game Development
Mohammad Abuzaid
Mabuzd
![Page 5: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/5.jpg)
Grid System Layout
< Part I > Introduction </Part I>- Table Layout Technique- DIV Layout- DIV vs Tables
<Part II> The Grid System </Part II>- What is Grid System- 960.gs tools- Grid System Structure
<Part III> It is show time </Part III>- Demo- Workshop- Questions
![Page 6: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/6.jpg)
Grid System Layout
Part 1Introduction
![Page 7: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/7.jpg)
Grid System Layout
Website implementation process
Graphical Web design (Drawing the website)
Slicing The design (PSD to HTML)
Implement the layout (Writing HTML & CSS code)
![Page 8: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/8.jpg)
Grid System Layout
Implement the layout (Writing HTML & CSS code)
![Page 9: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/9.jpg)
Grid System Layout
TableLayout
![Page 10: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/10.jpg)
Grid System Layout
TableLayout
<table id="Layout"> <tr> <td id="Header"> </td> </tr> <tr> <td> <table> <tr>
<td id="Nav"> </td> <td id="Main"> </td> </tr> </table>
</td> </tr> <tr> <td id="Footer"> </td> </tr></table>
22 Line of code
401 bytes
![Page 11: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/11.jpg)
Grid System Layout
DIVLayout
![Page 12: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/12.jpg)
Grid System Layout
DIVLayout
<div id="Header">
</div><div id="Nav">
</div><div id="Main">
</div><div id="Footer">
</div>
8 Line of code
109 bytes
![Page 13: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/13.jpg)
Grid System Layout
DIV Table
8 22 Number of lines
109 401 File Size
Tables vs DIV
![Page 14: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/14.jpg)
Grid System Layout
Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
![Page 15: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/15.jpg)
Grid System Layout
?Is "Grid System“ a new element
in "HTML" rather than DIV ?
![Page 16: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/16.jpg)
Part 2Grid System
![Page 17: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/17.jpg)
Grid System Layout
GridSystem
<div id="Header“ class=“grid_12”>
</div><div id="Nav“ class=“grid_3”>
</div><div id="Main“ class=“grid_9”>
</div><div id="Footer“ class=“grid_12”>
</div>
![Page 18: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/18.jpg)
Design Framework or
CSS Framework
![Page 19: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/19.jpg)
Grid System Layout
Benefits of using a CSS framework- Compatibility with different devices
- Easy to read & understand
- Reduces development time by providing pre-coded HTML/CSS
- Better communication between Designer & Developer
![Page 20: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/20.jpg)
Grid System Layout
Grid System Tools
• Design Tools
• CSS Files
www.960.gs
![Page 21: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/21.jpg)
Grid System Layout
Grid System Classes• Container
• Grid
• Alpha & omega
• Push & Pull
• Clear
![Page 22: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/22.jpg)
Part 3 It is show time
![Page 23: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/23.jpg)
?Questions
![Page 24: Grid syste Layout (960)](https://reader036.vdocuments.us/reader036/viewer/2022062503/58d1dacd1a28ab66108b5741/html5/thumbnails/24.jpg)
Grid System Layout
For Integrated Web Solutions
Mohammad Abuzaid
Mabuzd
Thank you