Web Designing & Internet MarketingSession 3: Introduction to Webpage Editors                                      What we ...
2Web Page Editors•   HTML editors assist in creating visually appealing websites     –   Insert and edit text     –   Crea...
Adobe Dream Viewer•   Adobe Dreamweaver (formerly Macromedia Dreamweaver) is a web    development application originally c...
History of Dreamweaver•   1997 – Developed by Allaire Systems•   2001 – Macromedia acquired Allaire•   2005 – Adobe acquir...
Features•   Although a hybrid WYSIWYG and code-based web design and development application,    Dreamweavers WYSIWYG mode ...
Dreamweaver Start Page.                  Web Designing & Internet Marketing
Dreamweaver’s editing environment.                   Web Designing & Internet Marketing
Text Styles•   Possible to apply styles to text    in design view     – Similar to using word       processor     – Highli...
Microsoft Publisher•   Microsoft Publisher is a full-featured desktop publishing program that helps    you design and publ...
Getting Started                  Web Designing & Internet Marketing
Microsoft Front PageWhen you create a new Web in FrontPage, it makes folders/directories and                 starts the st...
Selecting a View–   You can look at a FrontPage Web site in several different views.            Page: Edit a web page     ...
Selecting a Mode–   Double click the index.htm file in a Web to view a home    page.–   You are now in Page View.–   Click...
Front Page ToolbarsTitle barMenu bar Standard bar Formatting bar            FrontPage is a Microsoft product with Toolbars...
Create a FrontPage Web     1.     Open FrontPage                                                    2.     Choose File > N...
4.     In the Web Site Templates       window select:      One Page Web.5.         Click in the Specify the location of th...
7.        Click on Folders in the Views          pane          You can see the folders created for your web.           Th...
Give Your Page a TitleSet Page Properties1.    Go to File > Properties2.    Select the General tab3.    Type the title of ...
Set Colors & Background• Select the Background  tab• Select an image for  background or pick a  color.• Pick colors for te...
Select a ThemeClick Format > Theme to select from themes like the example below. Apply the Theme to: • All pages or •Selec...
Save the Page After setting up page properties: • Click the Save button on the Standard toolbar.Remember to save your page...
Assignments•   Assignment 4:     – Create your personal web page using Web Page editors       (Hint Page need to be more c...
Thank you !!!        Contact:maheshpanchal.1@gmail.com
Upcoming SlideShare
Loading in …5
×

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

910 views

Published on

Published in: Education, Technology, Business
  • Be the first to comment

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

  1. 1. Web Designing & Internet MarketingSession 3: Introduction to Webpage Editors What we are gone cover in this session ? Adobe Dream Viewer Microsoft FrontPage Microsoft Publisher
  2. 2. 2Web 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. 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. 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. 5. Features• Although a hybrid WYSIWYG and code-based web design and development application, Dreamweavers 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. 6. Dreamweaver Start Page. Web Designing & Internet Marketing
  7. 7. Dreamweaver’s editing environment. Web Designing & Internet Marketing
  8. 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. 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 Publishers 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. 10. Getting Started Web Designing & Internet Marketing
  11. 11. Microsoft Front PageWhen 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. 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. 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. 14. Front Page ToolbarsTitle barMenu 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. 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. 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. 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. 18. Give Your Page a TitleSet Page Properties1. Go to File > Properties2. Select the General tab3. 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. 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. 20. Select a ThemeClick 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 tostart a Web page withcoordinated colors andbackground. Web Designing & Internet Marketing
  21. 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. 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. 23. Thank you !!! Contact:maheshpanchal.1@gmail.com

×