How to Create an Online Pirate Menu
- 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.
- 1). 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.
- 2). Type "<style type="text/css">" (without the outside quotation marks) directly underneath the "<head>" command.
- 3). 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> - 4). Choose "View," then "Design" to return to the menu and edit it.
- 5). 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.
- 6). Add this menu to any HTML file as desired and upload to your website's server.
Create the Menu Links
Format the Menu and Save on Server
Source...