Synopsis

Graphics tools
CSE-209

TOPIC:-Make a web page of LPU using Dreamweaver

Submitted to: Submitted by:
Jasveen kalra Ankur singh
Roll no:-
Re3801a29
Reg no:-
800943
 Class:-B.C.A
C.A
Code:-209

ACKNOWLEDGEMENT
There is always a sense of gratitude which one expresses to others
for their helpful and needy services they render during all phases
of life. I would like to do it as I really wish to express my gratitude
towards all those who have been helpful tome in getting this
mighty task of Project Report.
Finally, I would like to thank Jasveen Kalra Mam and other faculty
members of wizards system for their cooperation to develop this
term paper

AnKuR sInGh
H.W. TITLE :- SYNOPSIS OF PHTOSHOP COURSE
CODE :- CAP 209

COURSE INSTRUCTOR :- Ms Jasveen mam

DATE OF ALLOTMENT:- 22/09/09 DATE OF

SUBMISSION:-22/10/09

STUDENTS ROLL NO :- 29
SECTION NO:- E3801

DECLARATION

I DECLARE THAT THIS ASIGNMENT IS MY INDIVIDUAL WORK.I HAV NOT COPIED

FROM ANY OTHER STUDENTS WORK OR FROM ANY OTHER SOURCE EXCEPT
WHERE DUE ACKNOWLEDGEMENT IS MADE EXPLICITLY IN THE TEXT NOR HAS
ANY PART BEING WRITTEN FOR ME BY ANOTHER PERSON.

STUDENT SIGNATURE :-
AnKuR
sInGh
EVALUATORS COMMENT :-
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
-----------------------------------------.

MARKS :- ----OUT OF----

INTRODUCTION:

1.Open an Existing File or Create a New File

Open Dreamweaver by double-clicking on the desktop icon OR going to
Start > Programs > Adobe CS3 > Dreamweaver. Once you open
Dreamweaver, you will see a window that displays three major options:
Open a Recent Item, Create New, and Create from Samples.
Open a Recent Item
Dreamweaver maintains a history of previously edited pages. Select an
HTML file from this list, or choose 'Open' and browse for the file that
you would like to begin editing.
Create New
For the purposes of this guide, choose 'HTML' to open a new HTML
document. As you become more advanced you'll use other file types in
this list.
Create from Samples
This enables you to create pages/sites from templates.

2. Dreamweaver Workspace Overview

Depending on your version of Dreamweaver, what you see may differ
from Dreamweaver CS3. Don't panic—everything in the following
section can also be found in the main menu at the top of your version!
Insert Bar
The Insert Bar displays buttons to insert various objects into an HTML
page. By default, the Insert bar in Dreamweaver displays shortcuts to
"Common" elements. Press on the down-facing arrow beside
"Common" to view other object categories. To find out what each
button represents, scroll over the image with your mouse and a
descriptive tag will appear.

Document Toolbar
The Document Toolbar contains buttons that enable you to select different
views of the Document window. The Document bar also enables you to
choose between several open files through tabs, instead of through the
Window menu. Other Document bar options include Page Title specification,
as well as buttons for browser compatibility checks, file management,
browser previews, document refreshing, and other document window
options.

Document Window
The Document Window contains the current document as you create
and edit it.
Property Inspector
The Property Inspector is one of the most commonly used
Dreamweaver tools. Docked at the bottom of the workspace, the
Inspector provides shortcuts for formatting text, links, images, and
tables. This tool changes appearances depending on which object is
currently selected. If no object is selected, the Property Inspector will
display text attributes. To modify an object, select the object, then
make desired edits in the Properties Inspector.

Tip: A down-facing arrow in the lower right corner of the Property

Inspector indicates that there are further properties associated with
the selected element. To expand the Property Inspector, click on the
arrow.
Panel Groups
Panel Groups are sets of related functions grouped together under one
heading. The Panel Groups docked to the right of your Document Window
can be rearranged to suit your needs.

