komposer tutorial This is a topic that many people are looking for. highlandclearances.info is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, highlandclearances.info would like to introduce to you Part 1 – How to Make a Website Using Kompozer or NVU. Following along are instructions in the video below:
“Today i m going to show you how to make a website or portfolio using using composer you can get composer from composer dotnet and it is a free download s great about composer is it s what you see is what you get so. If you don t have composer you get a download otherwise. If you have a go to programs. And it should be inside their composer spell.
The cape kind of funny. But if you want to google that s how you spell it composer dotnet alright. So how is this different or how does this work compared to just using notepad. So for example.
If i say hello. World and i you know choose red or something like that hit ok. I can go to the source code here. And it shows me what it did it already put in all the html tags that i need it s just so much quicker.
If you understand i d use the program. So much quicker than just typing in html all right so what i want to show you to do today is how to make again a website a simple website or a portfolio. So the first thing. I m gonna do is well let me say first if you want to make more complicated and you really and know what you re doing you re probably gonna use css to make your webpage.
But this is just a simple so we re gonna use tables to format. Ours so the first thing. I m gonna do is well before i even get into that here s what you should do create a folder just right click on your desktop or if you re one of my students do it on your h drive. But right click new and folder and inside and go ahead and call that folder website.
We re gonna put everything inside of there okay so do that first alright so the next thing that you need to do is i m gonna go to a table. Insert table. And what is a table exactly well let me get one in there first. I m going to school one by one table.
It s not really a table. It s just kind of a cell. Then what this allows me to do is i can put things inside of this table and i can format it so it kind of sticks with it so for example let s say i want to enter down a few times here and i m going to insert another table and in this table. I m gonna go for wide and hit ok.
Now see if i put something in these tables. It s going. It s going to make sure it stays on the page a certain way ok so for example i m gonna have my name up here i m gonna call myself john smith really original and let s say i have what i m wanting these i m gonna have personal information..
All right click next box awards and see how it s moving it s trying to adjust for me automatically and i ll show you how to fix that a second honours and interests and you may have something else. This website. Maybe all the like products and whatever else academic information and lastly sample student work all right there we go so these would be like my buttons on the page. But already like i want to be able to see the background.
I want to format this table the way i want to look and you again. If you were to look at my source code. See how much coding. It s already put in there for me.
It s great okay so um. Let s say i want these buttons all to be the same size. Okay. So what i can do is i can right click table cell properties and inside this cell.
You can see i m on the cells tab. I m gonna change the width to 25 not pixels but percent of table and i hit apply and i d be nice. If i could do all three of these at once maybe. I can let s see.
If that works right click table cell properties. 25 change the percent of table. Apply. And there we go i don t think it really worked.
I think it only worked on one of them this one s 385. It s much too large still so let me adjust these table cell properties. Yeah. I didn t do it for the rest of these 25.
Percent of table and right click table cell properties. 25 loop. 25. Percent of table apply there we go so they re all even now right.
And i don t really like what they re at they re not centered up right so i can just highlight them and hit center and i ll center them up. Which is great the other thing that i want to do is you see this tables. It s taking up the whole screen..
And that s probably okay a lot of times. But let s it make a little different. I m gonna again right click table cell properties. You re gonna go that all the time and for this one.
I m gonna go up to table all right and i m gonna do center. All right and let s only do let s make let s have the table. Only be 80 of the window hit apply and then okay and you can see it s kind of squished to everything a little bit so if i hit saved now what it s gonna ask me is it wants to title the page. The title of the page is what the internet explorer firefox or google chrome.
You know web browsers. What what s gonna be at the top of the page. It s not necessarily the file name and i ll get to that in a little bit so i m gonna call this one sample student work and i m gonna hit ok. Now that only saved the title that s not actually the name of the file.
So i m just gonna call this one sample all right sample. And where you want to say that is you want to save the in your website folder mine s already there mine s on your desktop website. If you re my student. Please send an h drive.
Create a folder called website and save it under there just leave it as one name all right don t don t have spaces. And you can have it long as i phone. It s temple work i could do that but don t put a space. And it kind of screws things up later for some of the things we want to do so then i hit save okay.
So let s say that what if this done so. If you if you launch firefox. You can go to file open file. And i have my folder here website.
And i have some stuff in it. But here s my sample page. So i m gonna open that up all right and there it is so i can hit control and i can zoom in and out and see how it automatically even though i m assuming it now my buttons and my words move around. But these these are always taking up 25 and the the background or the this page is always staying at 80.
So on some computers. It might look like this because the resolution is different and on some computers. I might like like this because their resolution is different than yours so that s why that s the advantage using percent over pixel all right all right back to this alright so um..
It s okay now. But what i want to do is i want to put in some more information under my name. And in fact. I want a picture as well well let me get let me show you a couple other things quick just so you understand the wait tables works is you have tables inside up tables.
Because we have this one cell table and we have this force. I ll take over here let s say you wanted your you wanted your table to have your buttons on the left and your content on your right so the way i would do that is that insert table they have to wide all right and on this part of the table. I would insert also or buttons. One tall c.
So my content could be over here and i can just go up here to the top. I want i can just adjust this like that so i can have my buttons in here instead and then have my content in here and then i could just get rid of this table. If you want to get rid of a table just hit the little x. I don t get rid of it if you want to undo it control z and it comes back alright so i just want you to understand that s one way to format.
It and if i want to see those changes you know i could pull. It. Blah blah blah. Image do these.
And blah blah blah. Here. And in composer merit. If i if i and if i save this now launch firefox and refresh it would show those changes and again.
It keeps nice formatted for me so for us though i m just gonna leave the buttons at the top you can use you can do any way you want if you would like just ex. This off if you don t want it get those little x s and gets rid of it okay. Let s put a picture in now. Here s one thing.
I ll show you if i just like let s say i want my picture over here on the right side so i m going to insert picture or image. And i m gonna open image location. I m gonna choose a file and right now it wants to look inside of here and right now. I have my html file in here right i just want to do though.
I m gonna i m gonna do new folder. And i m gonna have a called images and i m gonna put all of my things inside of this images folder. So please just drag them into..
There. If you already have them in there that d be great and so so i m gonna want to images now and here s a picture of a man this isn t me it s just somebody i found online and i m gonna hit ok and what it needs right now is sorry i was just interrupted anyways. If you look it says images slash man jpeg and if we look at our folder. So the way that works is if i have this man jpeg in the images folder.
It ll look here. Where it s at and here s my man so that works now if you had that image image on let s say a different part your computer this it would have to say like you know see my document images man jpeg if you ever move it or rename. It it s not gonna work. So please make that website folder and the images folder can put everything inside.
The images folder. Except for the html files. Okay just to keep it all organized all right back to this so next thing. I do is put in alternate text.
So i ll say you know picture of me even though it s not and i ll hit okay all right now right now. It s huge right and then i can just resize it right here or i could have resized it earlier too and let s make it that s nice and small let s say. Okay. Oh yeah.
I want this to the right side of the picture. I want my name on the left if i go right it puts it all to the right right it kind of sits. It s not really really want we want to keep these separate. And there s really no good way of doing it um that ll work right so instead of doing it that way what i m gonna say is i would like you to do it this way i m gonna go insert table and go just too wide and i could just drag that picture into here and my name i think i can just cut it out and paste it in here like that and i d only need this space up here at the top all right so that s better now we don t really want this wide.
I m gonna just squish it over the right here or again. I could set it a certain percent of the window size you want a little bigger than that it s kind of up to you and i could stretch this out a little bigger all right there we go and then john smith. Now the the names like right here in the middle of the page kind of weird again if it s estimating it with what it looks like right click table cell properties and if i look inside the cell. It has vertical align right here they have alignment for the cell and for the table so i m gonna sell though i m gonna go vertical top horizontal on the left yes apply that looks pretty good see i have it up here.
And since this is kind of like this what page is all about me so i m gonna up the size. We re here this gets larger and smaller font right here so i m gonna make it pretty large all right and then maybe i would put under there my personal information. If this is like portfolio for whatever else okay so i m going to fill my information with a positive you can do all right so i got my information in so i m just gonna highlight the details and i m gonna make that smaller just by pressing the smaller a and it ll go in like that and we ll fix this issue in the next video. So this is video one and go on to ” .
Thank you for watching all the articles on the topic Part 1 – How to Make a Website Using Kompozer or NVU. All shares of highlandclearances.info are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.