Electronic Communications Unit Presenter: Michael McGuire 240-632-0610 A wizzy-what ?!! Content Management Is Easy With WYSIWIG Editors.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to Freeware/Shareware Chapter Four Essential Tools for Web Page Authors.
Advertisements

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
Site Modules > Page Builder Access the Page Builder module through the Site Modules top navigation link. Access Page Builder from the Site Modules navigation.
XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.
Macromedia Dreamweaver 4 Foundation Level Course.
Multimedia for the Web: Creating Digital Excitement HTML, XHTML and Web Authoring.
1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
MICROSOFT – WORD. WORD... text entry f formatting spell check bulleting numbering t tables and much more.
Dreamweaver 8 Concepts and Techniques Introduction Web Site Development and Macromedia Dreamweaver 8.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
XP New Perspectives on Microsoft Access 2002 Tutorial 71 Microsoft Access 2002 Tutorial 7 – Integrating Access With the Web and With Other Programs.
Wikispaces  Step One:  Step Two: Click on Create A New Wiki  Step Three: Type in Wiki Name  Step.
Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Paul Trani Adobe Certified Instructor/Expert Resources:
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
DHTML - Introduction Introduction to DHTML, the DOM, JS review.
What is Web Authoring? Web Authoring Tools Use Text Editors HTML Editors Web-based Authoring Tools Integrated Web Authoring Tools 8Basic Understanding.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Getting Started with Expression Web 3
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
IT Introduction to Website Development Welcome!
Adobe Dreamweaver CS5 Introduction Web Site Development and Adobe Dreamweaver CS5.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Web Technologies Website Development Trade & Industrial Education
Tutorial 1 Getting Started with Adobe Dreamweaver CS3
Tutorial 1: Getting Started with Adobe Dreamweaver CS4.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Creating a Winning E-Business Second Edition Understanding Web Technologies Chapter 9.
CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.
Schoolwires 101 Frequently used “shortcut key” within the editor. ~Created by, Shannon Conley.
WYSIWYG Program (pronounced wiz - ee - wig) What You See Is What You Get Dreamweaver 4.0 Toolbars.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Website Development with Dreamweaver
Adobe Contribute CS4 Targeted Training, LLC © Targeted Training, LLC 2010.
PUBLISHING ONLINE Chapter 2. Overview Blogs and wikis are two Web 2.0 tools that allow users to publish content online Blogs function as online journals.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 1 1 Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site.
DHTML - Introduction Chapter Introduction to DHTML, the DOM, JS review.
Start Dreamweaver program From file menu click new Blank page appears.
CMA Workshop Image Links and Text Links on the Same Line in a Component.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Project 1 Dreamweaver Provides. Automatic Web Page Design Develop your own webpage without having to spend hours writing HTML code Web site management.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Links HTML uses a hyperlink to another document on the Web.
Landscaper 101. Time Code AMC AMCNET HELP!!! Where do you go for help? –Upper right corner has a ? for the online help –This presentation.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
 Before you continue you should have a basic understanding of the following:  HTML  CSS  JavaScript.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
Creating Web Pages with Links, Images, and Embedded Style Sheets
XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.
COMP 143 Web Development with Adobe Dreamweaver CC.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
XP Creating Web Pages with Microsoft Office
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Unit 2, Lesson 5 Website Development Tools
Unit 2, Lesson 5 Website Development Tools
Creating a Successful Web Presence
3.00 Understanding the Adobe Dreamweaver interface. (12%)
Presentation transcript:

Electronic Communications Unit Presenter: Michael McGuire A wizzy-what ?!! Content Management Is Easy With WYSIWIG Editors

Electronic Communications Unit Presenter: Michael McGuire WEB WYSIWYG Editors Providing content authors with HTML writing tools. When – Content Management Systems, Web based systems, Message boards. Why – limited budgets, common standards Editors - Client side tools –Client OS and Browser compatibility is an enormous issue. Function As Form Text areas Overview of 2 different kinds of editors –Flash Editors (EwebWP) –ActiveX (EwebeditPro)

