Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
When designing for print, most designers tend to ignore the paper that their design is printed on and prefer to focus on adding content to the design. In the end that might be an acceptable workflow, since they have limited control over the look of the paper in the layout program. However in web design, you can dramatically alter the page itself before any content is added. Let's take a look at what properties of a web page that we can change. Let's begin by going to the Home page, and on the home page with nothing selected at all, you can see it say Page up here, because we are referencing to the page itself, and that is the big white area that you see in this document.
To make this easier to see, I'm just going to zoom out by pressing Command+Minus or Ctrl+Minus. Now what we're going to do is right next to the word Fill is this little widget we can click on to change the Fill color, and we're going to change this to yellow. When we do this, we can see the entire page itself is turning to yellow. If we want to change the property some more, we can click on the word Fill for a drop down, where we can change the Opacity and make it actually see through, so we can even see the gray background of the web page itself. We can even add an image to the background of the page too, and we'll learn more about that later on.
Next to Fill is Stroke. From here if we increase the number, we can see that we're adding a thicker stroke around the border of the page. If we click here we can change its Color, we'll change this to blue, and when we click on Stroke itself, we can even change the Alignment properties. Right now it's aligned to the Outside. Here it's completely in the Inside and here we have it aligned evenly on the inside and outside. If we like we can even change the dimensions on the left, right, top or bottom, I'm going to break the connection between these and I can go on the left hand side and increase the amount to have a thicker stroke on the edge.
For now I'm going to put this back to being the same and I'm going to lower this amount to something a little smaller like 10. Next we can add rounded corners to the page. So, I'm just going to click the top two and increase the amount to 50, and we can see that we have rounded just the top two corners of the page. If we like we can go to Effects and even give it a drop shadow or we can play with its Opacity and other Angle Controls. We can even give it a Bevel or a Glow. The last option is the Browser Fill, which is how we view the web page in a browser.
So for example, we're going to leave this alone and we're just going to press the File > Preview Page in Browser, so we can see what this would look like. This will open up in our default web browser and we can see all this gray area around the page itself. I'm going to close this and go back to Muse, and we can see the gray here. If we click on the Color, we can choose White or No Color at all. For now we're just going to leave this at White. If I click on Browser Fill, I'm able to add a background image and control its formatting, which we'll talk about in another movie.
As you can see, there are lots of formatting options available to just the page itself. In the next movie, we'll take a look at embedding images in the background of the page and the browser itself.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.