CSS Mapping in Advanced Mode for Events. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Size: px
Start display at page:

Download "CSS Mapping in Advanced Mode for Events. Cvent, Inc 1765 Greensboro Station Place McLean, VA"

Transcription

1 CSS Mapping in Advanced Mode for Events 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA

2 Contents CSS Mapping in Advanced Mode for Events... 3 Layout Options and Structure Column Top Navigation Layout Column Side Navigation Layout Column Top Navigation Layout Column Top Navigation: Modern Tabbed Menu Column Top Navigation: Modern Dropdown Menu Column Left Side Navigation Layout Column Left Layout Modern Sub Nav Menu Column Left Layout Modern Flyout Menu Column Left Layout Modern Accordion Menu Column Side Navigation: Split Layout Column Side Navigation: Modern Split Menu

3 CSS Mapping in Advanced Mode for Events This guide explains the current structure of Cvent s website pages and the Cascading Style Sheet (CSS) properties used for each event theme. This guide can help you better understand the HTML structure for all pages in your event website when making specific changes in the code. Using advanced mode, you ll be able to open the entire theme stylesheet for complete control in customizing fonts, colors, images, and overall look and feel of your event website. To begin, go to Events > Website & Registration > Website > Event Website > Theme and click Edit. 3

4 Layout Options and Structure Events > Website & Registration > Website > Event Website > Layout For your event website, Cvent offers a variety of layouts and navigation menus. Based on the selected layout, you will be able to select different types of navigation menus. 1 Column Top Navigation Layout For this layout, all of the information on your website is contained in one column. This selected layout provides two options for your navigation menu: Top Navigation + Tabbed Menu Top Navigation + Dropdown Menu 2 Column Side Navigation Layout For this layout, the information on your website is contained within two columns. One column (either the left or the right) will be dedicated to the navigation menu, and the second column will contain the content. This selected layout provides four options for your navigation menu: Left Side Navigation + Flyout Menu Left or Right Side Navigation + Accordion Menu Left or Right Side Navigation + Sub Nav Menu Left or Right Side Navigation + Split Menu 4

5 1 Column Top Navigation Layout The HTML structure for the 1 Column layout is the same for both navigation types Tabbed and Dropdown Menu. div. content div. top 790px (Normal) / 950px (Wide) div. middle All your content is found here div. bottom 5

6 1 Column Top Navigation: Modern Tabbed Menu -bar div. social-media h1 div. summary h2. section-header div. when ul.icons div. where div. planner div. register-btn-bottom 6

7 1 Column Top Navigation: Modern Dropdown Menu -bar ul. sf-menu div. social-media h1 h2. section-header div. when div. summary ul.icons div. where div. planner div. register-btn-bottom 7

8 2 Column Left Side Navigation Layout The HTML structure for 2 Column layout stays the same, regardless of the Flyout, Accordion, or Sub Nav Navigation being used. 2 Column Right classes and structure are identical to 2 Column Left, except for the div.sidebar and the content s location on the right. However, the navigation Dropdown is not available in 2 Column Right. NOTE div. content div. top 770px (Normal) / 926px (Wide) div. middle div. sidebar 180px 570px (Normal) / 726px (Wide) div. bottom 8

9 2 Column Left Layout Modern Sub Nav Menu -bar div. social-media h1 div. when div. summary h2. section-header div. where ul.icons div. planner div. sidebar div. register-btn-bottom 2 Column Right classes and structure are identical to 2 Column Left with the exceptions of div. sidebar and the content s location on the right. NOTE 9

10 2 Column Left Layout Modern Flyout Menu -bar ul. sf-menu div. sidebar h1 div. social-media div. summary ul.icons div. where div. planner div. register-btn-bottom 10

11 2 Column Left Layout Modern Accordion Menu -bar div. social-media ul. menu.ui-accordian div. when h1 div. summary h2. section-header div. where ul.icons div. planner div. register-btn-bottom div. sidebar 2 Column Right classes and structure are identical to 2 Column Left with the exceptions of div. sidebar and the content s location on the right. NOTE 11

12 2 Column Side Navigation: Split Layout The HTML structure for the 2 Column - Split Navigation layout is the same for both Right Split Navigation and Left Split Navigation. 2 Column - Right Split Navigation classes and structure are identical to 2 Column - Left Split Navigation with the exceptions of div.sidebar and its content s location on the right. NOTE div. content div. top 770px (Normal) / 926px (Wide) div. middle div. split-navigation div. sidebar 180px 570px (Normal) / 726px (Wide) div. bottom 12

