Creating mobile layout designs in Adobe Muse

Size: px
Start display at page:

Download "Creating mobile layout designs in Adobe Muse"

Transcription

1 Creating mobile layout designs in Adobe Muse Using Adobe Muse, you can create site layouts for web content to be displayed on desktop, smartphones, and tablets. Using the mobile design features, you can create alternate layouts for phones and tablets as well as desktop experiences. Muse includes helpful settings, such as 100% width items and the Sticky Footer functionality, to ensure that your design displays well on the multitude of device screens on the market today. Muse enables you to use familiar workflows to create immersive designs for every possible screen dimension. Alternate layouts are important because desktop sites contain a lot of information, usually much more than needed for a smartphone site. When you create a new site in Muse (by clicking Create New > Site in the Welcome screen or choosing File > New Site), the New Site dialog box contains a menu that allows you to select the initial layout. When you are starting a new project from scratch, you can choose to design any of the layouts first, and then create additional layouts, all within the same.muse file. When you publish or export a site, Muse automatically generates a file named sitemap.xml that contains a list of all pages, for all layouts. The sitemap.xml file is uploaded along with the other site assets. It improves a site's Search Engine Optimization (SEO) by helping search engines index the site, so that pages are accurately ranked in search results. For the purposes of this tutorial, you'll take a look at working with an existing site design created for desktop browsers and see how to create a new layout designed for smartphones. The sample project we'll use for this article is a fictitious website called Design is Fun. As you follow along, you can check out the live example of the site in a browser. Adding a phone layout to an existing Muse site If you haven't already, download and install the latest version of Muse. Then, download the "Mobile Design is Fun" sample files for this project. Uncompress the DesignIsFun.zip file and save the folder on your desktop. You'll use the sample files to follow along with the instructions provided below. 1 Launch Muse. 2 In the Welcome screen, open an existing site by choosing Open and navigating to the file named musemobile.muse provided in the sample files folder. 3 The page thumbnails of the desktop layout are displayed in the site map in Plan view. Notice that along the top of the Plan view, there are now three buttons to select layouts for Desktop, Tablet, and Phone. At the moment, the Desktop layout option is selected because that is the only layout currently created for the site. You can create a new layout at any time by clicking the desired button. Layouts that have not yet been created display a plus (+) sign next to their name. 1 Creating mobile layout designs in Adobe Muse

2 This new capability enables you to create a single Muse project file that includes up to three different layout designs to be displayed on the corresponding screen size. All three layouts use the same domain name (such as my-site.com) so you can distribute a single URL to promote the site. Behind the scenes, backend code intelligently displays the correct layout each time a user visits the site. The site logic detects the browser and device used by the visitor and automatically redirects to load the appropriate tablet, phone, or desktop layout. While the Desktop layout button is selected, the site map displays the page thumbnails created for the desktop layout. The page thumbnail design matches the live website you reviewed earlier. To create a new mobile layout for a phone, one of the first things you'll need to do with an existing site is review the content and determine which items are needed for the smartphone user experience. Since smartphone visitors are often on the go and are viewing the content on a smaller screen, it's important to simplify the design and only display the content that is useful and easy to interact with on a touch screen. 1 Click the Phone button at the top of the Plan view to create a new phone layout. The Add Phone Layout dialog box appears. 2 You can use the menu to select an existing layout to copy. For the purposes of this article, choose Desktop to copy the desktop layout to the phone layout. Notice that you have the option of copying the Site Plan, Page Attributes, and the Browser Fill. Leave the default settings to copy the existing desktop site information to the phone layout. 3 Click OK to close the dialog box and add the phone layout. Muse creates a site plan for the phone layout. Page names, the site's structure, and attributes of the master page are copied over. The Phone layout button no longer displays a plus (+) sign next to its name, because the phone layout has been added to the Muse project. You'll notice that the actual page content is not added to the phone layout page thumbnail. That is intentional, to allow you to copy just the content you actually want into each page of a mobile layout. As you bring the content you want to add into each new page, you can resize it to fit within the smaller dimensions of the mobile screen. To facilitate the transfer of content, a scratch page was created in the desktop layout. This page is not part of the actual site and it is set not export or be included in the site navigation. Think of the scratch page like a holding container that you can use to temporarily store the content that will be placed on pages of the phone layout. For the purposes of this tutorial, the page assets that are used for the mobile layout on the scratch page have already been resized to fit the smaller phone page size. After adding the phone layout, the scratch page in the desktop layout was copied into the phone site map, but it is not needed. 4 In Plan view of the phone layout, select the scratch thumbnail and delete it by clicking the X button on the top right corner. Browser backgrounds and padding are rendered differently in mobile browsers, so as you build a phone layout, it's important to take that into consideration. When working with a real-world site, you may find that one of the first things you'll want to do in the phone layout is to delete some of the extra pages. As needed, you can click the X button to remove any unnecessary pages that will not be presented in the phone layout. 2 Creating mobile layout designs in Adobe Muse

3 5 Add new pages by clicking the plus sign to the right of the Home page. Create a total of four new pages and name them: Section 01, Section 02, Section 03, and Section 04. Once the site map is set up, you're ready to begin designing the mobile experience. This mobile site will have two different looks: the Home page displays a background image and the four section pages will share a different design. In the next section, you'll create the master pages for the phone layout. Setting up the master pages and properties of the phone layout To populate the layout that displays on smartphone devices, you'll begin by reviewing the content in the existing desktop layout of the site. 1 Click the Desktop button to return to the Desktop layout. 2 Double-click the Master page to open it in Design view. Review the elements of the master page: A red header area with the site title: Design Is Fun! A non-tiling background image set to 100% width 3 Click the Phone button to return to the phone layout. Double-click the master page to view it in Design view. By default, the padding for the phone layout has been cleared. Before adding content to the design, you'll redefine the padding for the mobile display. 4 Choose File > Site Properties to open the Site Properties dialog box. The Site Properties dialog box appears. Notice that there's a new column on the left that lists the layouts for the current site project. This project has two layouts, so the column on the left lists both Desktop and Phone. By default, the properties of the Desktop layout are shown. While the Desktop layout is selected, notice that the desktop site properties include attributes such as Center Horizontally, and the ability to numerically define Top, Bottom, and Left padding. 3 Creating mobile layout designs in Adobe Muse

