Advance web Design

Advanced Web Design December 2010 Final ©NCC Education 2010

Statement and Confirmation of Own Work

Programme/Qualification name:

Each NCC Education assessed assignment submitted by you must have this statement attached to the assignment as the cover page or it will not be accepted for marking. Please ensure that this statement is either firmly attached to the cover of the assignment or electronically inserted into the front of the assignment.

Student declaration

I have read and understood NCC Education’s Policy on Academic Dishonesty andPlagiarism.

I can confirm the following details:

Student ID/Registration

number: Name:

Centre Name:

Module Name:

Module Leader:

Number of

words:

I confirm that this is my own work and that I have not plagiarized any part of it. I have also noted the assessment criteria and pass mark for assignments.

Due Date:

Student

Signature:


Submitted Date:


Acknowledgment

I am Md. Mahbub Alam is grateful to Daffodil Institute of IT (DIIT) for giving the chance to do the

assignment in the field of Advance web Design. I am also grateful & like to thank Md. Nasir Uddin Lecturer of Advance web Design of DIIT. His continues support, interest & encouragement help me

to complete this assignment. Huge unknown things are now know to me by doing this assignment.

In class room we collect knowledge about Advance web Design but practically I collect knowledge

by doing this assignment. It was a glorious memory by doing this assignment in my Life.


Task 1:

Problem Statement: Before make a website, have to research about website, makes note and record useful data.

Introduction: If we research about a web site, we will find much important information which is help full to us to create a website. Important data have to record and have to make a note, when we will make this website we got everything on our hand.

Summary: Every website creator follows this roll to create important information gathered website.

ResearchWebsite: http://www.hsalt.com

Domain Name: hsalt.com

URL: http://www.hsalt.com/menu.htm

Notes: This website information presentation is very well.

Normal new user can easily find product here.

Easy access ability on this website.

This website designing are attractive use to buy product.

Take few times to load website.


http://www.hsalt.com/menu.htm

http://www.hsalt.com/

Website: http://www.colmansfishandchips.com/

Domain Name: colmansfishandchips.com

URL: http://www.colmansfishandchips.com/facts.htm

Notes: Design format is not very user friendly.

Much more text is used on this website.

No use of much more photo on this website.

Use award page is a plus point.

On this web site user can drop there comment.


http://www.colmansfishandchips.com/facts.htm

http://www.colmansfishandchips.com/

Website: www.wallysfishnchips.com

Domain Name: wallysfishnchips.com

URL: http://www.wallysfishnchips.com/history.html

Notes: Have to use photo of good dish.

Use of home delivery.

Use PayPal account or Master card, visa card for user.

Less information is bad for a web site.

Web site has to load fast.


http://www.wallysfishnchips.com/history.html

http://www.wallysfishnchips.com/

Website: http://chowhound.chow.com

Domain Name: chow.com

URL: http://chowhound.chow.com/topics/616252

Notes: Information has to in a well presentation.

Best presentation can make more buyers.

Comments area is work to buyers’ feedback.

Restaurant information has to describe in a shortly.

Country level menu item can use easily access.


http://chowhound.chow.com/topics/616252

http://chowhound.chow.com/

Website: http://www.restaurants.co.uk

Domain Name: restaurants.co.uk

URL: http://www.restaurants.co.uk/bm.php/fish_and_chips/14

Notes: Use Google absences for extra earnings.

A best menu item has to highlight.

Browser can show easy programming code easily.

CSS can use to create website outstanding look.

Best search engine optimization.

Summary: With this layout of home page and defining a navigation map, I finished my analysis

and design process with this task. The design of layout and sitemap can be change anytime. In

the next 3 & 4 steps are developments.


http://www.restaurants.co.uk/bm.php/fish_and_chips/14

http://www.restaurants.co.uk/

Task 2:

Problem Statement: In this task, Have to make a basic layout of home or index page and the

sitemap or site navigation of this website are need to defining in this task. The layout and navigation

should be draw and have to describe shortly. The navigation pages information is also need in this

task.

Introduction: With some logical thinking, I draw a layout of my website’s one page. This is not the

final layout. It can be changed when I’ll designing with coding. My website contains 14 pages. All of

the pages are interlinked with one another. Different pages are defining different information

according with their subjects. Here I try to point out the summarize information of all pages.

Design Specification: Here is describe which content is where will be located and Main structure of the site of Fish & Chips:

LOGO Banner{Banner of the web site}

HOME

Main Area of the web site.

Login HereFAQ User Name:

Password:AWARDSHISTORYFOODS

NUTRITIONS

OUR BRANCHAbout uscontact us


CLOCK Here

Print Button

Sign inCreate a new

account

GoogleAds

Search

© Copyright 2010 & Rights Reserved Design & Developed by:

Figure: 2.1 the layout of the home page.


Site map:There is an index or home page on this web site. Under the index page there are two site index and each site index contain two sub contents pages.

Sitemap or Navigation: After designing the layout, I need to explain my site navigation with a

perfect diagram. This site map is suitable for the website. It may be makes this website user

friendly. It’s makes website easier. Here 13 pages are interlinked with one another in a sitemap.

Figure: 2.2 Sitemap of fish & Chips


FAQ ABOUT US

Home

AWARDS HISTORY OUR BRANCH

Foods

CLASSIC

fish & chips

BATTERED

fish & chips

NUTRITION

GOOD FOR DIET

HEALTH BENEFIT

S

CONTACTUS

JOIN US

All of my pages are find out for my fish and chips website. Now, some notes are allow here of these

pages which are linking with one another. Step by step the pages are defining below with shortly-

Home: This page is home page of the website. This page contain some important information and

make a link to go others pages.

FAQ: This page is FAQ page and this page contains The FAQ of this website.

Awards: This page contains the information about fish and chips best awards.

History: This page contains the history of fish and chip.

Foods: This page contains food menu items, which is help to finds correct menu for user.

Battered: This page contains about only battered food menu items.

Classic: This page contains the classic food menu items.

Nutrition: Here is describing about Nutrition of food.

Health benefits: Here is describing about of health benefits. How to get benefit, here is describing shortly for our health.

Good for diet: This page contains about of good for diet. How a man or women can control his/ her diet. Here is describing shortly.

Our Branch: This page contains information of branches.

Join us: This page contains some valuable information and here user can comment on this page,

can make mail, can give some valuable suggestion on this page.

Contact us: Here is describe about, How to make a contact with us. User can get an E-Mail and

Address on this page. User can make a comment for a feedback.

About us: Here is describing about us.

Summary: With this layout of home page and defining a navigation map, I finished my analysis

and design process with this task. The design of layout and sitemap can be change anytime. In

the next 3 & 4 steps are developments.


Task 3:

Problem statement:

The website must be developed using XHTML 1.0 Strict and feature a minimum of twelve

interlinked pages. The website must feature the content described above and meet the following

criteria:

• Be consistent with the design specification produced for task 2

• Work fully in both Internet Explorer and Mozilla Firefox. You should consult your tutor for

guidance on the specific versions of these browsers you should use.

• Be viewable on monitors with screen resolutions of 800x600 without users having to scroll

Horizontally.

• Integrate and use a range of media appropriately.

• Demonstrate good application of web design principles and be easy to navigate and use.

Introduction: in this task I have to create fourteen html page in XHTML strict version 1.0 mode.

It is fully related with task 2. It’s screen resolution is 800x600.

Fig: Home page of fish & chips


Fig: FAQ page of fish & chips

Fig: Award page of fish & chips


Fig: History page of fish & chips

Fig: Foods page of fish & chips


Fig: Battend foods page of fish & chips

Fig: Classic foods page of fish & chips


Fig: Nutritions page of fish & chips

Fig: Health page of fish & chips


Fig: Benifits page of fish & chips

Fig:About our branch page of fish & chips


Fig: join us page of fish & chips

Fig: about us page of fish & chips


Fig: Contact us page of fish & chips

Summary: In this site user can register and order foods item. This website is fully functioning.

This site is fully related with above scenario describes.


Task 4:

Problem statement: Create a single external CSS file that specifies the design for the website.

Each of the HTML pages must link to this CSS file. There should be no use of the style attribute

or the <style> element in the website.

Introduction: I have to create a CSS file. I am not using style tag on html pages.

CSS code is under the below:

@charset "utf-8";

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000000;

}

body { background-color: #993333;}

a:hover { color: #33CCFF;}

a:active { color: #33FFFF;}

a:link { color: #000066; text-decoration: underline;}

a:visited { text-decoration: underline; color: #0033FF;}

#center{ text-align:center;}

#banner{

font:sans-serif;

text-align:center;

font-weight: bold;

font-size:40px;

font-style:oblique;

color:#FF6600;}

#fotter{Advanced Web Design December 2010 Final ©NCC Education 2010

font:sans-serif;

text-align:center;

font-size:12px;

height:16px;

color:#000066;}

p{ font:Arial;

color:#003366;

font-size:12px;}

#clock{

font-size:20px;

border:1px;

color:#003333;

text-align:center;

font-style:oblique;}

#bg{background-color:#FFFFFF;}

#justify{text-align:justify;}

#print{

cursor:pointer;

position: relative;

height:20px;

width:20px;}

Summary: I had created the CSS file. I am not use style tag on html pages.


Task 5:

Problem Statement: You must use the W3C validation service (http://validator.w3.org/) to check

your HTML and CSS code. You should endeavor to remove as many non-compliant features as

possible. Save the output from this tool.

Test the website using both Internet Explorer and Firefox. Record in your notes any significant

differences between the rendering and actions of the browsers and attempt to diagnose the cause.

You do NOT need to modify your code to correct any differences between browsers.

Write a short report including the outputs from the validation service and for each validation

error/comment that you did not remove or resolve, provide an explanation of the problem and what

would be required to fix it. The written part of your report must not exceed 1000 words.

Introduction: In this task I have to use http://validator.w3.org/ to check pages. Have to remove

errors. Have to check deferent between Internet explorer and Firefox.

Validation tools output:

Line 17, Column 34: character "<" is the first character of a delimiter but occurred as data

// add a zero in front of numbers<10

This message may appear in several cases:

You tried to include the "<" character in your page: you should escape it as "<" You used an unescaped ampersand "&": this may be valid in some contexts, but it is

recommended to use "&", which is always safe.

Another possibility is that you forgot to close quotes in a previous tag.

Line 24, Column 7: character "<" is the first character of a delimiter but occurred as data {if (i<10)

This message may appear in several cases:

You tried to include the "<" character in your page: you should escape it as "<" You used an unescaped ampersand "&": this may be valid in some contexts, but it is

recommended to use "&", which is always safe.

Another possibility is that you forgot to close quotes in a previous tag.


http://validator.w3.org/

Line 38, Column 63: there is no attribute "height" …align="top"><table width="800" height="600" border="0" cellspacing="0" cellpad…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the

Line 39, Column 58: there is no attribute "bordercolorlight" <tr background="Image/banner.jpg" bordercolorlight="#FFCC00">



Line 40, Column 20: there is no attribute "height" <td height="96"><img src="Image/f&c.jpg" alt="Fish and Chips" width…



How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page,


Line 41, Column 19: there is no attribute "width"

<td width="507" id="banner">Fish and chips</td>



How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page

Line 42, Column 129: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag …lock"><div id="txt"></div></div><form id="form1" method="post" action=""><br />

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Line 44, Column 67: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag <input type="text" name="textfield" id="textfield" />

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Line 93, Column 47: ID "center" already defined

<legend><b>Login Here</b></legend><div id="center">

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


Line 71, Column 24: ID "center" first defined here

<hr /><div id="center">Line 109, Column 18: ID "center" already defined <div id="center"><img src="Image/120_600.JPG" alt="" width="130" height…

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 71, Column 24: ID "center" first defined here <hr /><div id="center">Line 112, Column 48: there is no attribute "background" …td colspan="3" id="fotter" background="Image/footer.jpg">© Copyright 2010&nbsp…



How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page

Different between Internet Explorer and Firefox:

Internet Explorer:

Banner background image is missing.

Main body areas contents are centered that not acceptable.

Left-top corner logo not in positioned.

.

Firefox:

Banner background image is not missing.

Main body areas content are acceptable.

Logo in positioned.

Right-top corner search level text in positioned.

Summary: I check pages using http://validator.w3.org/. I also show the different between interner explorer and firefox.


http://validator.w3.org/

Task 6:

Problem Statement:

Write a short report (1000 words) describing how you would implement the user generated

comments functionality and the problems you would need to overcome. Describe how you would

make this part of the website easy to maintain. Do not write any code for this task.

Introduction:

I had created an html page for comment. On this page I crate a form on this html page. On that form

I make a table. On this table there are 4 row 2 columns. In first column is text lavel and second is

text field. I am use java as a script language. PHP 5 for make a connection between database and

html page. Html page contain fields like First Name*, Last Name*, Email Address* and Name of

establishment / any other comments *. User must fill this text box. User can use this page for make

comment. I also create a database using SQL for manage data. I use java script language for

validation of email text box. User should use valid email address on this page. I make a button for

submit data. When user makes comment and click on submit button PHP collect data from html

page and move data to the database. Database saves the record of user.

Summary:

In my web site I overcome functionality problem and easy to maintain. To developing this site I collect some valuable experience which is helpful & I think that will be help in my practical life when I doing job. I like it very much & when I completed it I feel so happy.


Advance web Design

Software

Transcript of Advance web Design