Who's online
There are currently 0 users and 0 guests online.
Who's new
- thanzin_cho
- coolz23
- air1
- irene01
- Y Kyaw Swar
Syndicate
html from scratch using Frontpage
About
This is only meant for no experience users and entry level of making own website by own hand from Microsoft Window Office - Frontpage editor. Using Frontpage is very likely to Microsoft Word if you are familiar with MS Word. In this example, assumed that you have installed Frontpage 2000 or higher. Frontpage editor is one of the Microsoft successful UI(user interface) for html. Basically making website means that you are writing html(hypertext markup language) which you can take note as one of the computer language in general. Of course, html are sort of code and browser prase those mark up language back to nice and human readable format.
Why Frontpage?
Because people who do not know any single thing about html should start from Frontpage. Frontpage contained Normal, HTML and Preview style of UI (user interface). People who knew how to type the text on Word processor (MS Word e.g) or text editor (Notepad) in computer can write web page through Frontpage. Basically, you can write whatever you wanted to publish about at "Normal" UI view and html code will automatically convert for you at "HTML" UI view. So that you can preview from your contents at "Preview" UI and then publish your web of course. In this way, you can make your own web contents and with help from w3school online tutorials, you can start use of "HTML" UI view to edit your html code for more customization about your website. After that if you get familiar with html and then you may want to try Dreamweaver editor which has same concepts and more capability. Or even you are so powerful in html coding, you may just want to use Notepad editor or PHP Designer to design your website without help of UI. PHP Designer 2005 is my choice of tool for Window and it is free.
So, this is the basic idea of how we approach to making web site by own hand. Please don't ask me about the term web design or how/what should be in details. After you have reached on stage then you will see what those people are doing in backstage. Just keep doing and your dream of creativity design will be on your way!!
Tutorial Part - I
Open the Frontpage editor from
Start > All Programs > Microsoft Frontpage
This is the what you will probably see on the first time.
fp_1.jpg
From this stage, you have to know what is all those mean and how you can do with those commands.
We will splitted into 5 frames as hightlighted in fp_1a screenshot below.
fp_1a.jpg
On "top panel" red box, we will say Tool box.
On "left panel" we can switch the Workspace or working area. Try click on those and experience it now. Come back to "page" on top most workspace after it.
On "right panel" most is the command shortcut which you can stright away call the new pages, templates and web. But we may not take a look on that right now. We'll try it on later when we knew basic page creating and how these shortcuts are related to our work.
Below "bottom panel" the small red box, you can switch between your page or web view. As noted the meaning goes:
Normal = where you normally type your contents and your input text as normal view
HTML = where all the typing from normal view will automatically changes to html coding
Preview = this view is preview for your webpage before you publish
These are the thing that i mentioned UI in above. I will say this three view as "do, edit, test" for short and better understanding. So, please take note "do, edit, test" and publish your personal web to server later.
Now let's start to type on something or says as shown in fp_2 screenshot and save the page.
fp_2.jpg
I will design my personal web site in very simplest form and total of four static page. Static page??
As shown in screenshot fp_2a, save as filename=index and filetype=webpage then it will result to index.htm under your My Webs root folder.
fp_2a.jpg
So, now your "About" page = index and we need to create another three pages called "Article", "Photo" and "Link".
Very simple, goto File > New > Page or Web to toggle the "right panel" and from there just click on "blank page" to create one.
By the way, in this step, you can also create from "top panel" see fp_3 screenshot.
fp_3.jpg
Creating new page from top panel has more options. So, we will try this method later on. Now just create new page by clicking right panel.
After you've created a new page, it will come out another blank page just beside index.htm and you can view as in tab browsing view. You can switch to and from of your web pages.
So, repeat this way to add another two more new pages for "Photo" and "Link".
During creation of these pages, we will play around some command from tool box. Let's take a look at Photo page:
fp_insert.jpg
New dialog window will pop up and just click add button to navigate your photos and add it! And accordingly, fill the caption for photo and description about how/what of that photo. At this dialog, you will see like thumbnail setting, etc and tweak it to experience it all those. See the following screen.
fp_photo.jpg
When you press save, you will probably prompt as follow.
fp_emb_photo.jpg
This is asking you to whether you wanted to embed your photos into your web root directory. Press Ok and all the photos from different directory will save under your My Webs root folder.
How about hyperlink? Just select which part do you want to have a link and insert the link on it. You can command from
or just simple click on Globe icon shortcut to insert the hyperlink(link in simple meaning).
fp_hyper.jpg
Now you have done with your four pages and we have to construct the navigation bar which visitor can navigate when they visited your web site.
Now we will use very simple navigation using hyperlink method and just link it from web root folder with relative link method. There are two popular terms in computing Relative and Absolute.
We will go more detail about this soon. Now type four navigation text, select individually and link them accordingly. Relative link means just type index.htm for about text. See the fp_nav screen.
fp_nav.jpg
Upto now i adjusted all contents to look better such as changing different font face, Bold, Italic, Adjusting paragraph, etc which we can do as in MS Word accordingly. You can try more on insert command (rather than hyperlink and photo) or just explorer out a littol more on those command from tool bar. The more you will get bonus, the more you are digging out yourself.
After all, rename the root folder to whatever i wanted (for example: My Webs to fp_tutorial_1) and upload to web server. This is sometime called publishing web. Check the finished personal website at:
This is only meant for no experience users and entry level of making own website by own hand from Microsoft Window Office - Frontpage editor. Using Frontpage is very likely to Microsoft Word if you are familiar with MS Word. In this example, assumed that you have installed Frontpage 2000 or higher. Frontpage editor is one of the Microsoft successful UI(user interface) for html. Basically making website means that you are writing html(hypertext markup language) which you can take note as one of the computer language in general. Of course, html are sort of code and browser prase those mark up language back to nice and human readable format.
Why Frontpage?
Because people who do not know any single thing about html should start from Frontpage. Frontpage contained Normal, HTML and Preview style of UI (user interface). People who knew how to type the text on Word processor (MS Word e.g) or text editor (Notepad) in computer can write web page through Frontpage. Basically, you can write whatever you wanted to publish about at "Normal" UI view and html code will automatically convert for you at "HTML" UI view. So that you can preview from your contents at "Preview" UI and then publish your web of course. In this way, you can make your own web contents and with help from w3school online tutorials, you can start use of "HTML" UI view to edit your html code for more customization about your website. After that if you get familiar with html and then you may want to try Dreamweaver editor which has same concepts and more capability. Or even you are so powerful in html coding, you may just want to use Notepad editor or PHP Designer to design your website without help of UI. PHP Designer 2005 is my choice of tool for Window and it is free.
So, this is the basic idea of how we approach to making web site by own hand. Please don't ask me about the term web design or how/what should be in details. After you have reached on stage then you will see what those people are doing in backstage. Just keep doing and your dream of creativity design will be on your way!!
Tutorial Part - I
Open the Frontpage editor from
Start > All Programs > Microsoft Frontpage
This is the what you will probably see on the first time.
fp_1.jpg
From this stage, you have to know what is all those mean and how you can do with those commands.
We will splitted into 5 frames as hightlighted in fp_1a screenshot below.
fp_1a.jpg
On "top panel" red box, we will say Tool box.
On "left panel" we can switch the Workspace or working area. Try click on those and experience it now. Come back to "page" on top most workspace after it.
On "right panel" most is the command shortcut which you can stright away call the new pages, templates and web. But we may not take a look on that right now. We'll try it on later when we knew basic page creating and how these shortcuts are related to our work.
Below "bottom panel" the small red box, you can switch between your page or web view. As noted the meaning goes:
Normal = where you normally type your contents and your input text as normal view
HTML = where all the typing from normal view will automatically changes to html coding
Preview = this view is preview for your webpage before you publish
These are the thing that i mentioned UI in above. I will say this three view as "do, edit, test" for short and better understanding. So, please take note "do, edit, test" and publish your personal web to server later.
| Tip#1 wrote: |
 Pressing F1 will call the frontpage help and ask him whenever you are lost.
