07/04/22 07/04/22 1 WEBSITE CREATION WEBSITE CREATION DOING IT MANUALLY DOING IT MANUALLY
12/15/20151 WEBSITE CREATION DOING IT MANUALLY. 12/15/20152 PURPOSE of WEBSITE To give colleagues and prospective employers some information about your.
Jan 17, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
04/21/2304/21/23 11
WEBSITE WEBSITE CREATIONCREATION
DOING IT MANUALLYDOING IT MANUALLY
04/21/2304/21/23 22
PURPOSE of WEBSITEPURPOSE of WEBSITE
• To give colleagues and prospective employers some information about your background
• To demonstrate your personality and interests
04/21/2304/21/23 33
PARTSPARTS
• Three main types of information– Educational: 393 materials--
PowerPoint's (oral and process), class notes, link to Blackboard
– Professional: links to employers, examples of abilities
– Personal: autobiographical sketch, mailto link, pictures (optional)
04/21/2304/21/23 44
THE HEADTHE HEAD
• First part of document • Title appears in title bar, not on
page• Meta tags also belong in this section.
04/21/2304/21/23 55
THE BODYTHE BODY
• Main part of document: paragraphs of text, list of links, graphics, etc.
04/21/2304/21/23 66
SITE REQUIREMENTSSITE REQUIREMENTS
• Opening banner, logo, or graphic (UMBC logo)
• No reliance on defaults or on my choices (colors, fonts)
• Compatible colors for backgrounds/wallpaper text, and links
• Navigational aids on each page• Last updated footer• Link to UMBC page
04/21/2304/21/23 77
TEMPLATE TEMPLATE
• Open Notepad (NOT WORDPAD) to have mouse abilities.
• Type <html> and press ENTER. • Type <head> and press ENTER.• Type <title> MY PAGE </title> and press
ENTER.• Type </head> and press ENTER.• Type <body bgcolor = "tan" text = "#0000ff"
link = "coral2" vlink = "#808000”> and press ENTER.
• Type <font face = “Comic Sans MS”> and press ENTER.
04/21/2304/21/23 88
TEMPLATE 2TEMPLATE 2
– Type </font> and press ENTER. – Type</body> and press ENTER. – Type </html> and press ENTER. – Save as “template.html” including
quotation marks. Save to both the W drive (www directory/folder) and to portable storage medium. If your computer doesn’t have the www directory mapped, save to your desktop.
04/21/2304/21/23 99
INDEX.HTMLINDEX.HTML
Place cursor at end of line <font face> and press ENTER.
Type <img src = “umbclogo.gif"> and press ENTER. – Type <h1>My Page </h1>– Type <ul> and press ENTER.
04/21/2304/21/23 1010
INDEX.HTML 2INDEX.HTML 2
– Type <li><a href=“education.html”>Education </a>
– <li><a href=“job.html”> Profession</a>– <li><a href=“personal.html”> Personal
Page </a>– Type <li><a
href=“http://www.umbc.edu/”>UMBC Home Page </a>
– Type </ul>– Save file as “index.html” to both the W drive
and to an A drive floppy/data CD.
04/21/2304/21/23 1111
EDUCATION PAGEEDUCATION PAGE
• Open template.html• Replace the title “MY PAGE” with
“Education.”• On line below <font face>, type <h2>
English 393 </h2> and press ENTER. • Type <h3> Course Materials </h3>
and press ENTER. • Type <ul> to begin a bulleted list and
press ENTER.
04/21/2304/21/23 1212
EDUCATION PAGE 2EDUCATION PAGE 2
• Type <li><a href="notes.html"> date when you are to take the class notes </a> and press ENTER.
• Type <li><a href="orals.ppt"> article title in quotes </a> and press ENTER.
• Type <li><a href=“http://blackboard.umbc.edu"> Blackboard Login</a> and press ENTER.
• Include links to other courses and organizations/activities at UMBC with web sites.
• Type </ul> to end the list.• Save as “education.html” to W and A drives.
04/21/2304/21/23 1313
Professional PageProfessional Page
• Open template.html• Replace the title “MY PAGE” with “My
Profession” (or a title you prefer).• <h3> My Career Plans</h3> Write a career
autobiographical sketch beneath this heading. Use the <p> tag to start a paragraph.
• You may link to your current job, if it has a website; you may present examples of your abilities. Remember that the audience that views this page may include prospective employers.
• Save the file as “job.html” so that the link you’ve already created will work.
04/21/2304/21/23 1414
Personal PagePersonal Page
• Open template.html• Replace the title “MY PAGE” with “All about
Me” (or a title you prefer).• <h3>My Life </h3> Write your personal
autobiographical sketch beneath this heading. Add links to friends’ websites, tasteful photos of family and friends, etc. The autobiographical sketch is mandatory; everything else you place on this page is optional.
• Save the file as “personal.html.”
04/21/2304/21/23 1515
NAVIGATIONNAVIGATION
• Visitors must get from one page to every other page on your website.
• Navigational aids must appear on each page either horizontally or vertically.
• Open education.html. Place cursor at end of line </ul> and press ENTER.
04/21/2304/21/23 1616
NAVIGATION 2NAVIGATION 2
• Type <table border> and press ENTER.
• Type <th><a href =“index.html”>Home Page</a>
• <th> <a href =“job.html”> Profession </a>
• <th> <a href =“personal.html”> Personal Page </a> </tr> and press ENTER.
• Type </table> and press ENTER
04/21/2304/21/23 1717
NAVIGATION 3NAVIGATION 3
• Save file to w drive (www directory/folder), the desktop, or a portable storage medium.
• Use “Save As” so you can check that the file has the correct filename.
• Create a bar on the professional and personal pages.
• When using this navigation bar on other pages, be sure to remove the link to the page you’re on. (There’s no education link because we put the bar on the education page.)
04/21/2304/21/23 1818
IMAGESIMAGES
• Banners, logos, pictures, Clip Art, and animations belong in this category.
• Campus requirement: including the UMBC logo from the campus style guide.
• Loading time should be short
04/21/2304/21/23 1919
UMBC LOGOUMBC LOGO
• Go to http://www.umbc.edu/
umbcstyle/wordmarks.htmlto find examples of UMBC logos.
• Place your cursor on the image of your choice, and click the right mouse button.
• Select "save image as” (Firefox) or “save picture as” (Explorer) and left click.
• Name the image (umbclogo.gif) and save it in W drive.
04/21/2304/21/23 2020
MAILTO LINKMAILTO LINK
• Type these tags to place the mailbox image and mailto link on your page.
– <img src = “maileyes.gif "> <a href ="mailto:[email protected]">your name </A>
– You can go to my home page and download my animated frog email image.
04/21/2304/21/23 2121
UMBC HELPUMBC HELP
• http://www.umbc.edu/umbcstyle/web/
• Templates as well as html guides and tutorials are found here.
04/21/2304/21/23 2222
VIEW YOUR PAGEVIEW YOUR PAGE
• Open a browser.• Type your URL in the location box:
http://userpages.umbc.edu/~username/• When working on your site, keep browser
open so you can check your work.• If page doesn’t work properly, first look
for typos in html. Then call for the consultant if you can’t find problem.
Related Documents
