web design - creating a google site
DESCRIPTION
TRANSCRIPT
www.le.ac.uk/studentdevelopment
Student Development
Creating a website
Matthew Mobbs
web: mjmobbs.com
twitter: mjmobbs
www.le.ac.uk/studentdevelopment
History of website design
• 1989 Tim Berners-Lee wrote a proposal for what would become the WorldWideWeb
• 1994 The World Wide Web Consortium (W3C) set the standards of web design. HTML the primary coding language. Code developed to incorporate graphics and
• 1995 – 1996 Flash and Java graphics
• Present Day – Web 2.0 The user generated web
www.le.ac.uk/studentdevelopment
Technology
<HTML><HEAD><TITLE></TITLE>
</HEAD><BODY><p></p></BODY></HTML>
Basic Text - Notepad
Design Software - Dreamweaver
www.le.ac.uk/studentdevelopment
Sign into Google
CalendarDocuments
Email RSS Reader
more Sites Create new site
www.le.ac.uk/studentdevelopment
Set up your site
1. Choose a Blank template
2. Name your site
3. Choose a Theme (you can change later)
4. Share with ‘people I specify’
5. Create site
www.le.ac.uk/studentdevelopment
Still uses HTML1. Open index.html from last
week
2. Copy the highlighted section
3. On your Google Site select ‘HTML’ in the Editor
4. Paste in the HTML and ‘update’
5. Edit text using visual editor (WYSWIG)
6. Save
www.le.ac.uk/studentdevelopment
Add a new page
1. Select ‘Create Page’
2. Call the page ‘Modules’
3. Put the page at the top level
4. Select Create Page
www.le.ac.uk/studentdevelopment
Add Modules list
1. From index.html
2. Copy the highlighted section
3. Paste into HTML editor on the GoogleSite
4. In the visual editor add ‘GoogleSite’ after ‘HTML’
5. Remove the link for ‘Web Design’
6. Save
www.le.ac.uk/studentdevelopment
Creating Site Structure
1. Select ‘Create Page’
2. Call the page ‘Web Design’
3. Put the page under Modules
4. Select Create Page
my -websitemy -website
modulesmodules
index.html
web-design
www.le.ac.uk/studentdevelopment
Web Design Page
1. From webdesign.html from last week copy
2. Add: Session Two: HTML
3. Change the style to H3 via Format menu
www.le.ac.uk/studentdevelopment
Insert Images
1. Select Insert Image
2. Choose Uploaded images
3. Browse to html.gif from last week
4. Add the alt text
www.le.ac.uk/studentdevelopment
Hyperlinks
1. Return to the Modules page in edit mode
2. Highlight the word ‘Web Design’ and select Link
3. There are three types of link:• Existing page• Web address• App Script
4. Add a link to Web Design
www.le.ac.uk/studentdevelopment
Managing your site
1. From More actions select Mange Site
Site ContentMange the uploads and pages. Plus see the full revision history
Site SettingsMange descriptions, access and event commercialise your site
Site appearanceChange the Theme, layout and colours of your site
www.le.ac.uk/studentdevelopment
Sharing your site
1. From Manage Site go to Share this site
2. In Add People add [email protected]
3. From the dropdown select level of rights sight. Chose Owner
For Assessment• You need one site and other group members should be added
as owners• I will need to be added in order to mark• Tip: Use a gmail address
www.le.ac.uk/studentdevelopment
For Further Information
• http://www.youtube.com/watch?v=fD-4FRTzxkI&feature=channel
• http://www.google.com/support/sites/