Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Design Lab Book www.Build-It-Yourself.com Website Designers Goal Evolve from know-nothing, nat-brain rookies … into Incredible Website Designers.

Published byGloria Porter Modified over 8 years ago

Similar presentations

Presentation on theme: "Web Design Lab Book www.Build-It-Yourself.com Website Designers Goal Evolve from know-nothing, nat-brain rookies … into Incredible Website Designers."— Presentation transcript:

1

2 Web Design Lab Book www.Build-It-Yourself.com

3 Website Designers Goal Evolve from know-nothing, nat-brain rookies … into Incredible Website Designers Reference Websites: http://navigators.com/internet_architecture.html http://www.rci.rutgers.edu/~au/workshop/int-def.htm http://www.profitgate.net/webchart.html http://www.build-it-yourself.com/project-website/ http://www.htmlcodetutorial.com/ www.Build-It-Yourself.com

4 Favorite Web Sites Build Your Own Toys http://www.build-it-yourself.com/ Mechanical Toys http://www.cabaret.co.uk/ Mechanisms http://www.flying-pig.co.uk/mechanisms/ Pixar http://www.pixar.com/ www.Build-It-Yourself.com

5 Website Designers Plan 1. How the Internet works 2. Web page vocabulary 3. Web page grammar 4. Programming tricks 5. Pictures, Audio, Video 6. Web site plan and navigation 7. Build-Your-Own-Site www.Build-It-Yourself.com

6 Website Development Tools www.Build-It-Yourself.com 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 Notepad++: Advanced Text Editor http://notepad-plus-plus.org/download Setting up text editor on Mac’s http://www.build-it-yourself.com/biy-projects/proj-web-design/resources/mission-web- design-textedit-tutorial.ppt

7 Project Planning (Teamwork) Share ideas Build on others’ ideas 2 heads better than 1 … teamwork www.build-it-yourself.com Go to ‘Projects.’ Scroll down to ‘Incredible Web Designers.’ Download your lab book template. www.Build-It-Yourself.com

8 You, Client Internet Components Domain Name Server Type a URL like ‘www.build-it-yourself.com’ in the address bar of your Web browser. Your local ISP (or Internet Service Provider) will convert this URL to an IP (or Internet Protocol) address by looking it up on a Domain Name Server. Your local ISP will then request a Web page from the Internet at the appropriate IP address. Your local Internet Service Provider www.Build-It-Yourself.com

9 Route Server You, Client Internet Components Domain Name Server Routers & Switches I N T E R N E T B A C K B O N E A Route Server will determine the best route from your ISP to the ISP that hosts the Website you want. Your local Internet Service Provider Routers & Switches Website Internet Service Provider www.Build-It-Yourself.com

10 Route Server You, Client Internet Components Domain Name Server Routers & Switches I N T E R N E T B A C K B O N E Your local Internet Service Provider Routers & Switches Website Host Server Website Internet Service Provider 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.

11 Internet Speed 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. www.Build-It-Yourself.com

12 Web Design Hot Shot Web Designer www.Build-It-Yourself.com

13 View / Source Code html file sections (index.html) www.Build-It-Yourself.com

14 HTML Source Code Body Section Indent your code so it can be read and edited easily. Hot Shot Web Designer www.Build-It-Yourself.com RGB 000000 FFFFFF – WHITE FF0000 - RED

15 Bad HTML code Web Design Good HTML code Hot Shot Web Designers Hot Shot Web Designer Hot Shot Web Designers <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!> Hot Shot Web Designer www.Build-It-Yourself.com

16 Web Page Web Design HTML code Hot Shot Web Designer Browser Hot Shot Web Designer www.Build-It-Yourself.com

17 View Source Code / Save As / Edit Find a Web page you like. View ‘Source’ COPY all source code to a text editor (Notepad or Apple Works). 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. Edit the tags, text and image names. Then save the html file. Launch Internet Explorer. File / Open ‘john-turnip-head.html’ Click on ‘Refresh’ after an edit is made and saved. 1 2 3 4 5 6 www.Build-It-Yourself.com

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

19 File Structure File Names 1)Use long descriptive names like school-date-name-description.html 2)Specify names in hierarchical order (Earth, Country, State, Street) 3)Use only lower case text. 4)Use “-” between words. Do not use “_” or “ “ Good: biy-hot-shot.html Bad:biy_hot_shot.html Bad:biy hot shot.html www.Build-It-Yourself.com

20 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. www.Build-It-Yourself.com

21 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. Title How many HTML commands are there? Web Browser (What are 2 popular browsers?) Application that converts HTML to a screen display www.Build-It-Yourself.com

22 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 likewww.hotshot.com 231.987.520.52 www.Build-It-Yourself.com

23 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) www.Build-It-Yourself.com

24 Editing A Simple Table Add text here that describes your research, storylines, goals, and solution. Add text here that describes your research, storylines, goals, and solution. www.Build-It-Yourself.com

25 Editing A Simple Table Add text here that describes your research, storylines, goals, and solution. Add text here that describes your research, storylines, goals, and solution. www.Build-It-Yourself.com

26 Editing A Simple Table row data table data www.Build-It-Yourself.com

27 Team 1: Add text here that describes your research, storylines, goals, and solution. Team 2 Add text here that describes your research, storylines, goals, and solution. Editing Simple Table Change Image Change Text www.Build-It-Yourself.com

