From Launch to Live: Using Adobe Dreamweaver CC to Build Your First Website

1. Introduction: hi and welcome to From Launched Alive. I'm Jason More. Over the next 45 minutes or so, we're going to explore Adobe Dreamweaver CC and learn some of the essential tools needed to build your very first website. In order to fall along with this course, you're gonna need the latest version of Adobe Dreamweaver CC and while not required, will be helpful if you have access to a Web server. That way you can learn how to upload your files to the Internet. Several sample starter files will be available for download so that you can work along with me as we build our sites together. So when you're ready, let's get started. 2. Web Basics: before we get too far into Dreamweaver and building a website. Let's take a look at some of the basic Web terminology in the overall process for creating a website so that we're all on the same page. Being the experienced consumers of the Web that you are, I'm sure that many of these terms are at least somewhat familiar to you, even if you're not sure of the exact meanings. A Web browser is the software program you used to view anything on the Internet. A browser takes the website code and translates it into something you can actually see and interact with in a meaningful way. Rather than seeing the code behind the page. A domain is essentially the name of the website. It's what you type in to get to where you want to be online. The exact location of where you are is called the Web address or you are L. When you look at the U. R L. In the address bar in your Web browser, you can get a sense of the organizational structure of a site. You will see the domain, the current branch of the overall site folder structure and the page you're currently on. As you pay more and more attention to you RL's it will help you develop a process of your own for organizing your sights files. In order to have a website viewable on the Internet, it needs to live somewhere. A Web server is a physical computer, generally owned and operated by a hosting company like Media Temple, Host, Gator Site Ground and many more. The Web server is always connected to the Internet, so your site will always be available to the world. In this course, we will be talking quite a bit about. Working with the code code is basically the language of the website, just like learning a foreign language. The code for website has its own structures and syntax, its own vocabulary and punctuation. There are several programming languages out there, including but not limited to HTML, which is the most basic language used when developing a website, and one will dive into shortly. PHP and SQL are used for creating dynamic, database driven sites. JavaScript is used for Mawr Interactive Web effect and CSS, which we will be discussing later on. I know it can be exciting for some and intimidating for others. But everything we talk about in this course will be on a very basic level to help make sure everyone can understand. Once you've done all the work you need to do locally on your computer, the next step is to push it out to your Web server for the world to see. This step goes by many names publishing, making it live or even launching a site. But whatever the term, this part of the process means you're taking all of your site files and uploading them to your Web host so that it will be universally accessible from any Web browser. There are many more terms and processes that could feel way more time than this course covers, but hopefully this has gotten us moving in the right direction. For more information about virtually any Web term you can think of, visit www dot w three schools dot com for definitions, examples and tutorials. Now let's head over to Dreamweaver 3. Dreamweaver Tour: when you launch Dreamweaver for the first time, it could be a pretty intimidating thing. So for the next few minutes, we're gonna take a look around and become a little more familiar with workspace and walk through the process for setting up your site. When you first open Dreamweaver, you're presented with start screen, which provides you with the options to create a file, open an existing project or start with one of dream weavers built in templates. For the purposes of this tour of the program, let's create a blank page click on Create new and select new documents of a document type HTML and for the framework, select none and then click create. When the new page opens, you will be presented with two Windows that both represent the same page. One will be your code view, and the other will be other live or design view. As their name suggests. The code view shows you all of the underlying code for the page, while the live or design view offer previews of your page as it would look when rendered in a Web browser with all the styling and formatting that supplied once you have your page created, it's time to insert some content. If it's not open already, click on the insert tab in the panel group on the right. If it's not visible, click on window insert. This will open the insert panel or bring it to the front of the panel group. This panel contains a list of virtually every tag or element available to create your page , so let's add some content in code view. Place your cursor at the end of the opening body tag and press enter or return to create a new line. Let's add a headline by clicking on heading in the insert panel and dreamweaver automatically insert an H one tag in the code, along with some placeholder text that you could replace with their own content. Let's do the same thing by adding some sample paragraph text. Click after the closing H one tag and press enter or return to create a new line. Then select paragraph from the insert menu. If you're starting to feel little adventurous and want to add your own code without using the insert panel, Dreamweaver comes with a built in code hinting feature to help you do just that. Insert your cursor once again after the closing tag and press enter or return to create a new line. Let's say you wanted to add an A nor did or bulleted list, but you didn't know what the proper tag. Waas simply start typing, and Dreamweaver will provide a list of options to select from along with a description of what each suggested tag is used for. So let's start by using the less than symbol and on a Norden list might start with the you and there it is. It also comes with the description that the U L element is used to define an a Nordic list , which is exactly what we're looking for when you found what you're looking for. Selected from the list and carry on. The tank remains open so that you can add any in line styles or classes that you wish. But we'll talk about that later. For now, let's complete the tag by inserting a greater than symbol. Once we dio dream weavers, auto complete feature kicks in and creates the corresponding closing tag for you. Now that we have some content toe work with, let's take a look at one of the essential tools that dream Weaver has the property inspector. If it's not open already, simply go to window properties, and it will open the properties inspector at the bottom of the screen. Or it might open as a floating panel. For example, if we select the paragraph text, we can simply click on the bold or italic buttons, and those styles will be automatically applied. Likewise, if you have a style sheet associated with your site, you can select what styles to apply to the given element. You can also update your page properties here in the property inspector. The more you work with Dreamweaver, the more you'll find that some panels are necessary for your workflow, and some aren't, and you'll find that certain panels need to be opened over and over again. Rather than doing that, you can simply customize your workspace. You can go to window and then open whatever panels you like. For example, let's open the assets panel, find the assets panel open down here, but say we don't need the snippets panel we consider. We click it and drag out and then click the X to close the panel group. Once you have your window looking the way you like. Simply click on standard in the top of your window or go to window workspace, layout new workspace and name it. Whatever you like. Click OK. This also works. If you'd like to resize any of your layout windows or rearrange any of your panels, for example, you can turn it into a floating panel and doc it to the side of another panel or group. Different panels together. Now that we have a feel for some of the basics of Dream Weavers interface, let's set up our new site, go to site new site and provide a site name. This name doesn't have to be anything in particular, just something that you'll remember to associate with the site you're working on. Then select a local site folder. This will serve as the root folder for your site that contains all of your site files, including pages, images and any external documents like CSS files. You could save here and move on with developing your site, but lets first take a look at one section of the advanced settings, click on advanced settings and local info, and then set the default images folder next enter your science, you are L. And then click. Save these steps. Help Dreamweaver establish an understanding about how your site is organized so that it can help keep everything where it needs to be. Now that our site is ready to work with, let's take a few moments to talk a little bit more about the basic building blocks of our site. Html. 4. HTML Basics: everything we're going to be building in this course is going to use. HTML is the foundation, so it makes sense to start off taking a look at how HTML works when it comes to the overall structure of the page, how individual elements should work and what some of the most common elements and tags are at its core. HTML is the language of websites, though not seen when rendered in a Web browser. HTML acts is the underlying guide that the browser uses to display your content. HTML helps the browser to know where one type of content ends and another begins. It tells the browser where to go to find the images you want to use on the page, and it provides the framework for applying styles to virtually everything on your site. Since we're talking about HTML as a language, let's take a moment to look at some of the vocabulary of this new language. A tag is the basic structural element of HTML that we used to assign properties to the various parts of the page. As we will discuss more as we go, there are tags for everything from headlines and paragraph two next toe links and images. Pixels are a measure of size and distance on a computer screen. Whether used to describe the dimensions of an image or the amount of spacing between elements, many of the elements on a Web page will have at least one attribute that is measured in pixels. You may have heard of RGB or CME like a before, as different ways to describe colors well. Hexi decimal is a method for identifying specific colors on the Web. Each color on a site is defined by a combination of six letters and numbers, and virtually every HTML element can be assigned a color that could be described using this method. HTML tags almost always come in pairs. When you choose an element to use, you open it by placing the initial instance of its tag. For example, if you're going to insert some paragraph text, you would start off by creating a P tag before typing your content. When the paragraph is complete, you would then close the element by placing a closing P tag at the end, buying closing the content tags. It tells the browser how to handle the formatting of that content, and it also allows you to apply styling to the different elements of your page as we'll see in our next video on CSS. Some commonly used tags in HTML include H one tags, which are headlines. They're also H 2345 and six as well. P tags for paragraph or text content line breaks. A non ordered and ordered lists, which are also called bulleted or numbered, lists anchor tags for links and the various elements of a table just to name a few. As Web standards continue to evolve, new tags air developed and rolled out to both eliminate deprecate ID or outdated elements and to introduce new ones that simplify the way code is written to make it easier for developers. A few examples of these newer tags include Header footer, knave, main section and article tags. Every page that is built using HTML follows the same basic structure. The route, which is your opening and closing HTML tags, which contain the entire contents of your page. The head is marked by the opening and closing of head tags. This portion of the code is where you will have general page information like the page title and description as well as code that affects the current page like CSS styling or links to external content like Web based fonts or an external style sheet. The body of your pages enclosed in body tags. This is where the visible content of your page is placed. Now that we have a handle on the actual elements found in HTML, let's take a look at how we can start customizing them using CSS. 5. CSS Basics: While HTML handles the content of the page, the CSS manages the way that content looks. Each text element in HTML comes with some default fonts, sizes, weights and colors already in place. But luckily we're not stuck with using those defaults because we have CSS. What is CSS? It's right in the name CSS stands for cascading style sheet, which means that it's a centralized collection of styling rules that can be used across the entire page or whole site. And whenever you need to make a change to one of those rules, all of the elements in the HTML that follow that rule will receive that change automatically. There's no need to update every instance of a headline to change its color from red to blue . All you have to do is update the CSS for the selector you need and you're all set. Even though Dreamweaver has a terrific CSS designer, it's a good idea to get a sense for how CSS code works first. So go ahead and open the file. CSS underscore example dot CSS. From your site folder, you will see a few basic CSS rules created for the body H one p and ally tags. There are a lot of things that affect how CSS functions on a page. But suffice it to say, for the purposes of this course, a rule farther down in the list can override a rule farther up. What I mean is this. You can see the underbody. It shows that the font family is defined as Ariel or a generic sans serif font. If Ariel isn't available, that means that for all text content on the page, the default will be set to Ariel or Sand Saref by default. However, if we want to make all paragraph text times New Roman, for example, all we have to do is to find that rule for the P selector, so simply click anywhere within the P selector, for example, here of the beginning before font size and press enter or return to create a new line and simply type font family and take him times new Roman comma serif, semi colon and now every instance of a P tag will take on the characteristics of the times new Roman or a serif font. Everything we've been working with so far is considered a top level element, meaning that we've been affecting entire element types universally. But let's say we want to apply a font color toe, one paragraph and a different font color to another. If we were to update the color for the P tags in the CSS, that would change it everywhere. So to specify where the color change should be, we have to create a new rule in a sign it to the appropriate paragraph in the style rules, insert the cursor at the end of the closing curly brace for the ally tags and press enter. This will create a new line for you to create your next rule. Type dot blue dash text space and then an open curly brace and then press enter, then type color colon space, blue semi colon. The type of selector we just created for the blue text is called a Class, which means we can use this same selector. However many times we like. Classes are generally used for styling, a particular type of content that will be used over and over again, or for a rule like our blue text that we might want to apply in several places on the site . You can also create a more specific selector called an I D Ideas work the same way as classes. However, An I D is meant to only apply to a specific instance of an element. For example, we can create a new style called Hash Item three with a font weight of bold. Simply click after the closing curly brace. After blue text, press, enter or return again To create a new line, type the hash symbol, which signifies an I D. Type in the name of the I D. Item three Space Open Curly brace and Enter or Return and then type font Wait Cohen Space bold and Semi colon. Whenever you're working with CSS, you want to close out each specific rule with a semi colon. This tells both Dreamweaver and your browser that your rule is complete and it should move on to the next line as its processing the code. In her next video, we're gonna take some of these rules and apply them to an actual Web page 6. Applying CSS: Now that we've created some CSS rules, let's see it in action. Open CSS underscore test dot html from your site folder and make sure you're in split view so you can see both the code and the visual representation of the page at the same time. Once you have it open, notice that in the live you we see some generic text with some headlines, some paragraphs and a simple list. Each element carries some default styling that really leaves a lot to be desired, visually speaking, but the basic building blocks are there in code view. We find the HTML representation of what we're seeing in design view, but we can also see the same basic rules we were just working with in CSS. Underscore example doubt CSS just a we did in the previous CSS file. Let's add the font family times, New Roman to the P element to see what it does in real life, as you can see, even though the body selector is declaring that all text on the page has the font aerial or sans serif, we have now told the page to apply a different font toe any paragraph text. We also have the new rules dot blue text and the new I D. Hash Item three that we need to assign to our text, Go to the second opening paragraph tag and insert your cursor after the letter P then type space class equals quote blue dash text and close the quote. And now the second paragraph is blue, and any other tag that contains the class blue text will also be blue. For example, let's apply this class to one of the items in the list. SE list Item number three Space class equals quote. Blue text. We can also use a top level rule a class and an I D on the same element, and that element will take its appearance from a combination of all of those rules. So for list item three, we've added classes, blue text and let's add the i D. Item three Simply type space I d equals quote item three. With that now applied, we can see that the item is larger because of the original top level list item rule. It's now blue from the class, and it's now bold because of the I D. Everything is fine right now, but that's because we only have one page on our site. Once we create a new page, the CSS rules we just created won't apply. We would have to either copy and paste them into the new page, which means whenever we want to change, one of the rules will have to change it on every page. Or we can create a new CSS file and apply that to each page, so we only have to make our changes in one place. So let's do that. Open the CSS designer panel on the right. If it's not visible, click on Window and CSS Designer. To bring into the front, click the plus sign next to sources and select Attach existing CSS file, click on Browse and within our Sight folder, select CSS underscore example dot CSS, which we've been working long and then click OK and then click OK again to apply it to the page. You'll now see that we have a new line of code that has been added at the end of our head section of our code. Linking to the style sheet With this Lincoln Place, we can now remove all of the styles that we have added directly to the page, simply select the mall and press delete. Without the new link to the style sheet, all of the text and content of the page would revert to their defaults. But because we've now linked to an existing style sheet, everything retains the styles that we have created. Now that we have a style sheet applied, any changes we make to that style sheet will apply to any page that is also linked to this same style sheet. Now that we're getting a handle on CSS, I invite you to play around with it some more. And when you're ready, we'll get started on our class project by using one of dream weavers built in templates to begin developing our first site. 7. Page Layouts: our project for this course is going to be a simple two page site. That's all about you. The first page is going to be more of a welcome or about page, where you can put whatever content you want, like a short bio, a photo or two and some contact info. The second page will be a Q and A page, where you can copy a list of pre defined questions, style them and also provide your own unique responses. We've already seen how you can create a new blank page and Dreamweaver. But as I mentioned before, there are also several pre built page layouts that you can choose from to get a jump start on your site. If you'd first like to take a look at where we're headed with this video, feel free to open sample underscore index dot html from the site Root folder To see the completed page from the start screen, click on Starter templates. Though there are many terrific starter pages to choose from, they fall outside the scope of this course, for example, bootstrap email or responsive templates. So let's focus on the third template available basic single page when you open the layout. Your first reaction may be one of complete fear in panic, and that's totally understandable. There's a lot of code going on here, and you're not sure what to make of it. But before you're ready to turn off the video and walk away from the course, remember that this pre built page layout was specifically designed to take a lot of the code work out of your hands so that you can focus on content and style. So let's take a look around to find some of the important parts of this layout that we are already beginning to recognize. We have a link to an external style sheet in the head of the page, just like we did before. There are several classes identified within the tags in the body section container logo hero, even an I D. And there is some placeholder text that we can edit and customize. Not too bad, right? The first thing we want to do is save our file to the root folder and call it index dot html, which is the necessary name for the home page of any site to go to file save as and in our root folder. Name it index dot html and click Save. Let's start by editing some content for this particular video, you can go ahead and just show the live or design view. We don't need to look at the code right now, so simply click on live or design and we'll get started. Don't you feel better now? You don't have to look at all that code first, let's change a few things in the header where it says light. You can put your first name double click on it, so there's an orange box around the text with a flashing cursor. Select the entire word light and type in your first name, then press escape or click outside of the box to be selected next. We're not gonna need the contact menu item. So click directly on the word contact and then go down to the tag selector at the bottom of the window and click on the L. I tag and press delete. I'm not a fan of the blue background at the top, so let's make it a dark gray color or whatever color you like. Click on an empty space in the knave bar, so that the header is selected. Then, in the CSS designer panel, click on current to show the CSS rules that apply to the currently selected element. You can see that the blue color is selected in the background color property. Simply click on the color ship for the blue color and then select the color you would prefer to use. I'll pick something in this area. Once you're ready, go ahead and hit, enter or return to commit it. This header bar also has a bottom border color that is somewhat like the blue that we don't like that we just changed. This header bar also has a bottom border color that matches the blue. We just changed, so let's get rid of it, hover over the color under the border bottom section and click on the trash can to delete it. Next, let's add a background image to the main hero section of the page. Click on the gray box to select the section. This section has a hero class and a hero. I d. That way. You know that your selected on the correct item in the CSS Designer you'll see that the background color is set to a medium grey. Instead, we're going to insert a picture in the Properties panel Uncheck show set to see all the available options for this element, Then click on the button to take you right down to the background. Properties hover over background color and click on the trash can to remove the color. Then click on the folder icon under background Image to select the photo because we identified the default Image folder when we set up the site, this takes us directly into our Images folder, where we'll find a sample background image. But you can use any image you like. Just make sure it's saved to this particular folder, so it will be linked properly when it comes time to publish the site below the background Image Property set the background position to 50% and 50%. This will center it in the header, then set the background size to cover. This will make sure that the background image fills the entire space. Next, double click on the hero text headline toe Adam Main heading for your page. It could be your name tag line or whatever you want it to be. I'm just going to put in my name following the styles already used there, and then I'll put the name of the course in the subhead. Next, Take some time to insert your own biographical content in the paragraphs below. In the same manner. Use or not use any of the pre defined areas that you like. It's entirely up to you. Once you're finished, we'll move on to see how we can take this starter page and turn it into a reusable template for amore efficient page creation workflow. 8. Creating Reusable Templates: now that we've put in the work, designing the layout of our first page will want to make sure we don't have to reinvent the wheel every time we want to add a new page to our site. The first thought that may come to mind is to save our first page with a new name, essentially duplicating the page and then replacing the content. And that's an understandable thought toe have. And it's certainly an option, but it's definitely not a very efficient one. Instead, Dreamweaver has the ability to take a page that is already laid out like this one and turn it into a reusable template. Why would we use a template just like with CSS? As our sites grow bigger and bigger, we want to be able to minimize the amount of work we have to do when developing and updating pages in the same way. And external CSS file allows you to make it color change in one place, and it updates everywhere on the site. A saint template will allow you to change the underlying page structure like the navigation , for instance, in one file, and have that change trickle down to each of the pages on the site that use that template and perhaps even more importantly, since you want the entire site to have a consistent look, feel and functionality to it, building each page off a single site template will ensure a cohesive presentation to your audience. So let's take our newly developed page and use it as the basis for our site template. If it's not open already, open your indexed on HTML file that we created last time. I'm going to use my sample underscore index dot html as my starting point, but feel free to use your own. Make sure you're looking at the page in design rather than live you so that you can see the available template options you need. It may not look quite right in design view, but that's OK. This is just to give you a sense of what we can do with the template. This isn't exactly how will render once it's uploaded and viewed in a browser. Next, choose file, save as template and then in the save as field type of the name, like my site, underscore temp and then click save Click. Yes, when Dreamweaver asks if you want to update the links. You definitely want to do this in order for the child pages we will create in the next video To function properly, Dreamweaver creates a new folder where this file will live and we need Dreamweaver to update the code in the template file. To account for that. Once you're done saving the new template file, nothing will look different. The only way you will know you're working with a template file is that the file name and extension in the document tab show the new name my site underscore temp dot d W T or Dreamweaver template. The last step to complete the template and turn it into something that we can use is to assign an edit herbal region. An edit herbal region helps to separate sections you want to maintain like headers and footers and some of the behind the scenes code like links to the CSS file from sections where new content will be added whenever you create. A new page for the purposes of this introductory course will keep the Navin the hero image of the top as part of the template, but will add to edit herbal regions to the page where the content will change. Insert your cursor at the beginning of your bio and then click the tag selector for section hash about dot About to make sure that you have the entire bio selected, then choose insert template edible region, then enter main. Underscore content for the name and click OK, then in code view. Remove all the P tags in the about section will be copying these over later and then replace it with some placeholder text like insert main content here. Next, you can repeat this process by selecting the Stats Gallery if you like. Otherwise, you can feel free to leave it as is. For now. The last part we're going to do is add a document title so that each new page comes with a pre built yet creditable title that you can customize so visitors can know where they are on the site. Open the property inspector and find the document title field. Select all text that may be in there already and type in from launched alive space Dash space Insert title here. That way, when you create a new page, you just have to add it. The insert title here portion and you'll have a new page title ready to go when you're finished, Go to file and save. Now, when you want to change anything on the overall page like the page title, or add a menu item to the knave, you just have to open the template file, make the change and save it, and the updates will automatically be saved to every page that uses the template in our next video will take this new template and create some child pages. 9. Creating Child Pages: Now that we have a new template ready to go, let's create some child pages that will be the actual pages of our site. Before we start, we want to maintain any content that we already created when laying out our index dot html page earlier. So open note pad on your computer and then copy and paste your bio from code view to keep everything as is so you can drop it into the child page. Created from the template. We're going to create two new child pages, one for our home page and another for the page where we'll have our Q and A list Go to file new and then click on site templates and make sure that your site template is selected and then click create next in the property inspector, Edit the document title to be from launched alive dash home, then back in no pad. Copy all of your content from before then, encode view. Select the placeholder text in the main underscore content, Edit Herbal Region and then press commander Control V to paste in your content. If he created a second edible region for any other sections of the page, here is where you would move that content over to their respective locations in the new child page as well. When you're finished, choose file and save and then name this page index dot html and go ahead and override the file recreated before. Now let's create our second child page for a list of questions. Once again, go to file new site templates. My site, Underscore Temp and Click Create will insert and style are content in our next video, but for now, let's go ahead and update the document title to Q and A and then choose file and save. It will name this file questions dot html when click Save. Now that we have a couple of pages to work with index and questions, let's edit our template real quick. To add some interactivity to the naff in the files panel, expand the templates folder and open your site template. Select the text home in the knave and in the property Inspector. Click and hold on the cross hairs to the right of the link field and then dragged over and select index dot html in the files panel. This will assign a hyper link back to the home page from any page using this template. Next select about and in the same way linked to questions dot html. And while we're at it, let's change the name of the link in the knave to Q and A. And since we're adding links, scroll down to the footer and link Q and A down here to questions dot html as well. Then we'll save the template. A dialog box opens asking if you would like to update all files based on this template, then click update. When the process is complete, the update pages Dialog box will appear. This dialogue will show you which pages were successfully updated. When you're finished, click close. Now, if we look at our indexed on hte email and questions dot html files, we'll see the changes that we made to the template have also been made to the child pages automatically in our next video will pull all of this together by inserting and styling some new content for our Q and a page 10. Inserting Content: We already inserted a little bit of content when we created our child pages. But let's pull everything together and build our questions page and add some styling to it . Open questions dot html in design view also opened the text file sample dash questions dot txt from the files tab. Select all of the sample text and copy it, then pasted over the placeholder text in questions dot html. Then change your view from Design Toe live so we can see a more complete preview of the page As we work, we now have a list of questions and placeholder responses on the page. Our next step is to apply some CSS styling to them. First, let's apply formatting to each line, and then we'll apply our styling. Place your cursor within the text whose format you want to change in this case, the question. You don't have to select the whole text because the text formatting change will be applied to the entire tag in the property inspector. Click on the drop down next to format and will change it to heading three and we'll leave. The response is as generic paragraph text repeat this process for each question. The styling built into this page layout isn't too bad, but why don't we touch up some of the spacing between the lines and maybe add a little color with the cursor still in the question text, click on the age three tag selector and then go to the C. S s designer Click on the plus sign. Next to the selectors, you will notice that many of the options are grayed out in the CSS designer. That's because right now we're in live, you switch to design view. Once in design view, you'll see that we now have a few more options available. Click on the plus sign next to selectors and type age three, then press enter or return twice to create it. We want to tighten up the space between the question and response, so scroll down to margin in the properties section and set the bottom margin to minus 15 pixels and then press enter or return to commit the change. Next, click on the text properties tab and set the color to something that matches one of the colors in the hero image you're using. Just make sure it's readable, so no light colors How much is something in the Reds, then, In pure CSS fashion, these changes air applied universally to each of the questions. Once your text looks the way you want, switch over to live you to see the final result. Once you're done updating the styles, your next step is to enter your own responses. Go through each question and answer them in any way you like, whether serious or silly. Once you're done entering your own responses to the questions go to file, save all, which will save both the page and the site CSS file, and then all that's left to do is to make our site live. 11. Publishing Your Site: Once your pages air created, content inserted and everything is style the way you want it, the last thing to do is preview your sight and make it live online. If you don't have access to a Web server, this first part is especially for you, so that you can at least see what your site would look like Once it's published. To preview the site in a browser simply right, click on a PC or command. Click on a Mac on index dot html in the file panel, and then select your preferred browser from the list. The file will open in your browser and provide you with an active preview of your site. You can double check all your styling and links and make sure that everything is the way you want it. Let's switch back to Dreamweaver. If you have a Web server available, let's set up the connection and publish our files. Go to site, manage sites and with your site highlighted in the list, click on the pencil icon to edit the site settings, select servers from the left hand list and click the plus sign to set up a new server. Set the server name. This could be anything that you like, Doesn't have to be anything in particular and enter your FTP address. This will be something that you received from your hosting provider. Then enter your FTP user name and password and test your connection. The Web you are. L will automatically be what you put in for your local settings when you initially set up your site in Dreamweaver and the root directory is where you will be uploading your files within the main you are hell. For some, this will be a public underscore HTML folder or, in my case, a sub folder off my main site. Once these fields air filled in and the connection is successful, click, save, click save again and then click done in your files panel. Click on the Connect icon and then click on this button to expand the window. To show both your local files and the remote server, command or control, click on index dot html and questions dot html. One selective click on the up arrow toe upload or put your files a dialogue box appears asking if you'd like to upload associated files such as images or your CSS file click? Yes. You don't need to upload every file from your local files folder Onley the files that are used with the pages that you created. Once this process is complete, your site is online. Open your browser window type in the URL and see your brand new live site in action. 12. Conclusion: now that you've learned some of the essential tools needed to use Adobe Dreamweaver City. See, let's get started building your own site. Take the starter files have been provided or start from scratch on your own style. The site. Insert your own content and share it with us. Find us on Facebook at Studio 1 18 Creative Services and find the group that I've created for this course. Share a link. Ask some questions. Reach out. We're here to help. If you have any questions, I'm glad to answer any of them. For you started discussion with this community of learners for this course. Good luck, and thanks for watching.