This is a second part of our tutorial on creating a FaceBook Template from the scratch. In this part we will convert our .psd file into HTML page. This is not an “HTML/CSS for Dummies” tutorial, so it will not explain everything in detail, however we’ll cover the overall structure of our code.
Slicing images:
1. Before we start coding we need to slice all the images we may need. Open the .psd file and turn off all the layers except for the background picture. Save it as bg.jpg
Note: It is suggested that you use “Save for web & devices” feature, to optimize images for web.
Everyone knows a social network called FaceBook. It’s the place where lots of people are constantly spending lots of time. It didn’t take a long time for brands and local businesses to join FaceBook too. So when the amount of non-human accounts started to grow, FaceBook guys have decided to add an ability to create separate pages for businesses and brands.
Today FaceBook pages can be equipped and customized with a lot of different widgets and applications. However the most important of all is the FBML box – it lets you create awesome landing pages, using HTML, CSS, FBML, FBJS, iframes and even Flash.
In this tutorial we will show you how to design a photographers FaceBook FBML page. Follow carefully what we say and you will get a nice layout like this:
