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 Freeware Program NVU OR how to make a simple three page Web site for a specific purpose or group eg. Humpback Whales. 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 – 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. Decide the general content (text and images and internet links) and have a vision of the layout. 2. Collect all the text and images into a new folder. If the text is in MS WORD format, save also a text version, with no formatting. Images should be in the GIF format for simple drawings and JPEG for high-resolution photographs. For large photographs, use a graphics program to make a lower resolution/memory version and save it as a GIF with the same name. The IrfanView freeware program will do this. Keep the name short and without gaps (big_dog.gif is acceptable). Animated .gif are also available and will show some movement. They are available from the net. Remember one 20kB image is equivalent in memory and loading time to about eight pages of text. 3. Open the Nvu program, a new “untitled” tab will appear. (NOTE, to edit an existing file you would use File>Open and choose the file you want to edit). Diagram nvi1.gif. 4. Note the Menu Bar (eg. File, Edit etc.) and the FIVE Toolbars (1) Composition Toolbar eg. New, Open, (2) Two Format Toolbars eg. B, I, U etc, (3) Page Tabs for open documents eg. (untitled), (4) Edit Mode Toolbars at bottom of page – Normal; HTML; Source; Preview, and (5) Status Bar eg. <body>. 5. To give the page a TITLE, go to the Format Menu and click on “Page Title and Properties”. Diagram nvu6.gif. 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. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Page 1 of 5 6. Now using the File>Save As menu, 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. 7. Click on the SOURCE Edit Mode button. It will open with an HTML DOCTYPE introduction (the writing in blue and purple is HTML code). 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. (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. You will note that straight after the identification at the top, there is an <html> tag and its closing pair </html> is right at the bottom of the page. Your whole Web 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 will automatically go between the <body> and </body> tags. (c) TITLE. Each Web page has in fact three titles, (i) what the file is saved as (always index.html for the first/home page), (ii) the words between <title> and </title> which also appear on top of the browser as the page title, and (iii) the one that you will write later as text heading on the page. You will notice that your title appears between the two title tags. (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. We will see this later. 8. Return to Normal on Edit mode. The page will appear blank again 9. Diagrams nvu.2,3,4,5. Check the Tools/Preferences (a) Under General, select "Retain Original Source Formatting" and tick all the other boxes EXCEPT for the Cascading Style Sheets, (b) Fonts, leave it as the present default values, (c) New Page Settings, tick "Readers Default Colors" and leave the rest with the present default values, (d) Advanced, tick "HTML 4", "Transitional" and "Return in a Paragraph ....." and leave the rest with the default values. 10. To give the page a background image (a small image that is tiled over the whole page) and a background colour ( a fallback position) use the Format menu and click on “Page Colors and Background). Click on “Custom Colors” and then on the “Background” box. There are six options for choosing the colour. Select one eg. change the hex box to #ff0000 to get red then 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 page will show the tiled image. 11. We will use a TABLE for the basic structure of the 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. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Page 2 of 5 12. Use the Table Menu (or Insert or Icon), select “Insert” and “Table” (Diagram nvu.7) 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”. Diagram nvu.8,9. Click on the Cells Tab and use the first pull down menu to get “column”. 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 (important) now or later. NOTE, cells can also be joined and inserted. Apply and OK. (An extension to HTML is to use Cascading Style Sheets CSS for structure, appearance and text style. They are not hard but beyond the scope of this introductory presentation). 13. Use can use the Edit menu to Undo and Redo editing. 14. We will insert an icon 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. NOTE, simple gif images with transparent surroundings can fit in more easily and display a non-rectangular background) 15. To give the Page a heading, type Humpback Whales into the middle top cell. Use the mouse to highlight the words. Change the Body Text to Heading 1 and click on the Centering icon.. Save 16. 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 bottom left cell – 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. Apply, OK and Save. 17. To make this list into links, highlight just the first (Home) and click on the Link Icon. On the pop-up menu, click on “Choose File” and select the index.html file then OK. NOTE, it changes colour and is underlined (link style) In turn highlight the next two links. We have not saved these files yet, so you will need to type in their name (pictures.html and links.html). Save. 18. 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. 19. 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. Convert it to Paragraph text. 20. We now have a completed common framework. Save. 21. Do a Save As to make a second copy called pictures.html and a third copy called links.html and use the File/Open to have all three pages open. Look at the very top line of the window for the file name. 22. To put the text on the first page, copy and paste from your previously saved 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. 23. We can insert a horizontal dividing line by using the Insert Menu or the H.Line Icon. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Page 3 of 5 24. Double clicking or Right clicking brings up a Dialogue Box which can be used to change the width, height, shading and alignment of the line. 25. 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. 26. 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 later. OK. A Double (or Right) click on the image gives 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) 27. 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). 28. 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.) 29. Now for the second 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. 30. 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. 31. 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. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Page 4 of 5 32. It is good practice to check the appearance of your Web site now on two or three other browsers such as Netscape, Mozilla Firefox and Opera. Use the Right mouse button to Open With. 33. There is another useful tool on Nvu called File 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. 34. 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. 35. 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. 36. To actually now 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. 37. 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. 38. 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. 39. 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. You are free to use this document, with acknowledgement, for non commercial purposes - Terry Jones; [email protected] Page 5 of 5
