Of course, you can do all your design within Dreamweaver if you prefer; the main lessons in this tutorial will work either way. Before you do anything else, save the file into your main site folder. This helps ensure that all of your links and image paths will be set properly. The words in your title deserve special attention because many search engines give the title text extra weight when ranking a site. You can set the background color in the Appearance Category of the Page Properties dialog.
After you finish your design, delete the image name in the Tracing Image dialog to remove it. Now place your cursor anywhere on your page and click-and-drag to create the layer. To move a layer, click to select the layer, and then click on the box at the top-left corner and drag.
To adjust the size of a layer, click-and-drag on any of the adjustment points on the corners or sides. You can also specify the height and width of a layer in the Properties inspector. STEP 7 Add Text, Images, and More You can insert anything into a layer that you can insert into a webpage, including images, text, multimedia, and even tables.
To insert text, simply click to insert your cursor inside the layer and start typing. Placing layers inside tables can lead to misaligned elements. Click to select a layer and then enter pixel values in the L Left and T Top positioning fields in the Properties inspector to specify the number of pixels the layer will be from the top and left edge of the browser window.
You can also use the W and H settings to specify a precise Height and Width of the layer. Same with CSS Preprocessors, which is only important when you use that kind of thing. What is important to us is Local Info under Advanced Settings.
Be sure to click on the folder icon on the right where it says Default Images folder. Then, go to your newly created site directory, open it, create a new folder called images and select that as your default folder.
That way, Dreamweaver will save images associated with your site automatically there. We will start with the homepage. You can either create a completely new file or use an existing template.
The program comes with a few of those see Starter Templates. Right now, we will create a new one instead. HTML is set by default and you can leave that as is. For document title, input index. This will get you on the following screen. This is hat we mentioned in the beginning: You will also notice that Dreamweaver has automatically created some basic HTML markup that you can build on.
Create a Header To insert an element into the page, you first need to choose its location. After that, you need to go to the Insert tab in the upper right corner. This gives you a list of common HTML and site elements that you can add to your page. Scroll down until you can see Header as an option. A simple click inserts it into the page. You also see it appear inside the HTML document.
Simple, right? Now you will change the text inside the header and also turn it into a heading. After that, go back to Insert, click on the arrow next to Heading and choose H1. For more information on heading tags, read this article. After that, you can also type in a title for your page. In your real website, you would choose something descriptive with keywords and not just Welcome to My Test Website as in the example.
Alright, you have just created a page header! It allows you to define colors, dimensions of elements, font types and sizes and a hell lot more. We want to use the markup to spruce up our page title and also learn how to change CSS in Dreamweaver.
The first step is to give your new header a CSS class or id. During that process, Dreamweaver will also prompt you to create a style sheet file. Go to the DOM menu in the lower right part of the screen that lists your entire site structure.
Make sure your header is selected. In the live view, you will now see it marked in blue with a little label and a plus sign at the bottom. Click the plus sign and type in header in the field that opens. The hashtag means you are assigning an id as opposed to a class. Press enter. Then type style. When you now select Ok, a new file will appear at the top of your live view.
You can view and edit it from there. Awesome possum! For that, you first need to create a new CSS selector. A selector is the name of an element on our page that you can assign properties to, e. Mark your H1 heading in the DOM view on the lower right like you did with the header before. Then, above that, choose CSS Designer.
To create a CSS selector, click on the line where it says Selectors and then click on the plus symbol. This should automatically propose a selector to you named header h1. Hit enter to create it. Quick note: That way, whatever you input as CSS is only applied to the written text only and not the header element overall. Change the Headline Font Now that you have a selector, you can assign properties to it. If you know your way around CSS, you can simply type markup into style. For the less experienced users, Dreamweaver also makes it really easy.
When you do, it will unlock a lot of additional options. With the new buttons, you can choose many CSS properties from the areas of layout, text, border, and background. To change the font type, click on the Text option at the top alternatively, scroll down.
In the upcoming options, hover over font-family and click on default font. This will give you a number of options for common fonts including their fallbacks in case the user browser is unable to show the primary font. Either search for a font by name or use the many filter options on the left to narrow down your choices until you find something.
A click on any of the typefaces marks it for inclusion in Dreamweaver. Once you have done so, you can either use them directly or go to Custom Font Stacks to define your own fallback fonts. For now, simply hit Done and then click on default fonts again. If you click on your style. The next task is to center it and increase the font size. For that, you can also use another feature called Quick Edit. To use it, go to the code view and right-click the part you want to edit.
Here, choose Quick Edit at the top. This will open the CSS associated with this element below it. Now you can input additional properties without having to search the entire style sheet file which can be very long.
In order to center the text and make it larger, add the following code to it. When you are done, it will look like this: Note that the text has already changed in the live view. You will find that the new CSS has been added in the appropriate place. Pretty cool, right? Dreamweaver will then give you an explanation. Add More Content With what you have learned so far, you can now build a rudimentary site. For the sake of this Dreamweaver tutorial, we have done the following: Code for the Example: Since this is a bit advanced and not everybody will know how to do it, you can find the HTML and CSS below so you can reconstruct it for yourself.
First the HTML: We recommend that you do not modify it. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl. F5F5F5; margin-top: EBF; color: Even if it seems complicated, we put this together the same way we showed you before.
Preview in Browser and on Mobile Device How did we do all of this? Therefore, we already have the steps in my mind on how to create a proper web page. Browser preview. Dreamweaver allows you to view your web pages in real-time in a browser and even on mobile devices. To get started, click the real-time preview button in the lower right corner. This will open the preview options. A click on one of the browser names will open your website project in it.
You can also scan the QR code with your phone or tablet for example with Firefox Quantum or type the displayed address into your browser to start the live preview on your device. Just be aware, that you need to input your Adobe ID and password for that. You should have that from signing up for Dreamweaver. Any changes you make in Dreamweaver will automatically show up in the browser at the same time you make them.
How did this help me put together the site faster? First of all, depending on the size of your screen, the display in the browser might be closer to the original than what you see in Dreamweaver.