Download INFO 2130 Web Development

INFO 2130
Web Development
Part I - Introduction to web
development and SharePoint
Designer
Part I condensed from an online tutorial offered by the Office of
Information Technology at Montclair State University. Used with
permission.
What is Web Development?


Web development is any activity related to
developing a web content for the World Wide
Web or an organizational intranet.
Web development can include:





web site design
web content development
client-side/server-side scripting
web server configuration
e-commerce business development
Source: http://en.wikipedia.org/wiki/Web_development
What is Web Development?


In this class, we will focus on the web site
design and e-commerce activities of web
development.
Web development software packages include:




MS Visual Studio
Dreamweaver
MS SharePoint Designer 2007 (which can be
downloaded for free from Microsoft)
and many others
Introduction to SharePoint Designer




SharePoint Designer is a powerful tool used
for creating and maintaining web sites.
A web site is simply a group of related web
pages that are connected by hyperlinks.
Most web sites provide a home page to site
visitors as a starting point.
SharePoint Designer has replaced FrontPage.
Introduction to SharePoint Designer

To Create a New Web Site:




1) Click File
2) Highlight New
3) Click Web Site
4) Under the Web Site tab click General and One
Page Web Site
Introduction to SharePoint Designer

To create a web site locally:
 1) Click Browse
 2) Select My Documents
 3) Select My Web Sites
 4) Click Open
 5) Type the name of the web site under Specify the
location…… at the end of site address
 6) Click OK
Introduction to SharePoint Designer

Working with SharePoint Designer


When starting a new SharePoint web site a blank
home page is created and ready for you to start
working on. Your home page is referred to as
default.htm.
You will need to create a folder within your website
to contain your images. To create the images
folder, right click on the folder icon and select New
-> Folder. It is recommended that all pictures be
saved in this folder.
Introduction to SharePoint Designer

Different Views


To start working in SharePoint, double click on a file
to open (default.htm).
When you open a page or create a new one, you are
working in one of the page views: Design, Split, and
Code. When a page is open, these views are accessed
by buttons at the bottom.



While you work in the Design view, SharePoint does all of the
HTML coding for you behind the scenes.
Split view splits the view in half. The top half displays the HTML
code for the page, and the bottom half shows the page as it
looks in the Design view.
Code view displays the HTML code for the page. If you are an
experienced web designer, you might feel more comfortable in
this view
Introduction to SharePoint Designer

Working with Tables


Tables are useful when creating a web
page. Tables make it is easy to line up
items on the page in rows and columns.
To Insert a Table


1) Click Table
2) Click Insert Table





Select the number of columns and rows you
want for the table
Specify the width as 800 pixels. This is to
match the standard 800x600 resolution
setting on computer monitors.
Change the Alignment to Center
Click Set as default for new tables
3) Click OK
Introduction to SharePoint Designer

Formatting Your Web Page

To Change the Background
Color of the Web Page:



For a Background Picture:




1) Right-click in an empty area of the
page
2) Click Page Properties
1) Select the formatting tab
2) Select Background picture
3) Click Browse and locate the
picture file
To Select a Background Color:


1) Click the drop down list for
background color options
2) Click OK
Introduction to SharePoint Designer

Formatting Your Web Page (cont.)

To Change the Background Color of the Table
Only:



To Change the Background Color of a Cell
Only:



1) Right-click in the table and choose Table Properties
2) Select a background color
1) Right-click in the cell and choose Cell Properties
2) Select a background color
To Insert a Picture:




1)
2)
3)
4)
Click in a cell within the table
Click Insert
Click Picture
Choose either Clip Art or From File
Introduction to SharePoint Designer

Hyperlinks

A hyperlink is a connection from one page to
another destination, such as another page or a
different location on the same page. The
destination is frequently another web page, but it
can also be a picture, an e-mail address, or a file
(such as a Microsoft Office document). A hyperlink
can be text or a picture.
Introduction to SharePoint Designer

Hyperlinks

To Hyperlink to Another Web Page:
 1) Type the text you want to use as the hyperlink and select
it
 2) Click Insert
 3) Click Hyperlink (or click on the Insert Hyperlink icon
on the toolbar)
 4) Click Existing File or Web Page on the left
5) Click on the web page
from the list that you are
linking to
6) Click OK
Introduction to SharePoint Designer

Hyperlinks

To Hyperlink to an E-mail Address:




1) Type the e-mail address you are linking to on your web
page
2) Select the text
3) Click on Insert Hyperlink
4) Click E-mail Address on the left
5) Type your e-mail
address in the E-mail
address section
6) Type a subject that will
automatically be filled in
when sending the
message
7) Click OK
Introduction to SharePoint Designer
Bookmarks
 A bookmark is a location on a page that you have marked. You
