Create new files - Dreamweaver Tutorial

- [Instructor] Once you've created a site, it's time to create some new files. Dreamweaver offers a variety of ways to do so. One option is to select Quick Start in the Start screen. This offers you the choice of the most commonly used documents, HTML, CSS, JavaScript and so on. Just click the appropriate icon and Dreamweaver creates a blank file, so let's create an HTML document. Live view is blank but in the underlying code Dreamweaver has inserted the necessary HTML skeleton that is required in every web page. Once you start adding content, it'll go between the body tags in the underlying HTML. To save the page, go to the File menu and select Save or use the keyboard shortcut, control S on Windows, command S on a Mac. In dialog boxes like this that navigate the file system, it's always a good idea to check that you've selected a site route. This makes sure that you're working in the current site. So, we're going to need to give this a name. We'll call it page1. There's no need to add the HTML on the end, Dreamweaver will add that automatically so just click Save and that now appears in the files panel for this site. Once there's at least one file open in the document window, the start screen and quick start are no longer visible, so the other quick way to create a default file is to use the context menu in the files panel. Select the folder where you want to create the file, I'm going to create it in the root, right click and select new file. Dreamweaver highlights the file name ready for editing, so change it to page2 and then press enter or return to confirm that edit. The type of file and the file name extension are determined by the settings in the new document category of preferences which we looked at in chapter one. The file doesn't open automatically but if you double click its name, it opens in the document window and you can see that the content is exactly the same as the file that we created before using quick start. For much greater choice and control over the file created, go to the File menu and select New. Alternatively, use the keyboard shortcuts, control N on Windows, command N on a mac and that opens the new document dialog box which has many more options. The column on the left has three options. New Document creates a basic document. Starter Templates offers a choice of 16 prebuilt page layouts. We'll look at those in the next video. And Site Templates lists templates that you created yourself. We won't be covering Dreamweaver's templating features in this course. Some people find them useful but personally, I think that they're rather outdated, so let's take a more detailed look at the options under New Document. The middle column, document type, lists the most commonly used files in web design beginning with HTML. The next four document types offer styling web pages. CSS is a standard style sheet. LESS, SCSS and SASS are for CSS pre-processors. This version of Dreamweaver not only supports writing LESS and SASS, it now automatically compiles pre-processor code. To learn more about working with CSS pre-processors in Dreamweaver, check out my course, Dreamweaver CC 2017, New Features. You can also create JavaScript and JSON files. The next option, PHP. That's the most widely used server-side technology for building dynamic websites. Dreamweaver actually has got excellent support for PHP syntax checking and contents. We won't be covering them in this course but I have created a lot of PHP courses for the online training library and you might like to check them out if you are interested in exploring dynamic web development. Dreamweaver also has support for XML and SVG, scalable vector graphics. When HTML is selected as the document type, the section on the right of the new document dialog box has two tabs for framework, none and Bootstrap. Bootstrap is the most popular HTML, CSS and JavaScript framework for building responsive websites. At the time of recording this video, the current version of Bootstrap is BootStrap 3. My course, Responsive Design with Bootstrap and Dreamweaver CC 2015 is still valid for using Bootstrap 3 in this version of Dreamweaver. Bootstrap 4 is at an advanced stage of development and when it's released, Adobe plans to update Dreamweaver and I'll create a separate course to cover its use. So, to create a plain HTML page, select none under framework. The first field is title. The value that you enter here will appear in the browser's title bar or tab. It'll also be used by search engines, so it's a good idea to give your page a short, meaningful title and you can always change it later, so just click in there and let's add London Hotel, Welcome. The next option, doc type, specifies the variety of HTML that you'll be using. HTML5 has been the official standard since 2014 and it's backwards compatible even with the most ancient of browsers, so there should be no need to change this unless your project calls for one of the older standards, so let's just take a little look at what is available in here. We've got HTML5, 4.01 Transitional, Strict, then XHTML 1.0 Transitional and Strict, XHTML 1.1 and XHTML Mobile 1.0. Most of these are not used very much these days. The one that you'll want will be HTML5 unless you've got a specific reason for going for one of the other doc types. Attach CSS is useful if you're adding new pages to a site where you've already defined one or more style sheets. If you click this link icon on the right, it launches a dialog box where you can select the style sheets that you want attach and the values in here are sticky, so the same style sheets will be attached to all new documents. When you no longer need to attach them, just select them in this attach CSS box here and then click the trashcan icon to remove them from the list. And right down at the bottom is this checkbox, use extract to build your page from Photoshop comps. If you select this, Dreamweaver will launch the Extract panel at the same time as creating the new file. I won't be covering the Extract panel in this course but you can learn about it in Designing Websites from Photoshop to Dreamweaver with Sue Jenkins. So, when you're happy with all of the changes that you've made, just click Create. And this has created a blank HTML file just like before. The difference is that on line five, the title element has now got the correct title instead of untitled document. Forgetting to change the default title of a web page is one of the most common beginner mistakes with Dreamweaver, so let's just quickly save that and we'll call it index.html. We don't need to put that .html in. Dreamweaver will do it automatically for us. So, you got a range of choices when it comes to creating a new file. If the start screen is visible, you can use quick start to create the most commonly used files, including HTML, CSS and JavaScript. To create a default document, select a folder in the files panel, right click and select New File from the context menu or for the widest choice, open the New Document dialog box from the File menu or by using the keyboard shortcut control N on Windows, command N on a Mac.