STRUCTURE AND HTML TAGS. MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "STRUCTURE AND HTML TAGS. MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication"

Transcription

1 STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

2 OBJECTIVES This presentation covers the following ACA Exam objectives: 4.1 Demonstrate knowledge of Hypertext Markup Language Import tabular data to a web page. 5.3 Modify text and text properties. 5.6 Use basic HTML tags to set up an HTML document, format text, add links, create tables, and build ordered and unordered lists. 5.7 Add head content to make a web page visible to search engines.

3 STRUCTURE AND HTML TAGS TOPICS Learn how to separate structure from presentation Learn how to apply HTML structure Learn how to apply HTML in Code view Learn how to apply HTML in Design view Learn how to apply HTML table structure Learn how to apply HTML page layout structure

4 HTML STRUCTURE HTML tags give the content meaning (semantics). HTML has tags for: Formatting text Page structure Enabling interactivity HTML is used for document structure, not for presentation Properly structured HTML markup consists of an opening tag and a closing tag In XHTML, tags with no closing element are self closing (example: <br />) Page information generally appears within the <head> element. Example: Page title, Meta Tags Page content appears within the <body> element. See Adobe Dreamweaver CS6 Classroom in a Book, page 21.

5 COMMON HTML4 (XHTML1.0) TAGS (1 OF 2) HTML text formatting <h1></h1> <h6></h6> headings 1 thru 6 <p></p> (paragraph) <ul></ul>, <ol></ol> unordered and ordered lists <li></li> list items <blockquote></blockquote> - quotation (creates a standalone indented paragraph) Tabular data <table></table> creates table <tr></tr> creates table row <th></th> creates table header <td></td> creates table cell Layout <div></div> creates a division (used to divide page content into discernible grouping. Used extensively to create multicolumn layouts)

6 COMMON HTML4 (XHTML1.0) TAGS (2 OF 2) Interactive <a></a> anchor (creates a hyperlink) Other tags <! comment --> HTML comments (used to add notes with the HTML that are not displayed in the browser window) <img /> places an image <strong></strong> adds semantic emphasis (displays as bold by default) <em></em> adds semantic emphasis (displays as italic by default) <script></script> contains a script or links to an external script <meta /> add metadata in the head section of the document

7 COMMON HTML5 TAGS (1 OF 2) HTML5 includes HTML4 and XHTML 1.0 tags. HTML5 is backward compatible. HTML5 tags in Dreamweaver CS6 can only be added in Code view. <header></header> designates the introduction of a document or section <nav></nav> designates a section of navigation <section></section> designates a section in a document Example: a chapter or group of related content <article></article> designates independent, self-contained content which can be syndicated independently from the rest of the site <canvas></canvas> designates graphic content created using a script See Adobe Dreamweaver CS6 Classroom in a Book, pages

8 COMMON HTML5 TAGS (2 OF 2) <aside></aside> designates sidebar content that is related to the surrounding content <footer></footer> designates a footer for a document or section <figure></figure> designates a section of standalone content containing an image or video <figcaption></figcaption> designates a caption for a <figure> element <audio></audio> designates multimedia content, sounds, music, or other audio streams <video></video> designates video content <source></source> designates media resources for audio or video

9 HTML IN CODE VIEW You can enter HTML tags in Dreamweaver code view. HTML tags are color-coded for quick visual identification. You can change coloring in the Preferences > Code Coloring area. The Property inspector and tag selector reflect the HTML format. You may need to click Refresh in the Property inspector after code is altered. See Adobe Dreamweaver CS6 Classroom in a Book, pages

10 APPLY SOURCE FORMATTING Dreamweaver-generated code can be organized and colored in Code view by choosing Commands > Apply Source Formatting. The formatting is based on set preferences. HTML version can be converted by choosing File > Convert.

11 HTML CODE HINTING Code hinting is menu listing available for HTML tags and attributes (including HTML5). Code hinting is invoked when you type the beginning of a tag: Type a right angle bracket (<). To insert an attribute, place the insertion point immediately after a tag name, and press the spacebar. Code hinting is activated by default. You can change code hinting under Preferences > Code Hints. Code hinting automatically closes tags. You can force code hints to appear. Press Ctrl+spacebar (Windows and Mac).

12 HTML STRUCTURE SHORTCUTS You can apply formatting using the Format menu or via keyboard shortcuts. Shortcuts can be used in Code or Design view. Headings <h1> <h6> Press Ctrl+1 Ctrl+6 (Windows) Press Cmd+1 Cmd+6 (Mac) Paragraph <p> Press Ctrl+Shift+P (Windows) Press Cmd+Shift+P (Mac) Remove formatting Press Ctrl+0 (Windows) Press Cmd+0 (Mac)

