Article: Getting started with a PageKit - Part 1
Level: Beginner. Published on 15 March 2004 in Getting started
Learn how to add your own content to a PageKit, and then get the resulting site live on the Internet.
You've seen the PageKits on our site, and you're thinking, "Wow, the hard work's been done for me. All I have to do is put my own text in!" So you download the PageKit, and you have a .zip file on your computer, but what then? How do you edit it? What with? How do you change the look of the PageKit to fit with what you need? And finally, how do you get it online?
This tutorial aims to answer the very basics of these questions, and we'll be looking at each area in more detail in upcoming tutorials. We'll use the PageKit "Hi" (View it here) as our starting point, but the principles will be the same for many others. We'll aim here to do some basic site editing and get you your very own site live on the Net before the day is out!
You can get my working files from here.
1. Downloading and unzipping the PageKit
Go to the PageKit's download page and click on Download PageKit under the little thumbnail image. Your computer will probably prompt you to put the .zip file somewhere useful. I generally use the desktop, but it doesn't matter where you put it really, so long as you can find it afterwards!
While you're there, you might want to download the source PSD file too by clicking on Download PSD file for this PageKit. Save this to the same place.
You've just downloaded two compressed files which contain all the individual files for the PageKit. They're called .zip files. Now, locate the files on your computer's hard drive and unzip them to extract those individual files. You can find some instructions on what to use and how to do it on our Help/FAQ page.
If you're on a Mac, like me, you might find that the file unzips automatically after downloading.
When you're done you should have a folder called hi, and an extra file called hi.psd, as follows:
2. Editing the PageKit
Open up that hi folder. Inside it, you should find 4 files and another folder called images. You have two .html files (index.html and page.html), a .css file (default.css) and a .txt file (readme.txt).
What does each element do?
-
index.html- This is the first page of your Web site (your homepage). HTML files are what make up a Web site. They're really just plain text files which your Web browsers interpret to produce a Web page. HTML files link together to form a Web site. -
page.html- As a rule, Web sites contain more than one page, but we tend to provide you with just one to start with. It's effectively a generic sub-page - "one click" from the homepage. -
default.css- This "stylesheet" contains info about the fonts and styles used for your Web site. If you make one change here, it will be reflected across the entire Web site. -
readme.txt- Simply contains information about the PageKit and ELATED. Worth a read, hence the name! -
images- The images folder contains all the graphics files that the Web site uses, like the picture at the top-left of the page in the "hi" template.
How do I edit it?
Your Web browser usually looks at pages on the Web, but it can also open files that are stored locally on your computer. This is how we're going to monitor changes as we do them.
Go to the File menu on your browser, then click on the Open file (or similar) option and locate the index.html file inside the hi folder that you unzipped earlier. When you've opened this you'll see that it looks the same as it did when you were looking at it on the ELATED site, but you're now looking at your local copy of it. As we edit the page, you'll see your changes reflected in the browser.
To edit the pages of your site, you need some kind of editor program. HTML files are really just text files, so you can edit them quite happily in any text editor like NotePad or Wordpad (TextEdit on the Mac). These programs ship with your computer and are hence free! The downside with this is that you'll be confronted with a vision of HTML code. Whilst it's not the most complicated code, it can be quite intimidating for the new user!
The other option is that you can edit the page visually using a dedicated Web editor. The famous examples of these are Macromedia's Dreamweaver, Adobe's GoLive and Microsoft's FrontPage. Dreamweaver and GoLive are fine, pro quality tools, but FrontPage can be a little fussy so we tend to recommend avoiding it if possible. Sadly, these tools are expensive (Dreamweaver is around the $400 USD mark).
What we need is a free visual editor. Luckily there is one in the form of Mozilla's Composer. Mozilla is a free Web browser with great extra features like an email application, newsreader and also Composer - a visual Web editor. You can download it from the Mozilla Web site. You have to download the full Web browser to get Composer (around 12MB), but it's a useful addition to your Web building armoury, so well worth getting.
We'll be using Composer to edit the pages in the remainder of this tutorial.
Once downloaded, open up Composer from the Window menu in Mozilla, and then select File>Open to open the index.html file inside the hi folder. You should see something like this:
You can see that the text elements of the page are now editable, so experiment by changing some text to say something more useful! Just click in the boxes and type, as if you were using a word processor. Don't touch the writing in blue yet - we'll come back to them.
I'll use a random example of Web site for a poet called Sue and her cats to illustrate the techniques involved in editing the PageKit. I suggest you follow this through to get your head around how a site fits together.
When you're done, press Save. Now if you open the file in your Web browser as described above, you should see the changes you made reflected on the page, like this:
Links and other pages
We might have a homepage, but we need others. A page for Sue's poetry, and page for the cats etc. The first step is to work out exactly what we need. Assume that these are the sections (some of which we've "trailed" on the homepage):
- Homepage (which we have)
- About Sue
- Poetry
- Photos
- The Cats
- Contact (this will just be an email link)
We only have one subpage right now - page.html - so we need to make a few copies of that to get the required number of pages. Bring the site up in an explorer window (a Finder window on the Mac), so you can see the files, and copy the file page.html a few times, renaming each one appropriately as:
about.htmlpoetry.htmlphotos.htmlcats.html
Finally, you can delete the original page.html file if you like.
You should now see something like this:
Linking it all together - making the menus work
Now we need to link these files to the homepage, so bring up index.html again in Composer. We'll be linking to these files from the menu at the top of the page. Right now they're not saying the right things and they're all pointing at page.html, which no longer exists! Not ideal.
We're going to have six menu items including a link to the homepage (we'll see why later on) and an email link. We currently have seven options, so we need to remove one to start with. We'll remove the left hand one. In Composer, click in the "about" area as defined by the red borders and then click on the little "X" above the menu option:
This will remove that option from the page to leave you with this:
Now we have the correct number of options, we need to rename them to reflect the correct pages. Just highlight the links and type the correct options. You can use real language at this point - it's so your users can find what they want after all. You should end up with this:
Now this is all well and good, but the links are not pointing to the correct pages. To change this, highlight each link, and click the Link button in the top bar of Composer:
This brings up the links editor. Type the filename of the actual page you want to link to - in this case the about.html page we created earlier. Be careful, you have to type these correctly:
Now repeat for all the links in the menu and in the page, changing filenames where appropriate. For example, where we trailed Sue's photos earlier it has a link beneath, called "details". This should link to photos.html, as should the "photos" menu item in the top menu. You can link to the same file more than once in any page.
The "contact" link should be an email link, so type mailto:you@wherever.whatever into the links editor, substituting your email address.
When you've done all this, save the file. Open it up in your Web browser again and you should find that all the links on the homepage go to the right pages, the email link should open an email window, and the homepage link should just reload the homepage.
We're getting there!
We now have a working menu on the homepage. Of course, the other subpages still have the old menu, which is little use. Also, you can't see that the pages are right since they all look the same! We need to do something about that, so open about.html in a new Composer window, so you have both index.html and about.html open.
First, just type About Sue to replace the main page title, so we know where we are. Now we need to copy the menu from index.html into our about.html page. To do this, go to index.html and select the whole menu by clicking and dragging the menu until it looks like this:
Now go to the Edit menu and choose . Go back to the "About" page and highlight the menu in the same way. Go to the Edit menu and choose Paste. You should see the new menu replace the old one. This is a bit fiddly but you'll get the hang of it! Save the file and repeat for the other subpages.
Now when you look at the site in your Web browser, all the pages should link to each other, giving a seamless site! You should also be able to see which page you're on since we changed the titles.
That means we've done all the nasty structural work and we can now concentrate on getting the content right!
By now it's probably obvious that you can just open up each page in turn and type in your new content. Hit return on your keyboard to add a paragraph break. You can also highlight any area of text and make it a link to a page using the link editor, as covered above.
Adding an image
You'll probably want to add images to your page (maybe on the photos.html page), and you can do this by positioning your cursor where you want the image to end up on the page, then clicking on the Image link in the top bar of Composer and browsing to the image you want to add.
However, make sure that:
- The image is within your
imagesfolder. Just move or copy the file there. - It's the right size.
- It's either a
.gifor.jpgfile.
For example:
You can then type in a little caption beneath. Repeat as often as you like, within reason. Watch out for the file sizes - my "St Paul's" image is around 12kB. If you make the photos smaller you can reasonably fit more on a page. At 12kB each, reckon on half a dozen images per page as being reasonable.
You can turn images into links as well as text. To do this just click on the image and use the link editor as before. This is great in our case since we might well want to link to a bigger picture of St Paul's. You can link directly to an image which will appear in the browser window. People can then use their back buttons to get back to the page of smaller images:
You could use the same trick with the "Cats" page too! Take a look at mine for instance (yes, these are genuine ELATED cats). Click on the small cats photo to view the big version!
3. Uploading the PageKit!
Looking at our pages in a Web browser, it's really coming together. The site has structure, links, images, a basic gallery, etc. Now we need to upload it to a Web server so that people can see your pictures, thoughts etc.
Hosts
There are free Web hosts, the most famous of which is Geocities, now owned by Yahoo!. These are all very well but will put ads all over your site and are pretty unreliable. Avoid if you can.
The best cheap host I've found is Nameroute. This gives you a proper domain name (e.g. www.suesmith.com), no ads, 10Mb storage and POP3 email for only $15 USD/year. Go with it if you can!
If you want something better than that, then we like iPowerWeb.
Uploading
The one thing all hosts have in common is that you have to upload the files you've just created to the server. This is often and most traditionally done via FTP (File Transfer Protocol). You generally have a little application to do this.
On the PC that might be WS-FTP or CuteFTP, and on the Mac, Fetch or Transmit. These are usually about $20-30 USD and you can get free demos from download.com. If you use IE on the PC, this functionality is built into the Web browser to a degree, and you can often just use that.
To upload via FTP, you'll need the following info:
- host (the server address)
- username
- password
You should get these details from your host on signup. You can find more on FTP from our in-depth FTP articles.
The other way that you upload files is via the a Web interface from your hosts. Nameroute have a file manager as do Geocities. They're a bit fiddly but they work fine. Follow instructions from your hosts.
In either case, upload all the files apart from readme.txt, being sure to keep the image folder structure in place. Your hosts will tell you exactly where in the file structure of the server to upload to.
The site is now live and you can see it on the Web using your Web browser, in the same way as you've seen other people's sites! To show you that all this works, I've created a site at Geocities: http://www.geocities.com/itboy2000/.
So there we have it - a very basic site based on the "Hi" PageKit! Good work!
We've covered:
- Downloading and unzipping
- Site structure and creation
- Basic editing
- Adding images
- Links
- Hosts
- Uploading files and getting a site "live"
Hopefully you can now use and apply these techniques to your own site. Good luck!
In the next article we'll cover changing the look of our PageKit in much more detail.
Share and enjoy
If you liked this article, you can share it with others by adding it to any of the following social bookmarking sites:
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!