can create a hyperlink to a bookmark when you want to display a
certain section of a page to a site visitor.


To Create a Bookmark:
 1) Position the cursor where you want to create a bookmark
 2) Click Insert
 3) Click Bookmark
 4) Type a name for your bookmark
 5) The bookmarked area will be underlined with a dotted line
To Create a Hyperlink to a Bookmark:
 1) Highlight the text you want to use as the hyperlink
 2) Click on Insert Hyperlink
 3) Click Place in This Document on the left
 4) Click on the bookmark you are linking to
 5) Click OK
Introduction to SharePoint Designer

Saving a Web Page


1) Click File
2) Click Save
3) Type a name for
your web page under
File name
4) Click Change
title to change the
name that will appear
in the title bar of
your web browser
while viewing the
web page
5) Click Save
Introduction to SharePoint Designer

Saving a Web Page


1) Click File
2) Click Save (If your web page contains pictures, the
Save Embedded Files box will appear.)



1) Click Rename to give the picture a more descriptive
name
2) Click Change Folder and select the images folder
3) Click OK
Introduction to SharePoint Designer

To Create a New
Web Page:
 1) Click File
 2) Highlight New
 3) On the Page tab
click General and
HTML
 4) Click OK
 5) A new page is
created with a
temporary name of
Untitled_1.htm.
SharePoint Designer Resources

http://office.microsoft.com/enus/sharepointdesigner/FX100646991033.aspx
Part II
Basic elements of web site – XHTML
Markup Languages

Text + Tags specifying how to process the text



Purpose



e.g., Word Processors – using binary codes
e.g., hypertext markup languages - using plain text codes
To add structure to a document and make it easy to identify
and extract/address any individual component, e.g., XML
To format the document for presentation, e.g., XHTML
SGML – Standard Generalized Markup Language

More than just a markup language. Used to define other
languages.


e.g., XHTML is a simple subsets of SGML;
XML is also a subset of SGML
XHTML


A language for specifying how text is displayed
Consists of Tags





<tagname [attributes]>
</tagname>
A tag may have multiple attributes. Many attributes are optional.
They can appear in any order.
e.g., <h1 align=“center”>Hello</h1>
XHTML files are plain text files




<h3 align=“center”>Course Information</h3>
<p>Course ID: INFO2130</p>
<p>Course Name: Introduction to Business Computing</p>
<p>Professor: A. Stylianou</p>
<p>Classroom: Friday, Rm. 35</p>
Specifies mostly format of presentation
Which of those text strings are data, which are field names?
What is the structure of the data contained?
XHTML – Some rules





Case: XHTML tag and attribute names must be written in lowercase.
Mandatory tags: The <head> and <body> elements cannot
be omitted. <title> must be the first element in the <head>
element.
Closure: All elements must be closed. Empty elements (i.e.,
those without a closing tag) such as <br> and <img> must take
the XML form of <br/> and <img/>. For compatibility with
current browsers it is recommended to put whitespace before
the forward slash e.g. <br />
Overlapping: Elements must nest (last opened = fist closed),
not overlap
Attributes: Attribute values must be quoted. Attributes may
not be minimized.
Tools for writing XHTML


Text Editors – Notepad
XHTML Aware Editors



Office Productivity Software


Nvu
HTML-Kit
Microsoft Office
Web Site Development Environments




SharePoint Designer
Visual Studio
Visual Web Developer
Dreamweaver
XHTML Structure
<html>
<head>
<title>Minimal document</title>
</head>
<body>
Some interesting content here …. <br />
</body>
</html>
Some Basic Tags
• Index of HTML 4.0 Elements
• XHTML Tag List






<p> … </p>
<br />
<hr />
<h1> to <h6> … </h1>
<strong>…</strong>
<em>…</em>

New Paragraph
Line Break
Horizontal Rule
Headings
Bold

Italics




Head and Body

<head></head>


title
meta








name: “description”, “keywords”
content
<meta name="Author" content="A. Stylianou“ />
<meta name="Classification" content="education, Information Systems“ />
<meta name="Description" content="MIS Course“ />
<meta name="KeyWords" content=“IS, IT, course, education, training“ />
http-equiv=“refresh” content=“5;url=http://www.uncc.edu”
<body></body>
Lists


Bulleted
<ul>
<li> Item Here</li>
<li> Item Here</li>
</ul>
<ul type=“disk’>


circle, square
imagesrc=“ball.gif”


