This document provides an introduction to webpage editors, covering Adobe Dreamweaver, Microsoft FrontPage, and Microsoft Publisher. It discusses the features and uses of each program. Dreamweaver is introduced as a WYSIWYG editor that allows designing and previewing webpages. FrontPage is demonstrated as creating a basic website structure with folders for images, files, and a homepage. Publisher is described as a desktop publishing program for both print and web publications like newsletters, flyers, and websites. The document concludes with an assignment to create a personal webpage using the editors' functions.

1. Web Designing & Internet Marketing
Session 3: Introduction to Webpage Editors
What we are gone cover in this session ?
Adobe Dream Viewer
Microsoft FrontPage
Microsoft Publisher

2. 2
Web Page Editors
• HTML editors assist in creating visually appealing websites
– Insert and edit text
– Create more complex HTML elements, such as tables, forms and frames
– Adobe Dream Viewer
– Microsoft FrontPage
– Microsoft Publisher
Web Designing & Internet Marketing

3. Adobe Dream Viewer
• Adobe Dreamweaver (formerly Macromedia Dreamweaver) is a web
development application originally created by Macromedia, and is now developed
by Adobe Systems, which acquired Macromedia in 2005.
• Dreamweaver is available for both Mac and Windows operating systems. Recent versions
have incorporated support for web technologies such as CSS, JavaScript, and
various server-side scripting languages and frameworks including ASP, ColdFusion, and
PHP.
• Adobe Dreamweaver what is known as a WYSIWYG editor.
• Dreamweaver gives you the ability to see what your website looks like as you are
working on it.
Web Designing & Internet Marketing

4. History of Dreamweaver
• 1997 – Developed by Allaire Systems
• 2001 – Macromedia acquired Allaire
• 2005 – Adobe acquired Macromedia
• 2007 – Adobe Dreamweaver 9 (CS3) - 4/07
• 2008 – Adobe Dreamweaver 10 (CS4) - 10/08
• 2010 – Next Version in 2010 ???
Web Designing & Internet Marketing

5. Features
• Although a hybrid WYSIWYG and code-based web design and development application,
Dreamweaver's WYSIWYG mode can hide the HTML code details of pages from the user, making it
possible for non-coders to create web pages and sites.
• Dreamweaver allows users to preview websites in locally-installed web browsers.
• Dreamweaver can use third-party "Extensions" to extend core functionality of the application, which
any web developer can write (largely inHTML and JavaScript).
• Dreamweaver, like other HTML editors, edits files locally then uploads them to the remote web
server
• Internationalization and localization
• Adobe Dreamweaver CS4 is available in the following languages: Brazilian Portuguese, Chinese
Simplified (Windows only), Chinese Traditional (Windows only), Czech, Dutch, English, French,
German, Italian, Japanese, Korean (Windows only), Polish, Russian, Spanish, Swedish and Turkish
• Supports (X)HTML, CSS, ASP, PHP, XML, JavaScript, Ajax, ColdFusion
• Built-in FTP/SFTP client
• MAC and Windows versions
Web Designing & Internet Marketing

6. Dreamweaver Start Page.
Web Designing & Internet Marketing

7. Dreamweaver’s editing environment.
Web Designing & Internet Marketing

8. Text Styles
• Possible to apply styles to text
in design view
– Similar to using word
processor
– Highlight portion of text
– Select style or formatting to
apply
• Header tags
• List tags
• Alignment tags
(center, left, right, justified)
– Changes reflected in code
view
Applying heading tags and
centering using Dreamweaver.
Web Designing & Internet Marketing

9. Microsoft Publisher
• Microsoft Publisher is a full-featured desktop publishing program that helps
you design and publish professional print and Web-based materials with ease.
Using Publisher's familiar interface, you can precisely lay out blocks of
text, graphics, calendars, order forms, and more.
• Types of publications
– You can create two types of publications in Publisher: print and Web
• print publications include designs for newsletters, flyers, brochures, business
cards, signs, resumes, and labels.
• Web publications include designs not only for web sites but also for electronic
newsletters and other event announcements that you can distribute via e-mail.
Web Designing & Internet Marketing

10. Getting Started
Web Designing & Internet Marketing

11. Microsoft Front Page
When you create a new Web in FrontPage, it makes folders/directories and
starts the structure for your Web site.
Graphics are saved in the images folder.
The index.htm file is the home page.
Web Designing & Internet Marketing

12. Selecting a View
– You can look at a FrontPage Web site in several different views.
Page: Edit a web page
Folders: organize files and folders
Reports: analyze your web and manage its contents
Navigation: design the web site’s structure
Hyperlinks: view hyperlinks to and from any page
Task: create and manage tasks
Web Designing & Internet Marketing

13. Selecting a Mode
– Double click the index.htm file in a Web to view a home
page.
– You are now in Page View.
– Click on the HTML tab at the bottom of the screen to view the
HTML source code that creates the web page.
– Click on Preview tab. This option allows you to view your web
pages as if they were displayed in web browser.
– Click the Normal tab to return to Normal Mode which allows
you to edit the web page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Home Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<body>
</body>
</html> Web Designing & Internet Marketing

14. Front Page Toolbars
Title bar
Menu bar
Standard bar
Formatting bar
FrontPage is a Microsoft product with Toolbars that look similar to
Microsoft Word and other Microsoft programs.
Web Designing & Internet Marketing

15. Create a FrontPage Web
1. Open FrontPage
2. Choose File > New >
Page or Web.
3. Select Empty Web from the window that
appears on the right of the screen.
Web Designing & Internet Marketing

16. 4. In the Web Site Templates
window select:
One Page Web.
5. Click in the Specify the location of the new web box and
type the name of the folder for your page:
C:My DocumentsMyWebsyournameweb
Note: You can save your Web folders anywhere you want by
clicking Browse and selecting the new location.
6. Click OK and FrontPage will create a new empty web site.
Web Designing & Internet Marketing

17. 7. Click on Folders in the Views
pane
You can see the folders created for your web.
 The images folder is where FrontPage can save the graphics for your
pages.
 The index.htm file is your first page.
The index.html page is the home page for your Web site.
It will open first when your Web folder is on a Web server and
people go to the Web address (URL).
8. Double click on index.htm to open the blank page.
Web Designing & Internet Marketing

18. Give Your Page a Title
Set Page Properties
1. Go to File > Properties
2. Select the General tab
3. Type the title of your page in
the title box.
The title will become the bookmark title and will show at the top of the
browser page.
Web Designing & Internet Marketing

19. Set Colors & Background
• Select the Background
tab
• Select an image for
background or pick a
color.
• Pick colors for text
• Pick colors for
hyperlinks.
• Use a background from
another page.
You can select all the colors and the background separately.
OR
Web Designing & Internet Marketing

20. Select a Theme
Click Format > Theme to select from themes like
the example below.
Apply the Theme to:
• All pages or
•Selected page(s)
This is a quick way to
start a Web page with
coordinated colors and
background.
Web Designing & Internet Marketing

21. Save the Page
After setting up page properties:
• Click the Save button on the Standard toolbar.
Remember to save your page frequently as you work.
To quickly access Page Properties to make changes:
• Right click on the page and select Page Properties
Web Designing & Internet Marketing

22. Assignments
• Assignment 4:
– Create your personal web page using Web Page editors
(Hint Page need to be more creative with maximum use of function ex: tables,
images, links, color)
Web Designing & Internet Marketing

23. Thank you !!!
Contact:
maheshpanchal.1@gmail.com