4 5 Select the Phone layout and notice that there are some differences due to mobile browsers. There's no longer an option to center content horizontally and the padding section now includes options for Top, Bottom, Left, and Right. If desired, you can enter numbers in the padding section to set the padding values for the phone layout pages. However, there's also another way to do this. 6 Click Cancel to close the Site Properties dialog box. Now you've returned to the Design view for the master phone page. 7 Right-click the master phone page and choose Page Properties from the context menu. The Page Properties dialog box appears. Although not needed for this sample project, notice that you can set the padding values for the master page as desired, if you want the browser window to show around the edges and frame the page area. 8 Click OK to close the Page Properties dialog box without making any changes and return to Plan view. Next, you'll add content to design the master page. 9 Double-click the master phone page to open it in Design view. 10 Use the Browser Fill interface to set the background image. Click the folder icon to the right of the Image section and browse to select the file named background.jpg in the sample files folder. Set the Fitting menu to Scale to Fill and click the center position. 11 Click on the gray area outside the page, or anywhere in the Control panel, to close the Browser Fill interface. Like many Adobe products, there are multiple ways to achieve the same goal. First, you'll see one way to navigate between the layouts and then you'll learn a faster method. 12 Click the Plan button, and then click the Desktop layout button to return to the site map for the Desktop. Doubleclick the scratch page to open it in Design view. 4 Creating mobile layout designs in Adobe Muse

5 As mentioned previously, the scratch page contains page elements from the desktop layout that have been resized to fit the phone layout design. For the purposes of this example, the page assets that are used for the mobile layout have already been resized to fit the smaller phone page size. In a real world project, you would open the Desktop layout in Plan view, create a page named scratch (or whatever name you prefer) and right-click the scratch page thumbnail to access the context menu. Set the Master option to No Master. Deselect the option to Export page (which removes the checkmark) and then choose Menu Options > Exclude page from Menus. And then, you would select the items you want to add to the Phone pages, copy them to the scratch Page in the Desktop site map, and resize them by dragging the transformation handles. This task has already been completed for this example. 13 Select the entire header in the home page design on the far left which includes the red rectangle, the home icon, and the Design is fun! text frame. Right-click and choose Copy from the context menu that appears. 14 Click the A-Master (Phone) tab to make it active. Rightclick on the phone master and choose Paste to paste the header content. Use the Selection tool to move the header elements into position at the top of the page (see Figure 13). If necessary, drag the transform handles on the sides of the red rectangle until they snap to the left, top, and right edges of the page. The goal is to see a red border briefly appear on three sides, because this signifies that the red header rectangle is set to 100% width and will scale to fit the visitor's screen size. Muse uses a technology called Viewport scaling for the phone and tablet layouts which compares the active width of the page with the visitor's screen size and scales the content as needed to adjust for slight differences in device screen dimensions. Although smartphone screens have less area to display page elements, it is still necessary to define the header and footer regions to specify the page area. You define these page regions with the placement of guides that you drag on the left side of the workspace. Note: If you don't see the guides, choose View > Show Guides and View > Show Header and Footer. You also need to show the Rulers in order to set the guides. 5 Creating mobile layout designs in Adobe Muse

6 15 Drag the header and footer guides to match the locations shown. For this design, the guides should be located at these positions: Top of the page: 0px Header: 50px Footer: 420px Bottom of the page: 480px Bottom of the browser: 0px 16 Click the project tab named musemobile on the far left side to switch to the Plan view to see the phone layout site map. The recent changes to the master phone page are displayed and the background image displays on all of the other phone layout pages as expected. In the next section, Creating mobile layout designs in Muse, part 2, you'll learn how to quickly navigate between layouts and pages in Muse, so that you can move back and forth to copy the resized assets to the phone layout. Using Go to Page to copy site content between layouts 1 Click the Master (Desktop) tab to make the master desktop page active in Design view. Muse makes it easy to switch between layouts using the included navigational tool: Go to Page. This button appears in Design view in any project that has multiple layouts. 2 Click the Go to Page button. When working with multiple layouts, it is helpful to be able to jump back and forth quickly between two or more pages, so that you can easily copy and paste content. Note: In addition to clicking the Go to Page button, you can also use the keyboard shortcut: Command+J (Mac) or Control+J (Windows). The Go to Page dialog box appears. It contains a text field that you can use to type the first few letters of a page name in the site, so that you can easily jump to that page without going back to the Plan view repeatedly. 6 Creating mobile layout designs in Adobe Muse

7 3 Enter the first three letters of the page name you want to locate. For this example, type the first three letters of the word Master: mas. The field scans the site for any matching page names and displays them in the list. 4 Press the down arrow twice to select the A-Master (phone) page and then press Return/Enter to open it. The Master (phone) page opens in Design view and is ready to edit. Tip: Another great way to jump between the different layouts in a site is to use the new keyboard shortcuts: Command/Control+7 displays the desktop layout Command/Control+8 displays the tablet layout Command/Control+9 displays the phone layout These shortcuts are only active when editing a site that has the corresponding layout. Experiment with using these new shortcuts to develop a workflow that you prefer when switching between layouts and specific pages. Next, you ll create a second master phone page and add the design elements. Adding a second master page to the phone layout 1 Click Plan to return to the site map of the phone layout. Double-click the A-Master field below the master phone thumbnail and rename it: Landing. 2 Hover your cursor over the Landing thumbnail. Click the plus (+) sign to the right of the Landing page and create a second master page. Rename the new master page: Interior. 3 Right-click the Section 01 page thumbnail and choose Masters > Interior. This sets the Section 01 page to use the new Interior master page you just created. Or if you prefer, click and drag the Interior master page on top of the Section 01 page thumbnail. 4 Repeat step 3 to set the Section 02, Section 03, and Section 04 pages to also use the Interior master page. Now you ll add the design for the Interior master page, to start populating the appearance of the four pages (Section 01-04) that use it. 1 Press Command+J (Mac) or Control+J (Windows), or click the Go to Page button in the Control panel. 2 In the Page field of the Go to Page dialog box, enter the first three letters of the word Scratch: scr. The Scratch (Desktop) page appears. Notice that there isn t a Scratch (Phone) page listed, because you previously deleted it. 3 Press the down arrow once to select the Scratch page and then press Return/Enter to make it active. 7 Creating mobile layout designs in Adobe Muse

