Before I explain the workflow there is a bit of preliminary setup that will help down the road:. Install Firefox 2. Not completely necessary, but very fast. Create a new Dreamweaver Site in a local folder.
The site should be connected via ftp to the actual directory where your Joomla installation files reside. I prefer to use the CSS folder but any will do. If you have saved the html of the template in the CSS folder it should be fairly easy.
At this point, if the site is configured properly, working on the CSS in the usual DW manner should produce the desired results on the page of changing and adjusting the layout. Back up the original CSS file on the server and upload the local one to see the results on the site, continuing to adjust the code for the desired effect.
Clearly, a strong and flexible CSS based layout is important for this process to work well. Table based layouts are inflexible and would require constant back and forth between the CSS and the index. This method can also be employed, with care, to make changes to the original index. If index. I hope this short tutorial will be helpful and I will edit it in the future with more detailed information and more step by step instructions.
For the moment it should help anyone even passingly familiar with DW and Joomla. If there are requests I will make it more detailed. One important note on Dreamweaver: version 8 has some very nice CSS editing features that make work such as choosing colors and adjusting margins very easy. However, DW visual rendering of some CSS that shows up perfectly on the major browsers is atrocious, often distorting the original page beyond recognition. I find that even with these limitations working with DW speeds up my design work, but I wish there was a better visual editor that represented CSS layouts with more fidelity.
I have been trying the Beta version of the new Microsoft offering Expression, and I found that it renders pages with much more accuracy. While itr is very similar to DW in the usual Microsoft fashion of stealing rather than inventing I am not yet so used to it and it still has some Frontpage like features when it comes to the UI. The ideal solution would be a Firefox plugin that allowed for more visual CSS editing, or that had some sort of advanced menu system for inserting the more difficult to remember CSS tags.
Currently, it works quite well but, as mentioned earlier, it requires an encyclopedic knowledge of CSS that many designers lack. I will keep you posted. This article is also available on conticreative. Thanks Marco Needed to know a simplier way to style with Joomla and found it!
Nice One! When building Joomla templates, a good place to start is with a compliant CSS layout. I have a free manual available for Joomla Template Kit but the extension is commercial you check it out. I have used a very similar workflow to edit E, magento, and other scripts. I am actually writing a book about it because each time I tried to expand on the method I use I found there was a lot of other stuff I had to explain in order for it to work.
The basic idea is to reduce the dynamic pages to static pages linked to the local CSS files. So it can work with any dynamic script. Now, from menu import you new image. Browse to the location of your image and click on 'Open'. Place your cursor over the circle and click with your mouse. This will paste the picture neatly within the circle thus giving the picture a circular look.
Step 5 Repeat these steps for each of the swaps in each of the States by clicking on the appropriate State i. Step 6 Once all the pictures are finalized and are looking fine in Fireworks, the next step is to export all the swaps - the names of the swaps will be as follows:.
Select the swap image slice for State 1 and right-click on it. Select 'Export Selected Slice' from the drop-down. When you get a prompt to overwrite the existing slice with the same name, click 'o'kay'.
For the remaining Swap images that correspond with the menu buttons, repeat the same 'Export Selected Slice' instructions. Each time you select a Swap image to export ensure that the appropriate State in 'States Panel' is selected. Then export it to correspond with the same name i. The swaps can be selected from the list in the 'Export Dialog box'. Basically, you are overwriting them with the new ones.
Step 8 Once the pictures are exported preview the Dreamweaver template in I. E or FireFox to test if all the swaps are working fine. If you see a lock icon next to a layer, click on it to 'unlock' it. Make sure your own pictures are the same size as the existing images. You can use the marquee tool to crop your picture to get the same size. If you are replacing the Home-page image with your own image, use the same 'Copy and Paste Inside' technique as described earlier in the 'Swap image replacement' instructions.
Step 4 Once you've changed all the pictures you need to export the pictures again so that they are refreshed in the Dreamweaver template. Follow these instructions to export the images:. Step 5 When you preview the template in I.
Note : If you are replacing images in the header with your own, make sure they have a transparent background for best effects. Here are a good source for quality images and photo stock: www. Step 1 Open Dreamweaver CS5 software. Fill in your site details in the Site Setup Definition panel.
Fill in your site name and use the folder icon to browse to the folder where your template files reside on your local computer. Step 3 Once you have setup your site. A site cache will be generated on the right-side panel of Dreamweaver CS5. All your site files will be synchronized. In the Site Cache panel double-click on the file named 'template. This file is located inside the folder named 'Templates'. This is how your template will appear in Dreamweaver.
Click on image for large preview:. Modifications to the web site Step 1 To make major modification to the website, such as addition, deletion of a button, adding or changing a link to a button, modify the template. When you save the template. In most cases you will only be changing the link names and copyright info at the footer.
This is a defined editable region. Content is inserted in the editable region of the html files. Step 2 Save your modifications, and choose 'Update' to propagate changes to all other pages in the website that use the template. Step 1 Open the template. To edit the drop-down menus you will need to modify the code in the Code Inspector window. If you need to add further drop menus or change their positions contact us for easy instructions.
Scroll up to function fwLoadMenus. Post by sandstorm » Fri Oct 21, pm. Post by robdev » Sat Oct 22, am. Post by Webdongle » Sat Oct 22, pm. Post by sandstorm » Sat Oct 22, pm. All Rights Reserved.
Quick links. Edit Joomla template from Dreamweaver CS5 Post by robdev » Wed Oct 05, pm Hey Guys, As you guys are aware Dreamweaver cs5 is capable of connecting to joomla so you edit the code directly from dreamweaver. But this is what i don't understand, let me explain.
To be able to do this you need these things: 1. Install xampp on your local machine 2. Download joomla and extract the files to the htdocs directory of xampp 3. Open PHPmyadmin and create a database, then create or change root user password 4. Run joomla installation and connect to database 5.
Open dreamweaver cs5, go to site setup and add you local server using and type in your information 6. Ok i get through all of that and i can "discover" the local server and edit it in "live view" What i WANT to do is edit the remote server's template from my local machine. I understand that you need to install xampp on your local machine to be able to execute the php at runtime. But why can't i just "get" the remote joomla files, edit the files locally, then upload it back to the remote server I know we can access and edit the code from the remote server but i want to access the site in live view and access the page dynamically Re: Edit Joomla template from Dreamweaver CS5 Post by Webdongle » Wed Oct 05, pm But why can't i just "get" the remote joomla files, edit the files locally, then upload it back to the remote server
0コメント