Make Single Page Websites and Newsletters in Microsoft Sway

1. Introduction: Hi guys, I'm Anthony. And in this course we'll be exploring the many unique and really useful features of Microsoft Sway, we will undertake several class projects, namely around building a single-page website and a newsletter. Both of these examples can be adapted to suit a range of different purposes. But in doing so, we've learned to organize content, control themes and layouts, embed images, video, audio, and rich media content. And then later how to begin new Sway projects, more range of document types or built-in tools. As the course progresses, we'll look at sharing and controlling audience success, as well as collaborating and multi authoring to build a sway with others in the browser. By the end of the course, you'll be confidently using Sway within your range of document making tools, creating and sharing content for a range of purposes and audiences unable to create online documents for a wide range of business, personal on creative enterprises. I'm really excited by the potential sway house to offer in the new medium of creativity and presentation it presents. I'm really delighted to have you on this course and I look forward to seeing what you create by the act. 2. What is Sway?: Okay, let's start with a quick tour of what sway is and what it's not. Well, what is sway? First and foremost, it's an online presentation maker for talks, stories, new litres, single-page websites, only limited really by your imagination. It's incredibly powerful. It's an alternative to PowerPoint when you're creating connected to the internet. And this idea about being connected to the internet is something we're going to loop back on a few times throughout this glass, able to optimize content for whatever screen you're viewing it on. And this is where it excels. It reorganizes the content for whatever size screen and whichever orientation you happen to be viewing it on. So how it displays on a large screen tally will be entirely different to how it displays portrayed on the mobile phone in your pocket. And it does all of this intelligently without you needing to do anything. It's browser-based. It's capable of multi authoring its documents. So multiple people can edit the same document at the same time. And it is a great alternative to PDF on the web are sways can be edited to even after being published live. It also takes care of the formatting for you, offering tasteful options to choose from and eliminating much of the time that's often wasted with unnecessary formatting of content and allows interactivity. You can embed a VR areas rich media content and content hosted on other sites. So what is sway not? Well, firstly, it's not a tool for complex animations and transitions. Sway does have built-in transitions that occur moving between aspects of the presentation, but they're not something that you can update. Particularly. It's not at all for extensive content formatting. As I said, it doesn't allow you to spend a huge amount of time tweaking formatting in the way that you count in something like PowerPoint. It's not an offline editing tool, and that's something I suspect over time may become available and it's not designed primarily for paper-based final versions. You can see I've caveat to that as well, because you can currently exports to Word or PDF, the quality is variable and it's something that's being worked on all the time. So I suspect gradually that will improve. But it wouldn't be my first tool to reach for if my end goal was to create a document that was going to exist primarily in PDF or Word format. It's not part of the office filing system. So when we go to office.com in a little while, we'll be able to see that sway files do show up in your recent and recommend it, but you can't access them as part of one drive like you can other types of files. 3. Getting Sway: Okay, let's get sway. So the first thing we're doing is going to office.com here. Now if you have an enterprise business for Education, Office 365 accounts, you can sign in here and you will already have sway as part of that facility. It's also available completely for free with a Microsoft account. So you can either sign in if you already have one of those, or if not, you can click sign up for a free version of Office that will take you to this wizard where you start to create your own account. I'll let you do that yourself as I already have one, I'm gonna click sign in, which is what you're going to need to do once you already have an account mate. So we'll put in our email address, follow it through with the password, at which point we come to our office account. You can check your in the right one by clicking in the top right-hand corner, where you will see your own account details come up. And there is initially the option to sign out as well, because this is now an entire Microsoft Office account, rather than just a sway account. You've got choices in here. So you've got the Office apps down the left-hand edge. We're not going to dwell on those particularly, but I have done in other courses. And if you click on the waterfall, the very topmost left button, then you can see that opens up to show you your recent and most popular apps. And if you click on All Apps, then expands the list to let you view everything that's available alphabetically. We're going to choose swipe today. That takes us to this screen, which is the home screen of the sway RP itself. You can see it says Welcome to sway. Um, I go to the task bar. It's now prefaced. Sway dot office.com will come back here in a minute, but let's also look at how else we can acquire sway. Sways available as an app for the Windows desktop as well. So here I am in the Windows store where you can see having searched for sway, I now have the option to choose get because it's a free app. And once I've downloaded it, I can choose launch. Once I launched the app itself, you can see here I come back to that same sway homepage, but this time in an on my desktop, we're going to stick mainly with the browser version for this class, although the experience is fairly similar across the two, will only come back to this desktop version if there's a difference we need to take note of and just to come up to date and avoid any confusion. There was once a mobile app for sway, that's no longer the case. And Microsoft suggests now you go to sway dot office calm in the browser as it shows here, and access the tool through the website to ensure you have the most up-to-date tools and facilities as well. So with that in mind, we'll be sticking to the browser version. 4. Interface Quick Tour: Let's take a quick tour around the sway interface. Now once we've made a few sways, they'll appear here. So when we come back later in the course, we'll have some recent sways to view haha. But below that, we see start from a template with some different types of projects we might get too involved with or get inspired by a featured sway, where sway shows us some sways that it thinks are good examples to help inspire us. Now, sway documents are not part of the office filing system, as I said earlier. So when we go to our office, WHO here we will see reticent sways listed, but we won't be able to download them in the same way we can other files equally. When I go to my OneDrive here as part of my same office account, I won't see sways available in any of these folder locations within OneDrive. They just live in sway on their own. That's not a trend, that's a change in the way Microsoft or organizing documents is just an eccentricity of the way sways are organized because they only live in the browser. In creating a new Sway, I have three immediate options. Create new, which will start from a blank, start from a topic, which will, let me have an outline of what might be useful based on a topic I choose or start from a document. And this will let me upload a Word PowerPoint or PDF document that sway will do its best to change into a sway document. And we'll try out each of these lighter. Initially, just to get to know Sway, we're going to use one of the templates. So to get started and see what's inside, let's click on one of these template examples to get us going. I've chosen newsletter. And here you can see immediately it comes up with a new layout, giving me this full screen layout, I can choose to start editing this sway immediately. Let's scroll down to see what happens. So we can see there's some pictures. There's headers, there's top-level text, bullet points available. Smaller images, you can see these headings sliding in. So there is some slight animation, The appears as you scroll. But largely the document is mapped out for us already. Let's go back up slightly and just look at some of the modules available here to flip through this stack. And we can see these pictures are behaving like a stack of photos that we can scroll through. And let's click on start editing this way. So it's telling us now it's preparing this template for us to use. And it will no longer just be a template, it'll be our version as part of our sways. Now we're in the story line view of sway. Here. We can see at a sway is actually made up of cards. If I click on this one that's Heidi to text card, then you can see once I've clicked on it, now, I have the option to add to what is the text area here. I also have levels of emphasis that I can affect this text with. So at the moment, let's click on heading. And now it changes that text to be a heading. Now it has the option type of background with it. Let's just undo that. So there I used control and Z does the keyboard shortcut for Undo, and you can see it's returned to its previous state having selected that text, let's just select part of it, be clearer. Then I have the option for emphasis, which we would consider as bolt. And I can choose that again or accent which probably would consider as a pilot. And then if I just grabbed these two, let's look at what else we can do. We can add bullet points and remove them, and we could add numbered lists and remove those as well. And if I select some text separately, I then have the choice with link to make a hyperlink outs to other pages on the web. And that really is all the editing tools for formatting that are available, which may be disparaging for some, I think that also might, some people might be elated because it then means that the tool itself organizes the content in a way that it sees fit using its templates and themes. The last part of this that we're going to look at is here where we can set a level of emphasis. So here on this button it says set the emphasis on this card to subtle. Set the emphasis on this card to moderate. So let's have a look at the difference. Let's now go from Storyline. Two. Design. And design is like a preview that you can edit. So here is that first level of texts that we were looking at a minute to go like that. Let's now go back to storyline and change the emphasis to moderate, and then go back to design. And we can now see here that it's made it all slightly bigger. It's put it in some horizontal lines itself. And it's done that based on its interpretation of the theme of this template. So whatever template we use that will change. Let's go back to storyline and return it to its original subtler level. On top of that, the other options we have to delete this card from the sway. Now because the Sway is made up of cards, I can grab this card. You can see I'm now holding it having grabbed its top border. And it's now moving around. And you can see that green line jumping to where it may consider. I want to put it let me pick it up and I'll put it back where I got it from. And in that way, you can move around all the content in your swayed very easily before we go further with content cards. But let's just have a look at templating and a little bit more detail. So I'm going to get back to design. And now upon them right next to the undo and redo buttons, I now have this styles Chooser will get to know the style chooser in more detail later when we make our own. But just to start with, let's have a quick look. We can convert the sway from a vertical document to a horizontally scrolling document, which means it now moves horizontally like that. And we can change it into slides, which now means that as we move through the slides, they jump like a PowerPoint presentation rather than a scrolling document. Now below that, we have an option to customize our sway with custom colors, typography and textures will come back to that later. That might be useful if we want to match our own branding. And then below that, there is this library of templates available. Let's click on one and see how it impacts our document. So you can see with each change, the interpretation of what is titled text on the background picture changes slightly. Let's move down to some of these other ones and just have a look. You can see for each row, there are different color schemes. You can see we can vastly change the tone of the sway By the way that we choose between the different themes, but the overall content is staying the same. Let's move down to some text here and just change a couple more. So this tool would be incredibly useful later. The last part of what I want to show you, just going back to storyline to get back to familiar ground is how we actually present the sway. And if I'm presenting it myself, then I can just click on this Play button up here that says play your sway to present it or see how it looks to others, at which point now I'm playing the sway. I like can scroll through it like we did when we were viewing it as a template to before. The last part of this that's useful is to know about this button in the bottom right corner there called the navigation button. And when I click on that, it uses the headlines that we've chosen and the headline image to make a menu system. And I can jump straight to different parts of the sway using that tool. Okay, let's get to know each of these areas in more detail. 5. Single Page Site - Adding Content: Okay, let's look at creating our own sway. And the first project we're going to start with is creating a single-page website. So my first job is to get out of this way that's playing by clicking back on the Edit button in the top right corner. And then from here I'm gonna click back on the sway head are in the top left corner, which is going to return me to the master page. Now remember we said we had three options. Create New, start from a topic or start from a document. But let's just notice first the underneath vats where we used to just have start from a template. Now we have this rho titled My sways, where I've got some sorting options to see those that are edited, those that have been viewed, the analytics for them or any of the I've already deleted that I don't want to keep. And when I hover over my Sway, It now gives me some information about it. I can see down here the view count for the number of people that have watched it and its creation date as well. And when I click on the ellipsis, the three dots, I get options to play it, to share a link to it, to make a copy of this sway to duplicate it and use another or to delete it because I no longer want it. So that's again, another interesting feature we'll come back to. We're going to go to Create New. And here we are in a completely blank sway. So under Storyline, we have nothing so far. Under design, we have nothing but the default background for this template. And if I go over to play, you can see it is also completely blank. If I click on the navigate button down here, again, there's nothing here to use. So let's get back to edit and start to make this sway. So we're going to produce a single-page website. Now when you start to design job like that, it's always good to start outlining what you want. I love to do this on paper and there's some great courses on this site about doing that. I'll link to those courses by other people in the description below. Save a little bit of time. Here's my plan that I'm going straightforward with this one page website. And this is because the project I have in mind is for a website that I already have, my EdTech hyphen music.com website which supports the YouTube channel that I currently run. And here you can see the site's already fairly flushed out with links from the front page. And so I'm going to use this content to help me define how I'm going to recreate my Sway document. Let's just strip this back to its bare bones. So what I'm going to be creating is a site with a title and a header image at the top, then a welcome message, and then details of the services I offer. Examples of work, links to other sites such as social media and then a contact form so that people can contact me from the page. And we'll do all of this in sway. So let's get going in this box. I'm going to immediately put the title. I want. Hey, we go and it gives me the option straightway to our text images, videos, and more with this button. However, I want to put a background behind this first. So I'm gonna click on the background button here. And immediately it's brought up this suggested sidebar, which actually allows me to add content that I search directly from within sway. So I can use the Bing search here to search for any of these suggested cycles. You can see it's chosen key words from the title text I've already chosen. It allows me to upload an image from my device or access my OneDrive via the browser as well. But if I click on the drop-down for suggested, you can see it gives me other sources that sway is already integrated with. So rather than searching this time, I'm going to click on From my device. And that opens the browser where I can browse, strike, strike to the decide well, so I won't, I have a folder, folder for me support j such that i want to find, we can see it uploading and there's the thumbnail of the picture. At this point, I'm just going to click on this details arrow and show you that when I click it, it drops down to expand these two separate rows. Now I've got a text color just for the title and the background has formed a new card underneath with its image information. Where if I want to, I could type in a caption. And now that I've clicked in that text area, you can see I have the same formatting tools for the caption as well. Let's just see what effect this has. So we'll go to design and we can see that it's taken that picture and interpreted it immediately in line with the template as well as the Tikal. And if I now go down to the, that lets me view the menu, then we can see it's put to that first heading and image as the first row on that line. Let's close that again. Well, straight-out, I realized that this isn't what I want to create. So I'm gonna click on styles unchanged, a vertical. And we can see that that's changed. And let me close this side view. And now you can see that more of our images available because it's now being viewed full width. If I close the browser from its full-screen view and start to re-size it. We can see the power of sway where it's completely reorganizing that content for me in line with the size of the browser. Let's get back to storyline from here. Let's start to take advantage of that plus button to insert more content. I'm gonna choose a text card here, but let's just check what's going on. So I've got suggested options that it thinks I may need. Then just all of the text options. I can either insert a heading level text or just a paragraph level text. When I go to media, I have options to insert images, videos, audio, embed codes from other sites, or upload some content. And when I click on groups, this allows me to group any of the other content in different ways. We'll come back to this later because this is exciting. For now, I'm going to choose that text option that was here, but was also under suggested. So there it is that when I asked that, I'm now going to take the text that I used on the original site here, and let's paste it into this box. There we go. Now without changing the emphasis from this level that is considered suckle. Let's take a quick look at design. And there's that text down there. Let me now go back and change that to moderate and see how, what difference that makes. And here we can say it's made it ever so slightly bigger, still in line with the same font. So I'm not sure how I feel about this template yet we'll say. But let's keep going for now because we can go back in, into any of that content like to write from the plus this time, the next thing on my list of things to do, go to add a few more cards to move us forward quickly, just to get a bit more text on here to give us something to work with. Ok, so I've just started two new sets of Header and text areas. You can see one for articles and videos and then one for Newsletter with its text as well. And you can see it puts it in this darker gray surround to keep it together. Let's do the third one together. So we'll click on plus and then choose heading. And you can see it's now brought it up in that level. This one I'm going to call resources and then click plus and then text. And let's just be clear on that though is the plus button. But if I move down, you can see a green line appearing below where I might want to add something external to this third section called resources. But at the moment I'm working within haha, let's paste in the text I need for that. And now you can see I've now got three separate sections that I can fold up. Articles, news, lactose, and resources. And let's just check what happened when I folded it up. He took these separate levels of cards and then put small versions of them next to each other. And if you recall from when we looked earlier, that gradually happened when we had lots of things in each section where we can see a preview of h. Now that I've got that whole area, I can move that up as one unit and move them around on the page. So the use of cards in sway is a really powerful way to control content and move things around. The last thing I'm going to do in here is just to look at some hyperlinks as well. So let me highlight, browse my writing. And I'm going to use that link till now to paste the hyperlink that I want that to be linked to two. And then let's do the same with each of the others. And interestingly, now when I look at the summary, you can see that these previews show the hyperlinked text as well. Let's just take a quick look at what this looks like in design view. And I think at this point I want to go to style and make some big level changes here. So let's find a completely different style that feels a bit more like what I had in mind. Let's try an alternative on this row. And I think that's the one I'm going to set log. 6. Single Page Site - Adding Images: So we've got a great site that we're already working on. Now we're going to look at adding images and media. And with that in mind, we're going to add a several types of media to get used to outing that. All of them, we're going to start with searching using the Bing search. Then we're gonna go onto embedding from other sources such as YouTube. And then we're going to look uploading images from the desktop. And then when we're comfy with all of those, we're going to look at creating stacks to combine these in different ways. So here's our existing sway in design view. And if we just take a scroll down it, we can see that it's got some content now than we did in the last lesson. Not a lot of media to it, it's a little bit dry at the moment. Let's just check the navigation view to see all the sections. That's good. That's what we expect to see. And now let's go into story line and use the cards layout to start to add a little bit more to it. And our first intention was to add some images to these headers. So having expanded this resources section, I'm gonna click on the background image next to the hydrogen card for resources. And open up this suggested songs bar where you can see I've got the search box that we have done to fight earlier that will be initially a Bing search as well as YouTube or Wikipedia or says, or I can choose some of the words it's already identified as being something I might want to use or I can add from other sources. Let's type in here. Music resources. At which point it's going to do a search on the internet using Bing. I'm bringing Brock different images that are already available. Now straightaway, I notice up here I've got a filter between everything, images and videos. I'm going to stick on images because I just want to picture at this moment and I'm going to leave this tick so that I only have Creative Commons images, things that I'm allowed to use the unlicensed to be shed. And then I'm going to search and find something appropriate. And when I'm happy with the choice that I think is a reasonable file size. I can take it and then choose add. Now I can see it's thumbnail there. And let's have a look in design at how it comes up. And there I see it's now formed a header next to the Tikal resources to stamp that section slightly separately. Let's do the same for some of the others. Okay. I've asked you to in a couple of those pictures now. But when I go to design view, I'm not very happy with the quality of them. So let's go back to the story and look at how we can swap these out. So I'm going to click on the details of that picture to expand it out. At which point that image forms its own card and I can click on delete. Now when I go back to this view, you can see that I now have the ability to click on the empty background again and go back to this view this time, rather than browsing, which sometimes can be effective, I'm going to choose my device, and this time from the folder, I've got a few images ready to ongoing to use. This isn't cheating, definitely. I'm going to use something that I've already prepared that I know is a bit more like the quality I want to have. Now when I go to design, there we go, it's more appropriate to what I'm using as well. Let's get back to storyline and do the same for this third one, resources. Okay, that feels better to me because the images I've chosen and now more to do with the subject of the website. And let's just go to the Navigation option. And now we can see on the menu it's used parts of those images to make thumbnails to browse with as well. Let's look at some other types of media we can add. So in this section on articles and videos, I'm now going to use the option there to go to media and then choose video. At which point I'm going to paste in the URL of the video I want to find which you can see it's already ready for me and click on it and choose Add. And now here I have that video option there. Let's do this a couple more times. Okay, let's see what the design view makes of that. So we can see all three videos appear next to each other. And if I click on any one of them, today we're starting a multi-part series. It will play in line or I can maximize it like I would in any embedded YouTube clip. That's really nice. But let's just go to play. And you can see the little animation that came in when they loaded then as well. I've added a couple more videos in here so that we can see when we go to design that it will stock unorganized videos by default, just like pictures, so that they can be viewed. 7. Grouping Images: Let's have a look at what happens when we start to group videos and media. So I'm going to grab this one and put it on top of the other one. And you can see it's come up with the option now to group. And when I release it, then now in a grayer box, a darker gray box of their own, which I can fold up and contract or expand separate to that. And you can see here, there's two in that. Let me just grab this third one because they're part of a set. There we go. And now all three One, 23 videos are within the same group. Let's click on the group and at the top it gives me the option to ungroup them if I change my mind or click on group type. Now, let's just see what the options are. I've got this automatic group. Well, let's check the design and see what that's done. That doesn't look any different, it's just kept them in a row. Let's now click on that again and choose grid and this time see what happens. And we can see here it's made a grid of those videos separate on their own compared to the other three, all of which can still be played. Let's go back to storyline. But now that I've got them in a grid, remember this other things I can do so as a group, I can now change the level of emphasis. Let's set the emphasis to intense and see what happens now. And now you can see they've taken up the whole screen. Let's go back to storyline and change it to moderate and see what effect that has. And it's made it slightly smaller. But actually it's kept them together as a group, which is quite helpful. So I'm going to keep that. But what I'm gonna do then is take these two or udacity videos that are related and do the same thing. So one way we grouped was to drag things on top of each other. Let's do it a different way. Now, I'm going to click on the tick box next to this one, and the tick box next to that one. And now choose group. And now those two have been put in a group together. And let's look at the group settings I would want to allow. So I'm gonna go for greatest Well and then choose moderate for them. So now when I go back to design, you can see because there's three that it's made it into a square and it's made a different decision with these two because there's only two in that group so far. And it's made them into slightly more Landscape letterbox type previews as well. I left this one on its sign down there, but let's go to that one and click on it. Remember, like anything else, I've got these levels of emphasis that I can apply. Let me click on that and then go back to design. And you can see that it's allowed me to set that level of emphasis to each of those just the same as I would with images or any other media. Let's just fold everything up so we can see more clearly what's going on. So inside this articles and videos section, there was a header cod, which meant that it grouped everything under it. And then we inserted some videos and batch them into groups, which now means that everything inside here can be folded up and you can view those as well. Remember, we can move any group around because the cards combined to be picked up together and we can even fold that went up. So if I wish to, I can now fold up all of this content to make it a really clear and obvious to me what the layout of my site is on really quickly unfold and the events to see in more detail. 8. Adding Image Stacks: Next we're going to look at adding stacks. Let's focus on this third section are called resources. And when I expand that back out, we know at the moment it's got a title with an image for that. And then it's got a single line of texts with a link. Well, I want to add some more content here. I'm gonna go down and I'm going to click on this plus haha. And this plus allows me to add different types of content. Remember, we looked at text on media and now we're going to look at group. So inside group, I've got five different choices. Automatic West sway will make its best guess. Layout as a grid. Layout is a comparison and this is nice because that slider in the middle that's you drag across to images to make a stack or flipping cards or a slideshow? Well, to start with, let's go for stack. So now we have a stack in here. It's gonna let me add content to the stack. Remember when I look at it, I've got the same options that I recognize from other types of group where I've got the group type at the side, except now, it gives me further options. And I've got choices to change the emphasis level or deleted. Well, let's click on Add Content and the contents. I want you out these images. So I'm going to choose that. Again, it brings me up this familiar suggested sidebar. I'm, I'm gonna once again wants to upload content that I already have ready. And this time I'm gonna choose my device again. So from this location I'm going to go into a folder of other pictures I have ready. And I'm gonna choose to select the first hold down shift on the last, because I can select more than one image at this time and then choose Open. And here we can see it's added multiple images. So I could have done this one at a time, but you can see them all uploading together. And they're thumbnails dropping in as well. Now without doing anything else, let's go back to design. And we can see here they stock that when I click on them, they rotate as the stack would. Let's go back to storyline and have a look at what happens when we change the emphasis level. So we'll click on the group hunting again and go to moderate and just check what happens now we can see it's got bigger. And just to prove the point will go all the way to intense. And we can see that they now become screen size images. So there's the option just like anything else to change the intensity level of how much the screen focuses on that idea. Let's add a different type of group. So we'll click on plus and then go to group. And this time we're going to, It's not a stack but a slideshow. So here we can do the same thing. I'm going to click add and then choose Image, and then choose Upload and back to the same folder. And we'll pick up from where we were last time and add a new batch of images, which again we can see uploading. But this time remember we chosen a different type of group. Instead of choosing stack, we've chosen slideshow, so let's see how they appear. And now next to the stack view, we also have this slideshow that jumps between the images. So this is great. What a way to be able to move contents. What I want to do now is pick up this entire stack here and put it in the section above. Let's just fold this up so we can see what's happened. So now you can see here, I've taken that the second group from here that was the stack and dragged it into the newsletter section. I'm because I see this preview of each group. It's really easy to see where the content lives. Now let's go back to Newsletter up here. And we can see newsletter has this stock of inspirational quotes, I'm Resources has this larger slideshow of quotes as well. The last thing I'm gonna do with stocks whose go back to the intro text that was welcoming, go to Group and insert a slide show here. So I'll click on, add on image. I'm once again upload and insert some images I've chosen there. And choose Group and click on Add Image, which I'm going to upload. And then upload my chosen images into that slide. So section, let's drag them overlay. We got. And so when we go back to this welcome texts, we can now see there's a slideshow of images next to it too. 9. Embedding Forms: So there are a whole number of things we can embed in this way using embed codes. To start off with, we're going to have a look at embedding and Microsoft form to make a contact form. So back on our example one-page website sway, I've added an extra section at the end since we last looked to this, could contact me. And inside this section, there's a heading with a damage, a textbox that I've set to moderately emphasized, and then another text card with some links to different social media channels. Let us have a look at how these appear in design view. There we go. You can see that slightly more moderately emphasized text appears a little bag up. And there's the links. And that's something we can do in design view that we haven't really talked about when you click on an element because we're not in the actual play version where in Design View we can agitate it from here. So if I click on this edit button, I now bring up a box on screen in front that lets me edit that text as if I was in story line view. Let's try again. I also have emphasis option where I can change the level of emphasis and you can see it reloading their, well, that's joy again and take it back to moderate. We can see it refreshes the page to do that, but I can do all of this without returning to storyline view. Well, the third thing we want to do, we said is to embed a Microsoft form. So let's go back to storyline view. I'm going to click on the add option here. But instead of choosing from the suggested things, we're going to choose this embed option here. Embed now allows me to paste embed codes from other sources in this location. So let's go make one setback in Microsoft Office, we can choose forms. Let's go to the menu and go straight to expanding it here so that we find forms that way. And in Microsoft Forms, which again is still part of your Microsoft account or your Office 365 accounts. This format looks similar as well, doesn't it to sway, let's click on new form. And we'll add a new text box. And then another textbooks. And then another textbooks. And for this one will allow it to be a longer answer. So we'll click on long answer. And actually because we want to know what everybody wants to get buck through each of these and check required. So let's click back on each one here on tit required. And so we've made a very simple contact form with the person's name, email address, and comment. And we can see because they're all required, they've all got asterisks next to them as well. Now what we're going to do up here is to click on Send. Sand is gonna give us the option to share this form onwards. So we want anyone can respond. We don't want to have to change that. But what we do want is this embed code option here. And when we do that, you can see that the area above changes. I'm, I can now copy the code that's in that. Let's go back to our sway. And in this price, I'm going to do control V to paste and paste that code in there. You can see that it's now got to strolling arrow next to it because it's quite a lot of text compared to the space it takes up. Let's go to Design and see how that appears. And we can see now the contact form has been added to the page as well. And it's got its own scroll lines because it gets embedded in the page. Let's now go back to Storyline. Will choose to make the emphasis slightly bigger. And now we can see it's easier to view on this web page because the page might be viewed on a mobile phone as well. So we don't want it too tiny. And now it's really easy for people to click and insert their name, email address, and comment, and submit that back. So let's have a quick go at that. Unless you put some details in. And we'll submit are full. There we go. It's told us it's being submitted. Let's go back to forms. And now in this form, we can see there's a number one next to responses. And we can see the information about the response that if I want to see in more detail, I can click on open in Excel. So here we can see that the test name I submitted with my email address, the message has populated in this spreadsheet on over time as Messages drop in this spreadsheet will be further populate it. Or you can always just check them through the forms page. But on our sway, that form remains part of the page to be used every time someone needs to contact me. Let's just do a final review of our one-page website in sway. Here we can see all of the different costs that we've set up as well as the groups that are nested and folded. And then let's play it and see how it turned out. Okay, we should be really pleased with that. So now from this first set of license, you're able to build yourself a one-page website using Sway based on all your own content or content that you find using the Bing search Built-in. Now from here on, we are going to have a look at a couple of different use cases. Rather than building a one-page website. And put these skills that we've learned into practice in slightly different contexts. 10. New Sway Presentation from Document: Next we're going to look at a few different ways to start a sway, starting with uploading a document for a presentation of our three options. This time we're going to choose start from a document and then uploading this case a PowerPoint. So here we've got all of the images and text from the PowerPoint stripped out into separate image, untaxed cards in sway, ready for me to start organizing my new Sway presentation. 11. New Sway Report from Topic: This time let's start a sway from the start with a topic tool. So from our three choices, we're going to choose the middle one start from a topic, and this time it lets us put in a criteria that via Wikipedia, it's going to search for and find some outline information. So keeping with my music theme, I'm just going to search for that and click Create outline. And at this point it's going to build a new Sway around that topic word. So here you can see very quickly it's pulled the content that we might want. And it started to organize the layout of what it considers a logical structure to talk about the topic with. Its also pulled a variety of images that are appropriate to use and captioned them. And when essay writing or report writing, this could be a really useful tool to help with the creative process of writing. You can see there's a great many structures here. I'm just folding them all up so that we can see more clearly the layout that we've inherited. There we go. So even if we remove the content, we've got a really nice structure to write to using the content that we've been given. And down at the bottom there's even a references section, but identifies all of the origins for everything that it's given us as examples already. So in that way, the stock from a topic tool is a really great way to build content towards a written report or presentation using a structure that it gives you by identifying the Wikipedia content relevant to that subject. 12. New Sway Newsletter from Template: We've left one of the more useful features of sweet a little bit later. And that starting from one of the template examples built in this time, we're going to use a newsletter, much like the single-page website that we worked out earlier. We need a plan. And in this case, my newsletter is going to be again linking to the same project on monthly top five style lots of newsletters used this approach where you count down groups of things in each addition. So here I'm going to have five tech tools for the music classroom, for lessons from the books. Three of my own ideas to top practitioners, I'm highlighting one way forward so much as we did when we first looked at. This time, we're going to start from a template. And we're going to start using this internal newsletter template. Having a quick look at it. I like it's clean layout. And I feel like it's got a structure I can work with. So I'm gonna click start editing the sway. And when starting from a template, the best thing to do is to fold up each of the separate groups to see what you're working with. And now that I've got an idea of what's there, my first job is going to be to change the titles to match the sections of my five different areas of my newsletter and make the missing sections. Okay, so I've jumped ahead a little bit and skip the skills that we both looked at when we were learning to make single-page websites with sway, let's just check what I've done. I've added new images to each of the sections. And you can see each group now has the rights, Tikal. And I've put in place second level headings for each. The only one I haven't done that four is down here where it says one way forward. Let's just have a look at how that works on this one, the two top practitioners, level one. And here you can see it says underneath heading one card, heading two cod and then text. And that's something we haven't touched before. So let's have a look at how to do that in this last section, one way forward. Let me expand that. And you can see at the moment it's got a heading one caught on a text called, Let's have in a new level, but we see here in the suggested heading one, so it's easy to miss that under text, you've got hedging one on heading to. There we go. Let's add in the second level and give that a second level heading. And now I'm going to drag it up here above the first one. So now we go to a heading two card on some text. Let's fold this up. And now you can see it shows the same layout as the others. I've also at the very bottom, added a new category for follow-up with me. And if I just expand that, you'll see it's exactly what we had when we made our single-page websites. We've got a text cards with social media links and then an embed card which has the code from the Microsoft form that we used before. So I think before we go any further, let's see what this looks like. And here we've got each of those five sections. Remember where we had a countdown of 54321. And you can see that this second level heading gives a slightly different font and size that this template interprets in this way. And for each of the five sections, the same thing occurs. And on this tablet light, we've noticed that this text flies in. And if you've noticed very carefully, you can see that the image is at the top of each heading. One section actually move slightly on their own and if I click on them, you can see we can expand them to their full size. But otherwise, you can see that there's that slight bit of animation on both the text on the image. And let's look at the one we agitate. Yep, the one we edited one way forward now has a heading two and a text as well. And then there's our form at the end. So if we couldn't see the edit box, then when you scroll up slightly, it appears in the corner. Lets go back to that. And now what we want to do is add in some proper content. But before we do that, let's think about whether this could be a template. Now they sway is at the point where we could duplicate it and use it again and again to outcomes maintained for each monthly newsletter. How can we do that? Well, there's two ways to duplicate. The first one is to go to the ellipsis in the top right corner here. And we can go down to duplicate this way. And if I click on that, here we go, we'll create a copy of this sway and add it to your mice ways page. You can rename it first if you want. So that's a useful way of doing it. Otherwise, if I go back to the sway button in the top left so that we go to our sways. Look, here's the four that we've used so far today. And then when I hover over the ellipsis on the swipe, I can then use the duplicate icon there to make a copy of this y. And I must admit I prefer this because it's much easier to see. Let's just copy for use. Let go. If I just duplicate that, we'll see now that there's an extra one going to appear as that one will push all the others along the rug. And I wouldn't choose i to take now just so that we can see. Yep, there we go. There's our five where there were four minutes ago. So let's get back into the one we've been using. Let's start with expanding one of these sections. So we'll start with this first section, tech tools for the music classroom, where you can see I've now got five sets of heading to title cards with a text area as well. Let me fill these out quickly for us. Okay, let's do the last one together. I've pasted the text in here, and let's add an image, which we then click on on upload from my device. There is the image I want. And now if we just go to design to have a look how this appears. And we can see the image there. However, when I view the others, we can see that the text appears next to the image y Is that happened here? Well, I just need to move the image slightly. So let's go back to storyline on. Let's lift that image and put it above the text. And I, when we go to design, we can see that the picture appears with the text next to it, right. 13. Populating Your Template: And when we look at the row now we can see those heading, two level headings. Now a payout as the text against a black backdrop, which is really helpful isn't good. Why? Using the minimize and expands tool to be able to work your way around your Sway document to see what's going on. Let's fill in some of the other content that's not going to need Chai Jing, Such as the way forward. Okay, two sections to go, Section Three about books and Section four about my ideas. Let's go into section four. Now, I wouldn't want to change this up a little bit even though I've already said to outline this because I want to embed video. And I'm going to need to add an extra card again. But this one, I'm going to go to media like we did for the website and out of video card. And this time, when I go to search, remember I'm pasting the URL I need, and then choosing that video I like before I want to add it here. Let's see how that appears. That's great. I've got the title above with the image to the left and the text justified next to it on the right. And let's do that for the others. And let's just take a look to make sure that all three videos appears we want. That's great. Let's go back to the storyline for the final section. We need to fold up this section on my ideas and then we can see what's remaining. So everything here is done. Since the section above using this compacted view to check is really important. I think I've just got this section three to finish. Yes, that's the last one. So now we're going to expand section 34, lessons learned from the books. I'm consider haha, we could do the same thing I did before, where we expand each of these and put the title and the text with the link. But let's consider some other options for changing format. Let's think about using the stuck tool that we learned in the earlier lessons. First of all, I'm going to need to remove some of this content that I don't want With the Delete button. That was simply enough. And I, when we add in, I'm going to add a stuck. So I'm considering how I'm gonna make this content work within the stock, the concern, so I'm going to add is going to be pictures of the book covers and then the captions will be the information I want to share. So let's do that now we'll click on Add Content and we want to add images. And let's click on the image to do that. And then I'm going to go and upload from my device. And now we can see in the stack we have the four images we won't, we haven't really controlled or define the stack yet. We can do that from group type here. Let's just have a look at how this appears. And at the moment, it's just a rotating set of images like that. Let's go back to storyline and consider what group type might work best. We have slideshow that we haven't used so far, but we also then have a slideshow with thumbnail images underneath. Let's choose that. And now we can see here that we can see the titles, but actually it leaves a bigger box around them. So let's consider other options. And let's look at how a grid appears. Okay, it makes them very small in that context. So let's go back. And this time we'll launch the emphasis and see what difference that makes that looks better. I think any Vega will be a little bit overwhelming and that let's consider how to get in the content that I actually want to use unless idea in our thinking as the captions. Hey, we go and we'll continue this way first. So now that we've got the text into the caption area for each image, let's have a look at how that behaves. Now if we go to design, this doesn't help us much because when I hover over this area, won't expand the caption. It will just give me the options to edit or delete. So actually, I need to go to the top right corner to the play button, and now that I'm playing it, so let's take the opportunity to look through the whole newsletter. The animation still occur, which you scrape. The images appear as animations. So that's really nice. And here we see the books. And this time we'll do, I can click on a book and make it larger, which I may choose to. Actually, it's clicking on the caption at the bottom. There we go. That brings up the captions and latch. I really like that in this situation because it forces some interaction on the part of the reader to check what they site. That's quite nice. Let's keep going. And there's all videos inserted that we know we can play directly off the page. Now the final links as well. Flask, right? Very happy with that. So in this one quite long, less and sorry about lots, we've gone from understanding how to create a single-page website to how to use grouping to create a really snazzy newsletter that can be shared around. And in the next lessons, we'll be looking at how to share an embedded to the things that we've created. 14. Sharing: Right, we finally made it. We've got some sways that we're ready to share with the world. So we know that anywhere we go, we can log into a browser and we can present these sways or access them. And using the Play button lets us play them that way. But actually the most useful way to use Sway is to share them to others. So let's just hover over that initial one-page website we made. And when I click on the ellipsis there, we can see the delete button, duplicate button, play button that we talked about earlier and next to them that share a link button. And if I click on that now it's going to open this share relink dialogue, depending on the settings for sharing, anyone with this link can view this sway. So that's a quick way to get the link and copy it to your clipboard. There you go. Then you can paste that into anything, an email, another document, or social media channel or anything like that. Probably what's most useful to you though, is to be able to share it by controlling the settings in more detail. So let's open this one-page website swipe. And now that we're in it in the top right corner next to play, we have seen that familia Share button. Let's click on it. And now we have some options in here. The moment it says anyone with the link can access, they swayed, which is true, but how they access it can change. So we can invite people to view it. And at the moment, if I copy the link that with that button, there we go, it's copied, then that will make a view link. So sharing that link to anybody is the best way to just share this way so that it can be read. However, part of what makes swipe right, it's the ability to multi author. So how about instead of that, I click on the Edit radio button there. Now the link has changed and I can copy and edit link. Now when I paste that link to somebody, they can then edit this way on multilevel through it with me. I'm not there for sending them a copy that they can work on. We're both working on the same document. And remember, as I said earlier, we can carry on working on this sway long after it's published in any locations it's been shared. So should we share it on social media or imbedded in a website or make it part of some documentation for our company or a brochure for an event, whatever it is, we can carry on tweaking and editing and improving it well after it's been shared and the content will update because it's the same version. What if I change my mind about all this sharing? Well, if I click on More Options there that I have researched the share settings as the one button. And when I click on that, it gives me a warning that anybody who's already got access to it via one of the other links will no longer be able to access it because it says it's permanently changing its web address so the old addresses will no longer work. Lastly, let's consider the criteria under which we're sharing. So we know under the Share tool that we can either give people permission to view our sway or edited with us. However, if we click on the ellipsis at the site and open those three dots, then we get this menu which has lots of settings to do with sway in general on this one, settings for this way in particular. And if I click on that, you can see it's opened a new side menu. Let me change the language that it's checking it. It also lets me control texts direction and use right to left layout instead. But the view settings are the ones we're interested in at the moment, this check box by default says viewers and co-authors can duplicate this way. So that means when I share the sway to someone to view it or to agitate it, they can then duplicated themselves. Well, if I uncheck that, then means I've got more finite control about what they can do if they can't do that. So I can allow viewers to Prince the swipe or not. I'd like you to allow viewers to export the sway or not. I shall leave it like that for now. And then down the bottom, viewers can change the layout of the sway. So that's interesting because it allows them to change the horizontal or vertical nature of the Sway for themselves when viewing it. Finally, let's just check in on the URLs that are being created. And I think looking closely here, you'll agree that both the edit link on the view link are very unusual that completely anonymous. They're not something that anybody would guess or equally be able to remember. And by sharing them, that's how you're sharing the sway. Or of course to post directly to social media as it gives you the options here. And when I click the link, you can see it opens a small window, post directly from your account to share the swipe. 15. Exporting: Okay, so we've talked about sharing our sway. Next, let's have a look at the options there are for exporting our sway. Let's go back into the newsletter that we created a little while ago. We're not going to want the share options that we were looking at in the last lesson. We're going to want to go to the ellipses, the three dots again, and go down in this menu to export. Now, in export, we have options to export our sway either as a Microsoft Word document or a PDF documents. Let's try exporting to PDF. And we can see here it's been downloaded. Let's open that file and take a look. And here you can see that the main elements of the PDF of that from the Sway, it's the formatting of the template that is not available, but as a record of the coding trends, we can use this as reference, but it's not quite there yet with being able to show the actual template theme as well. That's try the Word version. This time we'll get back to Export and choose word. And we'll take a look at the document now and see how it's created as a Word document. Again, look, we got the same things here where we don't have quite the same template layouts and theme, but we do have the content that we've added. And here you can see the navigation menu has been populated as well based on the heading levels we defined in this way itself. So that's useful. But again, neither of these document formats are really there in terms of presentation yet, but they are useful reference material. If we needed to be able to refer to the content of our swipe, will present using the sway with faces on notes. Next, let's take a look at printing. If we go back to the ellipsis above the export option, we see prayed. And from here it's going to do a similar thing is it did a minute ago creating a PDF. In fact, that's exactly what it's doing. It's created the PDF version of our sway. And there it is ready now to be printed using whatever your local prints arrays. So as we're now in the web-based print dialog, you can see we can choose our printer from the available options, as well as the number of copies and which pages we're going to print, color or mono choices, the standard browser settings for printing, and then choose printer the end. Can we download an offline copy of our sway to be viewed without being connected to the internet? Well, no, sadly, that's not an option currently. But again, there's a whisper one day maybe that might be possible. What you can't do in the meantime is referred back to the Windows app that we were looking at. So sorry if you're on a Mac, but if you're on a PC, you can open your sway in the desktop application like it is here. And then once open, it's then cashed on this app until you close the app and you'll be able to play this way even without being online. As I say, the only lasts until you close the up, at which point the Sway is no longer cashed and you would need to be online to open it again before you could view it. 16. Embedding: Right, we've looked at exporting sways. Now let's look at the ways we can embed sways. So this is a really simple process. Let's go back up to share. But instead of copying not share link there we're gonna choose the option and the leaf gets embed code. And here you can see embed this way now has a code there which gives me everything I need to embed this way and something else. Let's copy it to a clipboard. And then let's have a think about where we can get this. So you can use the embed Coast anywhere that accepts embed codes. For example, a WordPress website is a pretty common option. Here I am on the WordPress website for this project, I'd take music.com and insight, a new post. I'm going to click on text and then just paste it right in there. Let's go back to visual. And straight away we can see there we go. That that's why he has now loaded from within. And I have all of the options I expect I can share it from there as well. Change the settings of how it's seen, as well as access some options about it right away in this post, even before I hit publish to share it. And once not post is published, you can say here it is only saying website visible from the front page as if it's part of the page. If you're sharing within the Microsoft world that you often don't need that embed code itself. You can get by with using the actual view link itself. So let's copy that. And then we'll open up OneNote and a new OneNote page and we'll paste into the eye and you can see the link was all it took to be previewed. Let's refresh it so that it appears. And now we can see this Y on the OneNote page. Just the same. We've barely scratched the surface of the number of things that can be embedded in a sway. Let's go down this page which I'll talk into the description. And you can see the list expanding all the time of things that you can embed in a sway. In fact, you can even embed a sway in another sway. So let's go to our newsletter and imagined at the bottom, we're going to announce the new website sway that we've made earlier. And let's click on the plus. Remember we go to media and then to embed. And now in here is where we want to paste it. So let's go to that one-page website, will go to Share and choose get embed code as we did earlier. Copy that to the clipboard, and then we'll go back to our original swipe and paste that in. Now that it's in there, let's see that design. On here we go. Our other sway is now embedded in our newsletter sway. And we can control it in the same way as we did before, changing its level of focus there as well. Let's see what else we can do. Let's start with some files in my OneDrive, a Word document on a PDF. Here we go. Let's look at the PDF first of all, along the top in the browser there is Embed. I'm, I can grab that code at the side there. I'm put lots into my swipe. Let's see how that appears. And here we go. In this way. That document can now be viewed as part of the swine. Let's do something else. Let's try the Word document instead. We'll go to word, and this time we'll go to File and share. And of the two options we want to choose. The second embed, unless it generates the code, is the code we need to copy. And we get some options here as well. We can customize it with the height and width and decide whether we want to allow people to print it or embedded for themselves. Let's click copy there, go back to our sway. And again we'll paste it there and have a look here. Now the word document version is available as well. Let's take a look at what this one looks like. We'll take the emphasis up slightly to make it a bit bigger and then play this. And you can see here we go. We've got the Word document playing imbedded in the sway hosted in my OneDrive and the Boltzmann because it's an embedded player, we're able to view it full screen. And also access the menu to do the things that the word standard embed tool allows us to do. 17. Accessibility: So sway has a few more hidden tricks up its sleeve. The first of these being accessibility view. Let's take a look to find accessibility view. You go to the ellipsis again, the three dots on the top right, and you go down to find accessibility view three-quarters of the way down the menu. From this point, several things happen. It loads the entire sway into the browser's memory. And this means that any assistive technology you have can help. It removes animations. It changes to black and white color for the most part, for better contrast when you're reading. And it makes sure that the Sway is now in vertical scrolling mode. It means you can use the system keyboard as well to help move around it. It removes any grid lines and also any of the stacks that you had in place and puts them all separately so that it makes everything bigger are much clearer on the page and spreads it out, making it more easy to view, as you can see here. To turn off accessibility mode, you simply return to the top right corner and click on Exit accessibility view of which point the sway will return to normal. You may have noticed another accessibility tool in the same menu. Then Let's get back and have a look. Now in line with Microsoft strive to make all of their products more accessible. You also have above accessibility view, accessibility checkup. And if we click on that, it's now going to read, uncheck through our sway, just like it would in something like PowerPoint or Word or one note and workout, what improvements could be made. So here, there are ten times that there are unclear hyperlink text that are hard to read. On 23 times, there's a default alternative texts needed. And then below you can see the review of everything. So down the bottom it gives me some tips for making my sweat accessible that are general. But if I click on any of these improvements, it will then take me directly to each of these where you can see the text displayed is not very accessible and easy to read. It's just the web link. If I change this now, I can then go through each of these, uncheck them and change them to make it more accessible. And you can see afterwards, my score for improvements is much improved. Let's have a look at default alternative text. And likewise, you can see that it's identified the alternative text that's also a populated for they say image is not good enough to help somebody who can't easily see the image. I'm, I can improve these in the same way. 18. Recording: We've talked at length about lots of rich media facilities of sway. Well, here's another one, audio recording that I wish I'd mentioned much sooner. And that's because it can totally change how you use y and what you view its potential as. Let's go into our one-page website to get after the introduction or the welcome, I'm going to click on plus go to media and this time choose Audio. However, instead of clicking on the left-hand side where we could imagine ODI file. There you go. You can see it's opened the browser ready to pull one from my filing system. If I go over to the right, I have a record option on here. It's going to count down and let me actually record stripes the browser. Welcome. Hi, I'm Anthony Lee, So teacher, a music specialist from the UK. And there you can see, I can pause and then resume. And when I'm happy I can click stop. And here we go. It's got this little transport control or player down the bottom. I can rerecord. I can change the volume level. Let's just play it. Welcome. Hi, I'm Anthony lease, a teacher, a music specialist from the UK. There we go on. I can preview it back and make sure I'm happy and move around. And when I'm feel like I've got the right version, I can click on to sway. And as it says, it still thinking about it and we'll come back in a minute when it's finished or we can preview it that I'm in a blink of an eye. There it is. Let's go into Design view so that we can see what it looks like from the front. And here we go. We've now got this play control. Welcome. Hi, I'm Antony lit. And we can now play that from the sway itself, imbedded in the sway and hosted by the sway. So this functionality opens up all sorts of new potential for how you might decide to use sway, knowing that you can record audio straight into it and play it back through the browser without needing to host it in any other solution. 19. Class Project: So we've reached my favorite part of the course now where I'd like to ask you to consider what your class project will be. Together. We've built several sways. We've looked at creating what single-page websites. We've looked at creating newsletters. We've had a look through some of the templates and I'd encourage you to look through some of them further as well because there really are beautiful designs that you can start from that have really interesting parallax and scrolling effects, as well as transitions and animations like this beautiful portfolio template. And in addition to that, below everything we've considered, there are some of the ways that are considered inspirational by Microsoft, which I'd have to agree with. Let's look at briefly at this one called The Universe, which uses the horizontal approach that we haven't really focused much on as part of this course. But you can see the way things move on or animated is really, really exciting. And the way that it allows you to access images and turn them into slideshows and photo galleries as well is just tremendous. So with that in mind, let's consider what your class project will be. So let's consider what subject would you choose for your class project? Will it be a personal project or professional project, something else? When you consider the audience, which template will most reflect this, which viewed you, we need horizontal or vertical. You can try out each, can't you? How will you map out the structure needed? Is there an app for that? When you do that paper and pencil, old school, how will you use the nested headers to help you keep track of the structure. We've used that repeatedly in the projects we've looked at in this class to help us keep track of where we are throughout. Lastly, how would you take advantage of all the rich media on embedding tools available in sway? Well, as I said, I'm very excited to see what you come up with based on the class that we've studied together. You can share this backing several ways. You could, first of all go to share in your slide and making sure you've chosen view. You could then copy the link and paste that into your comments in the class chat. Or you can take some screenshots of your actual sway while states playing and share that back instead, I really hope that you have as much fun creating your class project as I have in designing and sharing the class with you. Good luck. 20. Summary: So we've made it to the end of the course. I really hope you got value from the projects we've worked through together and the different scales we've gathered along the way. I'd like you to consider following me because I'm adding new courses all the time around productivity, office tools on media. And it would be great to let you know about those when they arrive. Now if you had anything less than a five-star experience, please let me know in the comments of the course so that I can improve the content for others later. Thanks for watching and I'll see you again.