2. TABLE OF CONTENTS
PLANNING THE WEB SITE 5
PLANNING SESSION ........................................................................................................................5
USING THE INFORMATION ................................................................................................................5
WHAT INFORMATION DO YOU WANT TO SHARE ....................................................................................6
10 POINTS FOR A GOOD WEBSITE 7
8 GOOD ELEMENTS TO INCLUDE ON YOUR SITE 7
IMAGES 9
IMAGE OR GRAPHIC? ......................................................................................................................9
44 DIFFERENT GRAPHIC FORMATS? ...................................................................................................9
RASTER ........................................................................................................................................9
PIXELS AND THE WEB 10
WHAT'S A BITMAP?......................................................................................................................10
COMPRESSION .............................................................................................................................10
THE GIF IMAGE FORMATS ..............................................................................................................11
JPEG IMAGE FORMATS ..................................................................................................................11
READER'S IMAGE QUESTIONS .........................................................................................................11
HOW DO I SAVE IN THESE FORMATS? ................................................................................................12
WHAT IS A BLOG 13
SO WHAT IS A BLOG??? 14
GETTING STARTED WITH WORDPRESS 0
CREATING YOUR WORDPRESS SITE ...................................................................................................0
CHANGING THE PASSWORD ..............................................................................................................4
ADDING CATEGORIES TO YOUR SITE ...................................................................................................4
MANAGING CATEGORIES ..................................................................................................................5
ADDING PAGES TO YOUR SITE ...........................................................................................................5
CREATING A NEW PAGE 5
ADDING LINKS (EXTERNAL AND MAIL) 6
ADDING A POST 7
WRITING A POST - STEP BY STEP ......................................................................................................7
BASIC POST - EDITING SCREEN .........................................................................................................7
WRITING POST - BASIC PANEL .........................................................................................................7
TIPS FOR POSTING .........................................................................................................................8
CHANGING COLOURS AND LAYOUTS 9
INSERTING IMAGES INTO WORDPRESS 10
TEXT AND IMAGE ALIGNMENT .........................................................................................................11
PUBLISHING 13
3. Weave your own Web Page in a Day
Overview:
The course is not intended to turn delegates into a professional web page writer but to enable
them to create simple web pages so that by the end of the day they will have a sound
understanding of the practices involved in publishing a web page. By means of this introductory
training, delegates will be able to establish a simple web page that reflects their business and
marketing requirements.
Objectives:
The aim of the course is to learn and understand the principles of web page writing by spending a
day doing it. The course explores the principles of basic web page design as well as putting
together the different elements of a web page yourself:
• text: about the delegates company, products or services
• banner headings
• using fonts, colours and backgrounds to best effect
• incorporating graphics
• creating hyperlinks to other pages and sites
• relevant contact information (email, fax, phone)
• publishing the page(s)
Pre-Requisites:
Basic understanding of using the mouse and Windows would be useful as well as being able to use
the Internet.
4. Building a Website
What makes a good web site?
Focus
What is the purpose of the site?
Is it intended to support an existing project or organisation – or should it complement it?
Look at what can be done on the Web that can’t be done in conventional media. Don’t try to do on
the Web what conventional media does better.
The strengths of the Web: -
Presentation of information that can be accessed through several different routes (the principle of
hypertext)
Publication of more detailed information than can be provided on push technologies as radio and
TV
Presentation of your programme or department to a world audience
Speed
It doesn’t matter how amazing your site, is if nobody sticks around to look at it. Bear in mind that
Internet users are prepared to wait if they are certain that the information they are waiting for is
what they want…but if they’re not sure, they won’t wait to find out.
Therefore, it is extremely important that the Home Page and Section Home Pages load quickly. In
standard pages, you can afford to include content that takes longer to download – but make sure
the users know what they are waiting for.
If you are including downloadable items in a site (such as a big picture or a sound file) you should
indicate the size and format of the file.
If you find that pages are getting overly long, break them into several sections – for example, an
address list page could be broken into three pages for A-G, H-P and Q-Z.
Presentation
A clear and effective presentation can increase a site’s usability immensely – but it is
important no to go overboard at the expense of speed.
Internet users know that the web doesn’t look as nice as the TV or a magazine. Most are (albeit
subconsciously) aware of the benefits that the web can offer over the other media and would
rather have an effective and smart presentation that loads quickly than a flashy full-colour
animated sequence that keeps them hanging around.
Careful use of graphics and navigation techniques can make a site faster and more pleasurable to
use.
5. Layout and Navigation
The navigation system is one of the most important factors in writing a good Web Site. The visitor
should be given an idea of the layout of the site from the Home Page – this should be broken
broadly into easily identifiable sections/categories so that the user builds a mental map of the site
and knows how to navigate around.
Each page should include links to the Home Page and Section Home pages – depending on the
route that the visitor took through the site; use of the BACK button on their browser may not
always be appropriate. At any stage in using your site, the visitor should know there they are and
how to get to another section if they so desire.
What do you want to give the target audience?
Are you advertising or supporting an existing project? If so, you need to decide the time scale and
life of the Web Site. It may be that you want the Web Site to go up in advance of the programme
being broadcast to make people aware of its existence; you may want to provide support materials
while and after it is being broadcast. Estimate the amount of time that it will take to make
updates and make sure that someone is available to do that s part of their daily routine – the Web
is full of sites that are out of date and your site shouldn’t be one of them. Also decide the life span
of the site – is its content worth archiving or keeping live?
It may be that the Web Site is an entity in its own right. If so, what is it offering that can’t be
provided on conventional media (TV or radio)? How will it be publicised (purely on the Internet?)
6. Planning the Web Site
(Taken from http://codex.wordpress.org/First_Steps_With_WordPress)
Planning Session
All good plans come from a good plan. Sounds redundant, but true. If you want to create a good
and solid website, you need a good and solid plan. I know it's hard to do, and I know you want to
keep poking and playing with this exciting program, but it is time to take a break away from your
computer and turn to the old paper and pen. That's right, we're going back in time to when people
actually wrote things down.
On a piece of notebook paper, or whatever is lying around, describe your site.
Take five to twenty minutes to come up with a purpose for your site, or better yet, call it your
Mission Statement.
Answer the following questions:
• What am I going to do with this?
• Who is going to read this?
• What kinds of information will I be posting?
• Why am I doing this?
• Who am I doing this for?
• How often am I going to be posting and adding information?
Now, compile this information into a paragraph so it looks like this:
This website will be dedicated to X, Y, and Z,
and cover the topics of A, B, and C. The audience will
be __________ ________________ _______. I will be adding
posts every _____________ about ________ _______ ______________.
I am doing this because _____________ _____________ __________________.
Using the Information
From this information, we've gathered a lot of information. We've uncovered information on how
you might layout and design your site.
If you know your audience is mostly made up of young people under the age of 25, you will
probably want a fashionable look ranging from wild colours and crazy graphics to dark foreboding
tones. Something appropriate for that generation. If you are providing factual information about a
serious subject, then you will probably want a more conservative look where the information is
more important than a lot of pop and flash.
You probably already have a design idea in mind, or you will be copying over from your previous
site, but take a moment to use this information to reconsider your design, and to see how what
you want will work with the WordPress options.
You have also uncovered the possible categories for your site. The topics and subjects you will be
covering are listed in your purpose statement. Let's say your purpose statement said,:
"The website will be dedicated to providing news and information on computers, web pages, and
the Internet and cover the topics of computer tips, web page design, and Internet news."
Your topics are your categories. Write your categories down below your purpose paragraph and
notes about your web page design.
Now, what subcategories might be under these topics. Under Computer Tips, you might want to
segregate them by Windows, Linux, and Mac. Or maybe Software and Hardware. You can
have sub-sub-categories, but let's stop with subcategories for right now. Write these down.
7. Remember the question about why you are doing this? Is it because you have valuable and timely
information or knowledge to share, because you want to talk about a subject that interests you, or
maybe because you just think it will be fun to do. Why not? Everyone's doing it!
Understanding the timeliness of the information you want to present on your site helps you
organize the information on your website. Your website is organized by several different methods.
If the date of when you posted the information is critical to the success of the page, then having
links to your posts referenced by date is important. If the information itself is more important and
timeless, then having your posts referenced by category is the best choice.
Have you noticed that you are starting to lay out your website? As you layout your website on
paper, consider whether you want both categories and dates, or just one of them in your sidebar.
What information you have and how you want to help the user find the information is critical to
your website design.
What Information Do You Want to Share
As you think about what information the user will need to know, you have to consider what
information you are willing to share with them. Part of that information may include how to contact
you, the purpose of the site, who you are and your expertise, and get to know who you are.
WordPress v1.5 offers a new feature called Pages which makes the process of presenting this
information in an easier fashion. Pages, similar to posts, are most commonly used to present
unchanging information such as Pages for About Us, Contact Us, Sign Up for Our Mailing List,
and other static information.
Before creating your individual Pages, you need to think about what information you would like the
Page to hold. Write down the possible Page titles and describe the information you are willing to
share online on each Page.
Comments
Part of the fun of WordPress is the ability to have viewers leave comments on your site. It creates
a dynamic interchange between you and the viewer. Do you want comments on your posts?
Comments on posts come in a variety of forums, from pat on the backs (Good job! Like the post!)
to extensive conversations and commentary about the posts turning into long chats. Or maybe you
are seeking comments that add to the information you've posted. How you present your comment
form, and if you do, invites people to comment.
Comments can also take up a lot of time, responding to them and moderating them. If they are
critical to your site, then include them and consider how you want them presented. Go back to
your test site, the first post created at the time of installation includes a sample comment. You can
even make a few comments yourself on the posts you created. Take a look at how they are laid
out and consider how you might want them to look to fit into the design and layout of your site.
Who is the target audience?
It is obvious but always bear in mind that your site can and will be viewed by a world audience.
This may not be your target audience but it must be considered at all times (for example, always
look at whether the material you are publishing is appropriate for different cultures).
What does the target audience want from you?
Evaluate what the target audience are looking for. Is it an information site or an entertainment
site? Is it something else entirely?
Good Web Sites break the content down into sections which match the visitors’ mental map of the
subject.
Ask yourself why your audience would use the internet rather than other forms of communication
– especially when for home users, the TV or radio turns on immediately whereas it takes several
minutes to boot up a computer and log on to the internet. What advantages does it offer? This
may be 24-hour availability, the fact that people can visit and browse sites at their own pace and
choosing. It may be that they can get more information on the internet/ intranet than they can
through other methods (e.g. printed literature).
8. 10 Points for a Good Website
User-focused
Compelling content
Regularly updated and refreshed
Quick to download
Easy to navigate and use
Appealing and clear design
Reliable and stable
Interactive with good functionality
Compatible with different browsers
Quality consistently maintained
8 Good Elements to Include on Your Site
About Us – a page with information about your group
Contact – a page with your address, telephone number & email address
Feedback Area – a page for people to register their comments and give you suggestions &
feedback about the site
Links – a page with hyperlinks to similar, or appropriate sites (perhaps a reciprocal arrangement
can be made with featured sites)
What’s New – an area for frequent users of the site to quickly see if any new content has been
added
Organise your site into subject areas and have links from your front page to these areas. Each
subject area should have links to pages related to that subject…possibly a couple of links to
interesting relevant pages on other area
A site map – a page showing the exact layout and structure of your site
A “help” section if the site performs a potentially tricky function.
9. A 10 Point Checklist:
Purpose of the Web Site and intended Target Audience:
What is the purpose of the site and who is it for? Is the audience for the site identified or is it
obvious? If not who do you think it is aimed at?
Maintenance:
When was the site last updated? Is the information on the site out-of-date? If so, what sort of
impression does it give you?
Ease of Use:
Is the site easy to find your way around? Is there an index? If not, does it need one?
Content:
How useful is the content? Is it what you expected? Is it clear and well written? Do the pictures
contribute anything to the site or are they simply irritating?
Links:
Links to other sites are important. Do they work? How useful are they and do they lead on to
other useful information?
Design:
A well-designed site will make it obvious how you use it and navigate around it. The site needs to
display information fairly quickly.
Interactive features:
Interactivity allows you to send messages to the site and receive information back. What level of
interactivity does the site allow?
Low – allows you to read information only
Medium – with things to do that allow you to click to choose options.
High – sites that allow you to fill in online forms and send them, submit answers and correct
answers are sent back as in an online quiz, active participation and communication such as online
web trading.
Advertising:
Is the site full of blatant advertising for the site’s products or those of other people? Is it of
interest or relevance to you?
Web unique:
Could you get this information more quickly and more effectively from another source? Does the
site provide additional facilities not available over the phone or through the post?
Recommendation:
Would you recommend the site to somebody else?
10. IMAGES
On the Net, luckily, we really only have to deal with three main types of images:
• CompuServe GIF,
• JPEG, and
• Bitmaps.
At the moment, those are the only three that are roundly supported by the major browsers. But
what's the difference between them? What does it mean if a GIF is interlaced or non-interlaced? Is
a JPEG progressive because it enjoys art deco? Does a Bitmap actually offer directions
somewhere? And the most often asked question:
When do I use a specific image format?
Image or Graphic?
Technically, neither. If you really want to be strict, computer pictures are files, the same way
WORD documents or solitaire games are files. They're all a bunch of ones and zeros all in a row.
But we do have to communicate with one another so let's decide.
Image. We'll use "image". That seems to cover a wide enough topic range.
I went to my reference books and there I found that "graphic" is more of an adjective, as in
"graphic format." You see, we denote images on the Internet by their graphic format.
GIF is not the name of the image. GIF is the compression factors used to create the raster format
set up by CompuServe. (More on that in a moment).
So, they're all images unless you're talking about something specific.
44 Different Graphic Formats?
It does seem like a big number, doesn't it? In reality, there are not 44 different graphic format
names. Many of the 44 are different versions under the same compression umbrella, interlaced
and non-interlaced GIF, for example.
Before getting into where we get all 44, and there are more than that even, let me back-peddle for
a moment.
There actually are only TWO basic methods for a computer to render, or store and display, an
image. When you save an image in a specific format you are creating either a raster or
meta/vector graphic format. Here's the lowdown:
Raster
Raster image formats (RIFs) should be the most familiar to Internet users. A Raster format breaks
the image into a series of colored dots called pixels. The number of ones and zeros (bits) used to
create each pixel denotes the depth of color you can put into your images.
If your pixel is denoted with only one bit-per-pixel then that pixel must be black or white. Why?
Because that pixel can only be a one or a zero, on or off, black or white.
Bump that up to 4 bits-per-pixel and you're able to set that coloured dot to one of 16 colours. If
you go even higher to 8 bits-per-pixel, you can save that coloured dot at up to 256 different
colours.
Does that number, 256 sound familiar to anyone?
That's the upper colour level of a GIF image. Sure, you can go with less than 256 colours, but you
cannot have over 256.
That's why a GIF image doesn't work overly well for photographs and larger images. There are a
whole lot more than 256 colours in the world. Images can carry millions. But if you want smaller
icon images, GIFs are the way to go.
Raster image formats can also save at 16, 24, and 32 bits-per-pixel. At the two highest levels, the
pixels themselves can carry up to 16,777,216 different colours. The image looks great! Bitmaps
11. saved at 24 bits-per-pixel are great quality images, but of course they also run about a megabyte
per picture. There's always a trade-off, isn't there?
The three main Internet formats, GIF, JPEG, and Bitmap, are all Raster formats.
Pixels and the Web
Since I brought up pixels, I thought now might be a pretty good time to talk about pixels and the
Web. How much is too much? How many is too few?
There is a delicate balance between the crispness of a picture and the number of pixels needed to
display it. Let's say you have two images, each is 5 inches across and 3 inches down. One uses
300 pixels to span that five inches, the other uses 1500. Obviously, the one with 1500 uses
smaller pixels. It is also the one that offers a more crisp, detailed look. The more pixels, the more
detailed the image will be. Of course, the more pixels the more bytes the image will take up.
So, how much is enough? That depends on whom you are speaking to, and right now you're
speaking to me. I always go with 100 pixels per inch. That creates a ten-thousand pixel square
inch. I've found that allows for a pretty crisp image without going overboard on the bytes. It also
allows some leeway to increase or decrease the size of the image and not mess it up too much.
The lowest I'd go is 72 pixels per inch, the agreed upon low end of the image scale. In terms of
pixels per square inch, it's a whale of a drop to 5184. Try that. See if you like it, but I think you'll
find that lower definition monitors really play havoc with the image.
What's A Bitmap?
get that question a lot. Usually it's followed with "How come it only works on Microsoft Internet
Explorer?" The second question's the easiest. Microsoft invented the Bitmap format. It would only
make sense they would include it in their browser. Every time you boot up your PC, the majority of
the images used in the process and on the desktop are Bitmaps.
Against what I said above, Bitmaps will display on all browsers.
Bitmaps are good images, but they're not great. If you've played with Bitmaps versus any other
image formats, you might have noticed that the Bitmap format creates images that are a little
heavy on the bytes. The reason is that the Bitmap format is not very efficient at storing data. What
you see is pretty much what you get, one series of bits stacked on top of another.
Compression
I said above that a Bitmap was a simple series of pixels all stacked up. But the same image saved
in GIF or JPEG format uses less bytes to make up the file. How? Compression.
"Compression" is a computer term that represents a variety of mathematical formats used to
compress an image's byte size. Let's say you have an image where the upper right-hand corner
has four pixels all the same colour. Why not find a way to make those four pixels into one? That
would cut down the number of bytes by three-fourths, at least in the one corner. That's a
compression factor.
12. The GIF Image Formats
GIF, which stands for "Graphic Interchange Format," was first standardized in 1987 by
CompuServe, although the patent for the algorithm (mathematical formula) used to create GIF
compression actually belongs to Unisys.
The first format of GIF used on the Web was called GIF87a, representing its year and version. It
saved images at 8 pits-per-pixel, capping the colour level at 256. That 8-bit level allowed the
image to work across multiple server styles, including CompuServe, TCP/IP, and AOL. It was a
graphic for all seasons, so to speak.
CompuServe updated the GIF format in 1989 to include animation, transparency, and interlacing.
They called the new format, you guessed it: GIF89a.
There's no discernable difference between a basic (known as non-interlaced) GIF in 87 and 89
formats. See for yourself.
JPEG Image Formats
JPEG is a compression algorithm developed by the people the format is named after, the Joint
Photographic Experts Group. JPEG's big selling point is that its compression factor stores the image
on the hard drive in less bytes than the image is when it actually displays. The Web took to the
format straightaway because not only did the image store in fewer bytes, it transferred in fewer
bytes. As the Internet adage goes, the pipeline isn't getting any bigger so we need to make what
is traveling through it smaller.
For a long while, GIF ruled the Internet roost. JPEGs are "lossy." That's a term that means you
trade-off detail in the displayed picture for a smaller storage file. I always save my JPEGs at 50%
or medium compression.
The difference between the 1% and 50% compression is not too bad, but the drop in bytes is
impressive. The numbers I am showing are storage numbers, the amount of hard drive space the
image takes up.
Reader's Image Questions
Which image do I use where?
There's just not a good answer to this question. No matter what I say, someone else can give you
just as compelling a reason why you should do the opposite. I'll tell you the rules I follow:
• Small images, like icons and buttons: GIF (usually non-interlaced)
• Line art, grayscale (black and white), cartoons: GIF (usually non-interlaced)
• Scanned images and photographs: JPEG. (I prefer sequential. I'm not a fan of
progressive.)
• Large images or images with a lot of detail: JPEG (I prefer sequential)
That said, I also follow the thinking, "Do people really need to see this image?" Can I get away
with text rather than an image link? Can I make links to images allowing the viewer to choose
whether to look or not?
The fewer images I have on a page, the faster it comes in. I also attempt to have the same images
across multiple pages, if possible. That way the viewer only has to wait once. After that, the
images are in the cache and they pop right up.
13. How do I save in these formats?
You have to have an image editor. I own three. Most of my graphic work for the Web is done in
PaintShop Pro. I do that because PaintShop Pro is shareware and you can get your hands on the
same copy I have. That way I know if I can do it, you can do it.
To get these formats, you need to make a point of saving in these formats. When your image
editor is open and you have an image you wish to save, always choose SAVE AS from the FILE
menu. You'll get a dialogue box that asks where you'd like to save the image. Better yet,
somewhere on that dialogue box is the opportunity for you to choose a different image format.
Let's say you choose GIF. Keep looking. Somewhere on the same dialogue box will be an OPTIONS
button (or something close). That's where you'll choose 87a or 89a, interlaced or non-interlaced,
formats.
If you choose JPEG, you'll get the option of choosing the compression rate. You may not get to
play with the sliding scale I get. You may only get a series of compression choices, high, medium,
low, etc. Go high.
14. WHAT IS A BLOG
So what is a Blog anyway? If you’re reading this you may well be asking the same question.
There are a number of ways I could answer this question ranging from the broad to the highly
technical.
Here are a few definitions from other much wiser people to get us started:
‘A weblog is a hierarchy of text, images, media objects and data, arranged chronologically, that can
be viewed in an HTML browser.’
‘A frequent, chronological publication of personal thoughts and Web links.’
‘From “Web log.” A blog is basically a journal that is available on the web. The activity of updating a
blog is “blogging” and someone who keeps a blog is a “blogger.”‘
‘A weblog is kind of a continual tour, with a human guide who you get to know. There are many
guides to choose from, each develops an audience, and there’s also camaraderie and politics
between the people who run weblogs, they point to each other, in all kinds of structures, graphs,
loops, etc.’
‘A blog is basically a journal that is available on the web. The activity of updating a blog is
“blogging” and someone who keeps a blog is a “blogger.” Blogs are typically updated daily using
software that allows people with little or no technical background to update and maintain the blog.
Postings on a blog are almost always arranged in chronological order with the most recent additions
featured most prominently.’
‘A blog is a website in which items are posted on a regular basis and displayed in reverse
chronological order. The term blog is a shortened form of weblog or web log. Authoring a blog,
maintaining a blog or adding an article to an existing blog is called “blogging”. Individual articles
on a blog are called “blog posts,” “posts” or “entries”. A person who posts these entries is called a
“blogger”. A blog comprises text, hypertext, images, and links (to other web pages and to video,
audio and other files). Blogs use a conversational style of documentation. Often blogs focus on a
particular “area of interest”, such as Washington, D.C.’s political goings-on. Some blogs discuss
personal experiences.’
15. So What is a Blog???
Confused yet? Don’t be - its really quite simple. To put it as simply as possible:
a blog is a type of website that is usually arranged in chronological order from the most recent ‘post’
(or entry) at the top of the main page to the older entries towards the bottom.
Blogs are usually (but not always) written by one person and are updated pretty regularly. Blogs are
often (but not always) written on a particular topic - there are blogs on virtually any topic you can
think of. From photography, to spirituality, to recipes, to personal diaries to hobbies - blogging has
as many applications and varieties as you can imagine.
Blogs usually have a few features that are useful to know about if you want to get the most out of
them as a reader. Lets examine a couple briefly.
Archives - You might look at the front page of a blog and think that there is not much to them. A
few recent entries, some links to other sites and not much else. However its worth knowing that
there is a lot more going on under the surface that might initially meet the eye.
When you write a post it goes to the top of the front page. As it gets older and as you add more
current posts it begins its journey down the page until it disappears from it. This is not the end of its
life however, because it goes into the ‘Archives’. It sounds like a dusty dark place but its really just
like a filing cabinet that is easily accessible in a couple of ways.
Comments - Not all blogs use comments - but most do.
A great way to learn about blogs is to read a few. Leave some comments, ask questions and
bookmark your favourites. An even better way to learn about blogs is to start your own.
A little Secret….
Let me share a secret with you –a few years ago I knew nothing about blogs, I had never used
the internet for anything more than email, surfing and chatting to friends and I could only barely
do any of that! But one day I discovered a blog and after surfing from one to another (blogs tend
to link up to other blogs a lot) for a few hours I was hooked and wanted to start my own. I found
that there are free blog services that almost anyone could set up in a matter of minutes. Really it
is that simple. Literally millions of people blog from around the world. Its not just something for
young people, or geeks, or cool folk, or Westerners, or even for people with their own computers
- instead its something virtually anyone with access to a computer and the internet once or twice
a week can start up.
Are you still confused? Would you like more information? there are a few helpful articles on the
topic available on the web - just do a search on your favourite search engine.
A really good place to start is:
http://codex.wordpress.org/Introduction_to_Blogging
17. Getting Started with WordPress
Below are some simple notes to help you with using WordPress. These notes will help you with
the topics we covered on the Weave a Web Page in a Day course. If you would like more in-depth
help then WordPress has some superb online help available which covers all aspects of blogging
with WordPress. To access these you should start at:
http://codex.wordpress.org/Wordpress_Lesson
Creating Your WordPress Site
Go to the Wordpress website: www.wordpress.com
Signing Up for a Site
Click on Sign Up
You will be asked what username you would like. You should take care when creating a user
name as this is the name that will be attached to your website/blog. For example, if my company
was called WIRED, then I would probably have a username of Wired as my website will then be
called wired.wordpress.com
Enter a Username and a valid email address.
Click NEXT
18. The following screen will appear:
You will then need to go and check your email. You will receive 2 emails. The first email will look
something like this:
You will notice that the email is asking you to activate your account. Click on the Activation link
19. You will then be taken back to worpress.com and the following screen will appear showing your
username and password:
You have now registered and created your website/blog space:
Now Click on View Your Site or Login: to start working on your blog. The screen will look like this:
You will notice that the screen now says Welcome back [Name]. This shows you are logged in
and ready to start. In fact, Wordpress has already started for you and even created your first
items and layout.
As the Blog is not built yet we need to access the administration Panel. This is where all our
editing and creating work will take place. This is done by clicking DASHBOARD on the top of the
screen :
20. You are now in the administration part of WordPress and your initial layout and blog will look like
this:
At the top of the screen will be the name of your Blog (we called ours Weave a Webpage in a day)
(next to that it says View Site )
If you click View site at any time then it will show you exactly how your website looks to the rest
of the world :
Remember to return to the Dashboard (Administration view) to add/change/delete aspects of your
site.
Below is the main body of your site (currently showing Welcome to Wordpress) and some example
pages and posts that have been entered on your behalf.
The first thing we are going to do is to Update our Profile and change the password from the
automatically generated password given to us at the start to something we can remember!!
21. Changing the Password
Click on USERS then Your Profile scroll down the screen to the section marked “Update
Password”. Enter your new password twice.
Click Update Profile.
You will need to logout and then login to WordPress again to make this change effective.
Adding Categories to your Site
Create Categories
In the Manage > Categories tab, click Add Category and fill in the information about your
category.
Continue to add your parent categories, going down the list. Hold off on entering sub-categories
until all the main categories are entered.
NOTE: You can add any new categories any time, but make a note of the fact that categories can
be sorted in WordPress in two ways: by name (alphabetically) or by ID number. As you enter the
categories, they are assigned an ID number. It is difficult to change this, so if you don't want your
categories sorted alphabetically, enter them in the order you want to see them presented on the
screen.
22. Managing Categories
When you have the parent categories entered, enter your sub-categories.
In the pull down menu for Parent Category, you can select the parent to the sub-category you are
adding. When you view your categories in the Manage > Categories panel, you will see the
categories listed like this:
Computer Tips
- Windows
- Linux
- Mac
Internet News
Web Page Design
- Web Standards
- WordPress
- - Plugins
- - Themes
Adding Pages to your Site
WordPress automatically creates a page for you called ABOUT. You can edit or delete this page.
WE will EDIT this one. Click on MANAGE > PAGES >EDIT
Change the Title and add some text
Save and Continue Editing
Click on “Discussion on the right hand side of the screen and tick, or untick “Allow Comment”
(depending on if you want to allow comments !
Remember: Your Pages and posts are always LIVE immediately. Therefore, you may want to save
as a DRAFT (in Page Status)
Creating a New Page
Click on MANAGE > PAGE
Click on Create a New Page
23. This will show you the following screen:
You can Enter a Page Title and then enter the body of the text. Remember to look at the
“Discussion” and “Page Status” sections (on the right of the screen) and tick/untick the relevant
boxes.
Adding Links (external and Mail)
In both Pages and Posts you can add LINKS. These links can be an external link to another
website (for example, a mapping website), or an email link to your email.
You can add an external link very easily. The best way to ensure the link will work is to actually
type the URL into your browser and then cut and paste it from your browser into your page or
post.
Open your browser (IE or Firefox) and type in the URL. For example we might want a map of
Stoneleigh park.
We go to www.multimap.co.uk and then enter our postcode – this takes us directly to the map of
Stoneleigh Park. We then cut and paste the URL:
http://www.multimap.com/map/browse.cgi?client=public&X=432000&Y=271500&width=700&height=400&grid
e=432073&gridn=271356&srec=0&coordsys=gb&db=pc&addr1=&addr2=&addr3=&pc=CV82RR&advanced=&loc
al=&localinfosel=&kw=&inmap=&table=&ovtype=&keepicon=true&zm=0&out.x=8&out.y=12&scale=10000
(try remembering that lot!!)
In the page we then click on Insert Link :
and the dialog box appears. We move our cursor to the end of the http:// and PASTE in the URL.
Then click update.
You have now created an external link from your blog to another website/blog.
24. Adding a Post
Writing a Post - Step by Step
The process of entering your writing in WordPress is easy.
Click the tab for Write.
Start filling in the blanks.
When you are ready, click Publish.
That's it.
You expected more?
Okay, we have more details below, but from here, you can probably figure it out for yourself.
There is no right or wrong order to writing a post in WordPress, but we'll start from the top and
give you the step-by-step details for filling in each of the blanks on the Write Post panel.
WordPress has two post editing modes, basic and advanced. Typically, the basic mode is the
default for writing new posts. We will take you first through the basic post screen and then the
advanced.
Basic Post - Editing Screen
Your Drafts
Drafts are posts that have been saved rather than published. If you have posts you have written
and saved, thereby creating a Draft, they will be listed above the Write Post title. Click on the title
link to open that posts' Write Post edit screen, edit the post, and when you are ready, click Publish
and it will be released to your site and to the world.
Title
This is where you enter the title of your post. You can use any words or phrases. Avoid using the
same title twice as that will cause problems. You can use commas, apostrophes, quotes,
hyphens/dashes, and other typical symbols in the post like "My Site - Here's Lookin' at You, Kid".
WordPress will clean it up for the link to the post, called the post-slug.
Writing Post - Basic Panel
Discussion
The Discussion section hosts two checkbox choices. One is for Allowing Comments and the other is
for Allowing Pings.
If Allowing Comments is unchecked, no one can post comments to this particular post. If Allowing
Pings is unchecked, no one can post pingbacks or trackbacks to this particular post.
Password-Protect Post
To keep this particular post private so that only those with the password can read it, enter a
password here. Be sure and write it down somewhere safe.
Quicktags
Quicktags are buttons right above the Post editing text area box. These buttons produce HTML
tags for bold, italic, image, link, lists, and more. Click on these to add their HTML tags and the tag
will either be reproduced in the editing area or a window will pop-up asking you to fill in the
details, and when you are done, the information will be in the editing area.
25. Post Editing Area
The big blank box is where you enter your writing, links, links to images, and any information you
want to display on your site is the Post Editing Text area or editing box.
Save and Continue Editing
Below the Post Editing text area box are three buttons. The first one is Save and Continue Editing.
If you would like to save the post to your database, but continue working on it, click this button.
Below in the Preview screen, you will then see your post. Using this button, the post will not be
published unless the Publish check box is checked below in the Post Status area.
Save
In theory, clicking the Save button will save your post. But it is a conditional save. Using the
Advanced Editing screen, if the option in the Post Status is set to Draft, your post will be saved as
a Draft.
If set to Publish, the post will be saved and published to your site. If set to Private, the post will
be saved as a private post, accessible only by you, the user/author and not the public.
Once you have clicked Save, the Write Post screen will clear and you will be ready to add another
post.
Publish
To publish your post to your site, click the Publish button.
Tips For Posting
You can say or show the world anything you like on your WordPress site. Here are some tips you
need to know to help you write your posts in WordPress.
Excerpts vs More
If you have changed the index.php template file to display the Excerpt instead of the full Content
of a post, WordPress will automatically use the first 55 words of your post as the Excerpt or up
until the use of the More Quicktag mark. If you use an Explicit Excerpt, this will be used no matter
what.
Practice Accessibility
To be compliant with web standards for accessibility, be sure to include ALT and TITLE descriptions
on links and images to help your users, such as <a title="WordPress Codex"
href="http://codex.wordpress.org/">WordPress Codex</a>.
Use Paragraphs
No one likes to read writing that never pauses for a line break. To break your writing up into
paragraphs, use double spaces between your paragraphs. WordPress will automatically detect
these and insert <p> HTML paragraph tags into your writing.
Using Headings
If you are writing long posts, break up the sections by using headings, small titles to highlight a
change of subject. In HTML, headings are set by the use of h1, h2, h3, h4, and so on. By default,
most WordPress Themes use the first, second, and sometimes third heading levels within the site.
You can use h4 to set your own headings. Simply type in: <h4>Subtitle of Section</h4> with
double lines before and after and WordPress will make that title a headline in your post.
Use HTML
You don't have to use HTML when writing your posts. WordPress will automatically add it to your
site, but if you do want control over different elements like boxes, headings, and other additional
containers or elements, use HTML.
Spell Check and Proof
There are spell check Plugins available, but even those can't check for everything. Some serious
writers will write their posts in a text editor with spell check, check all the spelling and proof it
thoroughly before copying and pasting into WordPress.
Think Before You Post
Ranting on blogs is commonplace today, but take a moment and think about what you are writing.
Remember, once it is out there, it can be seen by many and crawled by search engines; and
26. taking things back is harder once it is public. Take a moment to read what you've written before
hitting the Publish button. When you are ready, share it with the world.
Put Posts in Categories!!!
Changing Colours and Layouts
Go into Presentation > Themes
Here you will see many different “Templates” provided by WordPress. Each one “behaves”
differently. We have used the default so far which has a layout of Pages down the Right hand side
and other criteria and colours.
We can change this to any other presentation style we want and certain Themes offer us felxibiluty
either by the colours we use, or the layout or any “Add-ins” we may wish to add (For example a
calendar)
We have chosen BLIX as the style we wish to use. This theme is a good one for a professional
business website/Blog as it puts the pages across the top (which is similar to a more traditional
website creates using web designer software)
To choose another theme you simply click on the one that you want and then VIEW SITE to see
what it would look like
When you choose a them you will notice that the options that are available with that theme will be
displayed on the menu:
for example, with this “Theme” we can add extras, change the header (can add pictures to the
header or change the colours), and “widgets” to the sidebar or Edit the CSS (Cascading Style
Sheet).
NOTE: These “widgets” are portions of code that have been written for you and allow you to do
different things. For example: “Add a Calendar” to the sidebar (the bit on the left of your webpage
in this instance), or add pictures from Flickr, and much more more: Here is an example of the
“widgets” available with this particular theme:
27. Inserting Images into WordPress
Adding an Image into WordPress Post is very simple.
You can scroll down the screen to the “UPLOAD” section and click browse
and then enter the file name f the image you would like inserted into your page or post. You can
then add a title for this image and a brief description and click upload.
The image will then appear (by default) aligned to the left of the posting. You can centre the
image or align in to the right
28. Text and Image Alignment
One of the issues with wewbsites is getting text and images to align correctly. WordPress (and
indeed, most web design packages) look like this by default:
You will notice that the text appears at the bottom of the image and not next to it. What if you
would like to have an image – then some text and then another image?
You will need to alter the code to do this:
Firstly, insert your image into the text area, add your text and then add your next image (that you
want to appear to the right of the text
Like this:
29. You now need to change the code as follows:
You need to insert Align=left to align the text correctly (next to the polar bear in our example) and
then enter Align=Right to get the text to appear correctly (next to the scrolling bar of text image
in our example)
And that’s all there is to it!!!
30. PUBLISHING
Your WordPress account is “live” as soon as you have activated your account. All your work is
automatically published to the web (unless you save it as a draft first)
You may already have a domain name (www.yourbusinessname.co.uk). You can “point” your
wordpress account to this domain name. This means that people will still type in your domain
name but see your WordPRess website/blog.
WordPress gives detailed instructions on how to do this.
Alternatively, you can download WordPress software and your entire site and store it on your
hosting server – see WordPress help for details
