Static Website Making Guide by Ms. FrontPage
1TABLE OF CONTENTSTABLE OF CONTENTS ................................................ ....................................... 1CHAPTER 1 FRONTPAGE KNOW .............................................. ................. 2CHAPTER 2 WORKING WITH FRONTPAGE ............................................. ........ 4A. INITIAL STEPS ................................................ ................ 4B. HTML TEXT STORING ............................................... .... 4C. HYPERLINK TO MAKE AUTOMATIC ............................................ 5D. REPLACING MODEL LETTER ............................................... .... 5E. STYLE REPLACEMENT ................................................ ............. 5F. LETTERS EFFECT ................................................ .................... 6G. Staining TEXT AND EFFECTS highlighter ...................................... 6H. MAKE Serial Number ............................................... ....... 6I. MAKE A BULLET ................................................ .............. 7J. COLOR CHANGE BACKGROUND ............................................... .... 7K. MAKE A TABLE AND the effect is .............................................. 8L. INSERT FIGURES ................................................ ......... 9M. SETTING THE TABLE PROPERTY ............................................... . 10N. HYPERLINK TO ANOTHER PAGE .............................................. 11O. HYPERLINK TO ANOTHER PAGE .............................................. 11P. MAKE A NEW FILE ............................................... .......... 12Q. USING TEMPLATE ................................................ . 13R. REPLACING THE FIGURES ................................................ ......... 14S. WEBSITE TESTING ............................................... ............. 16T. Search engine optimization ............................................... ..... 17U. JAVASCRIPT INSERT ................................................ ... 18CHAPTER 3 SOURCE ONLINE .............................................. ........................ 19A. FREE TEMPLATE SOURCES ............................................... ... 19B. FREE IMAGE SOURCES ............................................... ..... 19B. FREE JAVASCRIPT SOURCE ............................................... . 19CHAPTER 4 CONCLUSION ............................................... ............................... 202CHAPTER 1KNOW FRONTPAGEFrontPage is a web authoring program based WYSIWYG (What You See IsWhat You Get), meaning that what we create designs will result in the browser exactlyas we design. FrontPage is one of the program issued by theThe giant software company called Microsoft. So do not be surprised if this programcommonly called Microsoft FrontPage.Excellence FrontPage is easy to use, has an interface similarMicrosoft Word. When you're used to using Microsoft Word, not tooexperiencing difficulty in using this program.FrontPage is very efficient for static business website creation, namely the websiteare one-way, has no means of communication between the visitors with the ownersite. That is because the ease of use, and you do not needmess around with the affairs of making the HTML code in designing awebsite because FrontPage will automatically create it.FrontPage screen structure, you can see in the picture below:
Gambar 1.1 Layar Microsoft FrontPage
3. In addition to WYSIWYG mode (Normal mode), you can design using the HTML view.
This mode is useful when you want to insert JavaScript code. This is one of the shortcomings
FrontPage, which do not have the facilities fully support JavaScript.
Gambar 1.2 FrontPage Mode HTML
4
5. Do not forget to click the "Save".
Figure 2.1 Saving Text HTML
C. HYPERLINK TO MAKE AUTOMATIC
Hyperlink is a facility used to jump to another page or
visiting another site, or jump to specific chapters on one page.
6. Type the following text:
The users only need to adjust this script language is used (default
Britain and Indonesia), changing the logo and designing your sales letter using
FrontPage or Dreamweaver. Users can also change the design of the initial appearance of the site
It uses a variety of models of free templates that are spread on the internet. look
for example at www.web-anda.com
7. Perhatkan when you type www.web-anda.com, then
spaces, it will automatically turn into a hyperlink with the text feature
colored blue and underlined, when you point a pointer to it, it says "Use
Ctrl + Click to follow a hyperlink. "See example below.
Figure 2.2 example of a hyperlink
D. REPLACING MODEL LETTERS
To replace the same model and size of letters by the time you replace the letters on the
Microsoft Word program. Enough to block the letters in question and then select the type of
font and size in the toolbar.
Gambar 2.3 Toolbar huruf dan efeknya
8. Your task now is to change the whole text except the title of a type font
Arial and size 10 pt.
9. Title block and resize to 18 pt.
E. CHANGE STYLE
10. Bloklah title of the manuscript. Then click tombal style, on the toolbar select the Heading 1 style.
Font Style (font) Font size Bold Underline
italic
flattening
Left, middle,
right, and
justify
6
F. EFFECTS OF LETTERS
To change the effect of bold text (Bold) or oblique (italic) or underlined
(Underline), simply use the toolbar below.
11. Give the effect of slanting the text "Nagaya Affiliate Script"
12. Give the effect of text bold "(NAS)".
G. Staining TEXT AND EFFECTS highlighter
Below is a toolbar that is used to give the effect of highlighting and coloring
text..
Figure 2.5
Staining Letter and Effects Stabilo
13. Bloklah text "Nagaya Affiliate System (NAS)". then click toolbar
give dark blue color.
14. Then click the toolbar, select the color yellow. This toolbar is used to
highlighter effect.
H. MAKE Serial Number
Below is a toolbar that is used to provide sequential numbering and bullets
Gambar 2.6
Numbering and Bullet
15. Type the text "These features Nagaya Affiliate Script".Figure 2.4 Choosing a StyleStabilo Color Effects lettersBullet Numbering
716. Then type the text "Fast Loading".17. Click on the toolbar numbering18. Instantly came the number one and then click enter and continue with the text belowthis:2. Easy to use (convenient)3. Multi Language Support (multilingual)4. Build in an autoresponder. With this tool you can use the messagesustained in an automated way.5. Promotion Tools, which consist of banners, text links, text ad, email ad6. Sales Statistics Control, which will help business managers control the saleits affiliates.7. Clickthoughs, which serves to calculate the number of visits your site and fromwhom reference.8. Site Configuration, for the configuration of the site consists of a data bank and data egoldyou, the default member data, and configuration of your site SEO, like the title, sayskeys, descriptions, meta Google and Yahoo.9. Affiliate Management, to manage your affiliates, bleak delete, affiliatethat most of his visit, and saw their sales results.10. Customer Management, a special page to download the products your customersor bonus products that you sell.11. Contact Site, to contact you with affiliates, customers and site visitorsyou.12. Order via the bank, Postal Money orders and e-gold. PayPal is still in the process.I. MAKE A BULLET19. Type the text below:Broadly speaking, the structure of the script Nagaya Affiliate System is divided into 4 sections,namely:20. Next type the text "Admin Control Panel (Site Manager)".21. Then click on the toolbar.22. Continue by typing the text below:• Customer Control Panel (buyers)• Affiliate Control Panel (member that joins as product sales)• Sales Letter Page (page Offer Letter)23. Add the text "Nagaya Affiliate System" at the end of the bullet. Finish by pressingENTERJ. CHANGE BACKGROUND COLOR24. Right-click your worksheet, choose Format>> Background ....25. Window appears "Page Properties".26. Choose your favorite color in the Background section.27. Click OK. See the picture below.
8
Gambar 2.7
Changing Background Color
K. MAKE A TABLE AND the effect is
28. Pili menu Table>> Insert>> Table ...
In the Insert Table window, input the appropriate procedure below:
• Rows fill in the number of rows you want
• fill in the number of columns Columns
• alignment alignment table
• Border size the size of the edge line
• Cell padding is the distance the cell with its contents
• Cell spacing space for cell
29. As an exercise fill in the rows with 1, and the column with 2
30. Click OK.
9
Gambar 2.8
inserting Tables
31. On the right hand column in the table type in the text below:
Nagaya Affiliate System, is the script language PHP and uses a database
MySQL is designed specifically for affiliate business in Indonesia. Multi format support
Language. Provides 3 types of payment systems, ie Bills, Bank transfer and Egold.
This script can you get for free at www.IlmuKomputer.com and versions
fullnya you can buy in www.NagayaAffiliate.co.cc
Click here for further details
L. INSERT PICTURE
32. In the left column will be inserted cover images Nagaya Affiliate.
You can get a sample cover on the front page of the site
www.NagayaAffiliate.co.cc. Simply right kQ then save picture. Do not forget
place the image in images folder.
33. Click the menu Insert>> Picture>> From File
34. Picture window opens. Find the file "nagaya-cover.JPG" in your images folder.
35. Continue by clicking the Insert button. See picture.
10
Gambar 2.9
inserting Pictures
M. SETTING THE TABLE PROPERTY
36. Please block your table, then right click select Table Properties.
Gambar 2.10
table Properties
11
37. Please replace the Borders, sizenya 0 (zero). Background section, color with
white color.
38. Finish by clicking the OK button.
N. HYPERLINK TO ANOTHER PAGE
39. Type the text below:
In addition to using the basic design of the site, you are easily changed to change
site design using templates that are spread on the internet.
For a list of addresses of sites that provide free templates please click the link
this.
40. Take a block of text "click this link".
41. Then press CTRL + K or toombar or select the menu Insert>> Hyperlink ...
Gambar 2.11
Inserting a hyperlink to another page
42. In the box that appears fill degan "list-template-gratis.htm". Click OK.
O. HYPERLINK TO ANOTHER PAGE
To jump to the top of the page, first you have to do is make
Bookmark list, and then insert hyperlinknya
43. Please return to the title of your website.
44. Then click on the Insert menu>> Bookmark. Or CTRL + G.
12
Gambar 2.12
Make a Bookmark
45. Type the name of the bookmark "top". Then click OK.
46. It will appear as below picture banner.
Gambar 2.13
Results from Bookmarks
47. Next go back to the end of the script, then create a new line and type in "Back to
Top ".
48. Text block, press CTRL + K.
49. In the Insert Hyperlink text box, locate the Bookmarks button. Then click the button
them.
50. Select the top and then, click OK. In the Insert Hyperlink box appears "# top".
51. Then OK again.
P. MAKE A NEW FILE
Still remind the previous practice, that you have created a hyperlink
leading to a file called list-template-gratis.htm when the file does not already exist.
So, your task now is to create a new file
52. Press the key combination CTRL + N. keyaboard then instantly appears a new sheet
still empty.
53. Type the following text:
Below is a list of some of the provider's site for free templates that you can
use to design your business website.
• http://www.freesitetemplates.com
• http://www.templatespro.com
• http://www.DollarTemplates.com
• http://www.templatesforyou.com
13
• http://www.steves-templates.com
Back to front page
54. Block text Back to the front page, then make it a hyperlink to the file
index.htm.
55. Save with CTRL + S and name list-template-gratis.htm.
Q. USE TEMPLATE
56. Your task now is to create an HTML file that contains detailed information
about the script Nagaya Affiliate. How: File>> New>> Page or Web.
57. Appears next to your right a Task Pane, select Page templates.
Picture 2.14
Task Pane Template
58. In the window that appears select Page Templates Narrow, Right-aligned on the Body
list of templates provided, then click OK. See pictures for more
clarify.
14
Gambar 2.15
Window Page Template
59. Instantly came a new file width that already contains images and text. Save the file
with the name detail.htm.
60. Go back to your table, there was room for the phrase "Click here for details
detail ".
61. Please block the sentence and create a hyperlink to lead to the file
"Detail.htm".
62. Add one sentence at the bottom of the script:
Back to front page
63. Create hyperlinknya to the file index.htm.
64. Do not forget to save it.
R. REPLACING THE PICTURE
65. Open the file you detail.htm.
66. Double-click an existing picture.
67. Picture Properties window appears instantly.
68. click Browse ...
Gambar 2.16
Window Picture Properti
69. Picture window appears, double-click the images folder, then select the image file nagayacover.
jpg. Finish by clicking Open button.
2.17 Window Picture
70. Next set the table width by dragging the splitter table
16
Gambar 2.18 Mengatur Spliter Tabel
S. TESTING SITE
71. Open the folder "C: \ Websiteku".
72. Then you will get the contents as shown below.
Gambar 2.17 Daftar file
73. To test the results of your work, please double-click the index.htm file
74. See the results below. Index.htm file displayed by Internet browsers
Explorer.
17
Gambar 2.18 Hasil Akhir dibuka dengan Internet Explorer
T. Search engine optimization
This is an advanced material. Your task this time is the search engine optimization.
The main goal of this optimization technique is to design your site can be indexed by
search engine software.
That you apply this technique is a technique still in use older
now.
75. Please open an HTML mode in your FrontPage program. Notice that I gave
red color on the HTML tag below:
explanation
1) Title (title) of your website
Your website title should describe your website. Make your website title
attractive as possible.
2) Description (a brief description of your site)
Description or a brief description of your site is located on the tag below.
Copyright
This script is a JavaScript to display CopyRight.
19
CHAPTER 3
ONLINE RESOURCES
A. FREE TEMPLATE SOURCE
• http://www.freesitetemplates.com
• http://www.templatespro.com
• http://www.DollarTemplates.com
• http://www.templatesforyou.com
• http://www.steves-templates.com
B. FREE IMAGE SOURCE
• http://www.zyris.com
• http://www.free-graphics.com
• http://www.iconbazaar.com
• http://www.quickbanner.com
• http://www.media-graphics.net
• http://www.animationonline.com
• http://www.animationonline.com
• http://www.free-clip-images, com
• http://www.clipart.com
• http://www.absolutely-free-clipart.com
B. FREE JAVASCRIPT SOURCE
• http://www.java-scripts.com
• http://www.javascripts.com
• http://www.js-planet.com
• http://www.jonesdom.com
• http://www.java-resources.com
• http://www.javagoodies.com
• http://www.dynamicdrive.com/
20
CHAPTER 4
CLOSING
I was very excited when this ebook useful for the Indonesian people, especially
children of Central Sulawesi.
As the end of your job is to introduce him to design the HTML
public. One way is to have a domain and hosting to install
No comments:
Post a Comment