Creating a Web Page Using Rapid Web Designer (RWD) Computer Services Department SHERBURNE- EARLVILLE CSD

Transcription

1 Creating a Web Page Using Rapid Web Designer (RWD) Computer Services Department SHERBURNE- EARLVILLE CSD

2 Table of Contents Part 1: Page Tab...3 Diagram 1b: Page Tab...3 Part 2: Header...4 Part 3: Navigation Sidebar...5 Diagram 3a: Web Page icons...5 Diagram 3b: Navigation Sidebar Content...5 Part 4: Information Sidebar...7 Part 5: Content Page Part 6: Adding Links to the Body of Your Web Page.. 9 FAQ. 11 Notes Page Creating and Adding Galleries to Your Web page Using iphoto 13 1

3 Creating Your Web Page Using Rapid Web Designer (RWD) Basic Web Page training for SECSD staff This will help you gain an understanding in creating your own web page using Rapid Web Developer (RWD). The Web Page builder form (shown below) is composed of the following: Builder Tabs Fields to edit content Content Page Diagram 1a: Web Page Builder Form 2

4 The Web Page Builder Forms are divided into different parts (see diagram 1b) that help compose the overall look of your web page. Builder Tabs- Each builder tab serves the following purposes: Page: These is where you fill in the name of your page and write in what you want to appear on the top of your browser (Internet Explorer, Firefox, Safari, etc.) when a page is viewed. Header: Contains the field in which you can supply information in the header of your page. -The header tab is composed of two parts: Title/Subtitle and Scrolling Message. Navigation Sidebar: This tab contains fields you would fill out which edit the links that appear on the side of your webpage. Information Sidebar: This is an optional feature with RWD. Use this tab to edit your information side bar, a small box that appears on the right hand side of your web page. Content Page: Where you add the main information for your web page such as text and pictures to create the body of your web page. Part 1: Page Tab We are now going to set up the name of your page and what you want to appear on the top of your web page. Diagram 1b: Page Tab What you fill out in these fields 3

5 will appear the following way on your web page! Subject Diagram 1c: Browser Page Name Part 2: Header This is where you add the title for your page and optional subtitle. What you fill out in these fields Diagram 2a: Header Tab will appear the following way on your web page! Subtitle Title The scrolling Message is optional and would appear as shown. Diagram 2b: Web page title and subtitle with a scrolling message. 4

6 Part 3: Navigation Sidebar This will edit what appears on the left sidebar of your web page. The display text supplies the name of your link and the link to field is where you want your link to go. The following icons are in your web folder, these represent individual pages found within your site: Diagram 3a: Web Page icons Diagram 3b: Navigation Sidebar Content You can also add links to outside pages by providing the web site link in the Link to field and your link title in the Display text field. 5

7 What you fill out in the Navigation Sidebar will appear like this on your web page: A few things about the Navigation Sidebar Local Links: the teacher does not add this link. This is a default link set up by the web designer to appear on every page *Note how the Class Links is in bold. If you take a look at the Navigation Sidebar tab you will see that the Headline box to the left is checked. I m not a teacher and these links don t really apply to me! How can I change the page to fit my needs? Not to worry! This template is set up for teachers, but it can just as easily be changed for other staff members. Simply change the name of your pages (shown in diagram 3a) and the link name to match your newly renamed icons using the Navigation Sidebar Content (diagram 3b). Diagram 3c: The Navigation Sidebar 6

8 Part 4: Information Sidebar This is a small box that displays information on the right hand side of your web page. This is great for special announcements and reminders to students and parents. What you fill out in these fields Diagram 4a: Information Sidebar Tab will appear the following way on your web page! Diagram 4b: Information sidebar on a web page Note: If you do not wish to have an Information Sidebar simply uncheck the Include Information Sidebar box. 7

9 Part 5: Content Page This is where you add text, pictures, and other material. This is the body of the page. Edits text, color, font, and size. Pictures and text you provide in this area Diagram 5a: Content Page in builder form will appear here as you created it. Diagram 5b: Content Page on the web 8

