5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Set Page Properties You can specify layout and formatting properties for each page using the Page Properties dialog box.
Div Tags A tag that defines logical divisions within the content of a web page. Use div tags to center blocks of content, create column effects, create different areas of color, and more. You can build page layouts by inserting div tags and applying CSS positioning styles. This can be used instead of tables.
Use Div Tags Place your insertion point where you want the div tag Use Insert>HTML>Div Select options and click OK. Add content to the div tag by placing your insertion point inside the tag, and then adding content. When you select a div tag, you can view and edit rules for it in the CSS Styles panel.
Absolute vs Relative Div Tags Absolute positioning (AP) allows you to place any page element exactly where you want it. AP elements’ positions will NOT adjust on the page according to the size of the browser window. Relative tag is "relative to itself". Used with other positioning attributes will move from where it would NORMALLY be. Relative position can be used to align form elements, for example.
Set Text and Image Properties Change text and image properties by using the Properties Panel. Select the text or image. Adjust the specific property: size, color, alignment, etc. Create hotspot and image maps using bottom section of panel when image is selected.
Image Map Image Map A single graphic that is divided into sections and linked to different locations. Hotspot Specify a particular area as a link; can be drawn over a block of space, words, or an image.
Template A template is a special type of document that you use to design a “fixed” page layout; you can then use the web page to create a template that inherit its page layout. Templates allow a Web designer to construct a site that Is flexible Easy to update, and Consistent between HTML pages.
Using Templates
Using Templates Designers can make changes to the overall design of the site quickly by revising the .DWT files directly. The pages that are linked to the template files are automatically updated allowing for site-wide modifications in minutes. Make sure not to move the .DWT file from the Templates folder. Do not rename or move the Templates folder. As long as the .DWT file remains inside the Templates folder, the links from the HTML pages to the template will not be broken.
Editable Regions As you design a template, you specify as “editable” which content users can edit in a document based on that template. Selected content may be set as editable regions or an editable region may be inserted into the template. Editable regions enable template authors to control which page elements template users—such as writers, graphic artists, or other web developers— can edit.
Building the Template You can create a template from an existing document or from a new document. As you work in the template, you can make changes to both editable and locked regions. In a document based on the template, however, a template user can make changes only in the editable regions; the locked regions can’t be modified. This keeps the overall template design consistent across multiple pages.
HTML Explained Most tags must have two parts, an opening and a closing part. <html> is the opening tag </html> is the closing tag Attributes are defined within the opening tag. <img src="image1.jpg"> <p align="center"> ... </p> Use this Simple Guide to HTML page to learn more.
Required HTML Tags Below is a basic html document that contains the 4 required tags. Notice the nesting of the html tags. <html> <head> <title>this is the title</title> </head> <body> this is everything that goes in the document! </body> </html>
Basic HTML Tags Headings <h1> A Heading </h1> Paragraphs <p> Some text </p> Links <a href="home.html"> My homepage </a> Images <img src="photo.jpg"> HTML Cheat Sheet
Search Engines Websites that organize and retrieve information located on the Internet. When a new website is created, information about its purpose, content, and connections are collected by search engines to add to their database. Search Engine Optimization (SEO) Involves designing websites with the intention of helping search engines best discover, organize, and retrieve information.
Advanced SEO Terms Tags Could be page titles, paragraph titles, image tags, or even meta tags that are hidden in the code of a website; help search engines find and organize the information on a website. Keywords User-defined words or phrases that help a search engine’s algorithms select a group of words that can be searched to find your website.
Advanced SEO Terms Web Crawlers (Spiders) Computer programs that “crawl” through the pages of a website to find tags, keywords, and other information. Page Ranking A determination of how easy it is to find a website through search engines; the higher the ranking, the more traffic the website will have.
Add Meta Tags The meta tags contain elements that describe the information on the page, which is used by search browsers. You can set the properties of head elements to control how your pages are identified including: Page title Specify keywords Page description Use Insert>HTML>Keywords or Description to enter tags.
Cascading Style Sheets (CSS) Separates layout and design features (color scheme, fonts, menu styles, etc.) from the actual content of the website. Easiest way to make site-wide design changes. CSS file combines with HTML file to create a complete website.
CSS Explained A CSS rule-set consists of a selector and a declaration block. The selector points to the element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
CSS Explained A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Use this Learn CSS to learn more.
Advanced Style Sheet Terms Class Style Used to specify a style for a group of components in a website; allows you to set up a particular style for many HTML elements tagged with the same class. ID Style Used to specify a style for a single, unique element in a website.
Advanced Style Sheet Terms Internal Style Sheet A CSS document contains the design properties of the website. Embedded into the HTML file so can be moved with the website files. External Style Sheet Housed separately from the HTML file and therefore can be attached to many different websites.