Weave Your Own Webpage


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Weave Your Own Webpage

  1. 1. Weave Your Own Web Page Delivered by:
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  16. 16. Blog Authoring using WordPress Delivered by:
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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