HOWEWORK 4

CAP209: GRAPHIC TOOLS

DOA- DOS-

PART A

1. What is the use of Style Sheets in Dreamweaver. How can you add elements into Layers?
ANS- Use of style sheets in Dreamweaver are:-

1 TABLES STILL HAVE THEIR PLACE

Before explaining why you shouldn’t use tables to create page layouts, it’s
important to acknowledge the one remaining legitimate use of tables—tabular
data. If you’re creating a page with consistent data split into columns and rows
(i.e., an Excel spreadsheet or the contents of a database), then you can still use
tables; just make sure your tables are accessible by using the table header tag
( ) and including descriptive text and other accessibility features. For more on
creating tables, see Laurie Brown’s “Creating Accessible Tables for Data Using

Dreamweaver 8”

2 STUDY CODE IN OLD DESIGN FIRST

Before redesigning an old webpage, use Code or Split views in Dreamweaver to
study the code. If the site was built with tables, it’s likely to have other old tags
that are no longer recommended, such as the font tag shown here. To ensure
your pages meet contemporary Web standards, get rid of font tags (and other
deprecated code) while you’re at it. The font tag is best replaced with standard
HTML tags and CSS. For example, you could use heading tags and then create a
CSS tag style to change the font, color, and size.

3 USE DIV TAGS AND CSS IN PLACE OF TABLES

Think of HTML div tags as the building blocks of good CSS layouts. Use div tags
to create boxes for all your content, and then create CSS styles that define the
size, alignment, margins, padding, and borders of those boxes. Instead of
merging and splitting cells to create designs using tables, you can create styles
that align columns to the left or right of a page and precisely define margin and
padding space on any or all sides of each div. Note that div tags are all but
invisible unless you create borders. Turn on CSS Visual Aids to better see what
you’re doing.
4 CREATE DIV TAGS FOR CONTENT
To re-create a design with CSS instead of tables, start by creating a series of div
tags. Click on the Insert Div Tag icon in the Common Insert panel, or choose
Insert>Layout Objects>Div Tag. Using the border settings, you can create
borders on any or all sides of a div tag. Tip: Defining a border on only one side of
a div is a great way to create dividing lines between columns or other elements.
Use margin and padding settings to define the space between borders.
5 CREATE ID STYLES FOR DIVS
As you insert div tags in Dreamweaver CS3 and CS4, you have the option of
defining styles at the same time. I like to create a style for each div tag as I
create them, but usually define the styles later. You want to insert a div tag for
each of the content areas of your page. For example, I created a div tag and a
corresponding ID style named #container to surround all of my content and then
created separate div tags for the top section, left and right columns, and the
footer inside the #container div. (Note: ID style names always start with #.)
6 COPY-AND-PASTE CONTENT
Before you create styles for all your div tags, it’s often helpful to add a little
content so you can better see what you’re doing as you create the page design.
Most designers simply copy-and-paste text, images, and other content from the
old pages into the new ones, which is fine as long as you’re careful not to bring
along any old deprecated code (like the font tags shown in Step 1). Consider
using the Edit>Paste Special option to add text without any formatting and then
create styles to handle formatting in the new design.
7 CREATING ID STYLES FOR DIV TAGS
With your div tags and some content in place, it’s time to define your ID styles.
The ID selector in CSS is limited to use only once on a page, which makes it ideal
for the main content areas of a page. Using CSS, you can control the width,
alignment, padding, and margins, which all add up to great design control. So
you could define the style for the left column to be 300 pixels wide with right and
left margins of 50 pixels each (to separate it from the left side of the page and
the right column) and set the Float to align left.

8 USE CLASS STYLES FOR RECURRING FEATURES

Class styles are ideal for recurring features, such as the captions under each
image. Thus you could create a Class style called .caption that defines the font,
size, and color of the text. (Note: Class style names always begin with a period or
dot.)
9 USE TAG STYLES TO PRESERVE HTML CODING
Whenever possible, it’s best to use standard HTML tags, but that doesn’t mean
you can’t control the formatting options with CSS. For example, there are many
advantages to formatting a headline with the h1 tag (search engines put greater
value on words in an h1 tag, and heading tags convey the hierarchical importance
of content on a page). But you don’t have to settle for all your headlines
displaying in Times, 24 pt, bold text. By creating a style using the tag selector,
you can change the text formatting option for the h1 tag, and any other tags you
use.
10 USE EXTERNAL STYLE SHEETS
When you create styles in Dreamweaver, you have the option of saving them in
an internal style sheet (meaning the styles are saved in the same document), or
in an external style sheet (a separate file that can be linked to one or more pages
in a website). External style sheets offer the advantage that you can use the
same styles on many pages and that if you ever want to change a style, you can
make the change once in the external style sheet and automatically apply it to all
of your pages.

