Title: Web Page Design
1Web Page Design
22 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.
3This 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.
4This 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.
5By 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.
6If 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.
7For 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.
9As 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
101.Click on the grey drop-down button .
2.and then on the toggle button, to make the
editing page larger.
11Basic MCISD webpage
Welcome to my class!! 2008-2009 Miss Suzy Q 2nd
grade Conference hour 230-330 pm Lunch
1120-1155 Phone 936-348-2261 Email me I am a
graduate of Madisonville High School and Sam
Houston State University. I have taught 2nd
grade in Madisonville 4 years.
12This 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.
13Now 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.
14You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
15How 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.
172) 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.
18A window will open. Type in mailto with your
email address. No spaces. Then click OK.
19You know your text is linked when it is blue and
underlined. Dont forget to click the update
button at the bottom of the page.
20You 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.
21When 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.
22When anyone clicks on the link a new email
message window opens, automatically adding your
email address in the correct field.
23How to insert an image...
24Find 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
25There 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.
26You 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/
27Now 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.
28When 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.
30Now dont forget to click on the update button at
the very bottom of the page to save the changes
you made.
31You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
32How to link to a document.
(Such as an assignment calendar, sports schedule,
vocabulary list, etc.)
33Save the document you want to upload and link to
on your Desktop, My Documents, or wherever you
can find it.
34Log 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.
35This 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.
36We 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.
37Click Upload to add it to the district programs
folder. Select it by clicking and the bold
outline appears around the file.
38Now you can click the Insert button to link the
words Participation Request Form to the actually
document.
39If 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.
40Remember to click on the update button at the
very bottom of the page to save all changes.
41Go 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.
42You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
43How to link to another web page.
44After you navigate to your webpage, add the text
or image you want to use as the link.
45Open 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
46Open 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.
47Edit Paste
Another window will open. Paste the URL Address
of the site you are linking to in the field. Then
click OK.
48If 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.
49You will see the successfully updated message.
And finally, log out of the admin/editing page
when you have made all changes.
50Additional support can be found online
at http//support.smartisd.com