| |
| |
Now that the template file is complete, you can attach it to the nine empty .html files you created earlier, and you can add the site content.
Follow the instructions below to complete the nine site pages:
Open the home.html page. In the Assets tab of the Files panel, click the Templates button on the left (second last) to see the available templates, and drag and drop in page the html_tmp template:
Note: Notice that you can only work in the template editable region and you are not allowed to change anything else in page.
Press Ctrl+A to select the default content in the editable region ("HTML content"). Copy the following text in the clipboard and paste it on top of the selection:
----------
InterAKT Online is a self-funded web development company that started in 2000. Our goal is to simplify web development in all possible aspects.
The software products created and provided by InterAKT Online include bundles, extensions, web applications or free products.
This small site here presents the MX Spring Pack 2006 bundle.
----------
Save the home.html page, upload it to the server, and close it.
Open the menus.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
Do you want to add CSS menus in your websites? MX CSS Menus is a Dreamweaver extension that helps you create horizontal, vertical, tabbed, and expandable menus in your websites. With 23 predefined skins, and the possibility to customize them and create new ones, this is the perfect solution to your problems. Easy to implement and use, it is surely an eye-catcher!
----------
Place the cursor right before the entered text, inside the text paragraph (check in Code view that it is placed after the opening <p> tag). From the logos site folder, include in page the MX CSS Menus.gif image as shown below:
Click the Images : Image icon in the Common tab of the Insert bar:
In the dialog box that opens browse to the MX CSS Menus.gif image located in the logos site folder (that you previously copied in your site root), and select it to be inserted in page:
Another dialog box will pop-up after you press OK in the Select Image Source one, namely the Image Tag Accessibility Attributes dialog box. Just click Cancel as explained here.
Press the right arrow key to deselect the image inserted in page, and then Space to create some space between the image and the text.
Save the menus.html page, upload it to the server, and close it.
Open the impakt.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
Did you ever feel you're doing the same coding sequence again and again? ImpAKT helps the Dreamweaver developers create dynamic websites much faster. Automating most common programming tasks and patterns, ImpAKT helps even inexperienced HTML designers do complex stuff. ImpAKT includes four sub-products to handle your file and image upload needs, the user authentication section in your sites, validate your visitors' input and send e-mails on form submit.
----------
Right after the opening <p> tag of the text you just entered, include the ImpAKT.gif image in page as you did above.
Save the impakt.html page, upload it to the server, and close it.
Open the file.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
MX File Upload is a Dreamweaver extension that allows developers implement file upload in their web projects. Using MX File Upload you can now create your own image galleries or file repositories within minutes. You can select how to resize the image, allowed only specific file types, set maximum file size and choose how to save the file names in the database without any programming knowledge.
----------
Right after the opening <p> tag of the text you just entered, include the MX File Upload.gif image in page as you did above.
Save the file.html page, upload it to the server, and close it.
Open the email.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
MX Send E-mail increases your site interactivity by providing "send email" capabilities to your web forms. The product will send HTML and text emails to any valid email address. User registration, account activation, shopping cart contents, forum messages? All those messages will be instantly delivered to their target audience. Get closer to your customers and interact with them!
----------
Right after the opening <p> tag of the text you just entered, include the MX Send E-mail.gif image in page as you did above.
Save the email.html page, upload it to the server, and close it.
Open the login.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
MX User Login is a Dreamweaver extension that allows you to easily build complex user registration and protected sections. It does your work with just a few clicks: user registration form, re-type password check, encrypt passwords in the database, e-mail account activation, multiple user levels with specific redirect on login, and remember password in your login page.
----------
Right after the opening <p> tag of the text you just entered, include the MX User Login.gif image in page as you did above.
Save the login.html page, upload it to the server, and close it.
Open the validation.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
If you are tired of visitors who can't enter the correct information in your forms, MX Form Validation is the solution to your prayers. Use one of the predefined rules (e-mail, date and time formats, numeric values, credit card numbers, ZIP codes, etc) or create your own mask and validate both Client Side and Server Side helping your users enter the correct information. Improve your users work flow and minimize typing errors.
----------
Right after the opening <p> tag of the text you just entered, include the MX Form Validation.gif image in page as you did above.
Save the validation.html page, upload it to the server, and close it.
Open the ktml.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
KTML is an online HTML editor that helps you edit your website content directly in a browser. The editor loads fast and has an easy-to-use interface (similar to desktop editors). The latest version offers superior Word compatibility, a revolutionary Image Editor and XHTML 1.1 support. KTML has wide browser compatibility and supports most platforms (including MAC).
----------
Right after the opening <p> tag of the text you just entered, include the KTML.gif image in page as you did above.
Save the ktml.html page, upload it to the server, and close it.
Open the company.html page, and transform it into a template-based one as previously shown.
Replace the default text in the editable region ("HTML content") with the following one:
----------
InterAKT's main lines of business stay in creating tools for software development - for Intranet, Web Publishing, and E-commerce. Most of our tools extend Dreamweaver and offer more productivity to developers and designers alike. Our mission is to provide functionality without any compromise on quality.
We are Macromedia partners for extending Dreamweaver. While we will continue to offer the best possible solutions to our Dreamweaver customers, InterAKT is looking into new markets where our experience and technology might help. We view the Flex, .NET, JSP and Web 2.0 technologies as new areas where we can make a difference, and in the near future our offer will include a more varied line of solutions.
----------
Save the company.html page and upload it to the server.
With this you added content in all your HTML site pages. Preview the company.html page in browser (press F12) and test the application you just built. For example, click the Products -> ImpAKT -> MX Send E-mail menu item and see the corresponding content displayed below the menu:
Notice how each menu item points to a different .html file and how the menu shows on every single page.
Use this opportunity to check out a feature that MX CSS Menus provides, namely how to menu restrains to fit inside the browser window, when you resize it to smaller dimensions (only for some browsers):
In the tutorial you just completed, you created an HTML site with template-based pages - the static CSS menu is included in the template file.