8 The Scratch page opens in Design view. As you can see, with a bit of practice, it becomes much easier to switch between pages with the new Go to Page feature. It is not necessary to return to the Plan view and double-click pages to open them and edit them in Design view. Of course, if pages are already open in Design view, you can also click the tabs along the top of the workspace to choose the file you want to edit. 4 Select the artwork used for the header (the same red rectangle, home icon, and Design is Fun text field you selected before) and the footer (the red rectangle). 5 Right-click the page while the header and footer are selected and choose Copy from the menu that appears. 6 Press Command+J (Mac) or Control+J (Windows), and then enter the first three letters of Interior. The Go To Page dialog box lists the name of the Interior master page you just created. Press the down arrow once and then press Return/Enter to open it in Design view. 7 Right-click on the Interior page and choose Paste, or use the keyboard shortcut to paste the header and footer. 8 Use the Selection tool to reposition the header and footer on the Interior page. While the footer rectangle is selected, verify that it is set as a Footer item in the Control panel. In the original desktop layout design, the header and footer rectangles are set to 100% width. By dragging the left and right edges to match the edge of the browser window, you can set elements to span the entire width of the available screen space on a monitor or device screen. 9 While the header rectangle is selected, drag the handles until you see a red border that highlights the left, bottom, and right sides of the browser window. This red border indicates that the header rectangle will display at 100% width on the smartphone, to cover the top of the page. Repeat this step to set the footer rectangle to 100% width as well. Next, you ll copy the four navigation buttons from the Scratch page to the Master (Phone) page. One of the great features included with multiple layouts in Muse is that the styles you apply to elements are preserved when you copy them. Character styles, graphic styles, and paragraph styles are maintained throughout the different layouts you create. 8 Creating mobile layout designs in Adobe Muse

9 1 Click the scratch (Desktop) tab to make it active. Click once on the group of four numbered colored buttons (located below the home design on the left side) to select it. While the group is selected, the word Group is displayed in the Selection Indicator. 2 Copy the group and then click the Interior (Phone) tab to return to it. Paste the group, which contains a series of buttons that the design uses as a navigation menu. Notice that the styles applied to the objects are preserved as you copy design elements between layouts. 3 Use the Selection tool to position the group of buttons above the red rectangle. As you drag it, a smart guide temporarily appears when it is aligned to the center of the page. Drag it until it is aligned center and near the bottom. 4 While the group of buttons is selected, select the Footer checkbox in the Control panel or right-click on the group and choose Footer Item from the context menu that appears. That will ensure that any page content added to the other pages will display above the four buttons. In the next section, you ll see how to add links to the pages using the Hyperlink menu. Adding links with the Links menu As you design sites with multiple layouts, you ll notice the Links menu is organized into sections, making it easy to add links to different pages in each layout. 1 Click once on the group of buttons to select the entire group, and then click again to select the orange 01 button at the top. 2 Click the menu that says: Add or filter links to see that the Recently Used Links section is listed at the top, then there s a section that contains the Desktop links, a section that contains the Phone links, and a section that contains the Files (where downloadable files are listed if your site links to downloadable files, such as PDF files). If you add a tablet layout, the Links menu includes a section that contains the pages in the Tablet layout as well. Each section of the menu is categorized, so that you can easily track the links added to each layout. Additionally, anchor links (when present in a site) are now slightly indented and listed below the page where they exist. 3 While the 01 button is selected, use the Links menu to choose the Section 01 page. This simple sample project does not contain many pages, so it is easy to choose from the Link menu. However, when working on a more complex project, you may find that the lists become much longer and it is time consuming to read through the menu to find the correct page. 9 Creating mobile layout designs in Adobe Muse

10 To search for a link, you can start typing the beginning of the page name or anchor name in the Links menu. You only have to type the first few letters, and the Links menu filters the results and displays them in a drop-down list. This makes it easy to access the links you want to update quickly. If you create a link and then change your mind and want to remove it, you can select a link in the Hyperlink menu and click the X button to the right of the menu to delete it. 4 Repeat step 1 to add links to the 02, 03, and 04 buttons, so that they are linked to the corresponding pages in the phone layout. 5 Select the Home icon in the header. Use the links menu to add a link to the Home (phone) page. This makes it easy for visitors to jump back to the home page of the site. Adding a link to the Home page in the header is a common web design convention. 6 Click the Landing (Phone) tab. Repeat step 3 by selecting the Home icon and setting the link to the Home (Phone) page. Now both the master phone pages share the same header content, which helps visitors navigate and remain oriented on a small screen. At this point, you ve added all of the main navigation links to the phone layout. In the next section, you ll populate each of the pages with unique content. Adding page content to the phone layout pages You ll begin by finalizing the Home page. 1 Click the Interior (Phone) tab. Copy the entire group of four numbered buttons. 2 Use the Go to Page feature to jump to the Home (phone) page and paste the group. The links that you added in the previous section are retained, so now both the Home page and the Interior master page share the same navigation. 3 Use the Selection tool to position the group in the center of the Home page, near the bottom of the footer. 4 Click the scratch (Desktop) tab to return to the scratch page. Copy the text frame in the far left pod that says: There s more than one way to solve a problem. 5 Click the Home (Phone) tab and paste the text frame. Use the Selection tool to position the text frame, so that it is centered above the group of buttons. Next, you ll add the page content for the Section 01 page. 6 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle and three text frames, in the second pod from the left. The three text frames include the 01 circle, the section 01 placeholder text, and the orange Phone button. Copy the selected items. 7 Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 01. Click the down arrow key to select the Section 01 phone page and then press Return/ Enter to open it in Design view. 10 Creating mobile layout designs in Adobe Muse

