Scribd
Upload
800 views28 pages

SWPD Manual

The document analyzes 5 websites in terms of usability and accessibility. It describes the purpose, features, and navigation of each website, including Discovery Channel India, File Hippo, GTU, Help 2 Engg, and Yahoo. For each site, it outlines the main content, navigation options, and additional features like automatic image sliding or login capabilities. The analysis aims to understand how users interact with and access information across different static and dynamic website designs.

Uploaded by

api-347170525
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
800 views28 pages

SWPD Manual

The document analyzes 5 websites in terms of usability and accessibility. It describes the purpose, features, and navigation of each website, including Discovery Channel India, File Hippo, GTU, Help 2 Engg, and Yahoo. For each site, it outlines the main content, navigation options, and additional features like automatic image sliding or login capabilities. The analysis aims to understand how users interact with and access information across different static and dynamic website designs.

Uploaded by

api-347170525
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Static Web Page Designing (3320703)

EXPERIMENT: 1
Aim:- ANALYZE 5 WEBSITE ON TERMS OF USABILITY AND
ACCESSIBILITY TERMS.

Objectives:

Analyze 2 Dynamic Website.

Analyze 2 Static Website.

Analyze Some of animation functionality.

Discovery Channel India:-

http:// www.discoverychannel.co.in

This Website is used to show T.V Programs available on discovery channel.

There is timetable of programs available on top right corner of webpage.

In the top part of website pictures are automatically changing and we can show them again
by clicking on their

Mini Icons.

In the download part of the webpage ,there are some option are available which can be
helpful to know more

About this website.

Fig-1
Home/Video/Shows/TV Listing/Find US

File Hippo:-

http:// www.filehippo.com

This website is used for download Softwares.

We can search our require softwares by clicking and typing in search box.

Search Go
We can see website in other languages by take our cursor and select from list shown below:

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 1


Static Web Page Designing (3320703)

English
Deutsch
Espanol
Francais
Italino
Polski

Many Softwares are listed on main webpage of this website.

Popular Software
1.CCleaner 3.27.1900
2. avast free antivirus 7.0.1474
3. Skype 6.1.0.129
4. google chrome 25.0.1364.68
beta
5. adobe reader 11.0.01
6. VLC media player 2.0.5(32 bits)
View More

GTU:-

http://www.gtu.ac.in

This website is used for know about time table of exam, syllabus, results of any exams for
engineering branch of

Gujarat Technological University.

In the right side of webpage news appears going up.

We can select exams from popup menu for knowing result of exam.

Winter 2012

Select Exam


Summer 2012

Select Exam

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 2


Static Web Page Designing (3320703)

There is a hitcounter is available in bottim part of website.

Hit Counter:0 2 0 1 1 5 9 8 2 (Counter start date:4 apr 2011)

Help 2 Engg:-

http:// www.help2engg.com

It is useful website for engineering Students.

There are different options are available in menu bar.

There are latest updates are shown on left side of the webpage.

At the right side of the webpage. We can sign in website.(If we have created our account on
it.)

Home / Syllabus /Exampaper/Tutorials/Career path/About us

Sign In Your Account

User ID

Password

Sign In

New User Sigh UP Forgot Pass?

Yahoo:-

http:// www.yahoo.com

This website is used for news, mailing, advertising and others.

One Search box is available on webpage to search our require topics.

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 3


Static Web Page Designing (3320703)

On the webpage ,images are changing automatically without any clicking.

There is a list shown in webpage for more information.

Search

Mail

Answer

Astrology

Cricket

Dainik Jagran

Finance

Flickr

Game

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 4


Static Web Page Designing (3320703)

EXPERIMENT: 2
Aim:-DESIGN HTML PAGE WITH TABLE

1) Simple table with border


<html>

<body>

<table border="1">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr> <tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

</body>

</html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 5


Static Web Page Designing (3320703)
2) Table with no border
<html>
<body>

<h4>This table has no borders:</h4>


<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h4>And this table has no borders:</h4>


<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>

(3) Table with cell spans


<html>

<body>

<h4>Cell that spans two columns:</h4>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 6


Static Web Page Designing (3320703)
<table border="1">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 7


Static Web Page Designing (3320703)
</table>

</body>

</html>

3) Table with cellpading


<html>
<body>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>
4) Table with cell spacing
<html>
<body>

<h4>Without cellspacing:</h4>
<table border="1">

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 8


Static Web Page Designing (3320703)
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>

</tr>
</table>

<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>

(5) Table in table


<html>
<body>

<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 9


Static Web Page Designing (3320703)
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body></html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 10


Static Web Page Designing (3320703)

EXPERIMENT: 3
AIM:-DESIGN HTML PAGE WITH FORM.

<html>

<body bgcolor="yellow">

<form>

<font face="arial" color="red" >

full name:<input type="text"><br>

password:<input type="password" ><br>

address:<input type="textarea" cols="100" row="50"><br>

<input type="radio" name="gender">male<br>

<input type="radio" name="gender">female<br>

select your aged <br>

<input type="checkbox" name="features"> 7 t0 15 aged<br>

<input type="checkbox" name="features"> 16t0 25 aged<br>

<input type="checkbox" name="features"> 26t0 35 aged<br>

<input type="checkbox" name="features"> 36t0 45 aged<br>

select your city(india)<br>

<select name="dist">

<option> surat<br> </option>

<option> kim <br></option>

<option> vadodara<br> </option>

</select><br>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 11


Static Web Page Designing (3320703)

<input type="submit" value="submit">

</font>

</form>

</body>

</html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 12


Static Web Page Designing (3320703)

EXPERIMENT: 4
AIM:-DESIGN HTML PAGE WITH HYPERLINK AND IMAGE
<html>

<body BGCOLOR="RED" TEXT="YELLOW">

<font face="arial" color="yellow" size="35">

<img src="Lighthouse - Copy (3)" align="down" width="200" height="200">

<U><B><I> my name .</I> </B></U> <br>

<B> i am living in surat. </B> <br>

<I> i am stududent </I><BR>

<marquee direction="left"> <ol type=a>

<li>name:-krishna

<li>roll no:-123456789

<li>mobile no:- 3459898298983

</ol></marquee>

</body>

</img>

</font>

<a href="KRISHNA.html">krishna</a>

</body>

</html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 13


Static Web Page Designing (3320703)

EXPERIMENT: 5
AIM:-DESIGN HTML PAGE WITH FRAMESET

Frame with percentage

Vertical frame
<html>

<frameset cols="45%,*,35%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</html>

Horizontal frame
<html>

<frameset rows="25%,*,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</html>

<html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 14


Static Web Page Designing (3320703)

MIXED frame

<frameset rows="50%,50%">

<frame src="frame_a.htm">

<frameset cols="25%,75%">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</frameset>

</html>

MARGIN HIEGHT frame

<frameset cols="50%,50%">

<frame src="frame_a.htm" marginheight="170">

<frame src="frame_b.htm" marginheight="0">

</frameset>

</html>

MARGIN WIDTH frame


<html>

<frameset cols="50%,50%">

<frame src="frame_a.htm" marginwidth="150">

<frame src="frame_b.htm" marginwidth="0">

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 15


Static Web Page Designing (3320703)
</frameset>

SCROLL BAR (AUTO, YES, NO)

AUTO-automatically if needed than display.

YES-display scroll bar if needed or not

NO-not display scroll bar if it is needed or not

<html>

<frameset cols="50%,50%">

<frame src="frame_a.htm" scrolling="yes">

<frame src="frame_b.htm">

</frameset>

</html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 16


Static Web Page Designing (3320703)

EXPERIMENT: 6
AIM:-DEVLOP VARIOUS PAGES USING CASCADING STYLE SHEET
TO STYLE YOUR PAGE

INLINE:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>

INTERNAL:

<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>

EXTERNAL:

HTML file:

<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 17


Static Web Page Designing (3320703)

CSS file:

body {
background-color: #FF0000;
}

EXTERNAL:


body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

h1 {
color: #990000;
background-color: #FC9804;
}

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}

h1 {
color: #990000;
background-color: #FC9804;
}

body {

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 18


Static Web Page Designing (3320703)
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}

p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

h1 {
letter-spacing: 6px;
}

p{
letter-spacing: 3px;
}

h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 19


Static Web Page Designing (3320703)

EXPERIMENT: 7
AIM:-DEVLOP VARIOUS PAGES USING CSS SELECTOR AND
EMBEDDED STYLE SHEETS

Examples :
<html>

<head>

<style type="text/css">

h1{

color = red;

size=60px;

body{

back ground color:yellow;

font{

font face:harlowsoliditalic;

</style>

<body >

<img src="055.jpg" align="down" width="300"height="300"><br>

<a href="css.html"><i>j m patel</i></a></br>

<h1><I>my name is PATEL .</I></h1><br>

<h1><I>I am living in surat. </i></h1><br>

<h1><I>I am study in KIM. </I></h1><BR>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 20


Static Web Page Designing (3320703)
<marquee direction="right"> <ol type=A>

<h1><li>Name:- PATEL V V </h1>

<h1><li>roll no:-123456</h1>

<h1><li>mobile no:- 9876543210</h1>

</ol></marquee>

</body>

</html>

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 21


Static Web Page Designing (3320703)

EXPERIMENT: 8
AIM:-STYLING TABLE WITH HELP OF CSS

Table Borders:
table, th, td
{
border: 1px solid black;
}
Collapse Borders:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height:
table
{
width:100%;
}
th
{
height:50px;
}
Table Text Alignment:
td
{
text-align:right;
Vertical-align:bottom;
}

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 22


Static Web Page Designing (3320703)

Table Padding:
td
{
padding:15px;
}

Table Color:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 23


Static Web Page Designing (3320703)

EXPERIMENT: 9
AIM:-TO STUDY ABOUT VARIOUS FEATURES OF DREAMWEAVER
INTERFACE

Features:
Adobe Dreamweaver is a web design and development application that provides a visual editor
and a code editor with standard features such as syntax highlighting, code completion, and code
collapsing as well as more sophisticated features such as real-time syntax checking and code
introspection for generating code hints to assist the user in writing code. The Design view
facilitates rapid layout design and code generation as it allows users to quickly create and
manipulate the layout of HTML elements. Dreamweaver features an integrated browser for
previewing developed WebPages in the program's own preview pane in addition to allowing
content to be open in locally installed web browsers. It provides transfer and synchronization
features, the ability to find and replace lines of text or code by search terms or regular
expressions across the entire site, and a tinplating feature that allows single-source update of
shared code and layout across entire sites without server-side includes or scripting. The
behaviors panel also enables use of basic JavaScript without any coding knowledge, and
integration with Adobe's Spry Ajax framework offers easy access to dynamically-generated
content and interfaces.

Recent versions have improved support for Web technologies such as CSS, JavaScript, and
various server languages and frameworks including ASP (ASP JavaScript, ASP VBScript,
ASP.NET C#, ASP.NET VB),ColdFusion, Scriptlet, and PHP.

Language availability
Adobe Dreamweaver CS6 is available in the following languages: Brazilian Portuguese, Chinese
Simplified, Chinese Traditional, Czech, Dutch, English, French, German, Italian, Japanese,
Korean (Windows only), Polish, Russian, Spanish, Swedish, and Turkish.

Specific features for Arabic and Hebrew languages


The older Adobe Dreamweaver CS3 also features a Middle Eastern version that allows typing
Arabic, Persian or Hebrew text (written from right to left) within the code view. Whether the text
is fully Middle Eastern (written from right to left) or includes both English and Middle Eastern
text (written left to right and right to left), it will be displayed properly.

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 24


Static Web Page Designing (3320703)
Dreamweaver supports syntax highlighting for the following languages out of the box:

Action Script
Active Server Pages (ASP).
C#
Cascading Style Sheets (CSS)
ColdFusion
EDML
Extensible Hypertext Markup Language (XHTML)
Extensible Markup Language (XML)
Extensible Style sheet Language Transformations (XSLT)
Hypertext Markup Language (HTML)
Java
JavaScript
PHP: Hypertext Preprocessor (PHP)
Visual Basic (VB)
Visual Basic Script Edition (VBScript)
Wireless Markup Language (WML)

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 25


Static Web Page Designing (3320703)

EXPERIMENT: 10
AIM:-DEVLOP BASIC SITES WITH USE OF DREAMWEAVER

Students prepare one small website with the use of DREAMWEAVER.

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 26


Static Web Page Designing (3320703)

EXPERIMENT: 11
AIM:-CREATE MINI WEBSITE USING HTML AND CSS

Students prepare one small website with the use of text editor (Ex. notepad).

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 27


Static Web Page Designing (3320703)

EXPERIMENT: 12
AIM:- HOST THE DESIGNED WEBSITE ON ANY WEB SERVER

With the use of WAMP SERVER we can host our website on local host.
Students will host website on local host.

SHREE DHANVANTRY COLLEGE OF DIPLOMA ENGINEERING Page 28

You might also like