 |
 |
|
|
|
Parkland
College > CSIT
Dept > Digital Media > CIS 152 >
Calendar > Lesson 2
CIS 152 WEB DESIGN I
Lesson 2: Introduction to Google Page Creator
Instructor: Paul
Young
|
| |
Objectives
|
|
To become comfortable with creating web pages, editing content and making links within the Google Page Creator environment by creating a web site similar to this one:
http://paulananda.googlepages.com/
|
| |
Discussion
|
|
A web page is one single page that can be viewed on the web. A web site is a series of related web pages linked to each other. One way to make a web site is to use existing templates that have been designed for you. Google Page Creator allows you to choose a template and then add your own content. Google also provides free web server space for you to publish your web site. In this lesson, we will be building a 5-page web site using existing content which you can later edit.
|
| |
Procedure
|
|
Overview: Choose a template style. Upload the sample content provided into Google's templates. Create links and publish. Edit and personalize the web site with your own content.
- download sample content to your desktop
- move files to "jsmith/cis152/prep/lesson2"
- browse to www.google.com and login to your Gmail account
- browse to Google Labs (click MORE, then choose GOOGLE LABS on the right)
- browse to Google Page Creator, and login
creating a home page
- note current location "edit page: home"
- change LAYOUT to 2-column format
- change main title to "home"
- add subtitle "About Jane Smith"
- add the following links in the narrow column: home, my pictures, my links, my projects, contact me
- browse to lorem.com and copy some text
- paste the text into the main content area
- change LOOK to template style of your choice
- preview, publish, then view live
creating the internal pages
- go back to PAGE MANAGER, view as list
- create new page "words" (note: this page's web address will be http://yourname.googlepages.com/words)
- edit words page: change title, content (tip: use notepad application to strip text formatting from clipboard)
- style text: try minor head, bold, italic
- preview, publish, then view live
- repeat with new pages (pictures, links, contact)
adding internal links
- go back to PAGE MANAGER
- edit your home page
- select "my words" and insert a link to your words page
- repeat with other links (pictures, links, contact)
- preview, publish, then view live
- repeat with other pages in your web site
adding external links
- edit your links page
- select "Amelie" and insert a link to web address
- using pyoung11.googlepages.com/links as a reference, locate the web address for "Amelie"
- copy the URL to the clipboard (edit > copy)
- paste URL into the web address field (edit > paste)
- repeat with other links on the page
- publish, then view live to test links
modifying external links to open in a new window
- view > source code of paulananda.googlepages.com/mylinks and find the "Surface 51 " link (edit > find)
- copy the code <target = "_blank"> to the clipboard
- edit your links page
- select your content area and EDIT HTML
- locate the link to "Surface 51"
- paste the <target = "_blank"> code into the appropriate location
- publish, then view live to test links
- repeat with other links on the page
- test and troubleshoot your site
- send an email to pyoung@parkland.edu with the web address of your site
|
|
|