11 8 Paste the elements on the Section 01 page of the phone layout. Use the Selection tool to center them on the page using the guides that temporarily appear. The purpose of the Section 01 page is to provide a brief introduction to the business and make it easy for mobile visitors to call it. When designing mobile websites, you can add a new type of link that enables the visitor to tap their screen and invoke the smartphone s phone dialer to call a number. This is a great mobile site feature because it enables potential customers call a business very easily. To add a link in a mobile layout to dial a phone number, follow these steps: 1 Use the Selection tool to select the Phone button. 2 In the Links menu field, type tel:+1 and then a phone number, like this: tel: This is the format that mobile browsers recognize for telephone number links. 3 Press Return or Enter to save the link. Note: If you d prefer to create an link, you can enter the following format in the Hyperlink menu field: After adding the link to the Phone button, the Section 01 page design is complete. 1 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle, the green 02 circle, the Section 02 text frame, the embedded map, and the green Map button. Copy the selected items. 2 Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 02. Click the down arrow key to select the Section 02 phone page and then press Return/Enter to open it in Design view. 3 Paste the elements you copied in step 1 on the Section 02 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The Section 02 page contains embedded HTML code that was generated on the Google Maps website to create an interactive map. If you followed along with the tutorial titled Getting Started with Muse, you ll remember that you copied the Google Map source code from the Google website and used the embedded HTML feature in Muse to paste it into the a page. Fortunately, Google Map code already includes support for finger gestures on touch screens, so visitors with devices can interact with the map easily. For this sample project, the map dimensions have already been resized. However, If you need to resize the dimensions of embedded HTML content in your projects, you can rightclick on the content and choose HTML to view the code in the HTML window. You can edit the height and width values in the code to resize the map to fit a smaller screen. 1 Select the Map button. This time, you ll add a link to an external website (Google Maps) to make it easy for mobile visitors to visit the full version of the map in a new browser window. 11 Creating mobile layout designs in Adobe Muse

12 2 Copy the link below and paste it into the field of the Links menu: n= , &hq=adobe+systems,&hnear=san+francisco,+california&t=m&z=14 3 Click the word Links to the left of the Links menu. In the dialog box that appears, select the checkbox: Open link in a new window or tab. Also, in the Tooltip field, enter the following text: Map to Adobe Fremont. 4 Click away from the Links dialog box to close it. Next, you ll add the page content for the Section 03 page. 1 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle, the purple 03 circle, the Section 03 text frame, the contact form, and the submit button. Copy the selected items. 2 Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 03. Click the down arrow key to select the Section 03 phone page and then press Return/Enter to open it in Design view. 3 Paste the elements you copied in step 1 on the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The styles applied to the desktop Contact Form widget are maintained when copied to the phone layout. The only change made to prepare the form for a mobile layout involves resizing the form and the form elements to fit on a smaller screen. The Section 03 page contains a Contact form widget that uses the Business Catalyst server-side scripts and database to process the submitted form data. When you click Publish and upload the site files from Muse, the form functionality works automatically. Note: While you can use other service providers to host your finished Muse website, be aware that you ll need to do some additional coding in order to make contact forms work if they are not hosted on the Business Catalyst servers. In this sample project, the contact form does not have CAPTCHA enabled. CAPTCHA is a setting in the Options menu for Contact Form widgets that you can add when you want to confirm that the form was submitted by a human, and not a script or spam bot - the CAPTCHA interface displays an image with a series of characters that requires the visitor to type in the matching string in order to successfully submit their message through the form. While spam bot form submissions can be a nuisance, it s also important to consider the site s usability on a mobile phone. If you make the form too difficult to fill out, visitors may decide not to submit their message. The Section 03 page is now complete. There s no need to add a link to the Submit button, because the button is already set up as part of the Contact Form widget. The final page of the phone layout, Section 04, contains a Slideshow widget. Widgets in Muse are designed and tested to work with all modern desktop and mobile browsers, so you don t need to change anything to make the slideshow work on a touch screen. Follow these steps to copy the content from the scratch page of the desktop layout to the Section 04 page in the phone layout: 12 Creating mobile layout designs in Adobe Muse

13 1 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white long background rectangle, the red 04 circle, the Slideshow widget, and the Section 04 text frame. You can use the Selection tool to click and drag over all the elements to select them at once. Copy the selected items. 2 Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 04. Click the down arrow key to select the Section 04 phone page and then press Return/Enter to open it in Design view. 3 Paste the elements you copied in step 1 on the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The styles applied to the desktop Contact Form widget are maintained when copied to the phone layout. The only change made to prepare the form for a mobile layout involves resizing the form and the form elements to fit on a smaller screen. When you add widgets with interactive features (such as Slideshow widgets) to mobile layouts you create in Muse, you ll notice that the Options panel includes the option: Enable Swipe. This setting is enabled by default, so any widgets you add to your mobile designs are automatically set up to allow visitors to tap and use gestures on touch screens. The Section 04 page contains a Slideshow widget that displays the corresponding image when a thumbnail is tapped. The slideshow is configured to use a horizontal transition to flip between images in the gallery. This example requires user interaction to display the photos, although if you choose, you can set the Slideshow widget to autoplay, so that it will cycle through the images automatically when the page loads. Note: If you configure slideshow widgets to use the Fade, Horizontal, or Vertical transitions, the code in Muse automatically enables the Swipe finger gesture to allow visitors to swipe their touch screen to flip through the slideshow images. In the next section, Creating mobile layout designs in Muse, part 3, you ll learn how to easily update assets across all mobile platforms, and how to publish your Muse site for each mobile layout. Updating and optimizing assets for display on mobile devices Compared to desktop computers, tablets and smartphones have a much more limited processor, slower connection speeds, and smaller storage capacity. As a result, special consideration is required when designing and delivering site designs on mobile devices. Muse includes features that can help you optimize the graphics displayed in the mobile layouts to ensure that the site loads quickly and performs acceptably. 1 Press Command/Control+7 to display the desktop layout, and then double-click the A-Master desktop file to open it in Design view. 2 Open the Assets panel by clicking its tab in the panel set to make it active. Or, if it is closed, choose Window > Assets. 3 Select the large background image of the green hills. The asset is highlighted in the Assets panel. 4 Click the asset s name, background.jpg, to expand the list of instances used in the site. Notice that the background image file is listed three times, with two different icons, indicating that it is used in both the phone and desktop layouts. In this small example site, the list of assets is fairly manageable, but when you build larger sites, the list of assets can become longer and harder to scan. 13 Creating mobile layout designs in Adobe Muse

