Responsive Breakpoints Responsive Breakpoints Macaw starts the design at a screen size of 1200 pixels. This is referred to as a breakpoint. In responsive design, when resizing the browser window, your design can “break” at certain sizes. To fix the design content that breaks, you can add a breakpoint at that screen size and make the change. Technically, a breakpoint is a CSS Media Query, but we don’t need to go there now. Because Macaw currently cannot be used to design mobile-first (starting with the smart phone design), you will design for a desktop screen first, and then make changes to the smaller screen sizes later.
Before we add some design content, you can set some generic breakpoints that most of us use as a starting point (phone, tablet, and desktop). In the Inspector panel on the right (click the word Inspector), you will see the Breakpoints at the top. To add a new breakpoint, click the + to the right of the Default (1200 PX) breakpoint. In the Add Breakpoint dialog box, change the value to 768 and click ADD to add a breakpoint at 768 pixels (tablet size), as shown in.
Embedded HTML refers to the source code generated by a third-party website, such as Google, YouTube, Flickr, or Picasa. You can set up an account with these websites, log in, and then copy the embed code from their site and add it to your site. When you paste embedded HTML into a page, it's like putting a window inside a page on your site that displays the content of a third-party site inside it. Embedded HTML is a great way to add complex information (such as maps, weather forecasts, stock market quotes) as well as rich media (like digital videos, slideshows, and audio files) quickly and easily. This strategy has the added benefit of enabling you to use a third-party’s site as a hosting service and uploading interface.
At the back end, for every breakpoint, Adobe Muse adds a corresponding media query declaration to your web page. Media queries is a CSS3 module that allows content rendering to adapt to different screen sizes. Most of the modern browsers can interpret the media queries.
For example, if you create a free account with YouTube, you can create your own YouTube channel and upload the video content for your site. YouTube includes a web page that simplifies the upload process and hosts the video files on their site. When you want to update your site, simply add more videos to your YouTube channel, copy the embed code, and then paste it into a page to add new videos to your Muse site. In this section, you’ll copy the source code from Tumblr. This is a free online service that requires you to create an account and sign in, and then post blog entries that are publicly available.
![Adobe Muse Media Queries Css Adobe Muse Media Queries Css](https://s-media-cache-ak0.pinimg.com/736x/d3/32/05/d33205a534e7753aa36cc46c3ce9b408--adobe-muse-adobe-indesign.jpg)
Blogs are easy to use and are especially helpful when you want to make it easy for someone who is not technically inclined to update their own site. Most blog sites include an online interface, so you can use any browser to log into your account and post new entries, without any HTML knowledge or additional software. Note: Visitors that view your website do not need to have a Tumblr account to view the blog you embed on the page.
The account is only needed by you as you are designing the site—in order to create a custom blog and generate the embed code you'll add to your website. For this tutorial, you do not need to create a Tumblr account to follow along. Simply copy the following code, which was generated by the Tumblr website after creating a free blog:. In Plan view, double-click the events page thumbnail to open the page and edit it in Design view. Click in the middle of the empty page and use one of the following methods to embed the HTML code:. Choose Edit Paste or use the keyboard shortcut (Command+V for Mac or Control+V for Windows) to paste the code directly on the page.
Choose Object Insert HTML. Click inside the field of the Edit HTML window that appears and paste the content.
Click OK to close the Edit HTML window. Note: In most cases, Muse will recognize HTML code and will automatically embed the HTML you paste directly on the page.
However, if you see the code on the page, instead of the content from the third-party website, then try choosing Object Insert HTML instead. After embedding the HTML code, you'll see a blue bounding box with handles surrounding the blog posts that were entered for the Katie's Cafe Tumblr account.
Use the Selection tool to drag the handles to resize the blog content, so that it spans approximately 80% of the page width. Center the blog content on the page, to allow the tiling background graphic to show through on the left and right sides. Blue measurement rectangles display the distance from other objects. A red alignment guide briefly appears to indicate when the selected object is centered vertically. That's all that is required to embed HTML into Muse pages. If you ever want to edit the HTML code, you can right-click on an embedded HTML element and choose Edit HTML from the context menu that appears.
This opens the Edit HTML window so that you can access the code you pasted earlier. Now it's time to review the changes you made to the events page:. Choose File Preview Page in Browser to see the events page display in a new browser window. Notice that as you scroll down the list of blog entries, the header displays on top of the other page content.
This behavior occurs because the event page uses the Foreground master page, and the header content of that master page is set to display in the foreground. The events page is now complete. In the next section, you'll learn how to paste embedded HTML content inside a widget, to control how the third-party content is displayed based on user interaction. Currently the target container is filled with a gray fill color.
However, you can place all kinds of content within the target container, including different image files, filled rectangles, text, or embedded HTML that you copied from another website. For this example, you'll paste embedded HTML that was generated by YouTube. Imagine that you visited a page on YouTube.com to view a video you uploaded with your account. If you click the Share button, and then click Embed, you can access and copy the embed code for the video. For the purposes of this video, the embed code for the Katie's Cafe video has already been copied their site, so you don't have to visit YouTube. Copy the embed code below to save it to your clipboard: The code above uses iFrame tags to surround the link to the video file that is posted on YouTube.
An iFrame is an HTML container that enables you to display content inside a “window” when you add it to the web page. After copying the code above, return to Muse. Use the Selection tool to click the gray border of the page, so that the Selection Indicator in the top left corner displays the word Page. This means that the entire page is selected.
Click the larger target container with the gray fill color. The Selection Indicator in the top left corner displays the word: Composition. Click the gray target container again, so that the Selection Indicator displays the word: Container. Click it again (it says Target) and then once more, until the Selection Indicator lists the word: Image Frame. Press Backspace (Windows) or Delete (Mac) to remove the image frame from the target container.
While the inner target container is still selected, the next part involves pasting the HTML code you copied above into the target container. Note: Just as you experienced when pasting the hero image into the trigger container, pasting code inside a target container can be a bit tricky because the goal is to paste the code INSIDE the target container of the widget. It is possible (depending on the element that you've currently selected) to paste the video code outside the widget, so that it is embedded directly on the page. So proceed carefully. If you test the lightbox by clicking Preview and see that the video is displayed even though you haven't yet clicked the hero image, it means that the video code was not successfully pasted into the container, which is why it displays immediately. The video should only display after you click the hero image.
Follow these steps to paste the video code into the target container (while the Selection Indicator displays the word: Container). Choose Object Insert HTML. In the window that appears, select the default placeholder text and Press Delete (Mac) or Backspace (Windows) to remove it.
Choose Edit Paste to paste the YouTube code you copied above into the HTML Code field. Click OK to close the HTML Code window. Note: In many cases, Muse will automatically detect when you paste HTML code, and understand that it is HTML rather than just plain text.
So if you prefer, instead of choosing Object Insert HTML to open the HTML window, you can also right-click (or Control-click) while the inner target container is selected and choose Paste from the context menu that appears. (Or choose Edit Paste or use the keyboard shortcut to paste the source code into the target container). Muse offers many methods to achieve the same goal of pasting the video code into the target container. After pasting the code into the target container, you’ll see the first frame of the video displayed (a cup of coffee).
That first frame of the video indicates that you pasted the HTML embed code successfully. The video does not play while you are editing the page in Design view. It will only play after you click the Preview button in the Control panel or preview the page in a browser. Use the Selection tool to resize the target container, if necessary, to expand the dimensions to fit the size of the embedded HTML video content. The width should be approximately 670 pixels and the height should be around 415 pixels. While the video is selected, the Selection Indicator displays the word HTML Item. While the target container is selected, press Escape once to select the outer container.
Or if you prefer, click away to deselect the Lightbox Display widget, then click on it twice: once to select the Composition, and then again to select the larger container. Use the Selection tool to drag the handles of the container, so that the target container is centered inside it.
Resize the dimensions of the container to a width of 710 pixels and a height of 460 pixels. Use the Fill menu to set the fill color of the container to a brown color (#63301B) and set the opacity of the fill color to 100. Select the text frame at the bottom of the container and press Delete (Mac) or Backspace (Windows) to remove it. The text frame can be populated with a caption for the target content, but in this project, it is not used. Select the Close box (with an X) in the top right corner of the container. Click inside the Close box to select its label and delete it. Use the Fill menu to set the fill color to none.
Click the folder icon next to the Image section of the Fill menu and browse to select the file named icon-close.png. Use the Selection tool to resize the Close box so that the entire close icon image is displayed. Use the Selection tool to reposition both the target container and trigger containers, to move them in the location where you want them to appear on the page.
While the Composition is selected, click the blue arrow button to open the Options panel. For this example, use the following settings:. Position: Lightbox.
Transition: Fading. Auto Play: Disabled. Shuffle: Disabled. Hide All Initially: Disabled. Enable Swipe: Enabled. Triggers on Top: Disabled.
Close Button: Enabled. Show Lightbox parts while editing: Enabled. Show All in Design Mode: Enabled.
Previously in this tutorial, you learned how to embed HTML into pages to add a Tumblr blog on the events page. You also saw how to paste embedded HTML inside a Lightbox Composition widget, to display a YouTube video in a lightbox window when the visitor clicks a button. In this section, you'll explore one more type of embedded HTML that is provided by the Google Maps site. Follow these steps:. If the visit page is not already open in Design view, click Plan and then double-click the visit page thumbnail to edit it. This source code was copied from the maps.google.com site.
You can create a custom map to one address (or in this case, multiple locations). It is a free service—you simply provide the address (or addresses) and click the Create Map button. For the purposes of this tutorial, it is not necessary to create a new map yourself. If you'd prefer to test it out, experiment by entering any address, creating a map, and copying the code. However, if you'd prefer to simply test how this works, you can work with some pre-generated HTML code.
Copy the following source code:. Paste the code on the top of the visit page. Use the Selection tool to position the embedded HTML in the vertical center of the page, near the top, so that about a quarter of the map overlaps with the header area. Make sure to leave some space between the map and the flower graphic below it, so that you can add a text description. Use the Text tool to drag a text frame below the embedded map. Copy the following text and paste it into the text frame: While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.
Use the Text panel to apply the following settings to style the text:. Font: Droid Serif (or any serif font).
Font Size: 14. Font Color: #222222. Font alignment: Left. Leading: 120% After adding the description to the map, the visit page is now complete. Choose File Preview Page in Browser to see how the visit page appears in a browser. You can embed HTML code in pages of your site to add complex site features that appear dynamically from a third-party web server. These chunks of code can be copied from any number of web service providers, such as Google, Yahoo!, YouTube, and many others and then conveniently pasted into Muse pages.
In this section, you'll look at two different examples of embedded HTML and see how you can quickly add social media content and an interactive Google map to a website built in Muse. You'll begin by finishing up the Home page content. If you've been following along, the Home page may already be open in Design view. If not, double-click the Home page thumbnail in Plan view to open it for editing in Design view.
You'll add the embedded HTML on top of the slideshow that you previously added to the Home page. You can set up a free account with many different web services, including Twitter, that will allow you to post messages that display on their website. However, in addition to displaying the information on Twitter.com, you can use your account to log in and copy the embed code to display the same messages on a website you create. In this example, a fictitious account was set up for Kevin's Koffee Kart.
This involves signing in to Twitter as a new user and completing the registration form. After that, you can use the site's interface to post messages and copy the embed code that enables you to display it elsewhere on the web. This is the same process you'll use to share blog posts, video content, RSS feeds, stock information, weather forecasts, game scores, and many other types of dynamic data. If you are building a site for a client, ask them if they already use these services to help share information with their customers. In many cases, you can use their account information to log in and then obtain the embed code for the desired data you want to display.
To eliminate the need for you to log into Twitter to create your own account, here is the embed code copied from Twitter for the Kevin's Koffee Kart account: Optional Placeholder Text twitter2id('twitFeed'). Note: Take a moment to familiarize yourself with the code above and notice that the styles are wrapped in an opening tag that specifies what the code is and then a closing tag that lets browsers know that the CSS style rules are completed. Whenever you style your own embedded HTML code, you'll use these tags as brackets around the styles you want to affect.
In this case, the Twitter website hosts the posted messages and uses a CSS ID selector named #twitFeed to control how the text appears on its site. So the code above is essentially using that style name (obtained from the Twitter site) and then adding some rules that define how the text will appear on your site, overriding the styles applied by Twitter.com. To learn more about CSS rules for formatting text content, visit the website. Copy the resulting HTML from the Google window.
Or, if you prefer not to generate your own Google Map code, you can simply copy the source code below:
In addition to using embedded HTML to insert code you've pasted from a third-party website, you can also embed an entire web page within an iframe using the same method. For example, you can type a code snippet like this: In the code above, replace the text in the title=' and url=' with the desired external web page's title and URL.
You can also customize the width and height of the iframe window to the desired values to fit your site's design. Optionally, you can also add an attribute that ensures the iframe will not display a scrollbar by adding this to the opening iframe tag: scrolling='no' By choosing Object Insert HTML, you can open a new HTML Code window and embed an iframe anywhere on your site and then set any URL (site address, such as www.google.com) to display a site that is live on the Internet inside it. You can also use an iframe to embed animation, such as the HTML5 animations created in Adobe Edge.
Find the name of the HTML file created by Adobe Edge and use that file name in your iframe's URL attribute: Next, you'll need to upload the Adobe Edge HTML file (and dependent files) to the same host server, alongside your Muse site files. If you're exporting your site to FTP, you can copy the HTML file into the folder generated by Muse during the export process. If you publish directly to the Adobe Business Catalyst® hosting servers by clicking the Publish link in Muse, you can use Adobe Dreamweaver® software or any FTP client to upload the files. To learn more about uploading files via FTP to the Business Catalyst hosting servers, see.
If you’d like to remove either or both of these elements, open the HTML window and look at the source code you pasted (directly below the CSS styles tag you may have added). To remove the.Required line, locate this line of code and delete it:. Required To remove the Title label and menu, locate these lines of code and delete it: TitleDRMISSMRMRSMS. List of classes and properties to add CSS rules and format contact forms When you assign color values, you’ll get a much greater variety of colors by using an online tool, such as kuler, or an image-editing program (Photoshop or Fireworks), to create hexadecimal color values. Hexadecimal color values always begin with the # symbol, followed by a combination of 3 or 6 alphanumeric characters (0-9 and A-F). You may find it easier to use the Eyedropper tool in Muse to select colors from your existing design. You can copy the hexadecimal color values from the field in the Color Picker and paste them into the code.
However, the following 16 web colors can be specified by name. They can be very helpful to use when you want to test a rule: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White and Yellow When you specify the colors by name, do not include the # symbol before the color. The following list is not exhaustive—there are many different combinations (and many other properties you can use) to affect elements. Use these suggestions to get started. Double-click to select a code snippet, then copy it to your clipboard.