Xerte. Guide to making responsive webpages with Bootstrap

Transcription

1 Xerte Guide to making responsive webpages with Bootstrap Introduction The Xerte Bootstrap Template provides a quick way to create dynamic, responsive webpages that will work well on any device. Tip: Webpages can be hosted right on the Xerte platform (with the url starting with but can also be uploaded onto your own website. Note that this will not work on the University CMS. Accessing Xerte 1. Go to (preferably in Chrome, Firefox or Safari). 2. Enter your Durham University username and password. Creating a webpage 1. To access the full suite of Xerte page types, look under Project Templates. 2. Find the Bootstrap Template. 3. Click + Create to get started. 4. Enter a name for the project (you can always change this later) and click + Create. 1

2 5. A new project editing window will open. 6. Enter your Learning Object Title. 7. For Optional Properties, click the small arrow at the upper right. a. Author Support: shows information about your project to you only; this appears in red when you preview the project. b. Header: add an image or logo and change the background and text colours for the webpage header. c. JavaScript Libraries: add urls for your own JavaScript. d. Script: enter your own script directly. e. Styles and Stylesheet: type in or upload your own CSS stylesheet for the project. Tip: If you are familiar with CSS, you can define your own styles. To view the current stylesheets for your project, open the project and view the source. Find the path to the theme stylesheets (under <!--styles -->) and click the links (or add each onto the following url: 8. Click Page Title in the project outline to start working on the first webpage. 9. Enter the Page Title and Subtitle. 2

3 10. To start adding content, expand the first page menu and choose This is section One. 11. Change the Section Title. 12. Choose the type of content to add: a. Text: includes a fully functional web editor (see below) b. Image: upload an image c. Audio: upload an audio file d. Video: upload a video file Tip: It is usually better to host video on YouTube or Kaltura and embed it using Text (see below). e. Navigator: create click-through content (see below) f. Link: include a hyperlink g. PDF File: upload a PDF file to be embedded on the page Text editor The text editor has numerous functions for formatting web content and adding images and multimedia. Click the arrow to the right to expand the editor options. To change text size, use Styles (not Size) to accommodate different devices. 3

4 To include an image: o drag and drop it into the text editor if possible; if this doesn t work (e.g. in Internet Explorer) or if the image displays oddly (e.g. the text is in front of the image), click the Image button and see the Media Browser guide for full details o only use images that you have uploaded to Xerte (not hyperlinks to other sites) o when the image is in the editor, right-click it to change the size, layout and description To include video from another website, click the Embed Media from External Sites button. Enter the url for the video. You can also change the size and alignment. (If entering the url does not work, use the embed code option below.) To paste embed code from another website, click Source and then paste. To add icons, click the FontAwesome button. To link from one Xerte page to another, use the Xerte Page Link option. Navigator Navigators create clickable subsections of content ( panes ) as part of the webpage. You can choose from the following types: Accordion: user vertically expands panes by clicking the titles. Carousel: user clicks right and left arrows to view panes (best for images). Pills: user reveals a pane by clicking its title, which is then highlighted. Tabs: user reveals a pane by clicking its title, which displays as a file tab. 4

5 To add content a Navigator: 1. After choosing New Navigator 2. Click New Pane 3. Give the Pane a name 4. Choose the type of content (as above) Previewing and saving your website Click Publish and then Play at any time to preview your project. Make sure to click Publish before closing a Xerte project this will just save the project; no one else will be able to see it until you make it available to them. Allowing someone else to see or edit your project 1. Once you have clicked Publish, close the Xerte project window. Your new project should appear under My Projects and Workspace. 2. Click once on your project. 3. Click Properties. 4. Click Shared settings. 5. Start typing in someone s name (they will need to have logged onto Xerte in the past). 6. When the correct name appears, click Add User. 7. Tick: Co-author for full rights Editor for rights to edit the project Read only for rights to view the project 8. You can also revoke sharing from this page with the Remove button. 5

6 Publishing your webpage 1. Once you have clicked Publish, close the Xerte project window. Your new project should appear under My Projects and Workspace. 2. Click once on your project. 3. Click Properties. 4. Click Access. 5. Choose your level of access: 5 a. Public: anyone with the hyperlink can see the project. b. Password protected: anyone who logs into Xerte can see the project. c. Other: restrict access to those who have followed the link from a specific website. d. Private: only you and anyone in Shared settings (as above) can see the project. 6. Click Project. 7. To supply project viewers with a link, copy the hyperlink displayed. (If you have restricted views from a specific website, the link must be followed from that site.) 7 8. To embed the project into another website*, copy the embed code and paste it into the HTML editor in duo (see below) or another web text editor. 8 To embed your project in duo: 9. In a content area, hover over Build Content and click Item. 10. Give the Item a Name. 6

7 11. Expand the text editor menu (if necessary). 12. Click HTML. 13. Paste the embed code from Xerte. 14. Click Update. 15. Back on the Item page, click Submit. Tip: If you are embedding in duo, it is recommended that you check to make sure your project works as expected within the duo site. *Projects can also be downloaded as complete websites (Properties Export Get Deployment Zip). 7