14 To make the list of assets easier to navigate, you can select the first item for each asset and then click the arrow to the left to collapse the set. Click it again when you want to expand to view the full list of instances where the asset is used in the site project. If you want to locate the assets used for a specific layout, click the top of the column on the far right of the Assets panel that displays the Desktop, Tablet, or Phone icons. This causes the list of assets to sort so that the assets for each layout are displayed in a consolidated set. If you want to make a change to a graphic that will update all instances of it (on all layouts) you can right-click on an asset name and choose Edit Original from the menu that appears. The original file you placed opens in Photoshop, Fireworks, or the image-editing program you used to create it, so that you can quickly make changes. When you save the revised original file and return to Muse, the item in the Assets panel will display the Out of Sync icon to indicate the version of the graphic in the site no longer matches the source file. Right-click the file again and choose Update to update all iterations of the graphic to use the new version. Previewing mobile layouts There are several options you can use to preview the site designs you create: While in the Design View of the Desktop layout, click Preview to see the built-in Webkit-based emulator render the HTML, CSS, and JavaScript. Preview lets you see how your layouts will appear in a browser before publishing a site and checking it online with a device. 1 While in the Design view of the Phone view, click Preview to see the phone layout display. Use the Preview Size menu to select between iphone 4, iphone 5, Samsung Galaxy S III, and Nokia Lumia 920 to see the layout displayed on different screen sizes 14 Creating mobile layout designs in Adobe Muse

15 2 Click the icon to the right of the Preview Size window to switch between viewing the layout in portrait or landscape modes. The Preview Size includes pre-defined height and width ratios that cover the most common mobile phone screen sizes. Some of the smartphone screens are wider, such as the Motorola Droid. If a visitor has a wider display, then the Viewport feature in Muse automatically scales the phone layout width to fit the available screen real estate. While in preview mode, you can click links and navigate through the site. You can scroll, which simulates a finger gesture swipe, but to actually test it, you ll want to test it on the device. If you click the i button next to the Preview Size menu in Preview mode, you ll see a note with a link describing an Adobe tool named Edge Inspect. Edge Inspect lets you use a Chrome browser extension to connect mobile devices to your computer, and then sync them with content viewed in your desktop Chrome browser. With Edge Inspect, you can use Chrome and the Preview in Browser option in Muse to view a site on your desktop, and the same page is also automatically displayed on the connected devices. (Be sure to set Chrome as your default browser). To learn more about working with Edge Inspect, visit the Edge Inspect Product page. If desired, you can also purchase a third-party tool named Reflection, which enables you to see an emulation of your device (which is connected using the same network connection) appear on your desktop computer screen. While using your smartphone or tablet to navigate a site, the emulator mirrors the touch screen of your device. Publishing a site with mobile layouts You can publish sites with multiple layouts in Muse using the same method you use normally to publish desktop sites. It is helpful to publish trial sites and then use mobile devices to view the live version to test the designs on smaller screens. 1 Click Publish or choose File > Upload to FTP Host to upload the site files to the hosting server. When you publish a Muse site with multiple layouts, it is pushed live with a single URL. So you only have to register one domain name, like this: When you publish a site with two or three different layouts, Muse generates the code for the site that includes detection scripts that identify which type of computer or device and which type of browser the visitor is using the access the page. The detection code determines the platform and browser version, and then automatically displays the correct layout. You don t have to do anything to ensure that visitors using a tablet will see the tablet design and visitors using smartphones will see the phone design. It all happens behind the scenes. The new mobile layout features in Muse enable you to optimize your mobile layouts so that device users do not download larger files unnecessarily. The alternate layout functionality serves up only the smaller, resized image files so that the site performs well across all platforms and browsers. 15 Creating mobile layout designs in Adobe Muse

ADOBE MUSE. Building your first website

ADOBE MUSE. Building your first website ADOBE MUSE Building your first website Contents Chapter 1... 1 Chapter 2... 11 Chapter 3... 20 Chapter 4... 30 Chapter 5... 38 Chapter 6... 48 Chapter 1 Installing the software and setting up the sample

More information

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Chapter 14: Links. Types of Links. 1 Chapter 14: Links 1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and

More information

Google Docs Basics Website: http://etc.usf.edu/te/

Google Docs Basics Website: http://etc.usf.edu/te/ Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google

More information

Google Sites: Creating, editing, and sharing a site

Google Sites: Creating, editing, and sharing a site Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

SiteBuilder 2.1 Manual

SiteBuilder 2.1 Manual SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can

More information

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Creating Interactive PDF Forms

Creating Interactive PDF Forms Creating Interactive PDF Forms Using Adobe Acrobat X Pro Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This

More information

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field. Adobe Acrobat Professional X Part 3 - Creating Fillable Forms Preparing the Form Create the form in Word, including underlines, images and any other text you would like showing on the form. Convert the

More information

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and

More information

Adobe InDesign Creative Cloud

Adobe InDesign Creative Cloud Adobe InDesign Creative Cloud Beginning Layout and Design November, 2013 1 General guidelines InDesign creates links to media rather than copies so -Keep all text and graphics in one folder -Save the InDesign

More information

WebViewer User Guide. version 2.1.0. 2002-2015 PDFTron Systems, Inc. 1 of 13

WebViewer User Guide. version 2.1.0. 2002-2015 PDFTron Systems, Inc. 1 of 13 WebViewer User Guide version 2.1.0 2002-2015 PDFTron Systems, Inc. 1 of 13 Table of Contents Introduction Desktop HTML5 Toolbar Menu Toolbar Buttons Page Navigation Display Modes Tool Modes Annotation

More information

Web Ambassador Training on the CMS

Web Ambassador Training on the CMS Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create

More information

Creating Hyperlinks & Buttons InDesign CS6

Creating Hyperlinks & Buttons InDesign CS6 Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,

More information

WebPlus X7. Quick Start Guide. Simple steps for designing your site and getting it online.

WebPlus X7. Quick Start Guide. Simple steps for designing your site and getting it online. WebPlus X7 Quick Start Guide Simple steps for designing your site and getting it online. In this guide, we will refer to specific tools, toolbars, tabs, or options. Use this visual reference to help locate

More information

WebPlus X8. Quick Start Guide. Simple steps for designing your site and getting it online.

