Slicing the web

Slicing The Web
By: M. Aladdin Hemmat
August, 2008
slicing using tableless or DIV technique

➔Objective of this training:
Slicing The Web
1- To review the slicing techniques and when I’m talking about
Techniques, I’m talking about how to slice the design inside the
Graphic program.
2- To know how to convert in between the design to a coded
webpage.
2- To get a good knowledge of CSS with stress on Styles that is
used in slicing.
3- To troubleshoot any kind of webpage templates.

Slicing The Web
Designing Phase
“Photoshop”
Or the graphic program you are
using to make your design
Coding Phase
“HTML / XHTML”
The code of the webpage
Styling Phase
CSS
Cascading style sheets
✓ Design to HTML
✓ Design Tips that will be
very helpful at ‘DIV’ing or
slicing as general
✓ <DIV> Vs <Table>
✓ Does <Table> is that bad?!
✓ Necessary HTML tags
(incase of using <DIV>)
✓ Samples & Examples of
<Table> WebPages
✓ Samples & Examples of
<DIV> WebPages
✓ CSS Tags needed
✓ Alternative methods to
slice the page using CSS
✓ Samples & Examples
✓ How to troubleshoot CSS
problems during <DIV>ing
Slicing The Web

➔Design to HTML:
Slicing The Web
1- slicing techniques.
2- Using PhotoShop to Export the design as a webpage.

➔Design Tips that will be very helpful at ‘DIV’ing or slicing as general:
1- Optimize the spaces with solid colors, by using hex CSS code
instead of pictures.
Slicing The Web
2- use background image using CSS.

➔<DIV> Vs <Table>:
Slicing The Web
Table Technique DIV Technique
1 Ease Easy and Intuitive Not quite easy
2 SEO Friendly Friendly
3 Flexibility less flexibility More flexible
4 CSS need Not often used Usually used or in most cases
5 Code weight More code weight Less code weight
6
Code
understanding
Easy to be understood Not quite easy to understood
7 How many Cells It has rows , column and therefore cells Just one cell per DIV
8 Maintainability Easy but take time Little complicated but efficient
9 Cell Float Cell can’t float in the page Cell can float in the page

➔<DIV> Vs <Table>:
Slicing The Web
According to HTML Structure and weight of the code:

➔Does <Table> is that bad ?!
Slicing The Web
NO
But why? tell me why I have to use <table> any more?
➔The rigidity of the structure.
➔The ease of understanding in some complicated structures.
!Of course these advantages are according to slicing point of view.

➔Necessary HTML tags (incase of using <DIV>):
Slicing The Web
<div>
-------------------
<span>
-------------------
<ul> <ol> <li>
-------------------
<br> <hr>

Slicing The Web
<div>
Example <div id=“header” style=“color: #FFF;”></div>
<div class=“header” style=“color: #FFF;”></div>
Attributes (id ,class, style)
The <div> tag defines a division/section in a document.<div>

Slicing The Web
<span>
Example <span id=“header” style=“color: #FFF;”></span>
<span class=“header” style=“color: #FFF;”></span>
The <span> tag is used to group inline-elements in a document.<span>

Slicing The Web
<dl> <dt> <dd>
Example
<dl> 
<dt> Coffee </dt>  
<dd> Black hot drink </dd>  
<dt> Milk </dt>  
<dd> White cold drink </dd>  
</dl>
The <dl> tag defines a definition list.<dl>
The <dt> tag defines the start of a term in a definition list.<dt>
The <dd> tag defines the description of a term in a definition list.<dd>
Coffee
Black hot drink
Milk
White cold drink

Slicing The Web
<ul> <ol> <li>
The <ul> tag defines an unordered list.<ul>
The <ol> tag defines the start of an ordered list.<ol>
The <li> tag defines the start of a list item.
The <li> tag is used in both ordered (<ol>) and unordered lists (<ul>).<li>

Slicing The Web
<ul> <ol> <li>
Example <ol> 
<li>Coffee</li>  
<li>Tea</li>  
<ol/>
<<ul 
<li>Coffee</li> 
<li>Tea</li> 
<ul/>
1. Coffee
2. Tea
• Coffee
• Tea

