dreamweaver

Dreamweaver Study Notes

**Web site** is a group of related Web pages that are linked together and share a common interface and design. A **browser**   is a program, such as Microsoft Internet Explorer or Mozilla Firefox, that lets you display HTML-developed Web pages.
 * Chapter 1 **

You can use the **Files panel**   to create folders to organize and store the various files for your Web site, add pages to your Web site, and set the   home page  , the first page that viewers see when they visit the site. The "home page" is always named **index**. If you are going to move a file, you should do it in the files panel. It will ask you if you want to update links. This will keep your web page intact and functioning. If you move pages outside of the files panel, all of your links to that page will be broken.
 * HTML** stand for hypertext markup language. HTML is the name of the code that makes the web page work with the browser. Dreamweaver creates this code for you.

You should not use spaces or special characters in file names.

You can use the  **site map** to see   a graphical representation of how the pages within a Web site relate to each other. The  **Document window**   is the large white area in the Dreamweaver program window where you create and edit Web pages.

The  **Property inspector**   **,** located at the bottom of the Dreamweaver window, lets you view and change the properties of a selected object.

**Design view** shows the page as it would appear in a browser and is primarily used for designing and creating a Web page.
 * Code view**  shows the underlying HTML code for the page

**Split view** is a combination of Code view and Design view. Split view is the best view for  debugging   or correcting errors because you can immediately see how code modifications change the appearance of the page. The  **root folder**   will store all the Web pages or HTML files for the site. Then create a subfolder called  **assets**   in which you store all of the files that are not Web pages, such as images and sound files. When you create a new page in Dreamweaver, it should end with **.htm** or **.html**.


 * Page titles** are important. Every page should have a title. It will show up in the bar at the top of the browser window. Search engines, like google, will look at your page title, keywords, and description. Page titles help users know where they are and these also appear on the printout of a web site.

 ** Chapter 2 **
 * White space** - area on the web page that contains no text or graphics

Web sites should have a **consistent theme**. Consistency in color, fonts, navigation, and design give a unified and professional look.


 * Web Safe colors** - colors that appear the same on all browsers. There are 216 Web-safe colors.


 * Unvisited links** - color defaults to blue


 * Visited links** - color defaults to purple


 * Background color** should complement the web page. A strong contrast is needed between the background color and the text. Images in the background are often times a bad idea.

Search engines use keywords, descriptions, and titles to find pages after a user enters search terms. Be sure to set these up.


 * Hexadecimal values** are assigned to each color. Hexadecimal number system is based on 16 rather than 10. Each has 6 digits. "A" represents 10 and "F" represents 15.


 * Font combination** - set of three fonts that specify which fonts a browser should use to display your text. If the computer you are using doesn't have the first font, it will go to the designer's second choice, and then to the third choice. It is important to choose fonts that most people will have on their computer.


 * Default font size** is 3. Fonts range from 1 - 7.


 * Heading 1** is the largest. Headings range from 1 - 6.


 * Broken links** - links that cannot find their intended destination


 * Navigation bar** - area on a web page that contains links to main pages of a web site.


 * History panel** - records each editing and formatting task. It displays them in a list in the order they were completed. Each task is called a **step**. You can use the **slider** to undo or redo steps.

You should test your pages using a variety of browsers and screen sizes. The most common screen size today is 1024 x 768.

Look at your page for symmetry and balance.

**Chapter 3 **
 * CSS (**Cascading Style Sheets) - sets of formatting instructions that control the appearance of content on a Web site. If you edit the style then everywhere you used it in the web site will automatically be updated. They are quicker to apply to text than multiple formatting changes. It helps give your web site consistency because you keep the same look everywhere by applying styles.


 * Unordered Lists** - bullets


 * Ordered Lists** - Numbered lists


 * Three primary graphic types** - jpg (photos). gif (drawings), and PNG (Fireworks files - usually too large)

Not all browsers can see **PNG files**

Keep the size of your graphics small or your web page will take too long to load. Adding sound also slows down a web page.


 * Aligning** an image means to position it on the page. It allows the test to go next to the picture. (We used left and right alignments)


 * Border** added a black frame to the image. The larger the number - the wider the border.

We used **H Space and V Space** to add horizontal and vertical spacing around the image.


 * Alternate text** - descriptive text added to an image. When you mouse over the image the text pops up. Alt text can be read by a screen reader for people with visual impairments.

Be careful using **background images** because they can make the text hard to read.


 * Chapter 4 **


 * Internal links** - links to pages on the same site - also called **relative links**


 * External links** - links to pages outside your web site - also called **absolute links**


 * Email links** - You can use the button on the tool bar to put in and email link or you can type in **mailto:**** in front of the person's email address.


 * URL -** Uniform Resource Locator - web address


 * Anchor** **-** link to a specific spot - usually on the same page - goes to a descriptive name


 * Flash text** is a vector-based graphic file that contains text


 * Navigation bar** **-** each link is called an element. Navigation bars can be found anywhere on a page but are usually at the top or on the left side.


 * 4 states** for each element - Up image, over image, down image, over while down


 * An image map** is an image that has one of more hotspot places on it.


 * A hotspot** is a clickable area on an image


 * Orphaned files** **-** files that are not linked to any pages on the Web SIte


 * Broken links** **are** hyperlinks that don't work.

**Chapter 5**


 * Tables** are made up of cells.

Cells going across horizontally make up a **row**.

Cells lining up vertically make a **column**.

Tables give you control over the **placement of objects** on your web site. It helps you keep things lined up.

The **border** is the outline around the table. When it is 0, no outline appears on the web page.

You can "fix" the width of each column. By setting the width, you make sure you know how the table will "resize" itself in different browsers.


 * Cell padding** is the distance between the cell content and the cell walls.


 * Cell spacing** is the distance between cells.

A table inside of a table is called a "**nested**" table.

You can take 2 cells and put them together - **merging** cells.


 * Splitting** cells - You can take a cell and split it into multiple parts both hoizontally and vertically.