Web Page Design

1
Web Page Design
2
2 Tips for Web Design
1.
Always open the web design site with
Firefox. Open two tabs to work between.
(File---New Tab) One tab will be the admin
side where you edit your pages. Type in
--http//www.madisonvillecisd.org/cms Another
tab will be the live side to preview the
changes you make. Type in--http//www.madisonvill
ecisd.org
2.
3
This is the log in page. Use your complete email
address in the username. If you need password
help click on the Forgot Your Password link and
you will receive it via email.
4
This is the control panel page. By clicking on
the My Profile icon you may change your password,
set the secret question for password
retrieval, and update your user information.
Listed beneath the My Modules bar is the ISD
Admin icon used to access and edit your webpage.
5
By clicking on the Web Content Manager tab you
will see the categories listed from the MCISD
front page.
Beside each listing is a plus () button to
expand the category.
6
If you click on the plus() beside SCHOOLS you
will be able to find your campus. Continue
clicking the plus() buttons until you come to
your page.
7
For Example Susan Allen is a Kindergarten
teacher at the Elementary campus so she clicks
SCHOOLS ELEMENTARY KINDERGARTEN And finally she
clicks on her name, Allen, NOT the plus (), to
open and edit her web page.
8
and this is what she sees at the top of the
page.
It is an article.
Select Yes twice and add the publish date.
The title is Your Name and it is listed in the
menu as Your Name.
9
As you scroll down to the middle of the page you
will see the editing page which is very similar
to the previous version. It resembles the
Microsoft Word program so if you let your mouse
pointer hover over an icon it will be annotated,
rather, tell you its function.
undo
10
1.Click on the grey drop-down button .
2.and then on the toggle button, to make the
editing page larger.
11
Basic MCISD webpage
Welcome to my class!! 2008-2009 Miss Suzy Q 2nd
grade Conference hour 230-330 pm Lunch
1120-1155 Phone [phone] Email me I am a
graduate of Madisonville High School and Sam
Houston State University. I have taught 2nd
grade in Madisonville 4 years.
12
This is the bottom of the page where you can give
a brief page description and list keywords for
search engines to find your site. Remember,
the update button is very important. Instead of
waiting until you have completed all changes it
is a good practice to click the update button
periodically so you do not loose any of your hard
work. In place of the delete button we now have
an archive button.dont click it.dont ask!
Of course you can click cancel if you do not want
to make any changes OR, if you get in a big mess
and want to just start over on your page where
you were before the mess. just click on the
cancel button to back out and none of the changes
will take effect.
13
Now you can preview your changes by going to the
live MHS site. Be sure to click the refresh
button to reload the page so the changes will
take affect.
14
You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
15
How to make a link to your email address
16
Find your webpage and scroll down to the body or
editing page.
Then type the words you want to link your email
address to or just type your name.
17
2) Then click on the link icon that looks like a
globe with chain links under it.
1) Highlight just the text you want to use as the
link.
18
A window will open. Type in mailto with your
email address. No spaces. Then click OK.
19
You know your text is linked when it is blue and
underlined. Dont forget to click the update
button at the bottom of the page.
20
You can also confirm your link is correct by
clicking in the middle of the linked text.
A field opens with the link address displayed. It
can be edited here.
21
When you access the live site you can see the
link in blue and underlined. Also, when you move
your mouse over the link the address is shown in
the status bar.
22
When anyone clicks on the link a new email
message window opens, automatically adding your
email address in the correct field.
23
How to insert an image...
24
Find the icon that looks like a picture of the
sun and a mountain. Remember, you can let your
mouse pointer hover over the icons and an
annotated box opens up with the function
description. In this case the icon is for
inserting an image. Click on your page where you
would like the image to be placed. Also select
the position of the image (align left, centered,
aligned right, justify). Click the image icon
and another window opens.
Image will go here
image
25
There are several image folders. You can use any
image in any folder, but you will probably want
to use a folder from your area or school campus.
Click on the plus() beside schools and then
click on your campus for even more folders.
26
You may want to find just the perfect graphic to
add to your webpage. These sites are free and you
do not need permission from the site to use them.
Just right click and save the image in My
Documents or your desktop.
Free Clipart for Teachers http//www.teacherfiles
.com/index.htm http//office.microsoft.com/en-us/c
lipart/HA102379141033.aspx1 http//webtech.kennes
aw.edu/jcheek3/graphics.htm http//www.webcrawler.
com/webcrawler300/ws/results/Web/backtoschoolcl
ipart/1/417/TopNavigation/Relevance/iqtrue/zoom
off/_iceUrlFlag7?_IceUrltrue http//www.animatio
nfactory.com/en/animations.mc http//school.discov
eryeducation.com/clipart/ http//www.awesomeclipar
tforeducators.com/
27
Now when you click the graphic icon to insert a
picture you will need to browse to the image and
upload it to the folder on your campus, grade
level or subject area.
28
When you decide on the image to insert, click on
it to select that image and a bold line will
outline it.
Now you can click the insert button at the bottom
right corner
29
and the image will appear where you indicated.

You can use the little boxes around the outline
to resize the image by clicking on them and
dragging in or out.
30
Now dont forget to click on the update button at
the very bottom of the page to save the changes
you made.
31
You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
32
How to link to a document.
(Such as an assignment calendar, sports schedule,
vocabulary list, etc.)
33
Save the document you want to upload and link to
on your Desktop, My Documents, or wherever you
can find it.
34
Log in to http//www.madisonvillecisd.org/cms to
access your web site. Type the phrase or insert
the image you want to use as the link to the
uploaded form. In this case, we will use
Participation Request Form. Highlight it and
click the link to document icon at the top of the
page. It looks like the Microsoft Word Icon.
35
This will open another window. You will need to
upload the file/document you saved. Select the
folder on the left that you want to save the
file in. We will use the district programs
folder since that is the area the web page is
listed under.
Now click on the Browse button to find your file
to upload.
36
We saved the Participation Request Form in My
Documents so we begin there. Then look at all
the files that are listed alphabetically until
you find the file.
Click on it to select it and place it in the file
name field at the bottom of the window and then
click on Open.
37
Click Upload to add it to the district programs
folder. Select it by clicking and the bold
outline appears around the file.
38
Now you can click the Insert button to link the
words Participation Request Form to the actually
document.
39
If you want the document to open in a new window
instead of changing the one you are viewing, be
sure to click the target field drop down menu
arrow and select new window.
40
Remember to click on the update button at the
very bottom of the page to save all changes.
41
Go to the live MHS site, and click the refresh
button to reload the page.
Notice as you move your mouse over the linked
phrase it will indicate in the status bar at the
bottom of the window where the link will take
you. Click on the phrase to open the document
you uploaded.
42
You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
43
How to link to another web page.
44
After you navigate to your webpage, add the text
or image you want to use as the link.
45
Open another window or tab and navigate to the
website you want to make a link to. Highlight the
URL address and copy it.
Edit Copy
46
Open the editing window or tab.
Highlight the linking text or image, then click
on the link icon that looks like a globe and
chain. Click only on the picture not the drop
down arrow.
47
Edit Paste
Another window will open. Paste the URL Address
of the site you are linking to in the field. Then
click OK.
48
If you want the site to open in another window,
select new window in the Target field.
You will see the Link Properties box open with
the link address.
Remember to click on the update button at the
very bottom of the page to save all changes.
49
You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
50
Additional support can be found online
at http//support.smartisd.com