traing report in website designing

7/30/2019 traing report in website designing

1/32

MAJOR TRAINING REPORT : WEB DESIGNING

1

A

Major Training Report

On

Website Designing

Submitted for the partial fulfillment of the requirement for the award of Degree of

BACHELOR OF ENGINEERING

IN

COMPUTER SCIENCE & ENGINEERING

Submitted By :

Ramniwas(0101CS091086)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

UNIVERSITY INSTITUTE OF TECHNOLOGY

RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA

BHOPAL-462033


2/32


2

INDEX

S.No. Topic Page No. Remarks

1 CSS 3

2 Photoshop 14

3 Dreamweaver 17


3/32


3

CSS

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intendedto simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the

text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, whatbackground images or colors are used, as well as a variety of other effects.CSS is easy to learn

and understand but it provides powerful control over the presentation of an HTML document.

Most commonly, CSS is combined with the markup languages HTML or XHTML.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the

CSS Working Group. The CSS Working Group creates documents called specifications.When a specification has been discussed and officially ratified by W3C members, it

becomes a recommendation. These ratified specifications are called recommendations becausethe W3C has no control over the actual implementation of the language. Independent

companies and organizations create that software.

CSS Versions:

Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in

December 1996. This version describes the CSS language as well as a simple visual formattingmodel for all the HTML tags.

CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds

support for media-specific style sheets e.g. printers and aural devices, downloadable fonts,element positioning and tables.

CSS Syntax - Selectors

A CSS comprises of style rules that are interpreted by the browser and then applied to

the corresponding elements in your document. A style rule is made of three parts:

Selector: A selector is an HTML tag at which style will be applied. This could be any taglike or etc.

Property: A property is a type of attribute of HTML tag. Put simply, all the HTML

Attributes are converted into CSS properties. They could be color or border etc. Value: Values are assigned to properties. For example color property can have value

either red or #F1F1F1 etc.


4/32


4

You can put CSS Style Rule Syntax as follows:

Here table is a selector and border is a property and given value 1px solid #C00 is the value of

that property.

Multiple Style Rules:You may need to define multiple style rules for a single element. You can define these rules tocombine multiple properties and corresponding values into a single block as defined in

the following example:

Here all the property and value pairs are separated by a semi colon (;). You can keep them in aingle line or multiple lines. For better readability we keep them into separate lines.

Embedded CSS - The Element:

You can put your CSS rules into an HTML document using the element. This

tag is placed inside ... tags. Rules defined using this syntax will be applied to all

the elements available in the document. Here is the generic syntax:


5/32


5

Attributes:Attributes associated with elements are:

Inline CSS - The style Attribute:

You can use style attribute of any HTML element to define style rules. These rules will beapplied to that element only. Here is the generic syntax:

External CSS - The Element:

The element can be used to include an external stylesheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You define all the Style ruleswithin this text file and then you can include this file in any HTML document using

element.

Here is the generic syntax of including external CSS file:

CSS - Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the

foreground of an element(i.e., its text) or else for the background of the element. They can alsobe used to affect the color of borders and other decorative effects. You can specify your colorvalues in various formats. Following table tells you all possible formats:


6/32


6

CSS Colors - RGB Values:

This color value is specified using the rgb( ) property. This property takes three values, oneeach for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.

NOTE: All the browsers does not support rgb() property of color so it is recommended not to useit.

Following is the example to show few colors using RGB values


7/32


7

Setting Backgrounds using CSS

This tutorial will teach you how to set backgrounds of various HTML elements. Youcan set following background properties of an element:

The background-color property is used to set the background color of an element.

The background-image property is used to set the background image of an element. The background-repeat property is used to control the repetition of an image in the

background. The background-position property is used to control the position of an image in the

background. The background-attachment property is used to control the scrolling of an image in

the background. The background property is used as shorthand to specify a number of other

background properties

Set the background image:

Following is the example which demonstrates how to set the background image for an element.

Set the font family:

Following is the example which demonstrates how to set the font family of an element. Possiblevalue could be any font family name

Set the font style:

Following is the example which demonstrates how to set the font style of an element. Possible

values are normal, italic and oblique.


8/32


8

Manipulating Text using CSS

The color property is used to set the color of a text.

The direction property is used to set the text direction. The letter-spacing property is used to add or subtract space between the letters that

make up a word.

The word-spacing property is used to add or subtract space between the words of a

sentence.

The text-indent property is used to indent the text of a paragraph.

The text-align property is used to align the text of a document. The text-decoration property is used to underline, overline, and strikethrough text.

Set the text color:Following is the example which demonstrates how to set the text color. Possible value could beany color name in any valid format

CSS - Images

Images are very important part of any Web Page. Though it is not recommended to include lot ofimages but it is still important to use good images wherever it is required.

CSS plays a good role to control image display. You can set following image properties usingCSS.

