Brilliant Create Your Own Website by Rob Clymo

51TBzU98dXL._SX218_BO1204203200_QL40_.jpg Author Rob Clymo
Isbn 9780132048774
File size 35.0MB
Year 2007
Pages 232
Language English
File format PDF
Category information technologies


BRIL_A01.QXD 7/6/07 14:43 Page i Brilliant Create your own Website Rob Clymo BRIL_A01.QXD 7/6/07 14:43 Page ii Pearson Education Limited Edinburgh Gate Harlow Essex CM20 2JE England and Associated Companies throughout the world Visit us on the World Wide Web at: First published 2007 © Pearson Education Limited 2007 The rights of Rob Clymo and Geoff Spick and Lon Barfield to be identified as authors of this Work have been asserted by them in accordance with the Copyright, Designs and Patents Act 1988. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without either the prior written permission of the publisher or a licence permitting restricted copying in the United Kingdom issued by the Copyright Licensing Agency Ltd, Saffron House, 6–10 Kirby Street, London EC1N 8TS. All trademarks used herein are the property of their respective owners. The use of any trademark in this text does not vest in the author or publisher any trademark ownership rights in such trademarks, nor does the use of such trademarks imply any affiliation with or endorsement of this book by such owners. ISBN: 978-0-13-204877-4 British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library 10 9 8 7 6 5 4 3 2 1 11 10 09 08 07 Prepared for Pearson Education Ltd by Syllaba Ltd ( Typeset in 12pt Arial Condensed by 30 Printed and bound in Great Britain by Ashford Colour Press Ltd, Gosport. The publisher's policy is to use paper manufactured from sustainable forests. BRIL_A01.QXD 7/6/07 14:43 Page iii Brilliant guides What you need to know and how to do it When you’re working on your computer and come up against a problem that you’re unsure how to solve, or want to accomplish something in an application that you aren’t sure how to do, where do you look? Manuals and traditional training guides are usually too big and unwieldy and are intended to be used as end-to-end training resources, making it hard to get to the info you need right away without having to wade through pages of background information that you just don’t need at that moment – and helplines are rarely that helpful! Brilliant guides have been developed to allow you to find the info you need easily and without fuss and guide you through the task using a highly visual, step-by-step approach – providing exactly what you need to know when you need it! Brilliant guides provide the quick easy-to-access information that you need, using a detailed table of contents and troubleshooting guide to help you find exactly what you need to know, and then presenting each task in a visual manner. Numbered steps guide you through each task or problem, using numerous screenshots to illustrate each step. Added features include ‘See also’ boxes that point you to related tasks and information in the book, while ‘Did you know?’ sections alert you to relevant expert tips, tricks and advice to further expand your skills and knowledge. In addition to covering all major office PC applications, and related computing subjects, the Brilliant series also contains titles that will help you in every aspect of your working life, such as writing the perfect CV, answering the toughest interview questions and moving on in your career. Brilliant guides are the light at the end of the tunnel when you are faced with any minor or major task. iii BRIL_A01.QXD 7/6/07 14:43 Page iv BRIL_A01.QXD 7/6/07 14:43 Page v Author’s acknowledgements This book is dedicated to my Mum and Dad. Publisher’s acknowledgements The author and publisher would like to thank the following for permission to reproduce the material in this book: 1&1 Internet Ltd, 123 Domain Names UK, AddMe LLC, Adobe Systems Incorporated, American Library Association, BBC, British Telecommunications plc., CoffeeCup Software, Inc., EasyByte Software,, Google UK,, Htmlgames, Keynote NetMechanic, Lexico Publishing Group, LLC, MySpace, Nominet UK, Orange Home UK plc., Web CEO Ltd, Webeden, Website Pros, Worldwide Recipes,, Yahoo! Inc., ZyWeb Ltd. Screen shots from Corel Paint Shop Pro X are Copyright 2005 Corel Corporation and Corel Corporation Limited, reprinted by permission. Microsoft product screen shots reprinted with permission from Microsoft Corporation. In some instances we have been unable to trace the owners of copyright material, and we would appreciate any information that would enable us to do so. Special thanks to: Geoff Spick for contributing Chapter 6: Creating a website using Expression Web Designer and material for page 192. P.K. MacBride for permission to use material on pages 1–28, 41 and 190 which first appeared in his book Brilliant Internet for the Over 50s. Lon Barfield of the Usability Design Partnership for contributing the Web Usability design tips in Chapter 7. Dom Brookman for permission to use material on pages 39 and 40 which first appeared in his book Brilliant Internet. Clare H, Clare C and Marissa for their help with child care. v BRIL_A01.QXD 7/6/07 14:43 Page vi About the author A journalist for nearly two decades, Rob Clymo has spent the last five years dedicating his time to writing about web design and the internet. In that period he has been the editor of Web Pages Made Easy and Website Maker magazines and made regular freelance contributions to a host of other computing and technology publications. As well as specialising in writing beginner-friendly web design tutorials, Rob also makes regular forays into website construction himself. He has developed various eCommerce and database-driven sites and is currently a web developer for Bournemouth University. He spends his spare time building and maintaining online ventures for a handful of business clients. vi BRIL_A01.QXD 7/6/07 14:43 Page vii Contents 1. Creating your first website Understanding HTML tags Creating your own index page Viewing your index page Understanding the basics of text formatting Formatting your text Understanding the basics of setting colours Setting your colours Setting the text size Drawing a line Making a list Creating hyperlinks Understanding the basics of displaying images Displaying your images Linking a thumbnail to an image Linking pages in a website Creating a web page in Word Formatting text in Word Creating a link in Word Following links in Word 1 2 4 6 7 8 9 11 12 13 14 15 17 19 20 23 24 26 27 28 2. Researching and planning your first website 29 Researching personal websites Taking a look at hobbyist and club websites Considering a small business website Planning your project on paper Managing your files Finding online resources: content Final thoughts on planning a website 30 32 34 36 38 39 41 3. Creating a website using online services Picking an online web page creation service Constructing a web page using the free ZyWeb trial Customising your web page Publishing a web page Creating a site with WebEden 43 44 46 50 53 55 vii BRIL_A01.QXD 7/6/07 14:43 Page viii Customising a WebEden site Getting your web pages online Making your own web blog Updating your blog Creating a MySpace personal home page 58 60 61 64 65 4. Creating a website using FrontPage 69 Importing web page files Starting a new project Formatting your text Editing colours and layout Adding pictures Creating hyperlinks Previewing your pages Creating additional pages Adding buttons and graphics Creating rollover ALT tags Investigating alternative software 70 72 74 75 76 77 79 80 82 83 84 5. Exploring web graphics Understanding file types Creating a simple banner using Paint Shop Pro Making some navigation buttons Creating lots of similar buttons Previewing your graphics Incorporating digital photos Fixing your photos Experimenting with graphical effects Optimising your images for the web 6. Creating a website using Expression Web Designer Downloading Expression Web Finding your way around Expression Web Changing the layout of the interface Using a web template Importing an existing web page file Starting a new project Adding pictures and creating hyperlinks Previewing your pages Previewing your pages in other browsers Applying and managing styles Changing CSS properties Using layers Using the quick command list Shortcuts reference list viii 87 88 91 96 98 100 102 104 106 108 119 120 122 123 125 129 131 134 136 137 139 141 142 145 146 BRIL_A01.QXD 7/6/07 14:43 Page ix 7. Advanced techniques Exploring Frames Using tables Discovering cascading style sheets Web usability design tips 8. Getting online Finding an ISP to host your site Using a web hosting provider Buying a domain name Getting help from Nominet Using FTP software to connect to your site Uploading your files via FTP Testing your website 9. Getting your site seen Adding keywords and descriptions in a META tag Inserting keywords and descriptions using FrontPage Submitting information to search engines Monitoring site activity with Web CEO Exploiting the visitor information captured by your web host Advertising with Adwords Jargon buster Troubleshooting guide 149 150 154 157 162 169 170 173 175 178 179 184 185 189 190 192 193 199 201 205 209 213 ix BRIL_A01.QXD 7/6/07 14:43 Page x BRIL_A01.QXD 7/6/07 14:43 Page xi i Introduction Welcome to Brilliant Create your own Website, a visual quick reference book that shows you how to establish and maintain your presence on the Web. Learn the basics of how to create a web page and how to design the layout to make it appropriate to your readers, how to set up a website and test it and, perhaps most importantly, how to get your site seen. We have focussed on describing software applications that are commonly used by amateur website developers (such as online services, FrontPage and Expression Web Designer – both found in the Microsoft Office suite, and Paint Shop Pro) rather than the expensive but powerful professional developer tools. How you’ll learn Find what you need to know – when you need it How this book works Step-by-step instructions Troubleshooting guide Spelling Find what you need to know – when you need it You don’t have to read this book in any particular order. We’ve designed the book so that you can jump in, get the information you need, and jump out. To find the information that you need, just look up the task in the table of contents or Troubleshooting guide, and turn to the page listed. Read the task introduction, follow the step-by-step instructions along with the illustration, and you’re done. Please note that we have described how to create websites using various different software applications and, in order to avoid duplication of content, we have included numerous ‘See also’ cross references to point you to the section of the book that deals with a particular task. How this book works Each task is presented with step-by-step instructions and annotated screen illustrations on the same page. This arrangement lets you focus on a single task without having to turn the pages too often. xi 7/6/07 14:43 Page xii Step-by-step instructions This book provides concise step-by-step instructions that show you how to accomplish a task. Each set of instructions includes illustrations that directly correspond to the easy-to-read steps. Eye-catching text features provide additional helpful information in bitesized chunks to help you work more efficiently or to teach you more in-depth information. The ‘For your information’ feature provides tips and techniques to help you work smarter, while the ‘See also’ cross-references lead you to other parts of the book containing related information about the task. Essential information is highlighted in ‘Important’ boxes that will ensure you don’t miss any vital suggestions and advice. A web page can be a great place for exploring your artistic tendencies! Enjoy exploring the possibilities but take a look at our usability design tips in Chapter 7 before you go live.  BRIL_A01.QXD Editing colours and layout 1 1 A small colour palette allows you to pick a web-friendly shade for your wording. 2 Text alignment is particularly important on a web page where numerous different elements compete for the reader’s attention. For your information 2 i Save yourself the embarrassment of a typo on your home page and use the spell checker in the Tools menu. 4 Jargon buster Web safe palette – a subset of commonly used colours that browsers display in a standard way. Colours not contained in this palette may not be viewed in the same way on different browsers. Creating a website using FrontPage 75 Troubleshooting guide This book offers quick and easy ways to diagnose and solve common problems that you might encounter using the Troubleshooting guide. The problems are grouped into categories that are presented alphabetically. Spelling We have used UK spelling conventions throughout this book. You may therefore notice some inconsistencies between the text and the software on your computer which is likely to have been developed in the USA. We have however adopted US spelling for the words ‘disk’, ‘dialog’ and ‘program’ as these are becoming commonly accepted throughout the world. Troubleshooting guide Accessibility Will people using different browsers 137, 195 be able to view my website? Will people using different sized 17, 136 monitors be able to view my website? How can I design my website to make 164, 167 it usable by the visually impaired? Can users with different needs change 157 the way they view my website to make it more accessible? How can I make sure interested 190, 193 parties find out about my website? How can I make sure my site comes up 193 when a potential visitor types an appropriate keyword into a search engine? How can I find out which browsers my 203 readers are using? Design How can I customise my pages? 50, 58, 68 How should I decide which colours 9, 165 to use? I don’t know where to start with layout 72, 175 – are there any templates I can use? How do I use Frames to make one part 150 of the screen stay in place whilst the visitor clicks through content in another section? How can I make a lot of pictures 20 available without the visitor having to download each and every high resolution image? How can I make the layout of my pages 80, 157 consistent throughout my site? Can I change my mind about the 141, 158 design of my website later? How can I use styles to make the 139 construction of the site more efficient and the design of the site more consistent? Can visitors change the design of my 157 site to suit them? Where can I find website templates 35 suitable for a small business website? Getting online How do I get my website online? 53, 60, 169 How do I find my own unique web 175 address? How can I connect to other similarly 33 themed websites? How can I get my site listed in the big 193 portal directories and on the major search engines? What is FTP? 171 What do I do if someone has stolen my 178 domain name? Troubleshooting guide 213 xii BRIL_C01.QXD 7/6/07 14:37 Page 1 1 Creating your first website Introduction Building a website is not that difficult, as long as you don’t need anything fancier than formatted text and images on the pages, with a straightforward set of links between them. The pages can be created from ‘scratch’ – writing the HTML code directly, which is far easier than you might at first expect. Of course, they can also be produced using a number of different applications, ranging from specialised multimedia editing suites to Word. In this chapter we will create a basic web page using HTML in order to demonstrate the fundamental construction techniques. Although you will probably choose to use a web authoring software package in the long run (they do all the coding for you and we describe how to use these later in the book), it is well worth understanding the code by which they operate. So we recommend starting with this chapter and experimenting briefly with the tags before you go on to explore other options. We will also touch briefly on creating a basic site using Word. In future chapters we will demonstrate how to make much ‘fancier’ sites using specialised software and providing design guidelines, but for now, let’s get on with the basics. What you’ll do Understand HTML tags Create your own index page View your index page Understand the basics of text formatting Format your text Understanding the basics of setting colours Set your colours Set the text size Draw a line Make a list Create hyperlinks Understand the basics of displaying an image Display an image Jargon buster Website – a set of related web pages, usually owned and constructed by one organisation or individual. Navigational aids and hyperlinks allow the visitor to find their way around the site. HTML – HyperText Markup Language, a system of instructions that browsers can interpret to display text and images. Link a thumbnail to an image Link pages in a website Create a web page in Word Format text in Word Create a link in Word Follow links in Word Creating your first website 1 BRIL_C01.QXD 7/6/07 14:37 Page 2 Understanding HTML tags  In HTML, all styling is done with tags – codes which tell the browser how to display text or images. These are mainly in pairs, one at each end of whatever is being styled. They follow simple rules: Use whichever form is easiest to read in your text file.  A tag is always enclosed in . Mark the start and end of the HTML file.  The opening and closing tags of each pair are identical except for a / before the identifier in the end tag.  Tags can be written in either capitals or lower case.  Tags can be on the same line as the enclosed text, or on separate lines – it makes no difference to the appearance in the browser. For example, to get a third level heading – 14 point bold type – the tags are


. So you would write:

This is a sub-head

or, remembering the last two rules, you could write it like this: Commonly used tags … … Mark the header area, that will hold the title and information about the page, which search engines can use to identify the nature and contents of the page. The remainder of the text is the body and is enclosed by: … This holds the code for the visible page. Whatever is marked as the title is displayed in the window’s title bar.

This is a sub-head See also

Instructions on pages 24 and 25 demonstrate how you can get Word to produce web pages directly – letting it write the tags for you. Both produce this same effect: This is a sub-head 2 BRIL_C01.QXD 7/6/07 14:37 Page 3  Important ! Jargon buster Web – World Wide Web, also shortened to WWW or W3. One of the most popular ways of using the internet, it consists of billions of web pages that can be viewed through browsers. An HTML file is plain text, and can be created in any editor or word-processor that can output plan ASCII text – WordPad or Notepad (they should both be on the Accessories menu in Windows) are ideal. For your information Understanding HTML tags (cont.) i Keep up-to-date with developments in the HTML standard on the World Wide Web Consortium’s website: Creating your first website 3 1 BRIL_C01.QXD 7/6/07 14:37 Creating your own index page Page 4  1 Set up a new folder for your home page files. You will be saving all the pages and images here. The first page anyone meets on your site will be the index page (otherwise known as the Home page), so we’ll start by creating that. We’ll actually do this in stages. At first we will set up a very simple page, then come back later to add links to it so that you can move from the index page to the others once you have created them. This is my page. Yours should have the same structure and tags, but with your own words for the title and heading. 2 4 2 Start NotePad, WordPad, Word – whichever you prefer. 3 Type in the HTML text shown here, customised to suit you. 4 Open the File menu and select Save As… 3 See also Advice on organising your files is given on page 38. 4 7/6/07 14:37 Page 5  BRIL_C01.QXD Jargon buster Home page – the first page your browser loads when you type in the address or URL of a website. The ‘gateway’ or entrance to a site. Index – the home page and entrance to your website. The first page to open when your web address is typed into a browser. Creating your own index page (cont.) 5 Locate your home page folder. 6 Save the document as a text file with the name ‘index.htm’. 7 Click Save. 5 6 7 Important ! Web page files can have .htm or .html extensions. Some Internet Service Providers insist that your top level page is called index.html – with an ‘L’. Check the rules at your ISP. Creating your first website 5 1 BRIL_C01.QXD 7/6/07 14:37 Page 6 Viewing your index page  In this early stage of construction, your ‘website’ will remain located on your computer, and you will be the only one who will be able to see it. Later, you will upload the completed pages and image files to your web space at your ISP’s site – and then it will be on the web. Meanwhile, you can still view your pages in Internet Explorer. 1 Switch to, or start Internet Explorer. You do not need to be online, but it won’t matter if you are. 3 2 Open the File menu and select Open. 3 At the Open dialog box click Browse. 2 4 Look in the website folder and open your index.htm file. 5 5 Check the display and return to the editor to enhance and improve the text file! Jargon buster ISP – Internet Service Provider – organisation whose main business it is to enable people to access the internet. Timesaver tip It is quick and easy to see the effects of changes in your HTML file. Keep Internet Explorer and the editor windows open, and after each change to the text, save the HTML file again, then click on Refresh to reload the new version into Internet Explorer. 6 BRIL_C01.QXD 7/6/07 14:37 Page 7  The simplest tags are the ones that format text. These will produce six levels of headings, a small, italicised style (mainly used for email addresses), and bold and italic for emphasis.

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5
Heading 6 Bold Italic Understanding the basics of text formatting and add line breaks to make it easier to read, but it won’t affect what your visitors see – only the tags affect the layout of the page in the browser. Tags can sometimes be combined. For example, you can make text bold like this: This is bold or make it italic like this: This is italic or apply both bold and italics like this: This is bold and italics
Small italic style The Heading and Address tags break the text up into separate lines, but untagged text appears as a continuous stream. Create separate paragraphs with these tags:

Start a new paragraph with a space before and after.
Start a new line without a space before it. When you combine tags, you must nest them – write one pair inside the other. Timesaver tip If your formatting tags don’t seem to be doing the job properly, check that each opening has a matching closing – and that it is in the right place. When a browser reads an HTML file, it ignores all spaces (apart from a single one between words), and [Enter] key presses. It doesn’t matter how you lay out your HTML text – you can indent it, Creating your first website 7 1

Author Rob Clymo Isbn 9780132048774 File size 35.0MB Year 2007 Pages 232 Language English File format PDF Category Information Technologies Book Description: FacebookTwitterGoogle+TumblrDiggMySpaceShare Brilliant Create Your Own Website     Download (35.0MB) Sweets and Chocolate HTML5 Canvas For Dummies IPv6 Network Administration Einstieg in JavaScript Amazon Web Services For Dummies Load more posts

Leave a Reply

Your email address will not be published. Required fields are marked *