Town of Elkton

Website Management

Instructions Guide

Dreamweaver Interface

Reference the image on the previous page

A – Split button – use this button to access the html code for the web page

B – Title – Use this area to change the title for a new or existing page, this shows up at the top of the web browser

C – Preview button – click this drop down menu to view a preview of the page in your browser

D – Named Anchor – click this button when you want to create an anchor that can be used to create a link to a specific section of a page

E – Files Panel – access all the files associated with the web site

F – Format - Use this drop down menu to choose the format for your text in the body area of the page such as heading 1 – 6 or paragraph text

G – Class - use this drop down menu when you want to position an image in the page

H – Link – use this field to type the URL for an outside web page, the anchor name, external file, or page name

I – Insert – use this menu to insert an image or metadata into the page

J – Design - This shows and allows you to edit the design only

K – Refresh – This will show any changes that you have made in the code area

L – Target – This allows you to choose how a link will be opened, you will typically only use this when you are creating a link that will take you to a page that is outside the Elkton web site and you will choose _blank to open it in a new window

M – Main content area

N – Sidebar content area

O – Connect to server – make sure this is clicked before you try to update the files on the live site

P – Put files – this will allow you to put the files on the server when they are selected

Q – Page title – Make this appropriate for the page as a whole to generally describe the content of the page, this can be the same as the title entered in the title field (B)

Keyboard Shortcuts

Press ctrl + C to copy highlighted text

Press ctrl + V to paste text

Press ctrl + S to save the page

Press ctrl + A to select all text

Press shift + enter when you want to drop down to the next line without creating a space in between

Tips for file names and file management

  • Use short descriptive names in all lowercase with no spaces for all of your files including image, HTML files, and PDFs.
  • Always rename a PDF you are given that needs to replace an existing one with the same exact name as the existing file including the .pdf file extension
  • Don’t move any of the files contained in the Elkton folder on your computer desktop to any other location

Getting Started

  1. Open Dreamweaver by double clicking on the icon on your computer desktop
  2. Most edits will take place in the Main Content Area/Body area (M)
  3. Whatever shows up in the main content area will be visible to the viewer except anchor symbols
  4. Specific instructions will be given if any code needs to be changed in order to perform a specific task
  5. You can edit text by selecting and deleting the portion that needs or by placing the cursor at the end of the text that needs to be deleted and pressing backspace

How to make changes to an existing web page file

  1. Double click the name of the file you need to make changes to in the Files panel (E)
  2. Make your changes (see instructions below for help making changes)
  3. Save the file
  4. Update the page on the live site (see instructions on page 10)

Creating a new page from the template

The template is wired up with everything you need to make a page that is consistent with the rest

of the web site. It is important that you do not overwrite this file so always save as a new file

