MyWebs and Nvu
Faculty and Staff..... Design and create your own website to compliment teaching and learning. Expand your skill set working with html and the web. Provide additional information about yourself and achievements.
ollow the text directions below:
Now you'll need to set up Nvu to talk to your web host. This
will allow Nvu to send and receive the web pages you're going to
be making to and from your mywebs folder.
It's actually a rather simple process. As always you can watch the tutorial or follow the directions below:
1) Make sure you have Nvu up and running.
2) Go to Edit, then click on Publishing Site Settings.
2) Click on New Site.
3) Enter your information in the new settings window as shown in this example:
Site Name : What ever you want your site to be called
HTTP address of your home page : this is your domain name (always include the http:// part).
Publishing address: For most web hosts (like Optimal) you will simply enter - ftp://www.yourdomainname.com.
User name: This is the username you created when you set up your website within your webhosting company. A copy of it should have been sent to you via email, in case you forgot.
Password: This is the password for the username of your webhosting company.
Checkmark Save Password.
4) Hit Ok
5) Test your publishing site setting by enter some text anywhere in on the screen.
6) Click on File. Then click on Save as
4) If it asks you to enter a title, just type in 'testing'.
5) Then Save it to your c:\mywebs folder you created earlier in the setup procedure and name it - test
6) Now hit the Publish Button in Nvu. You'll get this dialog box. Hit Publish again...
You should see this box...
7) If it says publishing complete and closes the box, then your ftp settings are correct.
If it's not publishing or can't find the server. Then there might be 2 reasons why.
a) it might take 24 - 48 hours for your web host to set up your account and make it available for you to use with Nvu.
b) Your ftp settings, user name or password are incorrect. Check you email from your webhost and confirm this information.
Occasionally some web hosting companies, like Yahoo!, require you to enter ftp://ftp.yourdomainname.com, instead of just ftp.yourdomainname.com. Try that to see.
If you are using Optimal Web Hosting then, you just enter ftp.yourdomainname.com.
If you still can't get it to work, then call the tech support for web hosting provider and they will help walk you through it.
8) Ok, test to see that it upload correctly. Type in the name of your domain name in your web browser (Internet Explorer, FireFox, etc). For our example, we would type in www.mypokerinsights.com/test.html
9) If you see the text you wrote, then you're ready to start designing your website!!
10) It's a good idea to be organized. Return to your desktop and create a new folder (right click, then choose new folder). Name it whatever you want your site to be called and make sure you put all the files for your site in that folder.
Before jumping and designing your web site with Nvu, it's often worthwhile to think about how you want the website to be designed.
Some considerations are:
I typically start off with a blank piece of paper and sktech out the basic design - how many columns 1, 2, 3 and the overall design, colors, text, etc..
The most common layouts are having the navigation at the top or on the left hand side (as shown here).
One reason you generally don't see links on the right side is because different people use different browsers and the size of the screens vary, and some people have to scroll over to the right to see the links, which isn't all that functional.
Typically the navigation is just simple text or a graphic rollover image. (you'll also see flash, but that's a whole different story...and coming soon!)
For the free lessons we are just doing simple text links. They are just as good as graphic links, and probably better for a couple other reasons. But certainly not style wise.
Anyway, that's the basic layout. Header at the top, navigation on the left and then main content area in the middle. This is the most common layout on the web. And the one we're going to use for our tutorials.
After getting your feet wet, you can design your site however you like and maybe even break away from the norm...
There are a couple ways to design the layout of your web page. The quickest and easiest way to start off with is using tables. There are others ways, like not using tables at all, like with the ever increasingly popular CSS, another way is just having a Flash site, etc.
To make it easy and keep it simple, we'll start off with using tables to help us design the layout of our website. This is a very common practice and probably most of the sites out there do use tables for their layout.
Once we have the tables setup, then we can simply just add the header, navigation and content very easily.
As always, you can watch the tutorial or you can follow along below:
1) Open Nvu, if it isn't already.
2) In reviewing our site layout sketch we did, we want to layout our website based on the sketch.
So we are going to use a couple tables to achieve this layout. It's a good idea to use at least two tables for your site. One for your header, and the other for the rest of your site. That way you can modify your header information with effecting the rest of your site.
3) In Nvu, click on the table button or table option in the menu and select a table 1 row by 1 column.
4) Next select how many rows and columns. In our example above, for our first table which will contain the header, we just want one row by one column. After selecting just 1 x 1, then hit ok.
5) You'll get something that looks like this...
Select inside the newly created table, and right click to get a menu of options. Click Table Cell Properties...
6) This gives you a whole new menu....now click on the Table Tab as shown below
7) This brings up the table properties menu...where you see the height, set that to 90 and then click on the blue down arrow and set that to pixels.
For the width, make it 100, then select the blue down arrow and select % of window..
Also go ahead and make the borders, spacing, padding all set to 0 (zero).
8) Next change the background color by selecting the box next to it, and select a green color, by moving the mouse over a green color and click it, then click OK.
9) Now go back and look at your screen. You will something that now looks like this....Congratulations, you've inserted your first table.
There are some other useful ways Nvu allows you to change tables and the way they are setup. Watch the More about tables in Nvu Video or follow along below:
1) Select inside any cell with the table (just click in the middle of the cell)
2) You can change the properties within a cell by right clicking while your mouse is inside the cell you want to modify. If you want to modify the whole table, then you click on the table tab.
3) You can change the alignment of text in the cell, by changing the horizontal and vertical content alignment.
Vertical is top, middle or bottom of the cell. Horizontal is left, center, right or flush of the cell.
These are very useful and will help format your website to make it look better and more professional.
4) By Clicking on the Table Tab, you can now change the cell padding, cell spacing and borders for the entire table.
To change the Cell Padding (which gives more cushion between the text and the edge of cell, which often times make the text easier to read), you simply add a number to increase the padding. I generally use between 4 and 10 for padding.
For Cell Spacing, enter any number. This puts space between cells. I don't often use this feature, but can be helpful from time to time with design issues.
The Border of the table, puts a line around the table (and each cell). Depending on the design, I will use borders from time to time. But most of the time I don't. They are helpful in defining the edge of the table though.
Ok, that's it for tables...for now....on to formatting the text.
Formatting your text is fairly simple when using Nvu. You can either watch the Formatting Text with Nvu video or follow along below:
1) For all the text, you can use the text bar in Nvu. To make text a different color, highlight the text you want to change color (left click the mouse, hold and drag to highlight). Then click on the foreground text color (black box in example below)...
Choose the desired color. The colors in the box on the right are considered web safe colors. These colors are thought to be displayed correctly on all browsers.
2) To change the size of a font, highlight the text you want to change and click on the a or the A as shown below.
3) To make the text Bold, Italic or Underlined, click on either the B, I or U
4) To add bullets or numeric indentation, click on either of those two options. Make sure you have the text highlighted. You will need to hit 'enter' on your keyboard after each new line that want a bullet to appear.
5) To change the alignment of text (left, center, or right), highlight the text and click the appropriate settings.
6) To indent, or outdent text, place your cursor at the beginning of the row you want to indent or outdent and then hit either option as shown below...
7) To change the font you are using, click on the variable width blue down arrow option and select the font from the list. To select text already used in a different font, highlight text and then repeat above.
8) And to check your spelling, hit the abc-spell button.
You can also use the Format option from the menu bar at the top of the screen.
Play around with formatting the text and you'll find out, there's a lot you can do and in different combinations.
When we finish our CSS tutorial, you can learn more about controlling text and making it eaiser to format.
In the meantime, let's go onto Linking and Navigation...
Navigation is how you get from page to another. Whether it's on your site or a clicking to another person's site. Creating text links and image links is how you build your navigation menu in Nvu.
It is extremely important to remember that you're home page will ALWAYS start with index. It will either be index.htm , or index.html, or index.php, or index.asp. But it will be begin with index. So when linking to your home page, it should always link to the index file in your directory.
You can either watch the video from above or follow along below:
1) To create a text link, highlight the text you where you want to create a link and click on the link button.
2) Then enter the following into the box that pops up...
Enter in the blank white space in the Link Properties Box, the name of the website or web page you want to link to..
If you wanted to link to your home page, for example, there are two ways you can do this...
One is called a absolute link, an example is http://www.yourwebsite.com/index.html.
The other is called a relative link. And that's done by simply entering index.html. This will take them to the index.html for which ever web site they are on that moment.
If you want to link to another website, you will always need to include the http://www.otherwebsitedomainname.com. You must enter the entire web address, including the http:// to link to another website from your own.
By the way, you can link to all sorts of things besides pages, you can link to images, sounds, flash files, email, etc.
3) Also if you want to your link to open in a new window (rather than replacing the page your visitor is looking at, this opens a new window with your site remaining in the background).
You can just click the Open in a New Window underneath the more properties button.
4) You can also link from images...we'll cover that in the next tutorial!
Images, or graphic images, are simply picture that you can put in your website. You can either watch the tutorial video or follow along below:
1) To insert an image in Nvu, click the Image icon at the top:
2) A dialog box pops up that looks like this...
3) Choose File option, then pick the image you want to insert from your pictures. And I would always make sure that image is also in your website folder that created on your desktop. That way it will be uploaded correctly when you publish the site.
After choosing the file, you'll see a preview of the image. In this case, an arrow I created.
4) Next enter the alternate text. This is description of the image. You can also opt out of using the alt text. It's a good idea to include the alt text, for numerous reasons. Accessibility, search engines,etc.
5) Hit Ok and it places the image in the Nvu editor.
6) You can resize the image, but using the handles and click and dragging the image to resize. To return back to original size, right click on the image and click on image properites, then click on dimensions and click on actual size.
7) To make the image a link, right click the image, then left click image properties, then left click Linking and enter the appropriate linking information (as given in the last tutorial).
8) To add a border to the image, click on Appearance in the image properties and type in a number, 1 is thin, 10 is very thick. To remove the border, use zero or delete the field altogether.
Ok, so that's general idea of how to begin to build a site with Nvu. Next we'll go over how to organize and save your files and then publish them to the web.
Ok, last but certainly not least, is how to save and publish your web pages. It's a good idea to be organized from the start.
So what we're going to cover in this video is a quick way of putting it all together and then saving your work and publishing it to the web for the world to see.
Here are some of things we cover in the video:
1) When you first begin a web site project, create a folder on your desktop and name it the same name as your website. Then make sure to add and save ALL of your website files and pages made in Nvu as well as all the images made with your graphics editor (i.e., GIMP)
This will help keep you organized for future changes. We're going to call this folder - your working folder.
2) After working on a page, simply save the page. Make sure that the page is saved to your working folder.
3) If you want to publish that page to the web, then hit Publish. If it gives you the option to insert a page title, then enter an appropriate title for the page and hit publish or ok.
If it's not letting you publish, make sure your FTP information is right and that have waited a good 24 hours after you purchased your web hosting. If you need help, call the web host tech support.
4) Go back and highlight ALL the content (just the text in the white part of the table in the example we created).
After highlighting ALL the text in the white cell, then hit 'Delete' on your keyboard.
And enter new information to create a another new page. This keeps all the formatting from the last page and allows you to create a new page. Do not save it just yet though. Follow step 5 and 6 first.
5) Click on Format > Page Properties & Title. Then enter an appropriate title for this new page.
6) Then click File > Save As. Make sure to choose - Save As. Enter a new different name for this file and save. This saves the new web page as a different file.
7) Repeat this process (steps 4 - 6) for all the web pages you want to create. Also make sure you have created a Home page and saved it as index.html
8) Now, go to your home page (index.html) and in the blue column (blue cell), enter the page names and link each text name to the right web page. This will be your navigation to each page.
9) Highlight and copy & paste that navigation to each of the rest of the pages. You can move between pages by clicking on the tabs for each page.
10) Goto and Save, then Publish each individual page.
11) Open a browser and test your website to see how it looks and functions. If you're following this example, you should have something that looks like:
12) Congratulations! You just built your first web site!!!!