13 DREAMWEAVER QUICK TAG EDITOR The Quick Tag Editor provides easy and convenient access to HTML tags. Select content in the page, and click the Quick Tag Editor to wrap content within a tag. Or place your cursor in the page and click to insert tag. Or choose Modify > Quick Tag Editor. Or click Quick Tag Editor in the Property inspector. Or press Ctrl+T (Windows) or Cmd+T (Mac). See Adobe Dreamweaver Classroom in a Book, page 90.

14 HTML FORMAT IN DESIGN MODE Apply HTML format using the Property inspector: headings 1-6 paragraph none preformatted (html <pre> tag) Headings <h1> <h6> Ctrl+1 Ctrl+6 (Windows) Cmd+1 Cmd+6 (Mac) Paragraph <p> Press Ctrl+Shift+P (Windows) Press Ctrl+Shift+P (Mac) Remove formatting Press Ctrl+0 (Windows) Press Cmd+0 (Mac)

15 HTML UNORDERED LISTS Select multiple paragraphs in the Design view, and click Unordered List in the Property inspector to make a bulleted list. You can also use Format > List > Unordered List. This generates <ul> and <li> tags. Unordered lists are used extensively for structuring navigation bars and menus. See Adobe Dreamweaver Classroom in a Book, pages

16 HTML ORDERED LISTS Select multiple paragraphs in the Design view, and click Ordered List in the Property inspector to make a numbered list. You can also use Format > List > Ordered List. This generates <ol> and <li> tags.

17 HTML STRONG/EMPHASIS SEMANTICS Strong (B) Press B in the Property inspector Format > Style > Bold Ctrl+B (Windows) / Cmd+B (Mac) Sets the <strong> HTML tag Strong (I) Press I in the Property inspector Format > Style > Italic Ctrl+I (Windows) / Cmd+I (Mac) Sets the <em> HTML tag See Adobe Dreamweaver Classroom in a Book, page 24.

18 HTML BLOCKQUOTE The HTML blockquote creates a standalone indented paragraph. Click the blockquote (indent) symbol in the Property inspector. Or press Ctrl+Alt+] (Windows) or Cmd+Option+] (Mac). Or choose Format > Indent. This generates the <blockquote> and </blockquote> tags. See Adobe Dreamweaver Classroom in a Book, pages

19 HTML TABLES Insert tables in your layout: Click Table in the Common or Layout category in the Insert panel. Or choose Insert > Table. Or press Ctrl+Alt+T (Windows) or Cmd+Option+T (Mac). The Table dialog box lets you set the following items: Number of rows and columns Table widths (% or pixels) Border thickness Cell padding and spacing (2 pixels by default) Header row or column designation Summary (used for assistive technology) See Adobe Dreamweaver Classroom in a Book, pages

20 HTML TABLE PROPERTIES Table properties appear when a table is selected in the page. Good practice to use the tag selector for selecting a table Avoid using HTML formatting in the Property inspector, such as: Width Cell padding and spacing Border Alignment Table styling should be accomplished using Cascading Style Sheets (CSS).

21 ADDING TABLE ROWS AND COLUMNS To add rows, click in a row, and then do one of the following: Click Insert Row Above or Insert Row Below in the Layout category in the Insert panel. Choose Insert > Table Objects. To add columns, click in a column, and do one of the following: Click Insert Column To The Left or Insert Column To The Right in the Layout category in the Insert panel. Choose Insert > Table Objects. For an overview, watch the video Inserting a Table.

22 HTML LAYOUT <DIV> TAGS <DIV> tags are used for structuring page layout. They divide page content into discernible grouping areas. Insert <DIV> tags via the Layout category in the Insert panel or by choosing Insert > Layout Objects > Div Tag. <DIV> tag insertion options: At insertion (cursor) point Wrap around selection (if selection is made) After start of tag (embeds within) Before end of tag (embeds within) IDs are commonly added to <DIV> tags. HTML5 <ARTICLE>, <SECTION>, <HEADER>, <ASIDE>, and <FOOTER> tags can be used as alternates to <DIV>. For an overview, watch the video Inserting Div Tags and IDs. Copyright.2013 MyGraphicsLab/Pearson Education

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

Introduction to Web Development

