1 / 34

Website Design 102

Develop advanced code to impress intergalactic alien beings and prove your skills as a hotshot programmer worthy of trading code. Learn advanced programming techniques and explore inspirational websites to enhance your design skills.

vwatson
Download Presentation

Website Design 102

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. Website Design 102 Advanced Design Using HTML, CSS & Javascript!

  2. Overview • You have impressed the galaxy with your programming so pat yourself on the back. You have done well with html and tables, but I wouldn’t relax just yet...

  3. The Problem • The aliens that were scanning the universe for signs of intelligent life have found our websites and made contact! • They have decided we are advanced enough to spare but they want to trade code with us! We fear our code will not impress on closer inspection. GULP!

  4. The Mission • Develop advanced code to prove we are hotshot programmers and worthy of trading with the intergalactic, unforgiving, alien beings from another planet! Spongebob Squarepants website - Nickelodeon

  5. Skills You will Aquire! • PowerPoint Guru • Problem Solver • Master Designer • Modular Constructor • Hot Shot Programmer • Celebrity Presenter

  6. Hall of Fame

  7. Research Look up way cool websites that inspire you! We’ll teach you the next level of programming to help you achieve the skills of the programming hotshots and elite coders!

  8. Internet Components Review Routers & Switches Routers & Switches Your local Internet Service Provider Website Internet Service Provider Website Host Server You, Client Domain Name Server Route Server I N T E R N E T B A C K B O N E When the Website Internet Service Provider gets a Web page request, it sends back all the information necessary to display that Web page to the IP address associated with your client computer.

  9. Internet Speed Review 4/10ths of a second … time to blink your eye. 3/10ths of a second … time to send a signal from Boston to China and back.

  10. Web Design HTML, CSS & Java code Browser Web Page <html> <body bgcolor=gray> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg“ border=1> </center> </body> </html>

  11. HTML Source Code Body Section Indent your code so it can be read and edited easily. <body bgcolor=“gray”> <center> <font size=“6” color=“purple” face=“arial”> Hot Shot Web Designer </font> <img src=“images/turnip-head.jpg” border=1> </center> </body> RGB (Red Green Blue) 000000 FFFFFF – WHITE FF0000 - RED

  12. Web Design Bad HTML code Good HTML code <html><head><title> Hot Shot Web Designers </title><meta name=“keywords” content=hot shots, smarties, your name> <meta name= “description” content=Best Web designers on the planet!></head> <body bgcolor=gray><!-- The Title Section Starts Here --><center> <font size=6 color=purple face=arial>Hot Shot Web Designer<p></font><imgsrc="images/head-turnip.jpg" border=1 width="250" height="367"></center></body></html> <html> <head> <title> Hot Shot Web Designers </title> <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!> </head> <body bgcolor=gray> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg" border=1> </center> </body> </html>

  13. View Source Code / Save As / Edit 1 Find a Web page you like. 2 View ‘Source’ COPY all source code to a text editor (Notepad or Mac Text Edit). 3 Save as ‘name-description.html’ in your folder in the folder ‘My Documents’ My Documents/john/john-turnip-head.html Create a sub-folder called ‘images’ and save your favorite pictures in this folder. To get pictures (JPG’s or GIF’s) from the Web, search Google Images. Right click (or CTRL click on Mac’s) on a picture and save the image to you images folder. 4 5 Edit the tags, text and image names. Then save the html file. Navigate to your file and open with a web browser. Click on ‘Refresh’ after an edit is made and saved. 6

  14. Set up your work folders. Never leave your files on the desktop. Files left on the desktop will get deleted. Desktop documents C: or Hard Drive yourname-lab-book.ppt yourname-web-page.html your name cat.jpg ball.gif song.wav movie.wmv images

  15. File Naming Rules

  16. Internet Definitions Internet The name given to the collective electronic network of computers and computer networks which are inter-connected throughout the world. Like a network of highways. WorldWideWeb – WWW The name given to the collection of computers which serve information in hypertext format to the INTERNET Like the US Post Office that uses the network of highways to deliver letters based on ZIP codes.

  17. Internet Definitions Server A server is a computer that controls information on a network. Domain Name Server Translates a Web address like www.hotshot.com to an IP address like 231.987.520.52

  18. Internet Definitions Client Dial Up / DSL / Cable / T1 transmission speed ISP (Internet Service Provider) Domain Name Servers IP address (Intrnet Protocol) Routers / Switches Server TCP/IP (Transmission Control Protocol / Internet Protocol) FTP (File Transfer Protocol)

  19. Internet Definitions HTML - Hyper Text Markup Language the text markup language used to insert tags which allow a Web browser to correctly display a hyper-text document. <font color = “red”> Title </font> How many HTML commands are there? Web Browser (What are 2 popular browsers?) Application that converts HTML to a screen display

  20. Internet Definitions CSS - Cascading Style Sheets CSS stands for Cascading Style Sheets. It describes how HTML elements are displayed in web browsers. It saves you much work and prevents headaches .It controls the layout of multiple web pages all at once using external stylesheets that are stored in CSS files! CSS Selectors There are two main selectors we will cover in detail – the class and id selectors. An id is unique and can only be used once on a single occurance of an element. A class is universal and can be applied to as many elements as you would like.

  21. Internet Definitions Javascript and jQuery Javascript is an object-oriented library of modular code used to create interactive sites! Jquery simplifies JavaScript by giving developers a library of functional building blocks. Actions Java uses functions when pages finish loading, buttons are clicked, after a delay and many other user defined situations. Typically elements in a page are modified dymanically which cannot be done with HTML alone. CSS 3 is only beginning to add some of the functinality Java provides.

  22. Table vs Divs In web design 101 we used tables. In 102 we use divs and CSS code ! Divs require less code in html and are easier to move while table cells are static and stuck in place. Divs are much more CSS friendly than tables.

  23. Table vs Divs Picture divs like boxes – you can stack and arrange them how ever you see fit. CSS lets you tell divs where to go!

  24. CSS and jQuery References CSS: https://www.w3schools.com/css/ Javascript: https://www.w3schools.com/js/ jQuery: https://www.w3schools.com/jquery/default.asp

  25. Preparing Images • Capture JPG’s and GIF’s from Web sites. • Make your own image in Power Point, Appleworks Paint. • Download photos from a camera. • Process images. • Gimp: Freeware version of Photoshop. • http://www.gimp.org/downloads/ • Free Online Tool for editing gif’s (crop and size). • http://www.picresize.com/ • Free Online Tool for making animated gifs. • http://www.myspacegens.com/handler.php?gen=animatedimage&p=view&id=2818834919

  26. Designing your Website Audience: Who are you speaking to? (Young, grown up, boys or girls? Interested in entertainment, hobbies, or evaluating your work?) Goals: Sell or Convince (For example, demonstrate that you have mastered HTML and therefore should have a budget to buy some new hardware or software) Share (Share a story, information, or links to cool sites.)

  27. Designing your Website Design, code and link at least 3 pages that would let an alien from another universe know you can code like a pro and that they will need you to help them in the future on projects! • Possible sections include: • Goals and accomplishments • Hobbies and interests • Friends and heroes • Favorite quotes and jokes • Short story about how you would like your future to unfold.

  28. Website Map and Navigation Home Page Favorite Stuff Favorite Web sites Friends Hobbies Heroes

  29. File Structure Folders Web Site index.html Section ‘n’ Section 1 sec-1.html Sec1 Images sec-n.html Sec1 Images

  30. Development (Code Tricks) You can add interesting background effects or a background image. If you do this, make sure your page information does not get lost in a complex background picture. <body background=“sparkle-background.gif”> Hannah

  31. Development (Code Tricks) Design your Web site so that no page, including pictures, requires more than 100k bytes of download data. Time to view a page that requires 100K of information ___ Telephone modem download time. ___ Cable download time. ___ DSL download time. ___ Wireless download time. ___ T1 download time.

  32. Deployment (FTP / Backup) Web Server Invention Universe Upload your website file folders from: controlpanel.invention-universe.com UID: inventionuniversecom PWD: Robot-Sushi0000 We recommend installing the FileZilla FTP tool. It's freeware. If no FTP client is installed on your computer, you can upload through 'File Manager' in an online control panel. Type into your URL browser box: controlpanel.invention-universe.com (do not type www or http://www) UID: inventionuniversecom PWD: Robot-Sushi0000 Click on File Manager. (I have noticed that sometimes you must upload one file at a time with this tool.) Set up personal websites as follows: 1) Create folder named: <your-first-name##> 2) Name your home page HTML file, index.html 3) Upload your files using 'File Manager' in the Control Panel. You need to create subdirectories such as 'images' or 'resources' View your website at: www.Invention-Universe.com/<your-first-name##>

  33. Lab Book Check List • Lab Book Cover • Problem/Mission • Research • Problem Sovling Tricks • Presenting Ideas • Modular Construction • Screenshots of website Advanced Projects: • Design Gifs • Upload via FTP vs File Manager • Use a text file as a database

  34. Agenda • Lab Book Cover • Problem/Mission • Research • Web Site Navigation • File Naming • Problem Sovling Tricks • Index Home Page • Navigation • HTML Content • CSS • Java Widget • Other Pages • Presenting Ideas • Modular Construction • Upload web sites to internet • Screenshots of website for lab book • Presentations

More Related