Alright, you have just created a page header! In case you are not familiar with it, CSS is the part that provides all the styling on a web page. It allows you to define colours, 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 open. The hashtag means you are assigning an id as opposed to a class. 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. The first thing you want to do is to change the font of your heading and also centre it. 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 S electors and then click on the plus symbol. This should automatically propose a selector to you named header h1. That way, whatever you input as CSS is only applied to the written text only and not the header element overall. 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 text could still look better. 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 centre the text and make it larger, add the following code to it. When typing, Dreamweaver will also make proposals for what you are trying to input, making it even easier. Note that the text has already changed in the live view.
Now, press Esc to leave quick edit and head over to the style sheet. You will find that the new CSS has been added in the appropriate place. Dreamweaver will then give you an explanation. With what you have learned so far, you can now build a rudimentary site. For the sake of this Dreamweaver tutorial, I have done the following:. Since this is a bit advanced and not everybody will know how to do it, you can find the the HTML and CSS below so you can reconstruct it for yourself. I want to use this as an example to show you the next steps. Even if it seems complicated, I put this together the same way I showed you before.
How did I do all of this? Well, first of all, I am a bit more experience at building websites than you probably are. Therefore, I already have the steps in my mind on how to create a proper web page. Secondly, I am using a very useful feature that helps me speed up the process: Dreamweaver allows you to view your web pages in real time in a browser and even on mobile devices.
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 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.
They are very similar to what you see in Dreamweaver. They are more familiar to me so I can work faster with them and just copy and paste the code into my style sheet. In order to make your website work on all devices, you need to add a so-called media queries.
These are conditional CSS statements that tell browsers to apply styling only above or below certain screens sizes or on particular devices. That way, you can change the layout on smaller screens. So far, you have only defined global styles. That means the styles that are applied to the entire site.
Now you will learn how to add conditional styles for smaller screens. First, go to CSS Designer. Make sure that the file you want to add code to is selected under Sources. Hit the plus sign under media. You can define conditions for media queries e. You can also add multiple conditions with the plus sign.
With that, you are able to define custom CSS that will only apply to a certain max screen size. When you do, you can see the CSS code at the bottom. This visually represents the media query. Click it and the screen automatically jumps to that size. To correct the design for mobile, the first thing we need to do is eliminating the code that makes the two elements on the site arrange themselves next to one another. You can do this the same way you manipulated CSS before, only this time you have a media query activated while you do so.
First of all — navigate to the element in your DOM view. From there create a new CSS selector for it. In the same way, you can change the CSS of all other elements on the page to make them all look right. You can use the same method to adjust the layout to tablets and other sizes. You can also create media queries a little more easily by using the pre-set device sizes in the bottom corner and clicking on the plus symbol on top when you have found a point where you want to add one. Once you are done with the design part, you are pretty much ready to upload the site to your server.
As mentioned at the very beginning, Dreamweaver also makes this very easy. Select your current website from the menu and choose Edit at the bottom left. In the following window, click on Servers. Input all important data to connect to your FTP server.
The name is up to you, the rest FTP address, username, password comes from your hosting provider. The last part is important so that Dreamweaver can create site-relative internal links.
Under Advanced you have some more options whether to upload files automatically upon save. You can usually keep things as they are. Hit Save twice and you are done. Once the connection is established, select the files you want to upload and click the upward-pointing arrow to do so. Once its done, your site should be available from your web address. Dreamweaver is a fantastic program to build websites. It combines an intuitive user interface with a full-fledged code editor.
Through this mix, it makes it easy for beginners, intermediates and advanced users alike to build high-quality websites. In this Dreamweaver tutorial for beginners, we have introduced you to Dreamweaver and its capabilities. We have shown you how to set up the program and get started with your first site. We also went over how to make a website mobile responsive and upload it onto your server.
By now you have a solid understanding of how Dreamweaver works and how you can use it to make a website. Dreamweaver is just one way to make a website. There are many more and you can find a lot of information on that right here. Have you used Dreamweaver before? What is your opinion? Anything to add to the above? Let us know in the comments section below! Your email address will not be published. Thank you a lot, Nick, for this very good introdution! Since Muse is ending, I will dive into DW now.
Hey Martin, happy to help! I hope you will be satisfied with Dreamweaver. Come back later to tell us how it went. Adam, thanks for the input. Setup to site up in fewer steps.
Dynamic display on every device. See what new can do. Dreamweaver is always getting better, with new features rolling out regularly. And with your Creative Cloud membership, you get them as soon as we release them. Here are some of the latest updates. Multi-monitor support for Windows. Now you can expand your workspace by displaying your pages on multiple monitors. HiDPI support for Windows. Get better scaling and display for fonts, icons, dialog boxes, and menus with monitors optimized for HiDPI.
A streamlined and clutter-free interface lets you customize your workspace to only show the tools you need to code. Collaboration is easy with Git support.