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