Electronic Communications Unit Presenter: Michael McGuire EKTRON Why Ektron Editors –Stable Company –Excellent Support –Industry Leader –Excellent Documentation(user & developer) –Works well with ColdFusion –Great Architecture

Electronic Communications Unit Presenter: Michael McGuire EwebWP – (ABOUT) Flash Based (6) Cross Platform compatibility Produced by Ektron Easy Installation Light download for client $99 License

Electronic Communications Unit Presenter: Michael McGuire EwebWP – (FEATURES) Insert Files and Images Font Style/Alignment Style Sheet compatibility Cut/Copy/Paste

Electronic Communications Unit Presenter: Michael McGuire EwebeditWP – (INSTALLATION) Key Files –EwebWP.swf – Flash executable –EwebWPLicenseKey.txt – Key provided by Ektron –Ewebwp.cfm – Calls the Flash executable –FilesStored.xml – provides titles and paths to images and files for insert into content.

Electronic Communications Unit Presenter: Michael McGuire EwebeditWP – How it stacks up Advantages –Easy to Install –Excellent support from Ektron –Cross platform support Disadvantages –Image is not displayed in Editor –Limited ability to customize –Limited HTML Support (No Tables) –Limited Special Character/Foreign Character support

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro – (ABOUT) About Ewebeditpro Produced by Ektron - Requires a Windows OS for the client - ActiveX Control - A truer WYSIWG Editor - Generates xhtml - Highly Customizable - Strong CF support - $300 license

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro – (FEATURES) Image/File/hyperlink Insert Image Upload Module Stylesheet support Multilanguage Support Cleans Word Documents well Standard text editing features Supports Tables HTML view Spell Check

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro (INTEGRATION) Key Files –Config.xml- Controls the tool bar, paths –Ewebeditpro.cfm – Custom tag that calls editor, sets paths –ewebeditproevents.js – javasript processes Key Tables –Images table – controls images paths, properties –Extension_tbl table – used to control the types of files that can be uploaded.

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro (CUSTOMIZE TOOLBAR) Add new tools to the editor tool bar –Code for Config.xml Add A Link To An Adobe Document Add Link To An Adobe Document -Code for ewebeditproevents.js else if ("cmdadobe" == strCmdName) {window.open(eWebEditPro.parameters.path + 'adobe.cfm?editorName=' + escape(sEditorName), 'adobe', 'toolbar=0, location=0,directories=0,screenX=50, screenY=50, status=0,menubar=0,scrollbars=0,hotkeys=1, resizable=1,width=500,height=250');}

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro (CUSTOMIZE STYLESHEET) Code for Config.xml -

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro (RETURNING VALUES TO THE EDITOR) Code for Adobe.cfm function inserthyperlink() { if (top.opener.closed){alert("Your hyperlink could not be inserted because the editor page has been closed."); }else if (document.frmHyperlinks.text2.value == ''){alert("Your hyperlink text is blank and would create an empty link."); } else{ var hyperlinkvalue; var pastevalue; var targetvalue; var targetvaluepaste targetvalue = ocument.frmHyperlinks.Target.options[document.frmHyperlinks.Target.selectedIndex].value; if (targetvalue == "") {targetvaluepaste = ""; } else {targetvaluepaste = "target=" + targetvalue; } hyperlinkvalue = document.frmHyperlinks.httpLink.value pastevalue = ' ' + document.frmHyperlinks.text2.value + ' '; top.opener.eWebEditPro[objQuery["editorName"]].pasteHTML(pastevalue); self.close(); }

Electronic Communications Unit Presenter: Michael McGuire Ewebeditpro – How it stacks up ActiveX –Heavy download –Serious compatibility issues –Very powerful additional functionality Excellent Support Highly customizable