Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Homepage 1

    Încărcat de

    fa2heem
    17 vizualizări22 pagini
    Homepage 1

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Homepage 1

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    17 vizualizări22 pagini

    Homepage 1

    Încărcat de

    fa2heem
    Homepage 1

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 22

    WEBSITE

    CREATION
    DOING IT MANUALLY

    04/21/16

    PURPOSE of WEBSITE
    To give colleagues and prospective
    employers some information about
    your background
    To demonstrate your personality and
    interests

    04/21/16

    PARTS
    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/16

    THE HEAD
    First part of document
    Title appears in title bar, not on page
    Meta tags also belong in this section.

    04/21/16

    THE BODY
    Main part of document: paragraphs
    of text, list of links, graphics, etc.

    04/21/16

    SITE 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/16

    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/16

    TEMPLATE 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 doesnt
    have the www directory mapped, save to
    your desktop.
    04/21/16

    INDEX.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/16

    INDEX.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/16

    10

    EDUCATION 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/16

    11

    EDUCATION 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/16

    12

    Professional 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
    youve already created will work.
    04/21/16

    13

    Personal 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/16

    14

    NAVIGATION
    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/16

    15

    NAVIGATION 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/16

    16

    NAVIGATION 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
    youre on. (Theres no education link because
    we put the bar on the education page.)
    04/21/16

    17

    IMAGES
    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/16

    18

    UMBC LOGO
    Go to
    http://
    www.umbc.edu/umbcstyle/w
    ordmarks.html
    to 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/16

    19

    MAILTO LINK
    Type these tags to place the mailbox
    image and mailto link on your page.

    <img src = maileyes.gif "> <a href


    ="mailto:username@umbc.edu">your
    name </A>
    You can go to my home page and
    download my animated frog email image.
    04/21/16

    20

    UMBC HELP
    http://www.umbc.edu/umbcstyle/web
    /
    Templates as well as html guides and
    tutorials are found here.

    04/21/16

    21

    VIEW 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 doesnt work properly, first look
    for typos in html. Then call for the
    consultant if you cant find problem.
    04/21/16

    22

    S-ar putea să vă placă și