EditIntroduction
Do you know that you can create and host web sites on Popfly? You can add HTML pages, images,
CSS style sheets, JavaScripts, etc., and conveniently embed mashups in your web sites. This guide shows
you how to create a simple Popfly Web Site step by step.
EditPrerequisites
To work with Popfly Web Sites, you need a version of Visual Web Developer (VWD). You can download
VWDExpress 2008.
Once you have VWD installed, you need to download and install
Popfly Explorer.
You also need a Windows Live ID and an account on Popfly. If you don't already have it, create one on
Popfly.
EditSign In Popfly Explorer
Launch VWDExpress 2008. Select menu Popfly -> Show Popfly Explorer. Enter your
Windows Live ID credential and click Sign In.
 Sign In Popfly Explorer |
Popfly Explorer will validate your account and load your Popfly projects and
friends if successful.
 Popfly Explorer |
EditCreate a Popfly Web Site Project
To create a new Popfly Web Site project, click menu File -> New Web Site.
Select "Popfly Web Site" template, and enter "USCrime2006" as the web site name
in project Location field. Click "OK" to create the web site.
 New Popfly Web Site |
VWD will create a new Popfly Web Site with an empty page. Double click
"Default.htm" in the Solution Explorer to edit the page content.
 Default.htm |
In VWD you can work with a HTML page in Source View or Design View. Click
"Design" (at the bottom of the editor pane) to switch to Design View. Enter some
content for your page and change the font.
 Default.htm Design |
Save your web site. You can now click "View in Browser" on the toolbar to
preview your web site in Internet Explorer.
 Preview |
EditEmbed a Mashup
With Popfly Explorer you can conveniently embed your mashups in web pages. Go
back to VWD and open Popfly Explorer. Drag a mashup project from Popfly Explorer
and drop onto the HTML page design pane. (You can also expand your friends'
shared project lists and drag a mashup from there. Or you can go to
Popfly and easily create/rip some mashups.)
You can easily change the width, height and layout of the mashup and your page.
 Embed Mashup |
Click "View in Browser" on the toolbar again to preview your web site.
 Mashup Preview |
EditSave To and Host On Popfly
When your web site is ready, you can save it and host on Popfly. With your web
site project open, click menu Popfly -> Save ProjectName to Popfly (or the
equivalent button on Popfly Explorer toolbar). Popfly Explorer may prompt that
it needs to save a local copy of the project and reload the local copy.
 Reload Local Copy |
Click "Save to Popfly" to confirm. If this is a newly created project, Popfly
Explorer may ask you if you want to share it.
 Share New Web Site |
You must share the project in order to view it on Popfly. (You can also
share/unshare a Popfly project within VWD by selecting the project in Popfly
Explorer and changing its Sharing Level property in Properties Window.) Click
"Yes". Popfly Explorer will save the project to Popfly and reload a local copy
of the project.
This may take a while, depending on the number of files and size
of your project.
Your web site is now saved and hosted on Popfly!
To view your web site, right click the project in Popfly Explorer and select
"View on Popfly" from the popup menu. This will launch Internet
Explorer and show your web site hosted on Popfly.
 View on Popfly |
 View on Popfly |
EditWhat To Do Next
With VWD and Popfly Explorer, you have full control of the content and look of your web site. There are many things you can try:
- Change some content, and save to Popfly again.
- Add more pages. Add images to your pages. Use CSS and JavaScript.
- Rip other's Popfly Web Sites. Try Find Project... in Popfly Explorer.
- Email to a friend about your web site. Did you notice the "Email to a friend" button when viewing your web site on Popfly?