1 / 53

Designing ePortfolio Website ( Part 2 )

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

sissy
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Designing ePortfolio Website( Part 2 ) Lan Vu

  2. Overview • Basic concepts about website • Create a web page using HTML format • Building your website with multi web pages • Practicing

  3. The importance of a personal Website • A widow to the world • Your ID on Net • A mirror of yourself • Being on the Net

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

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

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

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

  8. Some examples http://www.eecs.berkeley.edu/GradAffairs/gradhomepages.shtml

  9. What is Website ?

  10. What is Website ? • It is a collection of • Web pages

  11. What is Website ? • It is a collection of • Web pages • Images

  12. What is Website ? • It is a collection of • Web pages • Images • Videos

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

  14. How does it work?

  15. 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)

  16. Create a web page usingHTML format

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

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

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

  20. Planning your web page

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

  22. Most basic HTML document elements <html> <head> <title>Page Title</title> </head> <body> </body> </html>

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

  24. Headings • Tags: <h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> , <h6></h6> • Show texts in heading formatting, usually used for titles • Example

  25. Paragraphs • Tag: <p></p> • Used to define paragraphs • Example

  26. Ordered (Numbered) Lists • Tag: <ol> <li>… <li>… … </ol> Example:

  27. Unordered Lists • Tag: <ul> <li>… <li>… … </ul> Example:

  28. Horizontal Line • Tag: <hr> Example:

  29. Some Text Format Tags • Example: <b><i><u>Hello</u></i></b> Hello

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

  31. Table

  32. Image • Tag: <imgsrc="url" /> • url = link to the image file • Example

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

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

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

  36. Building your websitewith multi web pages

  37. Decide Your website structure • A hierarchical Web site structure connects Web pages in a tree-like structure

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

  39. Decide Your website structure • A linear Web site structure connects Web pages in a straight line

  40. Decide Your website structure • A webbed Web site structure has no set organization

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

  42. Link your web pages as expected structure

  43. PRACTISING

  44. Using Visual Studio 2008 for Designing • Add Table • Select menu Table  Insert Table • Specify number Rows, Columns & some other attributes • Click OK

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

  46. 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)

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

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

More Related