Today Mr. David Kim from the Learning Technology Center came and showed us the technical side of the Legacy Cycle - the Legacy Cycle website. I've created a guide that goes over most of the features on the site. If you have any additional questions, email Mr. Kim here.
Creating an Account
Getting Started
How do I edit a page?
What do all the buttons do?
How do I change how my text looks?
How do I add links to my page?
How do I add images?
How do I add a video from my computer?
How do I add a video from the web?
How do I add a flash video or game?
How do I create a table?
How do I change the title of my Legacy Cycle website?
Creating an Account
1. Go to the Legacy Cycle website here and click "Login" at the top right of the page. Then, click the "Registration" link at the right.
2. Enter your semester, year and the title of your website under "Project Website Info". You can change the title of your project after you create it later (How do I change the title of my Legacy Cycle website?).
Under the "Member Login Information" section, enter your desired User ID and your desired password twice.
Then, enter your name and email under the "Personal Information" section and a short description under "Self-Description". Press the "Submit for Registration" button.
3. Your account should be created. You can now login and start editing pages.
Getting Started
1. Login to the Legacy Cycle website at http://www.edb.utexas.edu/visionawards/petrosino/ by clicking "Login" at the top right of the page.
2. Enter your user ID and password.
3. Click "My Site" at the top right of the page. You should see your Legacy Cycle website.
4. To edit a page, navigate to that page and click the "[Edit]" link on that page. There are three challenges, and each challenge has six phases that are listed on the left side of the page.
How do I edit a page?
Navigate to the page you want to edit using the tabs at the top of the page and the links on the right of the page. Then, click the "[Edit]" link on the top right of the page.
A new window will pop up with an editor. Edit your page here by typing in the text box.
What do all the buttons do?
First row:
Undo: Undo your last edit.
Redo: Redo your last undo.
Ordered list: Create an ordered list (with numbers).
Bulleted list: Create a bulleted list.
Hyperlink: Make selected text a hyperlink
Remove hyperlink: Remove they hyperlink from selected text
Quick insert image: Insert an image from the file manager
Insert/Edit Image: Insert an image, or edit a selected image
Flash: Insert a flash movie or game
Video: Insert a video
Horizontal rule: Insert a horizontal line
HTML cleanup (remove styles): Removes any color or font size changes from selected text
Toggle borders: ?
Bold: Toggles bold on selected text or newly typed text
Italic: Toggles italics on selected text or newly typed text
Underline: Toggles underline on selected text or newly typed text
Strikethrough: Toggles strikethrough on selected text or newly typed text
Left: Left-aligns text or images
Center: Centers text or images
Right: Right-aligns text or images
Justified: Justifies text on the left and right
Indent: Increase the level of indentation on the current line
Unindent: Decrease the level of indentation on the current line
Fore color: Change the color of the selected text or newly typed text
Background color: Change the background color of the selected text or newly typed text
Superscript: Raise selected text or newly typed text as a superscript
Subscript: Lowers selected text or newly typed text as a subscript
Second row:
Style dropdown: Choose from a set of pre-defined font styles
Paragraph dropdown: Choose from a set of pre-defined text sizes
Create table: Creates a new table
Table properties: Modify a selected table
Cell properties: Modify a selected cell
Insert row: Insert a row below the currently selected row
Insert column: Insert a column to the right of the currently selected column
Delete row: Delete the currently selected row
Delete column: Delete the currently selected column
Merge right: Merge a cell to the right so that it spans more columns
Merge down: Merge a cell down so that it spans more rows
Split cell horizontally: Split a cell so that one more cell appears in the row for that column
Split cell vertically: Split a cell so that one more cell appears in that column for that row
How do I change how my text looks?
In the editor, you can change how your font looks by using the top row of buttons. You can highlight text you have already entered and click on the buttons to toggle on or off. Or, you can click a button before you type for text of that style. There are options for bold, italics, underline, strikethrough, superscript and subscript. You can also change the foreground and background color of the text.
To reset your style options, click the "Style" dropdown box on the second row of the editor and select "Normal".
How do I add links to my page?
To insert a hyperlink to a different web page, first type in the text that you want to be clicked. Then, highlight that text and press the "Hyperlink" button, the fifth button from the left on the top row of the editor. You can also make an image a link by selecting an image instead. A new window will pop up with a few options.
The "Type" dropdown box has two choices: "Link" and "Anchor". When a link is clicked, you will be taken to a different page. Use these to link to external websites or other pages on your Legacy Cycle website. An anchor is used to scroll the page to a certain spot, like the table of contents on this blog post. Using anchors is a two-step process. the first step is to mark the place you want to jump to, and the second spot is to create a link that jumps to that spot.
For the "Link" type of hyperlink:
1. Put the URL of the web page you want to link to in the "URL" field. Your URL should begin with "http://".
2. Choose how you want that link to open when somebody clicks on it: "same frame (_self)" will open the new web page in the same window as your Legacy Cycle website, and "new empty window (_blank)" will open the new web page in a new window. The other two options, "top frame (_top)" and "parent frame (_parent)", generally are not used.
3. Enter a title in the "Title" field. The title of the link will show up when you hover over the link, and can provide additional context for the link. Some screen readers, for example, will read the title text aloud.
For the "Anchor" type of hyperlink:
1. Put the name of the anchor in the "Name" field. You will refer to this anchor later with this name.
2. Enter a title in the "Title" field. See the description above.
3. Press OK to insert the anchor.
4. Select the text that will jump to the anchor when clicked.
5. Press the "Hyperlink" button again. This time the "Type" dropdown box will have a third choice: "Link to anchor". Select this choice.
6. The "Anchors" dropdown box will list all the anchors present on your page. Select the one you want this link to jump to.
7. Choose a target. See the description above.
8. Enter a title. See the description above.
To edit an existing hyperlink, select the hyperlink you want to edit and press the "Hyperlink" button. To remove a hyperlink, select the text that you previously hyperlinked and press the "Remove hyperlink" button next to the "Hyperlink" button.
How do I add images?
1. Click the "Quick insert image" button, the seventh button from the left on the top row of buttons. A new window will pop up with the file manager (you may need to resize the window to see the whole thing).
2. Choose a picture to upload to the site by clicking "Browse..." and selecting the picture on your computer. Then, click the "Upload" button. The image should appear on the left pane.
3. Select the image in the file manager by clicking it. On the right pane, you can see a preview and some details of the image, like file size and image dimensions.
4. Press OK. The image should appear in your editor window. You can select it and drag it around to place it where you want it.
To edit an image:
Select the image you want to edit. Eight squares should show up around the image, indicating that it is selected (you can resize the image by dragging the squares). Click the "Insert/Edit Image" button, the eighth button from the left on the top row of buttons. A new window will pop up with the image editor (you may need to resize the window to see the whole thing).
The "Source" field shows which image is being used. You should generally leave this field alone.
The text entered in the "Alternative text" field will be shown as a placeholder while the image is loading or if the image does not load.
Enter a title in the "Title" field. The title of the image will show up when you hover over the image, and can provide additional context for the image. Some screen readers, for example, will read the title text aloud.
You can resize the image with the "Width" and "Height" fields. The units are in pixels. Leave the "constrain proportions" checkbox checked if you want the width and height to scale together - editing width or height will automatically scale the other dimension. You can reset the image dimensions by clicking the "Reset dimensions" link on the left, under the preview.
The "Align" dropdown box allows you to change where the image shows up on the page. You can make the image left-aligned ("left"), right-aligned ("right") or centered ("middle") on the page. The other options are generally not used except for in tables.
The "Border" field specifies the width, in pixels, of the image border. The border is black.
"Hor. space" and "Vert. space" add spacing around the image, to separate it from surrounding text.
How do I add a video from my computer?
Note: It is generally better to upload your videos to a video hosting site like YouTube or Vimeo, rather than uploading it directly to your Legacy Cycle website.
1. Click the media button (the tenth button from the left on the top row). A new window will pop up. Click the "..." button next to the "Source" field to open the file manager.
2. In the file manager window, click "Browse..." to choose a movie file from your computer to upload. Files ending with ".mov" work best.
3. After the movie file is uploaded, choose that file by selecting it and pressing "OK" in the file manager window.
4. (Optional) Enter a width and height for the movie.
5. Leave the rest of the form empty and press "OK" to insert your video. A computer icon will show up as the placeholder for your video. You can drag this around like an image.
How do I add a video from the web?
1. Find the embed code for your video. Most video hosting sites will provide an embed code for you.
On YouTube, it can be found by clicking the "Share" button under the video, then clicking the "Embed" button under the link. A text box will appear with some HTML and some checkboxes underneath.
On Vimeo, it can be found by hovering over the video and clicking the "Embed" button on the right. A text box will appear with some HTML and a link to reveal more options underneath.
2. Choose your desired options and copy all of the text in the text box.
3. Open the editor for the page you want to insert the video. Click the "HTML" tab on the bottom right of the window. You should see a bunch of HTML.
4. Find where in the page you want to insert your video and paste the embed code. Your video should appear on your page now.
How do I add a flash video or game?
1. Click the "Flash" button, the ninth button from the left on the top row of buttons. A new window will pop up.
2. Click the "..." button next to the "Source" field. The file manager window will open.
3. In the file manager window, click "Browse..." to choose a flash file from your computer to upload. Flash files usually end in ".swf".
4. After the flash file is uploaded, choose that file by selecting it and pressing "OK" in the file manager window.
5. (Optional) Enter a width and height for the flash game or video.
6. Press "OK" to insert your flash game or video. A placeholder icon will show up in the editor. You can drag this around to place it where you want it on the page.
How do I create a table?
1. To create a table, press the first button from the left on the second row of buttons. This will open a table creation window.
2. Enter the number of rows and columns you want your table to have. You can change these later if you need to.
3. Leave the CSS class dropdown box set to Normal.
4. (Optional) Set the width and height of the table in the next section. You can have the table take up a percentage of the screen space horizontally by entering a percentage and having the "%" selected, or you can have the table take up a fixed amount of space by entering a pixel amount and choosing "px" in the dropdown.
5. (Optional) Enter a border width for the table. Usually you want this to be 1 pixel, but you can set this wider if you want the outside to be bolder.
6. (Optional) Cell padding is the space surrounding the content in each cell of the table. Cell spacing is the space between each cell of the table.
7. (Optional) Choose a background color by clicking the "..." button and using the color picker.
8. (Optional) Choose a background image that will be tiled in the background of the table.
To edit an existing table, select it and click the second button from the left on the second row of buttons.
How do I change the title of my Legacy Cycle website?
After you login to the website, click "My Profile" at the top right of the page. If you are already editing your website, click "Home" and then "My Profile" on the top right of the page. You can change the website title here, under "Project Website Information".
Each day in PBI a different student takes responsibility for blogging about what goes on in class. Today’s blog is brought to you by Fred.
No comments:
Post a Comment