Traing Report in Website Designing

MAJOR TRAINING REPORT : WEB DESIGNING
S.No. 1 2 3
Topic CSS Photoshop Dreamweaver
Page No. 1 13 16
Remarks
CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to 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, what background 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 because the 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 formatting model 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 tag like <h1> or <table> 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.
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 to combine 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 a ingle line or multiple lines. For better readability we keep them into separate lines.
Embedded CSS - The <style> Element:

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax:
Attributes:
Attributes associated with <style> elements are:
Inline CSS - The style Attribute:

You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax:
External CSS - The <link> Element:

The <link> 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 rules within this text file and then you can include this file in any HTML document using <link> 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 also be used to affect the color of borders and other decorative effects. You can specify your color values in various formats. Following table tells you all possible formats:
CSS Colors - RGB Values:

This color value is specified using the rgb( ) property. This property takes three values, one each 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 use it. Following is the example to show few colors using RGB values
Setting Backgrounds using CSS

This tutorial will teach you how to set backgrounds of various HTML elements. You can 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. Possible value 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.
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 be any 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 of images 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 using CSS. 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 can have a value in length or in %. A width of zero pixels means no border. Here is the example:
This will produce following result -
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 hovering over 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.
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 value is 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 following properties: The padding-bottom Specifies the bottom padding of an element.
9
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. By default, 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 to change 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:
10
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 when someone hovers over a link can confuse visitors. Here is the example:
11
Result
12
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 toolbox indicates that the tool also has additional options available. In Photoshop, click and hold your mouse on a tool to see its options. For example, if you click and hold on the select tool, you'll see select options such as 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 or navigation menu) visually in Photoshop. The "slice" and slice select tools, like the crop tool, are used in isolating parts of images. The slice tool can be used to divide an image into different sections, and these separate parts can be used as pieces of a web page design once HTML and CSS are applied. The slice select tool allows sliced sections of an image to be adjusted and shifted. The Slice tool allows you to divide an image
13
into smaller sections which fit together like a jigsaw (but with straight edges). The slice tool is located in the top 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 in 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 you cut out all the page componentstitle bars, buttons, navigation menus, and so onusing Photoshops Slice tool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and all the necessary code will automatically be written as well. Finally, once everythings saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. Its a very cool process, and one of the most popular methods for building web pages. The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then 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 a menu or header, youd have to know the dimensions of the object before creating it in Photoshop. Once your dimensions are set, its simply a matter of building your design. Design and layout all your buttons, background graphics, logos, and soon, building up your pages design. Use whatever tools, commands, and options youd like.
14
Slicing up your design take your overall layout and cut it into smaller pieces. This means youll be isolating buttons, 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 active slice highlighted. Using the slice select tool, you can move and resize slices by dragging inside a slice, or by dragging the handles. Each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu.
Part 2: Saving it:

