Exploring the Internet Creating web pages  with Nvu/Kompozer a WYSIWYG web editor 91.113-021 Instructor: Michael Krolak 91...
Tonight <ul><li>Creating a web page using a WYSIWYG web editor </li></ul>Source:  http://www.arteffectsni.co.uk/web_design...
Class Announcements <ul><li>Class Notes Have been posted on class blog. </li></ul>
Nvu Now called KomPozer Nvu (pronounced New View) is an open source editor, i.e. the source and the program are freeware ....
Instructions for Downloading The Web Editor Kompozer  (next generation of NVU) <ul><li>Directions:  </li></ul><ul><li>To d...
Using Kompozer to set up and edit your website
Goals of the tutorial <ul><li>Goals of the tutorial: </li></ul><ul><li>The goals of this are centered around creating inte...
WYSIWYG  editor <ul><li>Writing Web Pages using the Web Editor. </li></ul><ul><li>Kompoze r  works like a  What You See Is...
WYSIWYG  editor (more) <ul><li>As we move into the era of dynamic documents, this becomes harder and harder to do. In newe...
Kompozer’s Site Management
Opening your web page on Kompozer
Enter the location of your web page
Opening your Publishing Settings
Site Settings Remember: Your username is your first initial and last name and 113.  So JohnSmith would have a http address...
Adding a link to a file on your webserver <ul><li>Add the text that you want to display </li></ul><ul><li>Then copy the na...
Opening your web page on Kompozer
Kompozer Editor to create web pages in HTML
Enter the location of your web page
Opening your Publishing Settings
Kompozer -- a WYSIWYG HTML Editor: <ul><li>To open  Kompozer </li></ul><ul><li>Select  </li></ul>
The Toolbar <ul><li>The toolbar has the standard functions File, Edit, View on the left side, Help </li></ul><ul><li>Inser...
[ I nsert]
[ I nsert]/Named A nchor
 
