If the links are grouped right-click on the links and click on 'Ungroup' to edit the links You can also click on the 'T' text tool command in the 'tools' panel and place your cursor over the text to edit it. This is done in State 2 layer. In the 'States' Dialog box that appears select 'State 2' from the list. Step 5 Once all the button labels have been modified they are ready to be exported.
We use the same steps as exporting the 'Company Name' slice. The slices will be highlighted in light green. Step 6 Select the first button slice with your mouse and then hold down the shift key and select the next slice, repeat with the shift key pressed until all the button slices have been selected.
In the export dialog box that appears, browse to the location of your images folder inside. You will be prompted to overwrite the existing buttons slices with the same name. Click 'okay. Once the images are exported they will automatically be reflected in the site. Each State will have a different swap representing each of the sections. Click on each of the States to view different instances of the swaps. Step 4 To change the first swap image, ensure that 'State 1' is selected in the 'States' panel.
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. When you make a change to a template, Dreamweaver prompts you to update the documents based on the template, but you can manually update the current document or the entire site if necessary.
Manually updating template-based documents is the same as reapplying the template. You can, however, use Dreamweaver to change a template for a Contribute site. Contribute retrieves new and changed templates from the site only when Contribute starts up and when a Contribute user changes their connection information.
If you remove an editable region from a template, a Contribute user editing a page based on that template might be confused about what to do with the content that was in that editable region. The template file is deleted from your site. Documents that are based on a deleted template are not detached from the template; they retain the structure and editable regions that the template file had before it was deleted.
You can convert such a document into an HTML file without editable or locked regions. Legal Notices Online Privacy Policy. User Guide Cancel. You can perform the following template management tasks using the Assets panel:. Create a template Edit and update templates Apply or remove a template from an existing document. Open a template for editing. You can also manually update the documents for template changes if necessary.
Open and edit a template file. In the list of available templates, do one of the following:. Right-click the template and click Edit.
Double-click the name of the template you want to edit. Select a template to edit, then click the Edit button at the bottom of the Assets panel. Save the template. Dreamweaver prompts you to update pages based on the template. Dreamweaver displays a log indicating the files that were updated. This is achieved in the CSS generated by the Spry command, which we will discuss in a moment. In the Spry Parameters box you can assign a name for the Spry Tooltip, specify whether you wish the Tooltip to follow the mouse or 'hide on mouseout'.
You can add an effect, show a delay and even defining a position for the Tooltip. When you have entered your text for the Tooltip box and defined your parameters in the 'Properties' , Dreamweaver CS5 will generate a folder with two files, they are: SpryTooltip. The Spry Assets folder with these two files must be uploaded to the same location as your html files on your remote server.
You can view this in 'Code view'. You can define the font face, size, color, background color or image.
0コメント