Slicing The Web
<br> <hr>
The <br> tag inserts a single line break.
In HTML the <br> tag has no end tag, like this: <br>.
In XHTML the <br> tag must be properly closed, like this: <br />.
Example
<hr class=“break” style=“color:#FFF;” /> @XHTML
<br class=“break” style=“color:#FFF;” /> @XHTML
The <hr> tag inserts a horizontal rule.
In HTML the <hr> tag has no end tag.
In XHTML the <hr> tag must be properly closed, like this: <hr />.
<hr>
<br>

➔Samples & Examples of <Table> WebPages:
Slicing The Web

➔Samples & Examples of <DIV> WebPages:
Slicing The Web

➔CSS Tags needed:
Slicing The Web
Background:;
-------------------
Padding:;
-------------------
Margin:;
-------------------
Float:;
-------------------
Position:;
-------------------
Display:;
-------------------
Direction:;

➔CSS Tags needed:
Slicing The Web
Background:;
Background-color: #FFF;
Background-images: url( images/pic.jpg) ;
Background-position: center top ;
Background-repeat: repeat-x ;
Background-attachment: scroll ;
Background: #FFF url(images/pic.jpg) center top repeat scroll;

➔CSS Tags needed:
Slicing The Web
Padding:;
Padding-top: 30px;
Padding-left: 30px;
Padding-bottom: 30px;
Padding-right: 30px;
Padding: 10px 30px 10px 30px ;
Padding: 10% 30% 10% 30% ;

➔CSS Tags needed:
Slicing The Web
Margin:;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 30px;
margin-right: 30px;
margin: 10px 30px 10px 30px ;
margin: 10% 30% 10% 30% ;
margin: -10px -30px -10px -30px ;

➔CSS Tags needed:
Slicing The Web
Float:;
Float:
Right
Left

➔CSS Tags needed:
Slicing The Web
Position:;
Position:
Relative;
Absolute;
Fixed;
Static;
Z-index:
+1;
0;
-1;
Z-index can be used to place an element "behind" another element.

➔CSS Tags needed:
Slicing The Web
Display:;
Display:
Block;
Inline;
None;

CSS Tags needed:
Slicing The Web
Direction:;
Direction:
ltr;
(left to right)
rtl;
(right to left)

➔Alternative methods to slice the page:
Slicing The Web
Using
<table>
Using
Float + Padding + Margin
Using
Float
Left column Right column

Slicing The Web
1- Using <table> <table width="800" cellspacing="2" cellpadding="5" border="1">
<tr>
<td colspan="2">
<p>Lorem ipsum dolor sit amet,</p>
</td>
</tr>
<tr>
<td width="150">
</td>
<td width="650" valign="top">
</td>
</tr>
<tr>
<td colspan="2" valign="top">
</td>
</tr>
</table>
In HTML

Slicing The Web
2- Using “ float ”
<div class=“Header”>
<p> Lorem ipsum dolor sit amet, </p>
< div>
<div class=“left”>
<div>
<div class=“right”>
</ div>
<div class=“footer”>
<div>
In HTML

Slicing The Web
2- Using “ float ”
.header{ width: 800px ;
height: 100px ;
margin: 5px auto 5px auto ; }
.left{ width: 140px; <<<<<<<<<<<<<<<<<<<<<<
float: left;
margin: 5px 5px 5px 5px ; }
.right{ width:640px ; <<<<<<<<<<<<<<<<<<<<<<
float: right ;
margin: 5px 5px 5px 5px ; }
.footer{ width: 800px ;
height: 50px ;
margin: 5px auto 5px auto ;
clear: both ; }
In CSS

Slicing The Web
3- Using “ float + padding + margin ” (Advanced)
<div class=“Header”>
< div>
<div class=“left”>
<div>
<div class=“right”>
</ div>
<div class=“footer”>
<div>
In HTML

Slicing The Web
3- Using “ float + padding + margin ”

➔Samples & Examples:
Slicing The Web
Simple Examples
1 Column 2 Column 3 Column
1 1 2 1 2 3

➔Samples & Examples:
Slicing The Web
Advanced Examples

➔Troubleshooting of some CSS problems that facing you during <DIV>ing:
Slicing The Web
Web Developer Add-on for FireFox (toolbar)
Click here to download it ( Note that it is still not for IE)
Helpful tool:

➔Troubleshooting of some CSS problems that facing you during <DIV>ing:
Slicing The Web
Discussing some cases
►Expanded web pages
►Horizontal scroll
►Percentage width values

Slicing the web

More Related Content

What's hot (19)

Viewers also liked (15)

Similar to Slicing the web (20)

Recently uploaded (20)

Slicing the web