Once youve sliced up your layout, youre ready to save everything out of Photoshop. And remember, not only will Photoshop save all your sliced images in one shot (meaning that you dont have to save each of them individually), but its also going to build your pages underlying code structure for you. So when you save your slices, Photoshop will also save an additional HTML file. Thats the file that youll want to open in Dreamweaver.
15
Dreamweaver
Part 1: Opening the file in Dreamweaver:
Everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, try opening the HTML file that Photoshop created, and youll see right away that everythings been created with tables. All the slices sit within the tables cells. You can drop additional page content on top of your images using a clever technique: Remove the slice from the table cell; then set the cell to the slices original dimensions; drop the slice into the cells background; and finally insert new text or image content into the 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 a 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 words "Dreamweaver Tutorial thesitewizard.com" of course). Your picture may be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.
16
If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert Modify Text Commands Site Window Help". We will be accessing a lot of Dreamweaver's features via this menu bar. The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Site" 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 "Site" menu, 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 that follows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Don't 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 not sure, 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 site. If you are not sure what name you want for your site, use your domain name. For example, if you have purchased a domain called "example.com", put "example.com" (without the quotes) into the box. For the purpose 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 is the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", your website address will be "http://www.example.com/" (without the quotes), unless your web host tells you 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 place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on 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, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "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 twocolumn web page for the main page. A two-column web page basically means that the page will have two vertical columns. Websites typically use one of the columns to hold the website's logo and navigation buttons and the other column to hold the main content. For example, on thesitewizard.com's article pages, such as the
17
one you are reading now, the left column holds the navigation menu while the right column holds the article text. Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears. A 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 sidebar, header 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 box and select "Create New File". This will cause Dreamweaver to save certain types of information about the appearance of the web page (called CSS) in a separate file. One of the ways in which this is useful is that when we design other pages of the site, we can reuse the same information by simply loading it from the same file. Click the "Create" button. A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clicking the "Save" button. Dreamweaver now presents you with a page with two columns with some dummy content typed in. We will be 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 main page of your website. It is the page that visitors will see if they type your website's address without specifying any page name. For example, if your domain is called "example.com", and your visitor types "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 other pages of your website. If this is the home page of your personal site, you will probably want to welcome your visitors and mention briefly what they can hope to see on your site. If this is the home page of a company site,
18
it will typically mention briefly what the company sells, it's main products and point the visitors to individual product pages or other pages on your site. For the purpose of this tutorial, I will provide example text for a fictitious company called "Example Company", selling some fictitious products. You should of course use your own text rather than my supplied text. For example, if your company is called XYZ Inc, go ahead and use "XYZ Inc" in places where I use "Example Company". Likewise if you are creating a personal website, and you are out of ideas as to what to 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 the page. The words in that band currently read "Header". Below that there are two columns: a narrow left column, called the sidebar, and a wider right column with the heading "Main Content". All the text that is 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 first thing you should do is to replace the word "Header" with the name of your website. To do this, click somewhere in the word "Header". A blinking text cursor will appear. Using the delete or backspace key as needed, delete "Header". Type the name of your website. If you don't know what to type, type in your name or your company's name. For the example site that I create here, I will replace "Header" with the words "Example Company". 2. Directly above where you typed to replace the "Header" text is a small edit box with the words "Untitled Document". Click the word "Untitled". Use the delete or backspace key to remove the existing text and replace it with the name of the site you typed earlier. This will be the text that the search engines show for this web page when it displays the results of a search. Again, for this tutorial's example site, I will simply replace it 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 "Main Content" title and replace it with some appropriate content. You can take a look at the text that I will be using below as an example. When you've finished with that, click on the "Lorem ipsum dolor sit amet" (etc) words, delete them and replace them with your message. Typing and editing of text within the page works more or less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter key (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 with whatever you want your website to display. If you want, you can replace the words with the example text
19
below. However, it's best to write something that is relevant to your site so that you don't need to go back and re-edit it later.
Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you 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 chapters of this tutorial. 5. Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at the bottom of the page. For example, you can place your copyright notice in place of this word. If you need to 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 to save the page. Type "index.html" (without the quotes) into the "File name" edit box, and click the "Save" button. Be sure to type the name "index.html" exactly as I gave it that is, entirely in small letters (lowercase), with no spaces in the word. "index.html" is a special name in that it is regarded as the default file name for most web servers. When you publish that page to your website at (say) http://www.example.com/, the index.html page is the one that will be displayed when a visitor types "http://www.example.com/" without any filename. 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 part of 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 project. 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 cursor to the left of the name. That is, click on the name, and move your cursor to the leftmost position using the left arrow 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 that you click the "Insert" menu, then click the "Image" item on the menu that appears. A dialog box will appear. You should see the image or images that you previously saved in the folder. If you have more than one images in the folder and are not sure which is the one you are going to use for your logo, you can click the name of the image once. A preview of the image will appear in the dialog box, making it easier for you to select the correct image.
20
6. Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OK" button. 7. A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a brief description of your image. The description will be displayed for visitors browsing with graphics disabled. It will also be the text that is read aloud by screen readers. The latter are used by visually impaired people visiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise to 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's name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as you type. 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 big, and you want to redo it, simply click it once and hit the DEL key. Recreate your logo as needed, save it into the 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. To introduce some space between the logo and your site name, click the logo once to select it. At the bottom of your Dreamweaver window, you should a panel labelled "Properties" containing information about your image (see picture below).
Locate the "H Space" edit box and enter "5" (without the quotes). Press enter. Notice that some space has been inserted between your image and your website title. If you think 5 is too much or too little, you can experiment with other values in this box. Basically, a larger value means that more space is inserted, while a smaller 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 your web page. For example, you can use this method to add pictures of your products in the main body of the web page. 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, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
21
MAJOR TRAINING REPORT : WEB DESIGNING Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you 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 of words "Dreamweaver Site: This..." (etc), place the cursor just before "Dreamweaver Site" (use to mouse to click that spot). Click "Insert | Image". Type the alternate text for your product when the Alternate Text dialog box 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 the right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set to "Default". Set it to "Left".
22
The image should now be placed completely to the left of the text, with the words filling in the space on the right. If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as before. You can also adjust the "V Space" to change the vertical space between the image and the words. If you don't know what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" box 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 up everything in the previous chapter, all you have to do at this point is to click "Site | Put" from the menu. If Dreamweaver prompts you to save the site before "putting", do so. If you are asked whether you should put "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 professional 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 3)
by Christopher Heng, thesitewizard.com
In the previous chapter of this Dreamweaver tutorial, we spruced up the two-column web page you had previously 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. In 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 the Internet; 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 own website from scratch, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the 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 site name, as well as to the main body, where we added information about your website and products. Up to this point, the leftmost column of your web page still contains the default placeholder text that Dreamweaver CS3 inserted when it created the page. Dreamweaver refers to the leftmost column as the "sidebar". Most websites, like thesitewizard.com, insert a navigation menu into this space. A navigation menu typically links to the certain important pages on the
23
website, such as the home page (the page you're currently designing), the site map, the "About Us" page, and the "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 of your website. For this chapter, we will create a simple but fully-functional navigation menu. In the next chapter, you will modify that menu to use buttons somewhat like those you see on thesitewizard.com and other websites. However, for now, it is important for you to work through the process of adding links to pave the 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 of your Dreamweaver window. 3. In the left column, you will see a bold subtitle with the words "sidebar1 Content". We do not need this header, so we will delete it. To remove it, use your mouse and drag it across the words "sidebar1 Content" selecting it. Notice that near the bottom of the Dreamweaver window, just above the "Properties" panel, the word "<h3>" is highlighted. For convenience, I shall refer to this bar, where you can see the highlighted "<h3>", as the status bar. The status bar contains useful information about where your cursor is currently located in the raw HTML code that Dreamweaver generates behind the scenes for you. Click the highlighted "<h3>" word - that is, move your mouse over the "<h3>" tag, and click the mouse button. A single click will do the trick. Then hit the DEL key. This will not only delete the words "sidebar1 Content", but it will also remove the code marking off that section as a subtitle. 4. Now delete the rest of the text in the side bar. Simply select all of it with your mouse, and hit the DEL key. 5. With your text cursor still in the side bar, click "Insert | Hyperlink". That is, click the "Insert" menu, and then click the "Hyperlink" item on the menu that appears. A dialog box appears, asking you for the details of the link. 6. Enter "Home" (without the quotes) into the box entitled "Text:". Then enter "index.html" (without the quotes) for the box entitled "Link:". Make sure you enter the "index.html" exactly as I specified, with no capital letters (no uppercase letters), no spaces and no quotes. Click OK. 7. You should see a link appear in your side bar. When your page is published onto your web server, and users click the link, they will be brought to the "index.html" page of your site. We have added the "Home" link even though you are already at index.html because it is good policy to have a standardized navigation menu on your site - that is, we want all the pages on the site to have exactly the same navigation menu. It reduces confusion in your visitors when they want to hunt for certain menu items. 8. At present, the link is highlighted. Move the mouse cursor to the end of the word "Home" and click in the empty space slightly to the right of the word. The word "Home" should no longer be selected. Look at the status bar. If the last item in the status bar is "<p>", you can proceed to the next step. If the last item is "<a>", you need to click a little futher into the empty space to the right of "Home", but still within the side bar column. 9. Hit the ENTER (or RETURN) key to create a new line. 10. Using the above procedure, create links to the following pages as well.
o o o
Text: About Us, Link: aboutus.html Text: Contact Us, Link: feedback.html Text: Site Map, Link: sitemap.html 24
If your website is not a company website but a personal one, you can use "About Me" instead of "About Us" if you wish. However, in order to avoid confusion later, I recommend that you keep the filenames that I supplied. That is, don't change "aboutus.html", "feedback.html" or "sitemap.html". More importantly, your filenames should not include spaces or capital (uppercase) letters. Using spaces or capital letters in your 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 further, keep 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 and a right column that has the information you want your visitors to read. At present, of course, those links lead to nowhere, since you have not created the pages for those links yet. (The pages will be created in a later chapter.) It is also possible to add a link to a web page that is not on your own website. For example, to link to thesitewizard.com, simply follow the procedure above, but instead of typing a relative link like index.html or the like, you have to give a full URL. Enter into the "Link" box "http://www.thesitewizard.com/" (without the 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 logo 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 the bottom of the window, look for the "Link" box. Enter the address of your website, for example, "http://www.example.com/" (without the quotes) into that box. Alternatively, you can enter a relative link, like "index.html". Next, look for the "Border" box. Enter "0" (zero, without the quotes) into that box. This 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 the font typeface, size and colour.
Changing the Font Typeface
To change the font of a particular piece of text, first select the relevant text. With the text selected, look at the Properties panel at the bottom of the window. In the box labelled "Font", you should be able to see the default font selection, "Verdana, Arial, Helvetica, sans-serif". This means that when your visitor arrives at your site, your text will be displayed using the Verdana font if he has it available on his system. If his system does not have the Verdana font, the web browser will attempt to use the Arial font. In non-Windows systems, these fonts are unlikely to be available. In such a case, the browser will use the third font face specified on the list, Helvetica. If none of the named fonts are on the system, your page will be displayed in any sans-serif font the browser can find.
25
To change the font, simply click the down arrow in the drop down box and select any of the suggestions given. Dreamweaver lists the sets of fonts commonly used by webmasters. Each set contains a list of fonts that are somewhat similar to one another, so that if one is not available, the alternative will (hopefully) not make your website look too drastically different. Important note: although Dreamweaver allows you to add to the list by clicking the "Edit Font List" item in the drop down menu, think carefully before you add some esoteric font and use it for your website. If you use a font that only you and a few people have on their system, and don't specify commonly available alternatives, the web browser will simply use its default font (which varies from browser to browser and system to system) to render your web page. This will result in your page looking less-than-ideal for the majority of your visitors.
Changing the Font Size
Beside the "Font" drop down box is the "Size" box. This allows you to change the font size of the currently selected text. By default, the font size is set to 100%, which means that the font will display in its normal system-dependant default size. If this size is not satisfactory to you, you can change the value, either by typing 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 original size, pixels, points, etc. I recommend that you stick to using either "ems" or "%" unless you have specific requirements and know what you're doing. Be careful about making your font sizes too small. You may have superb eyesight, but remember that your web page is viewed by people of varying ages and visual capability. Elderly visitors as well as users with poorer 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 panel. Likewise, if you want to italicize your text, select it and click the "I" button instead.
Changing the Colour of the Text
Changing the colour of your text is equally easy. After you select the text, look at the Properties panel. You should be able to see a black square beside another box that reads "#000000". To change the colour of the text, click the black square and select the colour. Be careful to choose a colour that contrasts with your background colour.
Changing the Background Colour of the Whole Page
If you want to change the background colour of the whole page, click the "Page Properties" button at the bottom of the Dreamweaver window. Click the "Background color" square, currently set to grey, and change it to whatever colour you wish. Note though that this only changes the parts of the window that are not covered by the header, the side bar, the main content section and the footer. If you don't know what I mean, just try it. You can undo the changes you make by clicking "Edit | Undo" (or more specifically, "Edit | Undo Set Page Properties") if you don't like the colour change.
26
Changing the Background Colour of the Side Bar, Main Content Section, Header and Footer
As far as I can tell, there is no easy way from the menus or buttons to change the background colour of the side bar, main content section, header and footer. For those who feel that the existing colour is not satisfactory, follow the guide below. Otherwise, feel free to skip this section.
o
Changing the Background Colour of the Side Bar
Click somewhere in the side bar. Look at the status bar and click "<div#container>". Click the "Edit CSS" button in the Properties panel. The CSS panel on the right side of Dreamweaver should expand when you do so. Look for the item called "background" in that panel and doubleclick it. A dialog box should appear. Click the 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 change with "Edit | Undo" except to set it back to its original colour manually.
o
Changing the Background Colour of the Header and Footer
To change the colour of the header, click somewhere in the header. Locate "<div#header>" in the status bar and click it. Again, click the "Edit CSS" button, then doubleclick "background" in the CSS panel on the right 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 the footer, though, you will have to locate "<div#footer>" instead of "<div#header>". Warning: again, there's no way to undo the change with "Edit | Undo".
o
Changing the Background Colour of the Main Content Section
The background colour of the main section of your web page, which contains the bulk of your text, cannot be modified in the same way as the other sections. First, click somewhere in the main section of your web page and click "<div#mainContent>" in the status bar. On the CSS panel on the right side of Dreamweaver, look for the line saying 'Properties for ".twoColLiqLtHdr .mainContent"'. Move your mouse to the line immediately above the words and drag it upwards until you can see the "Add property" link below. Click "Add property". In the drop down box, select "background-color". Click the colour box beside it to set the colour. Once again, changes you make here cannot be undone using the usual "Edit | Undo" method.
27
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 home page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completely replacing them in this chapter. In case you're wondering why we bothered to create those links if we were going to destroy them again anyway, hyperlinks are one of the most important features of a web page. As a webmaster, you will be continually creating hyperlinks to other pages on your site as well as links to other sites on the Internet. Not all these links will be placed in your navigation menu. It was thus important to cover that aspect of web design in 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 bar. Now click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spry" item 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 are placing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and click OK. 6. A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of your 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 the quotes). 8. By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete it. Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.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 the links with the actual page names. If there are submenus, delete them as you did for Item 1. For your convenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has a 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 o o
Text: About Us, Link: aboutus.html Text: Contact Us, Link: feedback.html Text: Site Map, Link: sitemap.html
10. Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, and 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 your mouse 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 under Dreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so under Dreamweaver's user interface. You will have to do it manually.
28
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 site using the "Design" view. The "Design" view allows you to work on your web page using the What-You-SeeIs-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page as a visitor would when they visit your website. The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for your website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to your website. When your visitor loads your web page, the browser takes the "raw" code and displays it according to the instructions given in the "raw" code. To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewing this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you should still take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using the 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 are accustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down the page, you should be able to see your content amidst other characters. These other characters, things like "<p>" and the like, are the formatting code that tells the browser how it should render your page.
Centering the Menu Bar
Scroll to the top of the index.html file in "Code" view. Locate the text "</head>" (without the quotes) somewhere near the top of the file. Place your cursor just before "</head>" on the same line. Hit ENTER (or RETURN) to insert a blank line. When you do this, the entire line with "</head>" should move downwards, 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. To copy the text, click somewhere in the box to highlight all the text in the box. (If nothing is selected when you do that, drag your mouse cursor over the text to highlight it.) Then click the right mouse button (or if you use Mac OS X, hold down the Control key on the keyboard and click the mouse), and select Copy from the menu that appears. To paste it into Dreamweaver, switch to the Dreamweaver window. Make sure that your text cursor is in the correct location (in the blank line above the word "</head>"). Select "Edit | Paste" from the menu.
<style type="text/css"> ul.MenuBarVertical { margin: 0 auto ; w idth: 8em; } </style>
29
To check that your insertion works, click "View | Design" from the menu. You should see that the menu is now centred in the Design view. You can again click "View | Code" again from the menu if you want to return to the "Code" view.
Changing the Colours of the Menu Bar
On the right side of the Dreamweaver window, in the Files pane, doubleclick the folder "SpryAssets". It should expand, showing you other files. Doubleclick the file "SpryMenuBarVertical.css". If the Files pane is too narrow for you to see what file you're clicking, hover your mouse over each file in turn until Dreamweaver 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 for 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 big "Find" box. Click the "Find Next" button. Dismiss the dialog box by clicking the "Close" button. In the main window, you should see the highlighted words "ul.MenuBarVertical a". Under these words is a block of text enclosed between "{" and "}" (without the quotes). You should be able to find "background-color" followed by a value "#EEE" in this block. This line determines the colour of the menu when the mouse is not hovering 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 CSS pane, you should be able to see "Properties for ul.MenuBarVertical a". If not, move your mouse over the line separating the blue "Applications" and the section above and drag it downwards to make more space. Under "Properties for ul.MenuBarVertical a", look for the line that says "backgroundcolor" (or parts of "background-color" if your window is too narrow to display the full text). To the right, you should see a square box followed by "#EEE". Click the square box to display the 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 when you've located the text. Once again, you should be able to change the "background-color" property from the CSS pane in the right hand column. When you're through making your changes, check the output by switching 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
30
need to use "Save All" instead of "Save" because you have modified two files, index.html and SpryMenuBarVertical.css. Clicking "Save" alone will only save whatever file you happened to be working on 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 some dummy text and pictures, such as the one I supplied in chapter 1, now is time to change them to your real content. You have learned everything you need to create a working main page that looks decent and works correctly. We will not be returning to this page in the next few chapters. Instead, we will be designing your other pages using this main page as the template.
31

Traing Report in Website Designing

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Traing Report in Website Designing

Загружено:

Авторское право:

Доступные форматы

MAJOR TRAINING REPORT : WEB DESIGNING

Topic CSS Photoshop Dreamweaver

MAJOR TRAINING REPORT : WEB DESIGNING

Who Creates and Maintains CSS?

CSS Syntax - Selectors

MAJOR TRAINING REPORT : WEB DESIGNING

You can put CSS Style Rule Syntax as follows:

Multiple Style Rules:

Embedded CSS - The <style> Element:

MAJOR TRAINING REPORT : WEB DESIGNING

Inline CSS - The style Attribute:

External CSS - The <link> Element:

MAJOR TRAINING REPORT : WEB DESIGNING

CSS Colors - RGB Values:

MAJOR TRAINING REPORT : WEB DESIGNING

Setting Backgrounds using CSS

Set the background image:

Set the font family:

Set the font style:

MAJOR TRAINING REPORT : WEB DESIGNING

Manipulating Text using CSS

Set the text color:

The image border Property:

This will produce following result -

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING

The list-style-type Property:

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING

Using the Slice and Slice Select Tools:

Part 1: Designing Your Page and Slicing it:

MAJOR TRAINING REPORT : WEB DESIGNING

Part 2: Saving it:

MAJOR TRAINING REPORT : WEB DESIGNING

Setting Up Your Website in Dreamweaver

MAJOR TRAINING REPORT : WEB DESIGNING

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

MAJOR TRAINING REPORT : WEB DESIGNING

Designing the Home Page: Preamble

MAJOR TRAINING REPORT : WEB DESIGNING

Steps to Designing Your Dreamweaver Site

MAJOR TRAINING REPORT : WEB DESIGNING

Adding Images to Your Dreamweaver Page

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING Featured Product

MAJOR TRAINING REPORT : WEB DESIGNING

Adding a Basic Navigation Menu to Your Sidebar

MAJOR TRAINING REPORT : WEB DESIGNING

MAJOR TRAINING REPORT : WEB DESIGNING

Making an Image into a Clickable Link

Changing Font Typefaces, Sizes, Style and Colours

Changing the Font Typeface

MAJOR TRAINING REPORT : WEB DESIGNING

Changing the Font Size

Changing the Style of the Text: Bold and Italics

Changing the Colour of the Text

Changing the Background Colour of the Whole Page

MAJOR TRAINING REPORT : WEB DESIGNING

Changing the Background Colour of the Side Bar

Changing the Background Colour of the Header and Footer