Time was putting together even a simple website was something only web designers or computer programmers could do. Fortunately now things have changed.
But websites aren’t just for posting funny pictures of cats. What are Michael, Erin, and Sean doing online? Let’s see:
Erin, Michael, Sean
Michael found an outstanding new way to reach potential employers and show off his skills at the same time: he made himself a website. He used Weebly to put together a totally pro-looking online advertisement for his own bad self. He posted his resume, work samples, portfolio, sample writings, and even links to a few short education films he made and posted on YouTube. He used this link when applying for jobs as a way to showcase himself and stand out from the crowd.
And guess what?
…drum roll…
It worked.
Michael accepted a new full-time position just nine weeks after he started using his site. He even negotiated a nice little salary increase from where he was at before. Unfortunately, his new officemate has a really irritating nose whistle, but this is a minor inconvenience. You better believe he’ll be maintaining his site and using it to show off all the skills he’s learned and will continue to learn.
Erin is eager to get a web presence for Yurt World. She started the blog way back when and that’s been pretty handy, but she feels it’s time to expand. She’s going to trick out her site with e-commerce, RSS feeds, embedded videos, and photo galleries, plus maps showing where on the globe her yurts are being used (although she will definitely need help from professionals for some of this.). She’s going to integrate her blog with the site, and she’s also going to invite customer comments and publish them along with Yurt World’s responses. She plans to make her website a community where the yurt-minded can congregate. We imagine this can only be good for business.
And Sean? He started a site to be a travel journal to document everywhere he’s been. He integrates his Flickr account to show off all of his photos, plus his Facebook and Twitter feeds so he has an all-in-one web presence. His site is a space where he can express himself, show off his artwork and photos, and write about the amazing places he’s been and wonderful people he’s met. Part journal, part portfolio, and part tribute to his travels: his website is as personal and unique as he is.
Not working for you? Here are some Prezi alternatives:
- Are you using an iPhone, iPod or iPad? Download the free Prezi Viewer app and go to the Weebly Website Prezi online, then return to this blog when you’re finished.
- Is the Prezi too zoom-y? You can also view the Weebly Website Prezi as a PDF, which has no motion.
Super Happy Web Time!
Although there are a lot of different ways to create a web site, Weebly is what we’ll be using here. You can do a practice page to play around with, or start in right away making your dream site. Consider this tutorial a guide to get you started, but really the best way to learn is just to plunge in and start playing around.
Let’s start at the very beginning; a very good place to start. To begin, put in your name and your email, and then pick out a nice, secure password.
The next thing you’ll see is that annoying little screen where you have to type the words you see. Remember, this proves you’re a living, breathing human being with a soul and feelings, and not a heartless, mindless spambot programmed to destroy the internet. So just do it already.
Now you’ll be asked to pick a name for your site. What? You don’t have a name ready? Well, just pick something. Change it later if you don’t like it. And choosing the type of site you’re planning is, we hope, pretty self-explanatory.
Next, you’ll be asked to pick a domain name. Holy technical jargon, Batman! What does that mean? Easy: it just means you’re deciding the address people will type into their browser when they want to get to your website. If you’re just starting out with your business, or if this the first time you’ve created a website, you probably want to choose the first option. (You can always change your mind later if you want to.) In our example, we’ll pick the first option, too, so the website we’ll be creating is http://www.yurtworld.weebly.com.
Do you see the tabs across the top? We’ll start with the “Elements” tab. That tab has four subcategories on the left: Basic, Multimedia, Revenue, and More. Can you guess where we’re starting? If you said “Basic,” you’re absolutely right. In the next section we’ll talk about basic design.
Basic Design
One cool thing about Weebly is that the elements are drag-and-drop—meaning that you can literally drag down (click and hold with the left mouse button, then pull across the page) the elements you want and place them where you want. For example, try dragging down a “Paragraph with Title” element and drop it at the top of your page just below the header (you’ll see an orange line that shows you where the element will be placed). Let go of the mouse button to place the element. Don’t like where you put it? Drag and drop somewhere else.
The filler text in your element says “Click here to edit,” and that’s just how it works. Click on the text and you’ll see an editing toolbar pop up at the top of the page to change the text color, size, alignment, and so forth. Try editing some text now.
Pro tip: if you’re getting frustrated with the text editing process, try typing in some dirty words and giggling about it like a 12-year-old. That always helps us, at least.
Drag and drop a few elements, then start playing with them. Move them around. Notice how each element has a red x on the right-hand side. That’s if you want to delete an element. Try it now. And do you see the green arrow on the left-hand side? That’s if you want to move this element to another page on your site. You haven’t created any other pages for your website yet, so this part won’t work very well for you. Unless of course you’ve already skipped ahead and made more pages, in which case maybe you want to teach this class?
Linking: It’s really fun
One of the critical parts of having a web page is having links to other pages. This is easier than you might think. But please be aware that if you believe the computer can read your mind, it’s going to be a lot harder than you might think.
Take a look at one of your elements that has text in it. Highlight the text you want to turn into a link, then look around for the text editing toolbar (probably at the top of the page). Do you see the button with the picture of the chain? We actually think it looks like a Lone Ranger mask, but it’s really a link (get it?) of a chain. Click on that, and you’ll see you can make a link to:
- another page on your own website (again, this will be handier when you have more than one page)
- a website elsewhere on the internet
- a file, like a Word or Excel document
- an email address
Try making a link, then take a moment to contemplate this sentence: Are you a genius or what?
Adding pizzazz
Another thing you’ll almost certainly want on your site is images. Drag and drop a “Picture” element or a “Paragraph with Picture” element. See where it says “Click here to edit”? Go ahead and click right on it. Here’s where it gets exciting:
You’re going to have to get your image from somewhere, right? This is how we do that. At the top of the dialogue box that pops up, you can choose to get your image from My Computer (meaning your computer, not our computer, since otherwise that would just be confusing), a photo gallery (Weebly pulls images from Flickr; check out the copyright agreement at the bottom), or the internet. If you pick the internet, be sure to credit your source! If you just use someone’s image without respecting their copyright and giving them credit, yes, that is stealing, and yes, that person has every right to be mad at you. So don’t come crying to us if you do it anyway and get in trouble.
Go ahead and find an image to put on your site. If you want to use one on your own computer, navigate to the folder where you store your photos and select one to use, then click “Open.” To get an image that’s online, either search through the photo gallery or type in the address (URL) of where the image is on the internet.
If you don’t know where to get an image from, just choose “My computer” and your computer will probably automatically take you to the folder where the sample photos that came preloaded on your machine are kept.
Pro tip: if you want to take an image from the gallery or the internet and save it to your personal computer, find the image in the gallery or online, then right-click on the image, then left-click on “Save picture as.” You’ll be able to browse through folders on your computer so you can save it somewhere convenient. You may want to rename the file something less gibberish-y.
Notice that after you import an image, when you hover your mouse over it, you get new toolbars that pop up to edit the image. Play around with this. Try adding a caption. And if you really want your mind blown, click on the orange “Edit” button and check out all the ways you can tweak your image. (If you joined us for the last Thing, Online Image Editors, this will be old hat for you.)
In addition to images, other elements you can add are in the multimedia tab, meaning things like a photo gallery, Google map, or that cute YouTube video of a dog barking “Auld Lang Syne.” The “Revenue” elements are mostly for businesses that want to sell goods or services; you’ll need to set up a Google Checkout or PayPal account to use these. And under “More,” holy moly there’s a lot to explore. See if you can find these things and add them to your site:
- a game
- a survey
- an RSS reader
- a way to signal Batman that you need help
Just kidding! The best way to signal Batman is still the tried-and-true light in the sky. Although we’re given to understand that Bruce Wayne is now on Twitter, so you can also try reaching him that way.
Make it shine
Now comes the really fun part: what do you want your site to look like? Click on the “Design” tab and the first thing you’ll see is the most popular templates Weebly has. You can pick one of these, or click on “All Themes” for more choices. Go ahead, click around and see what you fancy. Each template allows you to preview what the structure of the page will look like, plus you can change your mind later anyway, so don’t worry about making any irreversible decisions.
Side note: How do you pick a good design? The first question to ask yourself is, “What do I want to use the site for?” Then pick a theme that captures that purpose and that feeling.
And finally, if you find a theme that’s almost perfect but not quite, you can use the “Design Options” tab to monkey around with colors and fonts.
Two last things: one is that Weebly has a great help section that can work you through almost any problem. That’s the “Help!” button in the upper right. And at any time when you’re ready to see what your page looks like, click on the orange “Publish” button and you’ll be able to see your masterpiece (or soon-to-be-masterpiece-in-progress, depending on how far you got today).
More Information for the Curious
Okay, now I have a web site with images and links. But it’s going to need a lot more pages than just this. How do I start putting in all my information? Also, I want to move this thing here over to the right, or maybe down a little.
Easy there, buddy. Let’s start by clicking on the third tab, called “Pages.” You’ll notice a couple of things right away. First is that there isn’t much there. Second is that your shoe is untied. Hah! Gotcha. Man, that gag never gets old.
As we were saying: before you start to add in new pages to your website, you’re going to want to think about navigation, or how easy (or hard) it is for someone to get around your site. Making websites easy to read is a topic way too big to cover adequately here, but if you want to really delve, try reading Don’t Make Me Think by Steve Krug. You can also get a good start by paying attention to websites you like and visit a lot, and watching how they organize their information. Online, your presentation is often as important as your message, so take care to put things in an order that makes sense. We recommend have a friend or two test out your site to give you feedback on what works and what is a problem. Heck, order some pizza and have a testing party. Honestly, it can’t hurt.
For now, just click on “Add a Page” and see what happens. You can name your new page whatever you want. Try dragging it above or below the page called “Home,” then go back to the “Elements” tab to view the page. Then go back to the “Pages” tab and drag your new page below “Home” and slightly to the right. Now go back and try to spot the difference.
Notice that there’s also an “Add Blog” button. If you want a blog that is integrated with your web site, this is a super-simple way to do it. Try editing the blog page to see what it looks like.
Pro tip: when you’re editing your blog page, check out the “Elements” tab. It will have a lot of options that are different from your regular web page.
Also, if you have a page that you worked on really hard to get just right and you want to use it as a pattern to make other pages, you can select that page and click on “Copy Page” to get a perfectly usable copy, which can be moved around and edited at your whim.
The penultimate tab, “Editors,” is where you can add other people who are allowed to access your site; you can control the level of access each person gets. And finally, the “Settings” tab is where you can—guess what?—control the settings for your site.
And finally
As we mentioned earlier, Weebly is far from being the only web site software available. Some other choices include:
wordpress.com — Good for a basic and straightforward introduction to blogging only.
wordpress.org — Yes, confusing, isn’t it? This is good for the more advanced user, or someone interested in doing more with a blog and/or creating a website.
Google sites — A handy way to get a website up and running in a jiff. Plus you can integrate with all of your other Google products (see Things #5, Gmail, and #6, iGoogle).
Ta da! You made it all the way to the end of the Baker’s Dozen classes. Congratulations! We’ve certainly enjoyed talking tech with all of you, and we hope you’ve enjoyed it as well. Let us know what you think: leave a comment here below to tell us what you loved, what you hated, and what you remained completely indifferent about.
So that’s it from us. If you want to know more, visit your local library and we’ll be happy to help you out. Thanks for being here, and thanks for sharing Baker’s Dozen with us. See you at the library!
