Common website design involves creation of static HTML content, FTP uploading, and a far bit of technical work to maintain your web content. Solving this issue with Comdev Web Builder 2.0, your site content is stored in database and using the WYSIWYG (what-you-see-is-what-you-get) content editor tool, you can create, update and delete your website information yourself without any designer charges.
This tutorial will show you how to work with the content editor in Content Page tool. If you have yet gone through the tutorial titled Organizing Site Information Structure, please read it first and follow with this.
|
Editing a Page Content
|
1. From a list of new pages that you have created in the Organizing Site Information Structure tutorial, you are now proceed with editing the content for each page.
2. To edit a page content, click on the Content Page icon on your left menu. (Figure 1)
3. Under Manage Pages, find a Page List with all the pages that you have created.
4. Click on the  icon of a page that you wish to edit the content. (Figure 2)
|
Figure 1 Going to Manage Pages section
|
|
Figure 2 Add / edit content
|
|
The Content Editor
|
1. . The page takes some time to load the content editor. Scroll down and you will see a blank white space with its toolbar on top. The Content Editor is similar to some other web page building tools such as Microsoft Front Page and Macromedia Dreamweaver. So, it is pretty easy to use. (Figure 3)
2. You can type in your content directly or paste it from other sources such as Ms Word, Front Page or Internet Explorer. (Figure 4)
|
Figure 3 User-friendly content editor
|
|
Figure 4 Building up the web page
|
3. Please find the explanation of the content editor and toolbar as below.
| Fields |
Description |
| Page Title |
Display the page title of the page that you are currently editing. |
| Layout |
Choose from 5 layout styles that help you to align your content. |
| Set As Default Page |
Check if you want the current page to become the default entry page of your website, means that when you type your domain URL in the web browser, this page will be shown by default. |
| Add Module To Page |
Add additional module such as Enquiry Form, Tell A friend, Print Version to your current page. |
| Font Name |
Choose the font face that you wish to use. |
| Font Size |
Choose the font size that you wish to use. |
 |
Cut |
|
Cut selected content |
 |
Copy |
|
Copy selected content |
 |
Paste |
|
Paste cut or copied content |
 |
Undo |
|
Undo changes |
 |
Redo |
|
Redo changes |
 |
Bold |
|
Set selected text to become Bold |
 |
Italic |
|
Set selected text to become Italic |
 |
Underline |
|
Underline selected text |
 |
Strikethrough |
|
Set selected text as Strikethrough |
 |
Superscript |
|
Set selected text as Superscript |
 |
Subscript |
|
Set selected text as Subscript |
 |
Justify Left |
|
Justify the content to Left |
 |
Justify Center |
|
Justify the content to Center |
 |
Justify Right |
|
Justify the content to Right |
 |
Justify Full |
|
Justify the content to Full |
 |
Number List |
|
Create Number list |
 |
Bullet List |
|
Create Bullet list |
 |
Indent |
|
Tab the content |
 |
Outdent |
|
Untab the content |
 |
Horizontal Line |
|
Insert horizontal line |
 |
Create / Edit Table |
|
Create or edit table |
 |
External Link |
|
Create link to selected text |
 |
Unlink |
|
Remove the link |
 |
Insert Image |
|
Upload and Insert image file |
 |
Set Color |
|
Set color to selected text |
 |
Remove Formatting |
|
Remove all formatting to selected content |
 |
Insert Symbol |
|
Insert special symbol or character |
| HTML |
Check to view HTML code or create web pages using HTML |
|
|
Add or Delete Module From Page
|
1. You can add additional module to the top or the bottom of your current page.
2. Click on Add Module To Page and a window will popup. (Figure 5)
3. Select "Add To Top of The Page" or "Add To Bottom of The Page" and click on the icon of the module that you want to add. (Figure 6)
|
Figure 5 Adding modules interface
|
|
Figure 6 Pick a module
|
4. The module will appear in the Module List on your right at once, means that the module already added, and it's visible in the current page on your website. Click on Close Window. (Figure 7)
5. If you wish to delete a module, just select it in the Module List and click on Delete. (Figure 8)
|
Figure 7 Module added!
|
|
Figure 8 Deleting a module
|
|
Create/Edit Table
|
1. Table is used to organize and align your content in a page.
2. To create a table, place cursor within the editor, click on the  icon, and you will be popup with the Table properties window.
3. For a new table, fill in the Rows, Columns, Width, Height, Background Color, etc. as you wish. Please leave the Border Size : 1 so that you can see the table that you are creating now later. (Figure 9)
4. After the table has been created, you can start input the content, image, set the text color, size and so forth. (Figure 10)
|
Figure 9 Set the table properties
|
|
Figure 10 Jazzing up the text
|
5. To edit the table, place your cursor in it and click on the icon again. You will realise that the Edit Table and Edit Cell functions have been enabled now. (Figure 11)
6. Change your table properties or cells accordingly using the functions inside. When you are done with your table content, you can set now set the Border Size to "0". (Figure 12)
|
Figure 11 Changing table cell's properties
|
|
Figure 12 Finishing touches
|
|
External Link
|
1. To insert a link to a selected text or image, you can click on the  icon. (Figure 13)
2. An Insert / Edit Link window will popup. Choose the Type, enter the URL and select the Target. (Figure 14)
|
Figure 13 Adding link
|
|
Figure 14 Creating the email link
|
3. Click on Insert and the selected element will be enabled with link. (Figure 15)
4. To remove a link, just select the element and click on the  icon. (Figure 16)
|
Figure 15
|
|
Figure 16
|
|
Upload and Insert Image File
|
1. To insert an image, you will need to upload it first. Click on the  icon , an Upload Files window will popup.
2. On the top, click on Browse and search for your image file. Click on Open. (Figure 17)
3. Then click on Upload. It will take some time that is depend on your file size to upload to the server. (Figure 18)
|
Figure 17 Browse for image
|
|
Figure 18 Uploading...
|
4. Once the image file has been uploaded, you will find it appear in the List Of All Files on your right. (Figure 19)
5. Select the file to preview, set the Border, Align, Alt text and click on the Insert Image button. (Figure 20)
|
Figure 19 Previewing image
|
|
Figure 20 Adding image to content
|
Conclusion
The Content Page tool is to let you create or update your site content any time you want. It is useful if you have many information that you wish to publish compare ordinary web designing where the project price is per page basis. Just a little practice with the content editor and you will get use to it with no hard work. We hope this tutorial can be much helpful to you.
More Tips and Tutorials that is related to this topic, please read:
|
