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 and
Plagiarism.
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.
Research
Website: 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.

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.

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.

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.

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.

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 Here
FAQ User Name:
Password:AWARDS
HISTORY
FOODS
NUTRITIONS
OUR BRANCH
About us
contact us
© Copyright 2010 & Rights Reserved Design & Developed by:
Figure: 2.1 the layout of the home page.
CLOCK Here
Print Button
Sign
in
Create a new
account
Google
Ads
Search

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
benefits
contact
us
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{

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.

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…
flash media in a Web page,

Line 41, Column 19: there is no attribute "width"
<td width="507" id="banner">Fish and chips</td>
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…
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.

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Advance web Design

Similaire à Advance web Design (20)

Dernier

Dernier (20)

Advance web Design