html is the abbreviation of HyperText Markup Language.
Once you openup the frontpage it will create folder called "My Webs"
under C:\Documents and Settings\Administrator\My Documents\My Webs
|
Now let's start to type on something or says as shown in fp_2 screenshot and save the page.
fp_2.jpg
I will design my personal web site in very simplest form and total of four static page. Static page??
| Tip#2 wrote: |
|
Static pages = Web pages which only meant for visitor to view/read it.
Dyanmic pages = Form of visitor input such as Guestbook, Shoutbox,
Forum and one of the scripting programming language with or without
html.
|
As shown in screenshot fp_2a, save as filename=index and filetype=webpage then it will result to index.htm under your My Webs root folder.
fp_2a.jpg
So, now your "About" page = index and we need to create another three pages called "Article", "Photo" and "Link".
Very simple, goto File > New > Page or Web to toggle the "right panel" and from there just click on "blank page" to create one.
By the way, in this step, you can also create from "top panel" see fp_3 screenshot.
fp_3.jpg
Creating new page from top panel has more options. So, we will try this method later on. Now just create new page by clicking right panel.
After you've created a new page, it will come out another blank page just beside index.htm and you can view as in tab browsing view. You can switch to and from of your web pages.
So, repeat this way to add another two more new pages for "Photo" and "Link".
During creation of these pages, we will play around some command from tool box. Let's take a look at Photo page:
| Code: |
|
Insert > Picture > New Photo Gallery |
fp_insert.jpg
New dialog window will pop up and just click add button to navigate your photos and add it! And accordingly, fill the caption for photo and description about how/what of that photo. At this dialog, you will see like thumbnail setting, etc and tweak it to experience it all those. See the following screen.
fp_photo.jpg
When you press save, you will probably prompt as follow.
fp_emb_photo.jpg
This is asking you to whether you wanted to embed your photos into your web root directory. Press Ok and all the photos from different directory will save under your My Webs root folder.
How about hyperlink? Just select which part do you want to have a link and insert the link on it. You can command from
| Code: |
|
Insert > Hyperlink |
or just simple click on Globe icon shortcut to insert the hyperlink(link in simple meaning).
fp_hyper.jpg
Now you have done with your four pages and we have to construct the navigation bar which visitor can navigate when they visited your web site.
| Tip#3 wrote: |
|
Navigation is one of the basic and important creation of your website and you will be noticed in advance web building later on.
|
Now we will use very simple navigation using hyperlink method and just link it from web root folder with relative link method. There are two popular terms in computing Relative and Absolute.
| Tip#4 wrote: |
|
A relative link specifies the name of the file to be linked to only as it is related to the current document or folder.
A link is an absolute link if the URL and file name can be found from
anywhere on the Web, not just from a single Web site. An absolute link
specifies a fully-qualified URL; the protocol must be present in
addition to a domain name, and often a file name must be included as
well.
|
We will go more detail about this soon. Now type four navigation text, select individually and link them accordingly. Relative link means just type index.htm for about text. See the fp_nav screen.
fp_nav.jpg
Upto now i adjusted all contents to look better such as changing different font face, Bold, Italic, Adjusting paragraph, etc which we can do as in MS Word accordingly. You can try more on insert command (rather than hyperlink and photo) or just explorer out a littol more on those command from tool bar. The more you will get bonus, the more you are digging out yourself.
After all, rename the root folder to whatever i wanted (for example: My Webs to fp_tutorial_1) and upload to web server. This is sometime called publishing web. Check the finished personal website at: