From the course: Dreamweaver CC Essential Training

Initial setup and the Start screen - Dreamweaver Tutorial

From the course: Dreamweaver CC Essential Training

Start my 1-month free trial

Initial setup and the Start screen

“

- [Instructor] The first time you launch Adobe Dreamweaver CC 2017, you're greeted by this setup screen, which asks whether you've used Dreamweaver previously. Both of these options take you through the same basic steps, but if you've already installed an earlier version of Dreamweaver on the same computer, selecting "yes, I have" will get you up and running more quickly, because it imports all your existing site definitions. However, let's assume this is your first encounter with Dreamweaver and click "no, I'm new." First, you're asked to choose your default workspace. There are just two options. The Developer Workspace is a really stripped down version of Dreamweaver, designed for hardcore code addicts. For this course, you want to choose the Standard Workspace. This gives you access to all of Dreamweaver's visual tools, including Live View, the CSS Designer, the DOM Panel, and so on. So, select the Standard Workspace and you're then asked to choose a color theme. You've got a choice of two dark themes and two lighter themes. The default is this medium gray. If you're not sure which to choose, just click any of these buttons and you can explore the other options later. Now, if you chose "no, I'm new", like I did, this final screen gives you three options, "start with a sample file", "with a new or existing folder", or "by watching a tutorial." This last option launches a short video that gives you an overview of Dreamweaver's capabilities. Now, I recommend that you choose this second option to "start with a new or existing folder", because it automatically defines the Dreamweaver site for you. And I'll show you how to access the video tutorial later. So, I'm gonna click that. That launches the Select Folder dialog box. I'm going to go to my Desktop and select the Exercise Files and then click Select Folder. Dreamweaver updates the site cache and it creates a site based on that folder. If you've used Dreamweaver before or on a different computer, you'll be presented with this Sync Settings dialog box. It asks what you want to do about Dreamweaver preferences that have been stored in the Creative Cloud. You can either import your preferences by clicking Download Sync Settings or you can upload your settings from this computer. If you're not sure what to do, click Advanced. This opens the Sync Settings category of the Preferences panel. If you click this Help button, it'll launch the online help page that goes into great detail about what's synchronized. Synchronizing settings can be really useful if you work on two different computers running on the same operating system. It's not quite so useful if one machine is a Mac and the other runs on Windows, because the different file systems and keyboard shortcuts mean that most settings can't be replicated. My other computer is a Mac, so I'm going to deselect these five checkboxes, and I suggest that you do the same. And you can come back later to this section of the Preferences panel when you've decided how you want to handle synchronizing settings with the Creative Cloud. Then click Apply and Close. At the top right of the screen is the Files panel. This lists all the files and folders in the folder that you selected earlier. We'll look at the role of the Files panel and of all other panels in detail later. The main part of the window is dominated by the Quick Start screen. This offers a quick way to create one of the main types of documents supported by Dreamweaver. HTML Document, CSS Document, JS Document, you can also use it to setup a new site. Let's take a look at the other options in this menu here. We select Recent Files, this is where your recent files will appear. The first time that you launch Dreamweaver, there are no recent files to display, but, by default, this screen shows you the 10 files you've opened most recently with details of when they were last opened, how big they were, and what type. Clicking either Start New or this New button here opens the New Document dialog box, and we'll examine that in chapter three. Clicking Open opens the Select File dialog box based on your own operating system. The second item in this menu, CC Files, displays a list of assets that you've uploaded to Creative Cloud files. You'll have a different list from me, or none at all, depending on whether you've stored anything in the Creative Cloud. Now, don't confuse this with Creative Cloud libraries. The contents of CC libraries are displayed in a dedicated panel and they're separate from the Creative Cloud files. This list contains only files that can be opened natively and edited in Dreamweaver. So, my list includes XML, JS, CSS, HTML files, and, down here, an SVG file, but not any other images or PDF files. Any changes that you make to a file listed here will be automatically updated in the Cloud and will be available to everyone you've shared the file with. This is mainly of use to developers working in a team environment. If you're a beginner, I suggest that you avoid editing files from this list until you understand how to synchronize files stored in the Creative Cloud with the local versions in a Dreamweaver site. The other option here, Starter Templates, this contains a collection of predefined layouts that you can use to start a new webpage or project. There are three basic layouts, then there are several layouts based on Bootstrap 3, the popular responsive framework, four for email newsletters, and, finally, three responsive layouts. Even the basic layouts use media queries, so responsive design is very much at the forefront in this version of Dreamweaver. At the top of the start screen, there are three icons. This first icon, if you click that, it tells you how to hide the start screen if you don't want to use it. We'll look at changing Dreamweaver preferences later in this chapter. Clicking the question mark launches the Dreamweaver learn section of the Adobe website in your default browser. This last icon is a shortcut to manage your account online. For security purposes, you'll be prompted to enter the password associated with your Adobe ID. One last thing, I'd promised to show you how to access the video tutorial. You can launch it at any time here from the Help menu. Just go to Quick Tutorial and there are two options there, one for Developer Workspace and the other for Standard Workspace. Both videos are just over two minutes long, so they offer just a quick taster of what Dreamweaver is capable of. For the real lowdown, keep watching this course.

Contents