10 Part 6: Adding links to the body of your webpage This section will cover a) Adding links within your webpage b) Making a picture a link a. Adding links within your webpage To add a link within your page, instead of just having it on the sidebar, is easy! The first thing you need to do is: 1. Give your link a name, by typing it in the webpage and selecting the word you want to make into a link. 2. Click on the make link tab. 3. The Format Link box appears. Type in the desired path (see diagram 6b). Think of it as giving someone directions. What you are basically doing is, giving the computer directions on where you want it to find your link or file. Diagram 6a. The Format Link box is where you type your desired path. 9

11 Diagram 6b. What Goes in the Format link Box if I Want to Link a(n). Webpage: To link to an outside webpage copy and paste the link into the target Format Link box. Make sure to include the full link including Site within my web folder: If you want to link to a page such as the homework page simply type the name of the page homework in the Format Link box. Files (pictures, documents, movies): If you have a file you want to link to, make sure it is in your web folder (the folder that contains your home page and etc.). Then type the name exactly as you see it in the Format Link box. E.g. If you had a movie named class.mov in the movies folder you would type. movies/class.mov If you want to make an me link, in the Format Link box type mailto:username@secsd.org b. Making a Picture a Link If you have mastered the above steps, making a picture a link is very easy. 1. Insert the picture you want to make a link. 2. Click on the inserted picture. 3. Click on the Make Link tab. 4. Follow the directions in Diagram 6b. At this point you should have the ability to create a basic web page. To check the progress of your page go to the following: Your building URL/teachers/your site name Elementary School: site name Middle School: site name High School: site name For example the name of this site is demo and it is located in the Middle School site, so the URL of the demo page is: 10

12 FAQ Where can I get images that don t infringe copyright? There are a number of sites that offer images for free with no copyrighted obligation. If you search on Google you can probably find a number of them READ CAREFULLY. One site that has a great gallery of images is: Or Get out camera and start snapping your own photos! This is a lot to take in all at once! Can I contact you if I need help? Yes. First Class me!!! Good Luck!! 11

13 Notes Page: 12

14 iphoto Tutorial: Creating a Gallery in iphoto and adding it to a Webpage Note : Depending on the version of iphoto you have the directions may differ slightly Importing your pictures into iphoto and creating an Album 1. Plug camera into USB Drive 2. The following screen will appear 3. Give your pictures a name in the Roll Name field. You may also want to write a description for your photos. 4. Click on Import 5. Photos will import into your iphoto library. 6. Go to File > New Album. The following screen will appear. 13

15 Give your album a name > click create. 7. Your new album name will appear on the left side. 8. Your newly imported photos will be highlighted if not highlight the photos you wish to add. 9. Click on any of the highlighted photos and drag and drop into your newly created album on the side. 10. Select your newly created album by clicking on it in the left hand pane. 11. Your photos will now appear in the album you created. 1. Next you will be ready to create your own gallery. 2. Go to File > Export or Share > Export depending on your system. The following screen will appear: 3. Give your album a title in the Title field. 14

16 4. Choose desired background color. 5. Where it says Thumbnail change the Max width field from 240 to In both Thumbnail and Image boxes select Show title if titles have been created if not go to step Finally Click on Export the following box will appear: 8. Select Pictures 9. Select New Folder 10. Give your new folder a name (no spaces). 11. Click Create. 12. Your new Folder will appear in Pictures click OK To add the gallery to your web site: 1. Open up your webpage conference folder in First Class 2. Go to Finder 3. Go to pictures 4. Click on the newly created folder in pictures once hold the Alt+Opt key down. 5. While holding down the Alt+Opt key drag and drop the folder into the webpage conference folder you have just opened. 6. Open the page you wish to add a gallery link to. 7. Type in the name you would like for your link 8. Highlight the text 15

17 9. Click link button 10. A box will open. Type in your gallery name/index.html 11. Click OK. 12. Save and Close 13. Go to your webpage to see if it works! (Optional)To edit your gallery page after it is made (It is strongly recommended you do this BEFORE dragging and dropping into First Class): 1. Go to pictures 2. Go to the gallery folder 3. choose the gallery folder name.html file 4. Hold down Alt+Option Key and drag to the Dreamweaver icon in your dock 5. The page will open in dreamweaver. Make changes and save. 16