simple overlay turorial using msfrontpage(by genocide glitch)

mharjhay · 06-09-2006, 10:21 PM

HOW MAKE YOUR OWN OVERLAYED PROFILE USING MS FRONTPAGE 2003 (HTML)

I. Introduction

Overlayed profiles are hot these days. It gives opportunity to people to show their creativity in making their own unique design.

Using some programs, we could make our own layout. For example is Adobe Photoshop. But if you don't have any knowledge about it, try using the notepad, a simple appication like that can give you your unique personalized profile, but of course, it may give u some time in typing the codes, and also u can't preview the layout in one click.

Well if you don't want those, you could use Microsoft FrontPage, a quick & easy tool to make your dream profile. It uses HTML and you don't need a hell of a time to type in your codes. The advantage of using this is that you can insert up DHTML effects, JavaScripts, CSS, etc. to personalize your profile.

A sample profile created using MS FrontPage is this. Click the link below to view it. Don't expect too much of it, I'm also a beginner.

http://www.friendster.com/signumcrusis

In my profile, I just use a couple of <div>...</div> tags, then added borders and arranged them to the postion that I want. Simple, but effective. Remember, the content is much more important than the appearance.

II. Tutorial

This tutorial teaches you how to make your profile using <div> & </div> tags, and also some basics of the MS FrontPage. Sorry for the poor quality of the screenshots.

################################################## #######################
#NOTE : Please use this tutorial only as a reference, experiment on various ways on how to improve your work. #
################################################## #######################

First, you must edit some properties at your page. In Page view, at the bottom left of the document window, click Design, then right click at the page, select Page Properties. Under Page Properties, u can edit the general features of the document.

In General Tab, u can edit the title, keywords & description of your page.
In Formatting Tab, u could edit the background image & the colors to be used.
In Advanced Tab, u can edit the margins.

I'll write up the title & other things, then I'll set the bgcolor to black & the text is red. Now the whole page is colored black, and red is the text color.

To modify the font face, size & style, change it at the formatting toolbar at the top of the window.

To modify the paragraph format, for example, spacing & indents, click Format >> Paragraph.

Now let's begin working! Let's insert up a layer. To do that, click the Insert Layer. Place the layer anywhere u want. Layers use <div> & </div> tags, so u can also call it dividers.

Ok, I'll use this layer for the navigation bar, so i'll type the links on the navbar. I'll center it. I also added borders. To add borders, click the Border in the Formatting toolbar.

Now that the typing is complete, Let's now add hyperlinks. To do that, highlight the word you want to put a hyperlink, right-click on it, then select Hyperlink. Type the address of the link on the address bar & click OK.

There it goes, now let's put up a banner. I'll just use my siggie, bcoz i'm out of time to make another one. To do that, insert another layer, & place it where u want. Then, on the menu bar, click Insert >>> Picture >>> From File. I'll also center the picture.

Now that there's the navbar & banner, we just do the rest. Do what you have done to the other layers. Follow the procedure in installing hyperlinks.

Now that u have done everything, save up ur page & copy the code. To copy the code, in the page view click Code.

Copy all the codes from <html> up to </html>, to copy the code, in Page view, click Code and copy it (Click anywhere on d page and press CTRL + A then CTRL + C), then generate the overlay code in Mark's Generator (CTRL + V to paste). That's it! You have just finished up making your own profile! I'll just update this topic some other time, when i'm going to add up other features. Thanks 4 ur appreciation. If u hav any questions, just pm me, ok?

III. Credits

Admin FriendsterForum for giving me permission to post this topic.
MicroSoft FrontPage 2003
Kuya Mark Loreto's Overlay Generator
Lord God
Family & Friends
To anyone else i forgot

HeRmOiNe · 06-10-2006, 12:18 AM

BkT gAnUn wLa kMinG MS FRONT PAGE ??!! .. MS POWERPOINT, MS OFFICE PICTURE MANAGER, MS OFFICE WORD 2003, MS OFFICE PUBLISHER 2003 ETC . wLnG MS FRONT PAGE ='( .. sAn bAh MaHAHANAP UN ?!

mharjhay · 06-10-2006, 12:32 AM

lol me rin..khpon lng..buti nkhiram ako sa kklse ko..n0n ayn lng rin ang skn eh..kng alin ang klngn ay wla..naghnp me sa google kng pd idl kc sb skn..try u rin hnpin..bka mron..

murtish · 06-11-2006, 08:25 PM

wow this is really helpful thank u for sharing it with us...

julieqt · 06-18-2006, 09:49 PM

ano ba website ng msfrontpage??

dashling · 06-18-2006, 10:07 PM

waaaaaaaaaaaaa.,.............. bat ung ms frontpage ko walang mga ganyan..

walang insert layer....... tapos iba pa ung nsa baba ...... normal || html || preview ......... waaaaaaaaaaaa...........

blitzjhonmer · 06-29-2006, 05:50 PM

Originally Posted by mharjhay