1 / 28

Website design and structure

Website design and structure. Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips. The first page which links to all the others is called the home page. Website Structure.

sdandrea
Download Presentation

Website design and structure

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website design and structure

  2. Website design and structure • A Website is a collection of webpages that are linked together. • Webpages contain text, graphics, sound and video clips. • The first page which links to all the others is called the home page.

  3. Website Structure • Here are 3 common ways to structure your website: • Linear structure • Hierarchical structure • Mesh structure

  4. Linear Website Structure • This is the simplest way to structure your website: One page simple leads onto the next

  5. Hierarchical / TREE Website structure • This structure is more complex and has different levels

  6. Mesh Website Structure • This structure is very complex and can be confusing to a user

  7. Website: What kind of structure does this website have?

  8. Uniform Resource Locator(URL) • A Uniform Resource Locator(URL) points to a resource on the Internet, usually a website. • For example: http://www.bbc.co.uk/ • This is divided into 3 parts • The 1st part is the protocol. The most common one is http. This stands for Hypertext Transfer Protocol. It is used in transferring web pages to your computer. Some URLs begin with ftp. This stands forFile Transfer Protocol and is used to transfer files across the Internet.

  9. URL • The 2nd part indicates which server the web page is stored on e.g. the particular server where the web page is stored on e.g. www.bbc • The 3rd part indicates the type of organisation that is storing the web pages e.g. . co.uk for a company in the UK. Here are some examples of the 3rd part of the URL

  10. URL

  11. Hyperlink • Web pages are linked together using hyperlinks. • Hyperlinks can take the form of underlined text or a graphic. Clicking on the hyperlink then displays the linked web page.

  12. Hyperlinks Clicking on the underlined text will display the webpage on winter sports. Clicking on the graphics will display web pages with video clips

  13. Internal Hyperlinks • Internal hyperlinks link to other pages on the same website

  14. External Hyperlinks • External Hyperlinks link to web pages on another website:

  15. Hyperlink absolute addressing • An absolute web address: specifies exactly where the web page is stored. It directs you to the server on which it is stored and always includes: http://www • E.g. http://www.metoffice.gov.uk/public/weather/forecast/?tab=fiveDay

  16. Hyperlink: Relative addressing • A relative web address can be used to • link a web page to other web pages on the same website = an internal hyperlink. • point to a file or a file path on the computer in which it is being developed e.g. help/articles/creating_web_pages.html

  17. Web Browsers • A browser is a program that helps you navigate the World Wide Web. You use a browser to move between and look at web pages. • There is a wide choice of browsers to choose from: can you name these 4?

  18. Web Browser Features • The web browser allows the user to • find and look at web pages • to navigate between web pages and web sites. • To move backwards and forwards between web pages using the back and forward buttons • Bookmark your favourite pages • Remember which pages you have visited using the ‘history’ function

  19. Search Engines •  Search engines are used to look for web pages. • The search engine will find all the web pages related to a topic and send the results to your computer for your browser to display them.

  20. Search results

  21. There are lots of search engines

  22. Scripting Languages • Scripts are small programs that can be used to • automate tasks by creating a Macro or • generate dynamic content for web pages. • Commonly used scripting languages are: • VB Script, applescript, javascript

  23. Javascript • Javascript has many of the standard features of a programming language such as: • setting up and assigning variables • repeat loops • if + conditions • arithmetic • operators. • Javascript is usually embedded directly into HTML pages

  24. Java example Try Javascript for yourself: visit http://www.w3schools.com/js/default.asp

  25. HTML • HTML • is a language used to create web pages. • uses ‘TAGS’ to create the pages  • Tags are codes that refer to • parts of a document e.g. a paragraph or the title. • The style and formatting of text

  26. HTML Tags • Here are some commonly used tags

  27. HTML • Here is an example of some simple code: <p style="text-align:left;">Left</p> <p style="text-align:center;">Center</p> <p style="text-align:right;">Right</p> Try your own HTML code: visit this site http://www.w3schools.com/html/default.asp

More Related