1 / 20

Objectives and Activities

Join our part-time evening web design course focused on HTML fundamentals and creative techniques. Learn how to alter text, style, size, and color while creating a basic website structure using Dreamweaver. Participate in hands-on activities such as producing animated GIFs with Fireworks and understanding links, both absolute and relative. This course also covers the essential anatomy of HTML, allowing you to enhance your site's navigation. Engage in collaborative problem-solving and progress tracking with fellow participants.

happy
Télécharger la présentation

Objectives and Activities

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. Objectives and Activities Web-Design Part time Evening Week 5

  2. Objectives • We will look at • We will alter text, style, size, colour. • To have created a basic site structure/ file creation in Dreamweaver • Additionally… • Produce a simple animated GIF using Fireworks

  3. HTML Activities EXTENSION TASKS Complete, from HTML Guide: • Formatting fonts activity. • Paragraphs and breaks.

  4. Basic HTML anatomy. <html> <head> <title> </title> </head> <body> </body> </html> We are aware of the basic anatomy of HTML, have looked at structural and semantic mark-up, tags, list formation and breaks. We will now look at links and how they enable browsing and surfing, through websites.

  5. Links • Links may have the following purposes: • Links from one website to another. • Links from one page to another on the same website. • Links from one part of a page to another. • Links opening a new browser window. • Links to an email programme, enabling you to send a new email to somebody.

  6. Writing Links Links are created with the <a> element. Anything between the <a> opening tag and </a> closing tag, can be clicked on. The page that you want to click on, is specified using the hrefattribute. This is the page the LINK takes you to: This is the TEXT the USER clicks on: <a href=“http://www.wwf.org.uk”>WWF</a> Opening Link Tag Closing Link Tag LINK TEXT – SHOULD EXPLAIN WHERE VISITORS WILL BE TAKEN TO AND BE CLEAR, AND SPECIFIC!

  7. URLS’Uniform Resource Locator RELATIVE URLS These can be used to link to other pages within a site. Because of this you do not need to specify the domain name. They are USEFUL when building a site, as you can link pages without setting up a domain name or hosting. ABSOLUTE URLS Every web page has its’ own URL – typed into the browser. It starts with the domain name, followed by a path to a specific page. If not displayed it will show the homepage.

  8. Exercise 1 Exercise 2 CONTINUE THE MARKUP – LINKING TO OTHER PAGES (USE IMAGE BELOW) <p> <ul> <li><a href=“index.html”>Home</a></li> • <li><a href=“about-us.html”>About</a></li> CONTINUE THE MARKUP – LINKING TO OTHER SITES (USE IMAGE BELOW)AND ALL .COMS <p>Movie Reviews: <ul> <li><a href=“http://www.empireonline.com”> Empire</a></li> <li>

  9. 1. Links – Search Engines If this is the HTML for formatting a link to Google, format a page which includes Google, and four other alternative Search engines. Your page should involve appropriate breaks and format.

  10. 2. Links that open in new windows Format a page which includes another 2 pages, that will open in a new window. The links should be those useful to students learning web design/ development. 3. Jumping to the bottom of the page, using links Format a page which includes the HTML to jump to the bottom of the page, when the link is pressed

  11. 1. Solution

  12. 2. Solution 3. Solution

  13. Solutions Exercise 1

  14. Exercise 2

  15. Directory – Folders/ Structure ROOT FOLDER/ TOP LEVEL FOLDER Contains a file called index.html and is the homepage for the entire site. Each section of the site is placed into different folders. RELATIONSHIP BETWEEN FILE AND FOLDERS Much like a family tree, parent, grandparent, child, and grandchild HOMEPAGES Main homepage is written in HTML – index.html Web servers usually return to this file, when no other is specified/ entered.

  16. Email Links <a href=mailto:karen@example.org>Email Karen</a> Email Karen Opening Links - New Window <a href=http://www.wwf.org.uk target-”_blank> World Wildlife Fund</a> (opens in new window) World Wildlife Fund (opens in new window)

  17. Dreamweaver Introduction - Interface

  18. Dreamweaver ‘Anatomy’ Part 1 1. File location – sorted into relevant folders. 2. Relevant tools for CSS formatting/ template creation. Attach style sheet. New CSS rule. Edit sheet

  19. Planning Task • Storyboards - first three pages, using template. • THIS SHOULD BE DONE PRIOR TO USING DREAMWEAVER, SO ELEMENTS AND LAYOUT CAN BE FORMULATED PRIOR TO CREATION OF WEBSITE.

  20. Almost the end… • The GOOD • The BAD • The UGLY • Take a few minutes to consider your progress so far, on the course. • Identify the positive, a possible negative and something that you think you have to do to change the negative. • Other members of the group, will also be asked to contribute and problem solve for other group members.

More Related