Web Page Development using iWeb
Transcription
Web Page Development using iWeb
Web Page Development using iWeb Please note that this introductory manual has been designed for use in coordination with the Web page Development II on a Macintosh workshop. For a complete listing of currently offered workshops, please refer to http://www.neiu.edu/scs. Student Computing Services Academic Computing, NEIU B-107 Web: www.neiu.edu/~scs Email: [email protected] Phone: 773-442-4390 Web Page Development using iWeb Syllabus Course Description: This workshop will introduce intermediate concepts regarding web page development on a Macintosh OS X system. Using Mac OS X, we will explore how to create basic types of web pages, upload them into an NEIU account, and how to view the web pages from a browser. Prerequisites: Basic understanding of Macintosh OS X or attendance to the Introduction to Macintosh workshop as well as basic knowledge of the Internet and Internet Applications such as web browsers and FTP applications. Goal(s) of the Workshop: Participants should leave with an understanding of how to create their own web page using iWeb on a Macintosh system. Course Content: · create new web pages from templates. · create links. · insert pictures. · use ftp to upload files. · preview a web page online. · edit an existing iWeb file. · create an http directory and fix file permissions. Disclaimer: The Web Page Development using iWeb workshop is recommended for people who already possess a basic understanding of web page design. Basic knowledge of the Macintosh Operating System is also necessary in order to maximize results from this workshop. The screen captures found in this document are based on the Macintosh Operating System X. Questions regarding workshops may be directed to: Student Computing Services Academic Computing, NEIU B-107 Web: www.neiu.edu/~scs Email: [email protected] Phone: 773-442-4390 Web Page Development using iWeb 1 of 28 Aug 14, 2006 Table of Contents • Welcome to iWeb .............................................................................3 • The iWeb Window............................................................................ 4 • Editing Palettes and Panels ............................................................... 6 • Inspector...................................................................................7 • Page Panel ................................................................................ 8 • Text.......................................................................................... 8 • Graphics .................................................................................. 10 • Metrics ....................................................................................12 • Hyperlinks ............................................................................... 12 • • • • Photo Gallery................................................................................ 13 Blogs ........................................................................................... 14 RSS Feeds .................................................................................... 16 Subscribing and Viewing RSS Feeds ................................................. 17 • Saving an iWeb File ....................................................................... 19 • Publishing a Website ...................................................................... 20 • Launching Fetch ............................................................................ 21 • Transferring Files to Your NEIU Account ............................................ 22 • Creating Your HTTP Directory and Fixing Permissions ..........................24 • Frequently Asked Questions ............................................................ 26 • Additional Assistance with iWeb ....................................................... 27 • • Web Page Development using iWeb Review........................................28 • Conclusion of Document................................................................. 28 • Information Resources ................................................................... 28 Web Page Development using iWeb 2 of 28 Aug 14, 2006 Welcome to iWeb iWeb is the web authoring application which is a part of the iLife suite. First introduced in 2006, iWeb easily allows users to access built-in templates to create a series of related web pages which share a similar navigational style and theme. iWeb templates allow 6 different types of pages to be created: • Welcome • Movie • About Me • Blog • Photos • Podcast The purposes of the Welcome and About Me pages are self-explanatory. Photos provides a picture gallery (with slideshow capabilities) while Movie presents a movie file. A Blog refers to a web log and is commonly used as an online journal or diary. People may use blogs to post updates and experiences during projects and trips, or simply to post their thoughts and feelings for the day. Finally, a Podcast is similar to a blog but it is comprised of audio files that online visitors can download and listen to. When launching iWeb, the application will prompt the user to sign into their .Mac account. This is a fee-based service provided by Apple Computer. Please note that NEIU students have online storage space allocated for their use and not need to subscribe to the .Mac service in order to use iWeb. Click on the Close button to continue. A dialog window will appear which allows the user to select a specific template. Although the theme of the template is meant to remain consistent for all the pages, different themes can be chosen for individual pages. Click on a theme on the left side of the dialog box. The corresponding templates will appear on the right to provide a preview. If you are just beginning your website, select the Welcome template and click on the Choose button to continue. Web Page Development using iWeb 3 of 28 Aug 14, 2006 The iWeb Window After choosing a template, a window similar to the one below will appear on the screen. The left side of the window is comprised of the Site Organizer. It will show you all the web pages you have on your website. By clicking on a web page, it will appear in the editing window. At the bottom-left corner of the window there are 3 buttons: Publish and Visit are only active if you are publishing your website onto a .Mac account. Since we will be uploading our web pages to our NEIU accounts, we will disregard these buttons. The “+” button will add additional pages to your website. Please note that when creating your website, you do not need to use all 6 page templates, nor are you restricted to only one page of each type. For instance, a website may be composed of two Welcome pages and three Blogs. Web Page Development using iWeb 4 of 28 Aug 14, 2006 The rest of the toolbar buttons at the bottom of the window provide object editing functionality. These functions are very useful since iWeb treats the content within a web page as objects. This means that text boxes and pictures can be easily resized, moved, and otherwise edited. Text will insert a new text box onto the web page. Similarly, Shapes will insert a basic geometric shape onto the web page. Since all of the content in the web page are treated as objects, they can be considered to be on different layers. You may think of layers as different pieces of paper on a desk. If one sheet of paper is on top of another, it can be considered to be in front of the other sheet and will partially block it from view. Selecting an object and clicking on the Forward button will cause that object to be moved forward in one-layer increments. Please note that if an object is several layers beneath another, it may require several clicks of the Forward button to bring it in front of another object. Conversely, clicking on the Backward button will cause the object to go backward one layer. The final button on the left side of the tool bar is the Mask/Unmask function. It will allow you to draw a rectangle within the image. Double-clicking in the image will crop (cut) the gray borders away. You can restore the image to it’s original state by either double-clicking on the image again or by select the image and clicking on the Unmask button. Original image Cropped image Anchor Points At this time, it is important to note that whenever an object (such as an image or a text box) is selected, small white squares will appear around its border. These are known as anchor points and allow the user to resize the object by clicking and dragging one of the points. To keep the object’s dimensions proportional, resize an object by dragging the points situated at the corners of the object. Web Page Development using iWeb 5 of 28 Aug 14, 2006 Editing Palettes and Panels Computer applications tend to have numerous floating toolbar palettes that allow users to quickly and easily select different commands and functions. In iWeb, these palettes are accessible via the buttons on the bottom right side of the iWeb window. Media brings up a media browser palette. If your media files are stored within the iTunes and iPhoto applications or are within the Movies folder of your home directory, iWeb provides access to these files via the media browser palette. To insert a media file, simply drag it from the media browser to the iWeb window. If your media file is stored elsewhere on the hard drive or on a different volume, you may insert the file by locating it within the Mac OS X Finder and dragging it into the iWeb window. The Adjust, Colors, and Fonts buttons will bring up the corresponding editing palettes. These palettes allow users to adjust image colors and font styles. Please note that an image or text must first be selected before changing the settings within a palette. Adjust Web Page Development using iWeb Colors Fonts 6 of 28 Aug 14, 2006 Inspector The Inspector panel provides access to many different functions while taking up relatively little screen space. The Inspector panel is divided into seven different sections, each of which can be accessed via the row of icons shown across the top of the panel. Four buttons on the top of the panel provide basic editing functionality and we will focus on these commands. Page provides options for setting the format of the web page. Text gives options regarding text alignment, spacing, and creating bulleted lists. Graphic provides borders, shadows, and other visual effects. Metrics will allow you to type in the dimensions for a selected object. Link will converted a selected picture or text into a web hyperlink. Site provides options for uploading and password protecting a page. Note: these features are only available if you are hosting your web page on a .Mac account. Blog & Podcast provides options for easily distributing “What’s New” information regarding your website. Web Page Development using iWeb 7 of 28 Aug 14, 2006 Page Panel In the Page panel, you can set the name of the page and whether or not to include a link to the page on the navigation menu. By default, an iWeb-created website includes links to all of its web pages along the top of the pages for easy navigation. Options can also be set for the page’s background. The background can be either a color or an existing picture. Please note that complicated backgrounds can distract web surfers from reading the content on your pages. The middle of the Page panel allows you to set the page’s dimensions in terms of pixels (px). Typical computer screen resolutions are 1024 px wide by 768 px high. Some screens may be higher and some may be as low as 800 px by 600 px. If you have more content on your screen than can be shown within a 1024 px by 768 px, it is normal and acceptable to extend the height rather than the width. It is suggested that you set the pixel dimensions to a number that is lower than the expected screen resolution. Some leeway must be given to account for the borders of browser windows and other graphical elements which will require screen space. Feel free to play around with the page height and width settings until you find one which suits your needs and sense of aesthetics. Text Page templates in iWeb will contain gibberish text which are known as Lorem Ipsum. This gibberish text serves multiple purposes. One purpose it serves is as a placeholder for future text. When you click on the text and begin typing, your words will replace the gibberish that was pre-created. In addition, the Lorem Ipsum text gives you a pretty good idea of how your text will appear on the page. Web Page Development using iWeb 8 of 28 Aug 14, 2006 The Text panel in the Inspector allows you to set various word processing-like settings such as whether the text is centered or left justified and the amount of spacing between lines. You may also designate how text wraps around objects (such as images) and also how bulleted lists appear on the web page. Please note that font size, style, and type cannot be set via the Text panel. These options can be found in the Fonts palette. Web Page Development using iWeb 9 of 28 Aug 14, 2006 Graphics You may add an image to a web page by dragging the image file directly onto the page or by clicking on the Insert menu and selecting Choose. The computer will present a dialog box and ask you to locate the image file you wish to insert. If your pictures are stored within the iPhoto application, you may use the Media Browser to select and insert an image. Click on the Media button to bring up the Media Browser. Click on the Photos tab in order to access the images stored within the iPhoto application. When you find the image you want to insert into your web page, simply drag the image from the Media Browser onto your web page. After inserting an image and moving it to the desired location, you may wish to apply certain special effects to the image. Use the Graphic panel in the Inspector to set special effects such as a border stroke. Note, the border may be composed of straight lines or it could be graphically represented to resemble a hand-drawn border. Web Page Development using iWeb 10 of 28 Aug 14, 2006 You also have the option of creating a shadow and setting options such as the angle, offset distance, amount of blur, and the image’s opacity. Reducing opacity will allow any objects behind the image to be seen. Users can also create a mirror-like reflection and adjust the translucency of the image. To add an effect, first select the image on the page. Then click the checkbox next to the effect you want to apply to the image. You may set various options such as the angle of the shadow and the amount of reflection that will be applied to the image. To the right are examples of a Shadow and a Reflection effect. Web Page Development using iWeb Shadow 11 of 28 Reflection Aug 14, 2006 Metrics The Metrics panel will provide information regarding a selected object. It will also allow you to adjust the size, position (based on cartesian coordinates), and the rotation angle of the object. When resizing objects via the Metrics panel, it is suggested that you keep the option Constrain proportions. This means that when you change the width, the height is adjusted accordingly to match the proportion. Otherwise, your resized object may look stretched or compressed. Hyperlinks As you are most likely already aware, clicking on hyperlinks on a web page will quickly and easily bring up new web pages. iWeb allows you to create links out of any text or image on your web page. The Link panel provides simple and easy to use commands. To create a hyperlink, select the text or object you wish to be a link. Enable as a hyperlink will designate the selected text or object to be a link. Make all hyperlinks inactive does not affect the web page. It simply ensures that you do not accidently click on a link while you are working in iWeb. You can create several different types of links in the Link panel: An External Page refers to web pages which are not hosted on your site. An external link will require you to type in the entire web address (also known as a URL or Uniform Resource Locator) in the text box. For example, http://www.google.com refers to Google’s search page. One of My Pages allows you to create links to other pages on your site. If you select One of My Pages, the Link panel will provide a drop-down menu which lists all the pages you can select. You can also designate the link to take the surfer to the home Page, next page, or previous page. Web Page Development using iWeb 12 of 28 Aug 14, 2006 A File will create a link to a designated file. Examples include Adobe .PDF files, word processing documents, or small audio clips. Users clicking on the link will either view or download the file, depending on the type of file and how the user has set up their web browser and computer. An Email Message will allow users to send an e-mail to a designated e-mail address. Please note that this type of link will only work on a computer which has a designated standalone e-mail program (such as Apple’s Mail program, Eudora, or Microsoft Outlook). It will not work with web-based e-mail such as NEIU’s WebMail. Photo Gallery Besides being able to create basic, informational web pages, iWeb also allows users to easily create pages with very specific content. We will work on two of these pages because they significantly differ from the other pages. The first is a photo gallery. A photo gallery page looks like the one shown below. Pictures can be added to the gallery by dragging them from the Media Pane. If your photos are not stored within iPhoto, you may insert images from a local hard drive or other storage device by dragging them into the photo gallery. Note that the photo gallery provides a Start Slideshow button directly on the web page. This button will allow visitors to your photo gallery to initiate a picture slideshow and easily view all of your pictures. Photo Gallery Media Pane (iPhoto) Web Page Development using iWeb 13 of 28 Aug 14, 2006 Blogs Another very specific kind of web page is known as a Blog. A Blog (short for “Web Log”) is commonly used by people as an online journal or news area which is frequently updated. iWeb not only allows users to create blogs, but also to manage and edit them. When you add a Blog page into iWeb, three pages will show up in the Site Organizer: Blog, Entries, and Archive. Blog allows a user to customize their blog page. Generally, this page includes a brief introduction to the blog and will provide a listing of the most recent blog entries. You may change the picture by dragging a new image on top of the placeholder image. Web Page Development using iWeb 14 of 28 Aug 14, 2006 Entries allows a user to add additional blog entries and to edit existing ones. Entries can be added by clicking on the Add Entry button. When an entry is highlighted in the listing, the contents will appear in the larger window below. Information can be added or edited at anytime. Blog Entries Contents of the Highlighted Entry Archive allows a user to edit the blog archive page. It houses the blog entries which are no longer considered recent and which do not appear on the main blog page. Web Page Development using iWeb 15 of 28 Aug 14, 2006 RSS Feeds RSS feeds (Really Simple Syndication) is a service that many websites offer to allow people to easily keep up to date with the newest changes and additions to specific websites. RSS feeds provide short excerpts of information on websites so you can easily skim through and see what is new. You can subscribe to an RSS feed so that an RSS reader application can notify you when there is new content on the web site. With RSS feeds, you can easily inform people when your blog web page has been updated. When you are working in your Blog web page, the Blog & Podcast panel allows you to specify the number of recent entries to display on the main Blog page. You can also set the excerpt length of each entry as well as allow users to provide comments and to search your blog via key word searches. When you publish your website to a folder (explained in the section Publishing a Website), a dialog box will appear asking you where to store your site. Be sure to enter the URL (web address) for your website in the dialog box. For most people, the website address will be In most cases, your URL will be: http://www.neiu.edu/~username Your website URL Web Page Development using iWeb 16 of 28 Aug 14, 2006 Subscribing and Viewing RSS Feeds There are numerous RSS Readers available for use. These instructions will demonstrate how to subscribe to an RSS feed in the Macintosh web browser, Safari. Use Safari open a web page that offers an RSS feed. Click on the RSS Subscribe link. The browser will show you the RSS page. Next, bookmark the website. You may store the bookmark in either in the Bookmarks Menu or the Bookmarks Bar which is located horizontally across the Safari window (beneath the button bar). Click on the Safari menu and choose Preferences. Select the RSS settings. The Default RSS Reader is set to Safari. Choose to Automatically update articles in both the Bookmarks Bar and the Bookmarks Menu. RSS Preferences in Safari Web Page Development using iWeb 17 of 28 Aug 14, 2006 When you click on the Bookmarks Menu or view the BookMarks Bar (depending on where you stored the bookmark), the number of new articles available will be shown as a number within parentheses. New Articles available at RSS-capable websites When you click on the RSS Feed bookmark, it will open up the RSS page and show you the latest updates and changes to the web page. After the page has been opened, the number within the parentheses will be reset to 0 until Safari checks and discovers new articles at that web page. Web Page Development using iWeb 18 of 28 Aug 14, 2006 Saving an iWeb File Apple has implemented an unusual way of saving an iWeb file. The iWeb data file is initially saved as Domain.sites and is located at: /Users/your home directory/Library/Application Support/iWeb In Student Computing facilities, the location is: /Users/student/Library/Application Support/iWeb Student Computing Services has created a short cut to this location. After saving your iWeb file, click on the icon iWeb Data. This icon is located on the right side of the Dock at the bottom of the computer screen. Transfer the Domain.sites file to a USB flash drive, your NEIU FTP account, or another storage volume in order to take it with you. To continue working on a previously-saved iWeb file, simply double-click on the file. Please keep in mind that the file must be named Domain.sites for iWeb to recognize it. More information regarding the iWeb Domain.sites file can be found at: http://docs.info.apple.com/article.html?artnum=303670. Web Page Development using iWeb 19 of 28 Aug 14, 2006 Publishing a Website To publish a website onto the Internet, you will need to publish the website to a folder and then upload the folder’s contents to your NEIU account. To begin, click on the File menu and select Publish to a Folder.... The following window will appear and prompt you to select a location to publish your website. If you have a blog or a podcast page, iWeb can also create an RSS feed for your pages. An RSS feed (Really Simple Syndication) allows users to quickly and easily check for updates on your blog or podcast by using an RSS reader application. The Macintosh web browser Safari has RSS capabilities built-in. In order to provide an RSS feed, you will need to type in the URL (web address) for your web page. In most cases, your URL will be: http://www.neiu.edu/~username After you have chosen a location to store your site, iWeb will generate all of the .html and image files which are needed to display your website on the Internet. iWeb will create an index.html and a Site folder. You will need to upload both items to your NEIU account. To upload your files, you will need to use Fetch or another FTP application. Please follow the directions in the following section to learn how to upload your files. Web Page Development using iWeb 20 of 28 Aug 14, 2006 Launching Fetch To upload your file(s) to a server, you will need to know the host name of the server, your username, and password. In order to view your web page on the Internet, the files will need to be uploaded to a directory named http. You will be using the same username and password as the one assigned to you for NEIU webmail. If you do not know your NEIU username and password, please visit our department website at www.neiu.edu/~scs and click on the link “Student Email Account Lookup.” In our Macintosh computer labs we use the ftp program Fetch. To launch Fetch, click on the icon in the dock. A window will appear on your screen. Enter the following settings: Host: ftp.neiu.edu User ID: your NEIU username Password: your neiu password Note: the username and password are casesensitive. Do not select Add to keychain. When finished, click on the Connect button. Web Page Development using iWeb 21 of 28 Aug 14, 2006 Transferring Files to Your NEIU Account After you successfully connect to your NEIU account in Fetch, a window similar to the one shown below will appear. It lists the files that are stored in your NEIU account. Locate the http directory you created earlier in this manual. Double-click on http to open it. If your http folder has a home.htm file which you did not create, delete it so it does not interfere with your index.html file. To delete a file, click on it to select it and then click on the Delete button situated in the Fetch toolbar. After opening your http directory, drag the Fetch window to one side of the screen. Then locate the web page files within the Macintosh operating system and adjust the windows on your screen so you can see both the Fetch window and your web page files at the same time. Web Page Development using iWeb 22 of 28 Aug 14, 2006 Drag your web page files (index.html and the Sites folder) to the Fetch window. Your web page files will be copied from the computer to the http directory in your NEIU account. Depending on the size and number of files and the speed of your Internet connection, the file transfer may take a few moments to complete. After the files have been uploaded to your http directory within your NEIU account, you may view your newly-created web page by launching a web browser and typing in the address: http://www.neiu.edu/~your-neiu-account-username The ~ (tilde) key is found beneath the ESC key on the keyboard. For instance, if your username is jsmith, then your web page address will be: http://www.neiu.edu/~jsmith By default, the web browser looks for a file called index.html. The index file will be displayed on the screen for you to view. Please remember that index.html and Sites must be in the http folder in order to be accessible from the Internet. Web Page Development using iWeb 23 of 28 Aug 14, 2006 Creating Your HTTP Directory and Fixing Permissions If you do not have an http directory in your NEIU account or if you need to approve the permissions of the files within your http directory, please follow the instructions below. You do not need to follow these directions each and every time you publish a web page. Click on the Gamut icon in the dock. It will open an SSH session to the Gamut server. The window will ask you to enter your login name. Enter your NEIU username and click on the Connect button. A new window will appear and ask you to enter your NEIU password. Enter your password and press the Return key. Note: When you type your password, it will not appear on the screen. After you successfully log into the server, you will be at the gamut prompt. Type the word setup and press the Return key. The setup program does the following: 1. If you do not have an http folder in your account, setup will create one for you. 2. If you are unable to view your web page files online, setup will set file and directory permissions to allow anyone to view the files stored in the http folder. Web Page Development using iWeb 24 of 28 Aug 14, 2006 Choose option B by typing the letter “B” via the keyboard. The computer will return the message Fixing World-Wide-Web permissions - One moment. After several seconds, the computer will then report that: Press any key to continue. The window will return to the previous options. Choose X to exit the setup menu. Then type exit and press <Return> to exit the SSH session. You have now successfully created a directory named http in your NEIU account. You will store your web page files within the http directory and these web pages will be accessible by anyone with an Internet connection. Web Page Development using iWeb 25 of 28 Aug 14, 2006 Frequently Asked Questions After I use iWeb to create a web page, can I use a different web page editor to edit it? iWeb’s data file, domain.sites, uses a proprietary file format that is not compatible with other web authoring programs. If you select File --> Publish to a Folder..., you can edit the resulting HTML files in other web page editors such as Seamonkey’s Composer or Adobe’s GoLive applications. Please note, you cannot use iWeb to edit webpages created by other web page editors. This workshop manual has instructions on using Fetch. Can I use a different FTP application? Yes, you may use any FTP application to upload your website. Can I upload my website to a server other than NEIU’s server? Yes, after you create a web page, you may upload it to any server which you have an account. If my pictures are not stored within iPhoto, can I still insert them into iWeb? Yes, simply locate your pictures in the Mac OS Finder and drag them into the iWeb window. Is there any place on campus for me to scan images into the computer? Yes, there are four scanners in CLS-0002 (Information Commons computer lab) available for student use. Additional multimedia resources are available at the Multimedia Learning Resource Center (MLRC) on the third floor of the library. I can add comments to my blog page when I work on my webpage at NEIU. Why can’t I add comments to my blog page when I work on it at home. The capability to add comments to a blog page was added to iWeb in a recent update. On your home computer, run the Software Updates System Preference to download and install updates from Apple. How do I create a movie to add to a “Movie” template web page? You can add QuickTime-compatible movies to the “Movie” template by dragging and dropping it onto the movie placeholder. For example, you can add video clips that are created by certain digital cameras. You an also edit movies in the iMovie application and export them for use in iWeb. Please review the Multimedia II: Editing Digital Video workshop manual for further information on using iMovie. Web Page Development using iWeb 26 of 28 Aug 14, 2006 Additional Assistance with iWeb iWeb comes with several options for users to learn and use the application on their own. Assistance can be accessed from the Help menu by selecting iWeb Help. A new window will appear on the screen. Users may click on article headings to read more about a particular topic. They may also enter in keywords in the text field located on the upper right corner of the help window. iWeb will do a search to locate articles relevant to the keywords. At the bottom of the window are links which allow access to online resources. These resources include additional tutorials, tips on using new features and improving productivity, product news, and a link to Apple’s own support site dedicated to the iWeb application. Web Page Development using iWeb 27 of 28 Aug 14, 2006 Web Page Development using iWeb Review • Welcome to iWeb .............................................................................3 • The iWeb Window............................................................................ 4 • Editing Palettes and Panels ............................................................... 6 • • • • Photo Gallery................................................................................ 13 Blogs ........................................................................................... 14 RSS Feeds .................................................................................... 16 Subscribing and Viewing RSS Feeds ................................................. 17 • Saving an iWeb File ....................................................................... 19 • Publishing a Website ...................................................................... 20 • Launching Fetch ............................................................................ 21 • Transferring Files to Your NEIU Account ............................................ 22 • Creating Your HTTP Directory and Fixing Permissions ..........................24 • Additional Assistance with iWeb ....................................................... 27 Conclusion of Document Student Computing Services hopes that this document has been of use to you in familiarizing yourself with web page development on a Macintosh Operating System. Please direct any comments you have concerning our workshops or this document to Student Computing Services in B-107, [email protected]. Information Resources Information regarding student workshops, documentation, e-mail accounts, and lab locations is available at our website http://www.neiu.edu/~scs. Questions regarding workshops may be directed to: Student Computing Services Academic Computing, NEIU B-107 Web: www.neiu.edu/~scs Email: [email protected] Phone: 773-442-4390 Web Page Development using iWeb 28 of 28 Aug 14, 2006