11 SAVE TIME WITH TEMPLATES

Once you’ve redesigned your page using CSS, create a template with your new
layout. Templates and CSS play well together and combine to make creating new
pages for your site much easier. If you redesign your site, you can simply edit the
style sheet to change styles and edit the template to make changes to the HTML
tags and the page content. Tip: If you edit a template, you change all of the
pages created from it and all need to be uploaded to your server. If you change
an external style sheet, you only need to upload the style sheet to the server.
 12 COMPARE TABLES AND CSS LAYOUTS
To help you appreciate that you can re-create any tables design using CSS, the
layout shown on the left was created with tables, the one on the right was
created with CSS. In the CSS version, I used the margin settings to create
columns that better align the text with the images so that the text doesn’t extend
beyond the width of the photos, as it did in the layout that uses tables. Using
CSS, you can create much more complex and precise page designs.

2. Discuss Designer Panels. Create home page of any sports website using designer labels. Also create
buttons which have hyperlinks.

ANS- Dreamweaver is one of the most popular professional Web development

software packages available. It offers power and flexibility to create pages that meet
your needs. I use it for everything from JSP, XHTML, PHP, and XML development. It is
a good choice for professional Web designers and developers, but if you're working as
a solitary freelancer, you might want to look at one of the CS suites like Web or
Design to get graphics editing capability as well.

<head>

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Sports Website Design &amp; SEO services</title>

<meta name="description" content="San Francisco Bay Area Sports website design

and search engine optimizing company">

<meta name="keywords" content="website design, soe, search engine optimizing,

sport website design, sport seo, website development" />

<META NAME="author" CONTENT="Jigsaw Design">

<META NAME="GOOGLEBOT" CONTENT="INDEX, FOLLOW">

<meta name="robots" content="index,follow">

<meta name="revisit-after" content="7 days">

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

<script type="text/javascript" src="styles/reflection.js"></script>

<script src="styles/prototype.js" type="text/javascript"></script>

<script src="styles/scriptaculous.js?load=effects" type="text/javascript"></script>

<script src="styles/lightbox.js" type="text/javascript"></script>

</head>

<body>

<div align="center"><table border="0" cellpadding="0" cellspacing="0"

width="100%" id="maintable" class="maintable">

<tr><td><div align="center"><table border="0" cellpadding="0" width="850"

id="table2" cellspacing="0">
<tr><td class="header" id="header">

<a title="bay area website design and SEO" href="http://www.jigsawinc.com">

<img border="0" src="images/spacer.gif" width="115"

height="79"></a>&nbsp;&nbsp;

<a title="Wedsite Design " href="web-design.html">

<img border="0" src="images/spacer.gif" width="272" height="79"></a><a

title="Graphic Design" href="graphic-design.html"><img border="0"
src="images/spacer.gif" width="193" height="79"></a><a title="Search Engine
Optimizing SEO" href="Search-engine-optimizing.html"><img border="0"
src="images/spacer.gif" width="174" height="79"></a></td></tr>

<tr><td class="pagetitle" id="pagetitle">

<h1>Sports Website Design</h1></td></tr>

<tr><td valign="top" nowrap class="nav" id="nav" height="30"><p>

<a href="index.htm">Home</a>

<a href="aboutjigsawdesign.htm">About</a>

<a href="web-design-samples.html">Portfolio</a>

<a href="web-design-testamonails.html">Testimonials</a>

<a href="goinggreen.html">Green Company</a>

<a href="online-store-ecommerce.html">Useful Resources</a>

<a href="contact.html">Contact</a>

</td></tr></table>

<div align="center"><table border="0" cellpadding="0" width="850"

cellspacing="0">

<tr><td class="left" id="left">

<h2>Services</h2>
<p><a href="web-design.html">Website Design</a> </p>

<p><a href="graphic-design.html">Graphic Design</a></p>

<p><a href="Search-engine-optimizing.html">Search Engine Optimizing</a></p>

<p><a href="clent.html">Webmaster Service</a></p>

