1 / 13

Introduction to Dreamweaver

Introduction to Dreamweaver. I450 Technology Seminar. Creating Documents. Dreamweaver can be used to create many different types of documents: HTML XHTML ASP PHP JSP ASP.NET Cascading Style Sheet JavaScript XML ColdFusion C#. Some benefits to using Dreamweaver:.

hertz
Download Presentation

Introduction to Dreamweaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Dreamweaver I450 Technology Seminar

  2. Creating Documents • Dreamweaver can be used to create many different types of documents: • HTML • XHTML • ASP • PHP • JSP • ASP.NET • Cascading Style Sheet • JavaScript • XML • ColdFusion • C#

  3. Some benefits to using Dreamweaver: • Allows you to view not only the source code of your page,but also a design view • Aligns all of the code properly • Helps in learning html and css, will fill in the blanks for you as your start typing • Virtually anything you can do can be done through the GUI (which also helps in learning the code)

  4. Dreamweaver for web development • Open Dreamweaver • Three options when viewing your site • Code • Design • Both • Save the document to your desktop • .htm and .html files are not the same! Make sure you know what extension your files are (lets use index.html for our example)

  5. Good naming conventions to follow: • Do not use any capital letters in your filenames (either the html or css files) • The default page for every directory on the steel server is “index.html”. In other words, if you name the file “index.html”, when someone goes to that directory (say www for example) mypage.iu.edu/~username/ the html file you created will appear

  6. 3 Views Code/Design View: View both Code (back) and Design (front) of your document. Design View: View only the design of you document Code View: View only the code of your document. Do not write code in the Design View!!

  7. F12: Preview in Browser • When developing a webpage, press F12 to view that page in a browser. • Better than viewing it in design view • Design view does not always get everything right • BUT, previewing in the browser may not be perfect either • The key is to keep your code clean. If you are using the design view, that’s fine, but make sure the code is correct • Its always good to test your websites in multiple browsers as well, and on different operating systems. Some things will appear differently in Internet Explorer on a PC vs. Firefox on a Mac

  8. Toolbar Panels You can access the toolbar panels via the Window Menu, or the panels themselves on the right of the screen.

  9. Snippets Many snippets of code pre-written. A lot of JavaScript. Footers, Form Elements, Navigation Bars, etc…

  10. CSS • Can make a style sheet in the document, or externally • Create a new CSS (we will attach an external style sheet to your index.html file) • Enter some style data • Use that style throughout your site • How do we attach a style sheet to the html page?

  11. Properties Panel Also lets you format the style of the document. I recommend using style sheets for everything, but there may be instances where this is useful, perhaps when adding a link to the page by highlighting the object/text to link and pasting the link URL into the “Link” box.

  12. Insert Panel Allows you to insert a WIDE range of things into the code. Tables, Forms, Templates, Links, Media, Rollover Images, etc.

  13. Editing the page properties: • Go to “modify” then “page properties” • This will allow you to create a style sheet automatically and set the background color/image, link colors, font settings, etc.

More Related