Numbered
<ol>
<li> Item Here</li>
<li> Item Here</li>
</ol>
<ol type=“A”>

a, i, II
More with <hr> Tag

<hr width=“x” or “%” size=“n” align=“center” />
e.g.,
<hr width=“300” size=“4” />
<hr width=“50%” align=“left” />
Hyper Links



A reference to a resource (a URL) is embedded in a
currently displayed web page and made visible in the
browser
By clicking on the reference (the link), the linked
resource is retrieved and displayed
References can be




Absolute: A complete URL is given specifying the precise
address of the resource
Relative: A portion of the URL is given. The address of the
resource is deduced based on the current or base address
External: A link to a resource outside the current document
Internal: A link to a resource/location inside the current
document
More on Hyperlinks

<a href=“url”>Link Text and/or Image</a>

Absolute addressing




<a href=“http://www.uncc.edu/astylian/x.ppt”>Present</a>
<a href=“ftp://ftp.uncc.edu/coba/d1.doc”><img src=“d.jpg” /></a>
<a href=“mailto:[email protected]”>Contact me</a>
Relative addressing

<a
<a
<a
<a

Can specify a BASE address in the HEADer area




href=“resume.html”>Click here to see my resume</a>
href=“../images/tony.gif”>My Picture</a>
href=“images/tony.gif”>My Picture</a>
href=“/”>Home</a>
<base href=http://infosys.uncc.edu/eCommerce/>
More on Hyperlinks

Open in a new window
target = “_blank”
 Example:
<a href = “http://www.uncc.edu” target = “_blank”>Go to
UNCC Page</a>

Images



Images may be stored at your site or a
remote site
You can create them using a graphics
program
Must be in one of the following formats




JPG
GIF
PNG
You can also copy them from another
site. Observe copyright laws!

Right mouse click, Save Image As, or Copy Image Location
More on Images

<img src=“location & filename” />
e.g., <img src=“earth.gif” />
<img src=“http://www.uncc.edu/unccbanner.gif” />

Optional parameters:






align= top, middle, bottom, ...
width, height in pixels or %
alt = “alternative text”
border = #of pixels
hspace, vspace in pixels
e.g., <img src=“logo.gif” align=“top” height=“200” width=“50” />
Basic Table Syntax
<table>
Fruit Colors
Apple
Table caption
<caption></caption>
Red
Avacado Green
Table row <tr></tr>
Table data (or ‘cell) <td> </td>
</table>
Basic Table Syntax
<table>
<caption>Sample Table</caption>
<thead>
<tr>
<th> Column One Header </th>
<th> Column Two Header </th>
</tr>
</thead>
<tbody>
<tr>
<td> R1C1 </td>
<td> R1C2 </td>
</tr>
<tr>
<td> R2C1 </td>
<td> R2C2 </td>
</tr>
</tbody>
</table>
More About Tables

<table> attributes








align
bgcolor
border – pixel width of the border
cellpadding – space between borders and data
cellspacing – space between cells
height – in pixels or as a %
width – in pixels or as a %
<tr> attributes




align
bgcolor
valign – top, bottom, center
bordercolor
More About Tables

<th> and <td> attributes










align
bgcolor
background
bordercolor
colspan
height
nowrap
rowspan
valign – top, bottom, middle
width
Using Color

Can use named colors


Or #color hex numbers


e.g., blue, salmon, green
e.g., #0000ff
Good sources


http://www.d.umn.edu/itss/support/Training/Online/webdesign/color.html
http://www.webdesignfromscratch.com/colour.cfm
Internal Links


Called Bookmarks or Targets
A part of the document is named using the name or id
attribute




Then from another place in the same document:


<a name=“contents”>Contents</a>
<p id=“policy”>…</p>
<img src=“z3.gif” alt=“Car pic” id=“car” />
<a href=“#contents”>Back to contents</a>
Or from a different document:

<a href=“http://www.uncc.edu/x.html#contents”>To Contents</a>
Title attribute


Displays tooltip with the contents of the title
attribute
E.g.,
<a href=“resume.html” title=“See my resume”>Resume<a>
Some more resources




Web Developer Virtual Library
HTML Goodies
WebReference.com
XHTML School
Part III
Creating a website at UNC Charlotte
How to Upload Web Pages to the
UNCC Internet Server

Step 1: Access your H drive
 From computers on campus: direct access
 From computers at home: Remote access:
 Go to the website at:
https://webf.uncc.edu
 Login with your NinerNET User Name and
password.
46
How to Upload Web Pages to the
UNCC Internet Server

