Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Dr. Dawn Sherry Dr. Barry J. Monk Assistant Professor of

Nvu - How to Create Your Own Website From Start to Finish! Dr. Dawn Sherry & Dr. Barry J. Monk

Dr. Dawn SherryDr. Dawn Sherry Dr. Barry J. MonkDr. Barry J. Monk

Assistant Professor of BiologyAssistant Professor of Biology Assistant Professor of Mathematics Assistant Professor of Mathematics

MACON STATE COLLEGEMACON STATE COLLEGE MACON STATE COLLEGE MACON STATE COLLEGE


What is Nvu?

Nvu is an Open Source Web editing application that allows WYSIWYG (What You See Is What You Get) editing and creation of web pages.

Nvu can be downloaded for free at http://nvu.com.


The Anatomy of a Website

At the most basic level, a website is nothing more than a collection of files and folders.

It is a good practice to put some thought into the organization of your website before beginning.

the index.html file is the default "starting page"

folders help keep the site organized


Setting up Webspace

You can manage your sites and edit your publish settings through the Site Manager

The Publishing address can be a folder on your hard drive or an FTP folder that publishes directly to the web


Adding Text


Adding Images

Before adding an image, it is necessary to place the image file in the site directory. To add an image, click the "Image" button to bring up the Image Properties dialog box.

Click "Choose File" to select the file from the hard drive

Enter alternate text for pictures for ADA compliance


Creating Links

Links tie together content from different sources. A

link can be to another file in your site, a general webpage from the Internet, an image,

an email address, or just about anything else.

Another File in

Site

General Webpage

EmailAddress

Image

Others

Link


Creating Links

To create a link, highlight the text that contains the link and click the "Link" button.

Either choose a file in your site to link to or type an Internet address.


Creating a Table

To create a table click "Insert" on the menu toolbar and then select "Table"

You can then highlight the number of cells you want.


Organization ♦ Content ♦ Style

OrganizationHow many pages are needed, Types of pages,

Navigation from page to page

ContentText, Images, Links, Tables

Style Fonts, Spacing,

Alignment, Colors


Built-in Style Elements in Nvu: Page Color & Backgrounds

You can change the page color and background by clicking "Format" on the menu toolbar and selecting "Page Colors and Background..."


Built-in Style Elements in Nvu: Text Toolbar

The text toolbar allows you to select text and assign certain properties to it.

Text Color

Text Highlight

Smaller Text

Bigger Text

Bold, Italicize

Underline

Numbered or

Bulleted List

AlignmentIn/Out-

dent


Built-in Style Elements in Nvu: Paragraph Format

The paragraph pull-down menu allows you to change to different heading styles.


HTML Driven

CSS Driven

Style ofWebsite

Two Different Style Philosophies

Each formatted element must be given an appropriate tag.

Whole parts of each page are labeled and styles are applied

to those labels.


CSS – Cascading Style Sheets

A cascading style sheet is a way of centralizing all style information for a website. It allows you to define a particular style so that different styles can be assigned to different parts of the website.


Creating a Style Sheet and a New Style

The next few slides will take you through the procedure for creating a style sheet and defining a new style called “important_text”. This style will make text . . .


Creating a Style Sheet

To start using a style sheet, click on “Tools” and select “CSS Editor”.

A dialog box

should appear:


Creating a Style Sheet

Click on “Style elt.”

and on the right you should see:

“Title” is the name of the style sheet. You can have as many style sheets as you want – each corresponding

to a different look for your website.


Creating a New Style

Type a name for your style sheet and click on “Create Stylesheet”.

You are now ready to define a style that goes in your style sheet.

You do this by clicking on “Rule”



Click "named style" and then enter the name "Important Text".

Once you're done, click "Create Style rule". Your style should then appear under "internal stylesheet" in the left panel.



The only thing left to do to create the important_text style is to set the options. Click on important_text in the left panel and then the "Text" tab to set the text options.



For our style, let's select the predefined Ariel, Helvetica, sans-serif Font Family, red as the Color, Bold as the font weight, and Overline and Underline as the Text decorations. When you are done, click "Close"


Using Your Defined StylesTo use a predefined style, select the text:

and click on the pull-down menu that has "(no class)" in it, and select "important_text".

Documents

Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Dr. Dawn Sherry Dr. Barry J. Monk Assistant Professor of