Tutorial: Guide to iWeb: tips and tricks you need to know: "
Although it is not as well known as other iLife programs, such as iMovie and iPhoto, in many ways iWeb is a quintessential piece of Apple software.
It takes a complex task – the creation of web pages using the arcane commands of HTML programming code – and makes it so easy that even a complete beginner can design an entire website in a matter of minutes.
You don't need to enter a single line of HTML code when using iWeb, as its streamlined graphical interface enables you to design web pages simply by dragging and dropping photos, text and other elements onto the page with your mouse.
There's a wide range of templates built into the program to help you get started, and if you're feeling more confident you can create your own designs from scratch. But while iWeb is easy to use, it isn't short on ambition.
Some of its templates are extremely sophisticated, enabling you to create online photo galleries and slideshows simply by dragging a batch of photos out of iPhoto. There are also templates for creating blogs and podcasts, and putting your home movies online.
You can even use the Widgets facility built into iWeb to add extra features such as maps and newsfeeds, or drum up a little cash by using Google's AdSense to put adverts onto your site. So let's go ahead and explore the features available in iWeb.
iWeb's streamlined graphical interface can be mastered in minutes
Apple has done a fine job with iWeb's interface. The program's drag-and-drop approach to design means that anyone can create stylish web pages in no time at all. You can pick a template and then add your own text and photos with a few simple clicks of your mouse.
You can also create your own custom designs just as easily, as Apple has cleverly distilled all the key design tools into a neat little set of buttons running along the bottom of the screen. So here's our visual guide to all the key tools you need to design your own website in iWeb.
Mini menu
MINI MENU:The left hand menu makes it easy to switch between sites and their pages
When you create a website, the name of the site itself will appear at the top of this panel, with the individual pages listed beneath it.
If you wish, you can also create multiple websites, and iWeb will automatically keep them all separate for you in this panel. To rename a page, just double-click on it. Right-clicking on a page will display a pop-up menu containing additional options, such as the Delete Page command.
Pick a page
To get started with your website, or to add a new page to an existing site, just click the Add Page button in the toolbar. This displays a series of templates with lots of different designs that you can use.
Each template contains a set of placeholders – bits of text and graphics that you can replace with your own text and photos in order to quickly create attractive page designs.
The Inspector
The Inspector provides detailed information about the individual elements on your web pages, and also allows you to fine-tune those elements so that your pages look just right.
The Inspector is divided into sections, indicated by a series of tabs, which provide controls for text, photos, and modifying links. There are also more advanced controls for organising blogs and podcasts, and displaying video files.
Nav bar
A navigation bar is automatically added to every page you create, and contains a set of navigation buttons that allow you to move from one page to another.
Whenever you create a new page, the nav bars on all the other pages are automatically updated to include links to that new page. This is a terrific time-saver, as you don't have to waste hours creating and testing all those links yourself.
Media Browser
The Media Browser panel occupies the whole right-hand edge of the iWeb workspace (although it can be hidden easily by clicking the Hide Media button in the toolbar).
The first three tabs at the top of the panel enable you to view the various audio files, photos and videos that you have stored on your Mac. There's also a fourth tab that lets you access Widgets for special items such as maps, YouTube videos, and even adverts.
Cracking the code
One thing you won't ever see in iWeb is a page full of HTML – the programming code used to create web pages. Apple gave iWeb a slick graphical interface, which allows you to design your website by clicking and dragging with your mouse.
However, you can use the HTML Snippets option to copy bits of code from other people's websites and use them in your own.
Picture perfect
There are a number of simple photo editing tools built into iWeb that you can use to quickly smarten up your photos.
Clicking on any photo will activate a small toolbar that allows you to adjust the size of the photo, as well as using a mask to highlight a specific part of the image. The Adjust button in the main toolbar also activates a set of controls for adjusting colour, brightness and contrast.
Tools of the trade
Each template has its own set of fonts that were chosen for readability, and also to match the overall style of the template.
However, you can change the look of a web page quite dramatically by selecting a different font. You can change the font and the size of text, and also change other settings too – such as the colour of the text, and the background colour of the text box.
Getting published
Once you've finished designing your website, the next step is to publish the site on the internet for the rest of the world to see. There are two main options for publishing your website.
If you use Apple's MobileMe service then iWeb can automatically publish your site with the click of a button. Alternatively, you can use FTP – File Transfer Protocol – to publish the site to a non-Apple web-hosting service.
Create a professional-looking website using iWeb's templates
Even though it might seem complicated and daunting, creating your first website in iWeb couldn't be easier. When you launch iWeb for the first time it automatically presents you with a series of templates that you can choose from.
Each template has a different style – modern or old fashioned, dayglo colours or formal and restrained – that you can choose from to give your website a distinctive look and feel. Each template also includes a number of different pages that are designed for presenting various types of information.
There's an About Me page that enables you to quickly and easily present personal information about yourself, such as your age, job and hobbies. There are also pages for laying out photos and creating online slideshows, and you can share your blogs and podcasts or even play video clips from your home movies.
Each template comes with a number of placeholders, in the form of ready-made images and text that are used to define the page layout. So all you have to do to add your own content is type in your own text and simply drag and drop photos and videos onto the page using your mouse.
Another couple of clicks with the mouse will enable you to move things around and create a more individual layout, and then you can carry on creating as many additional pages as you want to – even adding extra websites too, if you wish.
As you go along, iWeb will automatically keep your website nicely organised, linking pages together for you and creating a nav bar that means you can move from page to page – a tedious task that can take ages in other web design programs.
As you become more and more confident with iWeb you can leave the templates alone and start to create your own individual designs from scratch. And if you want to push it further, you can extend iWeb's capabilities, using features such as 'snippets' of HTML code that you find on other sites on the internet.
Admittedly, iWeb does have a few limitations – fingers crossed for rollover buttons in iLife '11 – but it's undoubtedly the easiest and most straightforward web design program we've ever seen. And it's definitely the ideal starting place for anyone who wants to design a website for their family, school or a local club.
How to design web pages with iWeb
1. Page maker
iWeb will present you with a selection of templates you can use to get started with your site. Each template consists of different pages – there's a blank page, a welcome page, and pages that are designed for laying out photo galleries, video clips, podcasts and blogs.
2. All about me
We'll start with this About Me page. As you can see, the template page has placeholder pictures and text in position for creating a basic page layout. All we have to do is insert our own pictures and text into the layout. Let's use the Media Browser to look at our iPhoto library.
3. Browsing around
The Media Browser (at the right of the screen) shows widgets you can add to your pages, but if you click the Photos tab at the top of the panel you can see the contents of your iPhoto library. Use the mouse to drag and drop a photo from the browser onto the page.
4. Drag and drop
It's easy to modify templates and give them more individuality. We'll make space by getting rid of the extra placeholder photos – click on a photo and hit ∫ to delete it. Then we'll use the mouse to click on the text box to edit the headline and stretch it across the page.
5. Picture perfect
We need to adjust the main photo to make Jane the centre of attention. Clicking on photos activates the editing toolbar. This allows you to resize the photo and move it around. However, there's also a mask on the photo that acts like a frame hiding parts of the image.
6. Behind the mask
Click on the Edit Mask button to display the mask. Part of Jane's head was cut off by the mask, so we'll click on the photo and drag Jane back into the picture, and then zoom in a bit, as well. You can modify the shape of the mask by clicking and dragging the square handles.
7. Online albums
Let's create some additional pages now. You can drag and drop individual photos onto a page, but iWeb also includes an Albums template that allows you to drag albums from iPhoto and organise them into a gallery. There's even an option for an online slideshow.
8. Quick blogs
The blogging template is just as simple. It lets you add entries whenever you want while archiving older entries for you. Notice how iWeb organises these pages in the left panel, and how the nav bar is updated with links that let you move from page to page.
iWeb makes it easy to organise and update multiple websites
Adding new pages to your website in iWeb is easy– just press the Add Page button in the toolbar or use the New command (Command+N) and up pops the list of available templates for you to choose from.
However, iWeb also enables you to create and manage multiple websites just as easily. You could have your own website sitting alongside another site for a local sports club or a business project that you have going on the side.
Go to the File menu and select New Site (or use the Command+Shift+N keyboard shortcut) and the list of templates will appear once more. But this time, the template you select will be used to create the first page of a completely new website.
Take a look at the Site panel on the left-hand side of the screen and you'll see Site 2 added to the list, immediately beneath your other website. The name of each website has a little triangular arrow beside it to help you tell them apart. You can also rename each website just by double-clicking on it with your mouse.
The ins and outs
That little arrow serves another purpose, though, as clicking on it causes the pages within that particular website to 'collapse' so they're hidden out of sight. This makes it easy to focus on your websites – rather than individual pages – when you're performing site-wide administrative tasks, such as uploading files to the internet or setting passwords.
When you need to go in and make changes to individual pages, just click on the little arrow again and all the pages will expand downwards, being shown as a list beneath the name of that website (with the page names being indented slightly to indicate that they are subsidiary elements within the main website).
As you'd expect, the files for your websites are all stored on your Mac's hard disk (see box, below left), but at some point you also need to put all those files up on the internet so that other people can admire your handywork.
This process is referred to as 'publishing', and involves uploading a copy of your website onto a web server computer, which is permanently connected to the internet, and which acts as the host for your website. Just click on the name of your website in the main Site panel, and you'll see the Site Publishing window. This includes a simple pulldown menu with three different options for publishing your website.
The simplest option is to use Apple's MobileMe service, which costs £59 per year. Apple has made sure iWeb can automatically link up with your MobileMe account, allowing you to publish your website and get it online with a single click of the Publish Site button.
Make it your own
The one tricky thing with MobileMe is if you want to use your own personal domain name with your website. If you have a MobileMe account under the name of John Smith then your published website would normally have a web address along the lines of web.me.com/john.smith/sitename ('web.me.com' is the main web address that Apple uses for hosting the sites of MobileMe users).
However, if you've bought a personal domain name – such as www.macformat.co.uk – you'll want to use that instead. There is an option within the main File menu in iWeb labelled Set Up Personal Domain on MobileMe that connects to your MobileMe account and allows you to enter your personal domain name.
Unfortunately, before you can use this you need to contact your domain name registrar – the company from which you bought your domain name in the first place – and find out how to link your personal domain name to the web.me.com address used by the MobileMe web servers.
There's no simple solution to this, as different registrar companies handle this process in different ways, so you'll have to contact your domain name registrar and ask for their advice. Upload options The second option for publishing your website is to use FTP – file transfer protocol – to upload the site files onto a web server run by a separate hosting company (some of these advertise in MacFormat each month).
Using a personal domain name is much simpler in this case, as you can simply enter the domain name along with the other FTP details that will be provided by your hosting company when you sign up for your account. There's one other option worth knowing about, which is the ability to Publish To Local Folder.
This option puts all your website files into a folder that can be stored anywhere on your Mac's hard disk. This is useful as it allows you to check your website for problems using Safari – or any other web browser – while it's still on your computer.
Once you've checked that everything works properly, you can go ahead and publish the site onto the internet using either the MobileMe or FTP options. You'll still want to update your web pages, adding new photos or blog entries.
There are two options for updating a website once it's published. Look in the main File menu in iWeb and you'll see two options labelled Publish Site Changes and Publish Entire Site. If you've just made some small changes to one or two pages – such as a change of address or adding some new photos – then you can use Publish Site Changes to quickly upload just the pages that have changed.
However, if you've added some entirely new pages, changed the links between pages, or made changes to widgets or other advanced features then it's best to Publish Entire Site. This takes a bit longer, but avoids any potential problems as it ensures the entire site has been fully updated.
How to publish your website via FTP
1. Transfer window
When you're ready to publish your site, click on the name of it in the Site panel. You will see the Site Publishing Settings window, which contains three options for publishing. You can use a MobileMe account, FTP upload or publish the files to a folder on your computer.
2. Protocol 'droid
We'll select FTP, which stands for 'file transfer protocol'. That refers to the process of transferring your website files from your Mac to the web server that will host your site. Your hosting company will give you the details you need when you sign up for your account.
3. The visitors
Once the site has been published, you will be asked if you want to visit the site. This will launch Safari and enable you to check the site and make sure everything works. It's worth using the Publish to folder option first, to test the site while it's stored on your Mac.
Add podcasts, maps, newsfeeds and more with iWeb's widgets
The standard templates that are built into iWeb make it easy to create web pages that contain simple text and photos, as well as slick online photo galleries and animated slideshows. However, as you gain experience with iWeb you might want to try something a little more advanced.
If you're a regular blogger then a newsfeed that keeps people up to date with your latest entries could be useful. And if you're ambitious enough to tackle full-scale podcast production, you'll want to make sure your legions of online followers can subscribe to your podcasts so that they never miss an episode.
The podcast and blogging features in iWeb are straightforward – thanks to those built-in templates. When you select the Blog template to create a page then iWeb creates an RSS newsfeed – RSS stands for 'really simple syndication' – that is updated whenever you add a blog entry.
The template even puts an RSS Subscription button onto the web page for you, so visitors who want to subscribe to your blog can just click on the button and automatically see your latest updates in their web browser or news reader.
The Podcast template is even smarter. When you select this template, iWeb puts a podcast subscription button on the page that allows people to subscribe to your podcasts via iTunes. Whenever one of your subscribers launches iTunes on their Mac or PC, their copy of iTunes will check in with your website to see if any new podcasts are available. This sort of thing normally requires technical know-how, but iWeb does it all for you.
The podcast subscription option works with PCs too, so friends and relatives who own PCs can also subscribe to your podcasts – as long as they've got the PC version of iTunes installed on their PC. You can even use the podcast module in GarageBand to help produce podcasts – a good example of the smooth integration and value for money offered by the iLife suite.
Add more features
In addition to those templates, iWeb also includes widgets that you can find in the Media Browser panel. There's a set of eight widgets you can drop onto your web pages; these allow you to add new features you wouldn't normally be able to create yourself.
These include a YouTube widget that enables you to put YouTube video clips onto your web pages, as well as a Google Maps widget and an RSS widget that allows you to display newsfeeds taken from other websites.
Each of these widgets contains a chunk of HTML programming code that performs the task, but, in keeping with its 'no-programming' ethos, iWeb keeps the code hidden by wrapping it up inside a little widget that you can just drag and drop onto the page like a photo or text box.
Adding HTML
The one exception to this rule is the ninth and final widget, known as HTML Snippet. All the other widgets are self-contained chunks of HTML code that perform one specific function. However, the HTML Snippet widget allows you to insert raw chunks of HTML code into your web pages in order to add new features that aren't normally available in iWeb.
If you already know a bit about HTML programming then you could write your own code for the features you want to add, but the HTML Snippet is intended to allow non-programmers like us to copy chunks of code from other websites. That might sound a bit dodgy, but many sites provide snippets of code for free so people can take news and other services for their websites (although, confusingly, many websites refer to these as widgets rather than snippets).
The BBC provides lots of snippets and widgets for its news services, as do many other broadcasters and radio stations. The idea of working with HTML code might sound a little intimidating, but the HTML Snippet feature does make it straightforward. The first thing to do is to locate the code for the snippet that you want to use.
Don't worry if you don't understand the HTML code – all you need to do is select and copy (Command+c) the code in the same way as you would copy any piece of text. Then switch back to iWeb and drag and drop the HTML Snippet widget from the Media Browser onto your web page.
You'll see a dialog box appear asking you to enter the code for your snippet, so you can then paste (Command+v) the code into the dialog box. Once that's done, hit the Apply button and that piece of code will be added to your web page.
However, you're at the mercy of the person who wrote the code for that snippet. If they know what they're doing then the snippet will work, but if they made a mistake in the code then it won't. It's a good idea, therefore, to publish your site to a folder on your hard disk so you can check it works before you publish it.
Power up iWeb's blogging and podcasting features, as well as the ability to use widgets and HTML snippets, provide powerful design tools that are easy to use. Experiment with it and you'll find it's powerful enough to meet the needs of most home users and even small businesses too.
How to organise podcasts with iWeb
1. Podcasts and blogs
Here's a page created using the 'Blog' template, which places an RSS subscription button on the page so people can subscribe to your blog. Visitors to your site can click on this button and receive updates in the RSS reader in their web browser or news-reader program.
2. On the button
Add podcasts by placing audio or video files on pages created with the Blog or Podcast templates. Go to the Insert menu, select the Button sub-menu, and select Subscribe To Podcast. This places another button on the page linking your podcasts to iTunes.
3. iTunes items
When someone visits your site and clicks on the podcast subscription button iTunes will launch and adds your podcasts to their iTunes library. We also tried this on a PC, and it worked fine subscribing using Internet Explorer and the Windows version of iTunes.
You don't need to be a big corporation to earn cash from your site
Try to imagine a 21st-century version of the rags-to-riches tale: a smart guy/gal has an idea for a website and sets the whole thing up on a laptop in their back bedroom. Five years later they sell the website for a gazillion dollars and then sit back and wait for Brad Pitt/Angelina Jolie to play them in the Hollywood version of their life story.
Of course, it might be a bit tricky to come up with an idea that Facebook, Google, Twitter and all the rest have somehow overlooked (but not impossible – after all, nobody saw Twitter coming along, did they?). But that doesn't mean you can't still make a bit of money with your website from time to time.
Get selling
The most obvious way, of course, is to start up a website for a new business that is selling a particular product or service. On a smaller scale, you could try setting up shop on eBay and flogging the contents of your loft.
However, iWeb wasn't really designed for business use, and most iWeb users will be home users who just want to set up a personal website as a hobby. Even so, it is still possible to 'monetise your online digital assets' – or, in plain English, to make a few bucks by selling advertising.
You don't have to be a massive website with millions of visitors, such as Google or Yahoo, in order to sell advertising. In fact, selling the advertising space is actually the easy part.
Instead of getting on the phone and trying to sell a few ads to local businesses yourself, you can just sign up for Google's AdSense program, which actually handles the tedious business of selling the ad space for you. And, just to make things even easier, Apple even includes a special AdSense widget in iWeb to help you out.
Like all the other widgets in iWeb, the AdSense widget can just be dragged and dropped onto your web page with a quick flick of your mouse, so you don't need any special technical know-how in order to insert the ads into your web page.
Earning from eyeballs
You do have to do a bit of work, though, if you want AdSense to work successfully for you. AdSense only starts to send you payments once you pass a certain threshold – which will depend on the number of people who visit your website and the numbers who also go on to click on the ads and visit your advertisers.
So you need to make sure you have a steady stream of people coming to your website to provide an audience for your ads – and preferably people who have an interest in a specific subject or activity, as that will make it easier to target them with relevant adverts.
If your website is little more than an online diary, where you post a few pics from last weekend's BBQ, then you're not going to attract much of an audience beyond your own family and friends. And that, in turn, means you're not going to generate much money from online ads.
Blog it!
A better option – and one that has started many a prosperous career on the web – is to create a blog. Instead of just writing about last weekend's BBQ, you could throw in a steady stream of recipes and cooking tips, and maybe the odd review of new BBQ equipment - and hey presto – you've got a blog!
A number of blogs have been turned into successful books, films or TV programmes – the most recent example being Belle Du Jour – while many other bloggers have been successful enough to turn their blogs into profitable full-time jobs. Again, though, it can't just be a blog that's only of interest to you and your friends.
But if you can write intelligently about a specific subject or activity that attracts a wider audience, then you're in with a fighting chance of attracting enough 'eyeballs' to get the ad revenue flowing.
The trick with blogging is to find a niche. You might think that topics such as stamp-collecting or Victorian moustache-trimming devices are obscure subjects that only appeal to a few people, but don't forget the internet is a worldwide medium. Whatever obscure subject you choose to blog about, the chances are that there are tens of thousands – if not millions – of people around the world who are interested in that subject.
And if you can get just a few thousand of those people checking in on your blog on a regular basis, then you've got the makings of a respectable revenue stream (see, you're picking up the marketing jargon already).
Sometimes you can even focus on a niche-within-a-niche. There are thousands of bloggers out there who write about digital photography. But if you were to write specifically about cameras and lenses that are particularly suited to sports photography, then you could still attract a large and devoted specialist audience. And the fact that those people have a strong interest in that particular subject also makes them a better target for ads that focus on that subject.
This means that the 'eyeballs' are more likely to translate into clickthroughs when people click on the ads, which in turn generates more ad revenue.
Know your stuff
In order to create a successful blog you obviously need to know a fair bit about your chosen topic, and to be able to write about it in an intelligent and interesting manner. You also need to update your website regularly – daily if possible, but certainly weekly. If people come to your website to read the latest news about Victorian moustache-trimmers and they see that your blog hasn't been updated in the last six months, then they're not going to come back.
The most important thing, though, is to blog about something you're really interested in. If that enthusiasm comes through in your writing then you're already halfway to attracting a regular audience, who will enjoy coming back to your blog week after week and help to keep the ad sales ticking over.
How to make sense of AdSense
1. Easy ads
Getting ads onto your website is normally hard work once you start trying to sell them and figuring out the technicalities of how to put them onto web pages. But iWeb makes it easy – just drag and drop the Google AdSense widget onto a page with your mouse.
2. Create your account
You are then prompted to enter your email address in order to set up your personal Google AdSense account, or to enter details of an existing account. If you're new to AdSense there's a 'Learn More' option so you can read more about the options that are available.
3. Making money
The AdSense widget allows you to specify the size and colour of the ads so that they don't clash too much with your page. The amount you earn depends on the ad, the number of people that view it, and the number of clickthroughs when people click the ads.
Related Stories
 |  |
"(Via TechRadar: All latest feeds.)
No comments:
Post a Comment