Dreamweaver tutorials
- Link Exchange System with Dreamweaver CS3
- Designing template
Now it's time to design a template for our link exchange system.
I have already prepared one for this tutorial - simply copy the structure below and paste it in between the <body></body> tags of your index.php file.
You are free to use this template as long as you keep a copyright link in the footer.
First download two images for this layout by right clicking on them and choosing Save As:
and put them inside of images folder.
<div id="header">
<p>your sites url (example: www.sebastiansulinski.co.uk)</p>
</div>
<div id="container">
<!-- Content goes here -->
<!-- /Content goes here -->
</div>
<div id="footer">
<p>© <a href="http://www.sebastiansulinski.co.uk/" title="Web Designer East Sussex" target="_blank">Web Designer East Sussex</a></p>
</div>
</div>
Next step is to create CSS and link to it from our index.php page.
To save us time I have already created a file screen_style.css which you can download here.
Place screen_style.css inside of a style folder in the root of your site.
Open index.php and expand CSS panel on the right hand side. Click on the Attach Style Sheet icon at the botton of the CSS section (Fig. 13).
Fig. 13
New window will pop up on the screen. Click Browse button and navigate to C:\webserver\Apache2\htdocs\linkexchangesystem\style. Select screen_style.css and click OK. Make sure that Link is selected and click OK to close this window (Fig. 14).
Fig. 14
Now you should be able to see the formated layout in Design view.
All we need to do now is to use index.php to create a Template our pages.
To do this open index.php and go to Insert > Template Objects > Make Template (Fig. 15).
Fig. 15
In new pop up window (Fig. 16) type in the name for your template - I gave it a name of links_temp and click Save button to create a template and close the window.
Fig. 16
Next you will be asked if you want to update links - click Yes (Fig. 17).
Fig. 17
You should now see a new folder in your site´s root folder called Templates. Inside of this folder you will find file links_temp.dwt.php which is storing the structure of our layout.
You should have links_temp.dwt.php currently open. If you haven´t, open it and in between the <!-- Content goes here --><!-- /Content goes here --> tags place <p>content placeholder</p>.
Now select <p>content placeholder</p> and go to Insert > Template Objects > Editable Region (Fig. 18).
Fig. 18
In the new window type in the name for your editable region - I have given mine the name of content_edit and click OK (Fig. 19). Save and close the links_temp.dwt.php.
Fig. 19
Now replace Untitled Document in between the <title></title> tags with Reciprocal Link Exchange System.
Open again index.php, select all (Ctrl+A) and press Delete button.
Now go to Modify > Templates > Apply Template to Page (Fig. 20).
Fig. 20
In new window select our template links_temp and click Select (Fig. 21).
Fig. 21
Save and close the file.
Go to resources folder and create 5 files giving them the following names:
- links_latest.php
- links_submit.php
- links_search_result.php
- links_already_exists.php
- links_submitted.php
Once you have created these files apply the template to all of them as well (Fig. 20 and 21).
In the second part of this tutorial we will learn how to create a control panel and how to display links from the database as well as how to create a search engine which will search for a specific link.
- Thank you for subscribing to our newsletter.
- To complete registration please click on the link in the email which has been sent to you.
- Invalid first name
- Invalid last name
- Invalid email address
Website Design Company | Website Design Company Sussex | Website Design Company Chichester | Website Design Packages | Tutorials Resources | Articles | Contact
© Web Design Tutorials – Sebastian Sulinski