WIX - Really Flashy Websites For Free

Transcription

1 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: (But it is all true, and it is all really good!) There is a good metacafe video about making a website in Wix here: EAgP6tC9pqY/how_to_create_a_free_website_wix_com/ with embed HTML as: <embed src=" EAgP6tC9pqY/how_to_create_a_free_website_wix_com.swf" width="400" height="345" wmode="transparent" pluginspage=" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" name="metacafe_yt-eagp6tc9pqy"> </embed> <a href=" EAgP6tC9pqY/how_to_create_a_free_website_wix_com/">How to Create a Free Website- Wix Com</a> - <a href=" more amazing video clips, click here</a> This metacafe video is highly recommended viewing before starting on a Wix. There are several more detailed Tutorials on How to use Wix at: 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: From this page we also found out there is a really good online reference all about Wix at: Eg. From the Wixpedia, there is information on how to embed your wix in webpages, blogs, etc at this URL: ix_into_my_wordpress_blog.3f How to Make a Website in Wix Page 1 of 18

2 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: 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

3 As this is our first time, We click the Sign Up! tab, and then on the resulting screen, we simply enter an 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

4 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

5 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

6 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

7 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=" name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=" 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

8 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

9 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

10 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-96b " codebase=" sh.cab#version=9,0,28,0" allowscriptaccess="never" allownetworking="internal"><param name="base" value=" name="movie" value=" /><param name="quality" value="high" /><param name="flashvars" value="pageid=wsvzxlle2j0- How to Make a Website in Wix Page 10 of 18

11 a&embedformat=normal&embedid=f8zxl28ypms7w;o2cgodzrsej3rgcwkbkohtvjfsax kso_2rf8v0abkdopy3x2xfa&partner_id=wmgs4pob1ko-a" /><param name="scale" value="noscale" /><param name="salign" value="tl" /><embed src=" quality="high" FlashVars="pageId=WSVzxllE2j0- a&embedformat=normal&embedid=f8zxl28ypms7w;o2cgodzrsej3rgcwkbkohtvjfsax kso_2rf8v0abkdopy3x2xfa&partner_id=wmgs4pob1ko-a" type="application/xshockwave-flash" width="1024" height="750" base=" scale="noscale" salign="tl" ></embed></object> <a href=" fsaxkso_2rf8v0abkdopy3x2xfa">free website</a> - <a href=" fsaxkso_2rf8v0abkdopy3x2xfa" >wix.com</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

12 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-96b " codebase=" sh.cab#version=9,0,28,0" allowscriptaccess="never" allownetworking="internal"><param name="base" value=" name="movie" value=" /><param name="quality" value="high" /><param name="flashvars" value="pageid=wsvzxlle2j0- a&embedformat=normal&embedid=f8zxl28ypms7w;o2cgodzrsej3rgcwkbkohtvjfsax mmpo;v90s9ovccczfyljvka&partner_id=wmgs4pob1ko-a" /><param name="scale" value="noscale" /><param name="salign" value="tl" /><embed src=" quality="high" FlashVars="pageId=WSVzxllE2j0- a&embedformat=normal&embedid=f8zxl28ypms7w;o2cgodzrsej3rgcwkbkohtvjfsax mmpo;v90s9ovccczfyljvka&partner_id=wmgs4pob1ko-a" type="application/xshockwave-flash" width="1024" height="750" base=" scale="noscale" salign="tl" ></embed></object> <a href=" How to Make a Website in Wix Page 12 of 18

13 fsaxmmpo;v90s9ovccczfyljvka">free website</a> - <a href=" fsaxmmpo;v90s9ovccczfyljvka" >wix.com</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

14 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

15 By changing the background color, we get a much better website on our Wix page: : Publish to (to Get Link to Wix Site Name) To find out the web address of our Wix site, we need to do the Publish to option, and it will then send us the address as: wix + user name + website name = If we choose the option when publishing, then Wix will our site out to anyone we list in the contacts: How to Make a Website in Wix Page 15 of 18

16 Click Add Contacts button to add people to the list. After we add our contacts addresses, (screen not shown here), we have to ensure we do the usual Wix green ticking onto each 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 : 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 How to Make a Website in Wix Page 16 of 18

17 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

18 We therefore modified the Wix embed HTML like this : <object width="550" height="403" type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" sh.cab#version=9,0,28,0" allowscriptaccess="never" allownetworking="internal"><param name="base" value=" name="movie" value=" /><param name="quality" value="high" /><param name="flashvars" value="pageid=wsvzxlle2j0- a&embedformat=normal&embedid=f8zxl28ypms7w;o2cgodzrsej3rgcwkbkohtvjfsax mmpo;v90s9ovccczfyljvka&partner_id=wmgs4pob1ko-a" /><param name="scale" value="noscale" /><param name="salign" value="tl" /><embed src=" quality="high" FlashVars="pageId=WSVzxllE2j0- a&embedformat=normal&embedid=f8zxl28ypms7w;o2cgodzrsej3rgcwkbkohtvjfsax mmpo;v90s9ovccczfyljvka&partner_id=wmgs4pob1ko-a" type="application/xshockwave-flash" width="550" height="403" base=" scale="noscale" salign="tl" ></embed></object> <a href=" fsaxmmpo;v90s9ovccczfyljvka">free website</a> - <a href=" fsaxmmpo;v90s9ovccczfyljvka" >wix.com</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 How to Make a Website in Wix Page 18 of 18