• Use the panel gripper to dock, undock, and rearrange the panels by
clicking and dragging.
• Collapse or expand the panel by clicking on the arrow next to the
panel name.
• Hide or show panels by going to Window menu and choosing such.
• Click the Options menu to list a range of choices specific to the active
panel or panel group.

File Panel
The File Panel enables you to manage your files and folders. Find out
more about the File Panel by going to Help > Using Dreamweaver >
search for "File Panel."

3. Page Properties (page title, background,

text/link colors, and margins)
Page Properties enable you to specify formatting properties for each
page in your website. Choose Modify > Page Properties to bring up the
Page Properties dialog box.
 Appearance
You can set common properties for your entire web page under the
Appearance category.
BACKGROUND IMAGE
Click the "Browse" button and navigate to the location of the background
image for the page. If the image is small, the browser will automatically
tile the image to fill the entire browser window. Be careful when using a
background image! Whether you are using an image, or background
colors, be aware that your users need to easily read the information that
will appear over it.
BACKGROUND, TEXT, AND LINK COLORS
To select a color, do one of the following:
• Enter the Hexadecimal (Hex) Value
Hex values are 6-digit combinations of letters and numbers recognized by
browsers to specify colors. Once you have the color hex value, simply type
the value into the space provided.
• Click on the Square Beside the Element
You will notice that the mouse arrow turns into an eyedropper. You can
select colors using the eyedropper tool using either of these methods:
o Select a Swatch from the Palette: Use the eyedropper to
select a swatch from the color palette. All colors in this palette are
considered browser-safe, meaning that they have been checked and found
 to be consistent across multiple browsers. (You can also expand the color
safe palette by clicking on the arrow in the top right corner of the palette
window; select "Continuous Tone".)
o Select a Color from Anywhere on Your Page: Use the
eyedropper to select a color from anywhere on your screen.
o Select a Color from the Color Wheel: For an immense
selection of colors, select from the Color Wheel. Click on the color wheel
and select your own unique color.
About Browser-Safe Colors: The hype about browser-safe colors isn't as
important as it was in the days of the 8-bit computers. Today, most
computers are 16-32 bits and display thousands or millions of colors.
However, you should not completely discard all thoughts of browser-safe
colors. Browser-safe colors come into play when designing for alternative
online publishing devices, such as cell phones and PDAs. For more
information about browser-safe colors, read http://www.lynda.com/hex.asp

Title/Encoding
Every web page that you create should have a Page Title. The Page
Title not only shows up in the title bar of the user's browser window,
but it's also used for bookmarks and in some search engines. If you do
not specify a title, Dreamweaver's default title is "Untitled Document."
Imagine having 200 bookmarks that say "Untitled Document"!

Tracing Images
Dreamweaver enables you to trace an image as a layout guide for your
page. For more information about Tracing Images, see Dreamweaver's
help topic on "Tracing Images."

4. Typography (formatting text size, colors, fonts,

etc.)
To apply elements to fonts in Dreamweaver, first highlight the text you
would like to format, then apply any of the following elements:

Format
Format options display pre-formatted heading sizes and text elements.
This should be your first method of text formatting, as it encodes your
content behind the scenes with proper, logical HTML, making your
 pages accessible to users of varying browser abilities. Headings (H1,
H2, H3, etc.) are very important in web page design. There are
different size headings (1-6), which will help organize your web page.
Heading 1 is very large and Heading 6 is very small. If you choose a
heading format, a line space will automatically be added before and
after the text. Once that's done...

Font
The font list provides a list of commonly used fonts (or font families)
used in web pages. To select a font, click on the down arrow next to
"Default Font" to choose a font style. If you would like to choose a font
not listed on the font list, scroll to "Edit Font List." Choose from the
"Available Fonts" list (these fonts are available on your computer) by
clicking on the font. Use the arrow pointing to the left to transfer the
font to the chosen font list and press "Ok." The Chosen Font should
now be in the Property Inspector font list.

