Hello readers,
I today present you a simple and easy way to design web pages without knowing HTML. For this we are using a WYSIWYG editor. (What You See Is What You Get)
Most you must have used such editor embedded inside your email provider like this:
Or may have at least used any word processor; the concept is same. Here we are using the Kompozer Tool to design webpages without any knowledge of HTML or we can say without coding in HTML.
Introducing Mockups ( or as we say in general terms a sketch of desired output ):
To design a webpage we may proceed with a rough idea or thought around our mind about positioning stuff and deciding contents that we wish to put in it. Let's go for an example here which is for putting up a Biodata in webpage; following is the output I desire.
Now understand that it is not necessary that our mockup is 100% resemblance of what we desire. It is a design on paper what we will like to see, so we can go rough on it and exclude or include any details as per one's desire.
Step by Step Web Page designing using Kompozer tool for above shown mockup:
Step 1: Open Kompozer create a new file and save it a biodata.html
Step 2: You need to make three clicks as shown in diagram below to get a desired layout (Representation as in Mockup)
Note: I have gone 5 x 3 becoz I see three columns to partition web page and 5 main rows of data. Your selection may vary as per your need.
Step 3: Drag the table columns as you need to be shown in a webpage. This is what I did...
Step 4: Adding Content
You can directly add content by typing data in positions needed.
Below diagram shows all the things you may need to add further details for above shown mockup, including alignment, color, Size, inserting another table is again repeating Step 2
Step 5: Save all changes and open file from file explorer or by using any Web Browser
We can further continue this post into details of Kompozer and using Kompozer as an IDE please mention the need in comments.
Thank you for time and resources to read this post.
Warm regards from author, Kaustubh Joshi.
Link to my profile: in.linkedin.com/pub/kaustubh-joshi/47/712/538/
I today present you a simple and easy way to design web pages without knowing HTML. For this we are using a WYSIWYG editor. (What You See Is What You Get)
Most you must have used such editor embedded inside your email provider like this:
 |
| WYSIWYG Editor- Gmail Composer |
Or may have at least used any word processor; the concept is same. Here we are using the Kompozer Tool to design webpages without any knowledge of HTML or we can say without coding in HTML.
Introducing Mockups ( or as we say in general terms a sketch of desired output ):
To design a webpage we may proceed with a rough idea or thought around our mind about positioning stuff and deciding contents that we wish to put in it. Let's go for an example here which is for putting up a Biodata in webpage; following is the output I desire.
 |
| Mockup- Biodata Page |
Step by Step Web Page designing using Kompozer tool for above shown mockup:
Step 1: Open Kompozer create a new file and save it a biodata.html
Step 2: You need to make three clicks as shown in diagram below to get a desired layout (Representation as in Mockup)
Step 3: Drag the table columns as you need to be shown in a webpage. This is what I did...
You can directly add content by typing data in positions needed.
Below diagram shows all the things you may need to add further details for above shown mockup, including alignment, color, Size, inserting another table is again repeating Step 2
Step 5: Save all changes and open file from file explorer or by using any Web Browser
We can further continue this post into details of Kompozer and using Kompozer as an IDE please mention the need in comments.
Thank you for time and resources to read this post.
Warm regards from author, Kaustubh Joshi.
Link to my profile: in.linkedin.com/pub/kaustubh-joshi/47/712/538/
No comments:
Post a Comment