Transcript Tutorial Nvu

Exploring the Internet
Creating web pages
with Nvu 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
Tonight
• Creating a web page using a WYSIWYG
web editor
Source: http://www.arteffectsni.co.uk/web_design/cartoon_web_design.gif
Class Announcements
• Class Notes Have been
posted on class blog.
Nvu
Nvu (pronounced New View) is an
open source editor, i.e. the source
and the program are freeware.
Instructions for Downloading The Web
Editor V|NU
Directions:
1.
2.
To download VNU, go to
http://cvs.nvu.com/download/nvu1.0-win32-installer-full.exe.
Depending on your computer
settings, you may get the following
warning:
–
–
Press Run.
When prompted click "Next" or "I
accept the agreement". Finally click
on Install.
Using Nvu to set up and
edit your website
Goals of the tutorial
Goals of the tutorial:
•
•
•
•
The goals of this are centered around creating interesting,
attractive, and compelling web documents in an efficient and
productive manner.
To learn the Nvu web editor an editor that makes creating web
pages only slightly more difficult than creating word processing
documents.
To learn how to design tables and to use the table tags to create
attractive two dimensional layouts.
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.
WYSIWYG editor
Writing Web Pages using the Nvu Web Editor.
Nvu 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.
To use Nvu one only needs to:
– select the appropriate button in the composition
toolbar,
– answer the questions in the resulting dialog box and fill
in the appropriate text boxes, and
– click the [Apply] button to see what the change looks
like and the [Close].
WYSIWYG editor (more)
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.
This hidden layer could include:
•Java applets,
•Javascript and other scripts,
•Forms,
•Frames, and
•XML.
Nvu’s Site Management
Opening your web page on N|VU
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 of http://ceweb.uml.edu/jsmith113 , a ftp
site of ftp://ceweb.uml.edu and a username of jsmith113
Adding a link to a file on your webserver
• Add the text that you want to display
• Then copy the name of the file into the lower field.
• Click OK.
Opening your web page on N|VU
Enter the location of your web page
Opening your Publishing Settings
Nvu -- a WYSIWYG HTML Editor:
To open Nvu
• Select
The Toolbar
• The toolbar has the standard functions File, Edit, View
on the left side, Help
• Insert, Format, Table, and Tools contain detailed HTML
functions.
[Insert]
Insert:
The insert operation contains the major composer tool bar buttons, i.e.. link,
target, image, H. Line, table. The major new insertion operation found only here
is the insert HTML Tag.. This allows the user to insert any HTML tag not
supported directly by Composer.
Insert Dialog Box
Operation
Insert Image
Insert a Table
Insert Link
Insert a Named Anchor.. (an inline anchor or
reference point)
Insert Horizontal Line.
Insert HTML
Insert Characters and Symbols
Break below Image
[Insert]/NamedAnchor
Named Anchor:
The named anchor operator creates an inline anchor or reference point on
the Web page that can be reached from links from another point within the
same page or from other documents. The name should be unique to the
page. The highlighted text will normally be used to form the name, unless
the document's author overrides it. When viewing the page in Composer a
target's location is indicated by the tag icon. (This an example of how
WYSIWYG word processors and HTML editors differ.
The Named Anchor Dialog Box
[Insert]/HorizontalLine
Horizontal line or Horizontal Rule <HR> tag:
The H. Line is used to create a separator between sections of the document using a horizontal line.
This used to be called a horizontal rule. There are attributes to the <HR> tag that allow for 3-D
effects, greater control of length and positioning, etc. These are not all currently supported by
Composer. Use the HTML editor if these attributes are needed. To create a horizontal rule, click the
mouse where you want it to appear, and then click the H. Line button.
Using the Mouse to alter the length and the width of the Horizontal rule.
Clicking on the horizontal line will bring up a dialog box that will allow the user to alter the width,
length, or appearance.
You may note that some pages on the Web use a graphic as a horizontal rule. These are just a special
form of inline image. Thus, they can be captured like any other image on the Web and can be
applied by the image button. To find archives of simple ones or animated ifs search for "image
archive" + bar.
The horizontal rule can appear to be three dimensional. For example see below.
The Composition Bar
The Composition Bar offers one button tools
for rapidly carrying out common tasks.
Composition bar
• 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.
• 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.
Composition bar
•
•
•
•
•
•
•
•
•
•
Composition bar contains frequently used functions, New, Open, Save file
operations
Publish - allows publishing the document to the web,
Browse - view the it in the browser,
Anchor
Link -- Link HTML documents, named anchors, audio and multimedia.
Image – Add an inline image to the document
Table – Create a table
Form – Create a form and add actions to interact with the server.
Spell check the document
Print
New Button
New:
Click this button to create a new file (Web page).
Open Button
Open:
Open -- opens HTML files that have been created at an earlier
time. The operation uses the normal Window's directory dialog
window.
Save Button
Save:
As the name implies, this saves the updated file. It is probably a
good idea to use File/SaveAs.. on the toolbar to make sure the file
is being stored in the disk and directory you think it is. This may
seem like a waste of time, but it could save an evening's work if
the files turn out to stored on the lab computer's desktop and are
erased by the next student user.
The nice feature of this particular save operation is that it also
saves all the images to the same directory. An image rich Web
page then should be stored in its own directory or folder along with
its images and other multimedia.
Publish Button
Publish:
Publish replaces the need for using Ws_ftp to do a file transfer
between the PC lab computer and ceweb.uml.edu where your web
site resides.
The Publish operation will work between any two machines.
After setting up the preferences, [Publish] will allow movement of
the HTML document and all the associated files with one
operation.
.
First Step -- Publish button
1. Click [Publish]
2. Click Setting Tab
1. Site Name –
Ceweb.uml.edu
2. Pub address –
ftp://ceweb.uml.edu/
3. Http address (URL) -http://ceweb.uml.edu/User
_id
4. Fill in the User_id and
Password
Before Publishing
After the Web page has been:
1. Created,
2. Edited,
3. Checked for grammar, spelling, content, and
appearance, and
4. Finally validated [Tools]/Validate HTML
then it is ready to be uploaded to your website
(Published).
Page is ready to Publish
1. Click [Publish] button
2. Click Publish tab
3. Site Name –
ceweb.uml.edu
4. Make sure the page has
a title and a file name
with a “.html” extension
5. Use the defaults and
click publish button (see
arrow)
Browse Button
Preview:
Clicking this will allow the author to view the current file (Web
page) with your browser. Remember that Nvu and any other
HTML WYSIWYG editor can show only an approximate page, as
it must also include many non-display features needed to create the
page. The browser is under no such obligation to display these
artifacts in the final result.
Print Button
Print:
The print operation tells the specified printer to create a printed
version of the Web page. Normally, the background and/or the
background color is not printed, even on a color printer.
Using Images in your
web page
Image possibilities
• The Image Button allows you to add images to your page.
• The images placed on a page are known as inline images.
• 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.
• An image used as a background upon which the text and inline
images are placed is called, naturally, a background image.
• 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.
Image Button
Creating Inline Images:
Click the Image button to bring up the Image Properties
dialog box.
Fill out the image
dialog box
Image Location Tab:
• Image Location – use the location on the
web, i.e. its URL or use the [Choose
File..] to locate the image on your
computer.
• 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..
• Use the Alternative text (short title or
description for visually impaired).
• Note after the Image location is chosen
a thumb nail of the image will appear.
• Advanced Edit – normally used by
advanced web designer.
Image Dimensions Tab
Image Dimensions tab:
Optional if Actual size
If you need to resize, click
Custom Size.
•Constrained check leaves the
ratio of height to width the same.
•Select the new width (and
height if not constrained)
•The size can be either in pixels
or % of window size
Image Appearance tag
•
The Appearance tab
allows the user to chose:
1. Spacing around the
image and whether to use
a solid border.
2. The Align text option tells
the browser how to flow
the text around the image.
Image Link tab
The Image Link Tab is used to
create a button.
1. 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.
2. If the link is to a local file in
the directory, then use the
Choose File .. Option.
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.
The Table Button
Table:
Tables are extremely useful in the laying and positioning of text,
images, and data. HTML is designed to flow data onto a display
and hence the two dimensional layout of material is difficult if not
impossible in the early versions of HTML. The table container
allows the designer to create these relations and to have some
sense that the viewer will see the layout as the author intended.
Initial Table Dialog
• Click the Table button
• Fill in the number of rows and
columns
• Fill in width either in Pixels or
% of window.
• Border 0 is none, 1-2 is flat, 510 is a 3-d boarder
• Click [Advanced Edit..] and fill
in the table attributes
• When done click [OK]
Advanced Edit – set the attributes
• The Advanced Properties
Edits the Table attributes
• Click Selector arrow
• Select the attribute from
the list and double click
on it.
• Set the value in the Value
window.
• When done click [OK]
After the table appears –
Modify cells, rows, columns
• In the table click your
mouse on the object to
change (cell, row, col).
• Click [Table]
• Cell dialog box appears
fill in changes and use
[Advance Edit] to modify
object’s attributes
• As an example in the
attributes select bgcolor
to change the table’s
color. Use value to get
color, then click [OK]
Mistakes, Modification, and Redesign of Tables:
How do I delete a table, row, column, or cell?
•
You may create too many rows or columns, and want to delete some. This
is done in the following manner:
•
•
•
Click the Edit button in the Toolbar:
Undo maybe used right after creating the table to delete it and start again.
Otherwise, you can use the Delete Table sub-menu:
– Table -- Deletes the selected Table.
– Row -- Deletes the selected Row.
– Column --Deletes the selected Column.
– Cell -- Deletes the selected Cell.
The Select Table allows the selected Table to be modified
•
Examples
Examples of Row or Column Deletion
Place cursor in top row and click [Edit] /Delete
Table/Row
1
2
3
4
5
6
Place cursor in top row cell 1 and click [Edit] /Delete
Table/column
1
3
5
2
4
6
Result
2 5
3 6
Result
2
4
6
Spell Button
Spelling:
The Spelling button starts the spelling checker, as it does in most editors. When using it
on your own machine, it is often useful to teach it your special words, text, and
abbreviations
You should always check your spelling before placing a page on your website.
The Spell Checker Dialog Box
Linking materials
Link Button
Link:
Requires you to supply two items:


A text description of the site that the viewer will be transferred to
upon clicking the text.
The URL of the linked location.
The text you supply should be a meaningful description of what will
follow. If the material to be linked is a large file, likely to be slow to load,
then the viewer should be informed how large the file is and given an
estimate of the loading time.
The Link Properties Dialog
The URL can be an absolute URL, in
which case:
•Type it in the "Link to" window in the dialog box.
•Copy from the Netscape Location: window and
paste in the second window.
•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 "Link to"
window.
The URL can be a file in the current
system's directory, (i.e. a relative URL).
•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].
•After the link's text and URL are completed
and click [OK].
Linking to Special URLs
Linking to Special URLs including Mailto to setup
Email Links
•Review the material on special URLs such as: ftp, etc.
•The Mailto link is of major interest to most authors. Simply
fill in the text as in a general link in the second window:
Mailto:Author's_Email_Address
•Where Author's_Email_Address is your usual email
address, e.g. [email protected]
The style bar
(Formatting Bar)
Creating the look and feel of the
document.
Formatting Tool bar -- Style bar
• The style bar allows the author to create the html text containers,
i.e. physical, logical, and font.
• Lists – ordered and unordered
• Alignment
–
–
–
–
Left
Center
Right
Justified
• Tab right and left
Style
Changing the font
In the above row of icons that there is a drop down list for paragraph
formats, the color selector for text and backgrounds, the highlight color,
and [-a] button to decrease the font size, and [+a]: button to increase the
font size.
By clicking on the button with the small black triangle, a list of paragraph
format options will appear
The style:
First highlight the text that is placed in the style container. Click on the selector
arrow for the pull down menu of choices (see below). Click on the choice of
container. Click on the highlighted text.
Text and Background Color Selection
Color Selection:

The top square shows the current text color. Click on the square and select
the new text color.


The bottom square shows the background color. Click on the square and
select the new background color.
Selecting colors
The color of the text (click on the selected color)
The default color palette for the font will appear when the
user clicked on the top color square (the Text) or the lower square
(the background color). The Color selector will appear below. The
choice for more colors than those in the color table the user can try
using a color name like 'Navy" or using the RGB hex number. See
the HTML color section in the HTML Tag lesson
Highlighting
Background highlighter:
Highlight the desired text and click the [Highlight] button and select the
desired color.
Physical Text
Physical Appearance of the Text Buttons
Highlight the text, click one or more button choices (bold, italic, underline)
and click on highlighted text to apply.
The Bold button:
Click on the Bold Capital A to turn on -- click again to turn off.
The Italic button:
Click on the italic Capital A to turn on -- click again to turn off.
The Underline button:
Click on the underlined Capital A to turn on -- click again to turn off.
Lists
Simple lists breaks down into two main types:
– Unordered lists with each item denoted by a printer's bullet or
other symbol , or
– Ordered lists (those that use a number or letter)
Other list types that require the use of the Format button on the
tool bar are:
– Definition, and
– Dictionary
– Menu
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 [Format] 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.
Text Alignment
Text Alignment:
Tab out
Clicking on button causes the cursor to tab to the right.
Tab in
Clicking on button causes the cursor to tab to the left.
Unordered List
The Unordered List
To create an unordered (bullet) list:
Click on the
button to turn it on.
Enter each list item and end the item by [Enter]
Click the
button to it turn off.
This will tab out and start a new paragraph.
Ordered List
The Ordered List
To create an ordered (numbered) list:
1. Click on the
button to turn it on.
2. Enter each list item and end the item by [Enter]
3. Click the
button to turn it off.
4. This will tab out and start a new paragraph.
Align the text element
Align the text element
Click on the button; select one of the four buttons –
1. Left,
2. Center,
3. Right, and
4. Justify alignment.
FAQs
Q: How do I begin to use Nvu:
Ans: It is recommended that the reader start by
reading the Nvu Users Guide:
http://www.nvudev.org/guide/1.0PR/nvuug10.pd
f
Q: How do I open Nvu to begin editing?
Ans.: Click on Nvu icon on your desktop.
FAQs (more)
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 ...
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.
Q: How do I get the Nvu plugins?
Ans: The plugins and instructions for using them --
FAQs (more)
Q: How do I find out what plug-ins are available on my copy of Nvu?
Ans.: Click on the [Tools] menu.
Q: How do I stop the Link operator from "linking the text following the text that was
specified"?
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 [Format] and select "Remove Links".
Q; How do I insert tags not supported by the current Nvu editor?
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 [Insert]/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.
The <Embed></Embed> tag
• Use the <embed> tags when you need a plugin or
other helper that is not part of the browser original
programs.
• Basic attributes are:
– SRC=“URL_of_Media_file” can be sound or video,
etc.
– Controls to set volume, start, loop, etc.
Attributes for the Controls
Control Attribute
Value
Controls
True|False
Height
integer
Width
integer
Autostart
True|False
Loop
True|False
Adding Audio and Video
Use the [Insert]/HTML
• In the dialog box window insert
<embed src=“Insert File Location (URL) Here” >
Then your Text message </embed>
• Note the attributes should allow for a controller so
the user can correct volume, on/off etc.