The border property is used to set the width of an image border.

The height property is used to set the height of an image. The width property is used to set the width of an image.

The -moz-opacity property is used to set the opacity of an image.

The image border Property:

The border property of an image is used to set the width of an image border. This property canhave a value in length or in %.

A width of zero pixels means no border.Here is the example:

This will produce following result -


9/32


9

CSS - Links

This tutorial will teach you how to set different properties of a hyper link using CSS. You can set

following properties of a hyper link:

We will revisit same properties when we will discuss Pseudo-Classes of CSS. The :link Signifies unvisited hyperlinks.

The :visited Signifies visited hyperlinks.

The :hover Signifies an element that currently has the user's mouse pointer hoveringover it.

The :active Signifies an element on which the user is currently clicking.

Usually these all properties are kept in the header part of HTML document.

Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be

effective. Also, a:active MUST come after a:hover in the CSS definition as follows.


10/32


10

CSS - Lists

Lists are very helpful in conveying a set of either numbered or bulleted points. This

tutorial teaches you how to control list type, position, style etc. using CSS

There are following five CSS properties which can be used to control lists:

The list-style-type Allows you to control the shape or appearance of the marker. The list-style-position Specifies whether a long point that wraps to a second line

should align with the first line or start underneath the start of the marker. The list-style-image Specifies an image for the marker rather than a bullet point or

number. The list-style Serves as shorthand for the preceding properties.

The marker-offset Specifies the distance between a marker and the text in the list.

The list-style-type Property:

The list-style-type property allows you to control the shape or style of bullet point (also known

as a marker) in the case of unordered lists, and the style of numbering characters in ordered lists.

Here are the values which can be used for an unordered list:

CSS - Paddings

The padding property allows you to specify how much space should appear between the content

of an element and its border:

There are following five CSS properties which can be used to control lists:

The value of this attribute should be either a length, a percentage, or the word inherit. If the valueis inherit it will have the same padding as its parent element. If a percentage is used, the

percentage is of the containing box.

You can also set different values for the padding on each side of the box using the followingproperties:

The padding-bottom Specifies the bottom padding of an element.


11/32


11

The padding-top Specifies the top padding of an element. The padding-left Specifies the left padding of an element.

The padding-right Specifies the right padding of an element. The padding Serves as shorthand for the preceding properties.

The padding-bottom Property:

The padding-bottom property sets the bottom padding (space) of an element. This can take a

value in terms of length of %.

Result

CSS - Cursors

The cursor property of CSS allows you to specify the type of cursor that should be displayed to

the user. One good usage of this property is in using images for submit buttons on forms. Bydefault, when a cursor hovers over a link, the cursor changed from a pointer to a hand. For a

submit button on a form this does not happen. Therefore, using the cursor property tochange the cursor to a hand whenever someone hovers over an image that is a submit

button. This provides a visual clue that they can click it.The table that follows shows possible values for the cursor property:


12/32


12

NOTE: You should try to use only these values to add helpful information for users,and in places they would expect to see that cursor. For example, using the crosshair whensomeone hovers over a link can confuse visitors.

Here is the example:


13/32


13

Result


14/32


14

Photoshop

Adobe Photoshopis a graphics editing program developed and published by Adobe Systems.

Photoshop Toolbox:

The toolbox contains the main tools for working on images. A small arrow next to a tool in the toolbo

indicates that the tool also has additional options available. In Photoshop, click and hold your mouse on a to

to see its options. For example, if you click and hold on the select tool, you'll see select options such

ellipticalselection, single row selection, etc.

Slicing

Image slicing is a technique for creating a web page (or a component of a web page, like a header

navigation menu) visually in Photoshop. The "slice" and slice select tools, like the crop tool, are used

isolating parts of images. The slice tool can be used to divide an image into different sections, and theseparate parts can be used as pieces of a web page design once HTML and CSS are applied. The slice sele

tool allows sliced sections of an image to be adjusted and shifted. The Slice tool allows you to divide an ima


15/32


15

into smaller sections which fit together like a jigsaw (but with straight edges). The slice tool is located in thtop section of the Photoshop Toolbox.

There are two tools:

Slice (which creates the slices) and Slice Select(which enables you to select and modify existing slices).

Sliced images are commonly used for web design work, which sometimes requires images to be broken up this way.

Using the Slice and Slice Select Tools:

Youd first design a page in Photoshop exactly as you want it to look when it goes live on the web. Then yo

cut out all the page componentstitle bars, buttons, navigation menus, and so onusing Photoshops Slitool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and all th

necessary code will automatically be written as well.

Finally, once everythings saved out, you can pull everything into Dreamweaver and finish off your layouwith any necessary tweaks. Its a very cool process, and one of the most popular methods for building w

pages. The following sections describe how to take a created layout, slice it up in Photoshop, save it out, anthen pull the whole thing into Dreamweaver to finish it off.

