 |
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
Instructions: Page 9
Using Nvu to Edit the ePortfolio Template
Once you have downloaded Nvu, you can go ahead and open one of the template files and begin modifying the content:
- Go ahead and open up Nvu.
- Click the Edit Sites button
- A new box will pop up, fill in the Site Name field.
- The Web Site Information box can be left BLANK.
- Under Publishing Server click Select Directory.
- Select the file that you named ePortfolio on your desktop earlier when downloading the template. Make sure that the folder field says ePortfolio
- Click OK. Now you should be back at the Publish Settings window again, just click OK and we're ready to go.
- On the left hand side of Nvu, notice that all the files that belong to your ePortfolio site are now listed in the Nvu Site Manager.
From here, you can open all the files from your ePortfolio directly into the main editing window of Nvu. The Nvu Site Manager is great for keeping track of all your files (it can get messy!). To open up the file that you want to add content to, simply double click on it in the Nvu Site Manager.
Please double click on index.html in the Site Manager, this should load the main page of the ePortfolio template in Nvu. The page should be divided into 2 main screens. The section on the left side of the page are where you can browse for and open your html files. The right side of the screen contains the html source code for the current page.
Take a look at the bottom of the html code section; you should see 4 tabs called Normal, HTML Tags, Source, and Preview.
By default, the Normal view is selected. This means that what you see in this window is what you will get in your final product. This is known as a “What you see is what you get” (WYSIWYG) editing window. WYSIWYG editors are great for beginners who are not comfortable dealing with HTML code.
The other tabs bring other views of your web page up. HTML Tags will show you a different type of WYSIWYG window. It will show the layout of the items on your ePortfolio and also what type of code is containing it. It’s good for coders and designers when they want to have more information available to them while previewing a page.
The Source tab is a simple code editor that displays the HTML coding used in your ePortfolio. Nothing too fancy, however, more advanced users will probably spend most of their time in this view.
The final tab is a Preview tab. It does exactly what you would expect it to do, allow you to preview what you ePortfolio will look like without using a web browser. However, do note that the Nvu Preview tab is not always an exact representation of what your ePortfolio will look like online. The only way to see what it will look like online is to preview the file in a browser.
Unless you are comfortable editing html code yourself (in which case you probably do not need this guide), you should stick to one of the WYSIWYG modes in Nvu. The ePortfolio templates are made so that you may simply fill in your own personal information without having to code HTML!
So, lets click on the Normal tab to open up a WYSIWYG mode that will allow you to quickly and easily change the content of your ePortfolio:
The page will now load in a design format where you can simply select text to modify it. Since this is a template, all of the menu items are already set up to go to their own pages (please do NOT try to modify or add menu items!), so all that you have to do is add your name at the top of the page and enter your own information and picture in the content section of the page. To add your own words and content:- Highlight the template text, delete it, and type in your own information.
- If you ever make a mistake and don't know how to fix it, go to the Edit menu and select Undo.
These are just the basics of how you will go about editing your ePortfolio. We'll get into more detail in a little bit.
WARNING!
DO NOT try and edit ANY of the style information on your ePortfolio! Do not try to change the font, size, colour, background, or design of the template or the writing in any way. This template was created using a Style Sheet, and thus any style information that you try to include my cause problems with the programming. Rest assured that you WILL get a chance to change the style information on your ePortfolio, but for now all that you need to do is enter the content information into the template.
 |
Page | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |  |
 |