WIX - Really Flashy Websites For Free
The Wix homepage claims we can make free websites in Flash, and we can do it
by using their editing tools totally for free – this sounds too good to be true :
Their website is at: http://www.wix.com/
(But it is all true, and it is all really good !) ☺
There is a good metacafe video about making a website in Wix here:
http://www.metacafe.com/watch/ytEAgP6tC9pqY/how_to_create_a_free_website_wix_com/
with embed HTML as:
<embed src="http://www.metacafe.com/fplayer/ytEAgP6tC9pqY/how_to_create_a_free_website_wix_com.swf" width="400"
height="345" wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" allowFullScreen="true"
allowScriptAccess="always" name="Metacafe_yt-EAgP6tC9pqY">
</embed><br><font size = 1><a href="http://www.metacafe.com/watch/ytEAgP6tC9pqY/how_to_create_a_free_website_wix_com/">How to Create a Free
Website- Wix Com</a> - <a href="http://www.metacafe.com/">For more
amazing video clips, click here</a></font>
This metacafe video is highly recommended viewing before starting on a Wix.
There are several more detailed Tutorials on How to use Wix at:
http://blip.tv/file/1835653 but some of them do not have any narration, which
makes comprehension a bit difficult. Also on the right hand side we have to
press the “older” and “newer” tabs to progress through the videos,
(eg. There is not a scroll bar for this set of videos).
The guy narrating these amateur videos can be a bit trying at times, but at least
they do a reasonable job of showing how and what can be done in Twix; eg, the
onscreen slideshow tutorial.
We found out about these movies from this site:
http://forum.wix.com/support/911-how-do-i-use-wix-html-site.html
From this page we also found out there is a really good online reference all about
Wix at:
http://support.wix.com/index.php/Wixpedia
Eg. From the “Wixpedia”, there is information on how to embed your wix in
webpages, blogs, etc at this URL:
http://support.wix.com/index.php/Publish_and_Embed#How_do_I_embed_my_W
ix_into_my_Wordpress_blog.3F
How to Make a Website in Wix
Page 1 of 18
WIX - Really Flashy Websites For Free
Wix “Matt Finish Music” Website
Our example of learning Wix, is a tribute Wix website to an iconic Australian
Music Band by the name of “Matt Finish”.
The idea is to just have a simple Front page with links to :
1) History of the Band including useful Links to other sites
2) A set of old 1980’s Matt Finish F YouTube Videos
3) A set of new millennium Matt Finish YouTube Videos
4) Discography of Albums text list
5) List of band Members Text List
6) A Photogallery of pictures
We will then take the finished Wix website, and embed it into our Blog Page.
(Sounds simple enough, right ?)
So first we download as many Google images of the “Matt Finish” band as we
can find, and then we put them all into one single folder on our PC.
Getting Started with Wix for the First Time
Start up Wix by going to their site:
http://www.wix.com/
and click the “start now” button, which takes us to the “sign in” screen:
How to Make a Website in Wix
Page 2 of 18
WIX - Really Flashy Websites For Free
As this is our first time, We click the “Sign Up!” tab,
and then on the resulting screen, we simply enter an email address, a user id,
and a password of our choice, and then we click the “Sign Up” button.
This then takes us to the entry screen, where we can click “Create” to get started:
How to Make a Website in Wix
Page 3 of 18
WIX - Really Flashy Websites For Free
The next screen gives us eight pages of templates we can choose to build from,
(or we can just choose a completely blank website):
We have chosen the “My First Album” template, but we plan to radically alter it.
Wix gives a pop up box of helper videos anytime you click “help” like this:
How to Make a Website in Wix
Page 4 of 18
WIX - Really Flashy Websites For Free
From here, we just start playing around in edit mode, and one thing that we need
to learn quickly, is that when we change items, we need to click the + sign for
them, so that they get a green tick mark on them like this:
The Wix editing interface is really great to use, because it is a bit like an Adobe
application, but there is much more freedom to move things around, and “Pick
and Click” our way through the building process.
To bring our own photos onto the Wix page, we need to click “Upload” and then
navigate to the photo on our hard drive like this :
How to Make a Website in Wix
Page 5 of 18
WIX - Really Flashy Websites For Free
After we have a photo uploaded, we can then bring it onto our page to replace
one of the template photos. (Wix actually has a “replace photo” option which is
very useful.)
Individual photos can be changed, HOWEVER we could not edit the template’s
photo slideshow at all, and so we had to delete it, and insert and make our own
slideshow. The photo loader then only allowed 5 images to be uploaded from the
PC and placed into the Slideshow. Perhaps this is a limit that is set on the free
version of the software, or perhaps we did not properly understand how to use
the “add photo” function in Wix slideshow templates.
A really good thing on the “Media” left hand side menu, is that we can actually
search YouTube for the Video we want, totally within the Wix editor like this:
How to Make a Website in Wix
Page 6 of 18
WIX - Really Flashy Websites For Free
We supposedly can also cut and paste the embed HTML from a YouTube video
into Wix, and Wix will supposedly find the video, and put it onto the page for us.
We tried this out using several different embed YouTube HTML’s like this one:
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/fKX5rbsvZu0&hl=en&fs=1&"></param><param
name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed
src="http://www.youtube.com/v/fKX5rbsvZu0&hl=en&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344"></embed></object>
HOWEVER, WE COULD NOT GET THIS TO WORK, it kept saying “Skin Not
Found” and did not produce any Video. Pasting in the URL of the YouTube
video did not seem to work either.
It seems like the only YouTube videos we can get onto a Wix page are the
ones that are found by using the Wix editor search.
Renaming Template Pages
To Rename template pages we have to click on the top right hand corner
Manage Button, then click on “Rename:”, while we mouse-hover over the page to
be renamed like this:
How to Make a Website in Wix
Page 7 of 18
WIX - Really Flashy Websites For Free
Creating Links
To organize links, we select onto an object, and then use the bottom of screen
“Behaviours” menu, and set it up like this:
So what we are able to do, is to make the “Home” symbol in the bottom right
hand corner of our page, link us back to the actual Home Page. Note we had to
click onto the selection image for the home page, and subsequently get a big
green tick created. This procedure makes the add link action complete
successfully.
We can also use “Behaviours” to add “mouse rollover” effects onto images, and
text. Eg. On our website we put the Blur effect onto all Photo links, and the Glow
effect onto all text links.
Linking to External URL’s
We can also make links to external web pages, that will open in their own
separate new page when our Wix site runs.
When we cut and paste the URL address of the external website in, we first have
to delete their default URL from the data entry box, and then paste in our own
one.
Always remember to make sure we use the + sign to get the green tick on all
added items, or else we may find them not there when we run our website.
How to Make a Website in Wix
Page 8 of 18
WIX - Really Flashy Websites For Free
Saving Our Web Pages
We have to do this manually ourselves by clicking the top of screen “Save”
button.
Keep doing this regularly so that we do not lose our work if the internet goes
down, or has any unexpected glitches. When we “Preview” our pages, with lots
of other pages open, and click the links on our page, Internet Explorer will
sometimes crash, so always save regularly.
Basically with Wix, it is a matter of sitting down and playing around. There are
lots of great little animations and special effects that can be added to pages.
Global Settings for our Site
Something we missed out on doing earlier was visiting the “Settings” page, (by
clicking on “Settings” at the top of the page), and removing the light blue border
background, and changing it to something much better like a Black colour:
On this page we can also change the width setting from “wide screen” 1024,
down to 900 pixels wide, if we need to; HOWEVER changing the size to 900
pixels wide turned out to be a disaster, because Wix simply chopped off the right
hand side of our Webpage as shown later below.
How to Make a Website in Wix
Page 9 of 18
WIX - Really Flashy Websites For Free
If we want a smaller web page width than 1024 pixels, we need to set this
up using Wix’s “Settings” at the very start of our project, before we start
building any parts of our website.
Eg. Here is the disaster that happens if we make our page widths smaller after
our website was built:
So it seems for our “Matt Finish” site, we will have to stick with the default 1024
pixels width, because we have already started building the site with this setting.
Probably what we should have done, was initially set the size as 900 pixels wide,
before we started building the website, then Wix would have fitted the whole
page to this initial size ok.
(Thankfully, changing the width back to 1024 using “Settings” brought our web
page back to normal, and all parts are fully visible again).
We can however change the backgrond color on the Wix settings page, and then
click the “Apply” button.
We then “Published” our site, (see later below) and got embed HTML as follows :
<object width="1024" height="750" type="application/x-shockwave-flash"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla
sh.cab#version=9,0,28,0" allowScriptAccess="never"
allowNetworking="internal"><param name="base"
value="http://static.wix.com"/><param name="movie"
value="http://static.wix.com/client/app.swf" /><param name="quality"
value="high" /><param name="FlashVars" value="pageId=WSVzxllE2j0-
How to Make a Website in Wix
Page 10 of 18
WIX - Really Flashy Websites For Free
a&embedFormat=normal&embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJfSAX
kso_2rF8V0aBKDOpy3x2xFa&partner_id=WMGs4POB1ko-a" /><param name="scale"
value="noScale" /><param name="salign" value="tl" /><embed
src="http://static.wix.com/client/app.swf" quality="high"
FlashVars="pageId=WSVzxllE2j0a&embedFormat=normal&embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJfSAX
kso_2rF8V0aBKDOpy3x2xFa&partner_id=WMGs4POB1ko-a" type="application/xshockwave-flash" width="1024" height="750" base="http://static.wix.com"
scale="noscale" salign="tl" ></embed></object><br/><a
href="http://www.wix.com?embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJ
fSAXkso_2rF8V0aBKDOpy3x2xFa"><b>Free website</b></a> - <a
href="http://www.wix.com?embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJ
fSAXkso_2rF8V0aBKDOpy3x2xFa" ><b>Wix.com</b></a>
When our Wix website is complete, we can save and then “Preview” the site. In
Preview mode we can test that all of our links and pages are working as
expected.
Publishing our Website
When our site pages are all completed, we can click “Publish” at the top of the
page, and then we have to choose a destination for our Wix from the following:
How to Make a Website in Wix
Page 11 of 18
WIX - Really Flashy Websites For Free
Because we want some embed HTML to put our Wix into a Blog, we chose
“Embed” first of all, we then get to pick what type of embed HTML we want:
(Note that we can go back and do the other Publish modes later on).
It is best NOT to pick an embed HTML type if doing a Blog, because it will take
us to a page to sign into the Blog, which is an unnecessary nuisance.
Instead, click straight away on the “Copy Embed Code” button, and then by using
Control and V to paste it here, we can obtain the following HTML to use on our
Blog, (or any other webpage) :
<object width="1024" height="750" type="application/x-shockwave-flash"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla
sh.cab#version=9,0,28,0" allowScriptAccess="never"
allowNetworking="internal"><param name="base"
value="http://static.wix.com"/><param name="movie"
value="http://static.wix.com/client/app.swf" /><param name="quality"
value="high" /><param name="FlashVars" value="pageId=WSVzxllE2j0a&embedFormat=normal&embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJfSAX
mmPO;V90S9OvCcCZfyLJvka&partner_id=WMGs4POB1ko-a" /><param name="scale"
value="noScale" /><param name="salign" value="tl" /><embed
src="http://static.wix.com/client/app.swf" quality="high"
FlashVars="pageId=WSVzxllE2j0a&embedFormat=normal&embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJfSAX
mmPO;V90S9OvCcCZfyLJvka&partner_id=WMGs4POB1ko-a" type="application/xshockwave-flash" width="1024" height="750" base="http://static.wix.com"
scale="noscale" salign="tl" ></embed></object><br/><a
href="http://www.wix.com?embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJ
How to Make a Website in Wix
Page 12 of 18
WIX - Really Flashy Websites For Free
fSAXmmPO;V90S9OvCcCZfyLJvka"><b>Free website</b></a> - <a
href="http://www.wix.com?embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJ
fSAXmmPO;V90S9OvCcCZfyLJvka" ><b>Wix.com</b></a>
Note that using “Settings”, we CANNOT change the width of our web page after it
is built. Eg. We cannot reduce their default 1024 pixels down to 800 pixels. If we
do this, the right hand side of our web page will be cut off when it is displayed.
Eg. The Wix default embed HTML started off as:
<object width="1024" height="750" type="application/x-shockwave-flash"
And we have to leave it at this size, and hope that everyone viewing it has
modern wide screen monitors.
Because it is in Flash, for our Blog embedding, we should be able to easily resize
it by calculating some proportional values and editing the above HTML code, so
that it is 550 pixels wide…. We will also need a link to open it in a new page as
well on the Blog. Eg. W = 550 and H = (550 / 1024) x 750 = 403 pixels.
(This works fine, as shown later on).
The next screen gives us a Wix address for our website, and also has an option
button for “removing Wix advertisements”:
When we click on “Remove Wix ads”, it takes us to a web page, where we will
have to sign up to a plan and pay $ per month. This will remove the Wix ads off
How to Make a Website in Wix
Page 13 of 18
WIX - Really Flashy Websites For Free
our pages, and also give us lots of disc storage space, and unlimited web pages,
as shown below.
To stay “Free” with zero cost, we get some ads on our pages.
However, as far as we can tell, the advertising is just two insignificant Wix selfpromotional items, and it is not lots of annoying web page ads.
(Note our website has a light blue surround on it, but we can change this to a
much better blending black color, by using the “Settings” panel in Wix).
How to Make a Website in Wix
Page 14 of 18
WIX - Really Flashy Websites For Free
By changing the background color, we get a much better website on our Wix
page: http://www.wix.com/Bigpassy/Matt-Finish-Music :
Publish to Email (to Get Link to Wix Site Name)
To find out the web address of our Wix site, we need to do the Publish to email
option, and it will then send us the address as:
wix + user name + website name = http://www.wix.com/Bigpassy/Matt-Finish-Music
If we choose the “Email” option when publishing, then Wix will email our site out
to anyone we list in the contacts:
How to Make a Website in Wix
Page 15 of 18
WIX - Really Flashy Websites For Free
Click “Add Contacts” button to add people to the email list.
After we add our contacts email addresses, (screen not shown here), we have to
ensure we do the usual Wix green ticking onto each email contact like this:
When we click the “Send” button, Wix will send out a clickable Link for our new
website to all the people we ticked on our contacts list. This sends each of the
Contacts the clickable link : http://www.wix.com/BigPassy/Matt Finish Music
The advertisements on Wix, just seem to be one very small right side tab, and a
small footer bar, that both advertise Wix, and so basically we get the full
webpage sizes completely for our own use like this:
@@
How to Make a Website in Wix
Page 16 of 18
WIX - Really Flashy Websites For Free
Embedding a Wix Website
If we embed our Wix into a web page using the embed HTML they supply to us,
then the bottom footer of advertising goes away, which is indeed very nice. ☺
It all works brilliantly embedded into a Blog page, and all of the Wix website links,
slideshows, videos, and so on, all work within the Embed perfectly.
So we can run the web page as if it is simply part of our Blog post, without ever
having to leave the actual Blog page.
As already mentioned, the other really nice thing about embed mode, is that
there is no longer a Wix advertising footer on the bottom of the Web page.
(Only the small “Wix” tab is on the right hand side, and that’s all).
This is shown on the screen capture of our Blog shown below:
\
To make the Web Page fit into our Blog, we had to edit the Wix supplied HTML to
have the following dimensions for the web page:
Width = 550 pixels
and
Height = (550 / 1024) x 750 = 403 pixels.
How to Make a Website in Wix
Page 17 of 18
WIX - Really Flashy Websites For Free
We therefore modified the Wix embed HTML like this :
<object width="550" height="403" type="application/x-shockwave-flash"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla
sh.cab#version=9,0,28,0" allowScriptAccess="never"
allowNetworking="internal"><param name="base"
value="http://static.wix.com"/><param name="movie"
value="http://static.wix.com/client/app.swf" /><param name="quality"
value="high" /><param name="FlashVars" value="pageId=WSVzxllE2j0a&embedFormat=normal&embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJfSAX
mmPO;V90S9OvCcCZfyLJvka&partner_id=WMGs4POB1ko-a" /><param name="scale"
value="noScale" /><param name="salign" value="tl" /><embed
src="http://static.wix.com/client/app.swf" quality="high"
FlashVars="pageId=WSVzxllE2j0a&embedFormat=normal&embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJfSAX
mmPO;V90S9OvCcCZfyLJvka&partner_id=WMGs4POB1ko-a" type="application/xshockwave-flash" width="550" height="403" base="http://static.wix.com"
scale="noscale" salign="tl" ></embed></object><br/><a
href="http://www.wix.com?embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJ
fSAXmmPO;V90S9OvCcCZfyLJvka"><b>Free website</b></a> - <a
href="http://www.wix.com?embedID=F8zXL28yPMS7w;o2CgodZrSej3RgcwkbkOhTvJ
fSAXmmPO;V90S9OvCcCZfyLJvka" ><b>Wix.com</b></a>
Note that our particular test Blog is a Google Blogger page, and it has been
widened from the standard Blogger 400 pixels wide, to be 550 pixels wide.
Conclusions
Wix is much faster and easier to use than either Adobe Flash or Adobe
Dreamweaver, and yet still produces a very respectable web site.
There are lots of great animations, clip art, backgrounds, buttons, slideshow
templates, special effects, and pictures already supplied with Wix, and this
makes it an absolute joy to use.
Best of all, Wix is free, and if we embed our Wix Flash website into another web
page, there is virtually no advertising, and the “Wix” blends seamlessly into the
web or Blog page.
So Give it a Go.
It costs nothing to give Wix a solid workout,
and using Wix you can build yourself a very Flashy website indeed !
Enjoy,
Passy
http://www.wix.com/Bigpassy/Matt-Finish-Music
How to Make a Website in Wix
Page 18 of 18