Part 1: Designing Your Page and Slicing it:

The first thing youll need to do is create a layout in Photoshop. In the case of creating a page object like

menu or header, youd have to know the dimensions of the object before creating it in Photoshop. Once yodimensions are set, its simply a matter of building your design. Design and layout all your button

background graphics, logos, and soon, building up your pages design. Use whatever tools, commands, anoptions youd like.


16/32


16

Slicing up your design take your overall layout and cut it into smaller pieces. This means youll be isolatinbuttons, logos, and background areas on your page by slicing them away from the rest of the layout.

Select the slice tool in the toolbox. Click and drag over the area you wish to make into a slice. Release the mouse button - Photoshop automatically creates the necessary number of slices, with the activ

slice highlighted. Using the slice select tool, you can move and resize slices by dragging inside a slice, or by dragging th

handles.

Each slice will wind up being saved out as an individual graphic, so you may want to create slices for eabutton in a menu.

Part 2: Saving it:

Once youve sliced up your layout, youre ready to save everything out of Photoshop. And remember, n

only will Photoshop save all your sliced images in one shot (meaning that you dont have to save each of theindividually), but its also going to build your pages underlying code structure for you. So when you sav

your slices, Photoshop will also save an additional HTML file. Thats the file that youll want to open Dreamweaver.


17/32


17

Dreamweaver

Part 1: Opening the file in Dreamweaver:

Everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, topening the HTML file that Photoshop created, and youll see right away that everythings been created wi

tables. All the slices sit within the tables cells. You can drop additional page content on top of your imag

using a clever technique: Remove the slice from the table cell; then set the cell to the slices origin

dimensions; drop the slice into the cells background; and finally insert new text or image content into th

cell. This creates the illusion of the content floating above the graphic, as you can see in the screen shot.

Now you can begin making any adjustments youd like. For example, you could center the layout, add in

background color, create any necessary CSS rules, begin dropping in your content, and set your hyperlinks.

Setting Up Your Website in Dreamweaver

Start up Dreamweaver.

You will be greeted with a window with a top-half looks something like the picture above (without the word"Dreamweaver Tutorial thesitewizard.com" of course). Your picture may be slightly different depending o

whether you are using Mac OS X, Windows XP or Windows Vista.
http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG


18/32


18

If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert ModiText Commands Site Window Help". We will be accessing a lot of Dreamweaver's features via this menu ba

The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Sit

menu item on the menu bar. A drop-down menu will appear. Click the "New Site..." item in the menu bar.

Important note: in the interest of brevity, in the future, I shall refer to the sequence of clicking the "Sitmenu, followed by clicking on the "New Site..." item simply as "Site | New Site..."

A dialog box will appear with words to the effect "Site Definition for Unnamed Site 1". The number thfollows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Do

worry about that. We are about to change it anyway.

At the top of the dialog box is the "Basic" tab. If it is not currently selected, click on it to select it. If you're nsure, just click on it.

In the edit box for "What would you like to name your site?", type in the name you wish to give to your sit

If you are not sure what name you want for your site, use your domain name. For example, if you hapurchased a domain called "example.com", put "example.com" (without the quotes) into the box. For thpurpose of this tutorial, I will assume that you have typed "Example Company" in the box.

Once you have done the above, enter the web address of your site in the box following the question "What

the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", yowebsite address will be "http://www.example.com/" (without the quotes), unless your web host tells yo

otherwise.

Click the "Next" button at the bottom of the window to proceed to the next screen.

Accept the default "No, I do not want to use a server technology" for now. Click the "Next" button again.

The next screen allows you to define where Dreamweaver saves the files you create. The default is to plac

the files in a folder with the same name as your website. You can change the location if you wish. Note ththis folder merely determines where on your computer the website files are saved. You will be taught how

publish those files to your web host in a later step. It is always good practice to keep a copy of your websion your own computer. If you don't know what to do here, just accept the default.

When you click "Next", you will be asked "How do you connect to your remote server?". For now, sele

"None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summarClick "Done".

Creating a Simple Two-Column Web Page with Header and Footer

You will now create the main page of your website. For the purpose of this tutorial, we will be creating a tw

column web page for the main page. A two-column web page basically means that the page will have twvertical columns. Websites typically use one of the columns to hold the website's logo and navigation butto

and the other column to hold the main content. For example, on thesitewizard.com's article pages, such as th
http://www.thesitewizard.com/archive/domainname.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/archive/domainname.shtml


19/32


19

one you are reading now, the left column holds the navigation menu while the right column holds the artictext.

Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears.

new window entitled "New Document" will appear.

Look in the "Layout" column in the window that appears and locate the item "2 column liquid, left sidebaheader and footer". Select the item by clicking on it once.

Look at the rightmost side of the same window and locate the item "Layout CSS". Click the drop-down band select "Create New File". This will cause Dreamweaver to save certain types of information about th

