Weave Your Own Web Page

Delivered by:

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

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.

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.

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?)

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.

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).

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.

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?

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

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.

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.

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.

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.’

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

Blog Authoring using

WordPress

Delivered by:

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

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

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 :

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!!

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.

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

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.

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.

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

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:

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

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:

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!!!

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