<p><a href="SEOcontentwriting.html">SEO Content Writing</a></p>

<h2>Specialties</h2>

<p><a href="MedicalWebsiteDesign.html">Medical Website design</a></p>

<p><a href="legalWebsiteDesign.html">Legal Website Design</a></p>

<p><a href="retailwebdesign.html">Retail Website Design</a></p>

<p><a href="RestaurantWebsiteDesign.html">Restaurant Website Design</a></p>

<p><a href="SportsWebsiteDesign.html">Sports Website Design</a></p>

<p><a href="Hi-TechWebsiteDesign.html">Hi-Tech Website Design</a></p>

<p><a href="ArtistWebsiteDesign.html">Artist Web Design</a></p>

<p><a href="MaritimeWebsiteDesign.html">Maritime Web Design</a></p>

<h2>More</h2>

<p><a href="SEOSecrets.html">SEO Secrets</a></p>

<p><a href="website-templates.html">Website Templates</a></p>

<p><a href="Articles.html">Design And SEO Articles</a></p>

<p><a href="web-design-things-to-know.html">Design and SEO

Education</a></p>

<div align="center"><table border="0" cellpadding="0" cellspacing="0"

id="tableface" class="tableface">

<tr><td class="sn1" id="sn1"><a href="http://www.facebook.com/pages/San-Jose-

CA/Jigsaw-Design-Website-Design-and-SEO/117000913397?ref=ts"
id="rollover1"><span>Facebook</span></a></td></tr></table></div>

<p><br></td><td class="contentframe" id="contentframe">

<div align="center"><table border="0" cellpadding="0" cellspacing="0"
width="100%" id="table5">

<tr><td class="flash" id="flash">

<img border="0" src="images/sportswebsitedesign.jpg" width="684" height="330"

alt="Website design for sports websites"><p>

<img border="0" src="images/TITILEsportswebsitedesign.jpg" width="684"

height="40" alt="Sports website design"></td></tr></table></div>

<div align="center"><table border="0" cellpadding="0" cellspacing="0"

width="100%" id="table6">

<tr><td class="content" id="content">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="100%"

id="table7">

<tr>

<td class="contentleft" id="contentleft"><p>At Jigsaw Design, we

know that when you are a fan of a sport you want to see that sport

or elements of that sport everywhere you look. That’s why when we

design sport-related websites we make them bold and in-your-face.

Creating a theme is important when designing a sports website. If

the focus is a sports celebrity, his/her images should be used as

many times as possible along with the elements of the sport that

he/she is associated with. </p>

<p>&nbsp;</p>

<p>One of the main challenges in building a sports website is

optimizing all the visual aspects so that the website can remain

looking sharp, yet still keep load times to a minimum. The biggest
 mistake we see on a lot of sports websites is over indulgence in

high quality images and flash. This makes sites slow loading and

frustrates visitors to the point where the experience becomes a

chore and they only return to the site if they really have to. We

have developed multiple tricks to keep load times down while still

keeping images sharp and vibrant and, thus, create a sports

website

that is both visually pleasing, but also functional. </p>

<p>&nbsp;</p>

<p>When you have your sports website created by Jigsaw Design,

you

will be tapping into years of experience in designing websites

focused on either self-promotion or team/sport promotion.

</p></td>

<td class="contentright" id="contentright">

<p>

<a rel="lightbox[sample]" title="View full

portfolio for link to website." href="websitedesign/fitchb.jpg">

<img border="0" src="websitedesign/fitchs.jpg"

width="160" height="91" class="reflect rheight20 ropacity40" alt="Sports Website
Design Sample Click to enlarge"></a></p>

<p>

&nbsp;</p>

<p>

<a rel="lightbox[sample]" title="View full

portfolio for link to website." href="websitedesign/plankb.jpg">

<img border="0" src="websitedesign/planks.jpg"

width="160" height="91" class="reflect rheight20 ropacity40" alt="Sports Website
Design Sample Click to enlarge"></a></p>
 <p>

&nbsp;</p>

<p>

<a rel="lightbox[sample]" title="View full

portfolio for link to website." href="websitedesign/pokerb.jpg">

<img border="0" src="websitedesign/pokers.jpg"

width="160" height="91" class="reflect rheight20 ropacity40" alt="Sports Website
Design Sample Click to enlarge"></a></p>

<p>

&nbsp;</p>

<p style="text-align: left">

<a href="web-design-samples.html">Web Design

