wd & im session a3 _introduction to web page editors_april 08,2010

Web Designing & Internet Marketing

Session 3: Introduction to Webpage Editors

What we are gone cover in this session ?

Adobe Dream ViewerMicrosoft FrontPageMicrosoft Publisher


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


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.


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 ???


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


Dreamweaver Start Page.


Dreamweaver’s editing environment.


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.


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.


Getting Started


Graphics are saved in the images folder.The index.htm file is the home page.

When you create a new Web in FrontPage, it makes folders/directories and starts the

structure for your Web site.

Microsoft Front Page


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


– Double click the index.htm file in a Web to view a home page.

– You are now in Page View.

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

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

Selecting a Mode

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

– Click on the HTML tab at the bottom of the screen to view the HTML source code that creates the web page.


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.


1. Open FrontPage

3. Select Empty Web from the window that appears on the right of the screen.

Create a FrontPage Web

2. Choose File > New > Page or Web.


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 Documents\MyWebs\yournameweb 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.


7. Click on Folders in the Views pane

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

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.

8. Double click on index.htm to open the blank page.


Give Your Page a Title

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.

Set Page Properties


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


Select a Theme

Click Format > Theme to select from themes like the example below.

This is a quick way to start a Web page with coordinated colors and background.

Apply the Theme to:• All pages or• Selected page(s)


Save the Page

• Click the Save button on the Standard toolbar.

After setting up page properties:

• Right click on the page and select Page Properties

To quickly access Page Properties to make changes:

Remember to save your page frequently as you work.


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)

Thank you !!!

Contact:[email protected]

wd & im session a3 _introduction to web page editors_april 08,2010

Education