appearance of the web page (called CSS) in a separate file. One of the ways in which this is useful is thwhen we design other pages of the site, we can reuse the same information by simply loading it from the sam

file.

Click the "Create" button.

A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clickinthe "Save" button.

Dreamweaver now presents you with a page with two columns with some dummy content typed in. We wbe replacing some of the dummy content with our own content.

Designing the Home Page: Preamble

The page you are about to design will serve as the website's "Home Page", which means that it is the mapage of your website. It is the page that visitors will see if they type your website's address without specifyin

any page name. For example, if your domain is called "example.com", and your visitor typ"http://www.example.com", they will see this page.

A home page typically contains brief information about what the site is about as well as links to the oth

pages of your website. If this is the home page of your personal site, you will probably want to welcome yovisitors and mention briefly what they can hope to see on your site. If this is the home page of a company si


20/32


20

it will typically mention briefly what the company sells, it's main products and point the visitors to individuproduct pages or other pages on your site.

For the purpose of this tutorial, I will provide example text for a fictitious company called "Examp

Company", selling some fictitious products. You should of course use your own text rather than my supplietext. For example, if your company is called XYZ Inc, go ahead and use "XYZ Inc" in places where I u

"Example Company". Likewise if you are creating a personal website, and you are out of ideas as to what call your site, call it by your name. For example, if your name is Shakespeare, call it Shakespeare's Website.

Steps to Designing Your Dreamweaver Site

1. Take a look at the page that is displayed. You will see that there is a band spanning the entire top row of thpage. The words in that band currently read "Header". Below that there are two columns: a narrow le

column, called the sidebar, and a wider right column with the heading "Main Content". All the text that given in the window can be replaced by your own content.

To replace the content, simply click on the word you wish to replace, delete it and type your own. The firthing you should do is to replace the word "Header" with the name of your website. To do this, clic

somewhere in the word "Header". A blinking text cursor will appear. Using the delete or backspace key needed, delete "Header". Type the name of your website. If you don't know what to type, type in your name

your company's name. For the example site that I create here, I will replace "Header" with the wor"Example Company".

2. Directly above where you typed to replace the "Header" text is a small edit box with the words "UntitleDocument". Click the word "Untitled". Use the delete or backspace key to remove the existing text anreplace it with the name of the site you typed earlier. This will be the text that the search engines show for th

web page when it displays the results of a search. Again, for this tutorial's example site, I will simply replait with the word "Example Company".

3. You should now replace all the text in the right column with your own text. Simply click on the "MaContent" title and replace it with some appropriate content. You can take a look at the text that I will be usin

below as an example. When you've finished with that, click on the "Lorem ipsum dolor sit amet" (etc) worddelete them and replace them with your message. Typing and editing of text within the page works more

less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter k(Windows) or the Return key (Mac OS X).

Repeat the process with the "H2 level heading" subtitle and the words that follow. Just replace it wi

whatever you want your website to display. If you want, you can replace the words with the example te


21/32


21

below. However, it's best to write something that is relevant to your site so that you don't need to go back anre-edit it later.

Welcome

Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, te

books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples examples.

Featured Product

Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com

tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website whiyou can modify and augment to suit your needs.

4. Leave the left column (sidebar) alone for now. We will add a navigation menu to this section in later chapteof this tutorial.

5. Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at thbottom of the page. For example, you can place your copyright notice in place of this word. If you need insert the copyright symbol, "", click "Insert | HTML | Special Characters | Copyright" from the menu.

6. Once you are satisfied with your page, click "File | Save As...". A dialog box will appear asking you where save the page. Type "index.html" (without the quotes) into the "File name" edit box, and click the "Sav

button.

Be sure to type the name "index.html" exactly as I gave it that is, entirely in small letters (lowercase), wi

no spaces in the word. "index.html" is a special name in that it is regarded as the default file name for moweb servers. When you publish that page to your website at (say) http://www.example.com/, the index.htm

page is the one that will be displayed when a visitor types "http://www.example.com/" without any filenam

It is thus very important that you do not change the name of the file to something else.

Adding Images to Your Dreamweaver Page

1. Put a copy of your graphics files in the same directory as the file you created for your website in the first paof this tutorial.

2. Start up Dreamweaver.3. In the right column, you should be able to see "index.html" in the list of files that belong to your projec

Doubleclick it to open the file.4. At the top of the page is the name of your website, which you entered in the first chapter. Place the text curs

to the left of the name. That is, click on the name, and move your cursor to the leftmost position using the learrow key on your keyboard. You will be inserting your logo at this position.

5. Choose "Insert | Image" from the menu. If you recall from the previous chapter, "Insert | Image" means thyou click the "Insert" menu, then click the "Image" item on the menu that appears. A dialog box will appea