Portfolio</a></td>

</tr>

</table>

</div>

</td></tr></table></div></td></tr>

<tr><td colspan="2" class="services" id="services">

<div align="center"><table border="0" cellpadding="0" cellspacing="0"

width="100%" id="table3">

<tr><td class="serviceboxheader" id="serviceboxheader"><h1>Website

Design</h1></td>

<td class="serviceboxheader" id="serviceboxheader"><h1>Graphic

Design</h1></td>

<td class="serviceboxheader" id="serviceboxheader"><h1>SEO</h1></td>

<td class="serviceboxheader" id="serviceboxheader"><h1>Webmaster

Service</h1></td>

<td class="serviceboxheader" id="serviceboxheader"><h1>Content

Writing</h1></td></tr>
<tr><td class="servicebox" id="servicebox"><p align="center" style="text-align:
center">

<a href="web-design.html">

<img border="0" src="images/websitedesign.jpg" class="reflect rheight20

ropacity40" alt="Website Design Services"></a></p>

<p><b>Website Design Services</b></p>

<p>Website Development</p>

<p>E-Commerce</p>

<p>Custom CMS</p>

<p>Database Driven Sites</p>

<p><a title="More information on website design" href="web-design.html">More

Info</a></p></td>

<td class="servicebox" id="servicebox"><p align="center" style="text-align:

center">

<a href="graphic-design.html">

<img border="0" src="images/graphicdesignservice.jpg" class="reflect rheight20

ropacity40" alt="Graphic Design Services"></a></p>

<p><b>Graphic Design Services</b></p>

<p>Logo Design</p>

<p>Business Form Layout</p>

<p>3D Animation</p>

<p>Vehicle Graphic Design</p>

<p><a title="More information on graphic design" href="graphic-design.html">More

Info</a></p></td>

<td class="servicebox" id="servicebox"><p align="center" style="text-align:

center">

<a href="Search-engine-optimizing.html">

<img border="0" src="images/searchengineoptimizing.jpg" class="reflect rheight20

ropacity40" alt="Search Engine Optimization Services"></a></p>

<p><b>Search Engine Optimization</b></p>

<p>Content Optimization</p>

<p>Link Exchange</p>

<p>Search Engine Submission</p>

<p>Meta Tag Optimizing</p>

<p>

<a title="More information on search engine optimizing" href="Search-engine-

optimizing.html">More Info</a></p></td>

<td class="servicebox" id="servicebox"><p align="center" style="text-align:

center">

<a href="clent.html">

<img border="0" src="images/webmasterservice.jpg" class="reflect rheight20

ropacity40" alt="Webmaster Services"></a></p>

<p><b>Webmaster Services</b></p>

<p>Website Updating</p>

<p>Content Edits</p>

<p>Adding New Content</p>

<p>Site Stability Checks</p>

<p><a title="More information on our webmaster services" href="clent.html">More

Info</a></p></td>

<td class="servicebox" id="servicebox"><p align="center" style="text-align:

center">

<a href="SEOcontentwriting.html">

<img border="0" src="images/contentwriting.jpg" class="reflect rheight20

ropacity40" alt="Website Content Writing Services"></a></p>

<p><b>SEO Content Writing</b></p>

<p>Writing Content For New Sites</p>

<p>Re-Writing Stale Content</p>

<p>Adding Unique Articles</p>

<p>Writing Product Descriptions</p>

<p>

<a title="More information on our content writing services"

href="SEOcontentwriting.html">More Info</a></p></td></tr></table></div>
</td></tr>

<tr><td colspan="2" class="foot" id="foot"><div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table4"><tr>

<td class="footer" id="footer"><p>Copyright 2009 Jigsaw Design: <a

href="http://www.jigsawinc.com">Website design and SEO Services</a></p></td>

<td class="footerlink" id="footerlink"><p><a href="terms.html">Terms &amp;

Conditions</a><font face="Arial">

<img border="0" src="images/facebook2.jpg" width="10" height="13"> </font>

<a href="web-design-services.html">Sitemap</a></p></td>

</tr></table></div></td></tr></table></div></div></td></tr></table></div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

</script>

<script type="text/javascript">

_uacct = "UA-278779-1";

urchinTracker();

</script>

<script type="text/javascript" language="javascript">

var sc_project=659373;

var sc_invisible=1;
var sc_partition=5;

var sc_security="4c471b89";

