Choose File > Place. Or if you prefer, use the keyboard shortcut Control+D (Windows) or Command+D (Mac) to place an image.
Останнє оновлення:
Define header and footer regions of your website to add menus, logos, copyright notices, and more in Adobe Muse.
Примітка.
Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.
Adobe Muse allows you to create Headers and Footers for a web page in a simple manner. It is a good practice to achieve a consistent appearance for your website keeping the appearance of your header and footer elements the same. You can achieve this by defining Header and Footer elements in your Master in Adobe Muse. Updating the Master Page effectuates changes across all your pages on your web site.
When you build a website with HTML and CSS, the individual pages are often varying heights, based on the unique content that is displayed on each page. Muse includes features that allow for pages of a site to display different lengths, based on the unique content on each page. You can set up regions so that the header always remains in place at the top and the footer content always displays directly below the page content, regardless of each page's height.
Adding header and footer for a page
Before you begin to define Header and Footer regions of your page, make sure that the header and footer guides are displayed. If they are not, choose View > Show Header and Footer.
Alternatively, you can use the View menu in the Control panel to enable the Header and Footer guides.
If you prefer, you can also right-click on the left side of the workspace, just outside the browser window area. Enable the option to Show Header and Footer in the context menu that appears.
Work with Guides and Rulers
The ruler must be enabled to reposition the header and footer guides. The ruler enables you to set the guides to an exact pixel position. By default, the regular guides (that display the number of columns you set when you created the new site) are also shown.
Five blue horizontal guides span the width of the page. Starting from the top, these five guides are used to define the top of the page, the lowest edge of the header, the top edge of the footer, the bottom of the web page and the bottom of the browser window. As you drag the guides to define these areas, a tooltip describes each guide and its current location. You may find it helpful to increase the magnification of the page, so that you can zoom in to position the guides more precisely.
The three middle guides define the content that will be displayed in the header and footer areas. The remaining center region is the area where you’ll add the unique page content; this center area expands to fit the height of the elements placed on each page.
You can also select the rectangles and elements on the page. It is helpful to use the bounding boxes of selected elements to help you align the guides while setting the header and footer areas.
Примітка.
The bottom of the browser window dictates the lowest part of the display area when a visitor views the site in a browser; depending on the design, you can set a background color or background image for the browser itself and set the guide for the bottom of the page above the bottom of the browser guide to allow that background color or image to show below the page's content.
Definie Header and Footer elements
To define Header and Footer elements, do the following:
- Drag both the Bottom of the Page guide and the Bottom of the Browser guide to the same location at the bottom of the page, immediately below the footer rectangle, as shown in the image below.
- Select the rectangle in the footer that contains the tiling background image. Drag the Footer guide until it is aligned with the top of the footer rectangle.
- Leave the Top of Page guide at the very top (at the Y: 0 px location). Drag the Header guide down to a desired level.
The header content will be displayed in the area between the top of the page and the Header guide.
At any time during the design process, you can return to the A-Master page if you need to readjust the guides to fit the header and footer content.
Click the Plan link, or click the tab labeled katiesCafe to return to the Plan view.
Notice that all of the page thumbnails in the site now display the design elements that you added to the linked A-Master page.
At any time as you are designing a site, changes you make to the master page automatically update the linked pages. Master pages make it easy to update or maintain a site, because you can update one master page to change the site's appearance.
Place an image to populate the header content
Since the site logo will appear on every page of the site, it's a perfect candidate to place in the header on the master page.
-
-
In the Import dialog box that appears, navigate to select the file in the Kevins_Koffee_Kart folder named Logo.png. Click Select.
-
Use the Selection tool to drag the logo up near the top of the header region that you defined previously.
Next, you'll place another image that will serve as the background graphic of the Menu Bar widget that you'll add in the next section.
-
Choose File > Place or use the keyboard shortcut for your operating system: Control+D (Windows) or Command+D (Mac).
-
Navigate to the Kevins_Koffee_Kart folder and select the file named top-nav.png.
-
Click once in the top portion of the page, in the area you previously defined as the header. Be sure to position the image above the header marker, so that it appears in the same place, above the main page content, on every page.
-
Use the Selection tool to drag the brown ribbon graphic that you just placed, so that the red bicycle tires in the logo are just touching the top of the brown ribbon. This placement gives the illusion that the bike is riding on the brown ribbon.
-
Choose File > Place again. Browse to select the file named thedrip.png. Click once near the bottom right side of the brown ribbon graphic to place the image at its original size.
-
Use the Selection tool to reposition the drip image, so that it lines up with the brown ribbon and coffee appears to drip from the right side.
The header content as it appears after adding the logo and the background for the site navigation. You can check the live site example to see the correct positioning of the logo and the top navigation.
In the next section, you'll learn how to add widgets following a brief overview of how to work with widget containers.
Using Sticky Footers
Using the Sticky Footer option allows you to affix a Footer element on a web page. Sticky Footer especially designed for visitors with larger desktop monitors. Enabling the Sticky Footer option causes the footer to remain in the desired location, even if the browser window is significantly larger than the web page design.
The Sticky Footer option is provided on the New Site dialog (File > New Site) when create a site in Muse. You can also access Sticky Footer on the Page Properties (Page > Page Properties) and Site Properties dialogs (File > Site Properties)
The Sticky Footer option is enabled by default. Generally speaking, it is best to use the Sticky Footers feature when you design sites. However, if you notice that the length of pages is displaying much longer than desired (because a site has less page content and the pages are fairly short), you can always disable it by deselecting the checkbox in the Page Properties dialog box.
However, if you want to disable it for the entire website, you can do so by deselecting the option on Site Properties dialog.
Увійдіть до облікового запису