Many web developers use Dreamweaver to design their websites. With the growing popularity of HTML5, web designers are now beginning to create cutting-edge Web pages with cool designs with the latest version of HTML. Anyone fluent in HTML5 and CSS3 can write the code and style using any text editor or web design tool to implement the new features created by HTML5 and CSS 3. Despite the version of Dreamweaver, you can switch to the code view in Dreamweaver to implement the latest HTML code, create HTML5 pages and major modern web browsers should be able to support your HTML5 websites and pages.
Since CS5.5 Dreamweaver added new HTML5 features. If you use Dreamweaver CS 5.5, you’ll find two new HTML5 Layouts, complete with CSS style rules. Earlier versions of Dreamweaver before CS5.5 don’t include these HTML5 layouts.
In this guide, we will look into the new HTML5 feature in Dreamweaver CS 5 and later. HTML5 and Dreamweaver beginners can learn how to create simple HTML5 pages with Dreamweaver from this quick tutorial.
How to Make a Simple HTML5 Website and Create HTML5 Page with Dreamweaver?
You will firstly set up a new HTML5 site in Dreamweaver, then create HTML5 pages to enrich your website. Check out details below.
Set up your first HTML5 site in Dreamweaver
Add a new HTML5 website to Dreamweaver from Dreamweaver top menu bar click Site , select New Site from the drop down menu. You will get a pop up dialogue where you can give your HTML5 website a name and specify a folder to store your HTML5 pages for the site. Now you can start working on your new HTML5 site in Dreamweaver.
Create HTML5 Pages in Dreamweaver
Dreamweaver CS5.5 is the first version of this website design program to support HTML5. Although in this version, Dreamweaver has only two HTML5 layouts, they’re a great place to start for HTML5 beginners.
The built-in HTML5 page templates in Dreamweaver are flexible and customizable. With some HTML5 knowledge you can easily change the layout in Dreamweaver.
To create HTML5 pages in Dreamweaver using the HTML5 templates, go to File >> New. The New Document windows appears, choose Blank Page, select HTML under the Page Type column, choose one of the HTML5 layouts from the Layout column. One HTML5 layout has three columns with fixed header, the other HTML5 layout has two columns with fixed right header. Choose the one you like. See below figure:
Set DocType for the new HTML5 Page
The last step to create HTML5 page in Dreamweaver is to set the doctype. Whether you are using HTML5 template or not, you have to manually set the doctype to HTML5, otherwise it till continue to the default. Click Create button, your first HTML5 page created in Dreamweaver. To verify it, open the page in Dreamweaver, switch to code mode to view the code source, you’ll see the doctype at the top of the code which identifies it is an HTML5 document.
Publish HTML5 Sites online
Once your new sites with HTML5 pages created, you need to register a domain for your website, see Best 10 tips to choose a good domain name. Then find a web host and upload your HTML5 pages to the web server.
