Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Web Design Training by ExplorNet
Document related concepts
Transcript
Web Design Training Multimedia and Webpage Design Essential Standard 4.00 Multimedia and Webpage Design How the Web Works Viewing Source Code What’s in all that mess?? Content Structure Look and layout Directions to other resources (pictures, webpages, stylesheets, scripts) Code: HTML, CSS, JavaScript, XML, Java, php, client-side, server-side, etc. First Time Learning Video – How to Open a Book First time learning must be… Accurate Complete Connected to the real world Instruction will involve different qualities of learning. Level 1 – exposure learning Level 2 – “use it or lose it” learning Level 3 – remains in memory and easily accessed What is HTML? What is XHTML? What is CSS? How Web Design is Like Building a House HTML creates and defines the structure. How Web Design is Like Building a House CSS gives us the tools to make it look the way we want. How Web Design is Like Building a House Other Technologies are needed to make it more ‘livable.’ Basics of HTML Some HTML Terminology TAGS Tags separate or contain content and information. They set a structure for the browser to follow. Most tags are ‘container tags’ which come in pairs an opening tag and, later, a closing tag. <h1> </h1> Some tags are self-contained and stand alone. <br /> Basics of HTML Some HTML Terminology ELEMENTS Elements are the tags WITH the content they are separating or modifying. For example: <h1>This is the headline.</h1> There are block elements (like <p> or <h2>) and inline elements (like <img>). Key (X)HTML Tags Primary HTML Structure Tags o<html> </html> o<head> </head> o<title> </title> o<body> </body> Key (X)HTML Tags Some Key HTML Container Tags o<p> </p> (paragraph) o<h1> </h1> (header) o<h2> </h2> (subhead – through h6) o<div> </div> (division – key in CSS) Key (X)HTML Tags Some Key HTML Format Tags o<b> </b> (bold) o<i> </i> (italics) o<font> </font> (OLD style - deprecated) Key (X)HTML Tags “Empty” Tags o<br /> (break) o<hr /> (horizontal rule) o<img> (image) oNeeds “src” and “alt” attributes <img src=“picture.jpg” alt=“picture” /> Key (X)HTML Tags Other Key Tags o<a> </a> (link) oNeeds href attribute <a href="http://www.cnn.com">CNN</a> Key (X)HTML Tags The STYLE Attribute: <h1 style=“text-align:left; font-family: georgia,serif”> The DOCTYPE Declaration What is a Doctype? What is an HTML Document? We will build our html document in a text editor, but we’ll view our work and the changes we make in a browser. Keyboard Control Key Shortcuts These will make your life easier! Make sure students know them: CONTROL-C CONTROL-V CONTROL-X CONTROL-S CONTROL-Z CONTROL-Y COPY PASTE CUT (DELETE) SAVE UNDO REDO Building Our Website Let’s build our simple house. Three ‘rooms’. A home page (big family room on the main floor) Two other pages, in a subfolder (think of these as two rooms in the basement) We’ll also have a separate space in the basement: a ‘closet’ for images and it’ll have a box for some of the images. HTML Guided Practice Part 1 Building a Simple Web Page Find the folder on your flash drive called “web site project. ” Find the basic file. Open it in Notepad2 or Notepad++ On your flash drive, find “portable apps/notepad++.exe” and double-click it. Install UNLESS it’s already available. Save the file as “index.html”. Open “Build Your Site Project” in Activities folder. Put the two windows side-by-side and follow along with the instructor as we complete Part Two. Let’s Build! Let’s build Part ONE of the Build Your Site Project together. Web Site Files and Folders Web Page Components oHome Page (Index Page) Use Characteristics Index is the default home page Don’t need index.html in the URL. Root Folder – contains index page Images Pages Web Site Organization Web Site File Management oRoot Folder index.html file is default homepage oFolders are denoted by / in URL www.teachercentral.org/careertech oAbsolute Hyperlinks oLinks require “http://www....” oRelative Hyperlinks oLinks require a file path Note: Always use lowercase letters for folder and file names! Look for the “.html” document you are editing and trace the path to the file you are linking. family.html If you are moving UP out of that folder, add ../ (meaning “go up one level”) Once you’ve gone up a level, if you are going down into a subfolder, name the folder you are going into. ../images Then, if going down into another subfolder, name the subfolder you are going into. ../images/photos Once you are in the correct folder, add the file name. ../images/photos/index.jpg Cascading Style Sheets Three Types of Styles 1. In-Line 2. Embedded or Internal 3. External Style Sheets Cascading Style Sheets Some CSS Terminology ATTRIBUTES – style, id, etc. The ‘style’ attribute is a cornerstone of creating styles. Its use replaces many ‘deprecated’ direct formatting tools like <font>. •PROPERTIES – “color” or “font-size” or “text-align” etc Always followed by a colon then the value Then by a semi-colon if more properties/values follow. <h1 style=“color: red; font-family: arial”> •VALUES – “red” or “small” or “centered” etc. Cascading Style Sheets In-Line Styles In-line styles use the style attribute to set properties and values. These are laid out within an opening tag such as <h1> or <p>. Note that all the style components are listed within a single pair of quotes. Each set contains a PROPERTY (like ‘text-align’ or ‘font-family’) and a VALUE (like ‘center’ or ‘verdana’). Properties are separated from values by a colon. Pairs of properties and values are separated by a semicolon. In-Line Styles Inline Styles are included in tags throughout the web page. Cascading Style Sheets Common CSS Properties Here are examples of common style properties: font-size, font-family, font-style, font-variant, font-weight color, background-color, background-image text-align, text-indent, line-height margin-top, margin-right, padding-top, padding-right Border-color, border-top-width, border-style Properties and possible values: http://htmlhelp.com/reference/css/properties.html Cascading Style Sheets Internal Style Sheet Tags You would begin creating one by placing <style> tags within the <head> of the document. Style info goes within the <style> tags. Cascading Style Sheets Creating Internal Styles Next, you would create rules within the style sheet to govern the look of various elements within the page – from existing tags like <h1> or <p> to new ones that you might create and name. Cascading Style Sheets Internal Style Sheets In-line styles can become cumbersome – every style applied has to be applied repeatedly! For example, if you want to make all your paragraphs a certain size, color and font, you would have to apply an inline style with EVERY PARAGRAPH! The use of an internal style sheet can simplify things. By creating a ‘style sheet’ within the document <head>, we can create a rule for paragraphs (and another rule for h1 elements, and h2, and so on) and only have to spell out the stylistic components one time. Cascading Style Sheets Creating Internal Styles Cascading Style Sheets Creating Internal Styles The rules created in an internal style sheet automatically impact text that lies within existing elements like <h1> or <p> that have been styled. But you must APPLY “class” or “id” styles that you have created where you want those styles (like “navbar”) to apply. The newly added attribute defines “copyright” as a “unique identifier” on the page to which a specific style will be assigned Cascading Style Sheets Creating Internal Styles When creating a new “class” or “id” in a style sheet, the “unique identifier” that you invent is named after a period (for a “class” that may apply several times within the page) or # sign (for an “id” that appears only once in a page). After an opening bracket, properties and values to be applied to that selector are listed, followed by a closing bracket. The style information is then removed from the tag within the page. Cascading Style Sheets External Style Sheets When you think of ALL the many pages that might make up your website, the idea of keeping multiple internal style sheets becomes overwhelming. This is where EXTERNAL STYLE SHEETS come in. Rather than repeating the styles on every page, every page will LINK to an external sheet that stores the current version of site-wide styles. Cascading Style Sheets Creating an External Style Sheet Cut the styles from inside the document… …and paste them into a new text file with the .css extension (example: styles.css) Cascading Style Sheets Linking to an External Style Sheet In each document, the STYLE tag is replaced with a LINK tag that points to the CSS document. It includes a rel attribute that tells the browser we’re linking to a style sheet. It also includes an href attibute that defines which file in our site we are pointing to. Cascading Style Sheets CSS Play Time oCSS Zen Garden (www.csszengarden.com) This fun site illustrates how the content in a single HTML page can be made to look radically different through the use of different CSS style sheets and graphics. oSEO Friendly (in “activities” folder on flash) This cool tool can be a personal ‘home page.’ Manipulate the CONTENT by editing the HTML page. Change the PRESENTATION by editing the CSS page. The Webmaster’s Toolkit Web Page Development Tools oText Editors Notepad, Notepad2, Notepad++, Browsers oSoftware Packages Free, Open Source WYSIWYG Editors Blue Griffon, W3CSchools HTML Editor (Amaya) Professional WYSIWYG Editors Adobe Dreamweaver, Microsoft Expression Web2 WYSIWYG Editors - Dreamweaver Dreamweaver: Makes creating and editing web pages easier Writes most of the code for you Allows editing in WYSIWYG mode Still works with same HTML and other files Knowledge of HTML, CSS still important WYSIWYG Editors - Dreamweaver Web Technologies JavaScript •An object based scripting language that allows creation and execution procedures within a web page •Does not require plug-ins (additional programs for the user to install) •Widely supported by most browsers JavaScript example displays this dialog box in the browser window: <html> <head> <title>JavaScript Example</title> <script type="text/JavaScript"> var foo="Greetings, visitor!"alert(foo); </script> </head> <body> </body> </html> What is Java? Three Types of Styles 1. In-Line 2. Embedded or Internal 3. External Style Sheets http://java.com/en/java_in_action/ What is Java? Three Types of Styles 1. In-Line 2. Embedded or Internal 3. External Style Sheets Web Technologies Web browsers What they do Browser extensions HTML5 and browsers Why stay current? Security Functionality Downside: compatibility with older sites, tools Extended URL - for security with secure sites https: http://www.20thingsilearned.com/en-US/identity/2 http://www.20thingsilearned.com/en-US Web Design Workshop Publishing a Web Site 2. Name Server connects domain name to IP address of the host computer: 205.178.145.65 1. URL typed in browser: www.qtlcenters.org 4. Web page is displayed on the user’s screen. 3. Web page information is pulled from the host computer. Publishing a Web Site Process for Publishing oChoose a web host oRegister domain name(s) (ideally, with same company) oConnect domain name you registered to the IP address of the server oUpload your site if you haven’t already… oIf you move your site, must notify registrar AND web host if they are different. Publishing a Web Site Domain Name Register domain name(s) with a recognized registrar. Web Host Sign up with web host and obtain login info. Name Servers Connect your domain name to your IP address. Copyright 2007 QTL™ Multimedia and Webpage Design Five Top Tips for Student Achievement oStudents learn by seeing, hearing, and doing. oCapitalize on creativity, but set specific goals. oUse vocabulary terms constantly! oSimple tasks first, then build on those oTeach effective use of the Internet THANK YOU! [email protected] [email protected]
