Question about Macromedia Dreamweaver MX 2004

1 Answer

Macromedia dreamweaver to crate menu bar - Macromedia Dreamweaver MX 2004

Posted by on

1 Answer

  • Level 2:

    An expert who has achieved level 2 by getting 100 points

    MVP:

    An expert that gotĀ 5 achievements.

    Governor:

    An expert whose answer gotĀ voted for 20 times.

    Hot-Shot:

    An expert who has answered 20 questions.

  • Expert
  • 72 Answers

  1. Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.
  2. Locate your existing navigation menu, which at this time merely consists of a series of links to your home page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completely replacing them in this chapter.
    1. Make sure that the blinking text cursor is currently in the side bar. If it is not, click somewhere in the side bar. Now click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spry" item on the menu that appears, and finally on "Spry Menu Bar" on the submenu that appears.
    2. A dialog box will appear asking you whether you want a horizontal menu bar or a vertical one. Since we are placing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and click OK.
    3. A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of your Dreamweaver window, you will see that the text and links for menu items are displayed there.
    4. Select "Item 1" by clicking on it, if it is not already selected. In the "Text" box, replace the words "Item 1" with "Home" (without the quotes). Replace the default "Link" text of "#" with "index.html" (without the quotes).
    5. By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete it. Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.1. Do the same for "Item 1.2" and "Item 1.3".
    6. Now do the same with the other items, replacing the text with the appropriate words for your site, and the links with the actual page names. If there are submenus, delete them as you did for Item 1. For your convenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has a three-level menu system. Delete all submenus (item 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - we won't need them.
      • Text: About Us, Link: aboutus.html
      • Text: Contact Us, Link: feedback.html
      • Text: Site Map, Link: sitemap.html
    7. Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, and that these files will need to be uploaded. Click "OK".
    8. Now upload the page to your website using "Site | Put" and check the results in your browser. Hover your mouse over your menu buttons, and you will see that they change colour.
    Customizing the Spry Framework's Menu Bar Widget While adding the Spry Framework's navigation menu bar to your web page is a simple procedure under Dreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so under Dreamweaver's user interface. You will have to do it manually.
    The fastest way to do this is to do it via Dreamweaver's "Code" view.
    Dreamweaver has two basic ways you can work on your website. So far, you have been creating your site using the "Design" view. The "Design" view allows you to work on your web page using the What-You-See-Is-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page as a visitor would when they visit your website.
    The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for your website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to your website. When your visitor loads your web page, the browser takes the "raw" code and displays it according to the instructions given in the "raw" code.
    To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewing this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you should still take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using the Code view in a future chapter to insert your feedback form code.
    To switch to the "Code" view, click "View | Code" from the menu. Instead of the web page that you are accustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down the page, you should be able to see your content amidst other characters. These other characters, things like "<p>" and the like, are the formatting code that tells the browser how it should render your page.
    Centering the Menu Bar Scroll to the top of the index.html file in "Code" view. Locate the text "</head>" (without the quotes) somewhere near the top of the file. Place your cursor just before "</head>" on the same line. Hit ENTER (or RETURN) to insert a blank line. When you do this, the entire line with "</head>" should move downwards, creating a new blank line. Move the cursor to the blank line.
    Now copy the text from the box below and paste it into the blank line you just created in Dreamweaver. To copy the text, select all the text in the box with your mouse, click the right mouse button (or if you use Mac OS X, hold down the Control key on the keyboard and click the mouse), and select Copy from the menu that appears. To paste it into Dreamweaver, switch to the Dreamweaver window. Make sure that your text cursor is in the correct location (in the blank line above the word "</head>"). Select "Edit | Paste" from the menu. <style type="text/css">
    ul.MenuBarVertical
    {
    margin: 0 auto ;
    width: 8em;
    }
    </style>


Posted on Jan 22, 2009

Add Your Answer

Uploading: 0%

my-video-file.mp4

Complete. Click "Add" to insert your video. Add

×

Loading...
Loading...

Related Questions:

3 Answers

How can i download free dream weaver...??


u can download here
go to the the drop down menu for free full adobe

Jun 16, 2009 | Macromedia Dreamweaver MX 2004

2 Answers

How to download free macromedia dreamweaver in my computer?


Just jo the following link and download full version of Macromedia Dreamweaver 8.0 with serial for free.
No Cost.
100% Free.

http://freepaksoft.blogspot.com/2009/08/macromedia-dreamweaver-8.html

Jun 12, 2009 | Macromedia Dreamweaver MX 2004

3 Answers

Where can i download macromedia dreamweaver full version at free


Just jo the following link and download full version of Macromedia Dreamweaver 8.0 with serial for free.
No Cost.
100% Free.

May 18, 2009 | Macromedia Dreamweaver MX 2004

1 Answer

Hello....Good mOrning


Dear friend check these websites:
www.adobe.com/support/training/products/dreamweaver.html

www.intelligentedu.com/free_dreamweaver_training.html

www.webucator.com/adobe/Dreamweaver.cfm

www.photoshopsupport.com/dreamweaver/tt/total-training.html

www.lynda.com/home/DisplayCourse.aspx?lpk2=410

Jun 02, 2008 | Macromedia Dreamweaver 3.0 for Mac

1 Answer

Query


yes, dreamweaver 3 is quite updated but it may work better then the new one with some old computer. The newest dreamweaver release is dreamweaver CS. Here is macromedia page for it:
http://www.adobe.com/products/dreamweaver/?promoid=BPDEC

Do not confuse dreamweaver 3 with adobe creation suite 3. Adobe Creative suite 3 is the latest suite containing dreamweaver cs and all the latest software distributed Macromedia.

Cheers

Feb 17, 2008 | Macromedia Dreamweaver 3.0 for Mac

2 Answers

How to make up a design using the dreamweaver?


Macromedia Dreamweaver for the first time, or on a new site for the first time, you need to define the Web site so that Dreamweaver can work with it. This process includes naming the site, placing the local files on a directory on your hard drive, and showing Dreamweaver where those files will be published on the Web. Follow these easy instructions to define a new Web site for Dreamweaver .

First, you should go to the "Site" menu and choose "Manage Sites".
As you can see from the image below, this will open a dialog window. Choose "New Site" from the "New" button.

Open Dreamweaver and Start the Site Definition Wizard
Name Your Site

Using Server Technologies on Your Dreamweaver Site
Where Should You Edit Your Dreamweaver Site Files
Defining Access to Your Dreamweaver Site
Always Test Your Connection
Site Check-out and Check-in with Dreamweaver
Review Your Site Definition
Your Site Now Appears in the Manage Sites Window
Start Editing Your Files in Dreamweaver

Oct 11, 2007 | Macromedia Dreamweaver MX 2004

2 Answers

News updat form


Menu -> Insert -> Form ->Form

Sep 13, 2007 | Macromedia Dreamweaver MX 2004

Not finding what you are looking for?
Macromedia Dreamweaver MX 2004 Logo

362 people viewed this question

Ask a Question

Usually answered in minutes!

Top Macromedia Graphics Publishing, Design & Multimedia Software Experts

Les Dickinson
Les Dickinson

Level 3 Expert

18298 Answers

Tony

Level 3 Expert

2598 Answers

Sunny Solanki
Sunny Solanki

Level 2 Expert

261 Answers

Are you a Macromedia Graphics Publishing, Design and Multimedia Software Expert? Answer questions, earn points and help others

Answer questions

Manuals & User Guides

Loading...