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


  • 119 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

Designing ePortfolio Website( Part 2 )

Lan Vu


Overview

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

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 website1

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 website2

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 website3

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 website4

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

Some examples

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


What is website

What is Website ?


What is website1

What is Website ?

  • It is a collection of

    • Web pages


What is website2

What is Website ?

  • It is a collection of

    • Web pages

    • Images


What is website3

What is Website ?

  • It is a collection of

    • Web pages

    • Images

    • Videos


What is website4

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

How does it work?


Web page

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 using html format

Create a web page usingHTML format


Html web page

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

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

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 page1

Planning your web page


Hypertext markup language html

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

Most basic HTML document elements

<html>

<head>

<title>Page Title</title>

</head>

<body>

</body>

</html>


Example simple html code

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

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

Paragraphs

  • Tag: <p></p>

  • Used to define paragraphs

  • Example


Ordered numbered lists

Ordered (Numbered) Lists

  • Tag:

    <ol>

    <li>…

    <li>…

    </ol>

    Example:


Unordered lists

Unordered Lists

  • Tag:

    <ul>

    <li>…

    <li>…

    </ul>

    Example:


Horizontal line

Horizontal Line

  • Tag: <hr>

    Example:


Some text format tags

Some Text Format Tags

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


Table

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


Table1

Table


Image

Image

  • Tag: <imgsrc="url" />

    • url = link to the image file

  • Example


Image1

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


Designing eportfolio website part 2

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


Designing eportfolio website part 2

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 website with multi web pages

Building your websitewith multi web pages


Decide your website structure

Decide Your website structure

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


Decide your website structure1

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 structure2

Decide Your website structure

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


Decide your website structure3

Decide Your website structure

  • A webbed Web site structure has no set organization


Create your website content

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

Link your web pages as expected structure


Practising

PRACTISING


Using visual studio 2008 for designing

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 designing1

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 designing2

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 designing3

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 designing4

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

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

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

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