You should see the image or images that you previously saved in the folder. If you have more than one imagin the folder and are not sure which is the one you are going to use for your logo, you can click the name o

the image once. A preview of the image will appear in the dialog box, making it easier for you to select thcorrect image.
http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml


22/32


22

6. Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OKbutton.

7. A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a bridescription of your image. The description will be displayed for visitors browsing with graphics disabled.

will also be the text that is read aloud by screen readers. The latter are used by visually impaired peopvisiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise

always give your graphics a brief description.8. Since this image is merely your site's logo, you can either type into the "Alternate text" field your company

name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as yotype.

9. Once you've typed your "Alternate text", click the OK button. Ignore the "Long description" field.10.Your logo should now appear before your company name or your site name. If you find the logo is too bi

and you want to redo it, simply click it once and hit the DEL key. Recreate your logo as needed, save it inthe website folder and repeat the above procedure.

11.At this point, you will probably find that the logo is uncomfortably close to the name of your website. Tintroduce some space between the logo and your site name, click the logo once to select it. At the bottom

your Dreamweaver window, you should a panel labelled "Properties" containing information about yo

image (see picture below).

Locate the "H Space" edit box and enter "5" (without the quotes). Press enter. Notice that some space hbeen inserted between your image and your website title. If you think 5 is too much or too little, you c

experiment with other values in this box. Basically, a larger value means that more space is inserted, whilesmaller value shrinks the amount of space between your picture and the surrounding material.

12.That's it. You've now added a logo for your web page, making it look slightly more professional.13.(Optional Step) The same technique that you used here to add a logo and be used to add other images to you

web page. For example, you can use this method to add pictures of your products in the main body of the wepage.

Let's say for example, that you are using the following text in the main part of your web page.

Welcome

Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, te

books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples examples.
http://www.thefreecountry.com/utilities/free-screen-readers.shtmlhttp://www.thefreecountry.com/utilities/free-screen-readers.shtml


23/32


23

Featured Product

Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com

tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website whiyou can modify and augment to suit your needs.

