Designing eportfolio website part 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 53

Designing ePortfolio Website ( Part 2 ) PowerPoint PPT Presentation


  • 123 Views
  • Uploaded on
  • Presentation posted in: General

Designing ePortfolio Website ( Part 2 ). Lan Vu. Overview. Basic concepts about website Create a web page using HTML format Building your website with multi web pages Practicing. The importance of a personal Website. A widow to the world Your ID on Net A mirror of yourself

Download Presentation

Designing ePortfolio Website ( Part 2 )

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Designing ePortfolio Website( Part 2 )

Lan Vu


Overview

  • Basic concepts about website

  • Create a web page using HTML format

  • Building your website with multi web pages

  • Practicing


The importance of a personal Website

  • A widow to the world

  • Your ID on Net

  • A mirror of yourself

  • Being on the Net


The importance of a personal Website

  • A widow to the world

    • Your personal Website is your cover letter.

    • They are an open window from which the rest of the world can see and learn about yourself, your activities, your research, your team, your characteristics…

  • Your ID on Net

  • A mirror of yourself

  • Being on the Net


The importance of a personal Website

  • A widow to the world

  • Your ID on Net

    • You need to include in your Website all the basic professional information any person would like to know about yourself, your department or group and the university in which you work if he or she needs this information.

  • A mirror of yourself

  • Being on the Net


The importance of a personal Website

  • A widow to the world

  • Your ID on Net

  • A mirror of yourself

    • A Website says a lot about its author: a complete and well-crafted site shows that the creator is responsible and professional.

    • On the other hand, a forgotten, out-of-date and awful Website, shows the contrary.

  • Being on the Net


The importance of a personal Website

  • A widow to the world

  • Your ID on Net

  • A mirror of yourself

  • Being on the Net

    • Having a Website (and/or blog) is the best possible way of being on the Internet with a leading digital presence.

    • A good site will be linked and the scientific community will notice this.


Some examples

http://www.eecs.berkeley.edu/GradAffairs/gradhomepages.shtml


What is Website ?


What is Website ?

  • It is a collection of

    • Web pages


What is Website ?

  • It is a collection of

    • Web pages

    • Images


What is Website ?

  • It is a collection of

    • Web pages

    • Images

    • Videos


What is Website ?

  • It is a collection of

    • Web pages

    • Images

    • Videos

    • Other digital assets

Example: http://www.eecs.berkeley.edu/~bouchard/

Music

*.pdf

*.doc, *.docx

*.ppt, *.pptx

Game

Databases


How does it work?


Web page

  • Website is a collection of Web pages

  • A Web page is a document on World Wide Web

  • Web page is usually in HTML or XHTML format

  • Every Web page is identified by a unique URL (link)

  • It can be accessed through a web browser (Internet Explorer , Fire fox)


Create a web page usingHTML format


HTML web page

  • A HTML web page is a text file written in a language called Hypertext Markup Language (HTML)

  • File extension is *.html or *.htm

    • Ex: mypage.html, bio.htm

      index.html , index.htm (default page)

  • Viewed by using web browsers

    • Internet Explorer, Fire Fox, Opera, Safari


Tools for Creating HTML Files

  • Basic text editor

    • Notepad, WordPad

    • Knowledge about HTML is required

  • Use web design tools

    • MS Front Page, Visual Studio 2005, Visual Studio 2008

    • Not require to know about HTML

    • Allow you to set up a Web page quickly


Planning your web page

  • It is a good idea to plan out a Web page before you start coding.

  • Draw a planning sketch or create a sample document using a word processor.

  • Preparatory work can weed out errors or point to potential problems.


Planning your web page


Hypertext Markup Language (HTML)

  • HTML stands for Hyper Text Markup Language

  • It is a language for describing web pages.

  • HTML is not a programming language, it is a markup language

  • A markup language is a set of markup tags

  • HTML uses markup tags to describe web pages

  • HTML Documents/Files = Web Pages


Most basic HTML document elements

<html>

<head>

<title>Page Title</title>

</head>

<body>

</body>

</html>


Example simple HTML code

<html>

<head>

<title>My website</title>

</head>

<body>

<h1>Welcome to my website</h1>

<p>I am a student of University of Colorado Denver</p>

</body>

</html>


Headings

  • Tags: <h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> , <h6></h6>

  • Show texts in heading formatting, usually used for titles

  • Example


Paragraphs

  • Tag: <p></p>

  • Used to define paragraphs

  • Example


Ordered (Numbered) Lists

  • Tag:

    <ol>

    <li>…

    <li>…

    </ol>

    Example:


Unordered Lists

  • Tag:

    <ul>

    <li>…

    <li>…

    </ul>

    Example:


Horizontal Line

  • Tag: <hr>

    Example:


Some Text Format Tags

  • Example: <b><i><u>Hello</u></i></b> Hello


Table

  • Tags:<table></table>

  • Sub tags: <tr></tr>, <td> </td>, <th></th>

  • Attributes: border, height, width

  • Tables are the most complex visual structure in HTML

    • table : represents a table as a sequence of rows

    • tr : represents a table row as a sequence of cells

    • td : represents a table cell containing table data

    • th : is a special cell containing header data

  • Example:

    • Table with 1 column and 2 rows


Table


Image

  • Tag: <imgsrc="url" />

    • url = link to the image file

  • Example


Image

  • Images must use a format supported by the browser

    • GIF, JPEG, and PNG are pretty safe choices

  • Some attributes

    • alt : contains a short description of the image

    • width : specify the width of the image

    • height : specify the height of the image

      <imgsrc = “myphoto.jpg" width ="200" height ="200" alt = “My photo”/>


Link

  • Links are the most important feature of the Web conceptually

  • It is used for connection between web pages of a website or between websites

  • Tags: <a href=“url” > </ a>

    • url = link to other web page


Link

  • Examples:

    • Link to pages of same website

      <a href=“project.html” > Project</a>

      <a href=“course/CSC5551.html” >CSC5551 </a>

      Link to pages of different websites

      <a href=“http://ouray.cudenver.edu/~abc/project.html” > Project</a>

      <a href=“http://ouray.cudenver.edu/~abc/resume.pdf” > Resume</a>

      Image Link:

      <a href=“mypage.html” > <imgsrc = “image.jpg" /></a>


Building your websitewith multi web pages


Decide Your website structure

  • A hierarchical Web site structure connects Web pages in a tree-like structure


Decide Your website structure

  • A broad Web site is one in which the home page is the main index page, and all other Web pages are linked individually to the home page


Decide Your website structure

  • A linear Web site structure connects Web pages in a straight line


Decide Your website structure

  • A webbed Web site structure has no set organization


Create Your Website Content

  • One homepage

    • Index.html , index.htm

  • Many sub-pages

    • *.hml, *.htm

    • Each file is about one topic of your portfolio such as project, research, course work…

  • Image files

    • Your photo, image for decorating your page

  • Some other resource files

    • *.pdf, *.ppt , etc…

    • Your presentation, resume


Link your web pages as expected structure


PRACTISING


Using Visual Studio 2008 for Designing

  • Add Table

    • Select menu Table  Insert Table

    • Specify number Rows, Columns & some other attributes

    • Click OK


Using Visual Studio 2008 for Designing

Add Image :

  • Open your portfolio file: File  Open  File

  • Select design mode for opening file

  • Open Toolbox : View  Toolbox


Using Visual Studio 2008 for Designing

  • Select Image in Toolbox and them drag-drop it in the place you want to put your photo. An Img icon will appear on your document

  • Right-click on the Img item and choose Properties

  • Set following properties

    Scr : filename of the image (*.bmp, *.jpg, *.gif ) (required)

    Height / Width: size of the image (optional)


Using Visual Studio 2008 for Designing

  • Add Link

    • Select text and image on the page you want to create link

    • Select menu Format  Convert Hyperlink

    • Enter the target link in the URL box of Hyperlink dialog

    • Click OK


Using Visual Studio 2008 for Designing

  • Add Link

    • Select text and image on the page you want to create link

    • Select menu Format  Convert Hyperlink

    • Specify number Rows, Columns &

      some other attributes

    • Click OK


Designing your website

  • Developing your website with at least four pages

  • One Homepage:

    • Your photo

    • Your personal information with related links

    • Some statements introducing yourself, your interests, your hobbies…

  • At lease three sub pages link to home page

    • Each page is a sub topic of your portfolio


Some example links

  • http://www.eecs.berkeley.edu/~daib/

  • http://www.eecs.berkeley.edu/~bouchard/

  • http://www.eecs.berkeley.edu/~palvaro/

  • http://www.cs.berkeley.edu/~galtekar/


References

  • http://dret.net/lectures/web-spring09/2009-01-28-html.pdf

  • ttp://www.coastline.edu/departments/webservices/cis111/week2/html.pdf

  • Riyadh, How to create better departmental and researchers websites, Workshop Best Practices in Content Management and Scientific Social Networks, 1 – 3 November 2008


  • Login