var sc_remove_link=1;

</script>

<script type="text/javascript" language="javascript"

src="http://www.statcounter.com/counter/counter.js"></script><noscript><img
src="http://c6.statcounter.com/counter.php?
sc_project=659373&amp;java=0&amp;security=4c471b89&amp;invisible=1"
alt="hidden hit counter" border="0"> </noscript>

</body>

</html>

3. Create a homepage of cosmetic products website in Dreamweaver. Also animate it in a way so that it
changes background color automatically.

Ans:- Homepage of cosmetic products website in Dreamweaver

<HTML>
<HEAD>
<TITLE>Gift Guide</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="keywords" content="cosmetic gifts, cosmetic gift sets, beauty gift sets, makeup gifts,
makeup gift sets, fragrance gifts, fragrance gift sets, skin care gifts, skin care gift sets, gifts for dads, gifts for
moms, gifts for grads, gifts for brides">
<LINK HREF="/Styles.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="/Styles_US.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="/Themes/TabMenu/US/tabs.css" REL="stylesheet" TYPE="text/css">
<link href="/WHATSNEW/whatsnew.css" rel="stylesheet" type="text/css">
<SCRIPT SRC="/Themes/TabMenu/tabs.js"></SCRIPT>
<style type="text/css">

#ggCntnr{margin: 0; padding: 0;width: 800px; height: 440px; position: relative; top: 0; left:0; z-index: 1;
font-family: Arial, Helvetica, sans-serif;}
#ggCntnr img{padding: 0; margin: 0; float: left;}
#ggCntnr .navCntnr2{clear: left; position: relative; top: 0; left:0; z-index: 1;}

#ggCntnr .orn{position: absolute; top: 375px; left: 70px; z-index: 3; clear: left;}

</style>
<link rel='stylesheet' href='/Menu.css' type='text/css' /><!--[if IE 6]><link rel='stylesheet'
href='/IEMenu6.css' type='text/css' /><![endif]-->
</head>
<BODY MS_POSITIONING="GridLayout"> <form name="Form1" method="post"
action="default.aspx?ab=lghp_giftguide" id="Form1">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNTY2NTg3MTUyZGQ=" />

<script type="text/javascript">
<!--
var theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>

<!-- DCEPPWS103 12/5/2009 8:06:00 AM--><!-- PWS_2 -->

<TABLE CLASS="MainTable" CELLSPACING="1" CELLPADDING="0" WIDTH="1000"

ALIGN="center" BORDER="0">
<TR>
<TD>
<!-- googleoff: snippet-->
<div class="mkheader">
<a class="mkHomeContainer" href='http://www.marykay.com/default.aspx?tab=home'></a>
<div class="mkCorpContainer">

<div class="corpInfoContainer">Shop online with an <br />

<a href="http://www.marykay.com/locator.aspx?tab=Home" class="findibc">Independent Beauty
Consultant</a> today!
</div>
</div>
<div class="mkSearchContainer">

<div class="headRightContainer">
<span class="rightHeaderText">

<!-- googleoff: all-->

<a id="_ctl0_Search__languageSelection__languageRepeater__ctl1__languageLink" class="espanol"

href="javascript:__doPostBack('_ctl0$Search$_languageSelection$_languageRepeater$_ctl1$_languageLin
k','')">Español</a>

<!-- googleon: all-->

 </span>
</div>

<table width="305px" border="0" cellpadding="0" cellspacing="0" style="padding-top:2px;">

<tr>
<td align="right">
<table width="156" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" align="left" valign="middle" class="searchback">
&nbsp;&nbsp;
<input name="_ctl0:Search:txtSearch" type="text" value="Search Mary Kay" size="26"
id="_ctl0_Search_txtSearch" class="searchbox" onfocus="javascript:this.value = '';"
onkeypress="javascript:if (event.keyCode == 13) { __doPostBack('_ctl0:Search:SearchLinkButton','');
return false; }" /></td>
<td width="13" align="right" valign="middle">
<a id="_ctl0_Search_SearchLinkButton"
href="javascript:__doPostBack('_ctl0$Search$SearchLinkButton','')">
<img src="/images/searchbutton.gif" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>

</div>
</div>
<!-- googleon: snippet-->

