Introduction to Nvu. How to create and edit web pages using this great opensource application. Learn web design.


More DIY videos at 5min.com

Video Transcription

Ok, today it is part two of our Content Creation series and we can be looking at building and editing web pages and in particular, we are going to be looking at using the Nvu open source HTML editing software. And if you have not done so already then you can download that form Nvudev.com it is available for Mac, for windows and for Linux so grab what ever flavor you need, install it onto your system and we will get started. And if you are not been following the rest of this series then you can get the rest of it over at the online business logic blog which is online-business-logic.com So, with out further ado, let us get started and to have a look at using Nvu. Okay, so this the main Nvu screen that you will see when you install the software. Most of it is fairly self explanatory. We have got tool bars at the top of screen and the regular menus. On the left hand side, it is the Nvu site manager. We can kind of close that today, that is more to do with looking at the very entire sites and connection to files where you are going to be looking at as a quick example today so we can go ahead and close that. So that will open up this main view window and to expand it across the screen and you can see that we have got tabs at the top and tabs at the bottom. Now, the tabs at the top of the window offer opening different pages and you can see we just got one open at a moment called untitled and at the bottom we have got four different views and these are four different views of the same page. Now, this is a blank page at the moment, I will send you what looks like a blank page, it was certainly a blank page to a user. If we click over here on the source view, you can see is actually a fair amount of HTML code in the background. So, to create an HTML page, you do actually need to have format of code even if the page is blank. But the great thing is we do not to worry about that because Nvu is going to take care all of that for us and we can just work in the normal view most of the time. So, let us go ahead and create some content that is -- type something up on the screen and it kind of what is actually as you would in word or open office or any word processing software. So, let us create some text and let us change the color. So, I go some red text looks nice and simple. Now, let us hop over to our source view, and you can see that it is added this font, font color and it closes the font tag at the end. So, you can see that this works as a real shortcut rough and have not to learn at least different tags. You can just work in the normal view over here nice and simple. Okay. And we can do other things, we can add a list in, we can then text to the headings and all this good stuff. Okay, and this on the source view, this is what is going on at the background and every time we make a change. It is going to update our source, okay. So, as I created a template file to work on for today, I am not going to save that, close that down. And you can open up this example file, you can download it from the online business logic blog. Okay, so it is just a simple squeeze page or sounds like a little bit cheesy but it gives us an idea of what to work on. If we click on the source tab then again you can see that it is actually quite a lot of stuff going on the background here but I have said already, you do not need to worry about any of that because we can work on the normal tab. So, if you want edit things on the page, it is simple as highlight on the text you want to change and making the changes just type in if want to change the color, we can change the color. If want to change the size, we can do that too. Okay. So it is pretty much self explanatory. Whatever you do in the normal view is going to be reflected in the code view as well. Okay, I should have actually explain that this preview view, this is pretty much what the end view will see in that browser. Ones you have got the web page online, the normal view also gives a smart information so the edges of these tables for example which makes easier for us to resize and that sort of thing. Okay, so text is pretty simple but very self explanatory and I have only shown you bullet points unless you can also do a number to this which looks pretty much the same and there we go instead of bullets are actually numbers for you. So, that is kind of gravy and then bit for the down, we actually got some boxes. These are HTML tables. And see we got a table, we look at in the preview and we got a table with a dash border and nest it inside that, we have got a table with a plain border. Now, we can resize this, so in the normal view, we click on the table that we want to change and we can use this control points in the corner of the boxes that to moving around, so that is kind of gravy. Now, we also got images here, okay. Now, a lot of people got confused with images and they do not kind of work as you might expect them to. If you are working on the word process document or PDF or something like that then the images is actually embedded within the document. HTML works a bit differently if we go over to our source, what you can see here is seal.gif is the image that you just saw in the screen and this image tag actually links to the image and tells the browser how to display on the screen. It does not actually import that, does not actually embed it. So, what you do is you create your images or you find your images you want on the page and save them into the same directory as here as your web page or to subdirectory called images or media or something like that. And let us just delete this one. I will show you how it works. So, if I want to put that if deletes that image, if I want to put that image in then we go to where in the page we want the image to go. And we click on this image box. Okay, and then we get image location. Now, we can link to an image that is all ready online but I am just going to choose this one it is on the computer. I am going to give it a title tab this alt title is quite important. So, I am going to call this the Guarantee and click OK. Okay and it is actually, it is putted in the page but I wanted it aligned onto the right hand sides. So, I am going to right click on the image and get a image properties, I like that you can see that, it is just at bottom of that menu, it is just off the screen. Okay, and I am going to click on appearance and see it is got align text to image, I am going to wrap to the left and there we go. We have got the image on the right hand side for the text wrap over to the left hand side. So, I want to suggest you do is just have a play around, that is that I do of the template was to give you a bit of everything, there is a bit of text list in tables, list an images just have a bit of apply and it does not really matter if you break it then very importantly down bottom of the page as a marking, You know how important is to have enough to inform and because you do not leave this to inform otherwise you will be helping to build my list and I am sure you are would not want that. Now, this is where you going to need to get your hands a little bit dirty with the HTML but I am trying to make it as easy as possible for you by adding some comments and so if you scroll down towards the bottom and you should see the first comment is just put on a new line. Comments are by default having green in Nvu and you are looking for this one here. So, anything that starts with this little tag bit of code and it is like this, is a comment and it is ignored by the browser. And what I have done is I have started, I have put this comment code at the beginning of the form and I also put a comment at the end of the form. So, all this is my up form and I likes it finish. There we go and it finishes here end of encode. So, what you do is you highlight that and let us just click delete, there we go and this is the point where you going to copy and paste your opt in code. So, you just going to web which we have all the time is upon using create your opt-in in form and copy and paste it into here and there we go but we will be done in the bottom. So, there we go and plus an introduction to HTML and