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.
Most web pages have a way for users to contact the owner of a website. Sometimes this is simple as posting a phone number or an email address on the site, but often the best way to do this is with a form. Let's take a look at adding some text form fields to our site. We're going to go to the Contact Us page. On this page we have an open area where I want to add a form field. Inside our Widget Library panel, we're going to go underneath Forms and grab Simple Contact. When I click and drag this onto the page, we'll have our form fields added. I'm just going to move this over to the left and line that up so it looks a little nicer.
Now that we have our form field, let's go into Preview mode and test it out. As we mouse over each of these form fields, you notice there's a Rollover effect. When I click inside, the description will disappear. And I'll enter my name, James Fritz. I'm going to purposely skip the Email address, and then we'll add a brief message, "I like your site!" Now let's click Submit. When you click the Submit button, you're going to receive an alert. This alert is telling us that this form field isn't working.
The reason it isn't working is because we're just in Preview mode, and it hasn't been published yet. For now we're going to dismiss this alert. Next, you'll notice that the Email address is highlighted red. The reason for this is because this is a required field. Since we didn't enter an Email address, it's alerting us to say, "Hey, you forgot to enter your address." And if this was on a real site, the form wouldn't be submitted until you entered an Email address. Now that we can see how this form field works, let's go back to the Design mode and try out some different options.
When you select the form fields, you notice there's an Options widget in the upper right-hand corner. When I click on this, we get a few more options, such as the name of the form, who it's going to be send to, as well as the ability to add additional fields. For now we're going to ignore these options, and we're going to cover these in a later movie. If you want to move or resize any of these fields, you just need to slowly click down until you select that section. So for example, if I want to move the Submit button, I'm just going to slowly click until I have the Submit button selected. Now I can move this to the center.
Or maybe I want to make it larger so it's easier for people to click. If I want to change the name of this, I'll just double-click and change the name from Submit to Submit Form. If I wanted to I could even change the font or the color. If I do this, it's probably a good idea to use a Paragraph Style so I can keep things consistent across my site. Now watch what happens if I change the Width of one of the text fields. I'm going to slowly click until I select Name, and then I'm going to click and drag and just make this a little shorter.
You notice that when I change that Name field, the Email address changed too. The reason this occurs is if I select all the form fields and go into the Options, you'll see at the bottom it says Edit Together. When you have Edit Together checked, if you change the properties of one text field, the other text fields will change too. If you don't want this to happen just uncheck Edit Together. But personally, I find it very useful because it saves a lot of time. Some of the other options we might want to change are the appearance of the Rollover States. So if I select one of these fields, for example, Name, let's go over to the States panel.
You'd notice in the States panel there is various States that can change the appearance depending on what you do. Empty is when you have nothing entered in the field. This is just how it normally looks on the page. Non Empty is when you're entering information into the field, Rollover is as you mouse over or rollover the field, Focus is when you're tabbing into a field, and Error is if there's a problem with the data that's in that field--for example, you forgot to enter your name or an email address. You can change the appearance of any of these at any time, and remember, if you have Edit Together turned on, they'll all change together.
You can format these form fields with any of the attributes that you can apply to regular objects in Muse. It's also a good idea to use Paragraph Styles for the name fields and messages to keep your text consistent.
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.