</TD>
</TR>
<TR>
<TD><!--googleoff:snippet--><div class="MKIM"><div class="ANM-Horizontal"><ul
class="ANM"><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/whatsnew/default.aspx">WHAT'S NEW</A><ul class="ANM-Sub"><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/newproducts/default.aspx">New Products</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/bestsellers/default.aspx">Best Sellers</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/awardwinners/default.aspx">Awards Won</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/virtualmakeover/default.aspx">Virtual Makeover</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/beautyonabudget/default.aspx">Beauty On a Budget</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/tipstrends/default.aspx">Tips & Trends</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/ecatalog/default.aspx">Catalog</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/thelookmobileversion/default.aspx"><em>The Look</em>
Mobile Version</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/beautythatcounts/default.aspx"><em>Beauty That
Counts</em>™</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/itsyourparty/default.aspx">Host a Party</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/makeupartistlooks/default.aspx">Makeup Artist
Looks</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/giftideas/default.aspx">Gift Guide</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/whatsnew/beautyeditorspicks/default.aspx">Beauty Editors'
Picks</A></li></ul></li><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/skincare/default.aspx">SKIN CARE</A><ul class="ANM-Sub"><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/agefighting/default.aspx">Age-Fighting</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/cleansers/default.aspx">Cleansers</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/moisturization/default.aspx">Moisturization</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/classicbasicskincare/default.aspx">Classic Basic Skin
Care</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/mkmen/default.aspx">MKMen® Skin Care</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/velocity/default.aspx">Velocity® Skin Care</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/lipeyecare/default.aspx">Lip & Eye Care</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/specificneeds/default.aspx">Specific Needs</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/skincare/travelrollupbag/default.aspx">Travel Roll-Up Bag
(unfilled)</A></li></ul></li><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/color/default.aspx">MAKEUP</A><ul class="ANM-Sub"><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/color/eyes/default.aspx">Eyes</A></li><li class="ANM-Leaf"><A
class="ANM-Link" href="http://www.marykay.com/color/lips/default.aspx">Lips</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/color/cheeks/default.aspx">Cheeks</A></li><li class="ANM-Leaf"><A
class="ANM-Link"
href="http://www.marykay.com/color/foundations/default.aspx">Foundations</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/color/concealers/default.aspx">Concealers</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/color/powders/default.aspx">Powders</A></li><li class="ANM-Leaf"><A
class="ANM-Link" href="http://www.marykay.com/color/compactsapplicators/default.aspx">Compacts &
Applicators</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/color/facialhighlightingpen/default.aspx">Facial Highlighting
Pen</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/color/travelrollupbag/default.aspx">Travel Roll-Up Bag
(unfilled)</A></li></ul></li><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/spabody/default.aspx">BODY & SUN</A><ul class="ANM-Sub"><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/spabody/bodycare/default.aspx">Body Care</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/spabody/suncarecollection/default.aspx">Mary Kay® Sun Care
Collection</A></li></ul></li><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/fragrances/default.aspx">FRAGRANCE</A><ul class="ANM-Sub"><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/fragrances/womensfragrances/default.aspx">Women's</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/fragrances/mensfragrances/default.aspx">Men's</A></li></ul></li><li
class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/mens/default.aspx">MEN</A><ul class="ANM-Sub"><li class="ANM-
Leaf"><A class="ANM-Link" href="http://www.marykay.com/mens/mkmen/default.aspx">MKMen® Skin
Care</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/mens/mensfragrances/default.aspx">Men's Fragrances</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/mens/suncarecollection/default.aspx">Mary Kay® Sun
Care</A></li></ul></li><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/company/default.aspx"><b>COMPANY</b></A><ul class="ANM-
Sub"><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/companyfounder/default.aspx">Company Founder</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/milestones/default.aspx">Mary Kay Milestones</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/aroundtheworld/default.aspx">Mary Kay Around the
World</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/socialresponsibility/default.aspx">Social
Responsibility</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/companyquickfacts/default.aspx">Company Quick
Facts</A></li><li class="ANM-Leaf"><A class="ANM-Link" target="_blank"
href="http://reflections.marykay.com"><b>Blog</b></A></li><li class="ANM-Leaf"><A class="ANM-
Link" href="http://www.marykay.com/company/pressroom/default.aspx">Press Room</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/jobsatmarykay/default.aspx">Employment at Mary
Kay</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/company/contactus/default.aspx">Contact Mary Kay</A></li><li
class="ANM-Leaf"><A class="ANM-Link" target="_blank"
href="http://www.marykayfoundation.org">The Mary Kay Foundation</A></li><li class="ANM-Leaf"><A
class="ANM-Link"
href="http://www.marykay.com/company/productresearchanddevelopment/default.aspx">Product Research
& Development</A></li></ul></li><li class="ANM-Root"><A class="ANM-RootLink"
href="http://www.marykay.com/sellmarykay/default.aspx">SELL MARY KAY</A><ul class="ANM-
Sub"><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/lifecanbegoodquiz/default.aspx">Life Can Be Good
Quiz</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/getstarted/default.aspx">Get Started</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/makemoney/default.aspx">Make Money</A></li><li
class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/learnhow/default.aspx">Learn How</A></li><li class="ANM-
Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/rewardrecognition/default.aspx">Rewards &
Recognition</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/theopportunityinthemedia/default.aspx">The Opportunity in
the Media</A></li><li class="ANM-Leaf"><A class="ANM-Link"
href="http://www.marykay.com/sellmarykay/aboutdirectselling/default.aspx">About the Direct Selling
Industry</A></li></ul></li></ul></div></div><!--googleon:snippet--></TD>
</TR>
<TR>
<TD><TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="100%" BORDER="0">
<TR>
 <TD CLASS="CategoryMenu" VALIGN="top">

