Advanced Elements & Advanced HTML Codes AGCJ 407.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

Microsoft FrontPage Monday January 28, The Basic FrontPage Setup.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
Basic Web Design Brought to you from VIP and DHS by Wendy Peacock, RLHS VIP-Resource Teacher.
Slide Transitions Slide Show, Slide Transition opens Slide Transition task pane Practice each option setting to select the transition style, its speed,
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Where Do I Start REFERENCE: LEARNING WEB DESIGN (4 TH EDITION) BY ROBBINS 2012 – CHAPTER 1 (PP. 3 – 14)
Web Design Basic Concepts.
CHAPTER 8: Enhancing a Website Session 1. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your.
Rollover Buttons UNIT 2. Purpose When you move your mouse onto a button the image on it rolls over to something else Link to example website.
Creating Tables in a Web Site Using an External Style Sheet
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Website design Feng Zhao College of Educatioin California State University, Northridge.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
HTML basics exercises.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Web Design Vocab 12 The Last one! Applet, HTTPS, RGB Color, Rollover, Server.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Web Technologies Website Development Trade & Industrial Education
Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
G053 Lecture 14 Adding Graphical Rollovers Manually Mr C Johnston ICT Teacher
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Website Development with Dreamweaver
Web Design ATBs. ATB #1 List headings and size ATB #2 Define HTML.
COLOR In Web Design. Designing with Color Use contrasting colors Using a small palette of colors helps unify and enhance a design Using a dominant color.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
All you ever needed to know…and more!. H.T.M.L. HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with.
JavaScript - A Web Script Language Fred Durao
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
Louisa Lambregts, Louisa Lambregts
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
Things we’ve covered so far  Basic HTML  Some advanced tags i.e.  Styling using CSS  Background-color  Text  Changing the font on your site  Inserting.
Dynamic Web Pages Jin Wu INF 385E Information Architecture School of Information 11/2/2006 Jin Wu INF 385E Information Architecture School of Information.
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
1.Click on “Start” menu 2.Click on “ 1. Choose a different layout for your slide.
Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,
And Writing HTML Chang-Yang Lin Eighth Annual Meeting of the Minds Conference Eastern Kentucky University September 11, 2004.
OCR Nationals – Level 02 Website Design and Creation.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Web Page Design 1 Information Technology ClassAct SRS enabled. Web Page Design This presentation will explore: creating web pages structure, formatting.
DREAMWEAVER CS4  What’s New in Dreamweaver CS4? What’s New in Dreamweaver CS4?  Workspace in Dreamweaver CS4Workspace in Dreamweaver CS4  Opening and.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Title of your site Title of your page Text and images arranged on the page in the design of your choice. Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page.
Java Script and the DOM DOM stands for: –The Document Object Model When a browser reads a web page, it converts it’s contents from HTML into a hierarchical.
Section 10.1 Define scripting
Objective % Select and utilize tools to design and develop websites.
Section 17.1 Section 17.2 Add an audio file using HTML
Web Development & Design Foundations with HTML5 7th Edition
Unit 2, Lesson 5 Website Development Tools
Objective % Select and utilize tools to design and develop websites.
Section 10.1 YOU WILL LEARN TO… Define scripting
Unit 2, Lesson 5 Website Development Tools
PowerPoint Quick Tips Bad Ischl, Nov
Rollover Buttons UNIT 2.
Cheat Sheet CSCI 100 JW Ryder
Dynamic Web Pages Jin Wu INF 385E Information Architecture
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Cheat Sheet CSCI 100 JW Ryder
Common Page Design Elements
Presentation transcript:

Advanced Elements & Advanced HTML Codes AGCJ 407

Advanced Elements  Overview: Interactivity elements  Java Script Mouseovers Animation effects

Interactivity elements  What is Java Script? A scripting language designed for use within a Web page and/or on a Web server Used to create special effects Elements such as links, images and forms can be manipulated using this powerful technology

Interactivity elements Java Script  Can help you make  Dynamic Splash Screen Dynamic Splash Screen  Pausing Up and Down Menu Scroller Pausing Up and Down Menu Scroller  Banner Rotator Banner Rotator  Use Java Script in your HTML code Make a Table Sorter:   Example:

Interactivity elements  Java Script A great Java Script source:  Keep it handy if you want to make buttons, calendars, games, and etc. A great link to the Java Script Learning Center  When using Java, choose selections with care and make sure that scripts will enhance your visitors’ experience, encouraging future returns to your site

Mouseovers  You can have fonts or buttons change colors This effect is accomplished by using a special "style" tag Only one such tag may be used per page To create the effect of changing text colors on links as mouseovers, insert the tag into the head portion of the page: Tip: Always include a space after the semi- colon

Mouseovers  Insert this into page area : Customize your style with color, underlining, type style, and background color; go to:

Mouseovers  More Mouseover images and tips:  Pop-up images, images that shake and images that can change or rollover  More mouse and cursor functions

Animation effects Java can allows animation with text or images Create you own animated gifs Animation using Image Ready aders2001/Web/animatedinstruction.htm

Some animation effects

The End  Have fun writing Java  Make good choices  Selections should add, not distract, visitors’ experience on your Web site