Documente Academic
Documente Profesional
Documente Cultură
Interface
The Dreamweaver interface is comprised of six main items: 1.
2. 3. 4. 5. 6.
Document Window Insert Bar Document Toolbar Property Inspector Status Bar Panel Groups
EVOLUTION 2K9
Page 1
Document Window
The document window is where you build your Web page. Every time you open Dreamweaver, a blank Untitled Document window appears. At the top of the document window is the Title bar that contains the
name of your Web page as well as the file name of your document.
kilobytes.
At the lower left of the page is the Tag Selector. Whenever you highlight elements of your Web page in the Document Window, the corresponding tag is highlighted below in the Tag Selector. If you click on a particular tag in the Tag Selector, then the corresponding element of your Web page will be highlighted. This is handy when you are trying to select a nested table.
Insert Bar
The insert bar is one-stop shopping for many operations. Many items found in the Objects palette are also found under the Insert menu at the top of the page. The buttons are organized into several categories, which you can switch by clicking the tabs along the top of the Insert bar.
EVOLUTION 2K9
Page 2
Document Toolbar
The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a split view that shows both Code and Design view. The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.
Property Inspector
EVOLUTION 2K9
Page 3
Usually placed or found at the bottom of your screen is the Property Inspector. The Property Inspector controls many settings. The default Property Inspector is for formatting text. The content of the Properties Inspector is context sensitive and changes depending on what is being edited on screen. To show the Properties Inspector, choose Window > Properties. Some properties can only be viewed if the Property Inspector is expanded. To do this, click on the arrow at the lower right corner of the Property Inspector.
Status Bar
The status bar at the bottom of the Document window provides additional information about the document you are creating. The tag selector shows the hierarchy of tags surrounding the current selection. Click any
tag in the hierarchy to select that tag and all its contents. Click <body> to select the entire
body of the document. The Select Tool enables and disables the Hand tool. The Hand Tool allows you to click the document and drag it in the document window. The Zoom Tool and Set Magnification Pop-up Menu allows you to set a magnification level for your document. The Window Size pop-up menu [visible in Design view only] lets you resize the Document window to predetermined or custom dimensions. To the right of the Window Size pop-up menu are the estimated document size and estimated download time for the page, including all dependent files such as images and other media files.
Panel Groups
On the right side of the screen are docked panels. Clicking on the arrow on the left side of panel expands panels. In the expanded version of panels are tabs of the panels that are docked in a particular panel set. At the top right of each panel is a context menu that allows you to perform operations on the panels appearance and placement, and provides redundancy of the tasks accessed at the bottom of the panel that manipulate and add functionality to your page.
EVOLUTION 2K9
Page 4
Site Structure
Managing your folders is crucial when you construct a website. Dreamweaver has a great tool called the Site Window that allows you to do this in outline and icon form. You can rearrange files and folders within the site window without the consequence of breaking links or disrupting file paths. Dreamweaver, within the site window environment, automatically updates your changes for you.
EVOLUTION 2K9
Page 5
Root Folders
To effectively manage your site, Dreamweaver forces you to create a root folder where you keep all of your files for a particular website. A Root Folder is not particularly special except for the fact that you have defined it through Dreamweaver. The Root Folder is the folder from which all other files stem like the roots of a tree. Local Root Folder, Root Folder and just plain Root are all interchangeable terms for the same thing.
Defining a Site
1. From the Welcome screen of Dreamweaver CS3 you can define your site by selecting DreamWeaver Site in the Create New row. A site wizard appears and asks you to type in a name for your site. Or Select Site > New Site. A site wizard appears and asks you to type in a name for your site. You do not have to follow file naming conventions, but be sure that your site name is somewhat related to the project you are working on. Click Next at the bottom of the page. Check the radio button, No, I do not want to use a server technology. Click Next. Check the radio button, Edit local copies on my machine then upload to server when ready (recommended). Click Next. Choose None from the drop down menu below the question How do you connect to your local server? Click Next. Click Done.
2.
3. 4.
5. 6.
7. 8.
EVOLUTION 2K9
Page 6
1.
Select category Local Info. Click on the folder to the right of the text box labeled Local Root Folder and browse to the folder that contains or will contain your website. Click on Choose to select that folder as the root folder for this lesson. You will then be prompted to create a cache file that keeps the links you are going to create up-to date. You may want to check the Use Cache to Speed Link Updates check so that you do not have to see this message again. Click on OK. Note: When you are done defining a site, the site files window appears. It contains all of the
folders and files in your root folder. If you look on the right side, you will see the root folder and all of its sub-folders and files. The left side of the window is empty because that will contain the folders you have moved to the server that hosts your website.
2.
3.
EVOLUTION 2K9
Page 7
2.
Click on the plus sign to add a browser, the minus sign to delete, or the Editto change the browser from a list of choices. When prompted, browse the hard disk to select the browser of your choice. To change a browser, click on Edit to the right of the plus and minus sign
3. 4.
Page Formatting
Creating and Saving a New Page
1. 2. 3. Select File > New. Choose HTML in the Page Type list and click the Create button. Select File > Save and save the page in your website folder. Or Right click on Root folder which is in Files Panel select New File, it creates an untitled html file and save it automatically. Then rename the file and to open the file double click on it.
File-Naming Conventions
Do not use spaces. Avoid uppercase letters. Avoid characters such as periods, quotes, slashes, colons, and exclamation points. Keep file names short.
EVOLUTION 2K9
Page 8
For each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties dialog box [Modify > Page Properties]. The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and many other aspects of page design. You can assign new page properties for each new page you create, and modify those for existing pages
EVOLUTION 2K9
Page 9
3. 4.
Use the eyedropper to select a color swatch from the palette. All colors in the Color Cubes [default] and Continuous Tone palettes are web-safe; other palettes are not. Use the eyedropper to pick up a color from anywhere on your screen--even outside the Dreamweaver windows. To pick up a color from the desktop or another application, press and hold the mouse button; this allows the eyedropper to retain focus, and select a color outside of Dreamweaver. If you click the desktop or another application, Dreamweaver picks up the color where you clicked. However, if you switch to another application, you may need to click a Dreamweaver window to continue working in Dreamweaver. To expand your color selection, use the pop-up menu at the top right corner of the color picker. You can select Color Cubes, Continuous Tone, Windows OS, Mac OS, Grayscale, and Snap to Web Safe. Note: The Color Cubes and Continuous Tone palettes are web-safe, whereas Windows OS, Mac
OS and Grayscale are not. If you are using a palette that is not web-safe and then select Snap to Web Safe, Dreamweaver replaces the selected color with the closest web-safe color. In other words, you may not get the color you see.
To clear the current color without choosing a different color, click the Default Color button.
EVOLUTION 2K9
Page 10
Adding a Date
1. 2. 3. Place the insertion point where you want to the date to appear. Click on Date in the Common tab in the insert bar to place the current date on the page. From the Day Format drop-down menu, choose the Thursday option. From the Date Format drop-down menu, choose March 7, 1974. From the Time Format menu, choose 10:18 PM. Check the Update automatically on save check box to update the date on your page each time you save your document. Click OK.
4.
5.
Creating Links
Inserting an E-mail Link
1. 2. Select the text you wish to convert into a link. Click the Email Link button in the insert bar [Common tab]. The Email Link dialog box is displayed. In the E-mail text field type the e-mail address. Click on OK.
3. 4.
Note: There are two kinds of links, relative and absolute. Relative links are those that are defined locally within your website. For example, when you create a link from one document to another, you create a relative link. A link to an external file, such as an external website, is an Absolute link.
EVOLUTION 2K9
Page 11
7. 8.
EVOLUTION 2K9
Page 12
Positioning an Image
Click one an image to select it. In the Property Inspector, chose an alignment option from the list.
3. 4.
EVOLUTION 2K9
Page 13
2. In the Property Inspector, type 10 in the H Space text field and type 6 in the V Space text
field.
Inserting a Table
1. Place the insertion point where you want the table to appear. On the Insert bar, click on the Layout tab and click on the Table icon. Or Choose Insert > Table. In the Table dialog box that appears, define the parameters for your table.
Depending on whether the table is used as a data table or layout table, you may want to define the Width in Pixels or Percent. Similarly, you will have to define a Border for the table accordingly.
2.
3.
Click on OK. You can add text or images to table cells the same way that you add text and images outside of a table.
EVOLUTION 2K9
Page 14
Click in a table cell, and then select the td tag in the Tag Inspector.
EVOLUTION 2K9
Page 15