<!-- googleoff: snippet-->

<div id="LeftNavigation">
<ul><li><a href="http://www.marykay.com/whatsnew/newproducts/default.aspx" target="">New
Products</a></li><li><a href="http://www.marykay.com/whatsnew/bestsellers/default.aspx" target="">Best
Sellers</a></li><li><a href="http://www.marykay.com/whatsnew/awardwinners/default.aspx"
target="">Awards Won</a></li><li><a
href="http://www.marykay.com/whatsnew/virtualmakeover/default.aspx" target="">Virtual
Makeover</a></li><li><a href="http://www.marykay.com/whatsnew/beautyonabudget/default.aspx"
target="">Beauty On a Budget</a></li><li><a
href="http://www.marykay.com/whatsnew/tipstrends/default.aspx" target="">Tips & Trends</a></li><li><a
href="http://www.marykay.com/whatsnew/ecatalog/default.aspx" target="">Catalog</a></li><li><a
href="http://www.marykay.com/whatsnew/thelookmobileversion/default.aspx" target=""><em>The
Look</em> Mobile Version</a></li><li><a
href="http://www.marykay.com/whatsnew/beautythatcounts/default.aspx" target=""><em>Beauty That
Counts</em>™</a></li><li><a href="http://www.marykay.com/whatsnew/itsyourparty/default.aspx"
target="">Host a Party</a></li><li><a
href="http://www.marykay.com/whatsnew/makeupartistlooks/default.aspx" target="">Makeup Artist
Looks</a></li><li><a href="http://www.marykay.com/whatsnew/giftideas/default.aspx" target="">Gift
Guide</a></li><li><a href="http://www.marykay.com/whatsnew/beautyeditorspicks/default.aspx"
target="">Beauty Editors' Picks</a></li></ul>

<script type="text/javascript" src="/Scripts/F2FOpener.js"></script>

<a href="#">
<img src="/images/btn_tellAFriend.gif" alt="Tell a Friend" border="0"
onClick="OpenF2F('http://www.marykay.com/forward/tellafriend_nopws.aspx?
url=http://www.MaryKay.com/whatsnew/giftideas/default.aspx');">
</a>
<br /><br />

</div>

<!-- googleon: snippet-->

</TD>
<TD VALIGN="top" ALIGN="left"><TABLE CELLSPACING="0" CELLPADDING="0"
WIDTH="100%" BORDER="0">
<TR>
<TD CLASS="BorderB" VALIGN="top" ALIGN="left"><span class="subnavtext"><a
href='http://www.marykay.com/whatsnew/default.aspx' class="subnavtext">What&#8217;s New</a> &gt;
Gift Guide</span></TD>
</TR>
</TABLE>
<div align="center">
<TABLE width="100%" border="0" cellPadding="0" cellSpacing="0">
<TR>
<TD width="10">&nbsp;</TD>
<TD align="left">

