About

Translate

Feb 4, 2010

Website designing with FrontPage

Front page

FrontPage is a big major family member of Microsoft corporation and popular webpage/website designing application package developed by Microsoft Corporation. With the help of this program we can create, manage and publish web pages in easiest way.

Creating a web page
  • Click on ‘Start’ button.
  • Select ‘Programs’ option and Click on ‘Microsoft Front Page’ option.
  • Click ‘File’ menu and click on ‘New’ and click ‘Page or web’ option.
  • Click on ‘Empty web’ from right pane and select ‘empty web’.
  • Type ‘z:\myweb’ or any location in the list box and click on ‘ok’.
  • Then click on Blank Page. Type the required text and format it.
  • Save the page as ‘default.htm’ or ‘index.htm’.

Importing image to your homepage
  • Select the ‘folders’ view and select the ‘Images’ folder.
  • Choose the ‘File’ menu option.
  • Select the ‘Import’ option.
  • Click on ‘Add folder’ button.
  • Choose the images folder from the list.
  • Click on ‘ok’ button.

Inserting background image
  • Go to ‘format’ menu option and click on ‘background’ option.
  • Click on the background picture check box.
  • Click on the Browse button and select the image and click on ‘open’ button.
  • Click on ‘ok’ button and save the page.
  • Preview the page in the browser.

Adding picture to home page
  • Place the cursor where you want to insert the picture.
  • Go to ‘Insert’ menu, select ‘Picture’ and click on ‘From file’.
  • Select the image from the list and click on ‘Insert’ button.
  • Select the picture, go to ‘Format’ menu and click on properties.
  • Click on the tab ‘Appearance’ and click on the check box labeled ‘Specify size’.
  • Set the width and height and the border thickness.
  • Click on ‘ok’ button.
  • Save the page and preview in browser.

Inserting horizontal line
  • Place the cursor where you want to insert horizontal line.
  • Go to Insert Menu and click on Horizontal Line.
  • Double click Horizontal line. Change the patterns like width, height and color etc.
Inserting inline frame
  • Go to Insert Menu and click on ‘Inline Frame’.
  • Click on ‘Set initial page’ button inside inline frame if you want to display previous page and click on ‘New page’ to insert new page.
  • To change the properties of inline frame-
  • Put the cursor inside inline frame box and right click on it.
  • Choose page properties tab from the page properties dialog box.
  • Tick mark on ‘Background Picture’ and click on ‘browse’ button to insert background picture.
  • Choose the background and text color and click on ok.

Inserting marquee text
  • Go to ‘Insert’ menu, click on ‘web component’, click on ‘marquee’ and click on ‘Finish’ button.
  • There appears a dialogue box, type your text in the text box.
  • Select the direction, behavior and background color as your requirement and click on ‘ok’ button.
  • Save the page and preview in browser.

Inserting marquee image
  • Insert the picture into your web page.
  • Select the picture and go to ‘Insert’ menu, click on ‘web component’, click on ‘marquee’ and click on ‘Finish’ button.
  • There appears a dialogue box, type ‘’ and click on ‘ok’ button.
  • Save the page and preview in browser.

Hover button

It is used to create links between different pages by using button.

  • Open index page and place the cursor on the first line of the page.
  • Go to ‘Insert’ menu, click on ‘web component’, click on ‘hover button’ and click on ‘Finish’.
  • A dialogue box appears. Type any name in the text box button text, browse the page where you want to create the link and click on ‘ok’ button.
  • Choose different effects such as: button color, effect color etc and click on ‘ok’ button.
  • Save the page and preview in browser.

Banner and manager

This component is used to display animated list of images for a specified number of seconds. It keeps switching to the successive image until it reaches the last image in the list. Once the last image is displayed it then starts again from the first image in the list.

  • Open any page like index.htm.
  • Place the cursor at the top of the page.
  • Go to ‘Insert’ menu, click on ‘web component’, click on ‘Banner Ad manager’ and click on ‘Finish’.
  • A dialogue box appears. Click on ‘Add’ button, select the images from the list and click on ‘open’ button. Similarly add two or more images and click on ‘ok’ button
  • Save the page and preview in browser.

Interactive button

1. From insert menu click on 'interactive button'.

2. Choose button type from 'Button' list box.

3. Enter button name in 'Text' box.

4. Click on 'Browse' button and choose location and select the file you want to link.

5. Click on ok.