28 Hot Shot Web Designer Home | Page 2 Navigation www.Build-It-Yourself.com

29 Audio and Video You can embed sound effects or videos on a page: Record or search for an audio file (.WAV) or a video file (.WMV) Save the WAV or WMV files to your ‘images’ folder and then embed them inside your tags. www.Build-It-Yourself.com

30 Scrolling Title You can embed sound effects or videos on a page: Record or search for an audio file (.WAV) or a video file (.WMV) Save the WAV or WMV files to your ‘images’ folder and then embed them inside your tags. www.Build-It-Yourself.com

31 HTML Questions If you forget the format for an HTML command, search Google. Search Key Examples: - html table border color - html align text A good HTML code syntax reference is: http://www.htmlcodetutorial.com/ www.Build-It-Yourself.com

32 Preparing Images 1.Capture JPG’s and GIF’s from Web sites. 2.Make your own image in Power Point, Appleworks Paint. 3.Download photos from a camera. 4.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 www.Build-It-Yourself.com

33 Designing your Web site 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.) www.Build-It-Yourself.com

34 Designing your Web site Design, code and link 3 pages that would let an alien from another universe know who you are. Possible sections include: 1)Goals and accomplishments 2)Hobbies and interests 3)Friends and heroes 4)Favorite quotes and jokes 5)Short story about how you would like your future to unfold. www.Build-It-Yourself.com

35 Website Map and Navigation Home Page Favorite Stuff Friends Favorite Web sites HobbiesHeroes www.Build-It-Yourself.com

36 File Structure Folders Web Site index.html Section 1 Section ‘n’ Sec1 Imagessec-1.htmlsec-n.html Sec1 Images www.Build-It-Yourself.com

37 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. Hannah www.Build-It-Yourself.com

38 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. www.Build-It-Yourself.com

39 Deployment (FTP / Backup) A free website account can be created on www.tripod.com Google also has a free web server (search for 'google web pages') Or students can use the BIY tripod account: www.tripod.com UID: biyweb PWD: password To upload your files: 1) Click on ‘Build a site of your own’ 2) Click on ‘File Manager’ (top menu bar) 3) Click on ‘New Directory’ Create a new folder with your name. 4) Create a new directory in your 'name' folder called 'images' 5) Change 'upload via' to 'single files' Browse to select your html files and then click on upload to get them on the Tripod web server 6) Follow the same procedure to upload your jpg or gif files to the images folder. To view your files: You should see your new website at: http://biyweb.tripod.com/name/home-page.html You must create your own 'name' folder. Then home-page.html should be the main page file name of your website. www.Build-It-Yourself.com

40 Deployment (FTP / Backup) You can set up a free Web Server space at: www.tripod.com URL for Websites built in Build-It-Yourself Workshops http://biyweb.tripod.com FTP URL for transferring files from your computer to the Tripod Web Server ftp.tripod.com UID: biyweb PWD: password www.Build-It-Yourself.com

41 Deployment (FTP / Backup) You can set up a free Web Server space at: http://members.000webhost.com/ URL for Websites built in Build-It-Yourself Workshops http://biy.herobo.com FTP URL for transferring files from your computer to the 000Webhost Web Server ftp://biy.herobo.comftp://biy.herobo.com ????? UID: john@build-it-yourself.com PWD: west0000 www.Build-It-Yourself.com

Download ppt "Web Design Lab Book www.Build-It-Yourself.com Website Designers Goal Evolve from know-nothing, nat-brain rookies … into Incredible Website Designers."

Similar presentations

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Web design lab book Clo Favorite… Hero:Kristen Chenowerth Quote:”nobody can make you misrable without your consent” Activity:swimming,skiing,watching.

Web design lab book Clo Favorite… Hero:Kristen Chenowerth Quote:”nobody can make you misrable without your consent” Activity:swimming,skiing,watching.
How To Create A Web Page By: Mikeon Briddy & Darrius Jacobs April 10,2006 Mr. Barnett.

How To Create A Web Page By: Mikeon Briddy & Darrius Jacobs April 10,2006 Mr. Barnett.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.

Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
What is the Internet? Internet: The Internet, in simplest terms, is the large group of millions of computers around the world that are all connected to.

What is the Internet? Internet: The Internet, in simplest terms, is the large group of millions of computers around the world that are all connected to.
XP Browser and E-mail Basics1. XP Browser and E-mail Basics2 Learn about Web browser software and Web pages The Web is a collection of files that reside.

XP Browser and Basics1. XP Browser and Basics2 Learn about Web browser software and Web pages The Web is a collection of files that reside.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.

Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.

Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.

CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing

CIS101 Introduction to Computing
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems 517-355-6580.

Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
HTML Introduction HTML

HTML Introduction HTML
Internet Publishing / Dreamweaver Luke E. Reese CARRS 517-353-3258.

Internet Publishing / Dreamweaver Luke E. Reese CARRS
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Web Design Professor Pepper. Internet physical layout Internet = internetworked networks Local Area Networks (LAN) Wide Area Networks (WAN) LANS,WANS.

Web Design Professor Pepper. Internet physical layout Internet = internetworked networks Local Area Networks (LAN) Wide Area Networks (WAN) LANS,WANS.

Similar presentations

Ads by Google