WebPlus X8. Quick Start Guide. Simple steps for designing your site and getting it online. WebPlus X8 Quick Start Guide Simple steps for designing your site and getting it online. In this guide, we will refer to specific tools, toolbars, tabs, or options. Use this visual reference to help locate

More information

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide

Decision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide Decision Support AITS University Administration Web Intelligence Rich Client 4.1 User Guide 2 P age Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence

More information

Adobe CQ5 Authoring Basics Print Manual

Adobe CQ5 Authoring Basics Print Manual Adobe CQ5 Authoring Basics Print Manual SFU s Content Management System SFU IT Services CMS Team ABSTRACT A summary of CQ5 Authoring Basics including: Setup and Login, CQ Interface Tour, Versioning, Uploading

More information

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website.

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website. WIX: Building a Website with a Template Choosing a Template First you will need to choose a template from the Create section of the Wix website. To choose a template: 1. Go to wix.com. 2. From the top

More information

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production SoftChalk Level 1 University Information Technology Services Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production Page 1 of 49 Copyright 2013 KSU Department of University Information

More information

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK

More information

History Explorer. View and Export Logged Print Job Information WHITE PAPER

History Explorer. View and Export Logged Print Job Information WHITE PAPER History Explorer View and Export Logged Print Job Information WHITE PAPER Contents Overview 3 Logging Information to the System Database 4 Logging Print Job Information from BarTender Designer 4 Logging

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

Create A Collage Of Warped Photos

Create A Collage Of Warped Photos Create A Collage Of Warped Photos In this Adobe Photoshop tutorial, we re going to learn how to create a collage of warped photos. Now, don t go letting your imagination run wild here. When I say warped,

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

CMS Training. Prepared for the Nature Conservancy. March 2012

CMS Training. Prepared for the Nature Conservancy. March 2012 CMS Training Prepared for the Nature Conservancy March 2012 Session Objectives... 3 Structure and General Functionality... 4 Section Objectives... 4 Six Advantages of using CMS... 4 Basic navigation...

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

PDF Web Form. Projects 1

PDF Web Form. Projects 1 Projects 1 In this project, you ll create a PDF form that can be used to collect user data online. In this exercise, you ll learn how to: Design a layout for a functional form. Add form fields and set

More information

Microsoft Word 2013 Tutorial

Microsoft Word 2013 Tutorial Microsoft Word 2013 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,

More information

FastTrack Schedule 10. Tutorials Manual. Copyright 2010, AEC Software, Inc. All rights reserved.

FastTrack Schedule 10. Tutorials Manual. Copyright 2010, AEC Software, Inc. All rights reserved. FastTrack Schedule 10 Tutorials Manual FastTrack Schedule Documentation Version 10.0.0 by Carol S. Williamson AEC Software, Inc. With FastTrack Schedule 10, the new version of the award-winning project

More information

Microsoft Word 2010. Quick Reference Guide. Union Institute & University

Microsoft Word 2010. Quick Reference Guide. Union Institute & University Microsoft Word 2010 Quick Reference Guide Union Institute & University Contents Using Word Help (F1)... 4 Window Contents:... 4 File tab... 4 Quick Access Toolbar... 5 Backstage View... 5 The Ribbon...

More information

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits

More information

MS Word 2007 practical notes

MS Word 2007 practical notes MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the

More information

Umbraco v4 Editors Manual

Umbraco v4 Editors Manual Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

WebFOCUS BI Portal: S.I.M.P.L.E. as can be

WebFOCUS BI Portal: S.I.M.P.L.E. as can be WebFOCUS BI Portal: S.I.M.P.L.E. as can be Author: Matthew Lerner Company: Information Builders Presentation Abstract: This hands-on session will introduce attendees to the new WebFOCUS BI Portal. We will

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

Contents The Design Chooser... 5

Contents The Design Chooser... 5 Mail Designer Pro 2 Contents The Design Chooser... 5 Mail Designer Pro 2 at a glance... 6 The Contents section... 7 The Style section... 11 Your first mail design... 13 Creating a new design... 13 Working

More information

Training Manual Version 1.0

Training Manual Version 1.0 State of Indiana Content Management System Open Text v.11.2 Training Manual Version 1.0 Developed by Table of Contents 1. Getting Started... 4 1.1 Logging In... 4 1.2 OpenText Menu...5 1.3 Selecting a

More information

Easy Scan Complete. Administrator User Guide. HealthStream Competency Cent. HealthStream, Inc. 209 10th Ave. South Suite 450 Nashville, TN 37203

Easy Scan Complete. Administrator User Guide. HealthStream Competency Cent. HealthStream, Inc. 209 10th Ave. South Suite 450 Nashville, TN 37203 Easy Scan Complete Administrator User Guide HealthStream, Inc. 209 10th Ave. South Suite 450 Nashville, TN 37203 HealthStream Competency Cent Table of Contents Easy Scan Overview... 3 Gathering Data for

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

PowerPoint 2013: Basic Skills

PowerPoint 2013: Basic Skills PowerPoint 2013: Basic Skills Information Technology September 1, 2014 1 P a g e Getting Started There are a variety of ways to start using PowerPoint software. You can click on a shortcut on your desktop

More information

Microsoft PowerPoint 2010 Handout

Microsoft PowerPoint 2010 Handout Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience

More information

Custom Reporting System User Guide

Custom Reporting System User Guide Citibank Custom Reporting System User Guide April 2012 Version 8.1.1 Transaction Services Citibank Custom Reporting System User Guide Table of Contents Table of Contents User Guide Overview...2 Subscribe

More information

Introducing our new Editor: Email Creator

Introducing our new Editor: Email Creator Introducing our new Editor: Email Creator To view a section click on any header below: Creating a Newsletter... 3 Create From Templates... 4 Use Current Templates... 6 Import from File... 7 Import via

More information

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...

More information

Handout: Word 2010 Tips and Shortcuts

Handout: Word 2010 Tips and Shortcuts Word 2010: Tips and Shortcuts Table of Contents EXPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 IMPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 USE THE FORMAT PAINTER... 3 REPEAT THE LAST ACTION... 3 SHOW

More information

Florence School District #1

Florence School District #1 Florence School District #1 Training Module 2 Designing Lessons Designing Interactive SMART Board Lessons- Revised June 2009 1 Designing Interactive SMART Board Lessons Lesson activities need to be designed

More information