6. Click on 'font' tab.

7. Choose font,size and style.

8. Choose 'Original font color','Hovered font color' and 'Pressed font color'.

9. Click on ok.

Photo gallery
  • Go to ‘Insert’ menu, click on ‘web component’, click on ‘Photo Gallery’.
  • Choose photo gallery option and click on ‘Finish’ button.
  • Click on ‘Add’, ‘picture from files’.
  • Select the image and click on ‘open’ button.
  • Again click on ‘Add’ and repeat the above process for more images.
  • Click on ‘ok’.
  • Save the page and preview in browser.

Creating hyperlink
  • Open the page index.htm or default.htm and click on blank page to make another page and save that page.
  • In the index page type any text and select the text.
  • Go to ‘Insert’ menu, click on ‘hyperlink’.
  • A dialogue box appears, select the page from the list and click on ‘ok’ button.
  • Save the page and preview in browser. Click the text.

Intra page linking
  • Type a long document. Go to the first line of the document and type ‘go to bottom’. Go to the last line of the document and type ‘go to top’.
  • Select the text ‘go to bottom’, click on ‘Insert’ menu, click on ‘Bookmark’.
  • A dialogue box appears. Type ‘top’ in the text box and click on ‘ok’ button.
  • Similarly select the text ‘go to top’, click on ‘Insert’ menu, click on ‘Bookmark’.
  • Type ‘bottom’ in the text box and click on ‘ok’ button.
  • Now select the text ‘go to bottom’, click on ‘Insert’ menu, click on ‘Hyperlink’.
  • A dialogue box appears. Click on ‘Place in this document’ from left pane, click on ‘bottom’ and click on ‘ok’.
  • Similarly select the text ‘go to top’ and do the above process and select ‘top’ and click on ‘ok’.
  • Preview in browser and click on both hyperlinks.

Selecting theme for webpage

The most familiar feature of any window-based application is to use a standard design for all the pages in an application. The theme is a collection of page design elements, such as banner at the top of the page, navigation bar.

  • Select the ‘Format’ menu and click on ‘Theme’ option.
  • Select any theme from the list and click on ok.
  • Save the page and preview in browser.

Navigation structure

It is used to navigate between different web pages if there are many pages.

  • Make two or more pages and select different themes on each page and save it.
  • Open index page and write the text ‘Home page’.
  • Switch to navigation view and drag different pages below the home page.
  • Switch to page view.
  • Go to ‘Insert’ menu, click on ‘Navigation’.
  • Click on ‘Link bars’, choose ‘bar based on navigation structure’ and click ‘next’.
  • Choose bar style from the list and click on ‘Next’.
  • Choose orientation and click on ‘Finish’.
  • Choose the option ‘Child level’ and click on ok.
  • Similarly repeat the above process for another pages and click on ‘save’.
  • Preview in browser and navigate the pages.

Page banner

It is used to insert page banner in the web page for good look and feel.

o After creating Themes and navigation structure, place the cursor at the top of the index page.

o Go to ‘Insert’ menu, click on ‘Page banner’, select the option ‘picture’ and type the text as ‘Home page’ and click on ‘ok’.

o Save the page and preview in browser.

Page transition

It is used to give different transition effects to web pages.

  • Create two or more pages using themes, hover button, hyperlinks etc.
  • Go to ‘Format’ menu, click on ‘Page Transition’.
  • Choose one event such as ‘Page Enter’ and choose transition effect and click on ‘ok’. Similarly use different transition effects to more pages.
  • Save the page and preview in browser. Click on hyperlinks to see different transition effects.
Croping image
  • 1. Insert and select image.
  • 2. From picture toolbar (view menu) click on 'Crop' button.
  • 3. Resize the corp border and press enter key.
  • 4. Save the file.
  • 5. Click on rename and rename the image file.
  • 6. Click on 'Change folder' and select 'Image' folder and click on ok.
  • 7. Click on ok.

Image mapping
  • First of all insert the picture on your page.
  • If the picture toolbar is not visible then go to ‘View’ menu, select ‘Toolbars’ and click on ‘pictures’.
  • Click on the picture you have inserted. Then click on different shapes on picture toolbar and draw inside the picture.
  • A dialogue box display, select the html page to which you want to link and click on ‘ok’.
  • Save the page and preview in browser. Click on the place where you inserted hotspot.

