Note: This excerpt does not include the lesson files. The lesson files are available with purchase of the book.
In this lesson, you will explore the text formatting and the style options available to you in Muse.
Muse offers several ways to add text to your web pages. From typing text directly on your page to placing or pasting text from other applications, adding text to your design is simple.
Like in Adobe InDesign, text that you insert into your pages in Muse is contained within a text frame. You can resize, reposition, rotate, and transform those text frames and their content (which can include text and images), almost any way you like.
In this first section, you will insert text in various ways, then move on to formatting that same text.
The first method you’ll use to insert text into your pages is to create a text frame and simply type a page heading into it.
- With the KevinsKoffeeKart.muse site file still open and Plan mode showing, double-click the ABOUT page thumbnail to open the page in Design mode.
- Choose View > Fit Page In Window.
- Select the Text tool in the Toolbox. Position the pointer in the upper-left corner of the first column on the page, click and drag down and to the right to the right edge of the column. When the measurement label shows a height of approximately 40px, release the mouse button. A blinking cursor will appear within the text frame.
As you create the text frame, if the cursor comes close to a guide on the page, the frame you are drawing will snap to that guide and a red line will appear indicating that it is snapped.
- Type About Koffee Kart in the text frame.
Muse uses Arial as the default font and 14 pixels as the default font size, whether you type or place your text onto your pages. You can change these settings easily and will do so in the “Formatting text” section on page 94.
- Select the Selection tool in the Toolbox, and notice that the text frame, which is still selected, now has bounding points around it. Later, you’ll use these points to resize the text frame.
- Click the center of the text frame and drag it toward the middle of the page.
Notice that the frame snaps to guides, and red lines and other visual aids display, depending on where you drag the frame and what its edges touch. The snapping feature and visual aids are part of Smart Guides and are turned on by default. In a later lesson, you will turn them off to reposition content when you don’t want it snapping to guides or other content.
- Again from its center, drag the text frame into the upper-left corner of the first column guides, ensuring that the top and left edges of the frame snap into the guides.
- With the frame selected, drag the bottom-middle bounding point of the frame down until the measurement label shows a height (H) of approximately 50px.
- With the Selection tool, double-click the text frame to select the Text tool in the Toolbox and enable text editing.
- Insert the cursor before the word, “Koffee” and type Kevin’s and then a space.
- Choose File > Save Site.
In Muse, you can place text (File > Place) from a file that was created in another application, provided it was saved as a .txt file. Because .txt files typically do not contain formatting, Muse applies default formatting to the text when you place the file.
- Select the Selection tool in the Toolbox, and click away from the text frame to deselect it.
- Choose File > Place. Navigate to the Lesson04 folder in the Lessons folder. Select the file called TextAbout.txt, and click Open (Windows) or Select (Mac OS).
You see the Place Gun cursor, which indicates that you can either click to create a text frame and place the text in it or you can click and drag to draw the frame to the proportions you want.
- Position the Place Gun cursor below the heading text on the left edge of the first column. Drag to the right and down until the pointer is on the right edge of the second column and the bottom edge of the new frame is about halfway down the page. This will make the text frame taller than needed, but that’s okay.
Unlike in Adobe InDesign, you can’t drag a frame to make it smaller than the content inside of it. You can, however, make the text frame taller.
- With the text frame selected, click the Transform panel tab on the right side of the workspace if it’s not already showing. Change the Y value to 120 and press Enter or Return to accept it.
Instead of resizing or dragging a text frame using the Selection tool, you can be more precise by using the transform options in the Transform panel.
- Choose File > Save Site.
- Click the Preview mode link to preview the text.
- Click the Design mode link to return to the ABOUT page.
Now that you have text on the page, you will begin to format it using the text formatting options available in Muse.