name when creating from a template.

  1. Double click the temp.html file in the files panel (E)
  2. Go to File Save As and give the file a new descriptive name (remember file naming tips)
  3. Change the title (B) of the page (Leave the first part Town of Elkton | and replace the part after the vertical bar to something appropriate for the page and press enter
  4. Change the title of the page in the body area to something appropriate for the page (Q)
  5. Change the section heading to something that describes the section or delete it if it’s not needed
  6. Select and replace the paragraph text with the content for this page (See instructions on page 5 if pasting text from Microsoft Word)
  7. Make other formatting changes such as adding more section headings or breaking text into paragraphs (see instructions on page 5)
  8. Add the page to the site index (see instructions on page 9)
  9. Put the page on the live site (see instructions on page 10)

Adding Metadata

Metadata allows search engines such as Google to find information about the web site. It also helps the search function within the web site find the things that people are looking for. This only needs to be added to new pages. The rest of the pages already have metadata.

  1. Click on the insert menu item (I)
  2. Roll over the HTML item
  3. Roll over the head tags item
  4. Select the keywords item
  5. Enter any words that you have think of that relate to the page and that people would use to search for something. It is best practice to use the word Elkton in front of each phrase. You can use a combination of different words that mean the same thing. example: elkton community center, elkton area community center, elkton fitness center
  6. Click ok
  7. Repeat steps 1 – 3
  8. Select the Description item
  9. Type a short description of what is contained in the page. One sentence will do, but be as detailed as you like. This is what shows up underneath the link when the search engine pulls it up. Example: Information about the Elkton Area Community Center

Adding a new section heading

Use headings to create hierarchy within the page and try to stay consistent with the rest of the site’s heading structures. Most content sections use Heading 3, however start a new page off with a title and make it Heading 1.

  1. Click on the last line of the paragraph text where you want the section heading to appear below it
  2. Press enter on your keyboard
  3. Type the name of the section heading
  4. Select the text you just typed
  5. Click the format drop down menu (F)
  6. Select the appropriate heading number for the page
  7. Press enter and start typing your paragraph content

Pasting text that was copied from Microsoft Word

Text copied from word CANNOT be pasted directly into the body content area of the page due to formatting complications

  1. Copy the text in Word
  2. Create the insertion point in the Dreamweaver body content area (usually just pressing enter after a section heading or another paragraph will do this)
  3. Type a short amount of filler text, example: filler text
  4. Click the Split button near the top (A)
  5. Select the filler text in the body area of the page
  6. This text will then be highlighted in the code area at the top
  7. Click at the end of the line before the </p> tag and delete the filler text but do not delete the <p> tag at the beginning of this line (ex: <p>filler text</p> delete what is in between the <p> and </p>
  8. Your cursor should still be in between the <p> and </p>
  9. Paste (ctrl+V) to paste the text into the code
  10. Click the Design button (J)
  11. Click the refresh button (K)if the text doesn’t automatically show up in the body area
  12. Make any formatting changes to the text you pasted in the body area by clicking then hitting enter after where a new paragraph should start or creating new section headings where appropriate

Creating a link to an outside web page

Main Content Area - Part 1

  1. Type and select the text that will be a link or if it is text within a paragraph just select the words you want to show up as a link
  2. Click inside the link field in the properties panel near the bottom (H)
  3. Type the full URL of the page including the or
  4. If you have the page you want to link to open in a browser select the full URL in the address bar of your browser by clicking in the address bar and pressing ctrl+A,
  5. press ctrl+C to copy,
  6. click in the link field in Dreamweaver (H) and pressing ctrl+V
  7. Press enter
  8. Click the Target Drop down menu (L) and choose _blank from the list
  9. Click the Preview button (C) and choose your browser from the drop down menu
  10. Test the link by clicking it

Side bar area - Part 2

  1. Create your insertion point –
  2. if this is the first link in the sidebar click after the text you want the link to appear below and press enter
  3. if the link is going in a list of other links click at the end of the link the new link will appear below and press shift+enter (remember alphabetical order)
  4. Type the text for the link and select it – the user sees this so use proper typing conventions
  5. Follow steps 2 through 8 of part 1 above

Creating a link to a web page within the Elkton site (one of the pages in the files panel)

  1. Follow steps 1 and 2 of part 1 above (read part 2 for info about how to add link to sidebar)
  2. At step 3 of part 1 instructions type the file name in the link field (H) instead of a URL for the page within the Elkton web site that you want to link to example: police.shtml
  3. Disregard Step 4 of part 1
  4. Follow steps 5, 7, and 8 of part 1

Creating a named anchor to link to a specific section of the page

  1. Click at the front of the line of text you would like the link to go to (this is usually a section heading)
  2. Click the named anchor button in the Insert panel near the right top (D)
  3. Type a name in the box that pops up something short but descriptive all lowercase no spaces example: policechief
  4. Click ok

Create the link that will go to a named anchor (specific section of page)

  1. Create or select the text that will be used as the link (see creating link instructions on page 6) for information about how to put the link in the sidebar or body text)
  2. Click in the link field (H) and type the name of the anchor you have already created preceded by # example: #policechief
  3. Press enter
  4. Click the preview button (C) and choose your browser to open the page in a browser
  5. Test the link

Note: Using anchors often means you have a longer page and are trying to make it convenient to find information by creating links that go down to a specific part of the page, therefore it is also useful to have a back to top link so the user can easily get back to the list of anchored links. The temp.html page already has a named anchor for the top of the page so all you have to do is create the link.

Creating a back to top link

  1. Type the text Back to top at the end of a section in the main content area of the page
  2. Select this text
  3. Type #top in the link field (H) and press enter

Note: If you need to add a back to top link to a page that already has other back to top links on it you can just copy and paste the link but be sure to use the keyboard short cuts ctrl+C and ctrl+V

How to insert a picture and position it

  1. Make sure the image has the proper size and resolution (see instructions on 11)
  2. Make sure the image has a short descriptive name in all lowercase and no spaces
  3. Make sure the image has been placed inside the images folder inside the Elkton folder on your computer desktop
  4. In Dreamweaver, Create an insertion point by clicking in front of the line of text that you would like the top of the picture to be aligned with in the main content area
  5. Click the insert menu item (I) at the top of the Dreamweaver interface
  6. Choose insert image
  7. Browse to the images folder by scrolling down in the box that pops up and select the image file you would like to insert
  8. Click choose when you have found it
  9. Make sure the image is selected in the main content area, it should be automatically but if not just click on it
  10. Click the class dropdown button (G) and choose either fltlft if you would like the image to be aligned to the left on the page or fltrt if you would like it to align to the right

How to add a new PDF or other document that needs to be linked to from within the page

  1. Save or rename the PDF/other file with a short descriptive name all lowercase with no spaces
  2. Make sure the file is placed in or saved into the PDF folder inside the Elkton folder on your computer desktop (it doesn’t have to be a PDF necessarily this is just the folder for external NON-HTML files)
  3. Create the link as normal (see instructions on page 6) but in the link field (H) type the name of the file including the .pdf extension example: businessform.pdf
  4. Test the link

Note: When updating a file that already exists as a link on the web site be sure to give the updated file the same exact name as the current file and replace the old one with the new one in the PDF folder in the Elkton folder

How to add a new web page to an area of the drop down navigation

  1. Decide which content area of the web site the page should fall under (Town Departments, Community, etc)
  2. Start at the top most file in the files panel (E) and open it
  3. Click the split button near the top (A)
  4. Make sure that the code section is scrolled all the way to the top
  5. Slowly scroll down in the code section until you find the code comment (code comments are shown highlighted in yellow) that says <!--DROP DOWN MENU CODE STARTS HERE--> (see image below)
  6. Continue scrolling if necessary until you find the code comment that is the title for the content area where you are placing the new page
  7. Directly below this code comment select the full line of code beginning with <li> and ending with </li> you only need to select one line
  8. Press ctrl + C to copy this line of code
  9. Create an insertion point by clicking at the end of the line of code (after the </li>) that you want the new item to appear below and press enter (remember alphabetical order)
  10. Press ctrl + V to paste this line of code
  11. Change the file name to reflect the name of the new page
  12. <li<a href="meetcouncil.html">Meet the Council</a</li>
  13. Change the name of what appears in the drop down menu to reflect the new item
  14. <li<a href="meetcouncil.html">Meet the Council</a</li>
  15. Copy this new line of code you have created beginning with <li> and ending with </li>
  16. Save the page and close it
  17. Open each file in the files panel individually (E) and add the line of code in the same place in the code by pressing ctrl + V to paste it in place. Follow Steps 3 through 6 to find the right spot.
  18. Be sure to repeat this process on each page and save
  19. Test the link
  20. Add the page to the site index (see instructions below)

Adding a page to the site index

  1. Open siteindex.html in the files panel (E)
  2. Click at the end of the link that the new page link will appear below and press enter
  3. Type the name of the new page as it appears in the drop down menu
  4. Select this text and create the link by putting the file name in the link field (H) and pressing enter, example: newpage.html
  5. Test the link

How to insert a table

  1. Open tables.html in the files panel (E)
  2. Select one of the table options by clicking in it then clicking the green lines that appear at the top of the table (a black outline appears around the table when it is properly selected)
  3. Press ctrl +C to copy the table
  4. Open or go back to the page you want to insert the table into
  5. Create an insertion point by clicking at the beginning of the line of text where you want the top of the table to align with
  6. Press ctrl + V to paste the table
  7. Click the split button (A) near the top
  8. Make sure the table is selected by clicking inside it and then clicking the green lines that appear at the top of the table
  9. The code that represents the table will be highlighted in the code area
  10. Near the top of the code you will see <table class= “commissioner”>
  11. Place your cursor at the end of the word commissioner before the quotes
  12. Press the space bar then type fltrt if you want to align the table to the right or fltlft if you want to align the table to the left
  13. Click the refresh button to see the change (K)
  14. Be sure you format the number of rows and columns before adding content to the table

How to format a table