Practice Page
We'll begin by opening a page that contains the content of our final page without any of the necessary formatting. This page is called practice.htm. Here is how the practice page looks:
The header layout table has already been created for you, because it involves a bit more complicated formatting (which will be covered in our next Dreamweaver workshop). Let's begin by creating the other two layout tables for the body and footer and moving the text into those tables.
Header Information and META Data
It is important to include the proper header information on each of your pages. Dreamweaver sets much of this by default. Header information is placed between the open and close HEAD tags in the HTML document. Header information should include:
-
Doctype is short for "document type declaration" (or DTD). Any (X)HTML Web page needs to define a Doctype : it is used to declare which version of (X)HTML the Web page conforms to. It appears as the first line of code on a web page, before the <html> tag.
Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
The language declaration is an attribute that defines the HTML tag. Language information specified via the lang attribute may be used by a browser to control display in a variety of ways.
Example: <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
-
The title appears in the window of the browser and is also used in tracking the
HISTORY (BACK button) of where the user has been. It can be particularly helpful when a user has multiple windows open, if it uniquely identifies each page. There may only be one title in any document. It should identify the content of the document in a fairly wide context. The title is not part of the text of the document, but is a property of the whole document. It may not contain anchors, paragraph marks, or highlighting. It is not normally displayed in the text of a document itself.
Example: <title>English: American Literature Before 1900</title>
The TITLE can be edited in Dreamweaver using the edit box on the top of the page design window.
-
Meta-Description: Some search engines pick up this description to show with the results of searches, instead of showing the first few of lines of the page as the summary. Thus, a description can help users identify the content of your pages when searching, especially when the first lines of your pages consist of repeated content or menus.
Example: <meta name="Description" content="Studies in American Literature Before 1900 in the English Department at the Ohio State University. Period overview." />
-
Meta-Keywords: A common use for META is to specify keywords that a search engine may use to improve the quality of search results. When several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user.
Example: <meta name="Keywords" content="areas, study, research, literature, programs, english, ohio, state, university, before 1900, 1900, american,"/>
|