Creating Table
  • Place the cursor on the page where you want to insert the table.
  • Go to ‘Table’ menu, select ‘Insert’ and click on ‘Table’.
  • Specify the number of rows and columns and choose different layouts.
  • Click on ‘ok’.

Merging Cells:

  • Select two rows or columns you want to merge.
  • Go to ‘Table’ menu and click on ‘Merge cells’ option.

Splitting Cells:

o Place the cursor on the cell you want to split.

o Go to ‘Table’ menu and click on ‘Split cells’ option.

o Set the number of columns to 2 and click on ‘ok’.

Table Properties:

  • Place the cursor inside the cell of the table.
  • Go to ‘Table’ menu, click on ‘Table properties’ and click on ‘Table’.
  • Set different layouts, borders and border colors and click on ‘ok’.

Table Caption:

  • Place the cursor inside any cell.
  • Go to ‘Table’ menu, click on ‘Insert’ and click on ‘Caption’.
  • Type the name of the table.

Using styles:

o First type any text in a blank page.

o Go to Format menu, click on style. Then choose any style such as p from the list.

o Click on Modify button, click on Format button and choose any option like border

o Then select the border type and shading type.

o Click on ok, again ok and ok.

o The style will be appeared in paragraph.

Using external stylesheet:

o Open a blank page in your web folder.

o Type any text using any headings and paragraph and save it.

o Then choose page templates from the right pane and click on style sheets tab.

o Select the Normal stylesheet and click on ok.

o Write the following codes in stylesheet and save it.

H1{color:red}

p{font-size:14pt;color:blue}

o Go to normal page. Go to Format menu, click on stylesheet link, and click on Add

o Then select the stylesheet page, click on ok, again ok and ok.

o The style will be appeared on the text you have written.

Creating a Frame page:

  • Go to ‘File’ menu, select ‘New’ and click on ‘Page or web’ option.
  • Click on ‘page templates’ from the right pane.
  • Click the tab labeled ‘Frame pages’.
  • Select the template style ‘Horizontal split’ and click on ‘ok’ button.
  • Save the page and give the name ‘frame.htm’.

Creating Target Setting:

  • Design a new page and save it to ‘linkpage.htm’.
  • Make different links from that page.
  • Open the frame page ‘frame.htm’.
  • Click on ‘Set initial page’, select the html page like “link page” and click on ‘ok’.
  • Select the hypertext, right click on it and click on ‘hyperlink properties’.
  • A dialogue box displays. Click on ‘Target frame’, select the current frame page where you want to display or select the common targets and click on ‘ok’ and again click on ‘ok.
  • Save the page and preview in browser. Click on hypertext.

Shared Borders:

  • Go to ‘Format’ menu and click on ‘Shared borders’.
  • Click on the radio button ‘current page’ and check on the check boxes top, left etc
  • Click on ‘Border properties’ and choose the background color or picture.
  • Click on ‘Ok’ and again click ‘Ok’.
  • Save the page and preview in browser.

Activate the Shared Border:

  • 1. From tools menu click on 'page option'.
  • 2. Click on 'Authoring' tab.
  • 3. Click on 'Shared border' check box.

Dhtml Effects:

It is used to give different effects to texts, pictures etc.

  • Type any text like “My Home page”.
  • Select the text, go to ‘Format’ menu and click ‘Dynamic html effects”.
  • Choose an event like ‘mouse over’, Choose an event ‘Formatting’.
  • Choose settings ‘choose font’. Select a font face, font size, color etc
  • Click on ‘ok’.
  • Save the page and preview in browser.

Form:

  • Make a web folder inside the server as: “marketing08/nitish/myweb”.
  • Create blank page place the cursor at the top of the blank page.
  • Go to ‘Insert’ menu, select ‘Form’ and click on ‘Form’.
  • A form is displayed. Press Enter and place the cursor at the top of the form.
  • Again go to insert menu, select form and click on different elements of form such as textbox, radio button, checkbox etc as your requirement.
  • Save the page as “registrationform.asp” and preview in browser.
  • If you want to send those fields in a database then
  • Right click inside the form, click on ‘Form properties’, click on ‘send to database’ option button and click on ‘options’.
  • A dialogue box displays. Click on ‘create database’ and click on ‘ok’.
  • Preview in browser, fill the form and click on ‘submit’.
  • All the records are send to database inside “fpdb” folder.
Reactions:

0 comments:

Post a Comment