Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advance web Design

217 views

Published on

Advance web Design assignment Course work under NCC education in 2010 December. This document describe about restaurant web site design.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Advance web Design

  1. 1. Advanced Web Design December 2010 Final ©NCC Education 2010
  2. 2. 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: Advanced Web Design December 2010 Final ©NCC Education 2010
  3. 3. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  4. 4. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  5. 5. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  6. 6. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  7. 7. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  8. 8. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  9. 9. 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. Advanced Web Design December 2010 Final ©NCC Education 2010 CLOCK Here Print Button Sign in Create a new account Google Ads Search
  10. 10. 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 Advanced Web Design December 2010 Final ©NCC Education 2010 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
  11. 11. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  12. 12. 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 Advanced Web Design December 2010 Final ©NCC Education 2010
  13. 13. Fig: FAQ page of fish & chips Fig: Award page of fish & chips Advanced Web Design December 2010 Final ©NCC Education 2010
  14. 14. Fig: History page of fish & chips Fig: Foods page of fish & chips Advanced Web Design December 2010 Final ©NCC Education 2010
  15. 15. Fig: Battend foods page of fish & chips Fig: Classic foods page of fish & chips Advanced Web Design December 2010 Final ©NCC Education 2010
  16. 16. Fig: Nutritions page of fish & chips Fig: Health page of fish & chips Advanced Web Design December 2010 Final ©NCC Education 2010
  17. 17. Fig: Benifits page of fish & chips Fig:About our branch page of fish & chips Advanced Web Design December 2010 Final ©NCC Education 2010
  18. 18. Fig: join us page of fish & chips Fig: about us page of fish & chips Advanced Web Design December 2010 Final ©NCC Education 2010
  19. 19. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  20. 20. 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
  21. 21. 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  22. 22. 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 "&lt;" • You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", 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 "&lt;" • You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe. • Another possibility is that you forgot to close quotes in a previous tag. Advanced Web Design December 2010 Final ©NCC Education 2010
  23. 23. 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"> 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. Line 40, Column 20: there is no attribute "height" <td height="96"><img src="Image/f&amp;c.jpg" alt="Fish and Chips" width… 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, Advanced Web Design December 2010 Final ©NCC Education 2010
  24. 24. Line 41, Column 19: there is no attribute "width" <td width="507" id="banner">Fish and chips</td> 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 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). Advanced Web Design December 2010 Final ©NCC Education 2010
  25. 25. 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… 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 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. Advanced Web Design December 2010 Final ©NCC Education 2010
  26. 26. 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. Advanced Web Design December 2010 Final ©NCC Education 2010

×