Using iWeb for creating websites – FACULTY WORKSHOP Launch the iWeb application: Click Macintosh HD, click Applications to expand, then double click iWeb to launch. Click “No thanks” when asked about trying MobileMe. Create your first page. iWeb defaults to a window that walks you through creating your first page when you launch the application for the first time. Choose a template and webpage type that “fits” your site’s content. A template defines the default style – background color, font, etc – of the pages in your site and a webpage type is a predesigned page with placeholders for text and graphics; you can easily replace the placeholders with your own text and graphics. Some good candidate templates for an academic site are Elegant, Gazette, Darkroom, and Layered Paper. While using the same template throughout your site will give the site a uniform style, iWeb does not require this. iWeb will then display the selected page with placeholder text and graphics, as shown below. To change the page name (as that page will be identified on the site’s navigation menu), single click on the page’s current name below SITE in the Site Organizer (upper, left) and type in a new name. Note that the name changes both in the Site Organizer and in the Navigation Menu. Adding your own text and graphics to pages: Each webpage type contains textboxes with placeholder text for different elements on the page. (Clicking View :: Show Layout in the main iWeb menu on the top of the computer monitor will make the outlines of the textboxes visible.) If you click the text, the entire textbox is selected and selection handles appear. You can drag the textbox to reposition it, and you can resize it by dragging a handle. To replace placeholder text with your own text, click the placeholder text a second time and start typing. – Your text will replace the placeholder text in the textbox. To add a hyperlink to some text in a textbox, type the contiguous word(s) you want to serve as the hyperlink, then select them using the mouse . Click on the Inspector icon on the iWeb toolbar (the blue circle with the letter i, third icon from the right) to open the Inspector window. Click on the Link Inspector as shown, select Hyperlink and check “Enable as a hyperlink.” If you want the hyperlink to link to a page outside of your site, select Link to: An External Page and type the complete URL (e.g., http://www.chapman.edu) of that page in the URL box. Another option is to link to a page within your iWeb site. To do this, select Link to: One of My Pages, then select the appropriate page from the dropdown. To link to a file (e.g., a PDF) to be uploaded with the site, select Link to: A File and browse for the file on your local computer. You will then need to go back to the text in the textbox and re-­‐type the word(s) that will serve as the hyperlink. To create an email hyperlink (e.g., a link that causes the user’s email client to create a new email to a specified email address), select Link to: An Email Message and specify the default To and Subject lines for the email to be created. In all cases, you should leave “Make Hyperlink active” unchecked, so that you can edit the word(s) that serve as the hyperlink, if the need arises. Note that hyperlinks always become active when you publish the site. Similar to placeholder text, graphics placeholders indicate the size and placement of graphics in a template. If you click one, selection handles appear so that you can resize the placeholder. You can drag your own image to the placeholder to replace it. If a webpage type contains more graphics placeholders than you want on your final page, you can delete any unneeded ones by selecting the graphics, then clicking Edit :: Cut from the main iWeb menu on the top of the computer monitor. Create additional pages in your site by clicking the plus sign on the left side of the iWeb toolbar. Repeat the process above to select a template and webpage type and then replace placeholder text and graphics with your own. Note that the Blank webpage type includes only a minimal set of placeholders. Use this webpage type if none of the others are a “close match” to the page as you envision it. Adding an image to a page when there is no graphics placeholder: There are several ways to add an image to a page that does not already have a graphics placeholder to receive it. The most general way – a way that will allow you maximum flexibility in wrapping text around the image or not – is to move the mouse cursor to a location in a textbox, approximately where you wish the image to be located, then click Insert :: Choose from the iWeb main menu bar at the top of the computer monitor. Browse for the image on your local computer. Resize the image by dragging the selection handles. If you wish surrounding text to wrap around the image, select the Inspector button on the iWeb toolbar (this is the blue circle, third from the right.) Select the (T)ext option in the Inspector window and select the image you just added by clicking on it. (You can tell that the image is selected when the selection handles appear.) Check the box “Object causes wrap” and select either the wrap-­‐right or wrap-­‐left option, as desired. “Extra space” controls the size of the blank area separating the image and the wrapped text. Adding a movie to a page: The easiest way to add a movie clip that you have on your computer is to create a new page using the Movie webpage type and add your movie by dragging it into the movie placeholder. Edit the page name, title and text, as described above. Note that some movie formats will not play properly on some OS/browser/video player combinations. For this reason, if it is possible for you to upload the movie to YouTube and embed it in your page from there, that is your best option. While YouTube clips cannot be embedded in a page using a movie placeholder, they can be easily added to a page via other means. To embed a YouTube clip in a page, click on the Web Widgets icon on the iWeb toolbar (fourth from the left). Select HTML Snippet. Copy the embed code for the desired YouTube video into your computer clipboard and paste it into the HTML box in iWeb. The YouTube video should appear embedded in the page. To rearrange the ordering of the page links on your site’s Navigation Menu, simply drag and drop the page names on the Site Organizer. Publishing your website: Once you have finished editing your website, you need to (1) publish the site and (2) upload it to a webserver. To publish the site, create a new folder on your desktop to receive the set of webpages that constitute your site. Click File :: Publish to a Folder from the iWeb menu on the top of the computer monitor and browse for the folder you just created. Click Continue to the Content Rights warning window and wait while iWeb saves your site to this folder. Click Visit site now to launch the site in your computer’s browser. (N.B. – at this point, you are viewing the site as it exists on your local computer. You still need to upload it to a server for others to find and view it.) Once you are satisfied with your site as it will appear to visitors, you are ready to upload it to a server for others to view. All full-­‐time faculty at Chapman are given space on the server www1.chapman.edu. In this workshop, we shall assume that this is the server that will host your newly-­‐created website. The URL for your reserved area on this server is http://www1.chapman.edu/~your-­‐Chapman-­‐username. (Thus, if your username is scsmith, the URL for this directory is http://www1.chapman.edu/~scsmith) Uploading the files that constitute your site requires that you use an FTP (file transfer protocol) client. There are many FTP clients available for the Mac. For this workshop, we will be using Cyberduck. Uploading your site to www1.chapman.edu: First, launch Cyberduck by double clicking on Macintosh HD, clicking Applications to expand, and double clicking Cyberduck. Type ftp://www1.chapman.edu in the box above the words “Quick Connect” then click Enter. Uncheck Anonymous Login and type your Chapman Username and Password in the appropriate boxes. Click Login. If this is the first time you are accessing your space on this server, you will need to create a folder named public_html to receive your contents to be served on the Internet. To do this, select Action, then select New Folder as shown. The folder must be named public_html. (There is no room for “creativity” here. If you name the folder something else, your site will not work.) To upload your site, open the folder you published the pages to. There should be a file named index.html and a folder named Site in this folder. Drag and drop both the file index.html and the folder Site onto the Cyberduck application so that, when you drop the content, your cursor is directly over the public_html folder. It may take a few seconds for the file transfer to complete. Once it does, your site is available on the open Internet for anyone to view. The URL for your new site is the same as the address of the root of your reserved space on this server: http://www1.chapman.edu/~your-­‐Chapman-­‐username. N.B. – URLs on this server are case sensitive; when you give out the address, make sure you use the proper case when you type out the URL. Moving an iWeb project from one computer to another: If you want to edit an iWeb-­‐created site on a computer other than the one on which you created it, you will need to save the iWeb project and move it to the computer on which you wish to edit it. Unfortunately, the iWeb project is not among the files generated when you publish a site, so merely copying the published site from one computer to another will not let you edit it on the second computer using iWeb. Rather, the iWeb project is saved to the folder Macintosh HD/Users/your-­‐Chapman-­‐
username/Library/Application Support/iWeb.* Double click on Macintosh HD and browse for it there. (It is a single file named Domain.) Save that file to a storage device such as a USB drive. To open the project on a different computer, launch the iWeb application, then close it. (This “purposeless” step will cause iWeb to create the folder to receive the file Domain. Technically, you can skip this step if, instead of saving the single file Domain, you save the folder iWeb; however, doing things this way will make it easier to manipulate sites individually, if you end up creating multiple sites using iWeb.) Now, save the file Domain to exactly the same folder (Macintosh HD/Users/your-­‐Chapman-­‐username/Library/Application Support/iWeb)* on the target computer, overwriting the Domain file that is already there. When you re-­‐launch iWeb, you will see your site and all associated content in the Site Organizer. * Note: Mac OS 10.7 and higher hides the Library folder. To show it, hold down the option key, click Go, then select the Library folder from the drop down menu. From there, go to …/Application Support/iWeb. Additional Training: Chapman subscribes to the suite of training videos on Lynda.com. There is an excellent 3.5 hour training video on iWeb. If you would like to review the content in the handout or go beyond it and explore additional functionality, this training video is highly recommended. To access it, go to: https://web.chapman.edu/lyndacas, scroll to the bottom of the page, type in your usual Chapman credentials, and search for a training video on iWeb. Choose the version of iWeb that is installed on your computer. (Chapman’s Mac computers have iWeb ’08 installed.)