Adobe Muse CC - Design and Launch Websites without Having to Know Code. Learn Web Design.

1. Promotional Video and Course Overview: What if I told you that you can design and launch websites without having to know any code but actually designing and re sizing images and moving lance around to create our own original websites again without having to know any code? In this course, you'll learn how to use Adobe Muse. Adobe Muse is a powerful program which can be used to create responsive websites that look good across different types of computer screens and mobile devices. You will learn effective text formatting image considerations, how to add dynamic layouts and navigation elements and much, much more. If you follow along with my example using the support files included in this course, this is the site will be designing and building, regardless of whether you use the support files or build a website using your own photos and text. This course will help you learn how to add mobile menus. Add consistent spacing and layout format images for the Web, a just text using responsive design and much, much more. I'm Chad Newman and I've been designing including websites since the nineties, when I was in high school in early college. I've worked as Internet development director at an advertising design firm as Web master, at a regional newspaper and at a library system and as managing editor of too graphic design magazines have also designed encoded websites for clients including photographers, nonprofit organizations and businesses. From a surf in skate shop to a golf course, Adobe Muse is an amazing program, and I look forward to the opportunity in guiding you and had effectively use this program in role. Now let me know if you have any questions again. The course comes of support files and high quality instruction so that you can get started designing and launching websites using Adobe Muse, an amazing and fund program. 2. 1.1 - Introduction to the Course: Hey there. Welcome to the Dhobi Muse course. In this course, you will learn how to design and launch websites without have to know any code. Adobe Muse is a powerful program which can be used to create responsive websites that look good across different types of computer screens and mobile devices. You will learn effective text formatting image considerations, how to add dynamic layouts and navigation elements and much, much more. If you follow along with my example using the support files included in this course, this is the site will be designing and building, regardless of whether you use the support files or build a website using your own photos and text. This course will help you learn how to add mobile menus. Add consistent spacing and layout format images for the Web. A just text using responsive design and much, much more. I'm Chad Newman and I've been designing including websites since the nineties, when I was in high school, then early college. I've worked as Internet development director at an advertising design firm as Web master, at a regional newspaper and at a library system and as managing editor of too graphic design magazines. I've also designed encoded websites for clients including photographers, nonprofit organizations and businesses. From a surf in skate shop to a golf course, Adobe Muse is an amazing program, and I look forward to the opportunity in guiding you and had effectively used this program . Thanks again for enrolling. Let's get started. 3. Adobe Muse Installation Update: Adobe recently announced that they're discontinuing support and updating of Muse Creative Cloud. I think maybe a lot of people are using the third party websites. Maybe WordPress and other sites like that, maybe squarespace, and they just find that not as many people are using this program, even though a lot of people are going to continue to use it because they like it. They like it that you can just click and drag different elements onto the workspace and add links easily So it is available, but they're just not going toe update it. So that's good to know. But if you go to your adobe creative cloud and you don't see it listed here to have open ah , you don't see it, listen here even to install it or update it up in the upper right hand corner here, go ahead and click on that and then go to Preferences. This is in the creative cloud app, and then on Creative Cloud Tab here, make sure show older APS is checked because once that's checked, it will show Adobe muse there, and then we can install it so you can follow along in this adobe Muse class So it is frustrating sometimes when companies discontinue software that you still want to use. That's understandable, but at least they're not removing it completely from the adobe creative cloud subscription where you can't use it at all. You can still use it. It just won't be updated. So that's just, you know, a disclaimer So they won't be updating it like they do with photo shop in design. Illustrator Aftereffects, premier and so on. So that's how to get that listed here so that we can install it on the Adobe Creative Cloud APP software program. All right, thanks. 4. 1.2 - Downloading and Using the Support Files: after downloading the support for this course, will you can do is right. Click on it on the PC and go to extract all on the Mac. You can just double click on it, and it will extract to that same folder that you're on, for example, the desktop. And once you extract, you should have a folder called Support Files. And then from there we have balloons and Beyond Website, which is the final Web site if you follow along exactly with me, which you'll probably use different photos or different texts. But this is just to show you the final website that I create in this course as you watch and learn the principles and practices of Adobe Muse. And then also there's the Muse file. And then there's also photos and texts of photos and text is the folder where we will have , for example, the high res photos will be re sizing some of those low risk photos that were given to me from this company, and you can follow along with these photos, the lowers photos and the documents which has the text in word document format. And in case you don't have that rich text format, which is more universal but in order upload this side. Obviously, we don't want to use ah, the ones that are in low rez actually from the company and then documents this just for practice For this course. If you want to upload your site actually to a server or on business catalyst to Adobe. You do want to use your own content or content from a client you're working with. This is just for practice. For the site now under branding, there's also illustrator file. Just a quick logo made four blades and beyond and then to favor con images So we'll be covering that in this course will be copying and pasting the text for three of the pages from this area will also be typing in some short text on some of the pages. 5. 1.3 - Getting Used to the Workspace and a Quick Exercise: go ahead and open up muse file blooms and beyond from the support files, and we have what's called the plan mode right here. You might have an air that there's missing links, so if you go toe assets and right over here, there might be an air. If you right click on that, you can go to re link and then find in the sport file folder where that specific image is. That's not necessary right now, though, because you'll see a preview the images. And this is basically just to show you the muse file and just the workspace. So go ahead and double click on home page here and you'll notice we have over here a tools panel. If you don't have that, you can goto window and then toolbar. Make sure that's checked. There's also control panel to up at the top. We want those always checked, because depending on the tool that we have selected or the element we have selected, the options are going to change up here. And then we use a lot of these tools throughout the course and throughout. Using adobe Muse is well now over on the right hand side are some shortcuts to different panels and these air all also up under window. So if you don't see one over there, you can click window, and they're all listed right here. So if you get a reset panels, it will reset it to the default. And so you're should look something like this. We have text swatches, which is library state scroll effects, layers and so on. Sisi libraries, assets and transform panel these air again all over here as well, though, and then there are a couple other ones to select from two. So to move up and down the page, all we do is click and drag up and down the scroll bar. All right, that's different from this responsive control right here that sets break points, which will get be getting into so to move up and down. We can use that. We can also use the hand tool on the tool panel. If you just click and drag, you can move around the workspace like that if you have another tool except the type tool, and we have a cursor and somewhere, if you have, say, for example, the selection tool, this top arrow and you press the space bar, it will toggle to the hand tool so we can move around and then release the space bar. And then we're back to using the selection. Tool says This is a shortcut. Speaking of shortcuts, we have the zoom tool here. We can click and drag to zoom into areas. What I like to do is press control on the PC or command on the Mac and press, plus or minus on metal. Zoom in and zoom out. Now, if I press control or command zero, it will just set it. So everything's on the screen here, these air shortcuts that you can see where you go to view and then right here, zoom in, zoom out fit page window and then actual sizes, Control or command. One is the actual size. Now the selection tool. Here, we can use it to select objects like that. We can click and drag the corner to resize an image like this. We can also move things around like this one will look a little bit different. This one just resize is it's a placed image will be placing, and this one the background is set to an image so excellent it differently. We have text boxes here, So if you want to ever select text or we want to add a new text box, we can select the text tool and click and then type in. And there are some options up here at the top, like fun paragraph style, which would be going over and then changing size and different formatting options if you click and hold. There's also a vertical type tool, but most of time will be using type tool. There's also a rectangle and a lips tool. So if you wanna click and drag and add some shapes out and change color of the Phil and the stroke, for example, weaken, set that. And also there's frames, which are kind of like placeholders. If you wanted to insert images as part of the Phil for that rectangle, and then finally there's anchors will be going over that how to set anchors on a page so we can link to parts of a page and not just linking two pages themselves and when we're going over responsive design later will be going over formatting text and then formatting text. Just in that break point so that as you resize, for example, this about Paige in a browser window or mobile device, the text can actually get smaller or larger as well. You'll notice up at the top. There's a couple different modes. Planned mode is just right here, where it's a blueprint of our site and different pages, tough level pages, child pages and then the master page. If you get a preview that will pre V this site and then we can also publish different ways here, we'll be going over. You can also publish from the file menu, and every time we work and make some significant changes, I would suggest saving as a new file safe side s So we have the other files is back up. Or, if you keep saving, it is the same file at least back that file up on a different device, like a flash drive or online. So to show how easy it is to change content, let's go ahead and add an image here. Just add a little bit of interest. So just go to file place, navigate to the support files and go to photos and text. And then let's goto photos low rez. Let's like Balloon nine, click open and clicking like Go, and we can resize this. We want to resize and photo shop, usually if we, you know, have it at a different size to begin with. But for this, just practice is fine. Select this rectangle here and click and drag it down. This is just a content area will be going over that let's go in place another one final place. There's just a quick win, just a practice to get used to the workspace here. And so I will make this the same. Exact height is the other. I'm just using the selection tool here, the arrow. So once we've added these photos for some visual interest, go to file previous sighting browser and then navigate to the social media link down here. And then there we go. We added some photos to the Social Media page for some visual interest. This is just a quick win, just some quick practice to show how easy it is to add elements like photos and make changes to Web pages in Adobe Muse. If you have the missing asset air, that's not a big deal. We're not going to be using this muse file past this lesson. You're gonna be creating this site from scratch. You can follow along in my example, or you can use your own support files. It just depends on if you want to use this opportunity to create your own portfolio or a website for a client or an organization or individual, or you want to create this blends and beyond website. Regardless, the purpose is for you to learn the principles and the practices of Web design specifically in Adobe Muse. So thanks and let's get started in the next lesson. 6. 2.1 - Creating a New Website in Adobe Muse: Let's create a new site in Adobe Muse, Go to file new site or press control and on the PC or command and on the Mac that brings this dialogue up. The first setting is fluid with versus fixed with with a fluid with the with of the Web page content area will resize as the browser sizes, adjusted with a fixed with the page whip, stays the same regardless of the browser size. The content with stays at nine, her 60 pixels or whatever size we have it set to for this project, we want to set it toe fluid with. Since we'll also be adding responsive design elements to the website, we want the Web page to be dynamic rather than static, so the content will resize as needed when re sizing the browser for this project. My screen has nine higher 60 pixels as the default Max page with, but most screens have resolution a bit larger than that nowadays, so let's set it to 1000 pixels for this project. For columns, let's set it to 12 cents. Having three or four columns. Inn layouts can be aesthetically pleasing in having 12 will give us a grid to work with since we can then layout. For example, three columns of texts or four comes of photos on a grid that has 12. Overall, these guys won't show up on the final website. They are just for us to use as guides and muse. Let's set the columns to 12 and then the gutter is the space between the columns and 20 is fine for that. If we were only designing something for a mobile device like a phone, then we could use fewer columns. But this website will be made for various types of screens. Let's click the arrow next to advanced settings to bring up some more options. Ah, minimum height doesn't need to be adjusted from the default 500 pixels for this project. We'll have content. Move well past that anyway. And 500 pixels gives us some initial space to work with for minimum with let's keep it at the default 320 pixels. That should be fine for smaller Web browsing devices like phones as well as larger screens . We don't need to go smaller than that for a minimum with if you're familiar with editorial design or programs like adobe in design, then you should be familiar with margins. If you're not familiar with that, it's not a big deal. Margins are just guides inside the website content area. They act as a guide for the Web designer to show where we need to keep content, for example, away from the edge of the website in order, have some breathing room. The padding is extra padding or space outside of the space in which we're working for this project. Let's set both to zero, since we won't need margins or padding right away. And we can adjust spacing in other ways, which will go over notice that when we change the top setting from margins, which means the space at the top of the page is, it changes the other three as well. That's because they're linked by default. If we wanted to just the margins on just one side of the pages, we could toggle that off so that we can adjust just one. Finally, let's make sure this is set to center. It should be by default under that is Resolution. Standard means that the images on the website page will be at the standard 72 PP I or pixels per inch, regardless of whether the users browsing the website are using a standard screen or a high DP eye or retina screen. If we selected high D P I, we can use higher resolution versions of the images for those with high resolution screens , but it does increase the time it takes to download pages. Since the images are much larger as indicated by this dialogue, let's keep the resolution option set to standard Sticky Footer just means that the content in the Footer In other words, the common content seen across the website at the bottom of the pages will be displayed at the bottom of the Web pages, even if the content of the rest of the page is shorter than the browser window. If we uncheck sticky footer, then the footer will be right below the Web page content and not necessarily at the bottom of the Web browser window. So let's keep that checked for this project. Now let's click. OK, we have the muse file set up so we can start building our website. Let's go ahead and say this as a file. I'm calling it the Muse file balloons and beyond. We won't have the separate files such as HTML pages, embedded images and other content until later, which will go over the click save and then I'll save our website so far, Thanks and I'll see in the next lesson. 7. 2.2 - Adding Pages and Planning the Website: all right. Now that we have amused file set up, we can start adding pages to the website by default were in planned mode which is indicated up at the top. This is a sort of map of all the pages of the website. Ideally, we'd have the website pages planned out ahead of time even before starting Muse. And a lot of this information would result for meeting with the client or if it's your own website, you'd want to decide what would be the primary areas or top level pages in the website. We can still plan out the website and muse, though regardless we need to add pages in this area. We can do this by clicking the plus sign to the side of the home page. This will add a sibling page, which is another top level page in the site. Let's name this about. Click the plus sign again and we curate another page called Questions and finally click the plus sign toe. Add another page and let's call it contact. We could add what are called child pages below these sibling pages. Thes would then become sub pages below top level pages and the child pages are in drop down menus when we create a menu later. For example, let's create a child page below the contact page and call it social media. Let's create a child page below about and put directions there. There are other way to add pages. We can click on page upon the menu and click add new top level page. We could also right click on the PC or control. Click on the Mac on top of a page and click New Sibling Page or new Child page. We can also duplicate the page, delete the page, which we can also do by clicking the X in the top right hand corner of a page, renamed the Page and open the page, which just opens it in design mode. We can also adjust page properties of a specific page, but we'll go over how to adjust site properties in a bit, which will just properties of all pages in the site, which is better for consistency. Unless we wanted to adjust properties of a specific page, we can also adjust whether or not a page is included in menus that we create, which will make some sense later once we set up a menu. Finally, we can also adjust which master page of the pages linked to if we have more than one master page. We will set up content for the master page later, so we don't need to adjust this now. Since there is only one master page by default, we can click and drag the pages in planned mode and change child pages to top level sibling pages, for example, and vice versa. If you're following along with my example, then we have our pages set up so far in planned mode. If you have more pages to add or fewer because you're designing and launching a different website than our example, then adjust the pages in this mode as needed. Be sure to goto file save site in order to save changes. Next time we save changes, I suggest you using a different name so we'll go to save site as next time. This is just in case the original file becomes corrupt. We have backups each time we make a bunch of changes. This is not mandatory but best practices, or at least make sure to have a backup of the file on a different drive or online. Thanks. And I'll see you in the next lesson. 8. 3.1 Using Master Pages for Common Elements: In this lesson, you'll learn about the importance and usefulness of master pages when we're designing Web pages and adding content such as photos, text illustrations or videos. Those elements are often just on that specific page or putting them on. For example, the directions page to a business might be the only page that has a map on it, and a biography page might be the only page that has information on a company's founders. But some content should be on all the pages of a website, such as a consistent navigation at the top. Ah, footer at the bottom with contact information or social media links or a specific background color across the site. And we want to be able to change that content without having to change it on all the pages one of the time, whether the website has five or 500 pages. That's why we have master pages. If you're familiar with Adobe and designed, the concept of master pages should be familiar to you. If you're not familiar with it, no worries will go over how to use them effectively and muse so that we have consistent design elements and functionality across the website. So let's get started. Adding common elements. Double click on the master page called a Master Down here that brings up the master page in design mode. The guides will not show up on the website. They're just guys for us to go by As we design, these vertical guides air from the columns while the horizontal guides air for the header and they're footer areas and also to adjust margins. The vertical space available is based on the initial minimum height that we said earlier, we can click and drag the inside arrow here toe ADM. Or space between the bottom of the browser in the bottom of the page, which is controlled by this arrow for this project. I want the letter to be flush with the bottom of the browser window, though, so let's move that back up. We can also adjust the height of the header and footer and add some spacing above the header. If needed, Click and drag the top arrow in order toe. Add some spacing between the top of the page and the top of the browser. This really depends on your project, as some navigations can be flush with the top of the browser, while others will not. For this example, let's set this to 10 pixels for a little bit of breathing room above the header and the page as I click and drag it indicates the distance between the top of the page and the top of the browser here. Next, let's click and drag this arrow to 75 pixels, so it's 75 pixels below the top of the page, which is 10 pixels from the top of the browser. So, really, we have 85 pixels of space up here toe work with including the extra spacing of 10 pixels for some breathing room. Let's at the top of the footer, two former of 50 pixels, since that will put it at 50 pixels above the bottom of the page here, since our initial minimum height is set to 500 pixels. Next, let's add some content up at the top in order to delineate the header from the rest of the page. One option would be to add a line here in between the header and the rest of the page. If we were coating this, we could just add a horse on a line in the code, but in Muse, we can add a rectangle and then just have one side of it. Have a line click on the rectangle tool on the tools panel, and then let's click and drag across the top. Here said that the bottom of the rectangle is along the bottom of the header area. Click up on stroke up the top and set it to a color for this example. I'm just going to set it to you black. This controls the thickness of the stroke or border, and I'll keep it set toe one. We could curve the corners by adding a corner radius or a few of them here, but I'm not going to add that in this example. We can also add effects like a shadow, bevel or glow. But there's often look unprofessional but can be sometimes relevant or professional and depends on the client branding and how the effect is done. We can also adjust the opacity of a selected shape to make it less opaque and more transparent. If we want here, back over here on stroke, let's click on the word stroke. Let's make sure the stroke is aligned to the inside of the shape for this example, and then also let's click this So these air not all linked to be the same. Then make the stroke. Wait for the top left and right set to zero. We'll have a line at the bottom. We can preview what this looks like by going to preview at the top. Knows that the line doesn't go all the way across. That's because I intentionally didn't set the right tangle to go to 100% with earlier, just to show what it does. This is more relevant to fix with layout websites, although some shapes and photos can be a fixed whip, even in fluid with websites. But for this example, we want the link to go all the way across, regardless of how larger browser window is. So with the selection tool selected, Click and drag the shape so that it snaps to the edge and says 100% for W or with make sure that you select the shape and not the bar that sets the break points, which will go over later. There we go now, go to preview and let's see the difference. That's how we add a line that goes all the way across the window, regardless of how large or small the browser window is for this project. I don't want a line, though, but I wanted to show you how to easily add one. I'm going to add a rectangle that has a fill. Since this is for a client that gives hunter balloon rides, we want the colors to be bright and sunny. I'll delete the shape we just designed for the line, and I'm going to create a rectangle at the top for the background of the header. And I'm going to set the fill to somewhat light blue, sort of like the sky but still a strong blue. I'm going to use the six digit or a Hexi decimal code to nine a B E to and then enter. You can use that or select a different color. Now let's add a background color to the footer area by drawing another rectangle over that area with the strokes that to none for this one as well. Let's change the Phil to a color that is not super bright. That could easily distract from the content on the page, such as the photos that will eventually place here. I'm going to set it to C 69 C six D, which is a more muted but still relevant color. We could make it more of an orange color if we wanted to create a complementary color scheme with the blue. But we'll go over color themes later and how to set that up? The cool thing is, we'll be able to just this later if we need to, and it will reflect across the pages. Since this is on a master page, make sure the edge goes to 100% as you draw those rectangles. If we need to adjust the size after we initially draught, we can use the selection tool and click and drag the topside or corners or left or right side. Now we have the basics of the master page set up. The content reflects across the entire website. Any changes made to the master page will reflect across the pages. Now let's say we wanted certain pages toe have a slightly different color at the top or a different size footer or whatnot. We can add a new master page down here just at a page by clicking on the plus sign by default. It's called Be Master. I'm going to quickly just add some content to it for this example. How about a circle? And we'll add some color and notice that none of the pages have this content. That's because they are all associated with a master, which is indicated below each page to change that. Just right, click on the PC or control, click on the Mac and go to masters and then be master. Now this specific page has the content from the new master page. When he just one master page for this project, though. So I'm going to set that back to a master and delete be master page. Now be sure to save your work, preferably with a new name. So we have ah, backup file Orly. Save another instance of it somewhere. Thanks. And I'll see you in the next lesson. 9. 3.2 - Changing Background Properties of All Pages or One Page: for this project. I'm keeping the background color set to the default white. However, sometimes we may want to change the background to you another color or even an image. Here's how to do that. Double click on a page in order to open it up in the design mode, then click on the browser. Fill option up at the top. We can set the back onto a color, a Grady Int or even an image. We can have a small image that repeats across the background of former pattern, and we can adjust whether or not the background image scrolls with the page or a static or not moving while we scroll. For this example, let's just change the background to a color. I just said it to Blue, and that does not look good in this example, but I'm just showing how to change it. We'd want to make sure the background color looked good on the page. Of course, something subtler for this So close that page, and now there is a background color for that page. But what if we wanted to keep it consistent, which is best practice for a business page like this? We'll double click on the A master page in order to change the background color for all pages on the site, and I'll change it to a kind of green color. And now we can see that all the pages have green except the page we had already changed for that page. That background color is overriding the master page settings. How to change that? Well, we can just right click on the PC or control, click on the Mac over that page and plan mode and click a master so that we apply the mass straight settings again to this page. Of course, I want to change this back toe white for this example, so let's go to the master Page and set it to white. A quick tip. The Hexi Decimal Code for white is F F F F F f, and the Hexi decimal code for black is 000000 You don't need to memorize those when using a program like a muse, since we can just set it here. But it helps to know that in case we ever work in the code later or want to quickly set a color toe, one of those settings. So let's close the master page and then we can save the file if needed. But we didn't make any changes, really. In this lesson, I wanted to show you how to change the background color of individual page or entire site if needed. Thanks, and I'll see in the next lesson. 10. 3.3 - Adjusting Site Properties: helpful feature of Muse is that we can adjust the properties of a site even after we've started working on it. Go to file site properties and the settings under layout are the same setting options we had earlier when creating a new site file in Muse, for example, whether the site has a fluid with or fix with the size of the margins and padding and so on , we can adjust this even after initially setting it up. When creating a new site, let's click on content by default. Web browsers will have certain styles for hyperlinks. For example, links are often blue with an underlying in order to differentiate them from regular text. So Web users no, they are links that can be clicked for this project. Let's customize these. The first setting is for normal hyperlinks, meaning hyperlinks, which do not have a cursor hovering over them and for pages that have not been visited. But default links are blue and underlined has indicated here with the check, mark noticed the hyphen or dash here. That just means that the setting will use the local style instead of overriding it. What that means is hyperlink text will be underlined, but they will only be bold or italicized if they are already stylized. This way we could make all links bold or in italics, but that's just keeping it to the defaults of the local setting is used, but let's change the color slightly. Let's click the blue here, and I'm changing it to three d 94 If f you can adjust it to whatever color you like when we hover over the links, let's change the color to a complimentary color that is somewhat orange. I'm using FF C 34 F This way it will make it even more obvious that the Underline text is a link as it reacts by changing color to contrast in color for visited an active links, I'm going to change the same color. The blue three D 94 ff color. I'm not worried about indicating that a page has already been visited by changing color, and that should be obvious as there are not that many pages in this website. Anyway, Active just means that if there is a text link on a page that Web user is already on, I don't think that will happen with this website, at least with the text link, but it changed it to blue color as well. I suggest leaving vertical and horizontal for browser scroll bars to automatic, since you don't want the scroll bars to show up if they're not needed. In other words, if all the content is fitting on the browser window, then we don't need scroll bars for this project under images that has the option to convert PNG files. T. J. Peg, I am going to you uncheck this because if we have a PNG file that is partially transparent so that the background shows through part of it, then if we converted JPEG, it will lose the transparency. We could combine this files in photo shop blisters, have it done checks because we will learn a little bit more about PNG files later. PNG files have lossless compression, while J. Peg sometimes can have slightly lower quality, if not saved with the highest possible quality settings. But J picks can be smaller files than PNG files, hence the reasoning to convert them to J Pegs. But we'll want to keep PNG files in that format in this project, so let's uncheck that well designed a favor. Common image later, which is the image in the browser bar or favorites, and the Web browser that accompanies a website. This is not mandatory toe have for a website, but it can be helpful for branding, so don't worry about that. For now, let's click on the advanced area will go over in browser editing later, but this just controls whether or not in browser editing enable synchronized text. We'll go over in browser editing later as we export and at at the website under text. This just means whether or not anchor links, which are hyperlinks to specific parts of a page called Anchors follow the active state styling. I uncheck that, but for this project, it doesn't matter, since we set the color to be the same as a regular hyperlink. Anyway, the round leading to a whole number option controls whether letting which is the vertical spacing between lines of text, is rounded to whole number. In other words, if the automatic leading for a certain size followed with 16.8, it would change it to 17 points hole number, letting leads to more consistent look across browsers. So I said, just keeping that checked with the newest version of Muse. The text uses the same font metrics as popular Web browser applications, so text looks more consistent and accurate. But if you want to use older baseline positions, which is sort of like the bottom run of most letters the baseline, then you'd check this to make it more compatible with earlier versions of Muse. That's just keeping this unchecked unless you have a file designed in the older version of Muse, and it's not looking right and you just want to use The older settings will be going over Web bonds later. But this setting just means that the default subset of characters in a font are used. We want to change it toe all. If there some glitz or special characters that we wanted to use that we're not showing up by default. I suggest keeping it set to default subset, and we can change it later if there's a specific character not showing up the load pages faster. Using fallback funds options just means that a Web page will load with a back up fund rather than a downloaded new Web bond, which might take a slightly longer time I said, just keeping this unchecked so that the page doesn't load until the correct fun is loaded, even if it might take a small second or so longer if the fund has not been downloaded yet, We want the page to look correct. Finally, let's keep men. If I CSS trekked. That just means it makes the CSS code more compact so that pages load more quickly. CCS stands for cascading style sheets and is a coding language that enables the style, izing and formatting of elements and pages and works with HTML coding. Click OK and let's save this file In the next section will be adding content, including images two pages I'll see in the next lesson. 11. 4.1 - Using Layers for Organization and Ordering: just like other Adobe graphic design programs, including Photoshopped in Design and illustrator Muse has a layers panel, which can help organize an order content. The Layers panel and Muse works a bit differently than the Layers panel in Photoshopped, though it's closer to the functionality of in designer or illustrator. But even if you haven't used those programs, it's not a big deal, as it's pretty simple to understand and use. Double click on the master page and let's click on the Layers panel over on the right. If that's not there for some reason, or just to know another way to find it, we can go toe window layers by default. We just have one layer, which is called Layer one Double Click that and let's call it primary content. The color has nothing to do with the content. On that layer is just a way to differentiate between the layers, which will become evident in a bit, so I'll keep it light blue and click on OK. Next, click the add new layer icon on the bottom of the layers panel. Double click that and let's call it header. Let's add 1/3 layer and name it footer. Let's order these in the same way they are on the page to keep it ordered. So click and drag the footer layer and bring it to the bottom of the layers, and we should have the header at the top and primary content in the middle. Notice that there's an arrow next to the primary content layer. That's because there's content in this layer, and we can click that to show the objects in this layer. These are the two rectangles we've already created, the top header and the lower footer background shapes. We want those to be on their crack clears. But first, let's rename them Click the box in order to target the object. This should select it and show which rectangle in the Layers panel is. Which rectangle on the Web page notice that this one is selected. So now let's right. Click on the PC or control. Click on the Mac on these layers and click rename. Let's rename them footer, background and header background. We can order these within the current layer if they were overlapping on the Web page and we wanted one to be on top, but we need to move these toe other layers, so click and drag the footer background down to the fitter layer. We can do this by clicking and dragging on the name itself another ways to click the box to target it. This is useful for when some objects might be below others, and we want to select it. Click and drag in the box area of to the head earlier. Notice that the color of the layer in the Layers panel matches the selection lines around the selected objects. The Web page will not actually have these outlined colors. It's just for us to be able to tell which later we're on in which object is selected. Now we have the trash icon at the bottom of the layers panel, and we can either click that when a layer object is selected in order. Delete it. We can also click and drag layers or objects to the trashcan icon. The other button is the locate object icon. If we select an object on the Web page with the selection tool, we compress that icon, which looks like a magnifying glass on the bottom of the layers panel in order to find it in the layers panel. This is particularly helpful for files that have a lot of layers and objects on them. If you're following along with me, then these air all the layers will need for now. So go ahead and click. The right facing arrow is there to close the panel. Hopefully, now you understand how layers work and why we use them in Muse. This will become even more evident as we add objects, since if some objects are on top of each other, it's easy to rearrange them in the layers panel so that certain objects are on top invisible. I'll see in the next lesson. 12. 4.2 - Setting Up Element Areas for Organization and Aesthetics: before we add images and then text the layout of the pages what's sewed up some element areas or areas that will space out to have some content. Some of these areas will include images, text, both images and text. Besides helping the layout and planning of a design of a Web page, it enables us to add the background color of specific areas as well. So double click on home page so it opens up in design mode. Make sure we're working in the primary content layer in the layers panel and again, if you don't have that, be sure to click layers over here on the right or go toe window layers. Select the rectangle tool and click and drag on the edge below the header. Let's set it to about 200 pixels tall and set it to 100% for the width. Of course, some websites have a fixed with four elements and that we find as well. But for this project, we want it to span across the page. This is going to feature an introduction graphic. So in the Layers panel, let's name it by double clicking it and typing Introduction graphic Ray below that area. Let's create another rectangle and set it to 400 pixels tall and 100% with. Here we go and up at the top. If you see this resize option here, if you click that you can manually resize as well. If you're having a difficult time setting the height to something specific with the mouse, you can type it in there. And also, if you click the down air here, we can also set it to Responsive with Responsive within height or stretch to browse with. This is one we have so far because we have to set 100%. We'll leave that there for now. It will be going over responsive design later in the course. Let's rename it introduction text. This will go below the introduction graphic on the page and in the Layers panel. Even though they won't overlap. Notice how it pushes the footer area down as we drew it. That helps, since we want to add this content above the footer. Next will at an area for a call to action will include a button here later that will point them to a page with more information in case they want to send it for the balloon ride knows there's no room above the footer, though. We don't want to click and drag a new rectangle on top of the footer or the header, for that matter, because then it would place it on top of the footer or header. So click and drag above that area like this. Then we can resize it with the selection tool. For my example, I'm going to set it to 100 pixels tall in 100% with and again if we can. And again we can resize it here or upon resize. Just click that and all, type in 100 and then enter or return. That will resize it for us. Let's call this call to action text now. We don't have to add these element areas, but it can be useful when we need to change the background of an area, and it helps us plan out the content of the layout of the pages. Let's close this page and then save changes to the file. I'll see in the next lesson where we'll start adding images to the Web site 13. 4.3 - Adding Images to Your Website: in this lesson, you'll learn a few different ways. Toe add images to your website. We'll add an image as a background to rectangle, and then we'll also place a few images. If it's not open already, open the balloons and beyond Muse file that we've been working on and double click on the home page toe open in design mode with the selection tool, Click the rectangle introduction graphic. Click on the word fill up at the top, then click Add image. Ideally, we would move any photos or other images we're using in a website to an Images folder next to amuse file to keep it organized, even though when we export the website later to HTML, it will organize files for us as long as the support piles air not moved or deleted as we work on the site and Muse can still find them, then we don't necessarily need to put them in an images folder. First, we could just insert them from the Support Files folder. Select the file Home introduction graphic and click. Open fitting might be set to original size. This is a very large image file, so we only see part of the sky with these settings, since the photo is much larger than the rectangle area that we've drawn in the film menu change fitting to scale to fit. This changes the fitting of the image so that all the images seen, even if there's blank space on the sides. In this example, the rectangle is much wider than the photo, which is not quite a square but is not very wide compared to its height compared to the frame. If the photo had a wider orientation than the rectangle, then there would be empty space on the bottom instead. We don't want this empty space, though, so change the fitting to scale to fill. What that does is fill the rectangle shape with the photo, but crops out the top and or bottom area in order for it to fit the shape. Adjust the position setting to align the photo to the middle or top or bottom in this example. If we adjust it left or right, it won't affect it with this example, because the photo is already scaled to fill the area lengthwise. For this example, let's adjust the position to one of the top positions. This will give us a nice photo of the hot air balloon area for introduction graphic. Now let's say we wanna have this graphic area take up a little more vertical space. We could click and drag the edge of the rectangle, but then it would overlap the other area we've drawn for the introduction text. So we need to resize this shape and move this one down. So instead, let's click in, drag off to the side here and select the two shapes Introduction Tech Shen and called a action text. Of course, we could also press shift and click both of them in the layers panel. Click and drag those two down a bit so we have more room for this top graphic area. Then click and drag the bottom border of the introduction graphic rectangle so it snaps to the one below. That's how we do that. That's how to add an image to a Web page by adding it as the shape next, let's and three images by placing them, go to file place and then select a few images from the Photos Low Rez folder. Hold control on the PC or command on the Mac and click three To select, I'm selecting Balloon one, Balloon 16 and Balloon 18. Click Open, and our cursor turns into a small preview of the images that will place we can press left and right on the keyboard to cycle through the selected images in order, place one that we want. First, let's place three images in this area, which we earlier called introduction text. We will have text in this area, but I want to add three images in the lower part of it. To keep the website visually interesting, we can just click in the area, and that will place the image at the original size. I don't want it to be that largely on this example. So I'm going to press control Z to undo, and on the Mac it be Command Z. I'm going to click and drag in order to place the photos, notice the number to the right of the mouse as we click and drag. That's the percentage size of the original image so we can make it smaller, since Adobe programs do a good job of re sizing images to be smaller but we don't want to place at a larger son, is than the original image, so make sure the number is not above 100%. I am clicking and dragging these photos to place them. We can then use the selection told her, resize them so they're aligned at the top and bottom. They're different with toe height ratios, so they won't be the same within this example. But they can have consistent spacing in between them consistent height as well as aligned along the top of the bottom. We're applying a few design principles, namely alignment and consistency, including consistent spacing or proximity. See the guides that show up at the top of the bottom. When I move and resize these photos, those help us make sure the photos are the same. Height and aligned music also will add these guides between the photos. In this case, the spacing between each is a certain number of pixels. Once they have a consistent spacing between them, hold shift and click all three photos in order. Select them. Then we can click and drag the group of photos until the center guide shows up and the next lessons will go over a couple more considerations when managing images and muse will also resize some in photo shot first because that's ideally what we do before we insert them into muse. Thanks. 14. 4.4 - Adjusting and Using Assets in Muse: In this lesson, you learn how to use the assets panel to manage used assets such as images and to edit or add attributes to them. So when we place assets such as these J peg images here, they should show up in the assets panel. It's next to the layers panel over here, or we can go toe window assets it lists are images we've used so far here three placed on the home page and one added as a background on the home page. If a photo is deleted or moved, then we'd get an air here. We then need to re link it so we can right click on PC or control. Click on Mac and Click Re link and tell Muse where the photo was moved to. If it was deleted, we need to find another copy or downloaded again. This panel also tells us if assets are changed and need updating, in which case this exclamation mark would show up and tell us that an asset had been updated. I'll show you what I mean. Here I have balloon one dot jpeg open into the wee Photoshopped from the low rez folder. I'm just going to slightly sharpen it. So there's a change in the file using an uncharged mask effect. All right, now, let's save this as the same final name. Of course. Now back and muse, there's this alert next to balloon one dot j Peg and Assets panel. This image has been updated in another program, so we can right click on PC or control, click on Mac and then click Update Asset. Now this image reflects the changes that we made in photo shop. Now notice. Under these options, we also have something called Collect Asset. We have it here to collect an individual asset or down at the bottom left corner of the assets panel. We can collect all assets. What that means is we could make copies of all the photos and other assets were using and put them into a folder that can really help with organization, especially if the placed images or illustrations are all over the place. But we don't need to do that because we'll be exporting the site later, and we'll have HTML files. Image files. Atmore, all organized in various folders, will go over cc libraries and a bit, but right below that is a helpful option called Go to Asset. If we saw an asset in the asset panel but couldn't find it easily in the workspace, we could just click this, and it highlighted for us. This is especially helpful when we have a lot of images and other assets on various pages in a website, in Bed link Options in beds, the linked file in the mews file. So if we're sharing them useful with others, we won't have missing Link cares, for example. But we don't have as many options here after embedding it. We don't want to do this here because we have the original photos, and again we'll be exporting it later at Original would allow us to quickly edit an asset in another program. We do need to make sure that file type is associated with an image editing software program , though, rather than just an image viewing software program. So if J pegs air set to open by Adobe Photoshopped by default, then that would work. If it just opens a preview, just that association in your operating system's a control panel, or just open Photoshopped first and open it from there, reveal in Explorer just opens the folder in which the linked asset in this case, an image is located. This is in case we kind of figure out where that photo is on the computer. Similar to that is the copy Full path option which copies the path on the computer to the file to the clipboard. That's just another way to see where the assets are located. For now, as we work on the website and muse Now, before we go over the edit image Properties option, I want to quickly explain this option. Optimize asset size. This option won't show up unless we've made the placed image is smaller than the original size. So for these photos were here I've placed we resize them to be smaller. End muse. So we have this option. This is just a convenient way to re sample the images to this new smaller size so they're not larger and file size than needed. Now it is best practice to use an image editing software program like Adobe Photoshop to edit the images sides first before using them and muse. But I wanted to show you this option will be re sizing a few images and voter shop in the next lesson and then reinserting these images here. But this is a quick way to optimize the images in Muse if we did not have access to photo shop. Finally, the Edit Image Properties allows us to add tool tips, which will show up when we hover the mouse over an image. For example, the alternative text will load on Web browsers such a screen readers for the visually impaired. This is important toe add because then people with visual disabilities will be able to hear what the photos are as its read to them from the screen reader. So for this one on, we could add Ah, hot air balloon in Kissimmee. Whatever the content is of the photo, the tool tip could be something similar or just more information about the asset if we wanted something to pop up when we hovered over it. Now that we've placed some images and know how to optimize and adjust them and muse in the next lesson will do some preset cropping to images in Photoshop so that their optimized and resized in an image editing program that is very good at re sampling for high quality and best file size 15. 4.5 - Cropping and Resizing Photos for Consistency in Photoshop: In this lesson, you'll learn how to effectively resize and crop photos in Photoshopped so that they are the correct size and with to height ratio when we use them in Muse. If you have creative cloud or if you bought a bundle of software from Adobe and therefore have both Muse and Photoshopped, go ahead and open up voter shop if you don't have access to photo shop. I didn't resize, thes and include them in the support files as well. There are some free options for imagery sizing software programs, but photo shop is really the industry standard. When it comes to photo and image editing. Go to file open and open the three images that we placed in Muse Balloon one dot j peg balloon, 16 dot jpeg and balloon 18 dot jp. We could go to you image, image size and change the width or height, but that would keep the whipped height ratio the same. That is, unless we unchecked the constrain aspect ratio option. But then it would distort the photo. We need to have the three images have a consistent with and height when we place them into the Web page when footers have different with two height ratios. For example, some have more of a portrait orientation, and some have more of a landscape orientation. We need to use a preset crop. This will crop out some of the photo, but we can crop the photos for effective composition and consistent dimensions. If we look back at the home page, beckoned muse. Instead of having three images with three different whips, albeit with the consistent height and alignment, we need tohave three images here with the same width and height. The page with is 1000 pixels and taking into consideration the spacing between the images, let's make each image 300 pixels wide because then we can have 25 pixels in the spaces between the images that will add up to 1000 pixels. Exactly back in photo shop. Select the crop tool. If you don't see this, go to window tools to make sure the Tools panel is visible. Then up at the top. We need to set a preset crop size. Let's make it 300 p x by 300 p x and 72 p p i or pixels per inch. Be sure to put P X. Otherwise, it might add I end for inches and that create a huge file. If you don't have these options, make sure it's set to W ex H ex resolution, which means with by height by resolution, there notice that the crop area is a square. That's what we want. For this example, I'm not going to center the balloon as I think it looks better using the rule of thirds for composition. Just click inside the area here, then click and drag to move the crop area around. We can also click and drag the corner to adjust it. Noticed the size and pixels to the side there by the arrow. We want to make sure that does not go below 300 pixels, because then it be making the image larger than the original area, which could cause picks. Elation. We don't want to make images larger than the original, only smaller if needed. So something like that, and we can double click inside this area to apply the crop. Oregon Press enter on the PC a return on the Mac or a press the check mark up at the top. So now we have our resized and cropped image. We need to save it as a new file name. So I'll say this as home page balloon one dot j. Peg just got a file save as instead of just save, so we save it as a new file. We want to repeat that process for the other two images. I'll do it a bit more quickly. Since it's the same process, we're gonna make sure the composition is effective. We'll save this as home page balloon to We always want to use hyphens or under scorers instead of spaces and file names and Web design and coding. We don't want to use spaces regardless of whether it's an HTML file on image file or even a directory. Use hyphens or underscores instead. And the third photo, Let's Crop. We definitely want this area to be in the image and then save as home page balloon. Three. All right, there we go. Now let's place the's in the site so that we have consistently sized images, open the Muse file and double click on the home page. Then let's selected these three images, but I first clicking off to the side to make sure nothing else is selected, then clicking these three images while holding shift, just delete or backspace on the keyboard. Now let's go to file place and place the three images, like earlier, we can use the control or command key again, or, in this case shift, since they're next to each other. Or we can simply click and drag to select all three click open. And we know these are the correct size to begin with, so we don't need to click and drag, But simply click, then using the selection tool. Let's align them up with consistent spacing between them and notice. We have 24 pixels in between each of these now, but it doesn't match the ones on the edges. So what we could do is actually click one of these and then appear was his resize. We have the width and height where we can just type in. We can also affect the X and y axis. That's actually where it's placed, right. So earlier we said we're gonna have 25 25 25 25 and then each was gonna be 300 because that's 900 then plus 4 20 fives is 1000 Exactly. So let's put this a 25 and enter and then click this one. So if we have 25 and then three and that's 3 25 then plus another don't be 3 50 right? So it's click resize just that by two pixels. It's slightly off and then 3 50 plus this one here going to be 6 50 plus another 25 that B 6 75 So let's go ahead and make sure you we click on this one and go to 6 75 Enter. There we go. So if we click this one, we see that's 25 pixels from the edge there, the X axis. We click this one that was 3 50 and click this one. That's 6 25 That's if the smart guides are not automatically make him with all the same. We can also go to a line and then distribute evenly as well, and we'll go over that a little bit later. But for this one, I just want to show you manually moving. Those with the resize option appears not just resize it. We can also adjust them. We can also rotate them as well We'll go over pinning later in the course to and under resize here that says, Responsive within height. So you'll notice if I goto preview as I resize it. It changes the size of those photos, right? So we'll cover more about responsive design later in the course. Thanks, and I'll see in the next lesson. 16. 4.6 - Adding Images Using CC Libraries and Duplication: another way to add images to a website and muses to use creative cloud libraries. The neat thing about libraries is that we can use them across various adobe programs. We can add elements such as images, brushes, colors and mawr and then use them across various programs. We can add a photo from photo shop and use and muse, and we can add an image from illustrator and using a Photoshopped. It's often more convenient than copying and pasting or placing. For example, I have the file balloons, hyphen layered dot PST here, open in Photoshop Goto window libraries to bring up that panel. I have a few items in here from the project, a few colors and a color theme. For example. We're going to create a library specifically for this project, So click up here where it says my library and click Create new library. Let's call this balloons and Beyond website, and we can drag and drop assets such as photos, illustrations and so on. Or we can use buttons at the bottom of the library's panel with the top layer selected in the layers panel. And if you don't have that, just got a window layers. Click the plus sign at the bottom left of the library's panel, and we need to uncheck the foreground color because in this example, we just wanted to add a graphic. So leave graphic checked and click add, and now we have our first item in the library and image. Let's repeat that for the other two layers. Select the balloon nine dot jpeg layer, and I renamed these layers to match the image file that they're from. Click the plus sign again and indicate that we're adding the graphic. If we want to see that layer weaken, toggle the I icon in the layers panel of the layer above it, and we'll add the third layer there as a graphic as well. Now that we've added three raster images or photos to the library, let's place them in our website and muse. Double click on the about page. Let's had a rectangle for this area and set it to about 1000 pixels tall into 100% with We're going to have three images on the right side here and a textbook here on the left. Later, in this cc libraries panel, there is our library. We created balloons and Beyond website. If we right click on the PC or control click on the Mac, it gives us a few options, such as renaming, duplicating or deleting it from the library. But we need to add them to this layout, so click place linked that will turn the crusher into a preview of the image. And for this layout, let's place the image is aligned with each other and on the right side, not the spacing to be consistent and to make sure they're aligned and you'll see we need to bring this a little bit down. So let's bring this rectangle down like so past 1000 just so these fit in there, and we also need to make these have some consistent spacing. There we go, and this is important. Let's make sure that these images are located in the correct layer. If not, click and drag them to the primary content layer. We'll also add colors to our library in the section on effective color in Web design. Now, before we move on to the next lesson, another way to reuse assets such as images and muse is to duplicate them. For example, we can go to the home page and hold shift and click each of these images here we can then go toe edit copy, which is control C on the PC or command. See on the Mac so the content is in the clipboard. Then we can navigate to the contact page. Let's draw out two element areas or content areas with the rectangle tool. The top one is where we're going to put the text content later with the contact information . The lower rectangles. Where will pace those three images? So let's make the top about 300 pixels tall in 100% for the width and the lower rectangle. 330 pixels tone and 100% for the width. So we'll goto edit paste and then we'll adjust. Thes there said. There's some consistency in the spacing here, and there we go. We could manually adjust that, too. But I think that looks fun. And let's navigate to the layers panel and make sure these objects are in the primary content later there. Hopefully, by now you understand the various ways to add images to your website, including setting a background of a shape placing files adding images to a library and then adding them to your website and duplicating. Since we've added quite a number of images to the Web site so far, let's preview and make sure everything looks right. So far, the home age looks good. So far, the about page looks good. Notice that the color at the top and bottom goes all the way across. That's what we want for this project, and the content page looks good. We'll add hyperlinks and navigation later and test that by previewing the website in a Web browser as well. Thanks, and I'll see in the next lesson. 17. 4.7 - Creating and Adding Transparent PNG Images: In this lesson, you'll learn how to create a partially transparent image in case you wanted to put some element on top of another element in a Web page. Have the background show through on part of the image so we can use a GIF for a partial, transparent image. But those only have two or 56 colors available, so those are better for saying animated GIF like a cinema graph. Some kind of animation is preferable to use PNG, because that's another image format that we can use online designing for the screen that is not limited to 256 colors. So go ahead and open up photo shop and opened up one of the support files in the high res folder, and we'll just quickly create a transparent PNG here. So if you do the quick selection tool, just select that here on the tools panel, and we got the brush here. If you only see the plus sign, press the caps lock to make sure is a preview the brush and press the right hand bracket on the keyboard. Or you can adjust the size up here as well. But regardless, want a nice size of brush. For the most part, we want to select this object here. Alright, someone a click and drag has a pretty defined edge, so that's pretty well, there's many different ways of select things in Photoshopped. I'm pressing the left bracket there to make it smaller, right, wreck it to make it larger. So that's probably good enough for this purpose of this tutorial. I'm gonna hold on the PC or option the Mac and that'll subtract from. And if we want to be really picky, we get zoom in control or come in plus and minus and really adjust that, for example, I could just use the lasso tool and Ault click and drag older option and then if you hold shift, its plus, so add to it so we can use the different selection tools in conjunction with each other to get a really relevant selection there. All right, so that's pretty good when a zoom out and so we have Ah, the edge here in what we would do actually gonna and that a little bit more. There we go. Okay. We don't want to delete pixels. We want to use a mask, which is nondestructive editing. So what, we can dio We could actually press control J or command J on the Mac. And it would add that on a new layer weaken tuggle the visibility there. But another way is just to add a mask down on the bottom of the layers panel. Suppress that and that adds a mask. And basically, if I painted in, say, black, it erases. All right, I'm gonna control or command Z to undo that. If I paint white, it brings the content of the original photo that layer back. Okay, but the default when we had the mask is good. So now we have a partially transparent image. If we say this as a J peg, it's gonna flatten it, and it's gonna add a background color. So this would not be partially transparent If we save as a JPEG, we don't want to say that is the J peg. We want to definitely say that as a PNG so file save as then change it to P and G. And I'm gonna save this in photos high rez. I was gonna call it transparent for personal transparent asking me dot PNG and then the default here. This is fun. All right, so now back in, Muse, I'm not gonna include this on the final website, but I just want to show you what it can. Dio is gonna go to the home page and if I got a file place and then there's transparent and open and I can just click and let go, I'm gonna resize it so we can see better here again. I don't want to resize it in photo shop. We're gonna make it a different size cause footer shop is very effective at re sampling. But I'm just showing you this as an example. So this is probably transparent so we can see through to the background, right? So we can place it wherever. So I just wanted to show you that in case you have on your project, you want a partially transparent image again. Just mask out those pixels, save it as a PNG, and then we can place it in our website 18. 5.1 - Color Harmony in Web Design: in Web design. Just like in any area of graphic design, color is very important. We can change the background color of the entire page or pages. We can also adjust the color of specific areas of the website, including the navigation text and other areas such as borders on photos. We want those colors to match the branding of the client, and we also want to get colors that harmonize and look good with each other. For design and branding consistency across the pages. And for aesthetics, we need to formulate a color scheme. There are many types of color schemes, but two primary ways to harmonize color is to create a complementary color scheme or an analogous color scheme. Complementary colors are opposite on the color wheels, and analogous colors are next to each other on the color wheels. We'll go over a few ways to come up with color schemes, but one really effective way is to use adobe color. Just navigate to color dot adobe dot com. This is an analogous color scheme, which means the colors are next to each other on the color wheel. Here we can click and drag the base color here around the color wheel to adjust it. We can also click and drag specific colors to adjust it slightly or by clicking and dragging the levels down. Here. We can adjust the red, green and blue levels here, as well as how dark and how light the color is. This list the RGB or red green blue levels here. And this is our Hexi decimal color code up at the top, where it says color rule. Let's change that to complementary. These colors are opposite on the color wheel, and we can adjust them as well. There are also a few other options, such as monochromatic triad compound shades and custom, which we can really customize now. What if we already have a color we like, and we want to base a color theme on it? Well, back and muse with the Master page open, I've selected the top shape up here. Then, if we click on the fill option, we can highlight, click and drag over this and copy the code and then paste back in adobe color for the base color. Delete that paste it and then enter or return, and this is set is based color. If you click The other ones that will set the other ones is the base. If we go toe analogous show what I mean, If I'd move these around the base color stays the same. But if I set this is the base color and moved around. The other ones will move with it. So I pasted Are Hexi decimal color code Here. Set it back to complementary. Making sure this is set of the base color analogous is pretty good for this color scheme. But let's use complementary for this is that looks pretty good too. If we just the RGB levels, it's going to change our base color. So we don't want to do that. I just want to make this one a little bit brighter. So instead of moving the RGB levels, I'm actually going to just set this back to our original and then just adjust the brightness here. Just want to make this a little bit brighter. Now we have a color scheme we want had to the website. We could copy and paste the Hexi decimal color codes of the five colors here into a document to bring them over 10 Adobe program. We could have them to swatches and very sadiq programs. But it's easier and more convenient to the UCC libraries, just like we added some graphics to a library earlier. We can add colors, too, so make sure you're signed into Creative Cloud. If not just signing up here now. Once we have the color scheme, how we like it, let's go to save let's call it primary website colors and save it in our balloons and Beyond website library. We can add tags for example, blue, orange, complementary sky bright and so on. And if we published this theme to explore allows other graphic designers and Web designers to find it. Click. Save Now it means we can go toe window CC libraries and see it. If you're not signed in, be sure to sign into the creative cloud that the Adobe APS program. We can also search for color schemes on adobe color. Click on Explorer up at the top, and we can type in keywords like right, cheerful blue, orange and so on. If we wanted to add some of these to a library, we would just click, save and then add them to a library. So this makes it really convenient and helpful to manage colors and harmonize colors in adobe programs, including me use and the next lesson will apply these colors in her website. 19. 5.2 - Applying Color Themes in Muse Using CC Libraries: Now that we have a color scheme, let's apply it to our website in Muse. Let's navigate to the master page and down at the bottom. Let's adjust this color at the bottom with the selection tool. Just click the rectangle. Then on the CC libraries panel, click the color we want to change it to. It's that easy. I think the slightly darker blue color is subtler and less distracting than the orange colors here. And, of course, when we go back to plan mode, we can see that all the pages now reflect this change. Let's go over a few other ways to apply color navigate to the contact page. Let's select the rectangle here that we've set up with no stroke and no Phil, an NFL that changes the background color of a section of the Web page. Another way to add color is to add borders to photos. Let's navigate to the about page using the selection tool. Let's click on the images here holding shift. If it won't select, go to the layers panel and just target and click the boxes there next to the images, we can change the color of the stroke up here, but we need to change it to a specific color from the color theme. So let's open the CC libraries panel with the three photos still selected. Notice. If I click one of these colors, it is just the fill settings by default. So let's right. Click on PC or control. Click on the Mac in set stroke color. Now let's make it larger and more noticeable by clicking the air appear to increase the number. This is just another idea for adding color to a website and finally on the home page. I'm going to adjust this lower area here to the brighter orange, since they will have a call to action text and I want to draw eyes to it. We'll be adjusting color later as well, but I wanted to briefly go over a few ways toe add the color to our website using the color theme that we created in C C libraries. In the next lesson, you learn a few more ways to formulate color themes, and we'll add the logo to the website while adding colors from it to our library 20. 5.3 - Other Ways to Formulate Color Themes for Websites: In this lesson, you'll learn a few more ways to add colors to color themes or libraries in adobe programs. One way is to use colors from a photo. Have this photo from the High Risk folder open in Photoshop. If we like this photo and we're using it prominently on the front page, for example, or is a background to various Web pages, we could add colors from it to the layout. Make sure the tools panel is visible. If not got a window tools, then click the eyedropper tool. We can click an area in the photo, and it will sample that pixel or area of pixels, depending on our settings up here so we can get an average of color or just a specific color in the point we click. That will change the foreground color at the bottom of the tools payment to the color we click. Or we can click the foreground color on the tools panel and then hover over the photo to select a color. Once a color, we want to use this set to the foreground color. We just clicked the plus sign on the library's panel and make sure foreground color is checked and click. Add Now We could use this color in our website and muse. Or we could use as a base color in adobe color by using the Hexi Decimal Code, just like we did earlier. And adobe color with the color code from the top area on the website. We can, of course, add multiple colors from a photo to making sure they look good together. Of course, we could just change the foreground color and then add it to the library. Another way to harmonize color is to use Adobe Illustrator's Color Guide panel will also add a color from the logo from the branding folder of the support files, open balloons and beyond logo dot ai, an illustrator and then goto window color guide. If it's not open already, collect the selection tool in the Tools panel and click the balloon shape. Click the color in the top corner of the color guide panel to set the base color to the current color that is selected. Then click the down arrow here on the right, and a bunch of different color themes are listed that are based on this color. There's complimentary, analogous and so on. If we do another shape, we could add a color to it that matched this color theme. And of course, we can add these colors to the library for our project. Using the library's panel, we can even add other types of elements, such as character styles, paragraph styles and brushes, and so on. But we don't need to do that for this project. For now, we're focusing on and graphics and colors. Speaking of which, let's go ahead and add another graphic to the library. We could copy and paste or place this illustrator filing them. Use Web browsers don't display a out files, which is the default file format for illustrator, but we could convert it to Raster or pixel based here or in photo shop, or by placing it into muse. But another way to do is to add it to the library, especially a graphic such as a logo, which might be used more than once in a website project. Let's select all of this by clicking and dragging around the shapes and text, and then let's click and drag it to the library. It's named Artwork one. So let's double click it and name it logo, Then in Muse, let's navigate to the master page and then let's right. Click on PC or Control. Click on Mac and click Place linked. Let's click in here and resize it, and let's make sure it's on the correct layer. We, of course, could also resize it in photo shop if we wanted. But this is fine for this example. And let's preview this in a browser file. Preview page in browser. This is the master page, of course, so we don't have the other elements or pages here, and we haven't added the navigation yet either notice that the image resize is, but then it also changes from being close to the edge and not as close to the edge. We can address that as well when we pinned in position images and adjust the responsiveness of the website, too. Thanks, and I'll see in the next lesson 21. 5.4 - Using Gradients and Other Effects: so far, when we've added color, we've added solid colors. Sometimes a Grady int can look nice, but it's one of the effects that can also look a bit unprofessional. In this lesson, you'll learn how to add and adjust Grady INTs and a few other effects so they look professional. Let's navigate to the directions page and draw a rectangle for our content here so we could add a Grady int background for the content will add later. And, of course, we want to make sure we're on the primary content layer. I'll set that to you 500 pixels tall for now and 100% with up at the top where we have Phil . Let's click on the word Phil. So we get this menu. Let's call it Grady Int. Ingredients can look a bit unprofessional and not as aesthetically pleasing. It can help to adjust the two colors it uses to be analogous colors or colors that are close to each other to just the transparency or opacity. Would you just the numbers here and this controls whether or not the Grady int is horizontal or vertical, So in this example, we could have a sunrise or some kind of effect that looks like the sky, and this controls the focal point. If you go away to the left, then mawr of this colors visible and figure a way to the right and more of that colors visible. So by default it's at 50%. That's just keeping the size that automatic we could do fixed and adjust it different ways , but that's going toe almost have the same effect as the focal point, where you have more of one color as opposed to the other color. So do automatic. Don't be evenly distributed. Let's briefly go over a few more effects. Navigate to the home page and with the selection tool, click on one of the images up with the top. We can adjust the opacity, or how opaque or non transparent photos and other graphics are. Just click and drag that to a number to adjust capacity. I'm going to set it back to 100% because we don't want these voters to be partially transparent. Click effects right next to the opacity control. Here we have three effects. Shadow, bevel and glow. The shadow effect, or sometimes called drop shadow, can look a bit unprofessional, if not done in a subtle manner. Reducing the distance and blur can help make it more subtle and effective if we want a photo to stand out from the background but not look unprofessional. The bevel effect can also look unprofessional, although there are some clients where it would be relevant to their brand. We just don't want to overdo it, and glow is similar and then it can look unprofessional but could be relevant for some brands. We can adjust the color and make it an inner glow, and it just the A pass, iti and blur of the effect as well. I hope you've learned a lot so far about adding color that looks good to a website, and the next section will add the copy or text to the website. After that will add the navigation and then add some responsiveness to it. So it looks good and is readable on various devices and of various sizes. Thanks, and I'll see in the next lesson 22. 6.1 - Adding Text to Your Website in Adobe Muse: we now need to add the text to our website, open the text document called Intro, and I've included both a word document and an RTF file. In case some students don't have access to a word, let's copy the first sentence of the texts so it's in the clipboard in Muse. Open the home page and then select the type tool. Click and drag a text box in the area here and make sure it's set to 100% with for now, even though we might adjust it later, depending on her layout. Now let's paste the text. We can adjust the size of the type up the top, and you can also center it. If your window is a bit larger, it just depends on how large our muse window is. If those options aren't there like left right, full justifying center, you can also go to window and then text. And there are a few more options here, even if we had it maximized to the entire screen. This has some of the same options up of the top on the control panel, but a few Maura's well and will be formatting the text in the next lesson to. But for now, let's just center this and we're also going Teoh press return or enter and type in. Learn more, and that will be a link later to the about page. Next, copy the entire text in the intro file and then add a text box on the about page. It's okay to have negative space, especially on the sides of designs, instead of trapped negative space. But let's bring that text down a bit by making it slightly larger. Of course, let's make sure the content area rectangle photos and text box air on the primary content layer. Next, let's add an element area for the content on the questions page. Make sure it goes to 100% with we'll need a bit of space for the questions. So let's drag this a bit. Of course. Make sure it's on the primary content layer for the text box. Let's use the type tool and set it to go from the middle of this column here in other column copy and paste. The frequently asked questions. Let's adjust the space below, All right, Don't worry about the formatting since we'll do that. Next will be adding styles to the text for hierarchy and differentiating some of the content. Let's navigate to the contact page. Copy and paste. The contact information will form at this later, but for now, licious make sure the text is there. We still need to add in some Type two text, such as titles or copy for the Directions page. But all the text from the support files has been placed. In the next lesson, you'll learn how to format the text for effective readability and design. 23. 6.2 - Formatting Text in Your Website in Adobe Muse: now that we've played some of the text in the website, let's go ahead and format it. Double click the home page to open it in design mode, select the type tool and highlight this text. Here We have a few style options up at the top on the control panel, such as adjusting the font, the size, the color and other options, such as making the text bold, italicized or underlined goto window text. We can left a line center, write a line or full justify text. Tracking is the horizontal spacing between letters and a word sentence or paragraph, and letting is the vertical spacing between lines of text. The first line indent can be adjusted here back upon the control panel. We can also just list options in applied paragraph styles, which will go over later. A few more options on the tight panel includes setting the text to be all caps lower case, add superscript or sub script and also adding margins for spacing on the left or right of text as well, spacing before or after paragraphs in order to differentiate between the paragraphs. If there's no spacing in the styling, then there needs to be manually entered space with returns after each paragraph added with the return or enter key or a first line in den with the line highlighted, Let's change it toe all caps for the text to be larger. Let's change the size to 24. Let's bring the learn more text back up, so there's no full line of space between it and the text above it. We just press, delete or backspace with the cursor there. That's a little close to the text above it, though, so let's adjust the letting of this line with the learn more line selected or the cursor blinking on the line somewhere, let's increase the leading from her 20 percent to 180% that at the little space there without adding a full return. Finally, let's adjust the tracking slightly on this text. With the Senate selected, let's increase the tracking from 0 to 1. Then let's switch it back. I just want to show you what that does heart. Let's close that page from design mode and double click on the about page to open it in design mode. Let's change this text to size 12 for now, so we can see all of it on screen. This text has manual spaces between the paragraphs. But what if we wanted to adjust That spacing would have to go in and manually adjust the leading or size between the paragraphs, which can be quite cumbersome. We can add spacing between paragraphs and then adjust it later easily, which is much easier and saves time. Let's manually remove these line breaks so the paragraphs have no manual space between them . Then let's select these paragraphs and at a space after the paragraphs, so space after. Let's bring that to 12 now. If we wanted to adjust the spacing and weaken, simply select it again and adjust it. Let's adjust the size toe 18 again and increase the space between paragraphs as well. If we have a cursor in the text box, we can press control a on the PC or commanding on the Mac to select all the text. I'm going to just the first few words 2 24 so they grab attention. Now let's adjust some of the text on the questions. Page knows that the questions here don't really differentiate from the answers. Let's adjust the questions so they're all bold, just highlight the questions and then press the bold button. Of course, we could also italicized or underlined the questions, but I think pulling them is fine for this page that took a little bit of time to bowl. Just the questions, in a bit will actually add paragraph styles so that we can assign styles. Two different text in the next lesson will be going over how to change fonts and how to add Web bonds Thanks. 24. 6.3 - Changing Fonts and Adding Web Fonts: one part of style izing texts is to change the font. The right font can help make a website look more professional and help with readability on the home page. I have aerial by default, as we can see on the control panel in the text panel. If we click that with some text highlighted, it will bring up a list of fonts. Notice that there are other funds listed beside these font names. These were the fallback funds associate with these standard funds. If a browser doesn't have aerial than it might have, Helvetica Carol is a sansei refund Sayings is French for Without the's, funds do not have those embellishments on the ends called serfs. We can change this sentence two times, which is a Sarah fun. This fund and associated fallback funds, such as Times New Roman and Georgia, are all Sarah funds. These air basically font families, various fonts that look very similar while saying Sir funds are often used for sidebars, titles and short text areas. We can use sand surfer paragraphs and Web design. But for the about page, let's try the serif font family that has times as the default fun. It's safe to assume that most browsers will have at least one of these funds in these font families. So it's find a design and launch websites that use Ariel, for example, with Associated Fallback funds. But there's another way to use fonts in Web design. We can add custom fonts to a website, and Muse will code the pages for us, so that font is included. The pros and cons to three different ways to include specific wet bonds will be included in this lesson. Let's highlight the text on the text box. On the about page, I just click in the area with the type tool and then press control and the PCR commanding on the Mac notice on the text panel that there's an option here called Web fonts. We have the standard phones that should be on the browsers computers. These are very common fonts. Then there specific funds that are not as common, so they're exported as images from use. When we export the website, these air fund centre on your computer that are most likely not on everyone's computer, then Web bonds up here. If we click, add Web bonds or if we get a file add remove Web fonts. It goes to the same menu. There are three types of Web fonts that we can use. Amuse self hosted Web bonds just means that we can use the font files from our computer in the design and add them to the website. This is if you've purchased a fund for this use from a font website. For example, Edge Web fonts can be used from Adobe even without a creative cloud subscription. But we do need creative cloud, at least for this version of Muse and then type kit. Web fonts requires the creative cloud subscription Click get started. And if we had a font file, we could upload it here with a self hosted tab selected. But let's use a font from the type kit. If we scroll through here, it lists all fonts, but let's click on Filter hover over these, and it should bring up tool tips. Such a showing that these air sand surf these air serif slab serif script black letter mono spaced, which features a fixed with of characters hand written or handmade as well as decorative. It also delineates between fonts recommended for paragraphs or headings as well as a few other options down here, So I'm going to select recommended for paragraphs, sand, surf and regular weight. Some of these weaken select more than one, and we can click them again to toggle them. Then we can scroll through them with the filter options. We want the fun to match the branding of the client so some of these would not make sense. Let's select this one Latour Lotto, whatever that is and click OK, This brings up the adding Web fonts dialogue. Now that it's added, we can change the highlighted text and let's choose medium. Using standard font families is fine, but using custom fonts such as those from the type kit is useful because then we incorporate specific fonts into the website. We don't have to convert custom fonts to images. We can use them as part of the text of the website because the font is part of the website coding. However, with type get funds, there's a page view consideration toe look into. If your website went viral or got a lot of hits, then that could lead to more charges in the licensing, according to this website on adobe dot com, your page view. Limits on type kit will vary by plan. If you exceed the page views for your plan level, you may be responsible for average costs, so it's important to check this in advance of publishing and music. So if we have creative cloud as part of that, we get a lot of different funds under type kit. But there's a page of you limit. So if you have more than that number of use, then there's possible charges. Web fonts served by Adobe Type Kit Usage Rights Limited and Click Learn more and you have the agreement. So I suggest using the default fonts, such as the aerial sansei, our family or the times their family. And if we do use custom fonts, purchase them for a one time fee from a font website and in the licensing, be sure that you can use the font in a website, and it does not have a restriction on a number of Web page views per month. This would be similar to using a stock photo we'd purchased on a website we design, or we could use phones that do not require a subscription. But the fonts are still hosted somewhere else. So while I think Web fonts can be useful, such as in the type gate or edge Web funds, its best practice to use a purchased or a free font that has a license with it that allows for us to use that fund inner website and it's actually hosted on the server that we're using. And there's no license limitations as faras. If you get a certain number of hits you actually have to pay and then it's not hosted somewhere else, either. And we'll talk about hosting and having the files on our server later in the course again. We don't have to use this. We can use the default standard funds, right? So I could use just Ariel on this page and on the questions page, same thing. I already have it on Ariel and on the front page. This is Times family and then Ariel down here. I just wanted to show you how to use funds that air from adobes type kit and the Edge Web funds, and it is an option to use those. But again, we want to check the licensing. So if we don't use these standard funds right here that people browsing Web site should have on their computer. We need to include that font file in on the server that we're using if we uploaded as a Web bond rather than having to use type kit. But that's really up to you. Thanks, and I'll see in the next lesson. 25. 6.4 - Using Styles for Consistency and Ease: We've added a lot of the text on our website so far and it might seem to be a bit of a problem keeping track of all the changes. We need consistency in the website so that for example, body copy the text that makes up the paragraphs is consistent across the website. Headlines should be consistent, as should other types of text. Consistency is an effective design principle since it looks better toe have consistent style and formatting of text across the website. Many websites and publications have style guides which give guidance not just in terms of writing consistency, but layout and formatting consistencies such as using a specific font and size for stories on effective way to add consistency to websites, is to use paragraph styles, navigate to the questions page and muse, and this has some default formatting of Ariel. But let's go ahead and adjust this to Helvetica or we could try times your Roman Her times , I think, actually would get actually just said it. Aerial should be fine instead of 14. And let's just make this 18 for the size and let's leave the other as default. We don't want this italicize bold at least we just want the bold for the questions and the body copy of the answers to be normal. So let's select this. And while this is selected this text here, click the create a new style from the attributes applied button and the formatting is here . It's a paragraph style, and the font is Ariel, and the size is 18. Now we can change it, say to 12 and then click it and then it applies it. So that's how that works. Once we set up our styles and weaken, set it up toe. Have certain formatting like bold italicize underline certain size, different funds. And then there's consistency. So we need to make one for headers or headlines. Subheds. Possibly body copy and whenever the text is going to be different from the default and other variations such as maybe a different one for the question. As president answers now, if you don't have a left in here, if you click this, know that it's not if you hover over there, the type tool it doesn't have left. What we could do is said it, Teoh, bring up in the text panel here we could do is center it and then left. Align it and it applies it. There's got that plus. So if I right click up and put redefined style that redefines it to this newest one. So if I select it and I've got a line left 18 d for paragraph and then Ariel for the fund, so then if we want other text to be the same way, let's say this down here. Waas Courier New and it was 12 even a different color. Now, if I click paragraph style, it makes it just like that so we don't have to change. Following changes, Size change, A leading change of color change formatting. It's all collected in a style. Let's double click it and rename it body copy. We can see the formatting there a line left size 18 paragraph style in the funds Ariel. And the cool thing is that we don't have to now left a line change of fun changes, size and any other formatting in separate steps to other paragraphs. We want toe look the same. We can just select a paragraph and then click body copy in the paragraph styles panel. So if I click this, I can apply it to all of these. To apply this style, I selected each answer with the type tool. But what if we weren't applying to the entire text box? We could select all text with the type tool, or we could select the text box with the selection tool, then apply notice that it changes the questions as well. We'll fix that now. Highlight the first question, and then let's make it bold. Well is italicized. Ted's more styling. This adds a plus sign next to the style in the Paragraph Styles panel, indicating that a change was made to the highlighted text. We can right click on the PC or Control Click on the Mac. And besides a few other options here we could click Redefine style. This would add these changes we just made to the style, which would change all the other text that has a style linked to it, which we don't want. So I'm going to undo that with edit undo, and we just need to press the new style button again, which will create a new style based on the original one. But with the adjustments when I click on the first question, the new style is highlighted in the paragraph styles panel, and when I click on the answer, the original style is highlighted in the paragraph Styles panel. Let's rename this new one by double clicking on it. Let's call it questions, and we can select the other questions with the type tool and change them to the questions Paragraph style. Now what if we want to change all these questions to a larger size, such as 24? Well, we can change one of them manually and then right Click on PC or Control. Click on the manic over here on the Question style and click Redefined Style Notice that changes all the other questions as well, cause those are all linked to the questions Paragraph style. Besides consistency, this is really where paragraph styles can be helpful. We can redefine a style, and the changes will be applied across many paragraphs or pages, which would save a lot of time on the home page. We can define this headline here as a style called headline, and instead of a paragraph style, let's make it a headline. One. Since it is a headline, if you're familiar with HTML coding, you'll know that H one is the largest text in the range of H one to H six h one being the headline in H two. Through age six, banks have had, with age six being the smallest. This is good for a CEO in that we're showing that these air headlines main ideas on a Web page. Let's adjust the learn more text by signing it as a style called call to action, with the font being Geneva and bold. Let's redefine that notice that we have his bottom dotted line here recently just that it's just the content is pushing out of that original box. I'm gonna click and drag that down a little bit, so the text box has enough room and I'm also going Teoh, give this a little bit more room as well. Just bring that down slightly. There we go, over on the about page. Let's make this slightly larger just for consistency. 24 point and let's call this promotional body copy. Then, if we had other similar pages, if we expanded this website, we could use a consistent styling, nice large text that's very readable. Click OK and on the contact page, let's match it to the promotional body copy. But we don't want this extra spacing between paragraphs or returns, since each line here street like a paragraph because of the return. So let's just adjust that in the text panel and then define it as a new style promotional body. Copy zero spacing. And let's quickly add some titles to the pages and keep the consistency across the website . So let's add frequently dressed questions. Let's make this based on the call to action paragraph stop. Bullets adjust the size to be 36 letting Teoh 1 20% and let's left a line it. If we press all on the PC or option on the Mac while we click a create a new style button, it'll allows to rename it right away. Let's name this page title and let's move that up a little bit. America. And on the about page, let's add about us on the contact page that contact us, and we really want to make sure there's all consistent space on the X and Y axis We could look or just see and make sure it's right in the middle. I would want to look at the vertical spacing, but this looks fine. Good page title. Just between the pages, I mean have consistent spacing and placement of the titles and on the directions page. Make sure we have a rectangle here for the content area. And let's add a text box. We're going to have directions and finally, on the social media page. Make sure there have a box here for the content, and we can make it so. The titles are consistent across the site by lining it up with a column or guide, and we'll talk about painting objects and positioning objects as well later. But for now, I think this looks good. Paragraph styles really help with consistency and keeping track of the formatting of various type elements in a website. They make it so we can make a change to the style, and then it reflects across a page or an entire website across multiple pages, and we can make a lot of changes to text pretty quickly. Once we've set up those styles, Thanks and I'll see in the next lesson 26. 6.5 - Adding and Customizing Lists: In this quick lesson, you learn how to add lists to your website. We can use lists on front pages of websites to show what services or products there are of a business. We could use it on the contact page or other pages, but in this project, let's use it on the Social Media Page, which is a child page of the contact page. So double click on it. In the plan, Moto opened up the social media page in design mode. As usual, let's add a rectangle with no felon, no stroke to this area, just in case we wanna just setting, such as background color only to this area. If you don't already have a rectangle there and with the type tool, let's click and drag an area over here. Make sure these are on the primary content later. All right, let's click in here and type the text. Connect with us. Then let's type in some social media sites, which would be external links to the brand's pages or profiles. Whichever ones we add, it doesn't really matter is just an example. Let's select connect with us and set it to a paragraph style of headline then for the text here, let's highlight it. And then up on the control panel, we can add a new order lists or ordered Lis. Let's select the one ordered Lis for this example. Let's increase the size to 24. All right, we could add this as a style, say lists. We could adjust the leading above it with the header text or between India. Item on the list. But I think this looks fun toe. Add another list that matches the style. We could repeat that entire process, but a shortcut that is in many Dobie programs is to duplicate it. We could copy and paste it, but better yet delicious. Use the selection tool and hold all on the PC or option the mackin click and drag, and you can hold shift if you want to keep it aligned, and we can address the positioning has needed if we press shift and then shift and move them around. If you wanted to send him, for example like that would be fun as well, then we can adjust the text in the new box here. Photo and video just like that area. M e o YouTube instagram so That's how we add lists in Muse and again we can make them ordered with numbers or un ordered. If you look over on the right hand side, work, says bullets, if you click that, that brings out another panel as well. And these are the same options here, a Nord and ordered lists that you can also see on the control panel. But if I click this, you'll notice it moves it over in different hierarchy, different levels s so we can have multiple layers in a list if we wanted with this indentation here, and you can also just some other settings. If I reduce this down, you can see the text gets closer. The bullet point. You can bring it back up, and then the whole thing moves over if we just that. So if you could give her the default here six and 28 so if we want consistent it, adjust that. This just affects whether or not their alliance a vertical shift. If I presses down, were up, it'll move them up or down in relation, so I'll keep that to the default for this example, because it should be a line there with the text. Thanks, and I'll see in the next lesson 27. 6.6 - Wrapping Text Around Images: If you've used in design or even some word processing programs, you might be familiar with wrapping text around images in the layout. There's a way to do that in Web design as well. So far, we've placed or duplicated images or brought them over from the CC libraries panel and place them alongside text boxes or in their own areas below or above text. In this lesson, you learn how to add images to a text box and how to effectively wrap text around the images in Photoshop I've resized to of the balloon images in the high Res folder balloon one dot j pagan balloon to dot jpeg in the mews file. Let's open the questions page in design mode. Let's add some visual interest to this page by adding those two photos to it. If we want to really control where they are located on the page would want to simply place them, for example, if we wanted them to learn to the top and bottom of this text box and a column to the left of the text box. But if we want the text AC in a more fluid manner in relation to the photos so that the text raps and flows around the photos we can copy and paste them into the text box themselves. One way to do that is to copy and paste them after placing them. So Goto file place selected Balloon one open and I'm just going to click because it's already at the size that we wanted to be at, which is 400 pixels wide. Notice that it floats here, though we can put photos on top attacks and text on top of photos or beside. But in order to add it to a text box so it flows around the photo, let's copy and paste it into the text box. So Goto edit and copy. Then we can delete it with the selection tools still selected. Weaken double click on the text box here, or just use the type tool. It will switch to the Type 12 3 Double click with the selection tool. Let's click to place the cursor right here, where we want this image to be in relation to the text. So let's say the beginning of this line go to edit paste we can delete and by default the text starts at the baseline of this image. We can get the texture wrap around it better, though, so click on the rap panel over here on the right or just goto window and then wrap. If we select with the selection tool this image here, you noticed there are three options. This 1st 1 is the default position Object in line with the text. So this is acting like a character, like a letter or number, for example, just in line in the text. If we click this next one position, object to the left attacks, then it wraps it around it. If we click the 3rd 1 then it wraps around it. But it's a line to the right. The images notice that there is no spacing between the text and the image. We need better proximity or spacing, which is a design principle they keep in mind. So let's add some spacing here. We can increase this to 10. For this example, however, they're all locked in together. So ad space on the right hand side, the left hand side, the top of the bottom. If we want just space on one side of it, we need to untangle this chain here and then bring these back to the default zero and keep the right hand side at 10 there. Now, if this was over on the right and be the opposite, we could add space on the left hand side instead. If that was a problem with the spacing, There we go. Let's quickly repeat that process to insert balloon to dodge a peg. If it was already in the clipboard from another program, we could just paste it in. But this is one way to do it. We can just place it in and then edit copy. That's saying we had our Christian right here. Then when he gets good at it paced, let's align this to the right and then add some spacing on the left hand side. All right, there we go. Let's preview. This looks pretty good so far. So that's how we wrap text around images and muse. When images are inside of a text box, we often will place images in their own image frame and not as part of a text box. But it's good to know how to do that, just in case we wanted to have a few images within somebody copy area. Tad. Some visual appeal to a layout I'll see in the next lesson 28. 6.7 - Using Spell Check Effectively: In this quick lesson, you'll learn about spell check in Adobe Muse now. Hopefully, the copy that your client sends to you to be the text for the various websites has already been copy edited. However, if you're writing the copy for your own website or if you wanna help make sure there are no spelling errors on your client's website, it can help to have spell check turned on. In Muse, similar to some word processing programs, Muse adds a curvy red line underneath any words that it thinks are misspelled. Of course, many words are proper names or are not misspelled. So in those cases we can add them to the dictionary so we don't get that air. Notice a few these have the line underneath them. Goto edit spelling and make sure dynamic spelling is checked to turn this feature on. If we navigate to user dictionary, then we can add words here, another ways to right click on PC or control. Click on the medic on the text with the type tool, and it shows what Muse thinks this word should be. We can also added to the dictionary there so the line wouldn't indicate misspelling these red lines will not show up on the website. Regardless, though, when we export and upload it and they won't show up even when we're previewing it and muse or in a Web browser, it's just to indicate to us that Muse thinks the words are misspelled. If we don't want those red lines on there and we know all the words are spelled correctly, or if we have a copy editor checking the text or we check the text for accuracy manually, we can uncheck dynamic spelling and that will remove the red lines. I do suggest checking the copy for spelling accuracy, since misspelled words or incorrect grammar or punctuation as well can make a website look a bit unprofessional. Thanks, and I've seen the next lesson. 29. 7.1 - Adding Hyperlinks to Internal Pages, External Sites or Pages, and Anchors: Now that we have most of the content on the Web pages, we need to add some interactivity to them. Let's have some links to internal pages and external pages or websites so people can navigate around the websites and a specific pages on the home page. Let's use the type tool and highlight the words. Learn more. We can add a link to a page easily. Just click up top next to hyperlinks the down air there. Let's select about the about page. We could also link to a file, for example, if we want to link to a PdF file to download, in which case we would click here. It's best practices to have that PdF and other finals in a local folder already to keep it organized and to make sure it's included when we upload the website more on that later when we talk about organization and exporting our website. But for this example, we're just linking to an internal Web page that is part of this website. When people click on Learned MAWR, they'll navigate to the about page on the about page. What's at a text link at the bottom here. Type in have any questions. I let it with the text tool. And then let's make that a link to questions. Let's also add a link to the directions page within the paragraph on the questions page. Let's add some text at the bottom that will point to the contact page. Need to move this. See this? Ah, text frame here. We definitely need to bring that down. Is that text goes over it? OK, there we go. If we bring that down here a little bit and this rectangle, I'm gonna bring that below the text frame. There we go. Make sure this is that 100% with text pushed the text frame down. So we just want to organize that correctly. So we have the rectangle shape and then we have the text frame the text box. There are so let's add some text at the bottom that will point to the contact page. Finally, on the contact page, let's add links to the Social Media Page as well as the directions page and make this a clickable email link. Just highlight the email address and type in male to one word colon and then the email address. Now that we have some internal links. Let's have a few external links navigate to the social media page. External links are links to Web pages or websites that are not part of this website that we're designing. We had these links pretty much the same way. Except we type in the URL up here at http colon slash, slash and then the address. For this example, it's facebook dot com for slash and it would be the Ural of this brands page then would hit enter then if we had a specific euro for this. For an image to scan being this is just unexamined all same thing here. Me, uh, this would be the vein media profile. So whatever that you're all would be Amal's collected this male one under, Contact us if I do preview and click This was it all open an email when I'm typing this in . I didn't put mail too, you know, and then infer that's the way to coat it normally. Now, if I remove that and just press enter, it does it for me. All right, So add that mill too. One way to make sure the link is accurate is just copy and paste it from the address bar of the Web browser. And then when you're inserting it up here, you can just paste it. And rather than type again in, that's if it was the actual brand page, of course, and it's a longer your URL weaken. Just pace it in and then that. Make sure that it is accurate. There's another type of link we can add to Web pages. We can add links to specific parts of a page and not just the page itself. For example, we could have all of these questions up at the top, and then if we clicked on them, it would bring us to that specific question. Answer on the page. We don't need to add anchors to this website, since the pages air not too long, but it's important to know how to do this. And what we do is click this anchor link on the tools panel. So you click it and then we would navigate. So say, Do you need a pilot's license? Fly hunter blonde. So these are all the questions. If we had him up there hypothetically and then we just click it right here, we would call it need pilot license question. So click OK. And now if I highlight this to make it a hyperlink instead of linking to an internal page on the website or an external website or page, we can actually link Teoh. It's right here on other questions. This anchor and what's need is you can actually link to an anchor on a Web page from another Web page so we could be on, say, home. And, you know, if they have a specific question, they could click on that and it would load this page up and it would scroll all the way down to that question. So I'll show you what I mean. I'll just do preview. No, my click This navigates down to that area that would go further down, but we don't have any content. Here s so this would be kind at the top of the page here normally, all right, so that's adding anchors and coating them in by just inserting his regular links. But instead of to a page or a website, it's to an anchor point. So it's just anchors our points on a page locations on a page that we can navigate Teoh. So I'm not going to save that in this Web page. I just wanted to show how to do that. Kids who had a very long document here and we want Teoh show how Teoh get that. So how do we delete that? You know, you just click it there, See? Now I have it. We can move it around as well. That's the anchor in the next lesson will add a rollover button or state button toe. Add an interesting effect to a link. Thanks. 30. 7.2 - How to Select Content Effectively, Adding State Buttons, and Aligning Objects: when you take over consideration when trying to select objects and muse and let's use the state button as an example. What's that? A button here at the bottom of the home page that will link to the contact page. We could put buttons or text, for that matter on top of images. But let's keep this page as it is, but at a button at the bottom in what we're calling the called Action Area. As we have this button, as well as a navigation bar at the top and some links of the bottom, we will find that we sometimes have to click more than once in order to select an object that is part of a widget. For example, I'll show you what I mean. Click the widgets library or go to a window and then widgets. Library widgets are helpful pre made elements that we can add to Web pages. Open the Buttons folder by clicking on it. Then let's click and drag the state button to this area, and let's make sure we're on the primary content layer. Good. If I click the state button, I can adjust the fill color and other settings of the shape. If I click again, I can adjust the text, such as the fill color and so on. If I double click it, I can adjust the font in other settings. So if you find that you want to adjust this font and you click and it's not working, just click again. Click again and then double click so it Sometimes you have to click more than once when it's an element like a button. We'll use this technique when adjusting the navigation bar and the next lesson as well. Let's customize this button to make it a link. After styling it, let's remove the icon here. Just click it with the selection tool. Impressed a leader backspace. We'll add to and addressed this tech. So let's resize this button so it's centered on the page and the line to these columns. There, adjust the text to read. Contact us to book a ride here, make sure the text is on one line and centered. The smart guides can help us with that and change the text to page title. Yes, I think that's a prominent and relevant fund and size for that. Bring this over so it takes up a little bit more. Still centered, though. Finally, let's change the fill of the shape. We can apply a color by clicking up here, but let's select a color from the CC libraries from our color theme that we have. And I'll change it to this orange here so it stands out just like the area around it. Or we could use this other one, which everyone looks better. It can match this theme or something slightly different on a vertically center that 27 pixels above and below. For this example, when I click on this note that says Normal up here, that means this color is applied when the button is not being clicked on and when the mouse is not hovering over it, it's the default color Click roll over, and we can change the fill to this blue. That's when the masses hovering over the button. Then let's adjust the mass down to the same blue color. That's when the user clicks on the mutton. Finally, let's change active to the orange color. But for this example, that won't show up because this button is not on the same page it's linking to. They'll be relevant when we add a navigation bar. Let's also make sure the Texas set toe white for all of the states must select it and select white and let's see Active Normal Now that changed the paragraph style, of course, and we'll have a plus science. If we get a window and then paragraph styles, it's up here. We don't want to change all the other instances of the page title paragraph style so we don't want to right click and you redefine style. What we want to do is gonna new paragraph style. All right, then let's rename that call to Action Link okay, up at the top. When I have this selected notice, we have some called transition here. If we add a transition fade, we can adjust the animation basically for the rollover. So, for example, when we add a 0.2 2nd delay and then say duration of point for, and then we can ease in and ease out so it just adjust it slightly. So it's more of a subtle effect. If you've designed website before and a software program had references to roll over images , this is the same idea, but it's called states as in rollover state, normal state and so on. Finally, let's make this a link to the contact page. So if I click off here to the side and click on against, I'm stuck in the entire but in there and then up at the top here, go to contact. We manually center this on the page using columns and smart guides, but there's another way to outline objects. If this was not centered on the page like this with you, go to a line on the control panel or get a window a line. Let's look the line to content area and then click the align objects to horizontal center. And there we go toe lines it for us. Besides aligning images to the left, right or center of a content area selection or a key object, which we would indicate by clicking, we can also distribute objects. Move the three images here with the selection tool a little bit around, and then we can align them so they're the same size. So I'm gonna select a mall holding shift and clicking on them all with the selection tool And if we go to a line and there's also distribute. So if we lined knees this way along the top along the bottom or the middle of this content area, there are going to line with each other, and they're the same width and height. So if we line them on the top middle bottom, they're gonna be aligned on the top and bottom of the images as well. So if we line to the left, they're all just gonna go to the left. So we won't want to do that or the middle for the right because they're all in the same area. So if I move those around like this, you know, new select a mall and then get a line left, then they all moved to the left of their flush or their centered or right says. And I can adjust moving them up and down like these would. You could also distribute the objects evenly. So if I move these around like so and there's not, they're not quite evenly distributed, you can select them all shift click like that and then a line, and then we've got distribute from the left edge or the middle of the right. It's gonna be the same for this cause they're the same with, or also distribute by the top edges, vertical centers, bottom edges, and then you can also add specific spacing. So if we do horizontal space and then align Teoh, if you did key object, you could select which one you want to set as the key objects of the rest will line to it. But for this literacy to content area, distribute by the horizontal center. We also want toe, align them by the middle, distribute evenly, and they're right flush on the edge. That it right because it's by the content area. So why would he distribute them by this selection? Well, if we move these a little bit in and I still like them and then a line a line to you aligned a selection, this will be the edges. Basically, it won't be won't go to the edge of the page. So now if I distribute him and then also a line, um, vertically. And then there we go. So it's a little bit different from aligning to you the Contin area as opposed to a lining to the selection. And so I have most selected and I'll just visually center him right here. There we go. We'll go over pinning in positioning images as well. Later. I just wanted to show how to quickly align and also distribute images if we needed to do that. Another way to do that, besides using guides and columns and smart guides, and the next lesson will add consistent navigation across the top and add some links along the bottom as well. 31. 7.3 - Adding Top Navigation and Manual Navigation: Miss Listen will add our navigation bar to the website. Now. I've been coding and designing websites since the nineties, when I was in high school and in college and from one of the credit Image navigation bar. We had to create images out of the areas saying photo shop or some kind of similar program and then manually insert them and add a hyper leading to each of the image buttons. And unless we're using later in a PHP in conjunction with HTML and CSS or somehow adding in common navigation, such as with frames back in the day, we'd have to manually change the navigation on each page if we made a change to it on one page. In other words, if I removed a link or adjusted a link on one page of an image link and the page, you know, is one of, say, 40 pages on a website, well, that doesn't change in all the other ones. So we'd have to manually go through and change them all now with PHP and C s says. That's outside the context of this course, really, But you can change it with some of those technologies. Some of those coding languages across the board using different methods. But I used to have to go through and mainly change each one before that came along. Now we don't need to know coding like CSS and PHP Teoh a just a navigation bar across the board, across all the pages in Muse. Muse makes it so much easier to create a navigation bar, and if we make a change to it on the master page, it reflects across the entire site, so we don't have to go back and make the change on every single page. Separately, we can. Adam manually created image navigation at the top on the master page. But Muse also has what are called widgets, including a menu widget, which could be really helpful. Open the Widgets Library. You can get a window than witches library and let's navigate to the Menus folder, and we have horizontal and vertical. Let's click and drag the horse on a menu over to the master page. Make sure this is on the header layer. See how we can't see it. That's because we need to go to you layers panel, and it's on the primary content. So let's just click and drag on the box there, up to header, and now I can see it all right, and we can close the witches library. For now. We have some options for the menu. We can move it around, and we can also click on that blue circle by click off here. Just click on it. So the entire thing selected and then click this blue circle with the white arrow inside it . It brings up the options, and even after we've moved the menu Iran, we can keep customizing it by pressing that. Let's resize the menu here somewhat and then adjust the options. I'm gonna put it right along, flush the bottom of the head or there and make it flashes of one of the columns, and I'm gonna bring out a little bit like that. But let's just suggest the settings a little bit over on would actually move the server. She can see it. The options here CEO says top level pages. If you click that and do all pages, it will include child pages as part of that drop down menus. I'll show you what I mean, So if I click and drag this up here I was doing something like that and I got a preview, all right. And now, if I click on whom there's the home page clicking about, it goes about questions, goes to questions in contact. Has contact. Now see the pull down menus of for these child pages. So if I goto directions, it will go to the directions page and then social media. So it's really up to you if you want to include the sub menus there. If you click the options there that's controlled right there were, says all pages. So we just want top level pages and then that we can go to the child pages within the navigation you know, in the text, go two directions because it is linked on some of the pages. Either way works. So let's click this again and go to the options and you'll see horizontal than vertical again. We want horizontal, for this example. Edit together just means if we edit one thing setting, say, fill color for a state than it's going to affect all of them together. So if you don't want that we don't check it. I'm gonna keep that check for this example and then uniform size. Basically, if you have ah, spacing or size, what's the difference? Well, if I'm move this out here, it will show the difference. Click this uniform spacing. It's gonna have the same spacing in between the words. So questions will actually larger as far as the overall button, then about because has more letters, I would say uniform sizes better cause then there's consistent size of the buttons there. We don't want show left Icon for this example someone uncheck that we do want show label cause otherwise with the text on their automatically. And then we're says Show right icon. That's if you have a sub menu. We're including all pages like this. And then we'll have that little right icon to indicate that there's more in that menu area , and then this just affects the line. If you top align it, ally into the top of the button and so on. So for this, I must say horizontally and then center aligned. We're going to customize and style this in a bit. But first, let's add another menu, and this will be a really customized menu that doesn't use top level pages by default for example, So let's go to the Widgets library again and go to horizontal click and drag it out here. And then for the options. We're just gonna go to manual instead of top level pages or all pages. And if we click on it with the selection tool and then click on it again, we get these plus signs almost like we're in the plan mode and these air Web pages so we can add another button right there by clicking that plus son. This is just to add menu items. For this example, we could add external links, such as links to social media profiles for the client or to social websites, or to contact information. But let's make these links to internal pages that are not included up top. Let's that one menu button by clicking on the plus sign. What's adjust the size Just dragging a little bit like that. Let's make sure this is on the footer layer Civic. It'll layer and it's that menu there. So let's drive at over two footer. All right, you can see the green around. It indicates that we're on the footer, just the guides there. Let's add titles for these links. I'm gonna click him and double click, double click again, and I'm going to type in directions. And for this one type in social media. So what, this selected? Click it and then click it against. We have directions here just selected, and we're gonna add that is a hyperlink to directions and then click this and then click it again. Just so this button is selected and we're gonna add a link to social media. Now click the word hyperlinks up here and we could add it so it opens in a new window or tab. That's usually if we're linking to something that's off our site, and we want it to be in a new tab. But for this one, it's an internal link. A lot of times we don't want to have it open a new tab or window anyway, because the browser might block it or people just don't like that. They want to be able to just click and stay in the same window. But regardless, we have that option some of click off there and just make it so it just stays in the same window in the next lesson will further customize and stylized this navigation, and we're gonna really customers the colors, the roll over and resize it a little bit so really style. It matches this branding in this client and looks aesthetically pleasing. 32. 7.4 - Styling and Customizing Navigation: in this lesson will further customize and stylized our navigation. Instead of having the default height here, I'm going to click and drag the top and bottom so we get it flush here with the edges. Some first go online it to that column and then drag it up like so the top of the head or there, right along that guide. Now we could set the filled in none. So if I clicked, one of these went to fill none right there, it would be transparent, so the entire button would still be clickable. But we actually want color here to make it stand out. To make it obvious that's a button. But just to show that that's possible, that if we just wanted text there that's clickable in a button style, we could do that. I want to make it. Obviously, these air clickable areas not just have the text there, so let's had a color to the Phil. We couldn't click in here or adjust the levels in here, but let's use the color from her color theme. Open the CC libraries panel, and I'm gonna adjust it so it's a little bit different blue in the background This limit lighter blue. So the navigation looks nice, since its colors air slightly different in the background stands out. But it's not distracting. Let's preview it so far, all right, so let's add some states to this so that we can really customize the effects there. So if we click off here and there's Click This again so they're all selected and then click again. So we're on this home button here or says Normal. Let's go to roll over and let's go back to our C C libraries and for roll over. If we just one of these, I'll just all of them since we check that earlier. So again, normal is just when it's displayed there. We're not hovering over it with the cursor or clicking on it. We can adjust the texts with these changes, but let's change that later. For analysis focused on change in the color select roll over, and we could adjust this to complement or color. But if that stands out too much, we can adjust such another type of blue. In this example, this one matches the footer as well. It's all select that one, and if we select mouse down, Let's set it to the same color. That's when we're clicking on it. And finally, let's address the active state to that same color. Active state again is just when we're on the same page that it's linking to. If we make it set to a different color than the normal state, then this will indicate what page we're on. And if we click the other ones, that indicates that we've changed those as well. But let's previewed again. I'll show you what I mean about whom questions contact. I click on home and now home is highlighted. Click on contact and now contacts high lighted. All right. Now let's adjust the bottom navigation, which points to the child pages thes air linked from elsewhere on the Web site as well. But it helps to have another way for people to connect with the company, making it easier for users to find directions and the social media links. In this example, what's the address? The size of this one as well. Within the footer and weaken set the four states to the same colors as above. What's the justice size of this one as well, and a line it right there for now. And if I click on one of these and then click on it again, let's change the state's someone voted normal. Got RCC libraries. Bring that out here and for the roll over for this one. For the normal for this one, it'll match the top there and then roll over instead of being that darker blue cause then that will actually match the one behind it. I'm gonna change to this one, so it's slightly different, and we can add a transition. Fade to this. So let's set the delay 2.2 and the duration of point for we could experiment. See which one works best, but I understand those settings for this one. That's also just the ones up here, too, at a fade and, um, do point to 0.4. He's and he's out. And so let's preview that just to show you what this looks like so far home Nestle Animation where just slightly changes and then same thing on the bottom. So if I click on this well indicate now we're on the home page now. A quick note about editing the text If I click and then click and then double click. I can, of course, change the fund like so. But you can also just click on the entire box like this, and we're not down to the level of selecting the text yet. But we can click text up here on the control panel or goto window and then text, and if we just sit here, it will already adjust it without us happening to you. Click and then double click to go down to that menu. So these were manual down here. If we want to adjust those and click that and change it as well. Of course, we can also double click and type in something different and change the euro because that's a manual menu. So if I change that, save back to 14 and then change these keeping a team, let's say instead of Georgia, do you Ariel and same thing for this one, or we can, of course, go to our paragraph styles. And then from there, you can change it. Of course, some of these they're not gonna work. You just want to see if some of them would all right. But for this one actually want to do that. I'm gonna do none. And I'm going to give Teoh Ariel and then for the color. You just said it toe white, and we can also center in there as well that actually move that down a little bit. We don't want that to happen. So back up and make it a little bit smaller than there. We go so we don't change the text here. Really? Because it's automatic. It's just all the top level pages by default and the links already in there. So if you really want to customize that weaken style it and change the fund all that. But if you want a custom manual navigation, just create one like we did on the footer there. Let's preview the website so far, right? There's home. That would be the index, all right, and then if you click this, it will go to you, contact good about and click it in text, link there and go to questions. And there we go looks good so far before we work on making this website responsive, we need to add a few more interactive elements to this website. We need to add directions page, for example. Thanks and I'll see in the next lesson 33. 8.1 - Adding Embedded HTML Content: well, you don't have to know any HTML or CSS coding to design and launch websites using Muse. There might be times when you want to add some custom HTML to your site, such as an embedded YouTube video or an embedded Google Maps. I don't have the address for this business for this example, so I just have the city here in Google Maps. So you just type in on maps dot google dot com Wherever the address of the business that you're creating your website for and we can click on share and then this is a link is if we were having a text link or an image link to this map here than we would use that you're all right there. But we can also embed the map on a website. We would just copy and paste this code to a website. It's pretty simple, right? Click on PC or control, Click on Mac and Click Copy, then in Muse on the directions. Page could edit and then paste, and we can move it around the page using this selection tool. No site click, and I've actually got that content area there. We don't want that some gonna layers primary content and click Footer and see the embedded H mills and footer. We don't want that. I want that in primary content. Somewhat click and drag that up. Two. Primary content. All right, there we go. So I just click this. I can move it around with the selection tool. So if we wanted a line it like that, we can't resize it, though. Like if I click and drag like that, it's not going to work, all right, I'll just have blank space there. So what we could do, though, is right. Click over it and go toe edit HTML or Control click on the Mac. Then we have the HTML here, and this is what we copied earlier. And so what we could do, for example, with 600 we could adjust that we could say with 400 height for our we'll just leave that for 50 and click OK, and it will just the wit there. The frame for the rectangle frame is a little bit off. So what we can Dio is right Click on it good at html. So that's 404 50. So we could do is click and drag until it's 400 for the width and then 4 50 for the heights that matches like that, where we could also go to resize and then change the width and height there. This height actually needs to be 4 50 There we go. So that's a little bit skinnier for this example. But it's not responsive. We'll go over responsive design later. For this. I'm gonna actually just have the normal code that we had originally. So we don't have a custom with their height compared up here. And a lot of times they don't have this sent to responsive. Some websites do some don't, but we'll go over that now with directions. I'm just gonna type in directions would go here, and that's where the copy for the directions would dio. And it's the same thing on YouTube if you wanted Teoh ah, share a video and embedded on a website, you just go to share and then in bed. And then you can customize this one. For example, if you show more and then you can do a custom size right away where you can do a preset like this and then once you have width and height, how we want it, and then other options again when just copy and paste that. Now, if that person removes that video or does not allow embedding, then it would not show up, of course, but this is just another example of embedding custom html on amuse website so that I could click that and play it. By the way, we've used a couple widgets so far, such as the state button and the navigation menu. But if you search for Adobe Muse Witches directory, they're some free and paid widgets, and some of them do you give you a couple more options for customizing the HTML that you bring in from a site. Say, for example, YouTube or Google maps. I'll add this link and additional resource is if you're interested. But since we're just covering some custom, HTML. This is just another way toe add content using a widget instead of just pasting it in. Thanks, and I'll see in the next list 34. 8.2 - Adding a Contact Form: in this lesson, you learn how to add a contact form, navigate to the contact page unless adjust this text a little bit goes over like that, all right? And we need a little bit of space to work with to begin with here. So I'm gonna hold shift and select a couple of these and just move it down just a little bit. We can adjust it in a bit with that. They're all right. So we keep that grid format that we're working with Click the Widgets Library and click the Forms folder. So we've added buttons with state button whenever menus for horizontal vertical, both custom and pre made menus, and that we can still customize to an extent now, under forms. There's detailed in contact. So these air just contact forms. And if I click and drag the detailed one out here and I'll show you what it has Ah, bunch different things, right? Company, work, address, city, state, zip code, and so on. So if we want a simpler one, I was gonna click that if I hit delete it. Just delete one of those things. If I click, this entire thing had delete again there we go. If we want a simpler contact pages, select the simple contact click and drag that out. And then we still have options, though, to add other areas. So, like a cell phone number. And click that and toggle that in and so on. Now, if we don't want those weaken, uncheck it. The problem is noticed that the bottom here it pushed that way down the submit forms way down there where we can use Click that and also hold shift and click this area here and just move that back up. Blow that. All right, so now if I click it, this is the entire area, All right? So if I click the side options and this is called contact form but we could change that if we want to be a custom name, say, contact page. I went from whatever you wanna call it, and then it'll email to you by default emails to your email associate with their creative cloud subscription, so you can change it if you want. So, after sending that, does it stay in the current page meeting? It'll just have this text in here saying information submitted. Thank you or does it go to a new page so you can create another page? For example, just like the contact page. You just add one. Say we could add a child page to the contact page that says Thanks. You know, thanks for submitting information. Now go back to the contact page of home page or whatever, or we can keep it simpler and just have some text of the bottom right here that will indicate that they send in the information. So this is pretty self explanatory. What criteria we want to include if they put their name, email and message and the point of having contact pages is something I don't want to put their emails on the Web page. They're afraid of getting picked up by spammers. But a lot of email clients and our days do a really good job of Phil turning that if we had the contact page on here, we wouldn't necessarily need this on here. We could keep it on there either way, right here. The capture That's to prevent bots from sending information spam using this form so that we get the emails from people that we need to get emails from and address spam and and bots. So if we click on that and go to recapture 2.0, it will add this down here. And you need to click on this where says learn more in order to sign up for a key in order to use that. But you can't customise this, for example, different background, and you can have an image or audio. And then what kind of size that we just prevent bots from sending in a lot of information. So if you want that, we could add that in. If not, you can set. Not either way. Now we can customize this a little bit. Knows how that says for mercy. There's text there. There's also text and submit message email name and so we can use our paragraph styles. Or you can just manually change this to a different fund. For example, if you wanted to like that, you can make it larger and what not, So this could be customized as needed. You would need to set up the form with your Web hosting provider to make sure it works with that server. It should. We'll go over exporting and also uploading and testing websites later. So if you just previous right now, it's not going to work. Probably because it doesn't have a server that is then sending that email to the recipient email because it's an offline website. Right now, it's going to be local HTML files. For example, once we export it right now, shares amuse file and some embedded images and so on, that's just another widget to check out. If you want to add a contact form on your website, we'll go over considerations of testing it later when we export the website and uploaded Thanks. 35. 9.1 - Adding Breakpoints for Master Page Responsiveness: art in this section. We're going to be adding responsiveness to the website, and why would we want toe add responsiveness? What is responsiveness? Well, as you resize the browser or you're looking at a website on different screens, for example, mobile device, a tablet compared to a wider screen, computer or TV is gonna often look different. We want to make it so. The website responds to the re sizing of the window or the different sighs screens so we can see the content on the website. And, for example, the navigation doesn't go off the edge of the window because we haven't resized. So the key here with responsiveness is repositioning elements and re sizing elements. So before we add some responsiveness, I want to just preview the website so far. If you get a file and then preview site and browser in a lunch in a browser window, and I'll just bring this up here and so we have the site here. If I click and drag and it just keeps getting larger than photo here, and if we want that effect, that's fine. But I think I'm gonna actually adjust this so it doesn't get larger than a certain size will go over how to do that And same thing for this text box here. But everything else looks good for the most part, but you'll notice as we get smaller. The text here runs over the photos and the navigation of the top structural running a little bit close to each other. And then also, that logo up there gets too small. So when he adjust whether or not some of those resize and also we need to reposition some of these things, everything else looks okay. For the most part, I think that looks fine. If you just imagine this is a phone and you're scrolling. We've got some empty space here. Get this running over it and too much space here. So that page needs a little bit of work. If you get a about and we re size it, that looks pretty good. Except once we get to this, um, again, the navigation is gonna be the same across and then questions that looks OK, except right here where we get text right there. It's kinda squished in a one or two Letters on a line is not good, but once we get there. That actually looks pretty good. That's probably closest. So what we want besides the navigation as far as being responsive and if he gets larger on a wide screen TV. Obviously this is just be background color or background here, but we're thinking about when it gets smaller. What does it look like? It but the Mac size here we have set to 1000 pixels wide, and then this one. This widget here for contact is not responsive, is far with size Guv's. And so we'll want to adjust that as well. And then Social Media. We could add the images. This is just example, of course, but, uh, maybe realign some of this, but as first re sizing it, it really messes up around there. So it's looking directions from where this is not responsive as far as the size, so we could add a different map of the same map. That's just smaller at a certain point, but we'll check that out. So that's the preview so far. How do we make it so? The Web site looks different at different sizes. Instead of just running off the page. Well, we add what are called break points. If you go to the A master and you support says 1000 are fluid Break point President, we have 3 20 of the smallest and see how the navigation gets a little bit squish there and then 1000 as the max severe ever in there and you click on a reset 2000. And so that just previews the browser with changing it. How do things will react? So the first thing we want to do is add a break point here on the master page, so click and drag this over a bit, and once it just gets a little bit close, there may be a run here. This is about six, maybe 6 80 around there. All right. And if that's not exactly on 6 80 you can you can double click it and then type it in there 6 80 if we want that and click. OK. And so at that point past there, the navigation really messes up. And of course, you know it gets even worse down there. So what will want to dio is at 6 80 You know, once you get smaller than that, we'll need to redo this navigation are reconfigure it. So right, click over it. Let's just click off here. Just click the entire object here. Right, Click on the PC Control, Click on American. We want to go to hide in break point. And so now it won't show up in 3 20 or 6 80 and then it reappears here. All right. And we will have a navigation. We just have toe redo it. Once we're below 6 80 it's probably mobile device. Maybe some tablets, for example, would be smaller. Now this over here that the logo re sizes and we actually don't want that. We wanted to stay the same. So if you click it and I pray at the top, first of all, we can pin items a pen and objects that always displays and one location in the browser. See, we could use those options or you can turn on depend on the left center, right of the page or container. So I'm gonna pin this to the left. That means it will just keep this distance from the left regardless, instead of just moving around relative to the center and the left and right hand side. And we also under resize want to do none. So if I hit preview what that will do. Click and drag. You'll see. Now it stays. It's staying the same distance not from the edge of the browser, but from the edge of that container, all right, and then it stays the same with now. Once we get smaller, though, it does re sizes you can see, so we need to fix that. Let's go back. And once they get smaller so they get smaller, let's click this, click it and then resize none. So it is a little bit smaller in the one compared to the other. If you don't want that, if you want the same, what you can dio is go. I'm clicking this here in the regular 1000 break point and under resize. Just click that we'll see 1 67 by 70. So if we go back over here, click that and go 1 67 by 70. That's if we want it exactly the same. It's now if I go between these two, it stays the same. So that's personal preference. If you want it smaller in the smaller screen size and smaller browser window or if you want the logo to be consistent. Either way, now we also want to pin this navigation about the top. So click that and we have right here 10 to the right. So when I click that and with that selected still and I pin it to the right hand side now, if you click this, we do want to responsive with for this navigation. So now if you get a preview, it's just a little bit different, all right, so it has that consistent spacing from the side of the container. All right. Once it gets too close, though, it disappears and won't redux the navigation. So it's a little bit different, and the next lesson will continue adding some responsiveness to our website. 36. 9.2 - Resizing and Re-positioning for Responsive Design: Now, let's close out the A master page and go to the home page and you'll notice there are errors here for the master page break point. Now, we don't really affect those in this view. We think weaken, jump to them in here. But we can create break points just for this page. All right, So the first thing on this page that what I want to dio is if you notice this, it gets larger and larger to the edge of the page. We don't want that. That's actually make this not 100% on the with. So what? We canoes, You make it just slightly smaller than the width here. Maybe 95 actually. Bring that over a little bit on the right hand side, too. Something like that. And I'm gonna bring this sort of lines with the smart guides will snap to it. And now when we preview, it gets smaller. Right? But once you get a certain point, it doesn't get larger. And I think that looks better with the text of the text. Doesn't go all the way across or someone line. And then so that image of the balloon doesn't picks late either where it just keeps getting larger and larger with larger screens. And you could adjust the fit in there if you wanted, or you could keep it like that. Just depends on what? Look work, trying to achieve that. The big thing is that we want all the information on here and to be readable. So we want to fix this. All right, so close that out. And let's simulate changing the browser with and it really just depends on when things start to mess up so around. Looks like a 20 actually about 7 72 So I'm gonna do you about 800 actually, on this one, add a break point in double click on it, make sure it's just 100. Exactly. And then once we get smaller, see how get small like that. What we need to dio is clicked. It jumped a break point. I'm gonna move this down just a little bit. Move this down as well. Let's see what that looks like. A click and drag. It gives it a little bit more breathing room. And we could my actually at another break point here. We're just looking at how it reacts. It really goes off culture about there right about there. And we could move this up to you. Let's go ahead and actually do that. I'm gonna click to jump to this break point, right about dare Let's at a break point. Where was that? 6 14 Let's make that 6 15 And with the selection tool this that I'm gonna bring that up all the way up there. All right? And if you're not satisfied like, say you want this is in the middle, we've already aligned in the middle. But if you want to make sure stays in the middle, you can also click it. We'll just click this one here and pin in the middle right there. And I've already lined it, but it does help it. Keep it in the center. But then when I was looking OK, now this see where it gets to about 500 or so. Even before then, let's do probably about 5 20 all right, after that really messes up. So what we can do is make this take this text is another technique. Just learning the techniques here and if you see where says format text across, break points, Click the other one, the other t there where it says format text Try get the tool tip here format text on current break point. So what that means is we're gonna format it Onley in this break point, so we're gonna make it smaller. So it fits a little bit better in this break point. Maybe not that small bit. All right, So when it's up here, it's a larger fund. And then once you get smaller, gets smaller as well that the type gets smaller so way at the bomb at 3 20 it really messes up their eso. What you can do is again resize it. So in here, we can resize this up like so see how it reacts. Move this down, all right? And then actually gonna add a break point right before that. And here, let's move. There's up a bit. It's all about responding to the size and the space that we have, so we can actually move this up. All right, so it'll be there. There. Bottom break point. Let's go to the smallest break point. All rights. That looks pretty good. This needs to be now just a little bit All right, So everything's readable. I think this up here. We can actually adjust throughout, though, so let's just bring that up. Just looks better, I think where it's not super large. Yeah, let's bring all this up. Let's see how that reacts. All right, So hopefully get the point. You would just repeat this with all the different pages and just reposition and resize elements at different break points. Now, if we look back on a master also, at a certain point, probably want to make this one this, uh, ree Justus. Well, so right click on this hide and break point. All right, so we're gonna have different menu there in a little bit. But for now, that looks good. And the next lesson will continue. A fume or techniques here adjusting the few of the other pages to make him responsive. Look better at different sizes. Thanks 37. 9.3 - Adding More Responsive Design, Testing, and Problem Solving: All right, Welcome back. We're gonna continue adding responsiveness to this website. Go ahead and double click on about. And let's see how this one reacts we can do is make that tech smaller. Right? And if I think the images look good, they're already responsive within height. We definitely want that because we want them to get smaller as the browser changes size. But this Texas, the biggest thing on here, and hopefully this is effective toe learn, because this example is pretty easy. What weaken Dio? Let's see where it gets. Really? I wouldn't see about their Let's add one there, 5 60 So let's just select all this text here, and we'll do this to the title is, well, just a different. And we could add paragraph styles for this as well. But I was gonna change fund. So again, the large T format text on current break point, and we're just gonna make a little bit smaller. Maybe not that small. Okay? Something like 18 for that. And then for this one. What say 24? All right, so what does that look like? Well, it starts out really large, readable, and then at a certain point I get smaller. That'll stay like that until the smallest break 0.3 20 and you might notice all this blank space at the bottom. We do need to fix that. So this is in the 5 60 one. So let's bring that way up just clicking and dragging there. Anything else to see a text frame here? So bring that text freedom up, a swell that might have some returns in there. That's good. Delete those that doesn't have that dotted line. All right, so there's that example that stays like that at the small screen. So you're on the phone tablet and then computer. All right, we'll add again. We'll fix that navigation a little bit. All right, now let's go, Teoh, Get home. We're gonna about let's go to questions hard on the questions page. I've just moved these over agile want to file place instead of having them as in line with the text. I just wanted to show you how to wrap text around images if you wanted in the previous lesson. You can keep it like that if you want. If you like the size of the photos, even at the smallest, it fills up the screen, and then you make it larger in a little bit smaller. If you want responsive photos, though, let's just go to file place and you complacent over on the right hand side and just make sure up here, it says, responsive within height. And on this one we can toggle the photos so they don't show up on the lower ones. And we actually make the text smaller as we make it smaller, like a mobile device, a tablet and then screen or TV. So they are getting smaller and then eventually we just have the text there. So it's up to you how to configure that, But I'm not going to go through that cause we've been going through that in earlier lessons just previously. Just again. You want to use the type tool that's formatting text only on the current break point before making detect smaller. And then you can right click over elements not just the navigation but also photos or other things to hide that in certain break points and on the contact page what we can do if you click and drag it over at a certain one, say about 500. Just make the text smaller, and that should be fine. It's really up to you how you want to configure it now with the contact form here. If you want to make that disappeared a certain with say, right there, we can actually click it right Click Hiding Break point. So we'll just have the regular contact information when it's smaller, unless we needed also hide in this one hitting that one either. Now, when we launch our site, we will be going over how to test this. So I'm gonna keep it in this example. But you can see it's not responsive. There's widgets that have responsive forms like that. But, um, in this example, just the default is not responsive. That's included in muse here, so we can customize it in the coding. But again, you don't need a no coding to do websites and muse. But we do need to adjust that. So we just have the contact information at smaller sizes. If you want, we could actually be Take this and move it over like that. That would actually better, and we can move this up like that and then here we can actually the same thing. I can just take it across the top there and quickly move this up. So this is the default and then eventually becomes like that when it comes like that. So again, in this responsiveness, you might have, say, some images that go across the tops a 45 images like that, and then say, instead of having a four by one grid like 1234 maybe you'll have to buy two. At one point, you might have just the photos in a single line. Just 1234 and really quickly the directions. Of course, this is not going to resize. It's not responsive that Google map, of course, but what we want to worry about is that text. So once it gets to about there one at a break point and just make directions smaller and maybe there's well, there's really simple example that a bit smaller 14. Okay, there we go, so direction stays on one line. It's at 14 point, then it gets larger there and then larger. There it was actually a just that map, for example. Once we get to this sighs, maybe you want a smaller map down here. So what we can do? We have this just go to at a copy we can do is in this 5 55 break point. Let's go ahead and right click over that. Go hide on break point and then So we don't have until it's out to this full size. Still see part of it there. But then here, let's say the directions are here across the top, and then we have it down here. So what we can do is and it paste, we're going to right click over it to edit HTML. And I'm gonna make the width here only that's a 500. Okay? And it's got this extra space on the sides. What we can do, it's gonna resize. See, that is set to four 54. It's actually four pixels more than what the original is. So for this where we did five hundreds and listed five before, I think it's adding some from there on the edge, so this should fit perfectly, all right. And then we need to give room for the directions, of course. So when I move this down and then the directions would be there. All right, so Let's test this for the beginning. It's out here and then you have in a little bit smaller there. All right, that's one way to do that. Underneath you do something like that. And so about default. It's to the side. But then, wouldn't you get to a certain point? It's over, You know? We need to hide this one, of course. So when a right click hide a break point. So it's here, then it's below it. Same size, though, and then from here, it's actually below it. So just slightly different size. And on social media, I added. Just a couple of break points, just lined him up. He's in alignment and right here with the text frame. You can actually just drag that out sorts on one line if you want. It's really up to you. Just show me another example. We could add images in there, but I don't want to waste time going over all that because we have already went over the practices and principles of that. So we should know how to do that by now. I'm gonna close that out and actually previous in the browser preview, the site and browser all right. So we have home about questions, contact everything looks good, can drag it over, begins to resize. Everything is still clickable. Nothing's overlapping. All right. About same thing. Those images get smaller than the text gets smaller, which we had adjust manually questions. But the photos to the side. I noticed this here and see that we have the footer actually overlapping it. So let's fix that. This is part of Web designers, you know, double checking things. So that's the questions page. All right, that looks good. And then finally, directions that in a certain point, it goes to the bottom there. All right, that is gonna crop out a little bit at the very smallest, because we put that at 500 But let's get of social media. All right, there we go. And this would need more photos. OK, so I wanna grab attention, add visual interest so we could add some photos. There's Well, let's go to the questions page. That was one that was messing up a little bit. See? But this Ah, that looks fine. That looks fine as well. All right, So what we need to do is make sure see that little text box here. But then there's the content. There's another text frame right there. See? Right there. So that's the for cause questions. So I'm going to move it up. I could actually be in the same one if we wanted. Go ahead and just do that. So see this content from here? Let's go and bring that down. Give us more room. Let's go back over to this one. Same thing, that content area rectangle. It was not down far enough. I think that one should be fun. It looks like and double trick. There's someone give this a little bit more room. Okay, was tested again. File previous Sign browser. All right, questions looks good. Still looks good. And that looks pretty good. So you want to just make sure it looks good in the browser with the responsiveness. Try to give me a little bit more breathing room if it's doing something like that, and we can also check the size of the text frames, make sure that content area rectangle is lower than the text frame that we have, and it should work out. Thanks, and I'll see in the next lesson 38. 9.4 - Adding a Separate Mobile Menu Using Responsive Design: are. You know, we've been spending a lot of time on responsive design, and in this lesson, I think it will be really fun because it's going to show another example of using a widget . Those pretty made, customizable elements where we can add another navigation bar that s'more conducive to a mobile device for example, a tablet or phone. So go ahead and navigate to the master page and you'll notice we have the navigation disappear when it gets a bit too squished up at the top. Because I wanna be is functioning, the words start to run into each other. So what we can do? We could make a smaller menu Over here, we get insert images and make him image links to all the pages we can at another widget and just resize it, make it smaller. But if it's responsive, it's still going to get a little bit smaller as we make it very small there, right? Unless we start it small like that, it's another option is to actually add a pull down menu that'll have the logo at the top and then have links to the pages that we can toggle. So I show you what I mean. So when we're on the master page, we have the header, that footer, the primary content area. We get the logo here. That's pretty much all that's on the master page at this size, What we can do is go to you the widgets panels to get a window, which is library, and we want to go to panels and then accordion. So click and drag that out here in up of the top. Let's make sure it says can close. All What that's going to do is make it so that we can click it and expand and close it up. We don't need these three, though. This is just if you had some titles on a page and you can click and it gives more information, but we can use it for a navigation as well. So what we want to do is I'm gonna move this first, make sure we're on the right layer. So we're on the header. That's good accordion right there. We can see. And then what we want to dio is we don't need this one here, so I just click that one and see how it's highlighted. Some in a press, backspace or delete. I'm gonna click this one backspace or delete and then click this one. This is the one we're gonna use. All right, So what we're gonna do is first I'm gonna copy this here. So I'm gonna edit copy, and then I'm going Teoh, right? Click on this and say hiding break point so that that's out of the way. So it'll disappear there. We're gonna reinsert it somewhere else. We want Teoh double click up here so we get just this title here. So it's a cursor and then just go to edit paste and that will paste the logo there. We want it centered so we can go to window and then text and then center it right there because this acting is part of the text There, it's in line and someone close that out to go back to the selection tool. And we actually don't need this right here. So if I click this one's click it again and click it 1/3 time, we select this section of text right here. We don't need that. So press backspace or delete and then this area no sign. Click it and it toggles it, it opens, it shuts it. What we need to dio is go to vertical menu in the widgets library and click and drag over so that it's and see how it kind of highlights it. Want to make sure it's inside there and to test that you can click and make sure that appears and reappears. Alright, If it doesn't, just try to reinsert it in and make sure we're inside this area here. All right, so what Weaken dio is click and drag this So it takes up this entire space here. All right. Said you get an idea of what we're gonna insert in here and let's click and drag it up too very top and then make sure it goes all the way across. I want this to get a 100% all right. Same thing for this. Click this once, click it again. Could drag it over 200%. All right, now we need to customize it a little bit. So let's bring it up. RCC libraries. And I'm gonna click on this one so that we see menu item normal, and I'm gonna change it to this color and they're all edited together from our earlier options. Here, you can see that edit together and click that again and then roll over. Let's make it kind of complementary color mouse down. Same thing, Active state, same thing. And we can add a transition if we want this one. I'm just gonna have immediate change, so there's no delay, and let's move this over. Let's go ahead and go back to here. Make sure we still have the other one and noticed back. Here we have this. This is still here on all the other pages at the larger side, so we don't want that. So what we would do is either in this one, we right click it hide and break point. Or if we're over in this one, we get right click over it and say, Hide in other break points. So either way, So I go back here or I'm just gonna right click. Make sure this entire thing is selected. There we go. Right. Consumers, we have to select it first. So we're stuck in the entire object and then hide in break point. All right, so let's test this out. Navigation gets pretty small. Then it's gonna change to this. And we need this to be closed by default. So close that and let's go to Smaller. Larger. And there we go. OK, that's going to try this out. File previous sighting browser. All right, so let's resize this. And once it gets to a certain point where the navigation gets a little squished and also closer to the size of tablets, there we go and also mobile phones. So if I click this, it's gonna bring that down. I can navigate, navigate through here on a phone or tablet, Click on here and so on so you can customize the background of that as well. We can customize. If you did a manual menu, we could include the other two links as well. It just really depends on what you want for that alternative. Many there. So just to show you another example of responsiveness, thanks and I'll see in the next lesson 39. 10.1 - Designing and Adding a Favicon Image: earlier in the course, we talked about a favor. Con image. It's that favorite icon that if you add a Web page to a favorites list or when we're actually on the site, up on the top on the title bar will see a tiny image, and it varies by size on different screens of different devices. But the cool thing about Adobe Muse is that we can choose an image even if it's not at the correct size. As long as it's a square, we can add that as a favor con image. So if you are in Muse and you gotta file and then site properties and down here under content favor con image, you click that folder and select a file. And so usually we would have favored conduct I c. O in the root directory. However, it's a little bit more complicated than that now, with different devices and different image sizes. But with muse, weaken, select even a larger file and muse will resize it and add it for us. So open up photo shop. If you have creative cloud, you should have access to that. If you have the entire creative cloud. If you have muse through that, and there's two ways to create. If we want to just create the default size, you would go to file new and then 32 pixels by 32 pixels at 72 pixels per inch. Something quick create, and then you open one of the images that you want to use so you could go to the high rez or you could go to the low rez either way, for example, if we're going to use this image here, we could pull that off the tab there, used the move to on the tools panel and then click and drag that on here. It's gonna be a lot larger, though, so we can hold, shift and click and drag the corner there to maintain the correct proportion. And then we just want to look at the composition and at that, how we want then hit, enter or return in a press control plus, and then here we see the actual pixels 32 pixels by 30 shoot pixels. And then you would say that as a PNG is fine, so file save as and then PNG and I actually have one in the support files con favor con that. Is that one right there? I have another one that's larger than because I'm going to show you another way to create a favor. Con image doesn't have to be that small to begin with. So I'm gonna go to file open and from the high res images. Just select one. We have this one here. And if we go to image and an image size that will show us the current resolution, that's a very high resolution. 12 70 pixels per inch. We can resize it with the preset crop. Remember, we want tohave the same width and height because this needs to be a square. If we try to add a favor, con image and use. And it's not a square, it will say, Hey, I need a square image. So I have this 1000 pixels by 1000 pixels and then 72 pixels per inch. We just want to work on the composition here. We can look at it at 100% in a little bit. All right, double click, then control or command. Plus All right. Looks good. And you can say that as a PNG on your computer. Now I have to and they're already favor con there and then favor con large and so in Muse. Once we want to add that good of file site properties and then go to favor con image, open that up favor con large, then, okay, and now when you go to file preview site and browser and then you can see up there at the top right next to the title of the page, we have that favor con image. So if we added it to favorites on some mobile devices, on image will be the icon. If we save a Web page as a short cut, for example. So that's how we easily add it in Adobe MEES Thanks, and I'll see in the next lesson. 40. 10.2 - Checking for Consistency, Ease of Use, and Adding Titles: we're about to export and or upload our website. Now, make sure your Web page looks consistent across the board. So what I like to do before a launch, a website is just go through and make sure there's consistency. Make sure the links work and all of that. Now, on this one, I did do many different types of lance just to give you different examples that you might work with, like embedded HTML lists, putting text inside specific text boxes, air flowing it on the side. So there's not gonna be a whole lot of consistency besides the navigation bar. Or maybe where the titles are. But let's just go through and you can look at it, of course, in the browser. But I also look at it in thes Web pages, and I do notice, for example, this right here where says about us if I go Teoh are paragraph styles has page title now on the other page. When we had fixed earlier, do you notice at the larger one? I need a fix this page title. There we go, and this was on frequents questions on the default 1000 pixel break points, so fix that And then when I get smaller, of course, would you change the size of the fund right? And then contact us. You could just make sure these air all aligned right in the middle of this column here. See that smart guide right here and what else to go toe resize and then look at the X and Y access. If we move this up, we'll see that it changes that 32 stays the same 91. So if you want to type that in ST 90 and then go to the others, say, for example, this one resize, and then why access 90? It's gonna just move it up, so it's exactly in the same spot. There's just an example of looking for consistency and, finally, social media resize. So then, if we go to preview just here in Muse, we'll get about knows where this is. Questions contact. So it's consistent alignment and consistent placement and font style of all the titles on the page. That's just one example. We also need to add titles if you notice not just the title of the top of the page with the literal title of the page is if we're previewing those. It was just the name of the page that's not good for Seo search engine optimization. And we really do need Ada's custom title there. So in each of the pages and titles, so you can just go to page and then page properties and under options. Here's the page name. And so what? We can dio uncheck same his page name and keep page name. They're the same cause that's the name in this navigation and page title is going to be different. So what to say and then over in about Paige Paige Properties and then uncheck say HMAS page name. And then this one will be blends and beyond about us just adding that name of the company are. So I just kept ahead and we did that for all the pages. Same technique. So now forget a file previous sighting browser harder than you can see. The top balloons and beyond has been added to the page title and then home for Click About . It's got about questions. Contact that also directions in social media is That's how we add titles to each page. If we don't want it to be the same exact name as the page names here 41. 11.1 - Adobe Business Catalyst Upload: Once we have our website how we want it, we can go ahead and actually export it and or uploaded. So one way to do this is to use adobes business Catalyst. So if you go to file and then published a business catalyst and it's asking for a site name and that word or words will go right here, so it'll be your site name dot business catalyst dot com. This won't be your own dot com. We're gonna go over how to do that. But for this one, it's good to test. And you can also use adobes hosting plans. It costs extra. If you want to use that. However, I'm just going to show you how to use business Catalyst, which comes with Creative Cloud that doesn't cost extra. And you have options here, published a new site, and then you can customize the euro. So I'm gonna call it blends and beyond test site, and I do encourage you to change some of the text and, ah, you know the contact info because we don't want to actually publish this balloons and beyond website, you know, this is an actual company that gave me permission to use their photos and their texts for the class project. But you want to publish your own site. So whatever you've been working on, if you've been working on this exactly, just change the text and photos a little bit. Um, the high res ones are fine to use. The low res ones air from them And you can, you know, switch up the names which up the low up here, and you can then go ahead and publish it as a test if you want. Um, you probably have been creating your own side, but if you've been phone along with me, that's fine as well. So I want to put Bloom to be on test site and then for the euro. Lives have blends and beyond, you know, click. OK. And so it's exporting all the pages that each team l the CSS images and any other content, and it's really coating it for us and then uploading it so we can previewed this website. All right. So published, complete. And now I'm on the internet here balloons and beyond dot business catalyst dot com fort slash index dot html, which is the name of the default file that we start on. So that's our home page. And so we can go through this and click. And this website is now online, and we contested out. Make sure everything looks right. And again we can resize it. Get that cool mobile device friendly, many there as well. All right. And then directions. The third party plug in here that embedded Google map and then social media. All right, let's go to contact and we contest this, but in my name Hello. Threats on the website. All right, click submit. It says form received. And I'm on my Gmail on another window and I did get the email. So that works. It's already configured with a business catalyst. Now this does not. Of course, I look his professional compared to you know your own dot com. Now, how do you do that? You can send it for Adobe hosting, and it will integrate with business catalysts. And you just have your own dot com. You can register. It just costs extra. What? We're gonna go over how you can sign up for other hosting and registration companies and actually export or use the FTP uploading and adobe muse in the next lesson. 42. 11.2 - Exporting HTML and CSS Locally for Upload and Using FTP: part of the previous lesson. We uploaded the site so we could test it on business catalyst dot com that is included with Adobe's Creative Cloud subscription. Now, if you do want to use it over hosting, just click on this link here, assign a domain name. It'll be extra charge, and you can sign up through Adobe to get your actual dot com. Now you don't have to do that. You can use other companies as well, so we're gonna go over some different options now if you go to file and then upload to FTP host now. This is if you first get a domain registered, and there are many, many different companies I use Go daddy dot com, and you can sign up for your own dot com like I have good creative academy dot com, chad newman dot com And that's pretty inexpensive Now the hosting is not too bad either, but it's a little bit more usually, so you need to register your dot com and you can also host your site through the same company. A lot of hosting companies also register and vice versa. Lot of registration companies also host, but I use a different company for hosting. I use dream host dot com there many different companies that you sign up for, though, and the hosting company is the computer, basically the server that stores your HTML CSS images. JavaScript files any files that air part of your website on their server, and then your registration company tells it to go to that specific server. The instructions are gonna be different, depending on the registration company, But you're basically going to want to sign into your registration company and change the name servers to point to that hosting companies so they will have instructions to fill that out. And they have customer service reps that can help is, well, most of the companies have that. Now, when you're signed into your hosting company, they will give you an FTP server address to use as well as a user name and password. What you'll be doing, basically, with this option is uploading your site from Adobe Muse, using the years name, password and FTP Server given to us from the hosting company. And then it's gonna upload it so we can make changes and then save those changes and then upload it to the FTP server. This really depends on what hosting company you go with. And then, of course, your user name and password. So that's gonna be different. I can't tell you that, obviously, because ah, that would be through your hosting company and I'll have some more information in the additional resource is now the other way. Teoh, upload your site is to goto file and then export as HTML and what this is going to do. I'm just going to give it a name. So much change location, two balloons and beyond website. So, like folder. And now I'm going to go ahead and press OK. Oh, and I do have to give it a name. So you can't just put a name. This is a fake dot com. Obviously, um, I'm just gonna press, okay, It just wants a dot com in that space, and this is exporting all the each team of files. It's not uploading. It is putting it in the proper format. HTML files CSS and JavaScript and images on our local hard drive. Now this is a warning just because our contact page form doesn't match now again, the contact page that's the one thing that you will also want Teoh configure with your hosting company. They will have specific instructions for that. All right, some hit. OK, then I'm actually going to show files that we got. So it's this right here, Someone double click on that. And now let's look at this. We've got 1234 56 html files. Got to XML documents, which is the markup language there. And then the CSS folder. Some style sheets, images. There's a roller images in the correct size that we want and then scripts. PHP files, JavaScript files. So we don't have to know coding. Now you could open this HTML file, for example, in a note pad or Dreamweaver and actually look at the coding. But this is not a coding class. We don't have to know coding, and those of us who do know coding this is actually quite convenient to use Muse, and then we can customize it later if we want. So what you would do with this is you would take all of these files and you would upload it to the directory instead of using adobe muses FTP upload. You would use a free program such as File Zillah, and you would use your FTP log in user name and password credentials. Sign in, and you can actually just click and drag them toe. Upload it to your dot com that you've registered. So once you go in register dot com and then point your registration your dot com to your hosting site. And then you log into your hosting site through the FTP server using an FTP Explorer such as File Zilla and whatever you make a change. So you made it changed about. You can click and drag that up to replace the file, and then the changes will apply on the site. Yet another way to update your site is to use Adobe muses and browser editing and A Z long as you created the website with Muse, you can put your own dot com here, and then you click next and put in the credentials for the FTP upload and FDP's air short for file transfer protocol. You just uploading. There's HTML files, which are the Web pages where should then downloaded onto the browser software, of course. And so you don't have tohave adobe muse. You can actually sign in any browser editing and click on images and change different aspects about it. Change the information, changed the text on the page and save changes. And Adobe Muse and browser editing is actually logged into the FDP. And so it's an easy way to update the site. Just click on images, changed format and click on text change formatting and then save changes. That's just another option. Teoh update the site. What I do. What my favorite method of updating websites is is to actually just export the files. So I have the files. I have H human files and all the other types of files CSS images, JavaScript and so on. And when I make a change toe one of them, then I can just click and drag it up and update the site using my FTP Explorer. Now you might prefer to use just muse and make changes in there, and we could still do that, and then you could export it again. Or you could just use the FTP host upload in Adobe Muse, literally just personal preference. It's doing the same thing. It's uploading the new images, the changes that we've made so that the website is updated whenever we make changes 43. 11.3 - Course Conclusion: thanks again for enrolling in this course. Let me know if you have any questions. Hopefully, you've learned a lot about the principles and practices of Web site design and launching websites. Feel free to post your website in the projects area for feedback and just to show us what you've designed. Thanks.