Accessibility Tip: Fonts are not embedded into the HTML document.
This means that if a user's computer does not have the specified font,
the HTML browser will display the font as the browser's default font;
usually Times New Roman. It's best practice to use common fonts such
as Arial, Times New Roman, Courier, Georgia, Verdana, or Tahoma.

Styles
Styles refer to Cascading Style Sheets. For more information, choose
Help > Using Dreamweaver > search for "Cascading Style Sheets."

Size
Change the font size by clicking on the down arrow and selecting the
desired size. 1 is the smallest font size, while 7 is the largest.

Tip: Do not use the "Size" option to create headings (without selecting
H1, H2, H3, etc. from the "Format" drop-down first). While your text
may look fine on screen, sight-impaired users with audio web-browsers
won't recognize the text as a designated heading.

Bold and Italicize

Dreamweaver enables you to bold and/or italicize.
Alignment
Align your text left, center, or right by selecting an alignment button.

Creating a List
There are two ways to create a bulleted or numbered list:

1. Select the appropriate button and begin typing your list. After you
have finished the line, press your keyboard "Enter" key and a new
bullet or number will be created.
2. Or, if you have already created your text, highlight the text that you
would like to list and select the appropriate list button. In this case,
each paragraph is treated as a list item.

5. Hyperlinks
You can set text or images to link to other websites (absolute links),
other pages in your own site (relative links), or to specific sections of a
particular page (anchor links). For all links, select the text or image
that you would like to link and enter the URL in the Property Inspector
Link text box.

Absolute Links
Absolute links are links to external websites. Therefore, you absolutely
must specify the entire URL (i.e., "http://www.unc.edu"). Usually, it's
easier for users when external links open up in new browser window
(this way, your site will still be available even if they browse around an
external site). To set an external link to open in a new browser
window, set the Target to "_blank".

Relative Links
Relative links are links to other pages within your own site. In this
case, you do not need to specify the entire address. If the page you
want to link to is within the same folder as your document, just enter
the name of the file (i.e., "services.htm") that you are linking to in the
Link text box. If the page is in a different folder on your website, then
 the link should include the folder name, a slash, and the name of the
page you want to open (i.e., "images/faculty.htm"). The safest thing to
do is to click on the folder icon, browse to your file, and press "OK."

Anchors
Anchors allow you to link to specific sections of a particular page. Instead
of having to scroll down the page to find information, you can give your
users a link that will jump down to the section of interest!

SET THE ANCHOR

Click the document at the point in which you want your users to jump
down. Choose Insert > Named Anchor and specify and anchor name.

LINK TO THE ANCHOR

Highlight the text that you would like to link. Enter a "#" and the
anchor name in the link text box (i.e. "#anchor name").

If you would like to link to a specific section in another page, set the
anchor in the appropriate spot and link to that anchor by entering the
name of the page plus the anchor link (i.e., "page.htm#anchor name").

Email Links
Set an email link in an HTML document by choosing Insert > Email
Link. Enter the text that you would like to link and the email address,
then press "OK."

6. Inserting and Editing Images

Insert photographs or graphics into a web page by clicking on the area
where you would like to insert the image and choose Insert > Image.
Choose the appropriate file and press "OK".

Tip: In order to meet the needs of users with slower internet

connections, do not insert images that are more than 50K to 75K into
your page (and do not include more than a total of 75K to 100K on a
page). It's recommended that all photograph images are saved as .jpg
and other images are saved as .gif. Dreamweaver will enable you to
alter some aspects of the image, but it's ideal to edit the photo in a
photo editor like Photoshop or Fireworks.
 7. Inserting and Editing Tables
The most common way to layout a web page is to use an HTML table.
Insert Tables
Click on Insert > Table. Format your table from the beginning by
specifying table properties in the window that appears. Don't worry if
you are not sure about the settings in the beginning, the Property
Inspector will enable you to change the properties after the table has
been inserted.

