網頁程式設計
•
1 like•1,088 views
This document provides an overview of web design and programming. It discusses HTML, CSS, JavaScript, and other technologies used to build websites. HTML defines the structure and layout of webpages, CSS controls the styling and presentation, and JavaScript adds interactivity. Additional topics covered include DOM manipulation with JavaScript, jQuery to simplify JavaScript coding, HTML5 features, AJAX for asynchronous data loading, and development environments for building and hosting websites.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 網頁程式設計
Similar to 網頁程式設計 (20)
網頁程式設計
- 2. OUTLINE ! ! • HTML! • CSS! • Javascript! • Develop Environment
- 4. HTML 4
- 5. HTML • HyperText Markup Languages! • HyperText(超⽂文字)：! • Contains images, videos, links to other documents! • Markup Languages(標⽰示語⾔言)：! • Defines how to mark things 5
- 6. HTML • A pure text file! • Divided in two types：! 1. tag：to mark something up! 2. text：words seen in website! • EX:<b>在’b’內的⽂文字會變粗體字</b> • b: tag 6
- 7. Tag(markup) • General! • <b><i>bold & italic</i></b> • <b><i>ERROR</b></i> • Link tag! • <a href=“http://xxxxxx/”>超連結名稱</a>! • href is an attribute of <a> 7
- 8. Attribute(屬性) ! • Consider tag as a type! • Phone and camera are two types of things.! • Attribute is like specification.! • Two phones could have different resolutions. ! • One tag has various attributes.! • <a target=“_blank" title="hello"> 8
- 10. Head/Body • In General, we divide website into head, body.! • Head : Mostly, it contains web’s information that can’t be seen in website. (title,language) • Body : We usually put web’s content here.! • <div id=“header”> : On the top of the website! • logo, login, manu bar! • <div id=“wrapper”> : content! • <div id=“footer”> : All Rights Reserved. 10
- 11. URL • Uniform Resource Locators(資源定位器)! • http://merry.ee.ncku.edu.tw/~legendd/final/(index.html)! • index.htm or index.html ! • Protocol : http://、ftp://、telnet://、https://…! • Machine : merry.ee.ncku.tw、140.116.165.74! • File path : /~legend/index.html 、/login.php 11
- 12. Don’t memorize them. (You’ll memorize some when time goes by) 12
- 13. Keep in mind • HTML is plaintext containing real content and corresponding tags and attributes.! • You can create it in any text editor! • Ex: Notepad++、Sublime Text、vim…! • To develop a website ,it’s not programming but designing.! • You must know tags and attributes which are in need.! • Check query 13
- 14. CSS
- 15. CSS ! • Cascading Style Sheet(串接／階層 樣式表)! • Sheet! • list! • Style! • how to design elements! • Cascading! • CSS selector! • Can inherit style from its parent 15
- 16. HTML in website What can css do?16
- 17. 17
- 18. Css can do… • Almost everything. ! • background color, border, font, margin……! • All you need to do is to arrange elements in the right place.! • The importance of web design. 18
- 19. Don’t memorize them.(again) (You’ll memorize some when time goes by)(again) 19
- 21. Keep in mind • To connect HTML & CSS:! • Add <link href=“demo.css” rel=“stylesheet” /> ! • CSS enriches HTML’s life! • Make good use of MDN_CSS & css-tutorial! • CSS3?! • The Most Important CSS3 Properties Explained! • A world About CSS4 21
- 22. Javascript
- 24. Javascript • Have nothing to do with JAVA!! • script language! • Executed by browser! • No internet connection is required! • About its history! • Code Rush: Netscape Mozilla紀錄⽚片 1998-2000! • 網路演進! • List of languages that compile to JS 24
- 25. DOM • Document Object Model! • DOM、About DOM! • An interface for HTML/XML documents.! • Browser will build DOM tree, which can be thought of as a data structure to display html.! • Also convenient for javascript to operate! • Object the docs >> easy for programmers to understand 25
- 26. Method of JS(DOM) • document.getelementById(‘foo’).value=‘bar’! • document is an object of DOM! • getelementById is a method, return a DOM object! • value is an attribute of an input object! • #foo is an input id! • references 26
- 27. Method of JS(function) function getElementsByClass( searchClass, domNode, tagName) { ! ! if (domNode == null) domNode = document;! ! if (tagName == null) tagName = '*';! ! var el = new Array();! ! var tags = domNode.getElementsByTagName(tagName);! ! var tcl = " "+searchClass+" ";! ! for(i=0,j=0; i<tags.length; i++) { ! ! ! var test = " " + tags[i].className + " ";! ! ! if (test.indexOf(tcl) != -1) ! ! ! ! el[j++] = tags[i];! ! } ! getElementByClass 27
- 28. 28
- 29. jQuery! A better and smarter way to use javascript 29
- 30. jQuery • A javascript library (module)! • because everyone use it, it became a library! • Cross-platform! • Easy to use and understand it! • jQuery(‘.foo’).val(‘bar’);! • jQuery API 30
- 31. More powerful • More advanced functions and animations! • jQuery(‘.foo’).animate({! ! ! ! ! ‘margin-left’:’100px’,! ! ! ! }, 2000, function(){! ! ! ! ! //animation completed! ! ! ! }); 31
- 32. Event • Event-driven programming! • EX: click a button cause web transitions ! • jQuery(‘#foo’).click.(function(){…..});! • consider <#foo> as a button! • click is an event (click_API)! • function(){…} is an anonymous function that will be used very often in web programming. 32
- 33. References • JavaScript Garden! • Learn jQuery and JavsScript for free! • 那些 Functional Programming 教我的事! • anonymous function, closure, callback function! • widely used 33
- 34. Make your website dynamic! 34
- 35. In Our Case • What effect do you want?! • waterfall-Masonry! • fancyBox! • Downloading jQuery packages and knowing how to modify the parameters will be OK 35
- 37. HTML5 • Generally, it contains HTML, CSS, JavaScript! • Specifically, HTML5 adds many new syntactic features, including <video>, <audio>,<canvas>…! • friendly in media and image! • (JS+Canvas)《》(FLASH) war! • Noticed that animations are build by JS and CSS but HTML5.! • delete some elements(Use CSS instead.)! • Besides DOM interface, it has more APIs! • Canvas API, History management…… 37
- 38. AJAX • Asynchronous JavaScript and XML! • XML (eXtensible): Can customize tags. Mostly used in transferring data between web/docs! • Ajax just updates a little part of web! • Microsoft first proposed this innovation(from existing technologies)! • Gmail made it real and popular. (history of gmail)! • Advantage : speed(maintain data without updating the whole web)! • Disadvantage : Previous page?! • Solution : iframe(內嵌網⾴頁) or CSS+JS skills
- 39. Web Example GoHome! From Social Web Design Course 39
- 41. Windows/OSX • Download PieTTY and login! • Use SSH(Secure Shell) , like BBS client! • A remote desktop of Linux(Server)! • Make a directory(folder) to store your website! • $ mkdir legend /* create a directory */! • $ cd legend/ /* entering to this dir. */! • Starting to write a HTML file! • $ vi index.html /* create a file named <index.html> */! • You can also use Filezilla to connect to FTP/Server. 41
- 42. Linux/OSX • Linux:Get used to it !! • OSX : Some useful commands! • Connect to server by ssh! • $ ssh legendd@merry.ee.ncku.tw ! • download file from remote server to local computer(keyword : ssh remote)! • $ scp -r legendd@merry.ee.ncku.edu.tw:/home/swd/ legendd/public_html/OAuth2/ /Users/legendshiao/Desktop/ 42
- 43. 43
- 44. Keep in mind • Connect to CSS file:! • <link href="index.css" rel="stylesheet" />! • make sure <index.css> file is in the same directory! • Connect to JavaScript file! • <script type="text/javascript" src=“…”></script>! • Importance of references 44