13 2 Column Side Navigation: Modern Split Menu -bar div. split-navigation div. social-media h1 div. when div. summary h2. section-header div. where ul.icons div. planner div. register-btn-bottom div. sidebar 2 Column - Right Split Navigation classes and structure are identical to 2 Column - Left Split Navigation with the exceptions of div.sidebar and its content s location on the right. NOTE 13

Passkey Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Passkey Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA Passkey Integration User Guide 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Passkey Integration User Guide... 3 Key Terms... 3 Enabling Passkey Integration for

More information

Concur Travel Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Concur Travel Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA Concur Travel Integration User Guide 2017 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Concur Travel Integration User Guide... 3 Enabling Concur Travel Integration in

More information

Passkey Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Passkey Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA Passkey Integration User Guide 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Passkey Integration User Guide... 3 Key Terms... 3 Enabling Passkey Integration for

More information

I need two demo sites. And I need them in two days

I need two demo sites. And I need them in two days smacss your up @minamarkham I need two demo sites And I need them in two days CSS is easy. hard CSS is easy. CSS is bullshit. Modular CSS Focusing on creating healthy front-end modules instead of complete

More information

Passkey Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Passkey Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA Passkey Integration User Guide 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Passkey Integration User Guide... 3 Key Terms... 3 Enabling Passkey Integration for

More information

Cascading Style Sheets for layout II CS7026

Cascading Style Sheets for layout II CS7026 Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want

More information

Introduction to WEB PROGRAMMING

Introduction 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 information

Block & Inline Elements

Block & Inline Elements Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not

More information

Lesson 5 Introduction to Cascading Style Sheets

Lesson 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 information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, 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 information

WebEx Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

WebEx Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA WebEx Integration User Guide 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents WebEx Integration User Guide... 3 Enabling WebEx Integration in Your Account... 4 Setting

More information

Getting Started with CSS Sculptor 3

Getting Started with CSS Sculptor 3 Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use

More information

Dreamweaver CS5 Lab 4: Sprys

Dreamweaver CS5 Lab 4: Sprys Dreamweaver CS5 Lab 4: Sprys 1. Create a new html web page. a. Select file->new, and then Blank Page: HTML: 2 column liquid, left sidebar, header and footer b. DocType: XHTML 1.0 Strict c. Layout CSS:

More information

Eloqua Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Eloqua Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA Eloqua Integration User Guide 2017 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Eloqua Integration User Guide... 3 Enabling Eloqua Integration in Your Account... 4 Helpful

More information

GIMP 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. 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 information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

PROFILE DESIGN TUTORIAL KIT

PROFILE DESIGN TUTORIAL KIT PROFILE DESIGN TUTORIAL KIT NEW PROFILE With the help of feedback from our users and designers worldwide, we ve given our profiles a new look and feel. The new profile is designed to enhance yet simplify

More information

Lesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.

Lesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note:

More information

Bluehost and WordPress

Bluehost and WordPress Bluehost and WordPress Your Bluehost account allows you to install a self-hosted Wordpress installation. We will be doing this, and you will be customizing it for your final project. Using WordPress 1.

More information

Release Notes. Cvent Passkey. July Cvent, Inc 1765 Greensboro Station Place McLean, VA

Release Notes. Cvent Passkey. July Cvent, Inc 1765 Greensboro Station Place McLean, VA Release Notes Cvent Passkey July 2017 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com passkeysupport@lanyon.com Overview We are excited to announce the latest updates to Cvent Passkey,

More information

Passenger Name Record (PNR) User Guide for Certify. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Passenger Name Record (PNR) User Guide for Certify. Cvent, Inc 1765 Greensboro Station Place McLean, VA Passenger Name Record (PNR) User Guide for Certify 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Passenger Name Record (PNR) User Guide for Certify... 3 Enabling

More information

CSS is applied to an existing HTML web document--both working in tandem to display web pages.

CSS is applied to an existing HTML web document--both working in tandem to display web pages. CSS Intro Introduction to Cascading Style Sheets What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to allowing web designers to style specific elements on their pages and throughout

More information

Guidelines for doing the short exercises

Guidelines 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 information

Getting Started with MadCap Flare Part 2: Feature Concepts

Getting Started with MadCap Flare Part 2: Feature Concepts Getting Started with MadCap Flare Part 2: Feature Concepts Who Am I?» Neil Perlin Hyper/Word Services. Internationally recognized content creation and delivery consultant. Helps create efficient, flexible

More information

Make 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 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 information

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1 CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet HTML VS. CSS HTML is used to define the structure and content of a webpage. CSS

