+ Start a Discussion
MrEkoMrEko 

How best to go from an html/css design to a Force.com site?

 

Do you build the site from scratch in VF, and then drop in html for each section?

or

Just insert the entire site between <apex:page> tags?

 

I have not found any tutorial or cheat sheet on this.  The big cloud realty sample suggests that the site would have to be built and formatted by hand coding apex tags.  Is there a code share for one of the Sites Gallery sites or something similar.

aalbertaalbert

A Force.com Site is made up of one or more Visualforce pages. A Visualforce page does need the <apex:page> tag but it also can include standard HTML/CSS and other standard web technologies. I recommend reading the Visualforce Developer's Guide. Also, more information on Getting Started with Sites here.

 

 

MrEkoMrEko

Thanks for the RTFM. If only the FM answered the question.

 

waylonatcimwaylonatcim

I could tell you what I am currently doing to go from an html/css design to a site, not sure if there's a better way but it's working for me.

 

I was handed some HTML pages, images, css and some javascript files.  I zipped up the images, css and javscript and uploaded the entire file as a Static Resource.  I wrote a php script to scan my html pages to look for any reference to any of the resource files and replaced the text with the appropriate path.  For example, if I found an "Images/Logo_generic.gif", i would replace that with 

{!URLFOR($Resource.InvestorPortal,'Images/Logo_generic.gif')}

 

One thing to note when replacing hard coded paths in your code is if you have any paths in your css files (or any file that is part of your static resource package) than you have to put a relative path to the file instead of being able to use the $Resource variable.  So for example in the css files I had, there were paths to images.  My Zipped up Static Resource file separated the different resources into different folders for Images, styles and javascript.  So in my css file, coming across a line like 

url(/Images/MainImage.jpg)

 

 

I would replace it with

 

url(../Images/MainImage.jpg)

 

Other than that, make sure you wrap each html page in  <apex:page></apex:page> tags and you will of course need to write your own controller and add in your data binding to the visualforce pages if you have dynamic content.

 

 

That's basically where I'm at now, trying to setup the actual site URL and login sections so I can't offer any advice there yet but hopefully that's enough to get you started.