Then, click Create and save the file (e.g., index.html) to the root directory in the site.įigure 3. Change these settings if necessary, or keep as is. You can review the default settings for the number of columns for the grid layout and the screen sizes that will define the media queries for the page. Since this is the first page in the new website, I selected to create a new Bootstrap CSS file that was created with the settings from the Customize section. I selected File > New > New Document > HTML and clicked the Bootstrap tab. Create a new web page based on a grid layoutįirst, I needed to create an index.html page and add it to my existing site (Be sure to set up a Dreamweaver site – follow this tutorial to see how, and why, to use sites in Dreamweaver). The hope is that the resulting web page will have cleaner code than the original site and will be more pure in terms of responsive web design best practices. However, I decided to start from the ground up and rebuild it from scratch. Initially, I set out to make the existing website responsive – here’s a staged version of the original site. (Click to enlarge) Home page – Before (non-responsive) and After (responsive) Create from scratch vs. The following image shows the before and after version of the site with the browser window resized to show the difference between the original, non-responsive home page and the newly redesigned, responsive home page.įigure 2. Eventually, I will likely add some finesse to the typography and color scheme, but I am not a designer, so I will focus on getting the responsive layout and structure in place first.įigure 1. (Click to enlarge image) Home page – Before and After
The following image shows a before and after of the home page (or, click the staged before and after version). The home page has a unique layout from the rest of the pages in the site, so I decided I would re-create that first.
New document dialog with Bootstrap configuration settings.The responsive features enable you to create a responsive website from scratch, or make an existing website responsive. I am using the latest responsive web design features in Dreamweaver (available – update or start a free trial today!).
The first installment will be a multi-part series in which I describe how I re-designed the home page. This will be one in a series of posts in which I document my progress in updating a client’s website to be responsive. JNo Comment Re-create a static home page to make it responsive Create a responsive website in Dreamweaver CC – Part 1
0 kommentar(er)