More information

INTRODUCTION TO CSS. Mohammad Jawad Kadhim

INTRODUCTION TO CSS. Mohammad Jawad Kadhim INTRODUCTION TO CSS Mohammad Jawad Kadhim WHAT IS CSS Like HTML, CSS is an interpreted language. When a web page request is processed by a web server, the server s response can include style sheets,

More information

Product Page PDF Magento 2 Extension

Product Page PDF Magento 2 Extension Product Page PDF Magento 2 Extension User Manual This is the user manual of Magento 2 Product Page PDF v100.0.0 and was last updated on 26-11- 2017. To see what this extension can do, go to the Magento

More information

HTML Organizing Page Content

HTML Organizing Page Content HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe

More information

What do we mean by layouts?

What do we mean by layouts? What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your

More information

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017 ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Daniel Ferguson Certified MadCap Flare Trainer & Consultant Founder of Smart Output

Daniel Ferguson Certified MadCap Flare Trainer & Consultant Founder of Smart Output Daniel Ferguson Certified MadCap Flare Trainer & Consultant Founder of Smart Output < /> daniel@smartoutput.com @ferg_daniel linkedin.com/in/danielsferguson smartoutput.com 3 Variables TOCs Concepts Publish

More information

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how

More information

Index. 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. 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 information

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this

More information

Marketo Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA

Marketo Integration User Guide. Cvent, Inc 1765 Greensboro Station Place McLean, VA Marketo Integration User Guide 2017 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents Marketo Integration User Guide... 3 Enabling Marketo Integration for Your Account...

More information

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Tutorial 4 Activities Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Ensure that the editor is in code mode, down the bottom

More information

WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS

WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS WEB COLORS 1.0 PRIMARY COLOR PALETTE HEX #f0b323 HEX #d22730 HEX #004c97 HEX #00a9e0 HEX #059949 HEX #f45712 SECONDARY COLOR PALETTE HEX #f4c24f HEX #d84f57

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Lecture 13. Page Layout. Mr. Mubashir Ali Lecturer (Dept. of Computer Science)

