Join David Powers for an in-depth discussion in this video Create new files, part of Dreamweaver CC Essential Training.
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.
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.
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.
- The Dreamweaver interface
- Managing workspaces
- Changing preferences
- Managing projects
- Defining a new site
- Creating new documents
- Editing in Live view
- Reusing code snippets
- Structuring documents
- Creating links
- Managing CSS
- Working with images, videos, and tables
- Site management