1. HTML Basics and CSS style

2. Before we start Dreamweaver (DW) may take several minutes tostart. Click on Start => Program Files => DevelopmentApps => Web => Dreamweaver MX => DreamweaverMX to start the program. Accept default choice for layout. Minimizing the Dreamweaver. We will use it later. Copy Everything from my public folder (including thisppt file) to your P: drive. U:msuusernananzhangpublic 3. HTML File StructureOpen a Notepad window. Copy the HTML tags to the Notepad. 4. Web Page Development CycleEDIT and SAVE the file in your AFSp:webindex.htmlTEST by BROWSING to the pagehttp://www.msu.edu/~msunetid/index.html 5. Adding Text to Your HTML FileMy home pageMy name is your name.My major is your major. 6. Making paragraphsMy home page

My name is your name.

My major is your major.

7. Adding Information to Web PageMy name is your nameMy major is your majorI am creating this page for LBS 126 and will bemodifying this page throughout the course.Please visit again! 8. More HTML tag pairs tag pair is for underline tag pair is for italic style. are headlines with different sizes. 9. Formatting Your Web Page with more tagsUnderline & ItalicItalicMy name is your nameMy major is your majorI am creating this page for CSE 101 andwill be modifying this page throughout thecourse.Please visit again!H1H2SeparateParagraphSeparateUnderline Paragraph 10. Now it is time to use Dreamweaver MX 11. Creating a LinkMake this a linkto the LBSHome pageMy name is your nameMy major is your majorI am creating this page for CSE 101 andwill be modifying this page throughout thecourse.Please visit again!Question: what is the HTML tag for Links? 12. More things to do Make a bullet list for your four favorite things inMSU. Change the font of this list to TimesNew Roman Changing page properties: Set background color for the page. What else can you change for the pageproperties? Download a MSU logo, save to your webfolder and insert to the top of your page.Question: what is the HTML tag for Images? 13. 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 theH1 headlines, but what about your have 100pages in your web site? Can we customize the HTML tags? 14. Cascading Style Sheets (CSS) What is style? Style is a list of formatting instructions. A Cascading Style Sheet is a file with a list offormatting instructions. CSS style sheets are the modern way tocontrol the appearance and layout of your webpages. 4.0 and up Navigator and IE fully support CSS. 15. Unpacking Sample Web Site Open the file common.zip you just copied usingEnZIP Click on Edit => Extract and extract the files toyour web folder The files will appear in a new folder commons Browse to the practice web site http://www.msu.edu/~MSUNetID/commons/ Why didnt you give a file name in the URL? View all seven pages in the site. What tags control the formatting of the headings? 16. Cascading Style Sheet Enter the following text into a new Notepaddocumenth2 {font-family : Tahoma;color : blue;text-align : center;} Save the document in the commons folderas csense.css Save as file type Text Document 17. Attach a Style Sheet to HTML files In properties window->Styles drop box,choose Managestyles Use Attach to attachthe .css file you justcreated. Do the same thing forall the seven pages. What happens? 18. Modifying CSS stylesh2 {font-family : Tahoma;color: blue;text-align: center;text-transform : uppercase;}body {font-family : Courier New;background-color : #FFEEDD;color : #777733;} 19. Separation of Content andPresentation Content Use tags like , ,

, or

to indicate the structure of your pages Presentation Use a CSS style sheet to determine how thetags are formatted Advantage of separation Changing the formatting only requires editingthe style sheet 20. Edit styles in Dreamweaver In the Design->CSS Styleswindow you can edit thestyles you already have, orcreate new styles. Lets create a new style forthe link HTML tag: High light the CSS file first Click here 21. Change the style of HTML LinkTag a:link Customizes the style of a link that has not been visitedrecently a:visited -- Customizes the style of a link that has beenrecently visited a:hover -- Customizes the style of a link while the usersmouse is over it. 22. Extra material Downloading the Macromedia Dreamweavertutorial file from the lecture notes page.