In Web design
Dreamweaver - Tutorial for Beginners in 12 MINUTES! [ 2021 Updated ] - read the full article about web design 2021, Web design and from Skills Factory on Qualified.One
Youtube Blogger
Dear all, welcome to this video dedicated to Adobe Dreamweaver 2021! In just 12 minutes we will see everything you need to know to start using it from a beginner level! Dreamweaver is one of the most famous editors for web development since 1997 and is part of the Adobe Creative Cloud bundle under a subscription plan. It is perfect for all users that work with web codes such as HTML, PHP, XML and more, with the possibility to build your code quickly and easily with a live preview of your results. In this video we will present the main features of Dreamweaver, assuming a basic knowledge on the HTML code.
When you open Dreamweaver you get several options to start coding. From Quick Start you get several ready templates to use including Bootstrap, HTML, CSS, Javascript (JS), PHP and XML but you may need to set your website first with Site Setup.
Dreamweaver works with a local folder, used to store and work with your files and a remote server that is used to store and show your website pages online. Define a name for your website page, its local folder to use and switch to Servers to connect with the remote server or FTP you use to host.
Specify server name, protocol type, FTP or IP server address and port number. Then include your username and password to connect and apply with Save.
At this point you can start coding. You can go to Starter Template to find several ready documents you can start from such as multi-column documents, simple grids, Bootstrap or email templates and also Responsive models that adapt to smartphone and tablet screens. For example with Email - Basic you get a ready HTML code and CSS file you can customize as you like, without starting from zero. Whereas with Bootstrap - Product you get a ready website page to present or sell any product with ready HTML document, CSS file and Javascript all connected together. You can insert your own image by specifying its complete path on the src attribute or start editing any heading directly.
To see how to use Dreamweaver lets just start from a new HTML document.
This shows up under Split view, showing both a live graphic representation on top and your HTML code at the bottom. You can also shift to Code view to expand the code or to Live view to show just the live preview.
Now lets see how to build your HTML code with Dreamweaver. You can code on your own or use the Insert panel on the right to add several HTML tags with ready format. For example you can insert any title with Heading, selecting the correct format from the list. This tag will be placed exactly where your cursor is placed on the code and appears in real time on the live preview.
You can also adjust the header distribution and properties by typing directly with the options suggested by Dreamweaver, very useful to avoid errors on punctuation or get immediately the attributes that can be applied at the moment. Make sure to add indentation with the Tab key.
Add a Paragraph tag to add a text paragraph or the List tags to include an ordered or unordered list, using List Item to add elements to it. You can also copy and paste code lines with CTRL (or CMD) and C or V respectively.
You can also edit and manage these tags directly on the live preview, selecting the tag and changing its general attributes, for example text format, style or any link. These changes are also implemented in the code and are always referred to the selected tag only. You can also adjust the properties of groups of tags through the whole Body tag.
To add any picture you can use the Image tag and browse for the image. The code will import the image through its local folder path with its original width and height size. Whereas if you want to add an image that includes captions you have to add a Figure tag. Inside Figure you import the picture with the Image tag and on figcaption you include any description for it.
In addition you can add any table with the Table tag defining rows, total width, border style and headers. The HTML code will be generated according to these options, showing a tr tag for each table row and a td tag for each table column, so each cell. By default each table cell includes , indicating a vacant hard space that you can remove to type in or insert any other HTML tag. Within the scope attribute you type with the format of the table header, in this case a simple central alignment.
To add any link click on Hyperlink and define the text and the link address to use. This way you can import any link toward other HTML documents you have, such as secondary web pages to browse.
To get a complete preview of your HTML document you can go to File, Real Time Preview and select the browser you want to use including Firefox, Chrome, Explor and Edge. This is very useful to check if your page and your hyperlinks are working fine.
Under the Insert panel you also find the div tag, used to group multiple HTML elements together. Just make sure to select all the interested elements first.
Whenever you need any help or refresh you can right-click on any tag and go to Quick Docs to get a simple and complete description about it and its function.
To improve your code visibility you can compress or expand any tag content with the arrows on the left side.
Dreamweaver also includes ready-made codes under the Snippets panel on the right, including codes to add a simple navigation menu and more.
Now lets see how to create and manage the style of your web page with the Cascading Style Sheets, or CSS.
When working with any HTML document select any element from the live preview and click on its plus button. You can associate any CSS selector to such element, either a Class or an ID preceded by an hashtag. Then go to Create a new CSS file defining name and location within your local path.
This new CSS file will be included within the Head tag and listed under the CSS Designer panel under Sources, complete with the full list of selectors you have defined so far, in this case the ID just assigned to the div tag.
Under Properties you find all the options you can apply to the current CSS selector. If this selector is applied to tags including textual content you can search for the Text section to adjust text color, font family, style, distribution and so on. This new style is indeed applied to all the tags that are associated to the current #div1 selector, in this case the whole div tag we have. You can find all these new properties applied directly on the CSS file associated.
Remember to save your documents often, in order not to lose efforts.
On Dreamweaver you can also apply Class selectors in order to apply your custom styles on multiple HTML tags. For example you can define a .left Class selector directly on the CSS to align several tags to the left side of the HTML page. You can apply this Class selector on tags directly on the HTML code if you prefer coding.
Whereas if you want to include a CSS file on your own just place the cursor within the Head tag, right-click and go to Attach Style Sheet. Make sure to use the correct CSS selector names defined by this new CSS file.
You can go to File, Page Properties... to set several options for your whole HTML page such as text font, text color and background color, encoding type, HTML version and so on.
Once your documents and files are ready you can upload or update these on your remote server online. On the Files panel you get your local folders with all the single files and documents inside. You can use the first button on top to establish connection with your remote server or FTP address specified at the beginning of this video. Then use the upload or the sync button to either upload and overwrite your documents online or synchronize the local and remote server to get the latest versions of these files. Always check if there is any error by looking at the second button at the bottom.
Once these files are uploaded on your server these get ready online, as you can check with any browser.
Thank you very much for watching this guide! Make sure to visit our YouTube channel to get more quick and free guides and develop your new skills!
Skills Factory: Dreamweaver - Tutorial for Beginners in 12 MINUTES! [ 2021 Updated ] - Web design