Just copy your fields (including title) and paste them in. Click “Tableize it” and copy the HTML. DONE!!!
Later!
]]>Over the past year I have sliced and coded over 60 sites. I can promise you these steps will have you done and at the bar in no time!
This is ALWAYS my first step. By setting a layer comp before you start you can always turn on the completed view. So when you start hiding layers and slicing away you can go back at anytime with ease.
Open up a doc and document the fonts that will be used so when you get knee deep in CSS you don’t have to go back to the PSD.
In that same doc you started. Document all the colors in the different section of your site. Again this will speed up CSS.
Same thing here document all the different dimensions. Trust me this will shave BIG time off your coding.
Start slicing out your images from the top down and take your time making sure to get everything you need to code your masterpiece.
Document everything and make sure you get all the elements you need. The idea that when you start coding not to have to go back to photoshop. Have all your info ready will give you more time to focus on bringing your web stunner to Life.
Happy Slicing! Cheers!!
]]>This could very easily be modified to display a list of images or out put an entire gallery. The sky’s the limit once you can grab them!
<?php
$imgdir = 'path-to-images'; // the directory, where your images are stored
$allowed_types = array('png','jpg','jpeg','gif'); // list of filetypes you want to show
$dimg = opendir($imgdir);
$i = 1;
while($imgfile = readdir($dimg))
{
if(in_array(strtolower(substr($imgfile,-3)),$allowed_types))
{
$a_img[] = $imgfile;
sort($a_img);
reset ($a_img);
}
}
$totimg = count($a_img); // total image number
for($x=0; $x < $totimg; $x++)
{
$size = getimagesize($imgdir.'/'.$a_img[$x]);
// do whatever
$halfwidth = ceil($size[0]/2);
echo '<img src="Path'.$a_img[$x].'" alt="" /> ';
$i++;
}
?>
I not going to go over all the features here. You can pop over to Sequel Pro and check them out. I will tell you that one thing I really dig is the interface very fast and super user friendly.
]]>$('.rollover').hover(function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
}, function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
});
<a href="#"><img src="image1.jpg" hover="image1_over.jpg" width="62" height="28" border="0" class="rollover" /></a>
By assigning the class “rollover” we are calling the javascript and it will find the “hover” tag and replace the image in mouse over. It’s as easy as that!
]]>