designing eportfolio website part 2
Download
Skip this Video
Download Presentation
Designing ePortfolio Website ( Part 2 )

Loading in 2 Seconds...

play fullscreen
1 / 53

Designing ePortfolio Website ( Part 2 ) - PowerPoint PPT Presentation


  • 149 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Designing ePortfolio Website ( Part 2 )' - sissy


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

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

slide34
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
slide35
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>

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
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
ad