Dreamweaver Notes


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dreamweaver Notes

  1. 1. Notes
  2. 2. Manage Sites <ul><li>Click Site- Manage Sites, click New Site (Advanced tab) </li></ul><ul><li>Under Site name type your site name </li></ul><ul><li>Click on the yellow folder to set your Local root folder </li></ul><ul><li>Click on the yellow folder to set your Default images folder </li></ul>
  3. 3. Using Exported files from Fireworks <ul><li>Open template.htm </li></ul><ul><li>Delete the navbar section (keep this section selected) </li></ul><ul><li>Click Insert- Image Objects- Fireworks HTML </li></ul><ul><li>Click Browse to select navbar.htm </li></ul><ul><li>Click File- Save </li></ul><ul><li>Click F12 to preview in web browser </li></ul>
  4. 4. CSS Layers <ul><li>In the Layout view, click Draw Layer </li></ul><ul><li>Under Layer ID, label the layer </li></ul>
  5. 5. Inserting Placeholder Text <ul><li>Click inside the layer where you will insert the text </li></ul><ul><li>Click Insert- Technocurve- Lorem Ipsum Text </li></ul><ul><li>Select how many paragraphs you need </li></ul><ul><li>This generator will give you text to work with so you can set up the template for the entire site </li></ul>
  6. 6. Creating Footer Navigation and Copyright line <ul><li>Underneath the placeholder text, type the navigation and copyright line </li></ul><ul><li>Highlight each section and type the page name next to Link (make sure .htm is the file extension) </li></ul>
  7. 7. CSS Tags <ul><li>Click New CSS Rule to create the following Tags: </li></ul><ul><li>a - the look of the links </li></ul><ul><li>h1 - the look of heading 1 </li></ul>
  8. 8. CSS Classes <ul><li>Click New CSS Rule to create the following Classes: </li></ul><ul><li>.body - the look of the body text </li></ul><ul><li>.copyright - the look of the copyright </li></ul><ul><li>Double click on any tag, class, or layer to edit their properties </li></ul>
  9. 9. Applying CSS Tags and Classes <ul><li>The a tag is applied automatically to hyperlinks </li></ul><ul><li>To apply the h1 tag, click on the line of your heading </li></ul><ul><li>Under Properties, change Format to Heading 1 </li></ul><ul><li>To apply the . body class, highlight your text </li></ul><ul><li>Under Properties, change Style to body </li></ul>
  10. 10. Save as Template <ul><li>Click File- Save as Template </li></ul><ul><li>Under Site select your site </li></ul><ul><li>Save as jade_valley_template </li></ul><ul><li>(use a meaningful file name) </li></ul><ul><li>Set editable regions by selecting the regions of the template that you will edit on each page </li></ul><ul><li>Click Insert- Template Objects- Editable Region </li></ul><ul><li>Give the region a meaningful name </li></ul><ul><li>Archive template.htm and navbar.htm files </li></ul>
  11. 11. Creating Pages with the Template <ul><li>Click File- New, select your template (Templates tab) </li></ul><ul><li>Click Create to edit the new page </li></ul><ul><li>Next to Title, type a title for the page </li></ul><ul><li>Click File- Save </li></ul><ul><li>Type the file name (make sure .htm is the file extension) </li></ul>
  12. 12. Hyperlinks <ul><li>Select the object you wish to make a Hyperlink </li></ul><ul><li>Under Properties, click and drag Point to File symbol to the page you want to make a Hyperlink </li></ul><ul><li>You could also type the file name or website next to Link </li></ul>