1 / 27

Designing Websites

Using HTML and FrontPage. Designing Websites. A Typical Webpage. View Source. A webpage is a text file containing instructions to tell a computer how the page should look. Creating Webpages. You can create a page by hand, using a text-editor like Notepad

clodia
Download Presentation

Designing Websites

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. Using HTML and FrontPage Designing Websites

  2. A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the page should look.

  3. Creating Webpages • You can create a page by hand, using a text-editor like Notepad • You can use web-based tools, eg Blogging/Content Management Systems to store your data and present it in different ways. • You can use website authoring software,eg FrontPage, Dreamweaver to create a page, and upload it when you are ready

  4. HTML and FrontPage FrontPage is an editor that enables you to create the HTML code used to make webpages

  5. The HTML for our first page HTML tags are usually in pairs Between the <head> and </head> tags, you find information about the page Between the <body> and </body> tags, you find instructions for displaying text, pictures etc...

  6. Adding text to our first page Paragraph styles We can use different heading sizes from <h1> Heading 1 (the biggest) to <h6> Heading 6 (the smallest) to make our headings stand out

  7. Using HTML to format our text To format our text quickly, we can use a cascading style sheet (CSS) page

  8. Creating a blank stylesheet We can choose a ready-made template, or we can make our own...

  9. Selecting styles to modify The computer displays a sample to show how the text will look, as well as the instructions it uses for the web browser. We can look at two lists of styles. The original tags, and the ones we have changed.

  10. Changing formatting for a style We can change several different attributes for a paragraph style

  11. The Font Tab As well as the size, style and colour of a font, there are other effects we can choose... For the background, border, line-spacing and alignment, other tabs can be selected when modifying a style.

  12. A CSS file Clicking on the Style toolbar allows you to continue modifying styles

  13. Linking to a CSS file To use a CSS file, you must first link to it from your HTML file...

  14. Multiple stylesheets? If you needed to, you could link to more than one stylesheet!

  15. Linking code for stylesheets The code for linking to a CSS file is added to the <head> by FrontPage

  16. Previewing a page The page preview tab will automatically show our page with all the new CSS formatting

  17. Adding a picture The <img src> tag will display a picture in our page. It can be modified by using height, width, border and alt within the tags.

  18. Picture Preview One way to change a page's layout is to use tables

  19. Adding a hyperlink Hyperlinks make a webpage much more useful than a printout

  20. Absolute and Relative URLs We don't have to link to just web pages. For a page in the same directory as this file, just the filename would be enough – but watch out for upper/lower case letters!

  21. Following links You can test your page to see if the links you have made actually work

  22. Tables! A table doesn't have to be used just for tabular data. We can also use it to arrange items on a page to look more interesting.

  23. The table so far... You can drag and drop text just like you would with a word-processor

  24. Modifying a table Once a table is made, you have complete control of the way both the entire table, or individual cells are displayed.

  25. Table Properties

  26. Our HTML code

  27. A final preview of our page

More Related