1 / 60

Dreamweaver

Dreamweaver. An introduction to Dreamweaver by a beginner who can show you the rudiments of quickly and easily creating a web site. An attempt to offer an alternative to Frontpage (especially for Mac users) and for those who want a different approach. A Warning.

rachel
Download Presentation

Dreamweaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dreamweaver • An introduction to Dreamweaver by a beginner who can show you the rudiments of quickly and easily creating a web site. • An attempt to offer an alternative to Frontpage (especially for Mac users) and for those who want a different approach.

  2. A Warning • There is only one way to learn Dreamweaver: set yourself a project and work on it. • If you are a confirmed FrontPage user – don’t switch. Enjoy. • If you are not: proceed.

  3. What this will do: • This is not an inclusive overview of Dreamweaver • The purpose is to get you started and show you that you too can learn this easy program on your own.

  4. What is the difference • Dreamweaver is an FTP program • You will not workdirectly on the server as does FrontPage • You will have a local file on your computer and send it to the school server (FTP) • Macromedia is not Microsoft • It supports macs as well as pcs

  5. What is the difference • Code is reliable and respected • Layout is easier and more flexible • More designers are moving to Dreamweaver

  6. What is FTP? • FTP is file transfer protocol • This means that you keep a site on your local computer and when you make changes you ‘send’ them to the the server site. • You must have the Dreamweaver program on your local computer in order to work on your website.

  7. What is FTP? • FTP is file transfer protocol • You must establish a server site to which you will send your local site. It is that site that students access. (Sam Baynes will give you your access; you will need the site name, the ‘docroot’ and a user name and password). • Even without a site, you can create a website (not published) in your own local file.

  8. So its not Microsoft? • This is important if you use Macs or if you find Microsoft programs unreliable. • Whereas FrontPage will not be upgraded for Mac Users, Dreamweaver is the program of choice for Mac (and many pc) users and continues to be updated for both platforms. • Current programs in Dreamweaver:4 and MX

  9. The code is what? • Reliable. Many programmers prefer the web authoring provided by Dreamweaver to that of Frontpage because they feel it is ‘cleaner’ and translates more reliably to the internet.

  10. The code is what? (continued) • Browser compatibility issues can be handled automatically in Dreamweaver

  11. Layout is flexible? • Yes – you can place things anywhere on a page and then set that layout. You will not be limited to working through table layouts as you are in FrontPage.

  12. So how do I begin • The biggest hurdle is the establishment of a “site” or local root site. • Establish a folder on your desktop • Name it (whatever) • Open Dreamweaver • And now…

  13. Let’s start • To start, establish your local site.. • Then we will create a homepage and several linking pages. • On the homepage we will put in text, a picture and two linking pages.

  14. New Site Window

  15. Begin…. • Go to menu bar and open ‘sites.’ • Go to ‘new site.’ • You will name your local folder and establish your local site. • You may choose to establish your FTP site at this time or wait.

  16. Local Site • Name your site(avoid spaces in file names) • Decide where you wish your “root folder,” the folder which will house your site, to reside. • Create that local root folder and name it • On your new site window, browse for the name of your folder and click on it. • Check ‘enable cache’ box

  17. Local site setup Name site Local info Enable cache Browse for folder - click here

  18. Next…. • If you wish to set up your FTP remote site - the site to which you will post your local site - you can do that now.

  19. Remote Site Window Pull down menu Remote Info

  20. Establish FTP site Choose FTP from Pull Down Menu

  21. FTP Window - version 4

  22. FTP Host FTP - MX Version Choose Passsive Format

  23. Field Information • Once you have filled in these fields you have established your site: • FTP Host: northonline.sccd.ctc.edu • Host directory: /docroot/northonline/ (name of site) • Login - use your login name • Password - use password given to you • Check “Use passive FTP”

  24. Now to begin…. • Look at your menu headings • Under window make sure that objects,properties and launcher are checked and that each of these windows are visible on your screen. • On MX- the objects window is under the insert menu

  25. Window Menu-version 4 Menu at top of screen ObjectsPropertiesLauncher

  26. Objects Insert - MX Version

  27. The object window • The object window allows you to click on a variety of applications: • Insert picture • Tables • Layers • and more

  28. Dreamweaver MX-Objects In MX- this replacesthe object box. Find under “insert” menu.

  29. Properties window Text editor Links • The properties window allows you to click to alter text and to make links. This window expands by clicking the lower right arrow.

  30. Launcher window-version 4 Site icon • This window allows you to open other windows in the application. The ‘site’ icon will show a list all the files you are using on your local and remote site.

  31. The site window (file view) • The site window allows you to view and move all of your local folders and files. It will automatically update links. Local site files-right side

  32. Full site window view-Dreamweaver 4 Connecting to remote site Put files on remote site Remote site Local Site

  33. File view in MX • The icons in the MX version differ slightly from Dreamweaver 4.

  34. Connect Window- MX Version Connect Icon

  35. To start: go to the menu bar and click NEW under File.This will give you a brand, untitled document page.You may type in text here and add a picture if you wish.

  36. Let’s add both text and a picture and make arrange them in a layout that you find interesting. To do this: go to the objects window and click on layers In the MX version there you can go to menu items: Insert and click on layer. In Windows- open panel groups will show all control panels - some people prefer clean pages on which to design and want panels closed.

  37. Drawing Layers You will now be able to use your cursor to drawan area which will appear empty - you will fill it inWith text or insert a picture later. Draw two such areas anywhere on your page.

  38. Layers • This is what your page might look like. The darker rectangle is the ‘active’ layer.

  39. Text in Layer • When you click on this box, you have the ability to alter its size or to move it anywhere on the page. • When you click in it, you can add text. • Click and insert text and format it however you wish. • Your layer now has text in it.

  40. WYSIWYG This stands for ‘What you see is what you get’ Dreamweaver allows you to format your page as you would a word-processed page and it converts it to HTML(HyperText Markup Language) behind the scenes for you.

  41. Altering text • By highlighting your text and going to the ‘color box’ in the properties window, you can select any color you wish.

  42. Layers • The layer box itself can also be moved. • Click on it and move the mouse until you see a ‘hand.’ • That ‘hand’ grabs the box and allows you to move it wherever you wish on the page

  43. Next Layer • Go to the second layer you have created • Click to make it active • Go to objects window and click on Insert Picture • Use menu in MX

  44. To insert picture…. • You will see a browse path which allows you to find the file from which you wish to choose the picture. • Find the source • Click

  45. Insert Picture • Once you have located the source, click choose and the picture is inserted in the layer (box). • You may move this box anywhere on the page you wish by using the mouse and ‘hand.’

  46. Picture insert property box align Name of image label • Notice that when a picture is inserted, the property box changes. • You can label the picture for ADA requirements, align it, or link it.

  47. Stabilize the layout After you have placed your two boxes (layers)wherever you want them, you must make sure they do not move when they appear through the viewer’s browser. Do this by creating a table Go to the menu bar and choose “modify”

  48. Layout Mode • Find the ‘layout mode’

  49. MX Version: conversion • Go to the upper Menus and choose Modify • Under the Modify Option choose Convert • Choose ‘convert layers to table’

  50. Converting to Table - version 4 • Click on • Convert layers to table

More Related