Introduction to Web Development Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D.

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D. Chapter 1 Internet and Web Basics The Internet and the Web Web Standards and Accessibility Information on the Web Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7 File Functions Save Save As Revert to Last Save Click on the "Save" button to save the current file on the staging server and exit the WYSIWYG editor. Remember, it will not be live on the production server

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

ECDL / ICDL Web Editing Syllabus Version 2.0

ECDL / ICDL Web Editing Syllabus Version 2.0 ECDL / ICDL Web Editing Syllabus Version 2.0 Purpose This document details the syllabus for ECDL / ICDL Web Editing. The syllabus describes, through learning outcomes, the knowledge and skills that a candidate

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

Site Maintenance. Table of Contents

Site Maintenance. Table of Contents Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

More information

ebooks: Exporting EPUB files from Adobe InDesign

ebooks: Exporting EPUB files from Adobe InDesign White Paper ebooks: Exporting EPUB files from Adobe InDesign Table of contents 1 Preparing a publication for export 4 Exporting an EPUB file The electronic publication (EPUB) format is an ebook file format

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

HTML, XHTML and CSS for Web Designers & Developers

HTML, XHTML and CSS for Web Designers & Developers HTML, XHTML and CSS for Web Designers & Developers Course ISI-1254 - Five Days - Instructor-led - Hands on Introduction This course will give any web programmer an extra edge of effectiveness on the job.

More information

Microsoft Word 2013 Tutorial

Microsoft Word 2013 Tutorial Microsoft Word 2013 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Umbraco v4 Editors Manual

Umbraco v4 Editors Manual Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

Dreamweaver CS5. Module 1: Website Development

Dreamweaver CS5. Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

User Guide. Appendix A. RADEditor

User Guide. Appendix A. RADEditor User Guide Appendix A RADEditor Table of Contents About this Chapter... 4 What is RadEditor?... 4 Section 1: RadEditor at a Glance... 5 Publishing Options... 9 Keyboard Shortcuts Quick Reference... 9 Section

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

Hackpad- Basics. Getting Started:

Hackpad- Basics. Getting Started: Hackpad is a simple, easy to use wiki with real time updating and requires no special text editor. It can be used a better option for collaborating that the traditional wiki or Google Docs. Hackpad allows

More information

HTML & HTML5 INTRO A COUPLE OF NOTES. Some tags have attributes that you have to use. For example, <a> tags need links in their href attribute.

HTML & HTML5 INTRO A COUPLE OF NOTES. Some tags have attributes that you have to use. For example, <a> tags need links in their href attribute. HTML & HTML5 INTRO This is a complete cheat sheet for you to feel comfortable diving right into HTML & HTML5 without feeling like you have to memorize ALL THINGS related to HTML. With time you will be

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Microsoft Word 2010 Tutorial

Microsoft Word 2010 Tutorial Microsoft Word 2010 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,

More information

Umbraco v6 Editors Manual

Umbraco v6 Editors Manual Umbraco v6 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

MICROSOFT POWERPOINT 2008 TUTORIAL

MICROSOFT POWERPOINT 2008 TUTORIAL MICROSOFT POWERPOINT 2008 TUTORIAL G E T T I N G S T A R T E D Microsoft PowerPoint is one of the most popular presentation programs supported by both Mac and PC platforms. Microsoft PowerPoint can be

More information

SOCS Javascript Editor

SOCS Javascript Editor Javascript Editor Tool Bar and Buttons Insert Article Redirect Use the Article Redirect icon when you want a Section to redirect to another website, to a webpage or file within your site. The article containing

More information

Web Authoring. www.fetac.ie. Module Descriptor

Web Authoring. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Adobe Dreamweaver CS4: Learning the Tools

Adobe Dreamweaver CS4: Learning the Tools Adobe Dreamweaver CS4: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Mastering the JangoMail TinyMCE HTML Editor

Mastering the JangoMail TinyMCE HTML Editor JangoMail Tutorial Mastering the JangoMail TinyMCE HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

Dreamweaver CS6 Basics

Dreamweaver CS6 Basics Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a

More information

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Dreamweaver CS3 THE MISSING MANUAL David Sawyer McFarland POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction 1 Part

More information

BLACKBOARD 9.1: Text Editor

BLACKBOARD 9.1: Text Editor BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed

More information

Creating Web Pages with HTML Simplified. 3rd Edition

Creating Web Pages with HTML Simplified. 3rd Edition Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you

More information

Web Ambassador Training on the CMS

Web Ambassador Training on the CMS Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create

More information

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and

More information

Fast track to HTML & CSS 101 (Web Design)

Fast track to HTML & CSS 101 (Web Design) Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

WYSIWYG Editor in Detail