[ I nsert]/HorizontalLine
The Composition Bar The Composition Bar offers one button tools for rapidly carrying out common tasks .
Composition bar <ul><li>The one button tools are the most frequently used editing operations, and offer assistance with th...
Composition bar <ul><li>Composition bar contains frequently used functions, New, Open, Save file operations </li></ul><ul>...
New Button
Open Button
Save Button
Publish Button
First Step -- Publish button <ul><li>Click [Publish] </li></ul><ul><li>Click  Setting Tab </li></ul><ul><ul><li>Site Name ...
Before Publishing <ul><li>After the Web page has been: </li></ul><ul><li>Created,  </li></ul><ul><li>Edited,  </li></ul><u...
Page is ready to Publish <ul><li>Click [Publish] button </li></ul><ul><li>Click Publish tab </li></ul><ul><li>Site Name – ...
Browse Button
A nchor – Named Anchor
Linking materials
Link Button
The Link Properties Dialog <ul><li>The URL can be an absolute URL, in which case:   </li></ul><ul><li>Type it in the &quot...
Linking to Special URLs <ul><li>Linking to Special URLs including  Mailto  to setup Email Links </li></ul><ul><li>Review t...
Using Images in your web page
Image possibilities <ul><li>The Image Button allows you to add images to your page.  </li></ul><ul><li>The images placed o...
Image Button
Fill out the image  dialog box <ul><li>Image Location Tab: </li></ul><ul><li>Image Location – use the location on the web,...
Image Dimensions Tab <ul><li>Image Dimensions tab: </li></ul><ul><li>Optional if Actual size  </li></ul><ul><li>If you nee...
Image Appearance tag <ul><li>The Appearance tab allows the user to chose: </li></ul><ul><ul><li>Spacing around the image a...
Image Link tab <ul><li>The Image Link Tab is used to create a button. </li></ul><ul><li>After a suitable image that makes ...
Table Button Tables allow the author to create a two dimensional layout for the document. This control is necessary for a ...
The Table Button
Initial Table Dialog  <ul><li>Click the Table button </li></ul><ul><li>Fill in the number of rows and columns </li></ul><u...
Advanced Edit – set the attributes <ul><li>The Advanced Properties Edits the Table attributes </li></ul><ul><li>Click Sele...
After the table appears – Modify cells, rows, columns <ul><li>In the table click your mouse on the object to change (cell,...
Mistakes, Modification, and Redesign of Tables: <ul><li>How do I delete a table, row, column, or cell? </li></ul><ul><li>Y...
Examples
Forms for creating user interaction Forms allow the user to interact with the page, a necessary function for  e-commerce a...
Forms <ul><li>Forms: </li></ul><ul><li>Allows for interaction between the user and the web page or the web server. This is...
Creating the form  <form></form> <ul><li>The form tag creates a container for all of the rest of the input tags , thus the...
Form Name <ul><li>The form name can be anything that is not a reserved one.  </li></ul><ul><li>It is a good idea to name t...
Form Method Method Comment Get A message attached to the URL of the location where the information is to be processed. The...
About Encoding The Commonly Supported Encoding Types   Encoding Type Comments application/x-www-form-urlencoded   This pro...
The Components of the Form Container <ul><li>These other tags go inside the Form, i.e. you only use one form container but...
Form Field (input type) <ul><li>[Form]/ Form Field.. </li></ul><ul><li>A selector will occur with all of the input types: ...
Form Field (input type) more <ul><li>Note the radio button requires that you put then into a group, since only one of the ...
Form – Define Button <ul><li>In order for this option to work correctly is to highlight the text to appear on the button a...
Design of a Form
Spell Button
Print Button
The style bar (Formatting Bar) Creating the look and feel of the document.
Formatting Tool bar -- Style bar <ul><li>The style bar allows the author to create the html text containers, i.e. physical...
Style
 
Text and Background Color Selection
Selecting colors
Highlighting
Physical Text
Lists <ul><li>Simple lists breaks down into two main types:   </li></ul><ul><ul><li>Unordered  lists with each item denote...
Text Alignment
Unordered List
Ordered List
Align the text element
FAQs <ul><li>Q: How do I begin to use Nvu:   Ans:  It is recommended that the reader start by reading the Nvu Users Guide:...
FAQs (more) <ul><li>Q: How do I set the background color, image, or the default colors of the text, link, alink (active li...
FAQs (more) <ul><li>Q: How do I find out what plug-ins are available on my copy of  Nvu?   Ans.: Click on the  [ T ools]  ...
The <Embed></Embed> tag <ul><li>Use the <embed> tags when you need a plugin or other helper that is not part of the browse...
Attributes for the Controls  Control Attribute Value Controls True|False Height integer Width integer Autostart True|False...
Adding Audio and Video <ul><li>Use the [Insert]/HTML </li></ul><ul><li>In the dialog box window insert  </li></ul><ul><ul>...
Upcoming SlideShare
Loading in …5
×

Nvu tutorial1 1

1,414 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,414
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Nvu tutorial1 1

  1. 1. Exploring the Internet Creating web pages with Nvu/Kompozer a WYSIWYG web editor 91.113-021 Instructor: Michael Krolak 91.113-031 Instructor: Patrick Krolak See also http://www.cs.uml.edu/~pkrolak/lab4/lab4.html Authors: P. D. & M. S. Krolak Copyright 2005
  2. 2. Tonight <ul><li>Creating a web page using a WYSIWYG web editor </li></ul>Source: http://www.arteffectsni.co.uk/web_design/cartoon_web_design.gif
  3. 3. Class Announcements <ul><li>Class Notes Have been posted on class blog. </li></ul>
  4. 4. Nvu Now called KomPozer Nvu (pronounced New View) is an open source editor, i.e. the source and the program are freeware . NVU has a next version called Kompozer which is new and improved.
  5. 5. Instructions for Downloading The Web Editor Kompozer (next generation of NVU) <ul><li>Directions: </li></ul><ul><li>To download Kopozer go to http://www.kompozer.net/ </li></ul><ul><li>Depending on your computer settings, you may get the following warning: </li></ul><ul><ul><li>Press Run. </li></ul></ul><ul><ul><li>When prompted click &quot;Next&quot; or &quot;I accept the agreement&quot;. Finally click on Install. </li></ul></ul>
  6. 6. Using Kompozer to set up and edit your website
  7. 7. Goals of the tutorial <ul><li>Goals of the tutorial: </li></ul><ul><li>The goals of this are centered around creating interesting, attractive, and compelling web documents in an efficient and productive manner. </li></ul><ul><li>To learn the Nvu web editor an editor that makes creating web pages only slightly more difficult than creating word processing documents. </li></ul><ul><li>To learn how to design tables and to use the table tags to create attractive two dimensional layouts. </li></ul><ul><li>To learn how to find and create a web resource page to keep track of sites that contain free and shareware resources to make creating more attractive web pages easier. </li></ul>
  8. 8. WYSIWYG editor <ul><li>Writing Web Pages using the Web Editor. </li></ul><ul><li>Kompoze r works like a What You See Is What You Get (WYSIWYG) word processor, e.g. MS Word.. In the previous lab we actually used some of the HTML tags and created HTML documents. </li></ul><ul><li>To use Kompoze r one only needs to: </li></ul><ul><ul><li>select the appropriate button in the composition toolbar, </li></ul></ul><ul><ul><li>answer the questions in the resulting dialog box and fill in the appropriate text boxes, and </li></ul></ul><ul><ul><li>click the [Apply] button to see what the change looks like and the [Close]. </li></ul></ul>
  9. 9. WYSIWYG editor (more) <ul><li>As we move into the era of dynamic documents, this becomes harder and harder to do. In newer Web page editors, much of the action is also buried in the source code. Thus, it is hidden from the viewer. As a result, Nvu and other similar editors use tags to indicate how the content behaves at the source code level. </li></ul><ul><li>This hidden layer could include: </li></ul><ul><li>Java applets, </li></ul><ul><li>Javascript and other scripts, </li></ul><ul><li>Forms, </li></ul><ul><li>Frames, and </li></ul><ul><li>XML. </li></ul>
  10. 10. Kompozer’s Site Management
  11. 11. Opening your web page on Kompozer
  12. 12. Enter the location of your web page
  13. 13. Opening your Publishing Settings
  14. 14. Site Settings Remember: Your username is your first initial and last name and 113. So JohnSmith would have a http address of http://ceweb.uml.edu/jsmith113 , a ftp site of ftp://ceweb.uml.edu and a username of jsmith113
  15. 15. Adding a link to a file on your webserver <ul><li>Add the text that you want to display </li></ul><ul><li>Then copy the name of the file into the lower field. </li></ul><ul><li>Click OK. </li></ul>
  16. 16. Opening your web page on Kompozer
  17. 17. Kompozer Editor to create web pages in HTML
  18. 18. Enter the location of your web page
  19. 19. Opening your Publishing Settings
  20. 20. Kompozer -- a WYSIWYG HTML Editor: <ul><li>To open Kompozer </li></ul><ul><li>Select </li></ul>
  21. 21. The Toolbar <ul><li>The toolbar has the standard functions File, Edit, View on the left side, Help </li></ul><ul><li>Insert, Format, Table, and Tools contain detailed HTML functions. </li></ul>
  22. 22. [ I nsert]
  23. 23. [ I nsert]/Named A nchor
  24. 25. [ I nsert]/HorizontalLine
  25. 26. The Composition Bar The Composition Bar offers one button tools for rapidly carrying out common tasks .
  26. 27. Composition bar <ul><li>The one button tools are the most frequently used editing operations, and offer assistance with the more complex HTML tags for creating links, targets, images, horizontal rules, and, most importantly, setting up tables. Dialog boxes request user preferences and other information necessary to create the containers for the tag(s). The most common examples are the image and the table tags. </li></ul><ul><li>Table tags are really containers within containers that denote colors or backgrounds, captions, horizontal and vertical alignment of text and table, and the borders of the table and each cell. Thus, the dialog box involves specifying many items. </li></ul>
  27. 28. Composition bar <ul><li>Composition bar contains frequently used functions, New, Open, Save file operations </li></ul><ul><li>Publish - allows publishing the document to the web, </li></ul><ul><li>Browse - view the it in the browser, </li></ul><ul><li>Anchor </li></ul><ul><li>Link -- Link HTML documents, named anchors, audio and multimedia. </li></ul><ul><li>Image – Add an inline image to the document </li></ul><ul><li>Table – Create a table </li></ul><ul><li>Form – Create a form and add actions to interact with the server. </li></ul><ul><li>Spell check the document </li></ul><ul><li>Print </li></ul>
  28. 29. New Button
  29. 30. Open Button
  30. 31. Save Button
  31. 32. Publish Button
  32. 33. First Step -- Publish button <ul><li>Click [Publish] </li></ul><ul><li>Click Setting Tab </li></ul><ul><ul><li>Site Name – </li></ul></ul><ul><ul><ul><li>Ceweb.uml.edu </li></ul></ul></ul><ul><ul><li>Pub address – ftp://ceweb.uml.edu/ </li></ul></ul><ul><ul><li>Http address (URL) -- http://ceweb.uml.edu/User_id </li></ul></ul><ul><ul><ul><li>Note User_id </li></ul></ul></ul><ul><ul><li>Fill in the User_id and Password </li></ul></ul>
  33. 34. Before Publishing <ul><li>After the Web page has been: </li></ul><ul><li>Created, </li></ul><ul><li>Edited, </li></ul><ul><li>Checked for grammar, spelling, content, and appearance, and </li></ul><ul><li>Finally validated [Tools]/Validate HTML </li></ul><ul><li>then it is ready to be uploaded to your website (Published). </li></ul>
  34. 35. Page is ready to Publish <ul><li>Click [Publish] button </li></ul><ul><li>Click Publish tab </li></ul><ul><li>Site Name – ceweb.uml.edu </li></ul><ul><li>Make sure the page has a title and a file name with a “.html” extension </li></ul><ul><li>Use the defaults and click publish button (see arrow) </li></ul>
  35. 36. Browse Button
  36. 37. A nchor – Named Anchor
  37. 38. Linking materials
  38. 39. Link Button
  39. 40. The Link Properties Dialog <ul><li>The URL can be an absolute URL, in which case: </li></ul><ul><li>Type it in the &quot;Link to&quot; window in the dialog box. </li></ul><ul><li>Copy from the Netscape Location: window and paste in the second window. </li></ul><ul><li>Place the mouse on the text link and click the right mouse button; then select the Copy Link to Clipboard option. Finally, paste it in the &quot;Link to&quot; window. </li></ul><ul><li>The URL can be a file in the current system's directory, (i.e. a relative URL). </li></ul><ul><li>A simpler method is to click [Choose file..] and use the usual Window's directory dialog box to find the correct file, highlight it, and click [Open ]. </li></ul><ul><li>After the link's text and URL are completed and click [OK]. </li></ul>
  40. 41. Linking to Special URLs <ul><li>Linking to Special URLs including Mailto to setup Email Links </li></ul><ul><li>Review the material on special URLs such as: ftp, etc. </li></ul><ul><li>The Mailto link is of major interest to most authors. Simply fill in the text as in a general link in the second window: </li></ul><ul><ul><li>Mailto: Author's_Email_Address </li></ul></ul><ul><li>Where Author's_Email_Address is your usual email address, e.g. pkrolak@cs.uml.edu </li></ul>
  41. 42. Using Images in your web page
  42. 43. Image possibilities <ul><li>The Image Button allows you to add images to your page. </li></ul><ul><li>The images placed on a page are known as inline images . </li></ul><ul><li>Clickable images that link the image to a URL are called  buttons . A button can link to another location on the page, another external page, or a sound or video. </li></ul><ul><li>An image used as a background upon which the text and inline images are placed is called, naturally, a background image . </li></ul><ul><li>An image with defined clickable regions that point to URLs, or cause an action when a mouse event occurs (onMouseOver, onMouseOut) is called an image map . </li></ul>
  43. 44. Image Button
  44. 45. Fill out the image dialog box <ul><li>Image Location Tab: </li></ul><ul><li>Image Location – use the location on the web, i.e. its URL or use the [Choose File..] to locate the image on your computer. </li></ul><ul><li>The image is saved with the HTML file in the same directory unless the URL is relative to page location check box  is checked (clicked on), in which case it leaves it where it is.. </li></ul><ul><li>Use the Alternative text (short title or description for visually impaired). </li></ul><ul><li>Note after the Image location is chosen a thumb nail of the image will appear. </li></ul><ul><li>Advanced Edit – normally used by advanced web designer. </li></ul>
  45. 46. Image Dimensions Tab <ul><li>Image Dimensions tab: </li></ul><ul><li>Optional if Actual size </li></ul><ul><li>If you need to resize, click Custom Size. </li></ul><ul><li>Constrained check leaves the ratio of height to width the same. </li></ul><ul><li>Select the new width (and height if not constrained) </li></ul><ul><li>The size can be either in pixels or % of window size </li></ul>
  46. 47. Image Appearance tag <ul><li>The Appearance tab allows the user to chose: </li></ul><ul><ul><li>Spacing around the image and whether to use a solid border. </li></ul></ul><ul><ul><li>The Align text option tells the browser how to flow the text around the image. </li></ul></ul>
  47. 48. Image Link tab <ul><li>The Image Link Tab is used to create a button. </li></ul><ul><li>After a suitable image that makes clear the action of the link is chosen then a URL that carries out the action is inserted in the text window. </li></ul><ul><li>If the link is to a local file in the directory, then use the Choose File .. Option. </li></ul>
  48. 49. Table Button Tables allow the author to create a two dimensional layout for the document. This control is necessary for a professional and pleasing appearance. Read: http://www.cs.uml.edu/~pkrolak/lab4/lab4.html
  49. 50. The Table Button
  50. 51. Initial Table Dialog <ul><li>Click the Table button </li></ul><ul><li>Fill in the number of rows and columns </li></ul><ul><li>Fill in width either in Pixels or % of window. </li></ul><ul><li>Border 0 is none, 1-2 is flat, 5-10 is a 3-d boarder </li></ul><ul><li>Click [Advanced Edit..] and fill in the table attributes </li></ul><ul><li>When done click [OK] </li></ul>
  51. 52. Advanced Edit – set the attributes <ul><li>The Advanced Properties Edits the Table attributes </li></ul><ul><li>Click Selector arrow </li></ul><ul><li>Select the attribute from the list and double click on it. </li></ul><ul><li>Set the value in the Value window. </li></ul><ul><li>When done click [OK ] </li></ul>
  52. 53. After the table appears – Modify cells, rows, columns <ul><li>In the table click your mouse on the object to change (cell, row, col). </li></ul><ul><li>Click [Table] </li></ul><ul><li>Cell dialog box appears fill in changes and use [Advance Edit] to modify object’s attributes </li></ul><ul><li>As an example in the attributes select bgcolor to change the table’s color. Use value to get color, then click [OK] </li></ul>
  53. 54. Mistakes, Modification, and Redesign of Tables: <ul><li>How do I delete a table, row, column, or cell? </li></ul><ul><li>You may create too many rows or columns, and want to delete some. This is done in the following manner:   </li></ul><ul><li>Click the Edit button in the Toolbar: </li></ul><ul><li>Undo maybe used right after creating the table to delete it and start again. </li></ul><ul><li>Otherwise, you can use the D elete Table sub-menu: </li></ul><ul><ul><li>Table -- Deletes the selected Table. </li></ul></ul><ul><ul><li>Row   -- Deletes the selected Row. </li></ul></ul><ul><ul><li>Column --Deletes the selected Column. </li></ul></ul><ul><ul><li>Cell     -- Deletes the selected Cell. </li></ul></ul><ul><li>The S elect Table allows the selected Table to be modified </li></ul>
  54. 55. Examples
  55. 56. Forms for creating user interaction Forms allow the user to interact with the page, a necessary function for e-commerce and other applications Read http://www.cs.uml.edu/~pkrolak/lab8/lab8.html
  56. 57. Forms <ul><li>Forms: </li></ul><ul><li>Allows for interaction between the user and the web page or the web server. This is a necessary requirement for e-business and distance learning. </li></ul>
  57. 58. Creating the form <form></form> <ul><li>The form tag creates a container for all of the rest of the input tags , thus the first step to creating a Form on a page is [Form]/define form… </li></ul><ul><li>Fill out the Definition dialog box </li></ul><ul><li>After filling out the form and clicking [OK] a box will appear on the screen as doted lines. </li></ul>
  58. 59. Form Name <ul><li>The form name can be anything that is not a reserved one. </li></ul><ul><li>It is a good idea to name the form in a meaningful manner. The form is an object. When programmers refer to it is easier to refer it by name. </li></ul>
  59. 60. Form Method Method Comment Get A message attached to the URL of the location where the information is to be processed. The attachment follows the usual URL starting with a &quot;?&quot; and followed by name and value pairs. Some special character information is encoded to allow the receiving location to distinguish the operator characters from those used as normal text. Post A file that is passed with the URL to where it will be sent to be processed.
  60. 61. About Encoding The Commonly Supported Encoding Types Encoding Type Comments application/x-www-form-urlencoded This process translates spaces in the information to &quot;+&quot;, non-alphanumeric data into % followed by a two digit hexadecimal that are the ASCII code for the symbol, and the line brakes as %0D%0A . text/plain As the name implies, a simple text file. multipart/form-data Allows the form's components, i.e. the type, send file, to be used to send a single MIME-compatible compound document. This is a fancy way of describing the familiar  email attachments.
  61. 62. The Components of the Form Container <ul><li>These other tags go inside the Form, i.e. you only use one form container but you can have as many components as you need </li></ul><ul><li>Form Field (input type) </li></ul><ul><li>Form Image </li></ul><ul><li>Text Area </li></ul><ul><li>Selection List … </li></ul><ul><li>Define Button … </li></ul><ul><li>Define Label … </li></ul>
  62. 63. Form Field (input type) <ul><li>[Form]/ Form Field.. </li></ul><ul><li>A selector will occur with all of the input types: </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Password </li></ul></ul><ul><ul><li>Checkbox </li></ul></ul><ul><ul><li>Radio Button </li></ul></ul><ul><ul><li>Submit button </li></ul></ul><ul><ul><li>Reset button </li></ul></ul><ul><ul><li>File </li></ul></ul><ul><ul><li>Hidden </li></ul></ul><ul><ul><li>Image </li></ul></ul><ul><ul><li>Button. </li></ul></ul>
  63. 64. Form Field (input type) more <ul><li>Note the radio button requires that you put then into a group, since only one of the group can be selected. </li></ul><ul><li>Every member must have the same group name (spelling and case). </li></ul><ul><li>The field value is the value that goes with that choice. </li></ul><ul><li>One of the group can be checked as Initially Selected to indicate the normal choice. </li></ul>
  64. 65. Form – Define Button <ul><li>In order for this option to work correctly is to highlight the text to appear on the button and then select [Form]/Define Button .. </li></ul><ul><li>For example to create a submit button Highlight the word “submit” and then </li></ul>
  65. 66. Design of a Form
  66. 67. Spell Button
  67. 68. Print Button
  68. 69. The style bar (Formatting Bar) Creating the look and feel of the document.
  69. 70. Formatting Tool bar -- Style bar <ul><li>The style bar allows the author to create the html text containers, i.e. physical, logical, and font. </li></ul><ul><li>Lists – ordered and unordered </li></ul><ul><li>Alignment </li></ul><ul><ul><li>Left </li></ul></ul><ul><ul><li>Center </li></ul></ul><ul><ul><li>Right </li></ul></ul><ul><ul><li>Justified </li></ul></ul><ul><li>Tab right and left </li></ul>
  70. 71. Style
  71. 73. Text and Background Color Selection
  72. 74. Selecting colors
  73. 75. Highlighting
  74. 76. Physical Text
  75. 77. Lists <ul><li>Simple lists breaks down into two main types: </li></ul><ul><ul><li>Unordered lists with each item denoted by a printer's bullet or other symbol , or </li></ul></ul><ul><ul><li>Ordered lists (those that use a number or letter) </li></ul></ul><ul><li>Other list types that require the use of the F o rmat button on the tool bar are: </li></ul><ul><ul><li>Definition , and </li></ul></ul><ul><ul><li>Dictionary </li></ul></ul><ul><ul><li>Menu </li></ul></ul><ul><li>Note that the Unordered List will select the style of the bullet (disk) for you based on rules of nesting or indentation. Similarly, for Ordered Lists, it will select order element type (numbers or alphabetic characters). If this offends your sense of layout,  use the HTML editor to override Nvu's selection. You can achieve almost all the control needed for any list layout -- select the [F o rmat] button/ Character Properties/Paragraph , then select the correct options to determine list style, type of character or disc to display, and the starting value. This is tedious, but necessary for greater control over the details. </li></ul>
  76. 78. Text Alignment
  77. 79. Unordered List
  78. 80. Ordered List
  79. 81. Align the text element
  80. 82. FAQs <ul><li>Q: How do I begin to use Nvu: Ans: It is recommended that the reader start by reading the Nvu Users Guide: </li></ul><ul><li>http://www.nvudev.org/guide/1.0PR/nvuug10.pdf </li></ul><ul><li>Q: How do I open Nvu to begin editing? Ans. : Click on Nvu icon on your desktop. </li></ul>
  81. 83. FAQs (more) <ul><li>Q: How do I set the background color, image, or the default colors of the text, link, alink (active link), or the vlink (visited link)? Ans.: Click [Format]/Page Colors and Backgrounds ... </li></ul><ul><li>Q: How do I get special characters, for instance the copyright symbol, into my text? Ans.: Click [Insert]/Characters and Symbols ...  For more  information see . </li></ul><ul><li>Q: How do I get the Nvu plugins? Ans: The plugins and instructions for using them --  </li></ul>
  82. 84. FAQs (more) <ul><li>Q: How do I find out what plug-ins are available on my copy of  Nvu? Ans.: Click on the [ T ools] menu. </li></ul><ul><li>Q: How do I stop the Link operator from &quot;linking the text following the text that was specified&quot;?   </li></ul><ul><li>Ans.: Nvu still thinks that the container for the link text is open. Highlight the text that you don't want to be part of the Link, click [ F o rmat ] and select &quot;Remove Lin ks &quot;. </li></ul><ul><li>Q; How do I insert tags not supported by the current Nvu editor?   </li></ul><ul><li>Ans: Nvu does not support the full set of HTML tags -- <base>, <Object>, <Embed>. To overcome this one can insert the non-supported tags one at a time using [ I nsert]/HTML Tag .. See the discussion on the [Insert]   Also by clicking on the <HTML> Source tab on the bottom of the Nvu window one can edit the source code directly. </li></ul>
  83. 85. The <Embed></Embed> tag <ul><li>Use the <embed> tags when you need a plugin or other helper that is not part of the browser original programs. </li></ul><ul><li>Basic attributes are: </li></ul><ul><ul><li>SRC= “URL_of_Media_file” can be sound or video, etc. </li></ul></ul><ul><ul><li>Controls to set volume, start, loop, etc. </li></ul></ul>
  84. 86. Attributes for the Controls Control Attribute Value Controls True|False Height integer Width integer Autostart True|False Loop True|False
  85. 87. Adding Audio and Video <ul><li>Use the [Insert]/HTML </li></ul><ul><li>In the dialog box window insert </li></ul><ul><ul><li>< embed src=“ Insert File Location (URL) Here ” controller =“True” > </li></ul></ul><ul><ul><li>Then your Text message </embed> </li></ul></ul><ul><li>Note the attributes should allow for a controller so the user can correct volume, on/off etc. </li></ul>

×