Step 2: Create a folder named
“public_html” in your H drive
 Click the “file” button
 Choose “new folder”
 Please type public_html as the folder
name
 You should see a new folder named
public_html
47
How to Upload Web Pages to the
UNCC Internet Server

Step 3: Upload all web files to the
public_html folder
 First, go to the public_html folder in your H
drive
 Click the “file” button and choose “upload”
(allow pop-ups from this website)
 Choose “browse” to select files you want to
upload and then upload all your files one by
one
 Do not forget your images files and other linked
files
 Your homepage must be named index.html
48
How to Upload Web Pages to the
UNCC Internet Server


Step 4: Check your web pages
 URL:
http://webpages.uncc.edu/~NinerID/i
ndex.html
 Do all links work properly?
 Do all images appear properly?
Help:
http://www.labs.uncc.edu/basics/novell.html#webpages
49
Part IV
Introduction to
Cascading Style Sheets
Style - Basics



You can add style to your documents using Cascading
Style Sheets.
Most XHTML tags have a style attribute.
Syntax:


E.g.,




<tagname style=“styleproperty:value; styleproperty:value;”>
<p style=“color:blue”>Hi there</p>
<body style=“font-family:cursive”>
<td style=“font-size:1.5em; font-weight:bold”>
References/Tutorials