WYSIWYG Editor in Detail WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.

More information

Adobe Dreamweaver Exam Objectives

Adobe Dreamweaver Exam Objectives Adobe Dreamweaver audience needs for a website. 1.2 Identify webpage content that is relevant to the website purpose and appropriate for the target audience. 1.3 Demonstrate knowledge of standard copyright

More information

Guide to Content Editing

Guide to Content Editing Guide to Content Editing Page 1 of 119 Contents 1 About This Guide... 8 1.1 Users of This Guide... 8 1.2 Topics Covered in the Guide... 8 1.3 Software Requirements... 9 1.4 Conventions Used in the Guide...

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

HTML Tags For Amazon DTP

HTML Tags For Amazon DTP 1 of 5 1/11/2011 2:55 PM s For Amazon DTP Custom s Attributes Values Description Forces a page break. Formats enclosed text as "not underlined." (Overres

More information

KOMPOZER Web Design Software

KOMPOZER Web Design Software KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web

More information

Using econtentmanager s ewebeditpro Editor

Using econtentmanager s ewebeditpro Editor Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The

More information

WORD 2013 FORMATTING TEXT and USING STYLES

WORD 2013 FORMATTING TEXT and USING STYLES WORD 2013 FORMATTING TEXT and USING STYLES Information Technology September 1, 2014 1 P a g e TABLE OF CONTENTS Paragraph Format Options... 3 Paragraph group under the Home tab... 3 First Line Indent...

More information

MS Word 2007 practical notes

MS Word 2007 practical notes MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/27/2008 Contents Before you start with Dreamweaver....

More information

Quick Guide to the Cascade Server Content Management System (CMS)

Quick Guide to the Cascade Server Content Management System (CMS) Quick Guide to the Cascade Server Content Management System (CMS) Waubonsee Community College Cascade Server Content Administration January 2011 page 1 of 11 Table of Contents Requirements...3 Logging

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Garfield Public Schools Fine & Practical Arts Curriculum Web Design Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and

More information

Creating Web Pages with Dreamweaver CS 6 and CSS

Creating Web Pages with Dreamweaver CS 6 and CSS Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding

More information

CKEditor Javascript Editor

CKEditor Javascript Editor Tool Bar and Buttons CKEditor Javascript Editor Insert Drop Doc Use the Drop Doc Form option on the tool bar to create a form to post to your SOCS site. Visitors can complete the information online and

More information

Dreamweaver Domain 2: Planning Site Design and Page Layout

Dreamweaver Domain 2: Planning Site Design and Page Layout Dreamweaver Domain 2: Planning Site Design and Page Layout Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Identify best practices for designing

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

More information

BASIC FORMATTING IN MICROSOFT WORD

BASIC FORMATTING IN MICROSOFT WORD BASIC FORMATTING IN MICROSOFT WORD Microsoft Word comes with formatting tools that you can use to enhance the appearance of your documents. Some of the formatting tools we will be covering in this lesson

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Item Editor Reference Guide

Item Editor Reference Guide Item Editor Reference Guide This reference guide is intended for all iwebfolio users. The item editor is the editing tool that appears when a user is editing an item within a portfolio or template. This

More information

How to Author a Custom Course

How to Author a Custom Course How to Author a Custom Course Table of Contents 1. Introduction 2. Ordering Custom Course Hosting 3. Creating a new course 4. Copying Courses 5. Maintaining a Customized Course 6. Assigning Authoring Privileges

More information

Content Management System

Content Management System OIT Training and Documentation Services Content Management System End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2009 CONTENTS 1.

More information

7 th Annual LiveText Collaboration Conference. Advanced Document Authoring

7 th Annual LiveText Collaboration Conference. Advanced Document Authoring 7 th Annual LiveText Collaboration Conference Advanced Document Authoring Page of S. La Grange Road, nd Floor, La Grange, IL 6055-455 -866-LiveText (-866-548-3839) edu-solutions@livetext.com Page 3 of

More information

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:

More information

Web Editing Basics 1 TOPICS

Web Editing Basics 1 TOPICS Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from

More information

Microsoft PowerPoint 2011

Microsoft PowerPoint 2011 Microsoft PowerPoint 2011 Prepared by Computing Services at the Eastman School of Music May 2011 Table of Contents New Look in Microsoft Office 2011... 4 Standard Toolbar... 4 Ribbon... 4 Appearance of

More information

II. Creating Your Website

II. Creating Your Website II. Creating Your Website In this part of Dazzle the Web with Dynamic Dreamweaver, we will learn the following skills: 1. Define a website 2. Create our home page 3. Add content to the home page 4. Format

More information

Create a Web Page with Dreamweaver

Create a Web Page with Dreamweaver Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist

More information

Help on Icons and Drop-down Options in Document Editor

Help on Icons and Drop-down Options in Document Editor Page 1 of 5 Exact Synergy Enterprise Help on Icons and Drop-down Options in Document Editor Introduction The following table provides descriptions on the icons and drop-down options that are available

More information

-SoftChalk LessonBuilder-

-SoftChalk LessonBuilder- -SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content

More information

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA ADOBE DREAMWEAVER AUTHORING TOOL DTM 3612 SEMESTER 1 SESI 2010/2011 DTM 3612 ADOBE DREAMWEAVER AUTHORING

More information

JCE Editor Icons. Help Learn all about the JCE Editor. Undo Undo the last action. Redo Redo the last action.

JCE Editor Icons. Help Learn all about the JCE Editor. Undo Undo the last action. Redo Redo the last action. JCE Editor Icons Help Learn all about the JCE Editor. Undo Undo the last action. Redo Redo the last action. Bold Apply or remove a bold effect on selected text. Italic Apply or remove italics to the selected

More information

MICROSOFT POWERPOINT TUTORIAL (WINDOWS 2007)

MICROSOFT POWERPOINT TUTORIAL (WINDOWS 2007) MICROSOFT POWERPOINT TUTORIAL (WINDOWS 2007) G E T T I N G S T A R T E D Microsoft PowerPoint is one of the most popular presentation programs supported by both Mac and PC platforms. Microsoft PowerPoint

More information

Web Page Design (Master)

Web Page Design (Master) St. Michael-Albertville High School Teacher: Ben Rusin Web Page Design (Master) September 2014 CEQ: WHAT IS HTML CODING AND HOW IS IT USED TO CREATE WEB SITES? AND HOW CAN IT BE USED TO CREATE WEB SITES?

More information

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...

More information

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

Quick Guide for Dreamweaver CC Basics April 2016 Training:

Quick Guide for Dreamweaver CC Basics April 2016 Training: Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are

More information

CLASSROOM WEB DESIGNING COURSE

CLASSROOM WEB DESIGNING COURSE About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

Creating Electronic Portfolios using Microsoft Word and Excel

Creating Electronic Portfolios using Microsoft Word and Excel Step-by-Step Creating Electronic Portfolios using Microsoft Word and Excel The Reflective Portfolio document will include the following: A Cover Page for the portfolio - Include a Picture or graphic A

More information

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading

More information

Microsoft Word 2011 Prepared by Computing Services at the Eastman School of Music May 2011

Microsoft Word 2011 Prepared by Computing Services at the Eastman School of Music May 2011 Microsoft Word 2011 Prepared by Computing Services at the Eastman School of Music May 2011 Table of Contents New Look in Microsoft Office 2011... 4 Standard Toolbar... 4 Ribbon... 4 Appearance of Microsoft

More information

Word Processing programs and their uses

Word Processing programs and their uses Word Processing programs and their uses An application that provides extensive tools for creating all kinds of text based programs. They are not limited to working with text and enable you to add images

More information

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information

Using an external style sheet with Dreamweaver (CS6)

Using an external style sheet with Dreamweaver (CS6) Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not

More information

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://easywpguide.com/wordpress-manual/ to assist you with your website 1 WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

More information

Microsoft Frontpage 2003 Keyboard Shortcuts

Microsoft Frontpage 2003 Keyboard Shortcuts Work with and manage Web pages F8 CTRL+N CTRL+O CTRL+F4 CTRL+S CTRL+P F5 CTRL+ CTRL+Shift+ CTRL+Shift+B ALT+F4 CTRL+ Shift+8 CTRL+ / CTRL+F F3 Shift+F3 CTRL+F3 CTRL+Shift+F3 CTRL+H F7 Shift+F7 CTRL+Z or

More information

Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0

Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 This version: http://www.w3.org/tr/1999/wai-webcontent-19990505/full-checklist (plain text, postscript, pdf) This document is an appendix

More information

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be

More information

Mastering the JangoMail EditLive HTML Editor

Mastering the JangoMail EditLive HTML Editor JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

P a g e 0. Training Guide for the Content Management System

P a g e 0. Training Guide for the Content Management System P a g e 0 Training Guide for the Content Management System P a g e 1 Table of Contents: Website Administration Page 2 Editing Pages Page 3 Adding Images. Page 4 Editor Toolbar Key... Page 5 & 6 Training

More information

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5

More information