Week 10 - November 21st 2006

Snippets Panel (Part 2)

In addition to the pre-written scripts in the Dreamweaver Snippets Panel, you can also create your own Snippets to use over and over again. Snippets can be any bit of code that you want, usually something that you tend to use a lot.

To create a Snippet, first write the piece of code as you normally would in Dreamweaver. Now, highlight all the code you want to make into the Snippet and click on the "Add Snippet" button on the Snippets Panel. A dialogue box will appear:

New Snippet Dialogue Box

First, give your Snippet a name, something that makes sense based on the code. You can also add a description of your Snippet. After this, you will see two options:

  • Wrap Selection - This allows you to write code that will wrap around whatever is highlighted when you insert the Snippet.
  • Insert Block - This will insert the Snippet where the cursor is placed

"Wrap Selection" is a little more complex than "Insert Block", because there are two boxes in which to add code. They are labeled appropriately, "Insert Before" places that code before the highlighted area and "Insert After" places the code after the highlighted area. Most Snippets you create will likely be "Insert Block", but you have the option to choose.

In the Snippets panel, you can create your own folder to put your Snippet in, or just add it to the categories already created. In the following example, I have created a folder called "My Snippets".

Snippets Panel

The buttons at the bottom right of the panel include New Folder, New Snippet, Edit Snippet, and Delete Snippet. You can also add Snippets to your page in two ways, the first is to double-click the Snippet itself, but you can also select the Snippet and click on the "Insert" button.

Meta Tags

Meta tags are a very important part of any website. These are what search engines read when they scan your website. All websites should have at least basic Meta tags. Dreamweaver has a few built in Meta tags that you can insert and fill in the appropriate content. To insert them go to Insert > HTML > Head Tags. You can also use the HTML menu in your insert panel, and use the Head pull-down menu to select the Meta tag. The Built in Meta tags are:

  • Keywords - These are the keywords and phases that you want associated with your page (i.e. what people type into a search engine). You should include these keywords and phrases in the text on your page, and you should also include spelling mistakes.
  • Description - This is the text that will appear below your website link in a search engine. It should provide a concise description of your website and include many of the keywords and phases from above. It should be no longer than 150 words.
  • Refresh - This can be used to continually refresh your page after a set time has elapsed, or to forward your page to a new URL.
  • Base - This states the base URL for your website. I believe it can be used to allow you to reference other pages in your site without having to use ../
  • Link - This is a tag used to link external files, this is what was created when we worked with external stylesheets.

In addition to these Meta tags, here are some others to be aware of:

  • Content-Type – this is automatically put into all new HTML pages by Dreamweaver
  • Author – You can specify the author of the webpage
  • Expires – You can add an expiry date that search engines read, that way they can tell how "fresh" a page is (maximum expiry date 2 years)
  • Language – you can specify the language of the document, good for accessibility
  • Robots – you can specify if you want search engines to catalogue your site or not
  • Rating – you can specify a particular rating to your site
  • Location – you can specify the location for the site/business
  • Org_type – you can specify the organization type of the page

Homesite 5

Homesite is another Macromedia/Adobe program used for web design. This is not a WYSIWYG editor, it works with code. I believe the other Fleming web design courses use this program.

Aptana

Aptana is a relatively new web design program that is very similar to Dreamweaver. It hasn't been in development as long as Dreamweaver so there are still some unsupported features in it. But the thing about Aptana is that it is completely free. Of course this isn't to say that you shouldn't use Dreamweaver, because I still use it as my primary web design tool, but it's something you should know about, and in the event you do start a business and can't afford the Adobe software, this is a good alternative.

Aptana Website