Add and replace content in your resource template

Open your index.html page in Dreamweaver (if not open already).

Choose View>Design or click the Design button from the toolbar. Always work in this view to edit/add/delete content.

Tip: Click on Live viewat any time to see how changes you have made will look in the finished resource.(Note that hyperlinks won’t function in Design view — see below for advice about this.) To toggle back to Design view after looking in Live view, you need to click on Live view again to turn this view off.

Highlight (select) text in anypart of the template

Highlight text in areas of the template / Triple click on the text or click and drag across text to be replaced.

Replace template text with your text

Replace title / Highlight title by Triple clickor by Click and drag and type the title of your resource. (Note in the Property Inspector that Title has Heading 1 style).
Replace region headings / Highlight Region heading by Triple clickor by Click and drag and type the new heading. (Note in the Property Inspector that Region headingshave Heading 2 style)
Replace expandable headings / Highlight expandable headings by Triple clickor by Click and drag and type the new heading. (Note in the Property Inspector that Region headingshave Paragraph style)
Replace text / Highlight text by Triple clickor by Click and drag and type the new text. (Note in the Property Inspector that text has Paragraph style)

Copy text from other sources

Copy text from a word document / Copy (from source) and use Paste Special in Dreamweaver
Copy HTML and paste / Copy and paste and use the Property Inspector to style the text

Add or and delete images

Your images must be already located in the graphics folder in your resource site (see right panel and double click on graphicsfolder to open). The graphics folder already contains three placeholder images of recommended sizes (in pixels). You can use these images as a guide to size your own images.

Insert images / Click where you want to insert an image. Insert<Image, open (double click) the graphics folder and click the graphic you want to insert. Click OK. Put in Alternate (Alt) text when prompted and Click OK again.
Delete images / Click on the image and Delete

Hyperlinks (create links to websites, documents, media files or applets)

