How to Create an Online Pirate Menu
Pirates are a fun theme for a website. There are many different items that represent pirates, such as ships, swords, bandannas, eye patches, wooden legs and big black hats. You can add an online pirate menu to one page or many. This menu may contain silly words such as "argh" and "yar." Pirates are not known for using proper English. The trick to making a pirate menu is to maintain functionality while using fun, pirate-like words.
Other People Are Reading
Instructions
-
Create the Menu Links
-
1
Open Dreamweaver. Click "File" and select "New" from the menu. Choose "HTML" from the "Basic Page" category. Click "Create."
-
2
Create a new table. Choose "Insert" then "Table" from the top menu. Give the menu two rows and four columns with a table width of 600. Click "OK."
-
-
3
Type "Helm" in the second row, first column to indicate the home page. Highlight the word and choose "Insert," then "Hyperlink" from the top menu. Type "index.html" or the website's home page address in the link box. Click "OK."
-
4
Type "Binnacle" in the second row, second column. Highlight the word with your mouse and choose "Insert," then "Hyperlink" from the top menu. Type "sitemap.html" or the address of your site map page in the link box. Click the "OK" button.
-
5
Type "Cargo" in the second row, third column if your site has a shopping area. Highlight the word and choose "Insert," then "Hyperlink" from the top menu. Type "store.html" or the address of your website's store page in the link box. Click "OK."
-
6
Type "Burgee" in the second row, forth column. Highlight the word with the mouse and choose "Insert," then "Hyperlink" from the top menu. Type "aboutus.html" or the name of the website's identification page in the link box. Click the "OK" button.
-
7
Insert the site's spacer.gif image file in each of the blank cells in the table's first row. Make the image height one and width 150. Create a blank 1x1 pixel image and save it as spacer.gif in any graphic software if no spacer.gif file is available.
Format the Menu and Save on Server
-
8
Click the "Code" button at the top of the Dreamweaver window or choose "View," then "Code" from the main menu. Add a few lines to format the new pirate menu in the HTML code view.
-
9
Type "<style type="text/css">" (without the outside quotation marks) directly underneath the "<head>" command.
-
10
Type the following lines underneath the "style" command you added in Step 2:
.menu1 a {text-decoration:none;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #CC3366;
line-height: 16px;
}
</style>
-
11
Choose "View," then "Design" to return to the menu and edit it.
-
12
Highlight each of the menu options and choose "Text," "CSS Styles," then "Menu1." Check that the menu options are red and the text appears formatted.
-
13
Add this menu to any HTML file as desired and upload to your website's server.
-
1
Tips & Warnings
Use the Resources section below to find fun pirate terms and understand more about pirate culture.
Adding the spacer.gif is not completely necessary if you have skills with cascading style sheets and can separate and evenly space the menu options.
Helm indicates the home page because pirates used the helm of a ship to steer through the sea. Binnacle indicates the site map because a binnacle is the case that protects a ship's compass. Cargo indicates the site's store because cargo refers to precious goods the ship is carrying. Burgee indicates the site's "about us" section because a burgee is a ship's identification flag.
The pirate menu can be any color desired. Red was chosen for this example (#CC3366). Look up hex codes to see a full list of colors available in html styles.
It is more efficient to use a .css file for the style section. Adding the style tag in the <head> section of an html page, however, is quick and easy for small websites.
Pirate terms can be fun for children, but be aware that some pirate websites are just plain mean and nasty. Review any site before linking to it.
References
Resources
- Photo Credit sail boat details image by JoLin from Fotolia.com
