Sevenseek Tutorials Blog

(The Nvu Web Authoring Program is available FREE at Nvu.com. I’ve written this Nvu tutorial so newbies to HTML can understand and immediately use Nvu productively, and also included some discussion for advanced webmasters who wish to take more control of HTML and CSS coding)

At left, an HTML template from PickleZONE.com has been opened in NVU. On the left, the “Site Manager” window is open, and in the large window at right, the Website is editable in a WYSIWYG editing mode called “Normal”. Table cells are outlined in red in this mode.

What We’ll Learn in this Nvu Tutorial…

We’ll get a brief overview of Nvu, then see how to use it to modify an HTML template. We’ll see how to edit HTML, change colors, and edit a table .

Overview… What is Nvu?

Nvu (pronounced N-view, for a “new view”) is a free, open-source Web Authoring system that requires little knowledge of HTML to get going on your next website. Developed by Linspire Inc., we like it because no matter what level of skill you have, you can use it to modify website templates, or build websites from scratch.

There are four working modes in NVU — “Normal” where you can simply type and insert images like you might in a word processing program (no HTML knowledge required; “HTML Tags,” a mode that displays where each important HTML tag is on your web page so you can right-click (control-click on a Mac) them and make changes; “Source” Mode where you can work directly on HTML code; and “Preview” where you see how your pages will look in a web browser.

You activate a working mode by clicking one of four buttons at the bottom of your screen.

Above modes are accessed by clicking a mode button at the bottom of your working window.

Site Manager with FTP: There is a built in “Site Manager” (shown above) that can deal with sites on your local Hard Disk, or on a remote web server. Open it under VIEW:SHOW/HIDE), and it appears at left of the main window.

Site Manager lists all the sites you enter (“Edit Sites”), then you can open a site (click on grey arrow to left of its name), and double-click on an HTML file to load it into Nvu for editing.

To open and manage a site on your local drive, click “Edit Sites” to open the “Publishing Sites” window (above), then click “Select Directory,” and locate the folder that holds your website. For remote sites, enter the http address of the home page, your ftp connection address, user name, and password. Sites appear in the site list window of Site Manager.

TIP: If you maintain a website with duplicate files on your hard disk, and online on a webserver, name one “local”, and the other “ONLINE”.

There area lot of Web Editing programs out there, so why do we like NVU? Three reasons: it’s totally free (no 30-day trials, or advanced upgrades), it’s comprehensive — you can build HTML web pages, edit CSS style sheets (we’ll show you how in a companion tutorial), and manage entire sites (FTP upload function built in). And Nvu has a strong and committed developer community working on new versions and extensions. Plus, it’s available for Mac, Windows, and Linux — perfect for work groups that use different operating systems.

If you haven’t tried it yet, go ahead and download it now — it’s free. Next we’ll look at how we can use Nvu to modify an HTML web template.

Changing the Background color of a Table Cell in a Web Template

Making a color change to a table or a cell in a table is easy in Nvu.

First, we open a website template (below) in Nvu, and switch to HTML tags mode.

Above, an HTML template is open, and we’ve clicked on the “HTML Tags” button at the bottom of the screen. This mode shows yellow tags beside each corresponding HTML element. Because of the yellow tags, the page does not display correctly — in this case, the graphics look broken up, but will appear correctly in preview mode, or in a browser. We switched to this mode so we could easily locate tables and cells for modification. The Site Manager window is open at left (optional).

To make the change in color in a table cell,you right-click (Control-click on a Mac) on the tag you wish to change(in this case the TD tag for the main text area), and use “Advanced Properties” to set the background color. That’s how easy it is.

Above the process is shown that results in changing the background color of the table cell which contains the main text area. 1 – right-click on the yellow tag for the TD (Table Data cell) you wish to change. 2 – on the pop-up menu that appears, select “Table Cell Properties.” 3 -in the next dialog box that appears, click the button next to”Background.” 4 – Use the color picker to choose the color you want, then click OK to see the background color in the cell. Check your work in Preview Mode to see how it will look in a browser.

Two Ways to Change the Color of a Headline (H1)