ZVON (http://zvon.org/xxl/CSS2Reference/Output)
W3Schools (http://www.w3schools.com/css)
TutorialsPoint (http://www.tutorialspoint.com/css/index.htm)
<div> and <span>


Useful tags for creating containers. Once you
have a container, you can position it, you can
apply style to it, make it visible/invisible, etc.
Container may contain paragraphs, text, xhtml
tags, images, tables, etc.
Units of Measurement
Unit Description
Example
%
Defines a measurement as a percentage relative to
another value, typically an enclosing element.
p {font-size: 16pt; line-height: 125%;}
cm
Defines a measurement in centimeters.
div {margin-bottom: 2cm;}
em
A relative measurement for the height of a font in
em spaces. Because an em unit is equivalent to the
size of a given font, if you assign a font to 12pt,
each "em" unit would be 12pt; thus, 2em would be
24pt.
p {letter-spacing: 7em;}
ex
This value defines a measurement relative to a font's p {font-size: 24pt; line-height: 3ex;}
x-height. The x-height is determined by the height of
the font's lowercase letter x.
in
Defines a measurement in inches.
p {word-spacing: .15in;}
mm
Defines a measurement in millimeters.
p {word-spacing: 15mm;}
pc
Defines a measurement in picas. A pica is equivalent
to 12 points; thus, there are 6 picas per inch.
p {font-size: 20pc;}
pt
Defines a measurement in points. A point is defined
as 1/72nd of an inch.
body {font-size: 18pt;}
px
Defines a measurement in screen pixels.
p {padding: 25px;}
Source: http://www.tutorialspoint.com/css/css_measurement_units.htm
Style properties: font

Sub-properties






Font-family
: serif, cursive, sans-serif, fantasy,
times-roman, ‘arial black’
Font-size
: 10pt, 150%, 1.5em, xx-large, larger
Font-style
: italic, obligue
Font-variant : normal, small-caps
Font-weight : normal, bold, bolder, lighter, 100,
200, …, 900
E.g.: font: bold italic 1.5em cursive
Style properties: background

Sub-properties





Background-color
Background-image :url(“…”)
Background-position :top, center, bottom, …
Background-repeat :repeat-x, repeat-y, no-repeat
E.g.: background: navy url(“me.gif”)
Style properties: color, width, border

<p style=“color:green”>This and that</p>

<div style=“height:100px; width:350px; border: red solid thin”>
Style properties: position

Position can be:




Can specify an offset from





Top
Bottom
Left
Right
In





Relative = in relation to normal position
Absolute = in relation to top left corner of the screen
Fixed = stays in position even if screen is scrolled
px
%
em
Cm
E.g.,
<img src=“…” style=“position:absolute;top:100px; left:200px” />
Style properties: visibility, display

Visibility

Values:





Visible (default)
Hidden
E.g.: <div style=“visibility:hidden”>
Space is reserved for the item
Display

Values:


inline (default), block, list-item, table, none, …
None is like hidden visibility except it does not reserve
space
More on Style



DRAAC.COM
CSS School
ZVON CSS Reference
Part V
CSS, Event Handling and Web
Development for Alternate Audiences
Web Design Guidelines

Keep it simple

Keep it up-to-date

Get rid of dead links

If you want to make heavy use of graphics, please
provide alternative text page

Consider who are the users

Provide Index & Navigation tools
Cascading Style Sheet (CSS)

A structured/flexible way of presenting content

Goals



To make the web page design less complex and
more consistent
To make the web page more stylish
References:

W3Schools (http://www.w3schools.com/css)
ZVON (http://zvon.org/xxl/CSS2Reference/Output)

TutorialsPoint (http://www.tutorialspoint.com/css/index.htm)

Types of CSS

Three ways to incorporate in a web page



Inline CSS
Embedded or Internal CSS
External or Linked CSS
Inline CSS
Type I: Inline CSS

Coded inside a tag using the style=“” attribute

Syntax:




<tagname style=“styleproperty:value; styleproperty:value;”>
<p style=“font: italic 16px arial; color: red”> content </p>
<hr style=“height:10px; width:50%; color: red; text-align: center”/>
Inline style properties are applied only to that tag
Embedded CSS
Type II: Embedded CSS

Normally in the <head> section of the html file
Defined within a <style type="text/css"> tag
Can be applied to defined selectors

Example


<head>
<style type="text/css">
hr {height:10px; width:50%; color: red; text-align: center}
h1 {font-family: “Times New Roman”; font-size: 12pt;}
p {margin-left: 20px; text-align: justify; color: blue}
</style>
</head>
External CSS
Type III: External/Linked CSS
 Purpose: applying common styles to multiple pages
 Saved as a separate document with a .css extention
 E.g., one of UNCC’s style sheets


http://www.uncc.edu/template/media/css/style.css
Linked with web pages:
<head>
<title>Linked Style Sheet Example</title>
<link href="Stylesheet.css" type="text/css" rel="stylesheet"/>
</head>

Stylesheets can be created in SharePoint:

File->New->CSS
External CSS

Existing stylesheets can be linked in Sharepoint


Apply styles in a css file to your webpage: Format>CSS Styles->Attach Style Sheet
Also under Format



New Style – define new styles for different selectors
CSS Styles – apply CSS styles to web pages, manage style
sheets etc.
CSS Properties – look at style properties defined in your
existing CSS file(s)
CSS Selectors

Typical format


Selectors can be tags. Examples:




selector {property:value}
body {color:red}
p {color:yellow; text-align:right}
p{
color:red;
text-align:center
}
Selectors can be grouped – style applied to all
h1,h2 {color:blue}
Selector Classes



Selector classes can be used to define different
styles for the same HTML element or for a
group (class) of elements
Format: selector.class {property:value}
E.g., to define different styles for left-aligned
and center-aligned paragraphs



p.right {text-align:right; color:red}
p.center {text-align:center color:blue}
To use in your document:


<p class=“right”>What is the color and alignment of this
paragraph </p>
<p class=“center”>This paragraph should be centered and
blue </p>
Selector Classes


The style for a common class can be defined
without specifying a selector
For example, to define a “special” class to be
used with multiple elements:


.special {text-align:center; text-weight:bold; color:blue}
To use in your document


<p class=“special”>The “special” class attributes will
be applied to this paragraph</p>
<h1 class=“special”> The “special” class attributes
will be applied to this heading</h1>
Events



Events are user actions that can be detected.
E.g.,
 onMouseOver
 onClick
 onMouseOut
<p style=“color:green”
onMouseover=“style.color=‘red’;
style.border=‘red solid thin’”>
This and that
</p>
<p style=“color:blue” onClick=“style.visibility=‘hidden’”>
Click to hide me
</p>
Events …

You can also affect the style of another element by using the
other element’s id
<p style=“color:green”
onMouseover=“this.style.color=‘red’”>
This and that
</p>

<div id=“cat“>Various stuff here</div>

<p style="color:red“ onClick=“cat.style.color='blue'“>...</p>
Events …


You can also change an element’s class
 <p class=“ordinary”
onClick=“this.className=‘special’”>
This and that
</p>
And, you can do much much more through the use of more
advanced scripting (e.g., JavaScript).

<img src=“x.jpg” onClick=“alert(‘Hello’)” />
Events …



In SharePoint events can be defined with selector
definitions in the .css file, or
In the tag properties section (by default, it appears on the
left-bottom corner of the screen)
In this example, the following
events are being defined for
the <p> tag
onclick
 ondblclick
 onmouseout
The background color is being
changed with each event

Mobile Web Design

Examples




Guidelines




http://m.bbc.co.uk
http://m.cnn.com
http://m.facebook.com
Lighter content and presentation formats
Consider display styles (portrait vs. landscape)
Mobile Web Design Trends 2009
Web resources

WebpageFX – How to design and build mobile
website

Nokia’s default CSS page for S60 browser