Contents The Design Chooser... Mail Designer Pro 2 at a glance... The contents window... Working with text... Your first mail design...

Contents The Design Chooser... Mail Designer Pro 2 at a glance... The contents window... Working with text... Your first mail design... Mail Designer Pro 2 Contents The Design Chooser... 4 Mail Designer Pro 2 at a glance... 5 The contents window... 6 Your first mail design... 9 Creating a new design... 9 Working with layout blocks... 9

More information

Triggers & Actions 10

Triggers & Actions 10 Triggers & Actions 10 CHAPTER Introduction Triggers and actions are the building blocks that you can use to create interactivity and custom features. Once you understand how these building blocks work,

More information

Hypercosm. Studio. www.hypercosm.com

Hypercosm. Studio. www.hypercosm.com Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks

More information

Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface...

Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface... 2 CONTENTS Module One: Getting Started... 6 Opening Outlook... 6 Setting Up Outlook for the First Time... 7 Understanding the Interface...12 Using Backstage View...14 Viewing Your Inbox...15 Closing Outlook...17

More information

TABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need.

TABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need. SURUDESIGNER YEARBOOK TUTORIAL TABLE OF CONTENTS INTRODUCTION Download, Layout, Getting Started... p. 1-5 COVER/FRONT PAGE Text, Text Editing, Adding Images, Background... p. 6-11 CLASS PAGE Layout, Photo

More information

Google Drive: Access and organize your files

Google Drive: Access and organize your files Google Drive: Access and organize your files Use Google Drive to store and access your files, folders, and Google Docs, Sheets, and Slides anywhere. Change a file on the web, your computer, tablet, or

More information

Rochester Institute of Technology. Finance and Administration. Drupal 7 Training Documentation

Rochester Institute of Technology. Finance and Administration. Drupal 7 Training Documentation Rochester Institute of Technology Finance and Administration Drupal 7 Training Documentation Written by: Enterprise Web Applications Team CONTENTS Workflow... 4 Example of how the workflow works... 4 Login

More information

Cascade Content Management System Training

Cascade Content Management System Training Cascade Content Management System Training 2 3 HOW TO LOGIN 1. Visit cms.unomaha.edu 2. Using your NetID and password, login in here. THE DASHBOARD Here is an example of the dashboard: CASCADE CONTENT

More information

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Sage Accountants Business Cloud EasyEditor Quick Start Guide Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing

More information

Chapter 15: Forms. User Guide. 1 P a g e

Chapter 15: Forms. User Guide. 1 P a g e User Guide Chapter 15 Forms Engine 1 P a g e Table of Contents Introduction... 3 Form Building Basics... 4 1) About Form Templates... 4 2) About Form Instances... 4 Key Information... 4 Accessing the Form

More information

KOBO EREADER USER GUIDE, JUNE 2011

KOBO EREADER USER GUIDE, JUNE 2011 KOBO EREADER USER GUIDE, JUNE 2011 TABLE OF CONTENTS Section 1 - Getting Started ereader basics... 3 Reading a book... 7 Adding books from the Kobo Store... 10 Using Kobo Desktop with your ereader... 12

More information

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen

More information

Generating lesson plans with. Adobe Acrobat

Generating lesson plans with. Adobe Acrobat Generating lesson plans with Adobe Acrobat Introduction Being a teacher requires so many non-teaching administrative tasks that sometimes just teaching gets lost in the paper shuffle. You can automate

More information

Extended Reference for Freeway 7

Extended Reference for Freeway 7 1 Extended Reference for Freeway 7 Extended Reference for Freeway 7 1 Introduction This guide covers the new features and improvements offered in Freeway 7. While the main new feature is support for building

More information

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit

More information

How to build text and objects in the Titler

How to build text and objects in the Titler How to build text and objects in the Titler You can use the Titler in Adobe Premiere Pro to create text and geometric objects. There are three methods for creating text, each capable of producing either

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

Microsoft Access 2010 handout

Microsoft Access 2010 handout Microsoft Access 2010 handout Access 2010 is a relational database program you can use to create and manage large quantities of data. You can use Access to manage anything from a home inventory to a giant

More information

Table of Contents. Vu ipad. v2.6. Navigation. Document Manager. Sync Manager. File Access. Field Verification Measurements. Markups List.

Table of Contents. Vu ipad. v2.6. Navigation. Document Manager. Sync Manager. File Access. Field Verification Measurements. Markups List. Table of Contents Navigation Document Manager Sync Manager File Access Field Verification Measurements Markups List Forms Studio Sessions Studio Projects Preferences Vu ipad v2.6 Navigation Panels There

More information

E-commerce. Further Development 85

E-commerce. Further Development 85 Further Development 85 If you ve ever bought anything online, you ll know how simple the process can be as a buyer. But how difficult is it to set up your own e-store? Fortunately with WebPlus, the process

More information

SMART Board Training Outline Trainer: Basel Badran

SMART Board Training Outline Trainer: Basel Badran Sharjah Higher Colleges of Technology SMART Board Training Outline Trainer: Basel Badran What is a SMART Board? o Concept & Technology SMART Board Components: o Smart Tools Start Center Recorder Keyboard

More information

Creating an Email with Constant Contact. A step-by-step guide

Creating an Email with Constant Contact. A step-by-step guide Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here

More information

Book Builder Training Materials Using Book Builder September 2014

Book Builder Training Materials Using Book Builder September 2014 Book Builder Training Materials Using Book Builder September 2014 Prepared by WDI, Inc. Table of Contents Introduction --------------------------------------------------------------------------------------------------------------------

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations Creating Interactive Documents with PDFs and SWFs Adapted from Chris Converse, http://www.codifydesign.com/ Laurie Burruss laurie@lynda.com Pasadena City College Dec 9 3 pm Lynda.com > InDesign CS5 Tutorials

More information

Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015

Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015 Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015 1 TABLE OF CONTENTS 2 What is Appspace For Digital Signage... 4 3 Access Appspace... 4 4 Best Practices and Notes... 4 5 Appspace

More information

Table of Contents. Welcome... 2. Login... 3. Password Assistance... 4. Self Registration... 5. Secure Mail... 7. Compose... 8. Drafts...