Next we’ll look at a couple of ways to change the color of a headline in an H1 HTML tag. At PickleZONE.com, we have members who are making the cross-over to CSS mark-up, so we’ll look at a way that allows you to enter CSS properties and attributes for a tag. While we do recommend that designers learn what CSS can do, don’t worry if the last sentence didn’t make sense. There’s an easier way to change a headline color using Nvu, of course.

Let’s start with the easiest way, then compare it to the CSS attributes method.

Format Menu Text Color Change: This method will be familiar to anyone who has used Office software. You simply highlight (mark) the text you wish to change, then choose “Text Color…” on the Format Menu, and pick a color.

Above, the Format Menu Text Color change method is shown. Note that both the Headline, had changed color, and also a sentence in the text, using this method — you highlight the text you want changed, choose “Text Color…” from the Format menu, then pick a new color in the Color Picker box and click on OK. That’s it.For those of you with a command of HTML and CSS code(we recommend this to all web developers and designers, and we’ve provided some favorite learning resources at the end of this article), let’s take a look at the source code that Nvu creates when you use this method:Above, we’ve highlighted the two “inline style” CSS mark-ups used to change the H1 headline (top), and the line of text in a paragraph (bottom). In the headline, the color coding is added right into the H1 tag, while for the text color change Nvu creates a 3-part CSS tag with a Selector (span), Property (color), and Value (rgb 153,0,0). In both cases, the program specifies the colors using the CSS”RGB triple” color designation system, which you may have seen used in programs like Photoshop.Ok. That’s the easy way, and you don’t even have to pay attention to the coding until you need it. But what if you want to take more control of how the colors get coded, using perhaps the Hexidecimal method (where a Dark Red would be coded as#8B0000) or you like to use Color Names, like “Teal,” or “Dark Red”? That’s what we look at next.

NOTE: When you change the color of a Heading with an “Inline Style” as we did above, it only changes the one headline you marked. Other H1 headlines you use on your page will either appear in the default color (Black), or the styled color contained in an internal style sheet (in the Head section of your HTMLcode), or in an external style sheet to which your page may be linked. If you want to change all H1 headlines to a particular color it is more efficient to use an Internal Style sheet, or External Style sheet to control and change H1 color for all the headlines so coded on a page, or throughout a website — a major advantage to learning CSS.

Tag Property Method Color Changes: This method is similar to the way you learned to change the color for a table cell above. You switch to HTML Tags mode, right-click (Control-click on a Mac) on the tag you wish to change (we’ll modify the H1 tag). A pop-up menu appears, and you select “Advanced Properties”. Choose the “Inline Style” tab in the dialog box that appears(shown below), and type “color” in the “Property:” field, then either”darkred” (Color Name color designation method), or “#8B0000″(Hexidecimal color designation method) in the “Value” field. Let’s look at an illustration for this, and see what Nvu does in the Source code when you use these color designation methods: First you right-click on the H1 yellow tag in HTML Tags mode (circled). Then choose Advanced Properties on the Pop-up menu. In the dialog box that appears click on the “Inline Style”tab (circled at top), then type “color” in the Property field, and a Hexidecimal code in the Value field (both circled). This method works well if you are used to thinking in Hexidecimal numbers for color designation, alternately, you may also type in a color name (like “darkred”) in the Value field.Now what does Nvu do in the Source code when you use this method? In our test, Nvu prefers RGB Triple values method, replacing the Hexidecimal value we typed in with the corresponding RGB values:Nvu translated the Hexidecimal value we entered (#8B0000) to the correct corresponding RGB triple values. But when we entered”darkred”, in the Value field, it left it set with that designation in the Source code.So, Nvu tolerates Color Names, but prefers RGB triples over Hexidecimal. This also seems to be the method of choice for advanced CSS coders, though there a great number of designers who like to use the Hexidecimal color designation method. This could be fixed in the next version of Nvu (currently release version 1.0), and you can stay tuned, get help, and see more Nvu tutorials at the Nvu user forum for questions, answers, and updates at: forum.nvudev.org.  By Scott Frangos