Lecture 13. Page Layout. Mr. Mubashir Ali Lecturer (Dept. of Computer Science) Lecture 13 Page Layout Mr. Mubashir Ali Lecturer (Dept. of dr.mubashirali1@gmail.com 1 Summary of the previous lecture Font properties Controlling text with CSS Styling links Styling background Styling

More information

Dreamweaver CS4: Layout Guide. Převzato z

Dreamweaver CS4: Layout Guide. Převzato z Dreamweaver CS4: Layout Guide Převzato z www.bewebmaster.com Intro This tutorial will help you: 1. Define a new Dreamweaver web site 2. Create a new HTML file 3. Create a new CSS file and attach it to

More information

Website Development with HTML5, CSS and Bootstrap

Website 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 information

IEEE Wordpress Theme Documentation

IEEE Wordpress Theme Documentation IEEE Wordpress Theme Documentation Version 1.0.2 2014-05- 16 Table of Contents TABLE OF CONTENTS 2 INITIAL SETUP 3 FRONT PAGE 3 POSTS PAGE 4 CONTACT 5 SITE MAP 6 MENU 7 HOME PAGE 8 PAGE TEMPLATES 10 LEFT

More information

Dreamweaver CS4. Introduction. References :

Dreamweaver CS4. Introduction. References : Dreamweaver CS4 Introduction References : http://help.adobe.com 1 What s new in Dreamweaver CS4 Live view Dreamweaver CS4 lets you design your web pages under realworld browser conditions with new Live

More information

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Code relative hyperlinks to web pages in folders within a website Configure

More information

EVENT MANAGER THEME INSTALLATION TUTORIAL

EVENT MANAGER THEME INSTALLATION TUTORIAL EVENT MANAGER THEME INSTALLATION TUTORIAL v2 Last Updated 9/03/2012 - Version 3.9.5 Thank you for choosing to use the Event Manager Theme, built on WordPress and Genesis. If you are not confident with

More information

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand

More information

O n l i n e C a t e r i n g S o f t w a r e S o l u t i o n Portal CSS Guide

O n l i n e C a t e r i n g S o f t w a r e S o l u t i o n Portal CSS Guide O n l i n e C a t e r i n g S o f t w a r e S o l u t i o n Portal CSS Guide Portal.css Customization Guide... 3 Upload Stylesheet... 3 portal.css Customization... 4 Change the Horizontal Menu Bar Background

More information

Virto SharePoint Forms Designer for Office 365. Installation and User Guide

Virto SharePoint Forms Designer for Office 365. Installation and User Guide Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365...3 LICENSE ACTIVATION...4

More information

Product Page PDF Magento Extension

Product Page PDF Magento Extension Product Page PDF Magento Extension User Manual This is the user manual of Magento Product Page PDF v2.0.2 and was last updated on 26-11-2017. To see what this extension can do, go to the Magento Product

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

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.

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. 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 information

About the Tutorial. Dreamweaver MX overview

About the Tutorial. Dreamweaver MX overview About the Tutorial Title: Intro to Macromedia Dreamweaver MX Description: This is a tutorial providing an overview of the Dreamweaver MXInterface Category: Html Author: Gregory Wehrman Email: wehrman@purdue.edu

More information

The Structure of the Web. Jim and Matthew

The Structure of the Web. Jim and Matthew The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop

More information

Which is why we ll now be learning how to write in CSS (or cascading sheet style)

Which is why we ll now be learning how to write in CSS (or cascading sheet style) STYLE WITH CSS My word is changing things in HTML difficult! Can you imagine if we had to do that for every single thing we wanted to change? It would be a nightmare! Which is why we ll now be learning

More information

Harnessing the Power of Flare s Stylesheet Editor

Harnessing the Power of Flare s Stylesheet Editor Harnessing the Power of Flare s Stylesheet Editor PRESENTED BY Neil Perlin Hyper/Word Services Who Am I? Neil Perlin - Hyper/Word Services. Internationally recognized content consultant. Help clients create

More information

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views! Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying

More information

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer FORMS The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions Presented by: John Reamer Creating Forms Forms and Surveys: When and What to Use them For Both Allow you

More information

WEB DESIGNING COURSE SYLLABUS

WEB DESIGNING COURSE SYLLABUS F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,

More information

COMSC-031 Web Site Development- Part 2

COMSC-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 information

Create a three column layout using CSS, divs and floating

Create 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 information

About Codefrux While the current trends around the world are based on the internet, mobile and its applications, we try to make the most out of it. As for us, we are a well established IT professionals

More information

Xerte. Guide to making responsive webpages with Bootstrap

Xerte. Guide to making responsive webpages with Bootstrap Xerte Guide to making responsive webpages with Bootstrap Introduction The Xerte Bootstrap Template provides a quick way to create dynamic, responsive webpages that will work well on any device. Tip: Webpages

More information

HTMLnotesS15.notebook. January 25, 2015

HTMLnotesS15.notebook. January 25, 2015 The link to another page is done with the

More information

HTML5 and CSS3 for Web Designers & Developers

HTML5 and CSS3 for Web Designers & Developers HTML5 and CSS3 for Web Designers & Developers Course ISI-1372B - Five Days - Instructor-led - Hands on Introduction This 5 day instructor-led course is a full web development course that integrates HTML5

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

Web Design, 5 th Edition

Web Design, 5 th Edition Planning a Successful Website: Part 2 Web Design, 5 th Edition Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step : Specify the s navigation

More information

ITNP43: HTML Lecture 4

ITNP43: HTML Lecture 4 ITNP43: HTML Lecture 4 Niederst, Part III (3rd edn) 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and

More information

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:

WEBSITE 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 information

IBM Forms V8.0 Custom Themes IBM Corporation

IBM Forms V8.0 Custom Themes IBM Corporation IBM Forms V8.0 Custom Themes Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample Overview 3 To create custom theme you must be familiar with the basic concept

More information

Getting Started with Eric Meyer's CSS Sculptor 1.0

Getting 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 information

CSS worksheet. JMC 105 Drake University

CSS 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 information

Css Manually Highlight Current Link Nav Link

Css Manually Highlight Current Link Nav Link Css Manually Highlight Current Link Nav Link way to automatically highlight the "current" link. And I can manually add the following CSS to each page to get them highlighted, but I want to avoid added.

More information

BA. (Hons) Graphics Design

BA. (Hons) Graphics Design BA. (Hons) Graphics Design Cohort: BGD/16A/FT Examinations for 2016 / Semester 2 Resit Examinations for BGD/13/FT & BGD/14B/FT MODULE: Web Design MODULE CODE: WAT1106c Duration: 2 Hours Instructions to

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan

More information

ART170. The ART170 Final Project

ART170. The ART170 Final Project The Final Project TABLE OF CONTENTS Define the site and set up the layout pg. 2 Ordering and externalizing the style sheet pg. 2 Creating the template pg. 3 Generating pages from the template pg. 4 Updating

More information

Adobe Dreamweaver CS6 Digital Classroom

Adobe Dreamweaver CS6 Digital Classroom Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver

More information

Getting Started with Access

Getting Started with Access MS Access Chapter 2 Getting Started with Access Course Guide 2 Getting Started with Access The Ribbon The strip across the top of the program window that contains groups of commands is a component of the

More information

How to deploy for multiple screens

How to deploy for multiple screens How to deploy for multiple screens Ethan Marcotte, a developer in Boston, coined the phrase responsive design to describe a website that adapts to the size of the viewer s screen. A demonstration site

More information

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin

More information

Getting started with IBM Connections Engagement Center

Getting started with IBM Connections Engagement Center Getting started with IBM Connections Engagement Center An introduction for developers Christian Holsing December 14, 2017 IBM Connections Engagement Center (ICEC) provides an easy way to build a social

More information

Introduction to HTML & CSS. Instructor: Beck Johnson Week 2

Introduction 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 information

Designing the Home Page and Creating Additional Pages

Designing the Home Page and Creating Additional Pages Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From

More information

Gdes2000 Graphic Design for Internet & MM. Dreamweaver: Simple page construction with DIVs.

Gdes2000 Graphic Design for Internet & MM. Dreamweaver: Simple page construction with DIVs. Dreamweaver: Simple page construction with DIVs. Websites and the design process 1/17: 1. We're making the assumption that you've been given a project or brief and are looking to create a basic web page

More information

Virto SharePoint Forms Designer for Office 365. Installation and User Guide

Virto SharePoint Forms Designer for Office 365. Installation and User Guide Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365... 3 LICENSE ACTIVATION...

More information

Web Publishing Basics II

Web Publishing Basics II Web Publishing Basics II Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 Create a Site Definition... 3 The Dreamweaver CS4 Interface... 4 Panels are groups of icons

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

Documentation:Blogzine WordPress Theme

Documentation:Blogzine WordPress Theme Documentation:Blogzine WordPress Theme Install Blogzine WordPress Theme within a few minutes:- Blogzine is a minimalistic WordPress theme dedicated to blogs. Blog In provides a responsive layout with unlimited

More information

Contents. Xweb User Manual

Contents. Xweb User Manual USER MANUAL Contents 1. Website/Pages/Sections/Items/Elements...2 2. Click & Edit, Mix & Match (Drag & Drop)...3 3. Adding a Section...4 4. Managing Sections...5 5. Adding a Page...8 6. Managing Pages

More information

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant

More information

WEBSITE INSTRUCTIONS

WEBSITE INSTRUCTIONS Table of Contents WEBSITE INSTRUCTIONS 1. How to edit your website 2. Kigo Plugin 2.1. Initial Setup 2.2. Data sync 2.3. General 2.4. Property & Search Settings 2.5. Slideshow 2.6. Take me live 2.7. Advanced

More information

Header. Article. Footer

Header. Article. Footer Styling your Interface There have been various versions of HTML since its first inception. HTML 5 being the latest has benefited from being able to look back on these previous versions and make some very

More information

ifeature Pro Documentation for ifeature v1.1.2 (last updated 5/04/2011)

ifeature Pro Documentation for ifeature v1.1.2 (last updated 5/04/2011) 1 ifeature Pro Documentation for ifeature v1.1.2 (last updated 5/04/2011) TABLE OF CONTENTS: if Topic Page(s) Installing ifeature Pro 2 Updating ifeature Pro 3 Using the Menu 4 ifeature Pro Layout Templates

More information

Content Elements. Contents. Row

Content Elements. Contents. Row Content Elements Created by Raitis S, last modified on Feb 09, 2016 This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as

More information

Google Sites Training

Google Sites Training The How to Dos of Google Sites Overview Page 1 Google Sites offers tremendous functionality to make collaborating and sharing information simple. This job aid provides the step-by-step instructions that

More information

Siteforce Pilot: Best Practices

Siteforce Pilot: Best Practices Siteforce Pilot: Best Practices Getting Started with Siteforce Setup your users as Publishers and Contributors. Siteforce has two distinct types of users First, is your Web Publishers. These are the front

More information

GPS Fleet Tracking 2.0 Change Log and Feature Release

GPS Fleet Tracking 2.0 Change Log and Feature Release PRODUCT BULLETIN 1 GPS Fleet Tracking 2.0 Change Log and Feature Release Spireon Inc. is proud to announce the release of the new and improved 2.0 GPS Fleet Tracking software. This document outlines the

More information