| Home > SharePoint Designer Tasks | |
 |
Web Development with Microsoft SharePoint Designer |
| Home > SharePoint Designer Tasks | |
|
|
Web Development with Microsoft SharePoint Designer |
Add and format text [TOP]
Open the page, "classcontent.htm" in the protected folder of your course Web. Type the course title and any other information that could be useful to convey text-based course content to your students. Try copying and pasting text from another source (e.g., a Word file that you have open on your computer's Desktop).
Use the Formatting toolbar or Format menu to adjust your font style, size, color, to suit your wishes. Note that the controls are similar (though not identical) to those found in Windows-based word processors, such as Microsoft Word.
Save your
page with the name "classcontent.htm".
Images
[TOP]
Modern Web browsers and Internet services do a fairly good
job of presenting images to enhance text content. Images can be digitized
photographs, drawings, video, or diagrams. We'll explore addition of a
picture to the "classcontent" page.
Part I: Importing a picture to your SPD Site.
Click to highlight the folder in your SPD Site's Folder List that will receive the image file.
Make sure
you have a picture (.gif, .jpg, .bmp) file available on your computer.
Click for an
Emergency Image.
Click "Import ..." in SPD's File menu.
Click on "Add File" and browse until you find the picture, then select it. The file name will appear in the Import list. Click "OK".
Click the location in "classcontent.htm" which will hold your picture.
From the Insert menu, select “Picture”, then “From File …” .
Click on the picture's name, then click "Insert".
Now save classcontent.htm.
Optional: Right-click on the picture
as it appears on your page in SPD. Select "Picture Properties..."
to resize the picture, add a border, right or left justify, etc.
Tables
[TOP]
Tables are central to many web pages. Not only
are tables a great method to use to organize a lot of information in a
smaller space that can be easily accessed, but they serve other uses on the
web as well. The main page of this course website uses tables to
organize its content. Most website navigation bars are made up of
cells in a table. Images can even be broken across different cells in
a table to create one image that can send a user to many different parts of
a website based on where they click in the image. Whatever your use,
inserting tables is an important part of your web page development.
Inserting a table to your SPD Site.
Click the location in your document in which you want to place a table.
Click "Insert Table..." in SPD's Table menu.
Select the numbers of rows and columns that you wish for your table. You can add and delete rows and columns later on.
Format your borders as you would like. You can create tables without borders for a "seamless" look.
Change the background color for your table or even insert an image to use as the background.
Click "OK" and your table will be inserted.
Now you can enter text, insert images, or place whatever content you wish into your table using the methods described in the other sections of this document.
Hyperlinks
[TOP]
THE single most important feature of the
World Wide Web! Indeed, the name "Web" refers to
the ability to link content that physically resides in different locations.
When we add a hyperlink to a Web page, we are essentially adding the
content's Internet address. Try the following on your page:
Type "Southeast Homepage" somewhere on your page.
Select all
of the text, "Southeast Homepage", then select Insert > Hyperlink...
or click on
.
Then,
Type "http://www.semo.edu" in the "Address:" box. Then,
Save your page in the usual way. Finally, open a browser, and browse to the "Class Content" page. Hint: you can quickly fetch the address by right-clicking on the file in Folder List, then selecting "Copy". Note that you can also see the file in a variety of views by selecting File > Preview in Browser.
In your browser, you will see your page. Click on the "Southeast Homepage" to see what happens. Did events unfold as you expected?
There are actually two kinds
of hyperlinks: absolute and relative. An absolute link
consists of an entire address, from the "http" all the way to the ending
two-, three-, or four-letter extension. The link,
http://www.manateecam.com/manateecam.html
is an example of an absolute link. Absolute links are used when linking to
content that you don't maintain, i.e., content on someone else's Website.
A relative link consists ONLY of the file name, and perhaps one or more
folder names. For example,
practice_page.htm is a genuine hyperlink, despite being nothing more
than a single filename. Why are there two kinds of hyperlinks?
To save you time and effort! Relative linking allows you to move entire folders (or even an entire Web)
from one location to another, while preserving the relationship between the
linked files. If, say, I moved the Web containing this page to another
server, the link to
practice_page.htm
would be preserved. This capability is an
important expression of reusability in the World Wide Web. Now
set up a relative link:
Create a file called "content2.htm" and save it in the usual way in your Site's protected folder. The file's contents can be anything, just make sure there is enough to identify the file when you browse it later in the exercise. However, adding some of your course content is a nice idea!
In your "classcontent.htm" page, type "More content" at the bottom of the page. Then, select the text.
Select Insert > Hyperlink...
or click on
.
Then,
Scroll through the list of files and folders in the "Insert Hyperlink" box, and click on "content2.htm" when you locate it. Do you see how the Address is only the filename, "content2.htm"?
Save your "classcontent.htm" page, then view the page in a browser. Be sure to click on the link "More content" to see if the relative link works.
Relative linking will save you many hours of work if you intend to reuse your online Website: Once the course is set up as a collection of files and folders, you can move the entire course to a new semester's Web without destroying the relationships between all the files.
Bread Crumb Trails: If
your site is mostly sequential, use hyperlink lists to help your students
navigate your Web pages. Simply line up the links that would take the
student back to the course's homepage, step by step.
What can we do next?
Customize Background color [TOP]
You can personalize your page
or signal changes in content with a background color. You'll need to be
careful, though: poorly chosen background colors (low contrast, annoying
combinations, etc.) can get in the way of effective communication. Here's
how to select a background color:
Right-click on the page as it appears in SPD. Select "Page Properties...".
Click the "Formatting" tab.
At "Colors Background:"
you can select a suitable color from the drop-down menu. Note that you
can also "pick up" background information from another page. This can be
useful if you have used a custom color on another page that you want to
employ on the current page.
Demonstrate conversion of a Word document and an Excel worksheet to Web format [TOP]
Create a new Web page and give it a name.
Click on the link Word document and open the file.
Using Select All (CTRL-A), copy all of the chemistry exercises in the file.
Return to SPD and Paste the exercises into your new file.
Save the file and view it in a browser. Did the formatting survive?
Copying and pasting content
from Word to SPD is pretty good. However, you might want to do your own
formatting after the text is in SPD. Paste Text
lets you do this:
Return to the Word file and copy all of the chemistry exercises in the file.
Back in SPD Select Edit > Paste Text ... > Plain text to paste ONLY the text from the Word file.
Save the file and view it in a browser. How does the text look now?
Excel worksheets can also be
pasted into HTML files. The data appear in Table format upon transfer:
Click on the link Excel worksheet and open the file.
Click and drag to select cells A1 through C9, then copy the cells.
Return to SPD and Paste the exercises into your new file.
Save the file and view it in a browser. Did the formatting survive?
If time and interest allow, practice your own conversions using file(s) that you brought to the session.
Creating a new file from scratch
[TOP]
Select
File > New >
Page ... or click on
.
Saving [TOP]
Select File > Save.
Give your
file a name, then click "Save".
File names and titles: they are not the same [TOP]
Right-click on "content2.htm" file in the Folder List and select "Rename".
Rename your file "content002.htm".
Right-click on your file in the Folder List and select "Properties ...".
Give your
file a meaningful title.
Copying [TOP]
Click on your file in the Folder List.
Select
Edit > Copy
or click on
then,
Select
Edit > Paste
or click on
.
You can rename the file if you wish.
Deleting [TOP]
Right-click on your copied file in the Folder List and select "Delete".
© Copyright 2009, Southeast Missouri
State University
Comments, suggestions, and questions regarding this site? E-mail Michael L.
Rodgers at
mrodgers@semo.edu or Kevin Dickson at kdickson@semo.edu
Last Updated:
05/20/09
Disclaimer