Page 37 The Files panel You use the Files panel to view and manage the files in your Dreamweaver site. When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files. A toggle button at the top of the CSS Styles panel lets you switch between the two modes.
The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. Page 40 Coder is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with the Document window showing Code view by default.
Dreamweaver does not alter the display of documents that are currently open when you change preferences. Page Accomplishing Basic Tasks In Dreamweaver 8 Accomplishing basic tasks in Dreamweaver 8 This section describes how to accomplish basic tasks such as creating, opening, and saving files. Page 43 , or Extensible Markup Language files, have a.
The New Document dialog box appears. The General tab is already selected. From the Category list, select Basic Page, Dynamic Page, Template Page, Other, or Framesets; then, from the list on the right, select the type of document you want to create. Page 45 Opening files in Dreamweaver In Dreamweaver, you can easily open and edit your documents. In the Open dialog box, select the file and click Open. Accomplishing basic tasks in Dreamweaver Page 46 Dreamweaver Basics Page Set Up Your Project Files A Dreamweaver site consists of as many as three parts, depending on your computing environment and the type of website you are developing: Local folder is your working directory.
Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard disk. Remote folder is where you store your files, depending on your environment, for testing, production, collaboration, and publication. It usually corresponds to an identical folder on the remote site web server. Define a local folder You must define a Dreamweaver local folder for each new website you create. You can click the folder icon to browse to and select the folder, or enter a path in the Default Images Folder text box.
Page 54 The Files panel now shows the new local root folder for your current site. The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and Macromedia Flash content.
Page 56 A comp consists of any number of page elements that the client has requested for their website. You can also open the original comp file if you want to see it on the computer screen. Click once on the page to place the insertion point in the upper-left corner of the page. Page 59 Click OK. A table with three rows and one column appears in your document. The table is pixels wide with no border, cell padding, or cell spacing.
Insert tables Page 60 More about tables Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. When you create multiple rows with multiple cells, the cells form columns. Technically, a cell is a division within a horizontal row, and a column is the vertical accumulation of those cell divisions. Page 61 Click OK. A second table with one row and three columns appears below your first table.
Click to the right of the table to deselect it. Page Set Table Properties You may see the Table selector indicated by green lines after you insert a table. You can always make the Table selector disappear by clicking outside the table. Page 63 Click once inside the first row of the first table. If you cannot see the Cell Height text box, click the expander arrow in the lower-right corner of the Property inspector. You should now have three rows of differing heights in the first table.
Click once inside the second column of the second table. In the Property inspector, enter in the Cell Width text box and press Enter Windows or Return Macintosh Set the width of the third column to pixels.
Your layout should now look as follows: Click the Exit Expanded Tables Mode link at the top of the Document window to return to Standard mode. Save your page. Page Insert An Image Placeholder Insert an image placeholder An image placeholder is a graphic that you use until final artwork is ready to be added to a web page. An image placeholder is useful when you lay out web pages because it allows you to position an image on a page before you actually create the image.
If you have Macromedia Fireworks, you can create a new graphic from a Dreamweaver image placeholder. When you select the image placeholder and click the Create button in the Property inspector, Fireworks opens and presents you with a new canvas. Click once inside the first cell of the three-columned table. The color of the table cell turns to reddish-brown. Click once inside the second cell of the three-columned table. In the Appearance category of the Page Properties dialog box, click the Background Color color box and select black from the color picker.
Page 72 Click OK. Your page background turns to black. Save your work. Your page layout is now complete. The layout contains a number of tables that can hold assets such as images, text, and Flash Video FLV files. You can add many different kinds of content to web pages, including graphics, Macromedia Flash files, Macromedia Flash Video files, and text, to name a few. The tutorial lets you know exactly where to find the assets as you go along.
Dreamweaver replaces the image placeholder with the banner graphic for Cafe Townsend. Click once outside the table to deselect the image. Insert images Page 78 Insert an image by using the Insert menu Click once inside the third row of the first table two rows below the banner graphic you just inserted, just above the colored table cells.
Page 79 Insert an image by dragging Click once inside the last row of the last table on the page just below the colored table cells. Page 80 Insert an image from the Assets panel Click once inside the center column of the three-columned table the first table cell that is colored light tan. Page 81 The Assets panel You can use the Assets panel to view and manage assets in your current site. The Assets panel displays assets for the site associated with the active document in the Document window.
You must define a local site before you can view assets in the Assets panel. Click Insert at the bottom of the Assets panel. An FMA is a common type of Flash application that displays an informational message to the audience. FLA files are designated by a. If you cannot see the Flash Play button, click the expander arrow in the lower-right corner of the Property inspector.
Dreamweaver plays the Flash file in the Document window, showing you what site visitors will see when they view the page in a browser. In the Property inspector, click Stop to stop playing the Flash file. To enable streaming video on your web pages, however, you must have access to Macromedia Flash Communication Server, the only server that can stream Flash Video content.
Page 87 A preview of the selected skin appears below the Skin pop-up menu. The Skin option specifies the look and feel for the Flash Video component that will contain the Flash Video content. For more information on how to select different skins for Flash Video components, see www.
Insert Flash Video Page 91 Depending on your monitor resolution, the three-columned table widens to accommodate the text. Make sure the insertion point is still inside the table cell where you just pasted the text.
Click once in the first column of the three-columned table the column that is colored reddish-brown. Do not press Enter Windows or Return Macintosh when you type. Use only the Spacebar to separate words, and let the words wrap naturally. This aligns the text you just typed to the top of the table cell. If you cannot see the Vert pop-up menu, click the expander arrow in the lower-right corner of the Property inspector.
Page 95 With the index. Be careful to select the word Cuisine only, and not the space after it. Link each word or set of words to the menu. Page 97 Make sure the index. Dreamweaver automatically detects your primary browser and uses that for previewing. Page 98 You now have a web page full of content. The next step is to format some of the content to make it more appealing. Tutorial: Adding Content to Pages CSS provides you with greater control over the appearance of your page by letting you format and position text in ways that HTML cannot.
Page The term cascading refers to your ability to apply multiple styles to the same element or web page. For example, you can create one CSS rule to apply color and another rule to apply margins, and apply them both to the same text on a page. When you create styles in an external style sheet, you can control the appearance of multiple web pages from a central location, instead of setting styles on each individual web page.
Page In the Document window, open the Cafe Townsend index. Look in the Property inspector and make sure that the paragraph is formatted with the paragraph tag. Click OK.
It also lets you modify CSS properties without opening an external style sheet. When you set page properties in this manner, Dreamweaver writes a CSS style that is internal to the document.
Class styles let you set style attributes for any range or block of text, and can be applied to any HTML tag. It should be selected by default. Page Format The Navigation Bar Text Repeat step 2 to apply the bold class style to the first four words of the second paragraph. Many web pages use images of colored rectangles with text inside them to create a navigation bar, but with CSS, all you need is linked text and some formatting.
Define a new rule by typing the following code in the file, after the. Select 16 from the Size pop-up menu, and select pixels from the pop-up menu immediately to the right of the Size pop-up menu. Page Click OK. Click in the column to the right of the property. Locate the property you might need to scroll down , click display To see how your once in the column to the right, and select block from the pop-up menu. Page Apply the rule With the index.
Page Repeat step 1 through 3 for each of the individual links in the navigation bar. To add a rollover effect, add a new rule that contains the :hover pseudo-class. Page Click once at the end of the rule and press Enter Windows or Return Macintosh a few times to create some space. Add the :hover pseudo-class to the pasted. Save the file and close it.
Open the index. When you hold the mouse over any of the links, you can see the new rollover effect. Page With the index. Save the page. Your page is now finished. A remote site is usually a place on a remote computer, running a web server, that holds copies of your local files. Page Define A Remote Folder The procedures described in this tutorial work best if your remote root folder is empty.
If your remote site already contains files, create an empty folder in your remote site on the server , and use that empty folder as your remote root folder. Page For more information, click Help in the dialog box. If you selected FTP, enter the following options: Enter the host name of the server such as ftp. Page Upload Your Local Files Upload your local files After you set up your local and remote folders, you can upload your files from your local folder to the web server. To make your pages publicly accessible, you must upload them even if the web server is running on your local computer.
The following list provides information about some common issues you may encounter in setting up a remote folder, and how to resolve them: The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory; Page Tutorial: Publishing Your Site You do not need previous knowledge of HTML or other languages to complete these tutorials, but be aware that the tutorials in this part are more complex than the tutorials in the previous part.
Page Look At The Code Look at the code Dreamweaver lets you view your page in either of two ways: Design view where the document looks much like it would look in a browser , or Code view where you can see the underlying HTML code. You can also use a split view that shows both Code and Design views simultaneously. Finally, the bottom of the work area hosts the Properties panel, which allows you to alter the properties of the element currently being edited. In order to see how this works, try adding an image from the "Insert " panel into your document, and notice how all relevant image properties appear at the bottom of the workspace, providing you with an easy way to make alterations to the element attributes.
Dreamweaver MX makes things easier by allowing you to organize the components of a Web application — static as well as dynamic — into a single entity called a "site". First up, you need to specify your working directory for the site — the name of the site, the root folder for the files and the default folder to look in for images.
These folders may be on your local machine, or on a different machine — Dreamweaver refers to this collection of data as the "local site". You can also optionally tell Dreamweaver about a "remote site" — this is usually the location where your Web server is running, and where your files will ultimately go for testing and deployment.
You can also specify a URL prefix, which is used when you try to access the application via a Web browser. Save the file, and have Dreamweaver preview it for you via the toolbar icon you can also hit the F12 key and a new browser window should pop up with the output of the script. First, create a simple, properly-formatted HTML form using a combination of the "Tables" and "Forms" tabs on the "Insert" panel — this form should contain two text input areas, one named "name" and the other named "comment".
Now comes the interesting part — integrating PHP business logic into this example. Click the "PHP" tab that should have appeared on your "Insert" panel, and take a look at the functions it provides:. Now, you probably already know how PHP form processing typically works. A form processing script contains two logical blocks — one displays the empty form and the other processes the user input submitted.
Therefore, the first thing to do is to insert an "if" conditional statement at the top of the code — just click on the "If" button and Dreamweaver will do it for you:. Next, you need to check if the form has been submitted or not, via the "submit" form variable.
Use the "Form Variables" button, and write some code around what Dreamweaver inserts for you:. Use the "else" button on the toolbar, and let Dreamweaver insert it for you. This "else" branch of the script is supposed to merely display the data entered by the user. You can do this via the echo command, also accessible via a button on the PHP toolbar.
For inquiries and questions, we collect the inquiry or question, together with name, contact details email address, phone number and mailing address and any other additional information voluntarily submitted to us through a Contact Us form or an email.
We use this information to address the inquiry and respond to the question. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.
Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.
Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.
If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask peachpit. On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.
We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form. Pearson automatically collects log data to help ensure the delivery, availability and security of this site.
We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources. Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site.
While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson but not the third party web trend services to link information with application and system log data.
Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.
This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising.
Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site. Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure. Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider.
Marketing preferences may be changed at any time. If a user's personally identifiable information changes such as your postal address or email address , we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service informit.
Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list s simply visit the following page and uncheck any communication you no longer want to receive: www. While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest pearson.
California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice.
0コメント