NAVIGATION INSTRUCTIONS
|
|
- Della Malone
- 6 years ago
- Views:
Transcription
1 CLASS :: NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU :: Nesting an Unordered List (submenu) inside an Existing List Item :: Assigning Class Names to Submenu and Child Elements :: Styling the Submenu and Child Elements ADVANCED: JAVASCRIPT BUTTON MENU :: DEMO :: What is JavaScript? :: HTML Button Element Name/Placement :: JavaScript Function, Element IDs, and Classes :: Customizing CSS :: File/Folder Placement *time permitting 1
2 SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION nav <nav> </nav> Used to contain menu/navigation links PLACEMENT:: REFERENCE:: The nav element May be placed anywhere within the <body> </body> tags Usually placed at the top or left of a webpage (for main navigation), or at the top or bottom (for articles, sections, news/social media posts, etc.) :: Styling the Nav HTML5 Mark Up 1. Create a New HTML 5 Document 2. Click AFTER the opening <body> tag 3. Create the header element 4. INSIDE the header element, create the nav element <body> <header> <nav> </nav> </header> </body> CSS Syntax Use the SINGLE DOCUMENT METHOD to style the nav element: 1. INSIDE the head element, create the style element 2. Set the default browser margins & padding [ for the body, nav, ul, and li elements ] to 0 (Undefined) 3. Set the nav width to 100% of the browser, with a background color of black, and adjustable height for the nav content. NOTE: The default bullets may disappear when margin/padding rules are introduced to the ul & li elements <!doctype html> <html lang= en > <head> <meta charset="utf-8"> <title>untitled Document</title> <style> </style> </head> 2
3 :: UL and LI and Anchors Elements :: MULTIMEDIA TOOLS :: (1382) :: HANDOUT HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION ul <ul> </ul> Used to contain an unordered list PLACEMENT:: REFERENCE:: The ul element For the purpose of this exercise, the ul element will be placed inside the: <nav> </nav> tags HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION li <li> </li> A list item PLACEMENT:: The li element is the child element of the ul element. The list item, li, element will be placed inside the: <ul> </ul> tags REFERENCE:: The li element HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION a <a> </a> Hyperlinks text or image to a location PLACEMENT:: The a element, when used to link list items, is the child element of the li element. The anchor, a, element will be placed inside the: <li> </li> tags REFERENCE:: The a element 3
4 :: Styling the UL, LI, and Anchor Elements Add child elements inside your <nav> HTML Code: <nav> PARENT <ul> CHILD OF NAV <li> CHILD of UNORDERED LIST <ul> EDIT HTML CODE TYPE CSS CODE 1. Scroll to the style element in your document 2. AFTER style rules for the nav element, 3. Create a style rule to remove the bullets from the unordered list inside the nav element (bullets may have been removed in previous step) nav ul {list-style:none;} TYPE CSS CODE After the nav ul styles, create styles for the nav ul list items (li)s NOTE: While The navigation is easy to code in HTML, it is one of the most involved set of parent and child elements when styling is involved. By default an unordered list is displayed as a series of block elements (stacked on top of one another): home about works contact 1. display:inline-block; Instructs the list items to display in a line instead of stacked. The block part of the property value instructs the list-item to function as a block element container (See Full Explanation w3school Definition) 2. text-align:center; Instructs the list items to center align its text 3. font-size:25px; Instructs the list item text to be 25 pixels 4. font-family:verdana, Arial, ; Instructs the list item to have a specific font The default format for an unordered list with hyperlink text will appear as follows: home about works contact If you don t want your navigation to appear like the above, you must give it some style (SEE RIGHT COLUMN) After the nav ul li styles, create styles for the nav ul li anchor element 1. text-decoration:none; Removes underline from hyperlinked text 2. color:white; White hyperlinked text 3. display:block; Includes padding as clickable area for hyperlink 4. background-color:block; Blue background color 5. width:200px; Each list item is 200px wide (not including padding) 6. padding:20px; Adds 20 pixels of padding to top-right-bottom-left 7. AFTER nav ul li a style rules, create nav ul li a:hover pseudo class :: To change text & background color when mouse hovers over anchors 4
5 PREVIEW IN BROWSER 1. In the Browser, you will see a nav element with: 1. One Unordered List with 4 List Items This navigation is centered using text-align center 2. ALTERNATIVE:: FOR REMOVING MARGINS To remove margins between the list-items, 2. Go to nav ul li styles, then ADD the following:: margin-left:-2px; and margin-right:-2px; 2a OR 2a. Go to nav ul li styles, then ADD the following:: float:left; If you choose this option, the nav ul list items will default to a position on the left of the screen, and the nav background color will not display correctly. NOTE: Assigning the float property to the nav ul list item elements removes the elements from the natural flow of the webpage. In order for the nav background to display correctly, it must be reintroduced to the float flow of the page 3. Go to nav styles, then ADD the following:: float:left; 5. To move your nav ul element to the right of the screen, you must assign a float property to it 4. Go to nav ul styles, then ADD the following:: float:right; To re-center your nav ul element, we will examine just one option using exact pixel measurements. 5. Go to nav ul styles, then DELETE the following:: float:right; then ADD the following:: width:960px; This width is the sum of 4 list item widths + the padding for each. Each list item = 200px width + 20px of padding on the left + 20px of padding on the right = 240px (SEE YOUR STYLES FOR nav ul li a) margin:0 auto 0 auto; This instructs the nav ul to have 0 margin on top auto margin on right 0 margin on bottom, & finally auto margin on left. A shortcut to write the code is margin:0 auto; if the value is the same for top & bottom and left & right 5
6 CSS DROP-DOWN MENU :: Nesting an Unordered List (submenu) inside an Existing List Item :: Assigning Class Names to Submenu and Child Elements :: Styling the Submenu and Child Elements Add a submenu to one of your nav ul list item elements: <nav> PARENT <ul> CHILD OF NAV <li> CHILD of UNORDERED LIST <ul> <ul> CHILD OF LIST ITEM <li> CHILD of UNORDERED LIST <ul> EDIT HTML CODE TYPE CSS CODE 1. Scroll to the style element in your document 2. AFTER style rules for the nav ul li a:hover pseudo class element, create styles for the submenu: nav ul li ul This is the explanation for the selector: nav ul li ul Locate nav nav, then first unordered list ul, then child of unordered list li, then child of list item ul display:none; hides the submenu 3. CREATE style rule for hover state of parent list item. nav ul li:hover ul display:block; shows the submenu margin:0; leaves margins for submenu undefined width:200px; width of container for submenu NOTE: The submenu is simply an unordered list nested inside of a list item. In the example above, the unordered list (submenu) contains 3 list items. Notice the parent element for the submenu is the list item with MENU 2 for text. This list item does not close until the submenu is closed 4. CREATE style rules for submenu anchor elements: in regular nav ul li ul li a and rollover state nav ul li ul li a :hover 6
7 PREVIEW IN BROWSER 1. In the Browser, you will see a nav element with: 1. One Unordered List with 4 List Items One of the 4 List Items (MENU 2) has a submenu The Submenu has 3 List Items ALTERNATIVE:: FOR LIMITING BLACK BACKGROUND To limit the background color to the first ul height Go to nav styles, then ADD the following:: height:70px; NOTE: The height was determined by first adding the top padding for list items (20px) + font-size of list items (25px) + the bottom padding for list items (20px) TOTAL= 65px + 5px to accommodate for line-height of text NOTES: 7
8 ADVANCED: JAVASCRIPT BUTTON MENU OBJECTIVE: For this exercise, JavaScript will be used to give a button onclick functionality. You will create a button element, style the button element, and script the button to open a menu (element) :::: DEMO :::: SOURCE URL: ADVANCED TUTORIAL ANIMATED DROP-DOWN MENU: :: What is JavaScript? A scripting language, which enables elements to be interactive. [ View full definition ] :: HTML Button Element Name/Placement Create a New HTML5 Document: TYPE HTML CODE <body> <button>text OR CHARACTER</button> </body> NOTE: By default, the button element is a rounded rectangle with a gray gradient background. What ever you type between the button tags in HTML, will display on the button in the browser. TYPE CSS CODE Use the SINGLE DOCUMENT METHOD to style the button: 1. width:60px; Instructs button to be 60 pixels wide 2. height:60px; Instructs button to be 60 pixels tall 3. font-size:30px; Instructs button text to be 25 pixels 4. border:none; Removes border 5. outline:none; Removes outline 6. cursor:pointer; Little hand appears on button hover 7. color:#fff; Color of Text or Character is white 8. Background-color:black; Button is black You may replace TEXT OR CHARACTER with a character (get code). For lists of character codes, go to: 1. Choose graphic shapes 2. Scroll, then double-click your character of choice 3. At top, choose As HTML to see HTML code 4. Hover over code and copy with Ctrl(or Cmd)+C EDIT HTML CODE <body> <button> </button> </body> 8
9 PREVIEW IN BROWSER 1. In the Browser, you will see a button element: 1. The button is 60px X 60px with a black background and white text color. The button currently does not function, so if you click it nothing happens :: JavaScript Function, Element IDs, and Classes ADD onclick Attribute to the button element: EDIT HTML CODE 1. onclick= togglenavpanel( dropit ) onclick triggers a function after clicking the button togglenavpanel is the function the button click will trigger. toggle turns the dropit element on and off when the button is clicked 2. <div id= dropit > dropit is the id name for the div element. The id name may be called by JavaScript AND style rules <body> <button onclick="togglenavpanel('dropit')"> </button> <div id="dropit"> This can be your drop-down menu.<br> You may add an unordered list inside of this div, to serve as the menu<br> You may change the size, background color, text color, and many other properties for this div. </div> </body> ADD SCRIPT ELEMENT TO YOUR HEAD ELEMENT <head> <style> existing content</style> Place the script element and its content inside the head element of your HTML document: When the button element is clicked, the togglenavpanel function is called: 1. (x): JavaScript will replace with id name (dropit) 2. You created a variable named panel that fetches an element by id name (dropit) when the document loads 3. The maxh is set to 200px (You may change this value) 4. HIDE the div named dropit: The if statement states if the height of the panel IS EQUAL TO (currently open to) the maximum height of the panel (200px), then allow toggle button to collapse panel to style height of 0px </head> 5. SHOW the div named dropit: The else statement states if the panel is not open to its maximum height (200px), then allow the toggle button to open the panel to max Height 9
10 :: Customizing CSS STYLE THE DROPIT DIV <style> /*existing style rules for button*/ </style> AFTER the style rules you created for the button element: 1. Add a set of style rules for the id name dropit 2. width:600px; Instructs button to be 600 pixels wide 3. height:0px; Instructs element to be 0 pixels. The value of 0px is essential for hiding the dropit div. JavaScript will enable the dropit div to change its height when the toggle button is clicked 4. background:#ccc; Light gray background 5. color:#000; Black Text 6. position:absolute; Allows you to pick exact position* 7. z-index:10000; Ensures the menu displays over other elements. Z-index indicates the layer order of an element. 1 is the lowest value for z-index. 8. overflow:hidden; Hides dropit content when closed 9. transition:height 0.3s linear 0s; Animates height of dropit: 0.3 seconds duration, linear transition, with 0 second delay (to start the animation). -webkit is to transition in safari and chrome. -moz is for Mozilla. *future lesson :: File/Folder Placement EDIT HTML CODE To keep your HMTL Code Page Clean, Move your scripts and styles to separate external documents. In total, for the button exercise you will have three files: 1. HTML 2. JS 3. CSS NOTE: You must link your HTML document to the javascript and css documents <!doctype html> <html lang= en > HTML DOCUMENT JAVASCRIPT DOCUMENT CSS DOCUMENT Save As code_button-click-menu.html Save As dropit.js Save As button.css <head> <title>button Code</title> <link href= button.css rel= stylesheet type= text/css > <script src= dropit.js type= javascript ></script> </head> <body> existing content </body> </html> 1. Create a New JavaScript Document 2. Move the script element to the new.js document 3. Create a New CSS Document 4. Move the style element to the new.css document 5. Create links to the two new documents in the head of this HTML page DELETE THE START & END <script></script> tags DELETE THE START & END <style></style> tags 10
11 11
AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need
More informationGIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.
GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationMedia Stylesheets and Navigation with CSS goodness. Webpage Design
Media Stylesheets and Navigation with CSS goodness Webpage Design Printing web pages the problem Here s a nice enough website that is clearly designed for the screen. The links are there because they work
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationWeb Engineering CSS. By Assistant Prof Malik M Ali
Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More informationUniversal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling
Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading
More informationZen Garden. CSS Zen Garden
CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS
More informationTutorial 4: Creating Special Effects with CSS
Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming Objectives Work with CSS selectors Create
More informationCascading Style Sheets CSCI 311
Cascading Style Sheets CSCI 311 Learning Objectives Learn how to use CSS to style the page Learn to separate style from structure Styling with CSS Structure is separated from style in HTML5 CSS (Cascading
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationTHE HITCHHIKERS GUIDE TO HTML
THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML HTML is a markup language for describing web pages HTML is used
More informationHTML & CSS Cheat Sheet
1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and
More informationCSC309 Winter Lecture 2. Larry Zhang
CSC309 Winter 2016 Lecture 2 Larry Zhang 1 Announcements Assignment 1 is out, due Jan 25, 10pm. Start Early! Work in groups of 2, make groups on MarkUs. Make sure you can login to MarkUs, if not let me
More informationHTML and CSS COURSE SYLLABUS
HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page
More informationCreating Layouts Using CSS. Lesson 9
Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
More informationThe default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows:
CSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: ul { list-style-type: circle; or
More informationHTML HTML5. DOM(Document Object Model) CSS CSS
HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif
More informationModule 2 (VII): CSS [Part 4]
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More informationWebsite Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
More informationParashar Technologies HTML Lecture Notes-4
CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,
More informationWeb Authoring and Design. Benjamin Kenwright
CSS Div Layouts Web Authoring and Design Benjamin Kenwright Outline Review Why use Div Layout instead of Tables? How do we use the Div Tag? How to create layouts using the CSS Div Tag? Summary Review/Discussion
More informationCSS. Shan-Hung Wu CS, NTHU
CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for
More informationCS197WP. Intro to Web Programming. Nicolas Scarrci - February 13, 2017
CS197WP Intro to Web Programming Nicolas Scarrci - February 13, 2017 Additive Styles li { color: red; }.important { font-size: 2em; } first Item Second
More informationHigher Computing Science
Higher Computing Science Web Design & Development Booklet 2A (of 3) Implementation Examples Contents Introduction Page What s included in this Booklet? 3 Implementation Stage 1 - Website Layout 4 Coding
More informationLesson 1 HTML Basics. The Creative Computer Lab. creativecomputerlab.com
Lesson 1 HTML Basics The Creative Computer Lab creativecomputerlab.com What we are going to do today Become familiar with web development tools Build our own web page from scratch! Learn where to find
More informationAGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES
CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html
More informationKillTest *KIJGT 3WCNKV[ $GVVGT 5GTXKEG Q&A NZZV ]]] QORRZKYZ IUS =K ULLKX LXKK [VJGZK YKX\OIK LUX UTK _KGX
KillTest Q&A Exam : 9A0-803 Title : Certified Dreamweaver 8 Developer Exam Version : DEMO 1 / 7 1. What area, in the Insert bar, is intended for customizing and organizing frequently used objects? A. Layout
More informationCreate a Web Page with Spry Navigation Bar. March 30, 2010
Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press
More informationLesson 5 Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes
More informationCreating a Job Aid using HTML and CSS
Creating a Job Aid using HTML and CSS In this tutorial we will apply what we have learned about HTML and CSS. We will create a web page containing a job aid about how to buy from a vending machine. Optionally,
More informationSnapsis CSS NavMenu Development Guide
Snapsis CSS NavMenu Development Guide Overview This document outlines the Snapsis NavMenu Skin Object for the DotNetNuke portal system. This module supports any type of navigation through a template driven
More information7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6. Phone: Toll Free: Fax:
HTML and CSS 7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6 Phone: 905-479-3780 Toll Free: 877-479-3780 Fax: 905-479-1047 e-mail: info@andarsoftware.com Web: www.andarsoftware.com.com Copyright
More informationHTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More information12/9/2012. CSS Layout
Dynamic HTML CSS Layout CSS Layout This lecture aims to teach you the following subjects: CSS Grouping and nesting Selectors. CSS Dimension. CSS Display.. CSS Floating. CSS Align. 1 CSS Grouping and nesting
More informationGuidelines for doing the short exercises
1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading
More informationCOMP519 Web Programming Lecture 7: Cascading Style Sheets: Part 3 Handouts
COMP519 Web Programming Lecture 7: Cascading Style Sheets: Part 3 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University
More informationCreating a Navigation Bar with a Rollover Effect
Creating a Navigation Bar with a Rollover Effect These instructions will teach you how to create your own navigation bar with a roll over effect for your personal website using Adobe Dreamweaver CS4. Your
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationWEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:
WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters
More informationHTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
More informationChapter 3 Style Sheets: CSS
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON Chapter 3 Style Sheets: CSS 1 Motivation HTML markup can be used to represent Semantics: h1 means that an element is a top-level heading
More informationCreating a CSS driven menu system Part 1
Creating a CSS driven menu system Part 1 How many times do we see in forum pages the cry; I ve tried using Suckerfish, I ve started with Suckerfish and made some minor changes but can t get it to work.
More informationMultimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3
Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows
More information<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***
Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember
More informationADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)
INTRO TO CSS RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY WEEK 1 HTML In Week
More informationUnit 10 - Client Side Customisation of Web Pages. Week 5 Lesson 1 CSS - Selectors
Unit 10 - Client Side Customisation of Web Pages Week 5 Lesson 1 CSS - Selectors Last Time CSS box model Concept of identity - id Objectives Selectors the short story (or maybe not) Web page make-over!
More informationHTML Syllabus Instructor: TBD
HTML Syllabus Instructor: TBD E-mail: code@media15live.com Course Description This course teaches participants the principles and concepts of designing and creating WEB pages in a HTML format. The course
More informationCSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC
CSS3 Basics From www.w3schools.com & CSS Visual Dictionary Learning Curve Books, LLC CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color
More information5 Snowdonia. 94 Web Applications with C#.ASP
94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar. Hover Effect:
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover Effect: Images required: 58 x 1 px high background image (black gloss gradient) for the nav bar
More informationWebsite Development (WEB) Lab Exercises
Website Development (WEB) Lab Exercises Select exercises from the lists below to complete your training in Website Development and earn 125 points. You do not need to do all the exercises listed, except
More informationCreate a three column layout using CSS, divs and floating
GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationTHE HITCHHIKERS GUIDE TO HTML
THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML Hyper Text Markup Language (HTML) is a markup language for describing
More informationCSS: Layout Part 2. clear. CSS for layout and formatting: clear
CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationFinal Exam Study Guide
Final Exam Study Guide 1. What does HTML stand for? 2. Which file extension is used with standard web pages? a..doc b..xhtml c..txt d..html 3. Which is not part of an XHTML element? a. Anchor b. Start
More informationCSS Futures. Web Development
CSS Futures Web Development CSS Futures CSS3 CSS Preprocessors: SASS & LESS CSS Frameworks CSS3 CSS3 is the latest standard for CSS Combined with HTML5, CSS3 makes it possible to create highly interactive
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationCOPYRIGHTED MATERIAL. Tabs
1 Tabs Tabs have become fairly ubiquitous in web design you can find them nearly anywhere you look these days. (Apple.com is a great example of a mainstream site that implements tabs.) Earlier web design
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationFirst Name Last Name CS-081 March 23, 2010 Midterm Exam
First Name Last Name CS-081 March 23, 2010 Midterm Exam Instructions: For multiple choice questions, circle the letter of the one best choice unless the question explicitly states that it might have multiple
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationCSS means Cascading Style Sheets. It is used to style HTML documents.
CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style
More informationREADSPEAKER ENTERPRISE HIGHLIGHTING 2.5
READSPEAKER ENTERPRISE HIGHLIGHTING 2.5 Advanced Skinning Guide Introduction The graphical user interface of ReadSpeaker Enterprise Highlighting is built with standard web technologies, Hypertext Markup
More informationHIERARCHICAL ORGANIZATION
A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout
More informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationAGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13.
:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES CLASS :: 13 04.26 2017 3 Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION home works
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationClient-Side Web Technologies. CSS Part I
Client-Side Web Technologies CSS Part I Topics Style declarations Style sources Selectors Selector specificity The cascade and inheritance Values and units CSS Cascading Style Sheets CSS specifies the
More informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
More informationMinistry of Higher Education and Scientific Research
Morning Study Department of information technology Institute of Technical - Duhok. University of Polytechnic Duhok. Subject: Web Technology Course book for 2nd year. Lecturer s name: MSc. Ayman Nashwan
More informationChapter 3 CSS for Layout
Chapter 3 CSS for Layout Chapter two introduced how CSS is used to manage the style of a webpage, this chapter explores how CSS manages the layout of a webpage. Generally a webpage will consist of many
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationWeb Design and Development Tutorial 03
Table of Contents Web Design & Development - Tutorial 03... 2 Using and Applying CSS to XHTML... 2 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 3 Parent / Child Elements...
More informationHTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week
WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML
More informationChapter 6: CSS Layouts
Chapter 6: CSS Layouts Learning Outcomes: Identify the four types of CSS positioning: static, relative, fixed and absolute Identify the use of CSS floats Be able to implement HTML and CSS to construct
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationGetting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationNEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS
NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS LESSON 1 GETTING STARTED Before We Get Started; Pre requisites; The Notepad++ Text Editor; Download Chrome, Firefox, Opera, & Safari Browsers; The
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More informationINTRODUCTION TO CSS. Topics MODULE 5
MODULE 5 INTRODUCTION TO CSS Topics > Cascading Style Sheets (CSS3) Basics Adding a Style Sheet Selectors Adding Dynamic Styles to Elements CSS3 Properties CSS3 Box Model Vendor Prefixes Cascading Style
More information