Adobe BrowserLab lets you text your web pages in the most common browsers to make sure your site looks good to whoever is viewing it. When you use BrowserLab, you'll see the results in a screenshot that has previews of each page in each browser.
You can also test your site in different browsers using the Document Toolbar. It sounds like a complicated term, but it's not. It is simply the method you'll use to transfer files from your computer to the web. If you've ever copied a large file from one location on your computer to another, then this won't be totally foreign because FTP does the same thing — except it copies your website files to your website on the Internet.
All you have to do is set up your FTP with a little information. Once you have this information, it's time to set up an FTP server. After you have added this information, click Test to try it out. If the test was successful, Dreamweaver will tell you so. If not, double-check your login information and ftp address. The Files panel gives you a quick and easy way to manage and transfer files to and from your remote server.
What's more, Dreamweaver can automatically compare your local and remote folders and add and delete files where necessary. Notice that there are two drop-down menus at the top. The one on the left is called the Site menu.
It allows you to choose a site and view all of the files associated with it. It also gives you access to all of the files on your computer. The Drop-down menu on the right is called the Sites Files view. This option allows you to see the files associated with your site in that directory.
For instance, if you select Local view, you will see the files that reside in the site folder on your computer. Remote view would let you see the files in your remote folder. Now take a look at the icon that looks like a plug. Click it to connect to a remote side. Dreamweaver makes transferring files to and from a server a cinch. Take a look at the arrow buttons on the files panel. The down arrow is called the Get button, and the up arrow is called the Put button.
The get button retrieves files from your remote site, and the put button transfers files from your computer to your remote site. In the Files panel, select a site and choose Remote View. Dreamweaver will automatically connect to your site and you will see all of the files on your server. Now select the files you'd like to copy and click the Get button.
Dreamweaver will ask you if you'd like to download dependent files. Dependent files are the images and other files that are referenced when a browser loads a document. If the dependent files are not available, the image or other file will not load. A place holder and an X will appear in its place. If you already have copies of the dependent files in your local folder, click No.
Dreamweaver inserts the table into the page. The names are regular text, and you can change them to a more understandable label if you like.
The second row of cells represents the data. Dreamweaver displays just a single row, but when you preview the page in a browser, a table row appears for each row of data in the HTML or XML file. When you select this option from the Choose Insert Options window, you create a page that lists all the rows in a data set the master list , accompanied by a region of the page that displays details from a single, selected row detailed information on the selected item, in other words. For example, in Figure , clicking Dr.
You can edit the supplied CSS thankfully to match the look of your site. The top portion of the window lets you specify which columns of data appear in the master list. For example, in Figure , the master columns are the ones with the thumbnail image and the name of each doctor in the list on the left side of the page.
You can also rearrange the columns by using the up and down arrows, so that they appear in a different order in the list. The procedure you use to add, remove, and rearrange master columns works for detail columns as well.
However, in addition to choosing which columns should appear in the detail region, you can also specify the HTML tag that Spry applies to the data. In addition, it attaches an external style sheet— Spry-MasterDetail. The program puts each item in the master list in a div and applies the class. MasterColumn to it. If you want to change the look of each of those boxes for example, add a top border line to separate each item in the list , edit the descendent selector style.
Likewise, Dreamweaver creates the detail region using a single div with the class. DetailContainer , while it applies a different HTML tag to each piece of data in the detail region see step 3 , and then applies the class.
DetailColumn to each of them. You could just as easily build this table yourself without imposing all the download overhead—in the form of the data and Spry files required—on your visitors. In addition, it attaches an external style sheet— SpryStackedContainers. The style sheet comes with just three styles, and they control the formatting for the overall div container a class style named.
RowContainer and a class style applied to the tag wrapped around each column of information a descendent selector style named. Since variety is the spice of life, Dreamweaver includes yet a fourth way to lay out your Spry data. The Insert Spotlight Area window opens. This window has two sections, one that lets you specify which column s should appear in the spotlight on the left and which should appear in the stacked column of data on the right.
Remove, rearrange, and assign HTML tags to columns. Since the spotlight area is small and tall, a column that contains paths to image files is a good bet here, and you want only one or two columns of data. You should display the longer, more detailed data on the right, in the stacked column region. In addition, it attaches an external style sheet— SprySpotlightColumn.
Developer tutorials. CS6 — Spry Data Sets. Note You can also put images in table cells; use the same procedure you would for inserting an image into a web page Adding Images. Note You can also use an XML file as a data source.
From the menu to the right, choose Ascending if you want the data sorted from A to Z or 1 to ; choose Descending to put the data in the opposite order: Z—A or —1 Use first row as header. Click the Set Up button. The Insert Table window opens see Figure The Insert Stacked Containers window opens. Remove and rearrange columns. You can recall any of these workspaces by using either of the ways described in the previous list or by selecting a workspace from the application bar, which appears at the top of your screen, as shown in Figure Figure The Work-space selector on the application toolbar allows you easy access to your saved workspaces.
Sites are quite important to maintain the links and consistency and the general organization of your web pages. See Chapter 3 of this minibook for more on creating sites. Some good news is that the process of creating a new site has been simplified in Dreamweaver CS6. This dialog box walks you through the steps to create a new site. In this chapter, you breeze through the steps, but you can find more details about them in Chapter 3 of this minibook.
The Local Site Folder field shows you where the new site folder will be created. If you want to change it, you can click the Folder icon to select an existing folder. For now, leave the default folder path and click Save. This contextual panel, shown in Figure , displays text attributes when text is selected or image attributes when images are selected, and so on.
Figure : The Property inspector as it will appear with text selected top and an image selected bottom. To see this panel in action, you need to create a new page with some elements on it. You may not have any of your own pages yet, so you can use one of the CSS Starter pages that loaded with your Dreamweaver CS6 installation, and follow these steps:.
The location is routed automatically to the site folder you created. With your new page open in the Document window, click to select various elements, such as text, a table, or a hyperlink linked text. With each selection, the Property inspector changes to provide you with specific information about that element.
Refer to Figure The Property inspector is analogous to the Option bar, which appears at the top of the Illustrator, InDesign, and Photoshop workspaces and the Property inspector in Flash. The Dreamweaver CS6 Live view displays your page as you would see it in a browser. With a page open in the Document window, click the Live View button on the Document toolbar.
To see the resulting source code of your page, click the Live Code button that appears next to the Live View button. Adobe Dreamweaver CS6 : classroom in a book. Physical description 1 online resource xvi, pages : illustrations.
Series Classroom in a book. Online Available online. Safari Books Online Full view. Report a connection problem. More options. Find it at other libraries via WorldCat Limited preview. Contributor Adobe Systems. Contents Getting Started Chapter 1. Customizing Your Workspace Touring the workspace Switching and splitting views Working with panels Selecting a workspace layout Adjusting toolbars Personalizing preferences Creating custom keyboard shortcuts Using the Property inspector Chapter 2.
0コメント