Create a hyperlink to a website / Highlight the text which will be the link, Go to Insert>Hyperlink. Link: Type in or copy and paste the complete URL (eg: Target: Choose “_blank” then OK.
Create a hyperlink to a documenteg Word doc, PDF / The item you will link to (eg a Word document) needs to be stored in the site folder before you create the hyperlink. For example, if you want to include a document in the resource, move or copy the document into the “documents” folder which is located within your site folder.
Highlight the text which will be the link, Go to“Link” in the Property Inspector and browse (by clicking on the folder icon) to the item to be linked, selectthe item and clickOK. Save.
Create a hyperlink to video, audio or animation fileeg .flv, .wmv, .mp3 and .swf files / The item you will link to (eg a video/movie file) needs to be stored in the site folder before you create the hyperlink. For example, if you want to include a video in the resource, move or copy the file into the “documents” or “applets”folder which is located within your site folder.
Highlight the text which will be the link, Go to “Link” in the Property Inspector and browse (by clicking on the folder icon) to the item to be linked, select the item and click OK. While text is still highlighted, go to “Class” in the Property Inspector and choose “Popup”. This allows the linked item to appear in a popupscreen <Save.
Note: When the user clicks on this link in the final resource an audio or video file will automatically play in the user’s PC default media player.
Tip: To select “popup” from the Class menu click on the menu and type the letter “p”.
Create a hyperlink to an applet (multimedia or interactive asset) eg Presenter or Captivate resources, and audio and video players (containing audio or video files) / An applet is a small program that can be linked from a web page. The “applets” folder typically contains interactive assets such as audio or video players, interactive activities, Captivate and Presenter assets. When the applet is created it is published to a folder containing all the files needed to run the applet. Move or copy this whole folder into the “applets” folder in your site before creating the hyperlink.
Highlight the text which will be the link. Go to“Link” in the Property Inspector and browse (using the folder icon) to the applets folder and the sub folder containing the applet. Inside the sub folder select the file which launches the applet, usually a file named “index.htm”. Select and click OK.
Create a hyperlink from an image / You may wish to embed a hyperlinkin an image (as well as in a text label), eg embed a link in a thumbnail image of the item you are linking to.
First ensure the media folder or file you are linking to is in the site folder, eg inside the “documents” or “applets” folder.
Insert the image you will link from into the resource page. Click on the image. Go to“Link” in the Property Inspector and browse (using the folder icon) to the file you want to link to. Select and click OK. (Check the instructions above for the file type you are linking to.)
To make the target file open in a popup continue with the following steps:
Click on the image containing the hyperlink.
In the “tag bar” (immediately above the Property inspector) click on the <a> tag.

Go to “Class” in the Property Inspector and choose “Popup”. This allows the linked item to appear in a popupscreen <Save.

Test hyperlinks by previewing the resource in a browser

Test hyperlinks / Test hyperlinks by viewing the resource in a browser. Press F12 or go to File< Preview in Browser. If a message appears in the title bar “To help protect your security … Click here for options”, click and choose “Allow blocked content”.

Delete or add a Region

Delete a Region / It is advisable not to delete a region until you have completed putting in your content. (It is easier to delete a region than to add one.)
To delete a region, click once on each blue area within the region and delete (ie Region heading, Region content, Expandable heading and Expandable content). This will result in editable blue areas remaining visible in Design view but not in Live View.
(Note: If you click and drag to highlight and then delete, content will be deleted but not formattingso gaps will appear in your page in Live view.)
Add a Region / Although it is possible to add a Region in the template, it is a complex process involving HTML code. For this reason, it is not advisable to attempt adding a region without expert assistance from your technical support staff.

Format text

Present text in block quote style / Highlight the text. Go to the Property Inspector and click the text indent button. To remove block quote, ensure text is highlighted and click Text outdent button.


Present text in bold, italic, as lists, indented etc / Use the buttons in the Property Inspector.

Footer elements

TAFE logo / TAFE logo is editable. To remove, highlight and delete. Insert a replacement logo if required. Ensure the replacement logo is the appropriate size and copied into the graphics folder before it is inserted.
Copyright link: / A standard Copyright/Acknowledgments page (copyright.htm) is included in the project folder and linked to the footer. Specific information should be added or deleted on this page by opening copyright.htm in Dreamweaver and modifying the text in Design View. (See Copy text from other sources above)
Accessibility link / A standard Accessibility page (access.htm) is included in the project folder and linked to the footer. Specific information should be added or deleted on this page by opening access.htm in Dreamweaver and modifying the text in Design View. (See Copy text from other sources above)
Please refer to W3C(World Wide Web Consortium) Accessibility Guidelines.
Technical requirements / A standard Technical requirements page is provided (technical.htm) in the project folder and linked to the footer. Specific requirements should be added or deleted on this page by opening technical.htm in Dreamweaver and modifying the text in Design View. (See Copy text from other sources above)
Help / A standard Help page (help.htm) is included. Specific information should be included in the project folder and linked to the footer. Specific requirements should be added or deleted on this page by opening help.htm in Dreamweaver and modifying the text in Design View. (See Copy text from other sources above)

Finalise your product

  1. Ensure content is completed.
  2. Check in Live View that final presentation is appropriate. If further adjustment is necessary, return to Design View and complete further work and Save. Check again in Live View.
  3. Check all links are working. Go to File<Preview in browser and choose the appropriate browser (eg IExplore, Safari or Firefox). If a message appears in the title bar “To help protect your security … Click here for options”, click and choose “Allow blocked content” (see Troubleshooting below). If links are not working, return to Design View to fix. Save and check again in a browser (File<Preview in browser).

Tip: Press the “F12” key to preview your page in a browser.

  1. Return againto Design Viewfor a final check, make any final changes and/or Save.
  2. Close Dreamweaver. Open your resource (double click the “index.htm” file) from your resource folder.

Tip: Before copying or distributing your resource remove the folder containing the finished example which was provided for you—this will be a sub folder within your resource folder.

Troubleshooting

Security message in top bar
See image below. When you are looking at your resource in a browser, the following message might appear: To help protect your security, internet Explorer has restricted this webpage from running scripts ….Click here for options.
and/or
This page is better viewed with Java script enabled / Click and choose “Allow blocked content” or enable JavaScript by:
  1. Select Toolsfrom top menu
  2. Choose Internet options
  3. Click Security tab
  4. Click Custom Level
  5. Scroll down to Scripting
  6. Under “Active Scripting” select Enable and click OK.

Formatting text
I’m having problems copying and pasting from my word document. / Select the text you wish to copy from your word document and then use Edit<Pastespecial >Paste as: Text only, then use the Property Inspector to format the text.
How do I style my text with bullet points and number lists? / Bullet points are an unordered list. Highlight text and, in the Property Inspector, click bullet button (‘Unordered List’ button) or numberlist(‘Ordered List ‘button).
How do I remove bullet points (Unordered List) or number lists (Ordered List)? / Highlight the text and, in the Property Inspector, click on the unordered list icon (it works like toggle on / off).
How do I style my text with blockquote? / In the Property Inspector, next to the bullet and number list icons, there are Text Outdent and Text Indent button(see Format text section above for image). Use the Text indent button to create a blockquote style. If you no longer require the blockquote style, Highlight the text and click on Text Outdent to remove styling.
I have lost the style of my heading or paragraph, what can I do? / Highlight the text you need to re-style, and use the Property Inspector— choose a drop down item from the Format drop down menu (paragraph, heading) or buttons (unordered list, ordered list item or indent to create blockquote.
Images
Do I need to add alt text to images on the page? / When you go to Insert>Image, you will be prompted with a dialogue box to include alternate text. This text is read by screen readers to explain images for users who are visually impaired. Unless the image is purely decorative, and does not add to the content in any way, the alternate text can be excluded. If it adds value, then it should be included so no users are disadvantaged.
General
Can I add additional regions? / Although it is possible to add a region in the template, it is a complex process involving html code. For this reason, it is not advisable to attempt to add a region without expert assistance from your technical support staff. The template was designed to accommodate 6 regions. You may be able to accommodate your content by incorporating content into an existing region or using the Expandable headings to differentiate content.
Text has disappeared, what have I done wrong? / The text is there, you just need to style it. Highlight what you think is the text, and, using the Property Inspector, format with paragraph text. Then style accordingly.
I cannot see the ‘Property Inspector’ / If the Property Inspector is not displayed, click on the grey bar next to Properties (or go to Window > Properties).

1