Edit Tables
TABLE SIZE
• Rows and Columns
Insert the number of rows and columns in the text boxes provided.
• Table Width
Table width can be set as a pixel or percentage width. Pixel widths are fixed
measurements that don't expand with the browser window, whereas
percentage widths expand and collapse with the browser window.
• Border Thickness
Set a border pixel width by entering the pixel specification in the text box.
• Cell Padding and Cell Spacing
Cell padding applies space between the cell border and cell text. Cell
spacing applies space between individual cells.
o Header
Automatically bold and center selected cells using the header options.
o Accessibility
For accessibility purposes, Dreamweaver enables you to enter table
information useful to audio-based and other alternative web readers.

8. Saving and Previewing Your Work

Save Your File
Choose File > Save. Use the following guidelines when saving files:
• Use the .htm file extension, not .html
• The homepage should be saved as "welcome.htm"
• Do not leave spaces or strange characters (alphanumeric only)
• Use a maximum of 8 characters to name directories and files. Files can
have a 3 character extension (.htm)
Preview Your Work
Although you have not yet published your web page on a server,
Dreamweaver enables you to preview your page in a browser. Choose
File > Preview in Browser. If any browser preferences are set, they will
appear to the right of "Preview in Browser."

To add browsers to the preview list, click on "Edit Browser List" then
proceed with the following steps:

1. Click the "Edit" button. Click "Browse" and find the browser on your
computer. This file should have an .exe extension.
2. Once you have chosen the browser, check the default browser as your
primary or secondary browser.
3. Click "Ok".

9. Other Functions
Spell Checking
Choose Text > Check Spelling
Clean Up HTML
Use the Clean Up HTML command to remove empty tags, combine
nested FONT tags, and otherwise improve messy or unreadable HTML
code. Choose Commands > Clean Up HTML

Clean Up Word HTML

Use the Clean Up Word HTML command to remove Microsoft tags that
may interfere with the tags created by Dreamweaver. Choose
Commands > Clean Up Word HTML

Find and Replace

This is very useful if you want to search for (and possibly replace) text,
code, and attributes within your website. Let's say you mistakenly
misspelled your director's name (i.e., McKenly instead of McKenley)
throughout your entire website. Instead of looking through each page of
your site for the error, you can use the Find and Replace tool to find all
"McKenly" text and replace it with "McKenley" in one step.
 CHOOSE EDIT > FIND AND REPLACE
1. Find In: Choose the document or folder that you would like to search.
2. Search: Specify the type of element that you are interested in
searching.
3. Find: Enter the text or code that you would like to search
4. Replace: Enter the text or code that you would like to replace the
current text or code.
5. To find elements without replacing, choose "Find". To replace elements,
choose "Replace".

10.IMPLEMENT OF LINK IN DREMWEAVER:

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. 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 Text: About Us, Link: aboutus.html
o Text: Contact Us, Link: feedback.html
o 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.

11.INSERTION OF CSS
The first step is to learn how to create a style sheet
Here's how you create styles in Dreamweaver.
Simply follow these steps:

1. Open the CSS Styles palette by clicking on

Window>CSS Styles
2. Click on the '+' icon to create a new style.
You'll get the pop-up box as shown on the
right. Write the name of your style e.g. 'text', choose 'Make Custom
Style' and click OK.

3. Now create your own custom style giving by choosing the font type,
 size, weight, color etc.
Click on Ok. You have successfully created a style. Repeat these steps
to create more styles for titles, subtitles, links etc.

Applying styles to text

Once you have completed creating your styles you can apply the style
to your text. All you need to do is select the text and click on the style
in CSS Styles palette.

HTML Code: While using styles you have to set a 'class' e.g. <td class
= "text">. Here, all the contents of the cell will take on the style called
'text'.

12.INSERTION OF FLASH
Step 1 : Place the cursor where you want the rollover text to be positioned.
Click on Insert>Media>Flash Text. The following window will be
displayed.
Step 2 : Select a font and size. Click on color option and select a color for
the text andnextselectarollover color. Type your text in the text box. If your
text has a link browse th page. Select a target. If you wish you can give a
background color for your text. Lastly save it with an extension .swf and
click OK.

