This series of short video episodes will present tutorials on using inexpensive software to help you cope with life in the urban tech jungle. Transcripts and captioned video versions are available at http://www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html Walter Gajewski http://www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html Your techs in the city are here to help while you are at The Beach This series of short video episodes will present tutorials on using inexpensive software to help you cope with life in the urban tech jungle. Transcripts and captioned video versions are available at http://www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html en-us © 2008 Walter Gajewski Walter Gajewski gajewski@csulb.edu Walter Gajewski Create your own web site using the Adobe Contribute CS3 software. Welcome to Techs in the City. I'm Walter Gajewski from the Office of Academic Technology at the California State University, Long Beach. Today's episode: Creating a Web Page Using Adobe Contribute (part one, Getting Started). The first time we use Contribute for our home page we're going to have to create a new website connection -- so I'll click here. We aren't dealing with a pre-existing site so I'm going to click NEXT at this dialog box. On this campus your address is http://www.csulb.edu, slash, tilde, followed by your email user ID. And then you can click NEXT. We connect with FTP on this campus. I'm going to select FTP, fill in the campus ftp server -- ftp.csulb.edu. My ftp user name, on this campus, is the same as my campus email user name and, as you might have guessed, my ftp password is the same as my campus email password. Now I can click NEXT. I'll put my name in here. I can put any email address in here. I'm going to use my campus address and click NEXT. If this looks good, I can click DONE. Contribute is notifying me that there is no home page here so I'm going to click on NEW to create a new home page. I can use one of the starter pages. I'm going to open this folder by clicking on the plus, come down to Higher Education, select one of these, open up the Instructor folder, and we're going to select Instructor Home Page for now. We can add others later. The title right now will be my name and I can click on OK. Here's the starter page with some place holder information. I can replace "Instructor Name Here" with my actual name by highlighting that and typing my name. Similarly, I can highlight "Department" and start typing the actual name of my department. We can replace everything in here eventually but right now I'm going to publish this as it is, with some of this place holder information still here. I'm going to click on the publish button. I'm notified that there are no links that take people to this page. That's OK for now. Click YES. On this campus, the home page of your website has to have a file name of index.html. Now I can click on Publish. And I'm congratulated. We have it. We have a newly published home page. I'll take a look at it. I'm back in my web browser. Remember that the address is www.csulb.edu/~ and that's followed by your email user name. Now I can hit ENTER. There it is. There's my newly published web page. Thanks for watching and see you next time. http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/episode01.mp4 Thu, 25 Sep 2008 11:52:00 PDT 5:18 web, page, adobe, contribute, CS3, ftp, server, csulb, Mat Kaplan, Office of Academic Technology Walter Gajewski Create your own web site using the Adobe Contribute CS3 software. Welcome to Techs in the City. I'm Walter Gajewski from the Office of Academic Technology at the California State University, Long Beach. Today's episode: Creating a Web Page Using Adobe Contribute (part one, Getting Started). The first time we use Contribute for our home page we're going to have to create a new website connection -- so I'll click here. We aren't dealing with a pre-existing site so I'm going to click NEXT at this dialog box. On this campus your address is http://www.csulb.edu, slash, tilde, followed by your email user ID. And then you can click NEXT. We connect with FTP on this campus. I'm going to select FTP, fill in the campus ftp server -- ftp.csulb.edu. My ftp user name, on this campus, is the same as my campus email user name and, as you might have guessed, my ftp password is the same as my campus email password. Now I can click NEXT. I'll put my name in here. I can put any email address in here. I'm going to use my campus address and click NEXT. If this looks good, I can click DONE. Contribute is notifying me that there is no home page here so I'm going to click on NEW to create a new home page. I can use one of the starter pages. I'm going to open this folder by clicking on the plus, come down to Higher Education, select one of these, open up the Instructor folder, and we're going to select Instructor Home Page for now. We can add others later. The title right now will be my name and I can click on OK. Here's the starter page with some place holder information. I can replace "Instructor Name Here" with my actual name by highlighting that and typing my name. Similarly, I can highlight "Department" and start typing the actual name of my department. We can replace everything in here eventually but right now I'm going to publish this as it is, with some of this place holder information still here. I'm going to click on the publish button. I'm notified that there are no links that take people to this page. That's OK for now. Click YES. On this campus, the home page of your website has to have a file name of index.html. Now I can click on Publish. And I'm congratulated. We have it. We have a newly published home page. I'll take a look at it. I'm back in my web browser. Remember that the address is www.csulb.edu/~ and that's followed by your email user name. Now I can hit ENTER. There it is. There's my newly published web page. Thanks for watching and see you next time. http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/transcript-001.pdf Thu, 25 Sep 2008 11:51:00 PDT Mat Kaplan, Office of Academic Technology, web, page, adobe, contribute, CS3, ftp, server, csulb Walter Gajewski Now that you have a home page, add additional pages and images. Today, I'd like to discuss creating additional pages, making links from page to page and placing photographs on web pages. I've launched Contribute. I'm going to go over to the "begin editing" section and click on "index of gajewski." Now I have to click on the "connect" button. That brings up my page, just as I left it last time. I'm going to click on "edit page" and now I have an editable version of the page I created last time. The first thing I'd like to do is select this photo place holder by clicking once on it. Now that it's selected, I can hit the "delete" key on my keyboard and delete that place holder. Now the space is available for an actual photograph. I'm going to go up to the tool bar and select "image" from my computer and I can navigate to "my pictures" and find the folder that has my portraits. I'd like to select this narrower portrait because the dimensions are more closely aligned with what's required for this sample web page. Now that I've selected that one, I can click on "select" and the portrait ends up on the web page. In addition, I'd like to make another change right now. I would like to link from this page to another web page, a profile page. I'm going to highlight the word "profile" and select "link" from the toolbar. I'm going to link this to a new page that doesn't exist so I select "create new page." Once again, I see the list of sample starter pages. I can open this folder, navigating to "Higher Education" like I did last time. I can find the "faculty� folder and in that folder I can find the "instructor profile" page. I see a little thumbnail of what it might look like. I like it. I'm going to name the page "profile" and click OK. There's that sample page. Once again I would like to replace this "Photo Here" place holder by selecting it, single click and then hitting the delete key on my keyboard. The placeholder is deleted. I come up to "image, from my computer," select the same narrow portrait I had last time, click on "select" and now I can replace the place holder information with my actual name and department. All I'm doing is highlighting the place holder information and then I start typing. Also, here is a spot for my name. Highlight that. And I can put my title underneath, right here by highlighting "your title here" and typing my title, Coordinator of Media Service. I could replace this with some biographical information. I'll do that some other time. I can highlight the word "home" to turn that into a link that would take the user back to the home page. I've got the word highlighted so now I can go up to "link" and "link to drafts and recent pages." Remember, my home page is currently sitting as a new draft. Here are all the choices I have. There's my home page, the draft of my home page. I'll select that and click on OK. Now that I've made changes to this page, I can publish this page by clicking on "publish." The file name has a capitol letter in it. I don't like that. I prefer keeping them all lower case, less confusing. I'm going to change that. I can name this "anything .html." It's only the home page that has to be called "index.html." Now that I've chosen a file name, I click on "publish" and I'm congratulated. I can click OK. Now, I would like to find my home page. I can drop down the choices here and select my index.html as a page I'd like to work with. It notifies me that this page has an unpublished draft. I can click on the words "unpublished draft" and see my new draft, still unpublished. And, I come up to here, click on the "publish" button. http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/episode02.mp4 Thu, 25 Sep 2008 14:49:00 PDT 6:43 web, page, adobe, contribute, CS3, ftp, server, csulb, Mat Kaplan, Office of Academic Technology Walter Gajewski Now that you have a home page, add additional pages and images. Today, I'd like to discuss creating additional pages, making links from page to page and placing photographs on web pages. I've launched Contribute. I'm going to go over to the "begin editing" section and click on "index of gajewski." Now I have to click on the "connect" button. That brings up my page, just as I left it last time. I'm going to click on "edit page" and now I have an editable version of the page I created last time. The first thing I'd like to do is select this photo place holder by clicking once on it. Now that it's selected, I can hit the "delete" key on my keyboard and delete that place holder. Now the space is available for an actual photograph. I'm going to go up to the tool bar and select "image" from my computer and I can navigate to "my pictures" and find the folder that has my portraits. I'd like to select this narrower portrait because the dimensions are more closely aligned with what's required for this sample web page. Now that I've selected that one, I can click on "select" and the portrait ends up on the web page. In addition, I'd like to make another change right now. I would like to link from this page to another web page, a profile page. I'm going to highlight the word "profile" and select "link" from the toolbar. I'm going to link this to a new page that doesn't exist so I select "create new page." Once again, I see the list of sample starter pages. I can open this folder, navigating to "Higher Education" like I did last time. I can find the "faculty� folder and in that folder I can find the "instructor profile" page. I see a little thumbnail of what it might look like. I like it. I'm going to name the page "profile" and click OK. There's that sample page. Once again I would like to replace this "Photo Here" place holder by selecting it, single click and then hitting the delete key on my keyboard. The placeholder is deleted. I come up to "image, from my computer," select the same narrow portrait I had last time, click on "select" and now I can replace the place holder information with my actual name and department. All I'm doing is highlighting the place holder information and then I start typing. Also, here is a spot for my name. Highlight that. And I can put my title underneath, right here by highlighting "your title here" and typing my title, Coordinator of Media Service. I could replace this with some biographical information. I'll do that some other time. I can highlight the word "home" to turn that into a link that would take the user back to the home page. I've got the word highlighted so now I can go up to "link" and "link to drafts and recent pages." Remember, my home page is currently sitting as a new draft. Here are all the choices I have. There's my home page, the draft of my home page. I'll select that and click on OK. Now that I've made changes to this page, I can publish this page by clicking on "publish." The file name has a capitol letter in it. I don't like that. I prefer keeping them all lower case, less confusing. I'm going to change that. I can name this "anything .html." It's only the home page that has to be called "index.html." Now that I've chosen a file name, I click on "publish" and I'm congratulated. I can click OK. Now, I would like to find my home page. I can drop down the choices here and select my index.html as a page I'd like to work with. It notifies me that this page has an unpublished draft. I can click on the words "unpublished draft" and see my new draft, still unpublished. And, I come up to here, click on the "publish" button. Once again, I'm congratulated. I click OK and now the page opens up in a browser and I see the newly inserted picture. http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/transcript02.pdf Thu, 25 Sep 2008 14:48:00 PDT Mat Kaplan, Office of Academic Technology, web, page, adobe, contribute, CS3, ftp, server, csulb Walter Gajewski Now that you have your own web site, add links that take your viewers to other web sites. Welcome to Techs in the City, podcasting from the Office of Academic Technology at California State University, Long Beach. Here's your host for today's episode, Walter Gajewski. Thank you, Mat. I'd like to continue my discussion about using Adobe Contribute CS3 for creating web pages. Today I'd like to talk about linking to other pages besides web pages on my own web site. I've already launched Contribute, so I can come down to the link here and click on "Index of ~gajewski and it takes me to the web site I want to modify so I will click on CONNECT. I see the home page of that site, which is the page I want to modify, so I click on EDIT PAGE. The first thing I'd like to do is turn this stylized portrait of myself into a link. I'm going to select it by clicking on it and then I can come up here to �link" and "browse to a web page.� I would like to have that picture link to the software that is a free download that allows you to create that type of stylized portrait. So, I'm going to click on the "Browse" button to browse to the Picasa web site, because it is the Google software that you can download for free that lets you manipulate images, so picasa.google.com. Hit Return and I see the web page I'm interested in linking to, so I'm going to click on OK. It still shows in the previous dialog box. Things are looking good. I click on OK. And now my picture is a link to the Picasa page. If I've made a mistake and want to remove that link from my picture, I can right click on the image, come down here and and simply click on "Remove link." I don't want to do that, so I'm going to come off to the side here. Now I'd like to create a text link that takes us to the New York Times website. I'm going to highlight all of this placeholder text, to get rid of it and simply type �Read the NY times Circuits column.� I can highlight �New York Times Circuits� to turn that into a link. Now that it's highlighted, I go up to "link" and I'm going to "Browse to a web page.� I've already looked at the New York Times web page and I've copied that long address of theirs and, so now, I can just paste it with a control-V into the address space and click on OK. Those are the only changes I want to make right now, and so, I'm going to publish this. Once again, I simply click on publish. I get congratulated. I click on OK and I see my newly edited page in a web browser. So here's that newly edited page. I can test my links. I click on my portrait and see if takes me. . . It does. It takes me to the Picasa web page. Let's back up. Come back to this new page and click on the �New York Times Circuits� link and, in fact, that link works as well. So, I'm happy. I can quit out of contribute. We'll see you next time. Thank you. You've been watching "Techs in the City." Thanks for joining us. Remember, if you need multimedia or other technical assistance while at the beach, you can rest assured, knowing you have techs in the city. Free written transcripts and captioned video are available for download at www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/episode03.mp4 Thu, 25 Sep 2008 14:57:00 PDT 4:22 web, page, adobe, contribute, CS3, ftp, server, csulb, Mat Kaplan, Office of Academic Technology Walter Gajewski Now that you have your own web site, create links to other web sites. Welcome to Techs in the City, podcasting from the Office of Academic Technology at California State University, Long Beach. Here's your host for today's episode, Walter Gajewski. Thank you, Mat. I'd like to continue my discussion about using Adobe Contribute CS3 for creating web pages. Today I'd like to talk about linking to other pages besides web pages on my own web site. I've already launched Contribute, so I can come down to the link here and click on Index of ~gajewski and it takes me to the web site I want to modify so I will click on CONNECT. I see the home page of that site, which is the page I want to modify, so I click on EDIT PAGE. The first thing I'd like to do is turn this stylized portrait of myself into a link. I'm going to select it by clicking on it and then I can come up here to link and browse to a web page. I would like to have that picture link to the software that is a free download that allows you to create that type of stylized portrait. So, I'm going to click on the Browse button to browse to the Picasa web site, because it is the Google software that you can download for free that lets you manipulate images, so picasa.google.com. Hit Return and I see the web page I'm interested in linking to, so I'm going to click on OK. It still shows in the previous dialog box. Things are looking good. I click on OK. And now my picture is a link to the Picasa page. If I've made a mistake and want to remove that link from my picture, I can right click on the image, come down here and and simply click on Remove link. I don't want to do that, so I'm going to come off to the side here. Now I'd like to create a text link that takes us to the New York Times website. I'm going to highlight all of this placeholder text, to get rid of it and simply type Read the NY times Circuits column. I can highlight New York Times Circuits to turn that into a link. Now that it's highlighted, I go up to link and I'm going to Browse to a web page. I've already looked at the New York Times web page and I've copied that long address of theirs and, so now, I can just paste it with a control-V into the address space and click on OK. Those are the only changes I want to make right now, and so, I'm going to publish this. Once again, I simply click on publish. I get congratulated. I click on OK and I see my newly edited page in a web browser. So here's that newly edited page. I can test my links. I click on my portrait and see if takes me. . . It does. It takes me to the Picasa web page. Let's back up. Come back to this new page and click on the �New York Times Circuits� link and, in fact, that link works as well. So, I'm happy. I can quit out of contribute. We'll see you next time. Thank you. You've been watching "Techs in the City." Thanks for joining us. Remember, if you need multimedia or other technical assistance while at the beach, you can rest assured, knowing you have techs in the city. Free written transcripts and captioned video are available for download at www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/transcript03.pdf Thu, 25 Sep 2008 14:56:00 PDT Mat Kaplan, Office of Academic Technology, web, page, adobe, contribute, CS3, ftp, server, csulb Walter Gajewski The latest version of Internet Explorer can be used as a FTP program to add files to or remove files from a remote web server. Welcome to Techs in the City, podcasting from the Office of Academic Technology at California State University, Long Beach. Here's your host for today's episode, Walter Gajewski. Thank you, Mat. Today I'd like to talk about moving files from your local computer out to a web server. You might want to have a PDF file, or an MS Word document, maybe a music file available out there for people that visit your web site. You could create a link on your web page and that link would download that file or open that file for them. In the past, to move a file out to a web server you would typically use a dedicated ftp, or file transfer protocol program. On the PC side of things, WS FTP was very popular. On the Mac side, a program called Fetch has been used for years. Now we can use the latest version of Internet Explorer, the same program that we use for surfing the web. I've launched Internet Explorer and I'm looking at the home page of my web site. I'm going to click in the address area to highlight the address and I'm going to type something new. We're used to using http. This time we're going to use ftp, colon, slash, slash, and then the name of the campus ftp server, which is ftp dot csulb dot edu slash. And now, I can hit ENTER. Now I come up to the tool bar and drop down the PAGE selections and click on "open FTP site in Windows Explorer." Now I have an opportunity to put in my user name, which is "gajewski." That happens to be my campus email user name. And, the password they're looking for is also my campus email password. Now I can click on this button that says "log on." And now I see all the files and folders that make up my account here on the campus. You don't want to mess with most of these files here. It's possible to make a mess of your email system, or worse. So,confine your activity to the folder that has your web files and folders in it and that would be the h t d o c s folder on this campus -- or htdocs, which is right here. I'm going to double click on that and now I see all the sub folders and files that make up my web account here on campus. I can eliminate files. I'm going to do that. I'm going to click on this file that's called �a a a a dot d o c.� It's obviously a Microsoft Word file. Now, if I right-click, I can select DELETE. I'm asked to confirm. I click on YES and that file is gone off the campus server. It is no longer available to people who visit my web site. I can also place new files out there. I'm going up to the FOLDERS icon and I see a list of all the sub folders that are in my �h t docs� folder on the campus site. But, I also see all the files and folders that are on my local hard drive, so I can expand the "My Documents" folder. I can expand the "My Pictures" folder by clicking on that little plus. And, if I click on this folder called "My Office," I can see all of the files that are in that folder. I have a picture of my office, a file called "office.jpg." I'm going to drag that into the htdocs folder that sits on the campus web server. There. I just copied that file "office.jpg� on the campus web server. I now have a copy out there and I still have my original copy on the hard drive here. I can confirm this. I can click out of this dialog box and I'm going to look at my home page once again. I can put the address of that picture file into my web browser and see if it appears. Now, the address would be the same as my home page address with the addition of the file name after that slash. So I type in "office.jpg." Now let's see what happens when I hit the RETURN key, the ENTER key. There it is! This is proof that that file is actually sitting out on the campus web server. Thank you very much. See you next time. http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/episode4.mp4 Thu, 25 Sep 2008 15:07:00 PDT 5:45 web, page, adobe, internet, explorer, ftp, server, csulb, Mat Kaplan, Office of Academic Technology Walter Gajewski The latest version of Internet Explorer can be used as a FTP program to add files to or remove files from a remote web server. You might want to have a PDF file, or an MS Word document, maybe a music file available out there for people that visit your web site. You could create a link on your web page and that link would download that file or open that file for them. In the past, to move a file out to a web server you would typically use a dedicated ftp, or file transfer protocol program. On the PC side of things, WS FTP was very popular. On the Mac side, a program called Fetch has been used for years. Now we can use the latest version of Internet Explorer, the same program that we use for surfing the web. I've launched Internet Explorer and I'm looking at the home page of my web site. I'm going to click in the address area to highlight the address and I'm going to type something new. We're used to using http. This time we're going to use ftp, colon, slash, slash, and then the name of the campus ftp server, which is ftp dot csulb dot edu slash. And now, I can hit ENTER. Now I come up to the tool bar and drop down the PAGE selections and click on "open FTP site in Windows Explorer." Now I have an opportunity to put in my user name, which is "gajewski." That happens to be my campus email user name. And, the password they're looking for is also my campus email password. Now I can click on this button that says "log on." And now I see all the files and folders that make up my account here on the campus. You don't want to mess with most of these files here. It's possible to make a mess of your email system, or worse. So,confine your activity to the folder that has your web files and folders in it and that would be the h t d o c s folder on this campus -- or htdocs, which is right here. I'm going to double click on that and now I see all the sub folders and files that make up my web account here on campus. I can eliminate files. I'm going to do that. I'm going to click on this file that's called �a a a a dot d o c.� It's obviously a Microsoft Word file. Now, if I right-click, I can select DELETE. I'm asked to confirm. I click on YES and that file is gone off the campus server. It is no longer available to people who visit my web site. I can also place new files out there. I'm going up to the FOLDERS icon and I see a list of all the sub folders that are in my �h t docs� folder on the campus site. But, I also see all the files and folders that are on my local hard drive, so I can expand the "My Documents" folder. I can expand the "My Pictures" folder by clicking on that little plus. And, if I click on this folder called "My Office," I can see all of the files that are in that folder. I have a picture of my office, a file called "office.jpg." I'm going to drag that into the htdocs folder that sits on the campus web server. There. I just copied that file "office.jpg� on the campus web server. I now have a copy out there and I still have my original copy on the hard drive here. I can confirm this. I can click out of this dialog box and I'm going to look at my home page once again. I can put the address of that picture file into my web browser and see if it appears. Now, the address would be the same as my home page address with the addition of the file name after that slash. So I type in "office.jpg." Now let's see what happens when I hit the RETURN key, the ENTER key. There it is! This is proof that that file is actually sitting out on the campus web server. http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/transcript04.pdf Thu, 25 Sep 2008 15:05:00 PDT web, page, adobe, internet, explorer, ftp, server, csulb, Mat Kaplan, Office of Academic Technology Walter Gajewski You can embed an interactive Google map for any location into your own web page. [Mat] Welcome to Techs in the City, podcasting from the Office of Academic Technology at California State University, Long Beach. Here's your host for today's episode, Walter Gajewski. [Walter] Thank you Mat. Today I'm going to discuss customizing your web page . . . [Mat] Hey Walter, you really got to get up there to the new Griffith Observatory. I can tell you how to get there but why don't you just go to the Google map I put on my web page. [Walter] Oh, well, let's take a look at that. Ah, look at Mat's page here. It has a map to the Griffeth Observatory embedded right in the page. That is really slick. The map is completely interactive. I can zoom in, get infrmation. There is a lot of programming that goes into this. Fortunately, for Mat and for us, Google has done that programming for us. Let's take a look at how Mat did this. First thing we need to do is get a map. So, we are going out to the Google page at www.google.com and we see "maps" listed here. Sometimes you have to drop down the list of the "More Applicatoins" and find "Maps" in there. I'm going to click on "maps" and I want to embed a map of the California State University campus into my web page. So we're going to search for CSU Long Beach, hit "Retrurn" and here's a map. All we need do now is click on the link that says "link." And, I'm going to customize this so it looks the way I want it to look. So, I will click on "customize and preview embedded map." We get an idea of what it might look like. It's an awfully large map. I'm going to select "small." Let me move this up here. This is what the map will look like. And, here is all that fancy computer programming that was done for us by the folks at Google. I'm going to highlight all of this code and copy it to the clipboard of my computer (the famous invisible clipboard). On a PC I do that with Control-C, for "copy." On a Mac it's Command-C. I don't need this Google map anymore. I'm going to quit out of this. And, now I'm going to launch my web editing software. We're using Contribute. You can do this with Dreamweaver. You can do it with Kompozer, whatever you choose. I'm going to edit my web site. I'm clicking on this and we have to connect and here's my home page. I'm going to edit this home page and place the map right on this page. I'm going to put my curser down in here in this blank area and I'm going to insert that code, that we just copied. So, I go to "insert, html snipett." Now, in your Contribute, this might be greyed out. You have to talk to the person that administers your Contibute web site to turn on this function, that is, the function that lets you insert html snipetts. Ok, so I'm going to click on that. And, here is a dialog box that let's me paste in the code that I copied from the Google map site. On a PC, that is Control-V. On a Macintosh it's Command-V. Now that all that code is pasted in, I click on OK. And, here is a grey square that represents the map. It doesn't look like much of a map yet, but I have to publish this page. So, I'm going to click on "publish." As usual I get congratulated by Contribute. I click OK. And, my new page opens up in a web browser. And, there it is! My home page now has an interactive map to the Cal Stat University campus, just like Mat's page had a map to the observatory. That's it for today. Thanks for watching. [Mat] You've been watching "Techs in the City." Thanks for joining us. Remember, if you need multimedia or other technical assistance while at the beach, you can rest assured, knowing you have techs in the city. Free written transcripts and captioned video are available for download at www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/005/embedded-maps.mp4 Mon, 27 Oct 2008 15:42:00 PDT 5:12 web, page, embed, internet, map, google, server, csulb, Mat Kaplan, Office of Academic Technology Walter Gajewski You can embed a Google map of any location into your own web page. [Mat] Welcome to Techs in the City, podcasting from the Office of Academic Technology at California State University, Long Beach. Here's your host for today's episode, Walter Gajewski. [Walter] Thank you Mat. Today I'm going to discuss customizing your web page . . . [Mat] Hey Walter, you really got to get up there to the new Griffith Observatory. I can tell you how to get there but why don't you just go to the Google map I put on my web page. [Walter] Oh, well, let's take a look at that. Ah, look at Mat's page here. It has a map to the Griffeth Observatory embedded right in the page. That is really slick. The map is completely interactive. I can zoom in, get infrmation. There is a lot of programming that goes into this. Fortunately, for Mat and for us, Google has done that programming for us. Let's take a look at how Mat did this. First thing we need to do is get a map. So, we are going out to the Google page at www.google.com and we see "maps" listed here. Sometimes you have to drop down the list of the "More Applicatoins" and find "Maps" in there. I'm going to click on "maps" and I want to embed a map of the California State University campus into my web page. So we're going to search for CSU Long Beach, hit "Retrurn" and here's a map. All we need do now is click on the link that says "link." And, I'm going to customize this so it looks the way I want it to look. So, I will click on "customize and preview embedded map." We get an idea of what it might look like. It's an awfully large map. I'm going to select "small." Let me move this up here. This is what the map will look like. And, here is all that fancy computer programming that was done for us by the folks at Google. I'm going to highlight all of this code and copy it to the clipboard of my computer (the famous invisible clipboard). On a PC I do that with Control-C, for "copy." On a Mac it's Command-C. I don't need this Google map anymore. I'm going to quit out of this. And, now I'm going to launch my web editing software. We're using Contribute. You can do this with Dreamweaver. You can do it with Kompozer, whatever you choose. I'm going to edit my web site. I'm clicking on this and we have to connect and here's my home page. I'm going to edit this home page and place the map right on this page. I'm going to put my curser down in here in this blank area and I'm going to insert that code, that we just copied. So, I go to "insert, html snipett." Now, in your Contribute, this might be greyed out. You have to talk to the person that administers your Contibute web site to turn on this function, that is, the function that lets you insert html snipetts. Ok, so I'm going to click on that. And, here is a dialog box that let's me paste in the code that I copied from the Google map site. On a PC, that is Control-V. On a Macintosh it's Command-V. Now that all that code is pasted in, I click on OK. And, here is a grey square that represents the map. It doesn't look like much of a map yet, but I have to publish this page. So, I'm going to click on "publish." As usual I get congratulated by Contribute. I click OK. And, my new page opens up in a web browser. And, there it is! My home page now has an interactive map to the Cal Stat University campus, just like Mat's page had a map to the observatory. That's it for today. Thanks for watching. [Mat] You've been watching "Techs in the City." Thanks for joining us. Remember, if you need multimedia or other technical assistance while at the beach, you can rest assured, knowing you have techs in the city. Free written transcripts and captioned video are available for download at www.csulb.edu/divisions/aa/academic_technology/itss/multimedia/techtip.html http://csulb.edu/divisions/aa/academic_technology/itss/multimedia/xml-files/video/005/maps.pdf Mon, 27 Oct 2008 15:05:00 PDT web, page, adobe, internet, Google, map, embed, csulb, Mat Kaplan, Office of Academic Technology