Download
1 / 17
E N D
This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be scared, it's easy to handle once you look around a bit. Along the top, we have your basic new, open, save buttons followed by a publish button (for putting your content on the web).
Down the line, you'll see the anchor tool which allows you to turn an item (text, image, etc.) into an anchor on the page so it can be linked to sections within the page (a great feature if you have a longer page and need to create links to jump around). You can insert links (within the page or to outside URLs) using the link tool. You can insert images using the image tool (from your computer or from an outside URL).
At the bottom of the page you can see three different view options. Design allows you to create your website strictly in the visual sense. You don't have to see any code if you don't want to! This is a great option for beginners. Split allows you to click on certain parts of your page (be it a line of text or an image, etc.) and see the code behind that item. This way you can make changes directly in the code or just check out how something is being translated into HTML. The source option allows you to see just the code for the webpage you're creating. Here you can add and edit your page using script languages. This option allows more advance users the flexibility they need.
Page Details and Settings If you want to edit what the page is called in the title bar and other details go to Format and then Page Properties. This would also be a great time to save your page. I would suggest saving it as the title you create for the page to make things easier.
Background If you're ready to get started actually making the page, you may want to manage the color scheme of your page. Start by going to the format tab where you can select Page Colors and Background.
Once you've done that, this menu will open. When you click on use custom colors, you can start to edit the page. You can also add an image as the background if you want.
As you can see here, I've edited the page settings. You can choose any color scheme you like, just make sure your viewers can see the text well enough to read it. Then when you click ok, you can see that the changes have been made. In the screenshot below I've selected the split view so I can see html and page settings that describe the background color and text settings.
Content Now that we've got a base page set up go ahead and insert, “Your name and Sample webpage” at the top. Now that we have our text in place lets make it bigger and use it as a header. To make the text bigger select the up arrow above the big “A” circled in the image to the left. Joe’s Sample Webpage
You can also adjust size, color, font etc. under the format tab shown here.
Layout For this example, I've chosen to make the basic layout using a giant table. I chose to go with a table in order to keep all of the content for the one page available right here. Go to the table drop down menu and click Insert Table. You can also see here that once we have created the table, we have lots of options to modify as we go.
Once you select table the menu shown to the right will appear. Go ahead and select the settings for your table- how many rows and columns you want. You can always edit this as you go and add/delete/merge rows/columns as you please.
This is the table I just created that is 3 rows by 5 columns. You may be wondering how this is going to turn into a layout for a webpage. But wait and see! Joe’s Sample Webpage Go ahead and go back to that table menu. You can do this by double clicking anywhere in your table and clicking the table tab. If you change your height and width from pixels to % of window you can make the table take up the entire page, thus transforming it from a small table seemingly for data into the structure of the page. Don't forget to click Apply before you exit the window!
Now, you can begin to edit the cells to create the layout you want. For example, I highlighted the top row of cells and then went to the Table drop down and clicked Join Selected Cells. Thus, I created a single heading bar to go across the whole page. I also went ahead and merged the last four columns in the third row. This created a main body space and left me a side bar on the left side to create some easy browsing links. Also the middle row will become a set links to jump to other pages in the site.
Now that we've got a basic understanding of how the page will be set up, we can go back and edit how much of the table each row/column will take up which will create the affect we're looking for. To do this double click anywhere in the table to bring up the table menu and enter the information that I have illustrated to the right. This will help begin to make our webpage look functional.
Links When you're ready to start linking to outside pages or to create multiple pages for your website, you can use the Link tool. If you create anchors, then you can link directly to them within your page for easy jumping. You can also link to outside pages by providing a URL here or to another html page you make in KompoZer. You can edit where the page opens using the target function.
Publish If you're ready to make your page available live on the web, you need to focus on the toolbar on the left hand side of the page. Here you can manage your pages easily right in KompoZer. When you click the publish a file page, you will have to set up the settings for your host site. The general settings include things like the website page. * At any time during the process you can check out how your page will look in a browser by going to the source view section and then clicking on the HTML icon at the top.