Step 3: To preview the flash text select the image, you will see a play
button in the properties window. Click on the play button and move your
mouse over the text to view the rollover effect after which you can click on
stop to end the preview.

Step 4 : Below is my result. Move your mouse over the text for the rollover
effect. You can also edit the font type, color and size by clicking on the edit
button.
 CODING
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-

1" />

<style type="text/css">

#flashcontent {

width: 175px;

height: 140px;

text-align: center;

#main .maincontent .text .innertext a {

color: #01A9D6;

</style>

<title>Index</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
</style>

</head>

<body>

<div id="main">

<div class="blueheader"></div>

<div class="header"><div class="imageheader"><div

class="imageheader2"><img src="images/mainfamily2.jpg" alt="family"
width="142%" height="143" /></div>

</div>

<div class="companyname">

<p>Lovely</p>

<p>Professional University</p>

</div>

</div>

<div class="maincontent">

<div class="maninavigation">

<div>

<div class="navlink1"><a
href="C:\Users\AnKuR\Documents\LOVELY\Home.html">Home</a></div>

<div class="navlink1"><a href="#">Courses</a></div>

<div class="navlink1"><a href="#">Faculty</a></div>

<div class="navlink1"><a href="#">About Us</a></div>

<div class="navlink1"><a href="#">Help</a></div>

</div>
<div class="familypictureblank">Student</div>

<div class="familypicture"><img src="images/family.jpg" alt="Family"

/></div>

<div class="familypictureblank">Passed Out</div>

<div class="familypicture"><img src="images/family2.jpg" alt="Family"

width="111" height="76" /></div>

<div class="familypictureblank2"></div>

</div>

<div class="text">

<div class="welcome">Welcome to our site!</div>

<div class="innertext">

<p><b><center>ANNOUNCEMENT</center></b></P>

<p>

<strong>09 Nov 2009::</strong></p><p>

<p>BIO BUZZ come revolutionize the aura of biotechnology. </p>

<p>Biobuzz come revolutionize the area of Biotechnology. Please Click

Here to download newsletter. </p>

<p><strong>29 Oct 2009::</strong></p>

<p>Lovely Infotech Training Test

<p>Lovely Infotech Training Test for MCA 2007 Batch on Dated 16 Nov
2009</p>

<p>Venue: Block 3rd Library</p>

<p>Time: 2-3 PM</p>

<p>If any query please contact Training Cordinator of your school or Mr.
Ramandeep Mittal </p>

<p><strong>28 Oct 2009::</strong></p>

<p>Result Card in New Format with Percentage</p>

<p>All the students of Lovely Professional University who have completed

their programmes in the year 2009 can take the result card in the new
format i.e. with CGPA and equivalent percentage from Admission & Record
Cell, Block No.2, Room No. 303, LPU. For this student have to return the
original result card already issued to them. </p>

<p><strong>22 Oct 2009::</strong></p>

<p>Interview Schedule for Ph.D. Admission </p>

<p>Interview Schedule for Ph.D. Admission for the year 2009-2010.</p>

<p>Click here to Download </p>

<p><strong>16 Sep 2009::</strong></p>

<p>Datesheet Reappear Examination </p>

<p>Click Here to Download Date Sheet of Reappear End Term 2008

Batch.</p>
</div>

</div>

<div class="photogallery">

<div class="welcome">Photo Gallery </div>

<div align="center"><div id="flashcontent" align="center">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/sw
flash.cab#version=7,0,19,0" width="186" height="140" title="gallery">

<param name="movie" value="galleryshow.swf" />

<param name="quality" value="high" />

<embed src="galleryshow.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="186"
height="140"></embed>

</object>

</div>

</div>

<div class="welcome">News</div>

<div class="description">Admission<br />

Examination<br />

Registration<br />

Result<br />

Assignment upload<br />

Assignment download <br />

</div>

</div>

</div>

</div>

</div>

</body>

</html>