(If the text seems familiar, it's because I used it as the sample text in the previous chapter.)

If you wanted to insert a picture of a product so that it appears as a small thumbnail just beside the block owords "Dreamweaver Site: This..." (etc), place the cursor just before "Dreamweaver Site" (use to mouse

click that spot). Click "Insert | Image". Type the alternate text for your product when the Alternate Text dialobox appears. Click OK.

Notice that the words do not exactly flow over to the right of the image. To make all the words appear to th

right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set "Default". Set it to "Left".


24/32


24

The image should now be placed completely to the left of the text, with the words filling in the space on tright.

If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as befor

You can also adjust the "V Space" to change the vertical space between the image and the words. If you donknow what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" bo

to see what happens. You can always delete the value again if you don't like the result.

14.Before you continue to the next section, save your page with "File | Save".15.You should now upload (ie, publish) the updated web page to your web host. Since you have already set u

everything in the previous chapter, all you have to do at this point is to click "Site | Put" from the menu.Dreamweaver prompts you to save the site before "putting", do so. If you are asked whether you should p

"dependant files", click "Yes" to allow Dreamweaver to publish your images and CSS files as well.16.Finally, check your website using your browser. Congratulations. Your website now looks more profession

with the addition of a logo and some images for your products or yourself.

How to Add Links, Change Fonts and Change Colours in Dreamweaver CS3 (Part 3by Christopher Heng, thesitewizard.com

In the previous chapter of this Dreamweaver tutorial, we spruced up the two-column web page you hpreviously designed in chapter 1 by adding a logo for your website and inserting pictures into the main body

In this chapter, you will continue to use Dreamweaver to augment your site and add functionality to it. particular, you will learn how to

add links or hyperlinks to your web page, allowing you to link to other pages on your website as well as on thInternet;

change font faces, styles, sizes and colour; change the colour of the background.

If you have missed the earlier instalments of this tutorial, and wish to find out how you can create your ow

website from scratch, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website wiDreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in t

earlier chapters.

Adding a Basic Navigation Menu to Your Sidebar

So far, all our modifications to the initial page have been to the header, where we added your site logo and siname, as well as to the main body, where we added information about your website and products. Up to th

point, the leftmost column of your web page still contains the default placeholder text that Dreamweaver CSinserted when it created the page.

Dreamweaver refers to the leftmost column as the "sidebar". Most websites, like thesitewizard.com, insert

navigation menu into this space. A navigation menu typically links to the certain important pages on t
http://www.thesitewizard.com/http://www.thesitewizard.com/gettingstarted/dreamweaver2.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/gettingstarted/dreamweaver1.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver2.shtmlhttp://www.thesitewizard.com/


25/32


25

website, such as the home page (the page you're currently designing), the site map, the "About Us" page, anthe "Contact Us" page. If the site has a large number of pages, it will also link to the main sections.

In other words, a navigation menu, in its most basic form, is merely a series of links to certain other pages

your website. For this chapter, we will create a simple but fully-functional navigation menu. In the nechapter, you will modify that menu to use buttons somewhat like those you see on thesitewizard.com an

other websites. However, for now, it is important for you to work through the process of adding links to pathe way for that advanced menu of chapter 4.

1. Start up Dreamweaver, if you have not already done so.2. As before, open your index.html page. You can do this by doubleclicking the filename in the right column

your Dreamweaver window.

3. In the left column, you will see a bold subtitle with the words "sidebar1 Content". We do not need this headeso we will delete it. To remove it, use your mouse and drag it across the words "sidebar1 Content" selecting

Notice that near the bottom of the Dreamweaver window, just above the "Properties" panel, the word "


26/32


26

If your website is not a company website but a personal one, you can use "About Me" instead of "About Uif you wish. However, in order to avoid confusion later, I recommend that you keep the filenames that

supplied. That is, don't change "aboutus.html", "feedback.html" or "sitemap.html". More importantly, yofilenames should not include spaces or capital (uppercase) letters. Using spaces or capital letters in you

filenames introduces a variety of needless complications down the road.

11.Notice that the side bar only extends as far as your last link. If you want the side bar to extend even furthekeep adding blank lines till you're satisfied with the length of that column.

At this point, your main page is fully functional. That is, it contains a navigation menu with working links an

a right column that has the information you want your visitors to read. At present, of course, those links leato nowhere, since you have not created the pages for those links yet. (The pages will be created in a lat

chapter.)

It is also possible to add a link to a web page that is not on your own website. For example, to link

thesitewizard.com, simply follow the procedure above, but instead of typing a relative link like index.html the like, you have to give a full URL. Enter into the "Link" box "http://www.thesitewizard.com/" (without th

quotes), and type "thesitewizard.com" into the "Text" box.

Making an Image into a Clickable Link

On many websites, the logo of the site is actually a clickable link. For example, if you were to check my log

at the top of this page, you will see that it is actually a link to thesitewizard.com.

It's very easy to make your logo into a link. Simply select the logo by clicking it. In the Properties pane at thbottom of the window, look for the "Link" box. Enter the address of your website, for exampl

"http://www.example.com/" (without the quotes) into that box. Alternatively, you can enter a relative linlike "index.html". Next, look for the "Border" box. Enter "0" (zero, without the quotes) into that box. Th

prevents certain browsers from putting a blue border around your image.

Changing Font Typefaces, Sizes, Style and Colours

Dreamweaver allows you to change a various aspects of the text that is displayed on your page, including thfont typeface, size and colour.

Changing the Font TypefaceTo change the font of a particular piece of text, first select the relevant text. With the text selected, look at th

Properties panel at the bottom of the window. In the box labelled "Font", you should be able to see the defaufont selection, "Verdana, Arial, Helvetica, sans-serif". This means that when your visitor arrives at your sit

your text will be displayed using the Verdana font if he has it available on his system. If his system does nhave the Verdana font, the web browser will attempt to use the Arial font. In non-Windows systems, the

fonts are unlikely to be available. In such a case, the browser will use the third font face specified on the lisHelvetica. If none of the named fonts are on the system, your page will be displayed in any sans-serif font th

browser can find.
http://www.thesitewizard.com/webdesign/create-good-filenames.shtmlhttp://www.thesitewizard.com/webdesign/create-good-filenames.shtml


27/32


27

To change the font, simply click the down arrow in the drop down box and select any of the suggestiogiven. Dreamweaver lists the sets of fonts commonly used by webmasters. Each set contains a list of fon

that are somewhat similar to one another, so that if one is not available, the alternative will (hopefully) nmake your website look too drastically different.

Important note: although Dreamweaver allows you to add to the list by clicking the "Edit Font List" item

the drop down menu, think carefully before you add some esoteric font and use it for your website. If you ua font that only you and a few people have on their system, and don't specify commonly available alternative

the web browser will simply use its default font (which varies from browser to browser and system to systemto render your web page. This will result in your page looking less-than-ideal for the majority of your visitor

Changing the Font SizeBeside the "Font" drop down box is the "Size" box. This allows you to change the font size of the current

selected text. By default, the font size is set to 100%, which means that the font will display in its normsystem-dependant default size. If this size is not satisfactory to you, you can change the value, either by typin

in the number you wish, or selecting one of the predefined sizes from the drop down box.

There are a variety of ways to specify the font size. You can specify in terms of percentage of the origin

size, pixels, points, etc. I recommend that you stick to using either "ems" or "%" unless you have specifrequirements and know what you're doing.

Be careful about making your font sizes too small. You may have superb eyesight, but remember that yo

web page is viewed by people of varying ages and visual capability. Elderly visitors as well as users wipoorer eyesight may not be able to read your page if the text is too small.

Changing the Style of the Text: Bold and Italics

To make a particular piece of text bold, select the text and click the "B" button in the Properties panLikewise, if you want to italicize your text, select it and click the "I" button instead.

Changing the Colour of the TextChanging the colour of your text is equally easy. After you select the text, look at the Properties panel. Yo

should be able to see a black square beside another box that reads "#000000". To change the colour of thtext, click the black square and select the colour. Be careful to choose a colour that contrasts with yo

background colour.

Changing the Background Colour of the Whole PageIf you want to change the background colour of the whole page, click the "Page Properties" button at thbottom of the Dreamweaver window. Click the "Background color" square, currently set to grey, and chang

it to whatever colour you wish. Note though that this only changes the parts of the window that are ncovered by the header, the side bar, the main content section and the footer. If you don't know what I mea

just try it. You can undo the changes you make by clicking "Edit | Undo" (or more specifically, "Edit | UnSet Page Properties") if you don't like the colour change.


28/32


28

Changing the Background Colour of the Side Bar, Main Content Section, Header and FooterAs far as I can tell, there is no easy way from the menus or buttons to change the background colour of thside bar, main content section, header and footer. For those who feel that the existing colour is n

satisfactory, follow the guide below. Otherwise, feel free to skip this section.

o Changing the Background Colour of the Side BarClick somewhere in the side bar. Look at the status bar and click "". Click the "Edit CSbutton in the Properties panel. The CSS panel on the right side of Dreamweaver should expand when you d

so. Look for the item called "background" in that panel and doubleclick it. A dialog box should appear. Clicthe box beside the "Background color" to change the colour.

Warning: unlike many other operations in Dreamweaver, there doesn't seem to be any way to undo the chan

with "Edit | Undo" except to set it back to its original colour manually.

o Changing the Background Colour of the Header and FooterTo change the colour of the header, click somewhere in the header. Locate "" in the status band click it. Again, click the "Edit CSS" button, then doubleclick "background" in the CSS panel on the rig

side of the screen. You should be able to change the background colour from the dialog box that appears.

Repeat the same procedure for the footer if you wish to change its background colour too. In the case of th

footer, though, you will have to locate "" instead of "".

Warning: again, there's no way to undo the change with "Edit | Undo".

o Changing the Background Colour of the Main Content SectionThe background colour of the main section of your web page, which contains the bulk of your text, cannot bmodified in the same way as the other sections.

First, click somewhere in the main section of your web page and click "" in the status bar

On the CSS panel on the right side of Dreamweaver, look for the line saying 'Properties for ".twoColLiqLtHd

.mainContent"'. Move your mouse to the line immediately above the words and drag it upwards until you c

see the "Add property" link below. Click "Add property". In the drop down box, select "background-coloClick the colour box beside it to set the colour.

Once again, changes you make here cannot be undone using the usual "Edit | Undo" method.


29/32


29

Adding a Navigation Menu Bar to Your Website

1. Start up Dreamweaver.2. Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.3. Locate your existing navigation menu, which at this time merely consists of a series of links to your hom

page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completereplacing them in this chapter.

In case you're wondering why we bothered to create those links if we were going to destroy them aga

anyway, hyperlinks are one of the most important features of a web page. As a webmaster, you will continually creating hyperlinks to other pages on your site as well as links to other sites on the Internet. N

all these links will be placed in your navigation menu. It was thus important to cover that aspect of web desigin the tutorial.

4. Make sure that the blinking text cursor is currently in the side bar. If it is not, click somewhere in the side baNow click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spritem on the menu that appears, and finally on "Spry Menu Bar" on the submenu that appears.

5. A dialog box will appear asking you whether you want a horizontal menu bar or a vertical one. Since we aplacing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and clic

OK.6. A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of yo

Dreamweaver window, you will see that the text and links for menu items are displayed there.7. Select "Item 1" by clicking on it, if it is not already selected. In the "Text" box, replace the words "Item 1

with "Home" (without the quotes). Replace the default "Link" text of "#" with "index.html" (without thquotes).

8. By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.

Do the same for "Item 1.2" and "Item 1.3".9. Now do the same with the other items, replacing the text with the appropriate words for your site, and th

links with the actual page names. If there are submenus, delete them as you did for Item 1. For yoconvenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has

three-level menu system. Delete all submenus (item 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - we won't need them.o Text: About Us, Link: aboutus.htmlo Text: Contact Us, Link: feedback.htmlo Text: Site Map, Link: sitemap.html10.Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, an

that these files will need to be uploaded. Click "OK".

11.Now upload the page to your website using "Site | Put" and check the results in your browser. Hover yomouse over your menu buttons, and you will see that they change colour.

Customizing the Spry Framework's Menu Bar Widget

While adding the Spry Framework's navigation menu bar to your web page is a simple procedure undDreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so und

Dreamweaver's user interface. You will have to do it manually.
http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBGhttp://www.thesitewizard.com/gettingstarted/dreamweaver3.shtmlhttp://www.thesitewizard.com/gettingstarted/dreamweaver3.shtmlhttp://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG


30/32


30

The fastest way to do this is to do it via Dreamweaver's "Code" view.

Dreamweaver has two basic ways you can work on your website. So far, you have been creating your susing the "Design" view. The "Design" view allows you to work on your web page using the What-You-Se

Is-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page asvisitor would when they visit your website.

The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for you

website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to yowebsite. When your visitor loads your web page, the browser takes the "raw" code and displays it according

the instructions given in the "raw" code.

To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewin

this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you shoustill take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using th

Code view in a future chapter to insert your feedback form code.

To switch to the "Code" view, click "View | Code" from the menu. Instead of the web page that you aaccustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down t

page, you should be able to see your content amidst other characters. These other characters, things like "

and the like, are the formatting code that tells the browser how it should render your page.

Centering the Menu BarScroll to the top of the index.html file in "Code" view. Locate the text "" (without the quote

somewhere near the top of the file. Place your cursor just before "" on the same line. Hit ENTER (RETURN) to insert a blank line. When you do this, the entire line with "" should move downward

creating a new blank line. Move the cursor to the blank line.

Now copy the text from the box below and paste it into the blank line you just created in Dreamweaver. T

copy the text, click somewhere in the box to highlight all the text in the box. (If nothing is selected when yodo that, drag your mouse cursor over the text to highlight it.) Then click the right mouse button (or if you u

Mac OS X, hold down the Control key on the keyboard and click the mouse), and select Copy from the menthat appears. To paste it into Dreamweaver, switch to the Dreamweaver window. Make sure that your te

cursor is in the correct location (in the blank line above the word ""). Select "Edit | Paste" from thmenu.

ul.MenuBarVertical

{

margin: 0 auto ;width: 8em;

}


31/32


31

To check that your insertion works, click "View | Design" from the menu. You should see that the menu now centred in the Design view. You can again click "View | Code" again from the menu if you want to retu

to the "Code" view.

Changing the Colours of the Menu BarOn the right side of the Dreamweaver window, in the Files pane, doubleclick the folder "SpryAssets". should expand, showing you other files. Doubleclick the file "SpryMenuBarVertical.css". If the Files pane

too narrow for you to see what file you're clicking, hover your mouse over each file in turn unDreamweaver displays a tooltip telling you the full name of the file.

Another file, full of unfamiliar code, will appear in the Dreamweaver's centre pane. This is the CSS code fo

your menu. The CSS code contains the formatting code for your menu.

Click "Edit | Find and Replace" from the menu. Type "ul.MenuBarVertical a" (without the quotes) into the b

"Find" box. Click the "Find Next" button. Dismiss the dialog box by clicking the "Close" button. In the mawindow, you should see the highlighted words "ul.MenuBarVertical a". Under these words is a block of te

enclosed between "{" and "}" (without the quotes). You should be able to find "background-color" followeby a value "#EEE" in this block. This line determines the colour of the menu when the mouse is not hoveri

over it. "#EEE" is the code for the greyish colour you see in the menu.

In the right hand column of the Dreamweaver window, in the CSSpane, you should be able to see "Properties for

ul.MenuBarVertical a". If not, move your mouse over the lineseparating the blue "Applications" and the section above and drag

it downwards to make more space. Under "Properties forul.MenuBarVertical a", look for the line that says "background-

color" (or parts of "background-color" if your window is too

narrow to display the full text). To the right, you should see asquare box followed by "#EEE". Click the square box to displaythe colour picker window and choose a colour of your choice.

To modify the colour of the menu button when a mouse moves

over it, click "Edit | Find and Replace" again and search for"ul.MenuBarVertical a:hover". Dismiss the dialog box whenyou've located the text. Once again, you should be able to change

the "background-color" property from the CSS pane in the righthand column.

When you're through making your changes, check the output byswitching back to the index.html window. To do this, select"Window | index.html" from the menu. If you are still in "Code"

view when you switch to the index.html window, switch to the"Design" view by selecting "View | Design".

When you are satisfied with the changes you have made, save

your work with "File | Save All" from the menu. Note that you


32/32


need to use "Save All" instead of "Save" because you have modified two files, index.html anSpryMenuBarVertical.css. Clicking "Save" alone will only save whatever file you happened to be working o

last.

Again, use "Site | Put" to publish your work and check it out with your browser.

At this point, the home page for your website is complete. If you have been working on the page using somdummy text and pictures, such as the one I supplied in chapter 1, now is time to change them to your re

content. You have learned everything you need to create a working main page that looks decent and workcorrectly. We will not be returning to this page in the next few chapters. Instead, we will be designing yo

other pages using this main page as the template.

Documents

traing report in website designing