that was an old PSD to XHTML session. teaching the following: introduction to HTML introduction to CSS how to slice the design and export it from photoshop to be coded page. some tools and resources.

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

2. ➔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.

3. 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

4. Slicing The Web
Design Phase

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

6. ➔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.

7. Slicing The Web
HTML Phase

8. ➔<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

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

10. ➔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.

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

12. ➔Necessary HTML tags (incase of using <DIV>):
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>

13. ➔Necessary HTML tags (incase of using <DIV>):
Slicing The Web
<span>
Attributes (id ,class, style)
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>

14. ➔Necessary HTML tags (incase of using <DIV>):
Slicing The Web
<dl> <dt> <dd>
Attributes (id ,class, style)
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

15. ➔Necessary HTML tags (incase of using <DIV>):
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>

16. ➔Necessary HTML tags (incase of using <DIV>):
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

17. ➔Necessary HTML tags (incase of using <DIV>):
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 />.
Attributes (id ,class, style)
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>

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

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

20. Slicing The Web
CSS Phase

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

22. ➔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;

23. ➔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% ;

24. ➔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 ;

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

26. ➔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.

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

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

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

30. ➔Alternative methods to slice the page:
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">
<p>Lorem ipsum dolor sit amet,</p>
</td>
<td width="650" valign="top">
<p>Lorem ipsum dolor sit amet,</p>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>Lorem ipsum dolor sit amet,</p>
</td>
</tr>
</table>
In HTML

31. ➔Alternative methods to slice the page:
Slicing The Web
2- Using “ float ”
<div class=“Header”>
<p> Lorem ipsum dolor sit amet, </p>
< div>
<div class=“left”>
<p> Lorem ipsum dolor sit amet, </p>
<div>
<div class=“right”>
<p> Lorem ipsum dolor sit amet, </p>
</ div>
<div class=“footer”>
<p> Lorem ipsum dolor sit amet, </p>
<div>
In HTML

32. ➔Alternative methods to slice the page:
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

33. ➔Alternative methods to slice the page:
Slicing The Web
3- Using “ float + padding + margin ” (Advanced)
<div class=“Header”>
<p> Lorem ipsum dolor sit amet, </p>
< div>
<div class=“left”>
<p> Lorem ipsum dolor sit amet, </p>
<div>
<div class=“right”>
<p> Lorem ipsum dolor sit amet, </p>
</ div>
<div class=“footer”>
<p> Lorem ipsum dolor sit amet, </p>
<div>
In HTML

34. ➔Alternative methods to slice the page:
Slicing The Web
3- Using “ float + padding + margin ”

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

36. ➔Samples & Examples:
Slicing The Web
Advanced Examples

37. ➔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:

38. ➔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