1. 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 Biology Assistant Professor of Mathematics Assistant Professor of Biology Assistant Professor of Mathematics MACON STATE COLLEGE MACON STATE COLLEGE MACON STATE COLLEGE MACON STATE COLLEGE

2. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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.

3. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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

4. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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

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

6. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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

7. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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. Link Another File in Site General Webpage Email Address ImageOthers

8. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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.

9. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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.

10. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Organization Content Style Style Fonts, Spacing, Alignment, Colors Content Text, Images, Links, Tables Organization How many pages are needed, Types of pages, Navigation from page to page

11. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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..."

12. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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 Alignment In/Out- dent

13. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Built-in Style Elements in Nvu: Paragraph Format The paragraph pull-down menu allows you to change to different heading styles.

14. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Style of Website CSS Driven HTML Driven 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.

15. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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.

16. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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...

17. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Creating a Style Sheet To start using a style sheet, click on Tools and select CSS Editor. A dialog box should appear:

18. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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.

19. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk 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

20. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Creating a New Style 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.

21. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Creating a New Style 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.

22. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Creating a New Style 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"

23. Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Using Your Defined Styles To use a predefined style, select the text: and click on the pull-down menu that has "(no class)" in it, and select "important_text".