Web Design Lab Book www Build-It-Yourself com

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

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

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

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

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

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

Internet Components Your local Internet Service You, Provider Client 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. www. Build-It-Yourself. com

Internet Components Routers Your local & Internet Switches Service You, Provider Client Domain Name Server Routers & Switches Website Internet Service Provider Route Server INTERNET BACKBONE A Route Server will determine the best route from your ISP to the ISP that hosts the Website you want. www. Build-It-Yourself. com

Internet Components Routers & Your local Internet Switches Service You, Provider Client Domain Name Server Routers & Switches Website Internet Service Website Provider Host Server Route Server INTERNET BACKBONE 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.

Internet Speed 4/10 ths of a second … time to blink your eye. 3/10 ths of a second … time to send a signal from Boston to China and back. www. Build-It-Yourself. com

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

View / Source Code html file sections (index. html) < ! - - page description info - - > < ! - - page layout code - - > www. Build-It-Yourself. com

HTML Source Code Body Section Indent your code so it can be read and edited easily. RGB 000000 < ! - - The Title Section Starts Here - - > FFFFFF – WHITE

FF 0000 - RED Hot Shot Web Designer

Web Design Bad HTML code Good HTML code

Web Design HTML code Browser

View Source Code / Save As / Edit 1 2 3 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-turnip-head. html 4 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. 5 Edit the tags, text and image names. Then save the html file. 6 Launch Internet Explorer. File / Open ‘john-turnip-head. html’ Click on ‘Refresh’ after an edit is made and saved. www. Build-It-Yourself. com

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 your name yourname-lab-book. ppt yourname-web-page. html images www. Build-It-Yourself. com cat. jpg ball. gif song. wav movie. wmv

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: Bad: biy-hot-shot. html biy_hot_shot. html biy hot shot. html www. Build-It-Yourself. com

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. World. Wide. Web – 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

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

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

Internet Definitions Client Dial Up / DSL / Cable / T 1 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

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

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

Editing A Simple Table