How to Create a Simple Web Page
Using Manila Web Design Software

Debby: Since I had a student make most of the pages for, all you have do is click links to the pages you are ready to work on and then click “edit this page.” Then skip down to highlighted steps to continue.

GETTING STARTED:
1. Go to your web site. (http://sites.arnold.k12.ne.us/dmoninge)
2. Click the login hyperlink
3. Type in your username (which is you email address) and password (which is probably badgley1). If this doesn’t work, please contact Nicole to get a different password.
4. Once you are logged in, you should see and editor’s menu across the top of the page. (If you don’t see the menu, click the “Login” button again and it will appear.)

MAKING PAGES/STORIES:
5. I would suggest you create the main index page for your site. To do this, all you have to do is click “edit this page” at the bottom of the screen.

6. Hopefully, before you got to this point, you have decided what you want on some of your pages, and especially on the first site. If you don’t have any ideas, you can always google for teacher-made web sites.

7. Another idea would be to go to different school sites, and then click the links from the faculty pages.

8. When you are ready to make another page, which you will eventually link to, you will need to click on the “Stories” link to create your new pages.

9. The next step is to scroll to the bottom of the screen and click the “Create a new story” link. A menu will appear in which you must name your page. You can then open a document and copy and paste, OR you can write off the top of your head into the “Text” field box in Manila. When you are done, click the submit button. This could take a little time, so be patient. It will happen. Be aware of spacing, spelling and capitalization.

PICTURES:
10. The next stage of creating web pages is to upload the pictures for your web pages into the Web site. On the “Editors menu” on the top of the screen, you will need to click on the “Pictures” link to create your new pages.

11. Scroll to the bottom of the screen and click the “Create a new picture” link. A menu will appear in which you must name your picture. Keep it simple. You will then write a one-sentence description for the picture in the “Text” field box in Manila (this is optional, but suggested).

12. When you are done, click the submit button. This could take a little time, so be VERY patient. It will happen.

13. Now you will repeat this step to upload your other pictures. Be sure to use a different name on each picture, or the links won’t work. Be aware of spacing, spelling and capitalization as you create them.

14. The next step is to put your pictures on the web pages. This is a simple step. Wherever you want the pictures to appear, you will type the name of the picture in quotation marks. (Be sure to type the name exactly – capital letters and spelling must match the picture file title from the pictures list you created above.) Where you put the cursor is where the picture will appear on the page.

DOCUMENTS, MOVIES, ETC.:
15. You can also upload worksheets, movie files (that have been saved as quicktimes for the web), sound files, spreadsheets and other files for people to view or download. On the “Editors menu” on the top of the screen, you will need to click on the “Files” link to create your new file links.

16. Scroll to the bottom of the screen and click the “Upload new file” link. A menu will appear in which you must name your file. Keep it simple. You will then write a one-sentence description for the file in the “Text” field box in Manila (this is optional, but suggested).

17. When you are done, click the submit button. This could take a little time (especially if it is a movie file) so be VERY patient. It will happen.

18. Now you will repeat this step to upload your other files. Be sure to use a different name on each file, or the links won’t work. Be aware of spacing, spelling and capitalization as you create them.

19. The next step is to put your files on the web pages. This is a simple step. Wherever you want the files to appear, you will type the name of the file in quotation marks. (Be sure to type the name exactly – capital letters and spelling must match the picture file title from the files list you created above.) Where you put the cursor is where the file will appear on the page.

LINKS:
20. The next major step is to create the links between the pages of your site. (Debby you might not have to do this since I had student help you by making all the links for you.) To make a link all you have to do is type the name of each of your pages with quotation marks around it (just like with the photo titles earlier) in the order you want them across the top of your page. When you submit, those titles will turn into links.

21. Now you will need to return to each of your story pages, beginning with your index page, to put the links on the pages (which will appear as links after you submit).

22. You can also put permanent links on the left side of the screen by clicking the edit button on the navigation side of the screen. Type in what you want the link to read, and then the address of the page/story you want to link to in the URL box. Then click update. (You can even rearrange the order of the links by clicking the up and down arrows.)

THE LOOK:
23. If you need a blank line between paragraphs, you can type <br> to create a break between paragraphs.

24. If you want something to be bold use <b> in front the words to bold and </b> after the last bold word.

25. If you want italics <i> and </i> at the end

26. Changing font color: put the following font “tag” in front of the words that you want to change to a color other than black, <font color=”#000000”>. After the last word that you want to be that color place the end tag </font color=”#000000”>
i. Black #000000
ii. Red #FF0000
iii. Green #00FF00
iv. Blue #0000FF
v. Yellow #FFFF00
vi. Brown #A62A2A
vii. Dark Purple #871F78
viii. Firebrick #8E2323
ix. Maroon #8E236B
x. Pink #FF6EC7
xi. Orange #FF7F00
xii. Silver #E6E8FA

24. Changing font sizes: You can change font sizes using a range of numbers 1 through 6, with one being the largest font and 6 being the smallest.

i. Before the first words in this font size: <font size=”1”>
ii. After the last words you want in this font size, type: </font size=”1”>

25. Changing fonts: When you want to use a font other than the default font which looks like Arial, you will need to list more than one font that you prefer. There is a reason for this. If you want a special font, not all computers will have that font on it so you will need to list three fonts that look similar – or that you will settle for – in order of preference (as listed below).
i. Before the first words in this font type: <font face=”Times New Roman, Arial, Helvetica”>
ii. After the last words you want in this font, type: </font face=”Times New Roman, Arial, Helvetica”>

26. Text wrapping around pictures and maps: You can text wrap around pictures either having the picture on the right or the left. (You can change the macro listed below by changing the word right to left.)(The image name needs to be the name you have given the picture when you put it in the pictures list.)
i. {pictureRef(“imagename”,align:right)}
ii. repeat this macro until all the text wrapping is done on all lines around the picture.

27. Creating a list (bulleted or numbered lists): Sometimes it is more effective to use a bulleted list for information that you want to emphasize. This might be a good idea for the timeline page.
i. For an unordered list (just bullets or dots):
<ul>
<li>apple
<li>orange
<li>pear
</ul>
ii. For an ordered list (numbered bullets):
<ol>
<li>apple
<li>orange
<li>pear
</ol>
28. For a horizontal rule line on the page (like below the title on the first page of this document):
i. Type <hr> (For full width of the screen)
ii. <hr width=”50%”> (For 1/2 width of screen)
iii. <hr center width=”50%”> (For 1/2 of screen and centered)