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.
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
Slicing the web
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