Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Simple Web Design Using the Freeware Program NVU
Transcript
Simple Web Design Using the Program NVU (Freeware) Nvu is an open source WYSIWYG (What You See Is What You Get) complete Web authoring system. It is based on Gecks, the Mozilla rendering engine. Nvu is completely free and can be downloaded from http://www.nvu.com/ (http stands for hypertext transfer protocol; some other protocols are SMTP, POP, FTP) It is possible to build nice looking Web sites without any real understanding of what makes a Web page work, but you will have much more control over your Web pages if you know a few basics. It is not that hard. HTML is not a computer programming language but a document (HyperText) Markup Language. Then when you want to make some changes to your Web page that your Web page construction software does not do easily, you can “duck behind the curtain” and do it yourself. This will give you the best of both worlds. However, don’t expect to make a brilliant Web page in a few minutes. Good pages need a lot of thought put into their design, and a lot of time put into their implementation. 1. A browser program such as Internet Explorer, Mozilla Firefox & Opera links to the Internet, finds the requested file and then displays the text, images etc. 2. Browsers will enable you to see the HTML code used to format the structure and content of a website e.g. using the View menu in Internet Explorer to select Source. You will see a whole lot of text that, at this stage, is intimidating. However it is quite structured and follows precise rules. 3. Plan. Think and discuss with others your general ideas for the website. Visit lots of sites that have a similar purpose to your own. This will often give you some good ideas. Decide the general content (text and images and internet links) and have a vision of the layout. Do a plan on paper. 4. Collect all the text and images into one new folder. If the text is in WORD, it is a good idea to save also a text unformatted version. 5. Images should be in the GIF format for simple drawings and JPEG for highresolution photographs. Keep the name short and without gaps (big_dog.gif is acceptable but bigdog.gif is better). Take care, remember one 20kB image is equivalent in memory and loading time to about eight pages of text. 6. Open the Nvu program, a new “untitled” tab will appear. (NOTE, to edit an existing file you would use File menu to Open and choose the file you want to edit). 7. Note the Menu Bar (eg. File, Edit etc.) and the FIVE Toolbars (a)Composition Toolbar eg. New, Open, (b) Two Format Toolbars eg. B, I, U etc, (c) Page Tabs for open documents eg. (untitled), (d) Edit Mode Toolbars at bottom of page – Normal; HTML Tags; Source; Preview, and (e) Status Bar eg. <body>. 8. Using Normal Mode, give the page a TITLE by going to the Format Menu and click on “Page Title and Properties”. Under “Title” give this page a meaningful title e.g. Humpback Whales and click on OK. The page will still appear blank but you will notice that at the top of the page and the Page Tab now have this same title. You have given your webpage a TITLE. It is an important decision, because it is what will be seen at the top of browsers and what is saved when people Bookmark your site. Simple Web Design Using the Program NVU (Freeware) Page 2 of 11 10/05/2017 9. Now using the File menu and “Save As” to save this page into the newly prepared folder with your other files and images. As this is the first or HOME page, this untitled file must be renamed index.html. All opening pages in HTML have this name. (Nvu automatically puts on the .html extension). The top of the page will show this file name. 10. To give the Page a heading, type Humpback Whales. Use the mouse to highlight the words. Change the Body Text to Heading 1 and click on the Centering icon. Save by using the Save icon. 11. To put text on the page, copy and paste from your previously saved unformatted text document. (NOTE, text from a WORD document can be used but you must use the “Paste Without Formatting”). 12. Highlight the sub-headings and make them all “Heading 2” and highlight the rest and make it into “Paragraph”. Save. 13. Use the Source Edit Mode to review the source HTML and the HTML Tags Mode to see a simpler format. 14. The page needs a little decoration. We can insert an image into the page by putting the cursor on the start of the desired line of text. Click on the Image Icon to obtain the Image Properties pop-up box. Under Location, use the Choose File to find your previously saved image and put a label in the Alternate Text box. Under Dimensions, select Custom Size and Constrain (keeps ratio). Change the Width to 200 pixels (Specify size means speedier viewing, the size can be modified later). Under Appearance, use the Align Text to Image to Wrap to the Right (or left). Spacing and Border can also be set. Select the setting by clicking on OK. 15. A Double (or Right) click on the image brings up the Image Properties box so that modifications can be made. NOTE, the image can be dragged by mouse to different parts of the text. (it will keep its Left/Right text alignment). 16. Web sites have a mechanism for linking a word(s) or image on a page to another page, image or internet site. Use the mouse to highlight the desired word(s) and click on the Link Icon. On the pop-up dialogue box, click on “Choose File” and select the desired file, image or website address (use copy and paste to reduce typing errors) then click on OK. Save. NOTE, the linked word(s) changes colour and is underlined (link style). Open the saved file with your browser. The index page and liked file should open. 17. You can use the Edit menu to Undo and Redo editing. 18. Tables are very useful in Web pages. They are liquid and can expand and contract proportionally to the visitor’s browser window. The key is to use percentages instead of fixed pixel based width. 19. Use the Table Menu (or Insert or Icon), select “Insert” and “Table” and then click on the “Precisely” Tab. Make the table two rows, three columns and 100 percent of window width and zero border, and then click on OK. Click somewhere on the table and then use the Table menu to select “Table Properties”. Click on the to left cells of the Table and give it a width of 20 % of table, and use next to make the next two columns 70% and 10%. The Table Properties dialogue box enables you to set border, spacing, padding, background colour and alignment. Cells can also be joined and inserted. Click on Apply and OK. 20. Tables are commonly used to make a scaffold in web pages, as they are flexible and enable the various elements to keep their relative positions. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 3 of 11 10/05/2017 21. Check the Preferences on the Tools menu (a) Under General, select "Retain Original Source Formatting" and tick all the other boxes (b) Fonts, leave it as the default values, (c) New Page Settings, tick "Readers Default Colors" and leave the rest with the default values, (d) Advanced, tick "HTML 4", "Transitional" and "Return in a Paragraph ....." and leave the rest with the default values. 22. So what is HTML? - (HyperText Markup Language, there are various versions) – it is not as complex as a computer language. Browsers need to identify what version of HTML is used, so the DOCTYPE statement is used to identify this to the computer processors. You will be using Version 4.01 Transitional. You can see this in Source Mode. (a) HTML is composed of key words or phrases, enclosed in <angle brackets>, called TAGS , eg <body> and </body> that go before and after the text. In Source Mode, you will note that straight after the identification line at the top, there is an <html> tag and its closing pair </html> is right at the bottom of the page. Your whole page sits between these two tags. (b) Inside the <html> tags you will see two main parts, <head> </head> and <body></body>. The head section contains two main elements (Title and Meta) and the rest of your Web page goes into the body section. (c) TITLE. Each Web page has in fact three titles, (i) what the file is saved as (always index for the first/home page), (ii) the words between <title> and </title> which will appear on top of the browser as the page title, and (iii) the one that you will write as text heading on the page later. (d) META is used by search engines and we will return to it later. (e) Many other tags include an attribute (tag property) with its value (eg. name=”description”, content=”a…”) inside the opening tag of the pair. (f) The <br> is the HTML tag that makes a line break (empty line). 23. A vertical listing of words or sentences can be converted into a numbered or bulleted list by highlighting and selecting the appropriate formatting icon. (To undo, use the Format menu and make the List None or double click on the list to get the List Dialogue box.) 24. FORCED LINE BREAK. What about a bigger gap between the heading and sub heading, using the <br> HTML tag? To do this work in Normal or HTML Tags Mode. If there is already a gap, put the cursor in the gap and press the Enter key as often as desired. If there is no gap, put the cursor at the start of the line and press the Enter Key to put a new <p> tag above the line. Then move the blinking cursor up to that line, and change Paragraph format to Body Text format. This will convert the <p> to a line break <br>. Note the changes in Source Mode. Stay in Source Mode and put another <br> tag in the middle of one of the lines. Observe the changes in the different Modes. The <br> will not show up under Normal or HTML Tags Mode but you will see a larger gap between the two headings. NOTE, the <br> is used between paragraphs to make a gap between the paragraphs (or images), and when placed INSIDE a line (use Shift/Enter), is used to break up lines into shorter parts without a gap (eg poetry or an address). Multiples <br> are used to make larger gaps. You should practice these skills now and observe the effects in the various Modes. NOTE, check the settings on Tools/Preferences/Advanced in NVU if you get a different reaction than this. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 4 of 11 10/05/2017 25. Use the File menu to open a new page and use the Format Menu to give the page an appropriate TITLE. This Title will appear on all the pages of the Website and will be important when a “Google” type search is made for the Website. The Title will now appear on the very top left of the screen. 26. Use the File menu to “Save As” the file in your prepared folder with the name template (the html extension will be added automatically). 27. A template is a useful method for giving each of the pages in a website the same or similar structure, layout and appearance. 28. In Normal or HTML Tags Mode, use the Table Menu (or Insert or Icon), to select “Insert” and “Table” and then click on the “Precisely” Tab. Make the table two rows, three columns and 100 percent of window width and zero border, then OK. Click somewhere on the table and then use the Table menu to select “Table Properties” dialogue box to open the (or double click on the table). Give the first cell a width of 20 % of table, and use next to make the next two cells 70% and 10%. Click on Apply and OK. 29. We will insert a small gif image. Click in the top left cell, then click on the Image Icon. Use the “Choose file” button to find the small image you have saved, open it and give it an appropriate title in the “Alternate Text” box (less than 50 characters). Under “Dimensions”, give the icon a Constrained Custom height no larger than 100 pixels. Save. 30. To give the Page a heading, type an appropriate heading into the middle top cell. It can be the same as the Title or different. Use the mouse to highlight the words. Change the Body Text to Heading 1 and click on the Centering icon. Save and view in the various Modes. 31. To give the page a background image (a small image that is tiled over the whole page) and/or a background colour use the Format menu and click on “Page Colors and Background). Click on “Custom Colors” and then on the “Background” box. There are six methods for choosing the colour. Select one eg. change the hex box to #ff0000 to get red; for “Background Image” use the Choose File to find the image you have saved in your folder (a small repeatable tiled pattern). Then click on Open then OK. The background image only appears in Preview Mode. 32. Web sites need to have a mechanism for moving from page to page, i.e. Navigation. Research shows that the best position is on the left side. A simple name for each of our pages is listed in the lower left cell, e.g. Home, Pictures, Links. Put two spare lines above this with the ENTER key. Use the mouse to highlight the list and click on the Bulleted List Icon. Click on Apply and OK then Save and view in the various Modes. 33. To change the background colour in the Navigation cell, RIGHT click somewhere in the cell, select “Table or cell Background Color” and use one of the methods to set a colour. 34. To make this list into links, highlight just the first (Home) and click on the Link Icon. On the pop-up menu, in the Link Location bar, type index.html then OK. You should note that the word Home will change colour and become underlined (HTML default for links) In turn highlight the next two links. We have not saved these files yet, so you will need to type in their name also (pictures.html and links.html). Save and view in the various Modes. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 5 of 11 10/05/2017 35. It is proper to let visitors know the author of the site and how up to date it is. Move a few lines down from the Navigation and enter a suitable comment and date. Convert it to Paragraph text. Keep the website up to date. There is nothing more frustrating than a website that contains very out of date information. 36. We now have a completed common framework. Save and view in the various Modes. 37. Do a “Save As” to make each of your pages in turn; e.g. index.html, pictures.html and hints.html and use the File/Open to have all three pages open. Look at the very top line of the window to note the file name and title. 38. Keep your file names short, (html, text and graphics), less than eight characters if possible, in lowercase and without gaps. 39. To put the text on the first page, copy and paste from your previously prepared text document into the cell below the heading. Highlight the headings and make them all “Heading 2” and highlight the rest and make it into “Paragraph”. Save and view in the various Modes. 40. We can insert a horizontal dividing line by using the Insert Menu or the H.Line Icon. Double clicking or Right clicking and use the Horizontal Line Properties Dialogue Box to change the width, height, shading and alignment of the line. 41. If we want feedback from visitors, we need to supply a suitable email link. In the paragraph mode, type the words you want to appear eg To email me, click here. Highlight the link words, and click on the Link button. Enter your email address in the box, tick the box for “The above is an email address”, then OK. Save and view. In Source mode, you should see something like mailto:[email protected]. When you click on the link using your browser, you should get an empty send email page. 42. Be careful of any email addresses, telephone numbers and street addresses you publish. You may invite unwanted calls and letters. Do not reply to nuisance emails that reply to your site. Delete and block the sender. Some web crawlers look for email addresses on site to use for SPAM. 43. The page needs a little decoration. We can insert an image into the page by putting the cursor on the start of the desired line of text. Click on the Image Icon to obtain the Image Properties pop-up box. Under Location, use the Choose File to find your previously saved image and put a label in the Alternate Text box. Under Dimensions, select Custom Size and Constrain (keeps ratio). Change the Width to 200 pixels (Specify size means speedier viewing, the size can be modified later). Under Appearance, use the Align Text to Image to Wrap to the Right (or left) Spacing and Border can be modified now or later. Click on OK. NOTE, the image can be dragged by mouse to different parts of the text. (it will keep its Left/Right text alignment. 44. Check your spelling and grammar; mistakes can put many people off your site. 45. Formatting. Avoid specifying fancy fonts, font sizes, italics, bold and underline. They can be hard to read on some screens and can be confusing with the default on many HTML outputs eg links. Most people like having their own computer select a default font. Some fonts cannot be magnified on the screens of people with poor eyesight. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 6 of 11 10/05/2017 46. The page is now so long that we have scrolled off the bottom of the page. To make it easy to return to the top of the page we need to put in an Anchor. We use jump point links within the site (or named anchors). 47. Firstly you set the named anchor or target, then you link to it as we did links before. So use the mouse to highlight your heading text and then click on the Anchor button. In the Name box, change this to TOP. This is now the anchor point. You could use any word for top. Then, at the bottom of the page, in a new paragraph type your sentence eg. To go to the top of the page, click here. Use the mouse to highlight “click here” and then click on the Link button. In the pull down menu, find your anchor eg #top, click on it and then OK. You could use the same method to lay anchors in other parts of the page. Anchors are commonly used with an index at the top, leading to the appropriate sub heading and content further down a long Web page. (NOTE, each section should also have an anchor leading back to the top.) 48. Now for the pictures page. We put in some introductory explanatory text and a 2 X 2 table by using the Insert Menu to insert a Table by the Quickly method. We Insert each of the gif thumbprints into a cell, keeping each with roughly the same dimensions, especially height. In turn, then Link each thumbprint to its full version. 49. Now for the third page. Making links to external Web sites is easy, however you must get the full correct address, so again, many authors use the cut and paste method to avoid mistakes. A little preparation with your browser and a text page can make the process easier. Type in the appropriate text, select the desired key link words, click on the Link Icon and put the FULL address (including the html:// bit) into the Choose File box. OK. 50. Keep an archive folder. Before you change or update a page, make a copy and save it in the archive. Mistakes do happen. It also a good idea to make a hard copy of your HTML code available for reviewing. 51. Although the majority (about 60%) of people using the net use Microsoft Internet Explorer for their browser, there are other browsers being used and each can have a different effect on your Web page. It is good practice to check the appearance of your Web site on two or three other browsers such as Netscape, Mozilla Firefox and Opera. Use the Right mouse button to “Open With”. 52. There are a number of other features that are used in HTML that can improve and enhance your site. These include Style Sheets (CSS), Meta Tags, Java, Feedback Forms, Comments, reading source Code, etc. 53. Keep it small, your home/index page should load in less than 30 seconds (better if 10-15 seconds) on a slow modem. The website at www.websiteoptimization.com/services/analyze/ will analyse your Web pages and give you feedback on its size and loading time. One or two graphics per page. Try to keep images to 40KB each. 54. META TAGS. At the top of your page in the head, you will have seen some Meta tags. The data here is read and used by browsers and Search Engines. Use the Format menu and select Page Title and Properties. Your title should already be there, but now it is time to enter a description of your site and a selection of key words. Key Words that match your title and home page content are best. You can use up to 80 words, but 10 to 20 is better. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 7 of 11 10/05/2017 55. There is another useful tool on Nvu called Site Manager. It is used to keep track of your files and hosting. The site manager allows you to navigate your site or between sites easily. It can deal with sites that are on your computer (or after completion, those that have been uploaded to a hosting remote server).Site Manager provides a directory tree view of a site similar to the view with Windows Explorer. It however lists only directories which you have specifically set up as ‘Sites’. You can set up many sites; they appear in Site Manager irrespective of where they appear in a normal directory tree. 56. To open Site Manager (a) use the View Menu and select Show/Hide then Site Manager – (NOTE, you can use the F9 Function key as a toggle to turn Site Manager On/OFF).(b) To set up a new site, click ‘Edit Sites’. This opens the ‘Publish Settings’ window. (c) Choose a convenient name for the site such as “Humpback Whales” and enter it in the box ‘Site Name’. (d) In the ‘Publishing server’ area click ‘Select directory’ and browse to the folder where the site is located, select the folder and OK. The box should read something like “file:///C:/Documents .... “ Leave the other boxes empty at this stage. 57. Back in Site Manager in the column headed ‘Name’ the new site should be listed and can be expanded to show its contents. Double-click any site to expand it. At the top of the Site Manager window a drop down box allows you to view all files or to select to view only html files or image. For files it is possible to display the file size and modified date. To select or de-select these options, in the column heading, to the right of name, click the icon and select the options required. You may have to widen the site manager window to view all the details. Double click on any html file to load it directly to the page area for editing. It is possible to rename and delete files and to create folders by using the buttons at the top of the Site Manager window. 58. To actually move your Web design onto the net you need a host site (free or paid) and a means of moving the file (File Transfer Protocol or FTP). Use the Site Manager to set up the parameters and then the Publish Icon to upload each Web page in turn with its related images. NOTE, be careful with the various settings. 59. Web sites can also link to other files eg MS WORD documents, text documents and PDF files. NVU does not transfer all files under Publish, so you sometimes need to use an independent FTP program such as FTP Commander. Likewise, not all free host sites will accept all types of attached files. 60. You can check your site for errors in your HTML on Nvu or at http://www.htmlvalidator.com/lite/ and download their CSE HTML VALIDATOR LITE. It can also be loaded as an extension to Mozilla Firefox. Some browsers will forgive little errors in code and still read the site, so this program can be used to correct those errors. 61. NVU has a comprehensive Help section and website with a forum there are some NVU tutorials such as those found at http://nvudev.com/guide/1.0PR/ugs01.htm and http://web.uvic.ca/comped/online/webpagea/ and http://www.thesitewizard.com/gettingstarted/nvu1.shtml You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 8 of 11 10/05/2017 62. Be wary of too much text. Remember, people tend not to read websites, but scan quickly for words and pictures. Lists and bulleted points are easier to scan. Do not put text right across the page. One or two graphics can stop a page full of text looking boring. Two small pages are better than one full of text. Avoid the need to scroll more than one screen. Keep the text area narrow and break up into small paragraphs with sub-headings. Tables make this easy. 63. Try to avoid burying links in prose paragraphs of text. Lots of click here does not look very professional, especially if you are attempting to get people to read your site. Think carefully about the word you are going to use as the link. 64. Keep it simple, there is a fine balance between making your page look interesting and going overboard with colour and images and making it confusing. Many web writers put a background image on their page. It is simple to do but can be distraction and can make text harder to read. Avoid overuse of colour. Use one background colour per page, preferably the same on every page. Also remember, there are various forms of colour blindness. What looks great to you, may not to someone else. If you must use a background image, keep it a simple pattern, so text can still be read easily. If you cannot live without funky coloured pages, look at your pages in a web browser and make sure they do not look awful. For instance, dark blue text on a slightly less dark blue background is unreadable, for obvious reasons. Black on dark red is also nasty, for less obvious but similar reasons. White on cyan does not work either: they are both too light. Remember, the longer your page is, the more obnoxious it is to have to read a bad colour scheme. Feel free to get cute and experiment with pages that will only be looked at for a minute or two. 65. For a humorous look at what not to do you could visit http://www.angelfire.com/super/badwebs/main.htm 66. Work out a maintenance program. All pages and links should be tested regularly for broken links. At least once a month. If you have a link to a site, and the site is moved, you will have a broken link. Remember, it takes lots of commitment to keep websites up to date. That takes time and effort. If the website is a one-person project, what happens when that person becomes unavailable for some reason? If you have put a date on a page, make sure you keep faith by reviewing it often. Do not put an "under construction" message up and leave it there forever. Too many pages have that little "under construction" symbol in a conspicuous place and never get around to actually constructing anything. EVERYTHING on the web is Under Construction. All the time. That is just the way the medium is: anything and everything is subject to change, replacement, or deletion at all times. Most people will expect that. If you are not planning to fix it up for a while, you should not have a link to it at all. Delete the link and no one will see your construction work. 67. You can get counters to put on your site from the internet. They are not all accurate. 68. Survey and feedback forms require a higher level of programming, often involving use of php and cgi. Many free web-hosting programs do not allow their use. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 9 of 11 10/05/2017 69. COLOUR. Open the Format menu and select Page Colors and Background. Tick the box for Use Custom Colors then tick in the box for Background. This is used to set the background colour (bgcolor). There are four options, (a) move the cursor over the rainbow, (b) click one of the colours on the Preference Color Grid, (c) put the hex code if you know it in the Hex box, (d) use the Advance Property Editor to select Attribute bgcolor and select one of the 16 recognised colours in the Value box. It is best to leave the text as the default of black at this stage. Experiment until you get the background colour you like. It may be even worth writing down the hex code for later use. There are 216 Web-safe colors that are consistent from browser to browser, and 16 colours that are given specific names. You can find these listed on various Web sites. 70. Individual cells in a table can have their own background colour (bgcolor), so this often used to make contrasting colours. (Double click somewhere on the table and bring up the “Tables Properties dialog box”. Often done for the heading, Nav Bar, right edge and contrast table columns. 71. If you want to know how it is done. Colour is entered in HTML as (a) a word for one of 16 basic colours eg black, white, red etc or (b) as Hexadecimal code (a combination of sixteen numbers - 1 2 3 4 5 6 7 8 9 A B C D E F 0). So a colour in the ratio Red/Green/Blue of 20%, 100%, 60%, when converted to fractions out of 255, becomes 51/255, 255/255 and 153/255. Red, 51/255, is changed to 51/16 = 3 and 3/16 or 33 in hexadecimal; Green, 255/255 becomes 255/16 = 15 and 15/16 or FF in hexadecimal; Blue, 153/255 becomes 153/16 = 9 and 9/16 or 99. Combined, the hexadecimal becomes colour #33FF99 (33 is 3x16 + 3 = 51 and FF is 15x16 + 15 = 255, the maximum possible number). A pure blue would be #0000FF. You could visit www.univox.com/home/support/rgb2hex.html or http://www.redbrick.dcu.ie/help/reference/colors/ to convert RGB fractions to Hex codes. A note of caution, not all browsers recognise all of the thousands of colours that are available. 72. In Source mode, the code for the background (bgcolor) will appear in the <body> tag. 73. COMMENT. What if you forget what each part of your HTML code does. You can spread out your HTML code to make it easier to read and then add notes to yourself or other readers. There is a HTML tag that look like this <!--->. It is used by starting a new line in Body Text the using the menu for Insert and selecting Comment. Type in your comment and press OK. Anything inside these tags will stay as part of your HTML but not be visible on your browser. You can scatter these notes all over your HTML to help your memory or to explain to others what you have done. Try this by putting a comment above the table on your second page. Save and view the effect. 74. PDF. Files can be converted to the Portable Document Format (PDF) with free software from http://www.pdf995.com/pdfedit.html . You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 10 of 11 10/05/2017 75. To upload your Web site files to your host you need a FTP program (File Transfer Protocol). Some HTML author programs such as Nvu incorporate FTP automatically (using Site Manager and the Publish button). There are several other versions (commercial and free) around. The freeware program FTP Commander is easy to use and in many ways better than the Nvu version. You will need to know your hosts ftp, your new Web site address, user Name /ID and a password. Not always easy to find as there is not uniformity in the terms used. Some hosts expect you to put the uploaded files into special folder/directory, eg. public_html. Read the information from your host and do a trial and error. FTP Commander can be obtained from the authors at http://www.internet-soft.com/download.htm or from the commonly used downloading site www.tucows.com . (NOTE - You can also use My Network Places in Windows XP as your FTP program) 76. The three C’s. Start with good and reliable Content, then constructed with Convenience in mind and only then concentrate on artistic Composition. The look and feel of your Web site will only be appreciated if the first two are adequately met. It is too easy to be enamoured with the fun of digital graphics and forget about Content and Convenience. 77. No Web site is ever perfect or complete, you should always be testing, testing, testing. Get as many people as possible to read your website on their computer. What about viewers that use a Mac or text only (important for people with poor eyesight who use speech synthesers to read their screen). It is a good idea to email many of your friends the address of your new Web site and ask for feedback BEFORE you announce your presence on the web. We are all prone to see what we expect to see and can overlook simple mistakes. 78. If you must use a large memory graphic, place it lower down the page so that it can build in the background. Make sure that the graphic has its size specified, so that the browser can provide the space and not need constant readjustments. If your pictures still take too long to load, reduce their resolution on a graphics program, eg IrfanView. Remember, reducing the physical dimensions of a graphic does NOT change the size of the memory used. 79. If you absolutely must include a page that takes a long time to load (like the 27 photos of your Christmas party), be nice to your readers and warn them. "Click here for my picture page. WARNING: this takes a long time to load, please be patient!" That's very simple. Better yet, do not load all your pictures at the same time; divide them into individual pages of two or four pictures and have a separate page that links all of those individual pages. The best solution of all is to use a thumbnail utility to display small copies of each picture, and then let the user click on them for a larger image. 80. Make your site accessible to all. Visually impaired people may not see your images, so make sure you use the alt characteristic to label your images. Some people, especially the disabled, may have graphics and sound turned off. Also, avoid small buttons and ticking boxes. Some people have mobility problems and have reduced flexibility with a mouse. 81. Animated .gif are also available and will show some movement. They are available from the net. It is courtesy to give credit for any images you copy, maybe even make it a link. 82. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Simple Web Design Using the Program NVU (Freeware) Page 11 of 11 10/05/2017 Helpful free hosting and software Web site hosting. When you have finished your Web site, where are you going to put it. Some email ISP (Internet Service Providers) will give you a free site eg Ozemail, but you end up with a complex Web address. Some, like Yahoo/Geocities, only give you a simple single page site. Some companies will provide a hosting service, but you have to put up with advertising and a longish name. Most are USA based. Entering Free Web Hosting into Google, will give many examples. Look for hosts that provide FTP (see below), otherwise you are usually restricted to a single, limited page. Look at http://www.esmartstart.com/ or http://www.t35.net/ or http://www.250free.com/ or http://www.741.com/ or https://free.prohosting.com/cgi/signup or http://www.bravenet.com/ or http://www.dreamstation.com/ or http://www.fortunecity.com/index.shtml Software – free for non-commercial use NVU – HTML WYSIWYG web site author http://www.nvu.com/ IrfanView – graphics program www.irfanview.com/ Mozilla Firefox – browser http://www.mozilla.org/ Opera – fast loading browser http://www.opera.com/ Netscape – browser http://browser.netscape.com/ns8/ FTP Commander – File transfer to host http://www.internet-soft.com/download.htm PDF995 – converts documents to PDF format http://www.pdf995.com/pdfedit.html Color Cop Eye Dropper – identifies HEX code for colours on computer screen http://www.prall.net/ CSE HTML Valid Lite – validates HTML code http://www.htmlvalidator.com/lite/ Notespad – text editor like MS Notepad with spell checker http://www.newbie.net/NotesPad/ You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected]