Table of Contents. Welcome... 2. Login... 3. Password Assistance... 4. Self Registration... 5. Secure Mail... 7. Compose... 8. Drafts... Table of Contents Welcome... 2 Login... 3 Password Assistance... 4 Self Registration... 5 Secure Mail... 7 Compose... 8 Drafts... 10 Outbox... 11 Sent Items... 12 View Package Details... 12 File Manager...

More information

SMART Ink 1.5. Windows operating systems. Scan the following QR code to view the SMART Ink Help on your smart phone or other mobile device.

SMART Ink 1.5. Windows operating systems. Scan the following QR code to view the SMART Ink Help on your smart phone or other mobile device. SMART Ink 1.5 Windows operating systems User s guide Scan the following QR code to view the SMART Ink Help on your smart phone or other mobile device. Trademark notice SMART Ink, SMART Notebook, SMART

More information

Using the Jive for ios App

Using the Jive for ios App Using the Jive for ios App TOC 2 Contents App Overview...3 System Requirements... 4 Release Notes...5 Which Version Am I Using?... 6 Connecting to Your Community... 11 Getting Started...12 Using Your Inbox...13

More information

1. Tutorial - Developing websites with Kentico 8... 3 1.1 Using the Kentico interface... 3 1.2 Managing content - The basics... 4 1.2.

1. Tutorial - Developing websites with Kentico 8... 3 1.1 Using the Kentico interface... 3 1.2 Managing content - The basics... 4 1.2. Kentico 8 Tutorial Tutorial - Developing websites with Kentico 8.................................................................. 3 1 Using the Kentico interface............................................................................

More information

Mail Chimp Basics. Glossary

Mail Chimp Basics. Glossary Mail Chimp Basics Mail Chimp is a web-based application that allows you to create newsletters and send them to others via email. While there are higher-level versions of Mail Chimp, the basic application

More information

Introduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6

Introduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6 Contents Introduction 3 Getting Familiar With Presence Builder... 4 Creating and Editing Websites 6 Importing Sites from SiteBuilder 4.5... 7 Editing Websites... 9 Structure: Pages and Navigation... 9

More information

Sweet Home 3D user's guide

Sweet Home 3D user's guide 1 de 14 08/01/2013 13:08 Features Download Online Gallery Blog Documentation FAQ User's guide Video tutorial Developer's guides History Reviews Support 3D models Textures Translations Forum Report a bug

More information

Drupal Training Guide

Drupal Training Guide Drupal Training Guide Getting Started Drupal Information page on the IT site: http://it.santarosa.edu/drupal On this page is information about Drupal sign up, what Drupal is, which is a content management

More information

Enhanced Formatting and Document Management. Word 2010. Unit 3 Module 3. Diocese of St. Petersburg Office of Training Training@dosp.

Enhanced Formatting and Document Management. Word 2010. Unit 3 Module 3. Diocese of St. Petersburg Office of Training Training@dosp. Enhanced Formatting and Document Management Word 2010 Unit 3 Module 3 Diocese of St. Petersburg Office of Training Training@dosp.org This Page Left Intentionally Blank Diocese of St. Petersburg 9/5/2014

More information

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

Mura CMS. (Content Management System) Content Manager Guide

Mura CMS. (Content Management System) Content Manager Guide Mura CMS (Content Management System) Content Manager Guide Table of Contents Table of Contents 1. LOGGING IN...1 2. SITE MANAGER...2 3. ADDING CONTENT (Pages, Folders, etc.)...6 4. WORKING WITH IMAGES...15

More information

CMS Basic Training. Getting Started

CMS Basic Training. Getting Started The (Content Management System), was designed to allow most people in an organization to contribute to or edit their website(s). Utilizing a set of templates and stylesheets, users can add or edit information

More information

2013 Getting Started Guide

2013 Getting Started Guide 2013 Getting Started Guide The contents of this guide and accompanying exercises were originally created by Nemetschek Vectorworks, Inc. Vectorworks Fundamentals Getting Started Guide Created using: Vectorworks

More information

Create an Art Collage

Create an Art Collage Create an Art Collage Anyone with children knows how much art they bring home from school everyday, those backpacks full of art add up fast. Now, you don t have to part with a single precious piece or

More information

University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department

University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department i Version 3.4 Contents Overview...iii Introducing Liferay... iv 1. Logging in and accessing your site... 1 2.

More information

Microsoft PowerPoint 2010 Templates and Slide Masters (Level 3)

Microsoft PowerPoint 2010 Templates and Slide Masters (Level 3) IT Services Microsoft PowerPoint 2010 Templates and Slide Masters (Level 3) Contents Introduction... 1 Installed Templates and Themes... 2 University of Reading Templates... 3 Further Templates and Presentations...

More information

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield PART 1 1.1 Getting Started 1. Log on to the computer with your usual username

More information

SHAREPOINT 2010 FOUNDATION FOR END USERS

SHAREPOINT 2010 FOUNDATION FOR END USERS SHAREPOINT 2010 FOUNDATION FOR END USERS WWP Training Limited Page i SharePoint Foundation 2010 for End Users Fundamentals of SharePoint... 6 Accessing SharePoint Foundation 2010... 6 Logging in to your

More information

Search help. More on Office.com: images templates

Search help. More on Office.com: images templates Page 1 of 14 Access 2010 Home > Access 2010 Help and How-to > Getting started Search help More on Office.com: images templates Access 2010: database tasks Here are some basic database tasks that you can

More information

Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication

Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication You will be directed to the "Portfolio Settings! page. On this page you will fill out basic DIGICATION E-PORTFOLIO HELP GUIDE Where do I start? Log in to Digication Go to your school!s Digication login

More information

Build a New Website Using the UB Content Management System (UBCMS)

Build a New Website Using the UB Content Management System (UBCMS) Build a New Website Using the UB Content Management System (UBCMS) Support Website Online training, help and support, UBCMS status and more. ubcms.buffalo.edu Training Feedback Survey https://www.surveymonkey.com/s/mm-dd-yyyy

More information

If you know exactly how you want your business forms to look and don t mind detail

If you know exactly how you want your business forms to look and don t mind detail Advanced Form Customization APPENDIX E If you know exactly how you want your business forms to look and don t mind detail work, you can customize QuickBooks forms however you want. With QuickBooks Layout

More information