<div id="ggCntnr">
<img src="/whatsnew/giftguide/images/images909/ggLanding_header.jpg" alt="The Ultimate Gift
Guide" width="800" height="162" border="0" />
<a href="http://www.marykay.com/whatsnew/giftguide/under30.aspx"><img
src="/whatsnew/giftguide/images/images909/ggLanding_btn1a.jpg" width="160" height="170" hspace="0"
vspace="0" border="0" /></a>
<a href="http://www.marykay.com/whatsnew/giftguide/stocking.aspx"><img
src="/whatsnew/giftguide/images/images909/ggLanding_btn2a.jpg" width="160" height="170" hspace="0"
vspace="0" border="0" /></a>
<a href="http://www.marykay.com/whatsnew/giftguide/sets.aspx"><img src="/>
<HTML>

PART B

4. How are media elements in Dreamweaver? Can you insert a page created in HTML code into a
dreamweaver image ? If yes,how can you implement such thing?

ANS-

Media elements in Dreamweaver

Dreamweaver won't solve all your web page problems, but it can be a very powerful tool to create web
pages quickly, consistently, and easily. It will also help you to manage your website and keep it organized. It
will help you to develop a website that looks consistent across many platforms. You can use the WYSIWYG
(What You See Is What You Get) interface to construct your web pages, while Dreamweaver writes the code
and checks to make sure it works. At the same time, it allows you to view and edit the HTML source code
yourself. It has some built in whiz-bang effects, but also allows you to customize the program to your own
needs, adding outside applications and extensions.

Step 1: Planning! .........

After you have decided that you want a web page, you must decide:

Who is your audience? (scientists? sports enthusiasts? children? kangaroo fanciers?) What kind of
equipment will they be using?

What you want to display (pictures? text? diagrams? downloadable games? an interactive forum?)

Where you will put things (draw a site map!)

Why you are doing this (to convey information? to persuade an audience? to strut your stuff)

How will the web page function? (what kind of navigation will you have? Hotlinks, dropdown menus?)
Drawing out a diagram:

(My webpage will be about that terrific legume, the humble pea. Here’s my vision.)

Now draw or have in mind a picture of the home page. Draw it on your computer or draw it on a napkin--
doesn’t matter.

(It doesn’t have to be perfect, just an idea so you can find or create the graphics).
Step 2: Assembling your stuff

You will need:

1. Your text

2. Pictures (jpg or gif images)

3. A text editor or WYSIWYG editor (Dreamweaver)

Step 3: Creating a place for your website ...

All of your website should be stored in a convenient place, called the Root Folder:

My root folder is called ‘peas’

You should keep your file names short and to the point, with no spaces (although you can use dashes,
underscores, or periods to separate words)

Store your root folder somewhere on your hard drive where you can access it easily...

Public or Private?

You need to decide whether your page will be seen by anyone in the world or only people within
Whitehead.--Or you can make some pages public and some private. The next step is to create two new
folders within your root folder. The Whitehead-only folder should be named "wi" and the public folder
should be named "pub" (lowercase, no punctuation).

Later on you will save your home page into this folder as well. All the rest of your pages and images will be
saved into either the pub folder, which can be accessed from inside or outside Whitehead, or into the WI
folder, which can only be accessed from within Whitehead.

None of our peas pages are top secret, so we will put them all into the pub folder. The last thing we need to
do is put a folder inside the pub folder for all our images.
Step 4: Open Dreamweaver ..........

1. Install Dreamweaver. If the application freezes when you try to launch it, go to your System Folder >
Preferences and throw out the Dreamweaver preferences. Dreamweaver will recreate these preferences after
you launch the program.

2. Define the local information for your site. When you launch Dreamweaver, it may tell you that no sites
have been defined. The first thing to do is go to the Site menu and choose "New". You will see this palette:

Type in a name for your site. Next, to define your Local Root folder, click on the folder icon to search for
and select the folder you made in step 3 for your site. This will be your Local Root folder. If you ever need
to move the files for your site, you can move this folder around without breaking links, but don’t remove or
move folders within this folder
5. What are Form Elements? How can you insert form into frames? Can any page of a website be created
without frames.

An HTML form is a section of a document containing normal content, markup, special elements
called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users
generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.),
before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

The following HTML example (using the META element) forwards the user from one page to
another after a timeout. However, users should not redirect users with this markup since is non-
standard, it disorients users, and it can disrupt a browser's history of visited pages

Here's a simple form that includes labels, radio buttons, and push buttons (reset the form or
submit it):

<FORM action="http://somesite.com/prog/adduser" method="post">

<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>

6-How is the creation of Labels and tables different in HTML and

dreamweaver? Create both in Dream weavers?

ANS-6

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>