Css Founder.com | Cssfounder se
Download as PPT, PDF0 likes202 views
1) The document discusses the basics of HTML and introduces CSS for formatting web pages. It demonstrates how to add text, paragraphs, headings, links and images to an HTML file. 2) It explains what CSS is and how it allows separation of content and presentation through external style sheets. This allows formatting to be changed globally. 3) The document walks through creating an external CSS style sheet, attaching it to HTML pages, and modifying styles for headings, body text, and links. This showcases how CSS centralizes formatting.
Css Founder.com | Cssfounder se
- 1. Css Founder| Cssfounder Se http://cssfounder.com
- 2. HTML Basics and CSS style Css Founder.com
- 3. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps => Web => Dreamweaver MX => Dreamweaver MX to start the program. Accept default choice for layout. Minimizing the Dreamweaver. We will use it later. Copy Everything from my public folder (including this ppt file) to your P: drive. U:msuusernananzhangpublic Css Founder.com
- 4. HTML File Structure <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Open a Notepad window. Copy the HTML tags to the Notepad. Css Founder.com
- 5. Web Page Development Cycle EDIT and SAVE the file in your AFS p:webindex.html TEST by BROWSING to the page http://www.msu.edu/~msunetid/index.html Css Founder.com
- 6. Adding Text to Your HTML File <HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> My name is your name. My major is your major. </BODY> </HTML>Css Founder.com
- 7. Making paragraphs <HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> <p> My name is your name.</p> <p> My major is your major. </p> </BODY> </HTML> Css Founder.com
- 8. Adding Information to Web Page My name is your name My major is your major I am creating this page for LBS 126 and will be modifying this page throughout the course. Please visit again! Css Founder.com
- 9. More HTML tag pairs <u> </u> tag pair is for underline <em> </em> tag pair is for italic style. <H1> </H1> … <H6> </H6> are headlines with different sizes. Css Founder.com
- 10. Formatting Your Web Page with more tags My name is your name My major is your major I am creating this page for CSE 101 and will be modifying this page throughout the course. Please visit again! Underline & Italic Italic H1 H2 Separate Paragraph Separate ParagraphUnderlineCss Founder.com
- 11. Now it is time to use Dreamweaver MX Css Founder.com
- 12. Creating a Link My name is your name My major is your major I am creating this page for CSE 101 and will be modifying this page throughout the course. Please visit again! Make this a link to the LBS Home page Question: what is the HTML tag for Links?Css Founder.com
- 13. More things to do Make a bullet list for your four favorite things in MSU. Change the font of this list to “Times New Roman” Changing page properties: Set background color for the page. What else can you change for the page properties? Download a MSU logo, save to your web folder and insert to the top of your page. Question: what is the HTML tag for Images?Css Founder.com
- 14. Problems The Tags only provided limited formatting. H1 is always that big. Links always have an underscore. You can manually change the format for all the H1 headlines, but what about your have 100 pages in your web site? Can we customize the HTML tags? Css Founder.com
- 15. Cascading Style Sheets (CSS) What is style? Style is a list of formatting instructions. A Cascading Style Sheet is a file with a list of formatting instructions. CSS style sheets are the modern way to control the appearance and layout of your web pages. 4.0 and up Navigator and IE fully support CSS. Css Founder.com
- 16. Unpacking Sample Web Site Open the file common.zip you just copied using EnZIP Click on Edit => Extract and extract the files to your web folder The files will appear in a new folder commons Browse to the practice web site http://www.msu.edu/~MSUNetID/commons/ Why didn’t you give a file name in the URL? View all seven pages in the site. What tags control the formatting of the headings? Css Founder.com
- 17. Cascading Style Sheet Enter the following text into a new Notepad document h2 { font-family : Tahoma; color : blue; text-align : center; } Save the document in the commons folder as csense.css Save as file type Text Document Css Founder.com
- 18. Attach a Style Sheet to HTML files In properties window- >Styles drop box, choose “Manage styles…” Use “Attach…” to attach the .css file you just created. Do the same thing for all the seven pages. What happens? Css Founder.com
- 19. Modifying CSS styles h2 { font-family : Tahoma; color: blue; text-align: center; text-transform : uppercase; } body { font-family : Courier New; background-color : #FFEEDD; color : #777733; }Css Founder.com
- 20. Separation of Content and Presentation Content Use tags like <h1>, <h2>, <p>, <em> or <li> to indicate the structure of your pages Presentation Use a CSS style sheet to determine how the tags are formatted Advantage of separation Changing the formatting only requires editing the style sheetCss Founder.com
- 21. Edit styles in Dreamweaver In the Design->CSS Styles window you can edit the styles you already have, or create new styles. Let’s create a new style for the link HTML tag: <a> </a> High light the CSS file first Click here Css Founder.com
- 22. Change the style of HTML Link Tag a:link – Customizes the style of a link that has not been visited recently a:visited -- Customizes the style of a link that has been recently visited a:hover -- Customizes the style of a link while the user’s mouse is over it. Css Founder.com
- 23. Extra material Downloading the Macromedia Dreamweaver tutorial file from the lecture notes page. Css Founder.com
Editor's Notes
- #11: You can switch back to the coding window to see what HTML tags were inserted into you document.