Web+Design+Notes

=Web Design=

What do I need to know?

 * create a structured website with style sheets, tables and hyperlinks

=__HTML__=

Example code: = =  Example code:
 * H1**
 * < **** h1>Heading 1 **
 * H2**


 * < ****h1>Heading 1 **

Example code:
 * H3**

Heading 3
Example code:
 * H4**


 * // Heading 4 //**

Example code: paragraph
 * P**

To choose whichever formatting style for your text. You right-click on the selected paragarph/text and go to **paragraph format** and select the style you want.

[]

Hyperlink is a link for any chosen item on a web page which leads to another site.
 * Hyperlink**

Example code:  Title the visitor sees . Here is a link which will show how to create a hyperlink in more details: []

(found in [|http://shell.cas.usf.edu/~mccook/uwy/hyperlinks.html])

Example code:  (Found in [|http://shell.cas.usf.edu/~mccook/uwy/hyperlinks.html]) =**__Stylesheets__**=
 * Img src**


 * Making and editing a style sheet**

[]


 * Attaching a style sheet**

To add a style sheet to a page you right-click the page then in the menu go to **Style> Attach Stylesheet**, then browse for the style sheet to attach. [] =__Tables__=

The following web site explains, step by step, how to create a data tabel in Dreamweaver [|**http://www.guidesandtutorials.com/dreamweaver_inserting_tables.html**]
 * Insert table**


 * Merging cells**

Select the cells of the table that you want to merge, the go to "modify" at the top of the page, then there is a drop down list, chose the "table" tab, then a sub drop down list comes and chose te option "merge cells".


 * Changing border**

1) Select the table whose border you want to change.

If you want to change a border on specific table cells, select the cells, including the end-of-cell mark. 2) On the Format menu, click Borders and Shading, and then click the Borders tab. 3) Change to any options you want.
 * Changing cell padding**

When creating a table, there is a place where it says "cell padding" and that number is usually 4, change it to whatever required.

[]


 * Changing cell spacing**

[]

__**Images**__

 * Import image**

Chose the image to import, save it in your work area. drag the image from the folder into the dreamweaver widow, then a popup comes, there just type in another name for the image.


 * Resize image**

To resize the image you can either click on the image in Dreamweaver and edit it manually on the bottom, although this doesn't allow for maintaing aspect ratio.


 * Maintain aspect ratio**

To maintain aspect ratio its better to open it in fireworks or other image-editting software and resize the image to keep the aspect ratio this makes the image unstreched.

=__**Others**__=
 * Adding a layer **

[] You can then add text, images into the layer. ** Moving a layer **
 * To create a layer, you click on **** insert > layout objects > layers **** from the menu bar. This will then be shown on the webpage design you’re working on. **

Naming a layer **
 * To move a layer with content around, you move your cursor to the layer, put it on the sides of it, and you would see the colour of the layer turning into blue, you can then drag the layer, with the content, to whatever position you want **


 * All the layers are named Layer1, Layer2, Layer3 and so on, if you want them to have an different, easier name than what they are given when created, so that when you are designing your webpage, it will be more convenient to refer to, you can go to the layers panel, double click on the name of the layer and type in the your new name you prefer. If the layers panel is not displayed on the right, you can go to windows and select layers, it will automatically appears. **

[]


 * Visibility of a layer**
 * In the above image, you can see that there is an **** open-eye icon **** on the left sides of the layer names. This means that these layers are visible on the screen at the moment. Sometimes, while working on layers, it will be more convenient to hide some of the layers that are not needed at that moment, especially when you are working on overlapping layers. By hiding or showing layers, you can click on the eye icon. **


 * Target window**

An anchor is a way to create an internal table of contents links on any Web page you have.
 * Anchor**

the following link shows how to add an Anchor into a web page []


 * Image hotspot**


 * Thumbnail**

Thumbnails are reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words


 * Widget (Extension)**

A widget (or control) is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user, such as a window or a text box.


 * Embedded code(Extension)**

It is a code used to plug a document such as a picture, song or video into another document such as a forum, or a website like Answerbag.com.


 * Plugin(Extension)**

It is a computer program module or device that interacts with another to add a specific function, or to support a specific file format or device.