| |
| |
With the new empty site selected in the Files tab of the Files panel, access the New AJAX Site command from the Site menu (in Dreamweaver). The dialog box has two steps.
Configure the first step of the New AJAX Site command as shown below:
The Site name text box is pre-filled by default with the name of your Dreamweaver site. Enter a new name: InterAKT Online - Dreamweaver Extensions for Dynamic Websites. This name will be displayed in the Header panel of your AJAX site.
Select the 2 columns layout.
The image below the two interface controls offers a preview of how the AJAX site page will look in browser.
Click Next to continue configuring the command.
Configure the second step of the New AJAX Site command as shown below:
There are six pages (states of the Content panel) that you will create in this site. While adding them and setting their options, you can preview each one of them in the image on the bottom-right (the page selected in the Content states grid is previewed in that image).
Edit the default page:
Change its Title to Welcome to InterAKT.
Leave the State name as it is, Home. This will also be the name the corresponding file in the site.
Leave the Display in menu option checked.
In the Template drop-down menu leave the Default option.
Click the Plus (+) button on top of the Content states grid to create another state. Configure it as it follows:
Set the Title to Company.
Set the State name to Company (just click inside this text box).
Note: If you click inside this text box, the state name will be automatically generated starting from the title - it will retrieve the first two words (if there are at least two) and remove the space between them. If you do not like the suggested name, edit it according to your preferences.
Check the Display in menu option.
In the Template drop-down menu select the Default option.
Click the Plus (+) button on top of the Content states grid to create another state. Configure it as it follows:
Set the Title to News.
Set the State name to News (just click inside this text box).
Check the Display in menu option.
In the Template drop-down menu select the List option.
Click the Plus (+) button on top of the Content states grid to create another state. Configure it as it follows:
Set the Title to MX Spring Pack 2006.
Set the State name to SpringPack.
Do not check the Display in menu option.
In the Template drop-down menu select the Description option.
Click the Plus (+) button on top of the Content states grid to create another state. Configure it as it follows:
Set the Title to JSEclipse 1.5.0.
Set the State name to JSEclipse.
Do not check the Display in menu option.
In the Template drop-down menu select the Description option.
Click the Plus (+) button on top of the Content states grid to create one more state. Configure it as it follows:
Set the Title to Contact.
Set the State name to Contact (just click inside this text box).
Check the Display in menu option.
In the Template drop-down menu select the Contact info option.
Click Finish to apply the command.
Once the AJAX site is created, notice its generated structure - index, the master page, is located in the site root, and all the other panel states (default or not) are located in the content folder from the site root:
The main page, index, is automatically opened. Notice the four panels in its layout: Header, Menu, Content, Footer. To be able to edit them individually, access the AJAX Panels floater from the Window menu in Dreamweaver:
Right-click inside the title (AJAX Panels) bar or click the button on the right to group the panels list with the Files panel:
If you now click the AJAX Panels tab of the Files panel, it will display the AJAX site structure created with the New AJAX Site command above:
Notice the four panels listed in the AJAX Panels tab: Header, Menu, Content, Footer. The Content panel is the only one with more states, namely six (the default Home state corresponds to the Content panel selection). In browser, these states change according to the item selected in the Menu panel on the left, or if you click links that point to other pages/states that are not included in the menu (SpringPack and JSEclipse, in this case).
The other three panels (Header, Menu, Footer) are already populated with the right information. You can only edit one panel state at a time (it has to be selected in the AJAX Panels tab). After editing it, make sure to save the changes (Ctrl+S) before switching to another panel state (you will be prompted about saving the changes if you forget to do so).
Click the Content (default state) item in the master page hierarchy from the AJAX Panels tab. Replace the sample text below the title with:
----------
We have come a long way, growing along with our product line and learning as we were going along. This tells the story of the years that have passed - what we've done in the past few years, where we are heading, who are the guys behind the InterAKT success story and much more.
----------
Click the Company state of the Content panel. Replace the sample text below the title with:
----------
One of the most important asset a company has in this new millennium is the information. The way it is acquired, stored, analyzed and published is vital for success.
We provide solutions for content publishing over the Internet. This is our way of helping enterprises manage their internal structure, products and pricing ranges and transmit it to clients and partners.
Our tools enable web companies create applications for content management, Intranet and e-commerce - faster and more reliable.
Work smart! with the InterAKT products.
----------
Click the News state of the Content panel. Remove the default content (press Ctrl+A, and then Delete) and enter the following text:
----------
News
1. Bring your sites to life with MX Spring Pack 2006
MX Spring Pack 2006 short description.
See details
2. JSEclipse 1.5.0 released
JSEclipse 1.5.0 short description.
See details
----------
Note: Make sure to format the text a little after pasting it (so to provide a good appearance). Make the main title display as Heading 1, use the bold style for sub-titles etc.
Click the SpringPack state of the Content panel. Remove the default content and enter the following text:
----------
MX Spring Pack 2006
Tune up your sites with the new MX Spring Pack 2006, a suite of Dreamweaver extensions that will offer more interactive features to your site visitors.
Back
----------
Click the JSEclipse state of the Content panel. Remove the default content and enter the following text:
----------
JSEclipse 1.5.0
Highlights in version 1.5:
Revamped code completion for JavaScript function and classes.
Common idioms used in JavaScript and major libraries like Dojo and Prototype.
Outline panel shows class hierarchy.
Syntax highlighting and powerful editing assistance helpers.
Support for JDK 1.4
Code completion for JSDoc and inline parameter type definition.
Open function declaration.
Error reporting... and more!
Back
----------
Click the Contact state of the Content panel. Remove the default content and enter the following text:
----------
Contact
Web address: http://www.interaktonline.com/
E-mail: contact@interaktonline.com
Address: 1-11 Economu Cezarescu ST, AYASH Center, 1st floor, Sector 6, ZIP 060754, Bucharest, Romania
Phone: +4021 312.51.91
Fax: +4021 312.53.12
----------
Now that you added the static page content, what is left to do in order to have a functional basic site is to add some AJAX links and tooltips. Continue with the next topic to add these elements.
|
Neo314
09-04-2006
|
On the first step where it says, "With the new empty site selected in the Files tab of the Files panel, access the New AJAX Site command from the Site menu (in Dreamweaver)..." there is an aspect that confused me. If you click on the right corner of a the file panel title bar, a menu comes up that includes the "site menu". The New AJAX Site command is not on this menu. It is only on the site menu of the main menu bar below Dreamweaver's title bar. |