Dreamweaver Overview rev 09/13/2013 - Duq



Dreamweaver Overview rev 09/13/2013It is a Graphical User Interface (GU-E) that generates HTML. You have to define three folders: Local, Remote and Testing, together we term it a site Start DreamweaverCreate a new HTML page:File>New Document>HTML>None>Assign a page title>Doc Type>HTML5>CreateType: This is my first Dreamweaver pageSwitch among the three display options:DesignCodeSplitFile>Save as> DwHelloWorld.htm inside Practice Choose a workspaceChoose a workspace and look how the actual screen changesTry a few workspace optionsChoose Beginner Notice there are four ways to view Web page content: You will see 4 format options if you go through the View menu item: Otherwise, on the document bar you will see only 3.Try each FTPn’gCan click the up arrow on the document bar or inside Files panel:Note Only works if you defined a remote serverCan also FTP in Files panel:Or select the file(s) in the Files Panel (F8) and click the up arrow:Note:On many occasions there are two ways to accomplish something.ExampleInsert>ImageVersus insert panel (Window>Insert) Can move panels around, shrink to iconsThe WorkspaceApplication bar=Menu bar (Usual Windows menu bar) + workspace pickerSouth Side bar! Document : View>Toolbars>Document and Standard…see belowView>Toolbars>Document and Standard C. Document window (Your actual wysiwyg What You See Is What You Get )D. Workspace switcherE. Panel groupsF. CS LiveG. Tag SelectorH. Property PanelI. Files PanelThe Document toolbar in more detailA. Show Code ViewB. Show Code and Design ViewsC. Show Design ViewD. Live Code ViewIncludes code the server creates…Important in advanced classes where you study server scripting E. Check Browser CompatibilityChecks to see if your CSS is valid for a given browserF. Live View Similar to hitting F12 (Preview in Browser)G. Cascading Style Sheet InspectorH. Preview/Debug in BrowserI. Visual AidsJ. Refresh Design ViewK. Document TitleL. File ManagementM. Check Browser Compatibility Which ones are important for us?A,B,C,K,LMenu Bar (Top):File menu:The usual file menu, new, close, save (close all and save all may be something new to you)File>Preview in Browser (F12) shows what your page will look like when you render it.Click F12 nowInstead, select Preview in browser…you choose which browserEdit MenuEdit> Preferences the only ones we’ll use:Accessibility optionPreview in Browser optionView MenuInsert menu…discussed laterModify, Format, Commands skipSite menu : Already sawWindow MenuTo add/remove panelsMake sure File and Properties panels are openIf not: Click Window>File and/or Window>PropertiesDocument ToolbarWe’ll use the three views buttons, File Management (FTP (put or get ---arrows)) and title Title: Type your first name's First Dreamweaver HTML PageQuestions re Menu bar?Properties InspectorIts content changes reflects on content type:Text content: Graphic format:.Panels…here MONDAYMore Panel Management-AdobePanels are made up of tabs which can be moved, dockedLook for blue bar when docking into another location:Dock CSS Styles with Files:Can collapse panels to icons:Result:Once iconized, can see their purposes though by pulling to the left:There are often multiple ways to accomplish something. Good example: Using menus versus panels to do the same thingInserting Content Insert Panel versus Insert MenuUse either to add content to a page…images, tables, lines,…videosLook at the Insert>Common panel …Window>Insert if it’s not open The one’s we’ll use: HyperlinkEmail LinkHorizontal RuleTableInsert Div TagImagesMediaCompare to Insert menu Appears there are more options with the Insert menu item than with panel…but you’re (sort of) wrong!Click the down arrow next to “Common” inside the Insert Panel:Can choose Forms, Data, etc: Summary: Can use menus or panels to accomplish a taskProperty Inspector (Panel)At the bottom of the HTML pageRemember many tags (like body) have attributes or properties. The properties/attributes for the selected object appear in the Property Inspector PanelPracticeYour HelloWorld.htm page should be open.Property Inspector Shows properties of text and imagesType Hello WorldLook at the Code:Now press Enter; makes the text into a paragraph (adds <p> tag)Recall <p> creates a box, with a blank line before and after the <p> tagClick Split or Code button and again look at the HTMLNote: &nbsp; adds a spaceUse the Tag Selector () to select the <p> tagORSplit or Code view…to select the <p> tagUse the Property inspector/panel and make the text be bold-italicSee the other text properties you can add/modify?Deselect the textNow Insert>Image and browse to cozmo.jpg (Mine was in Practice/Images)Look at its properties…much different than for text Single-spacing Below the picture, type This is a paragraph (Press Shift-Enter) This continues the paragraph and is single spaced Press EnterLook at the split codeRecall <br /> single spacesStrong = boldEm = italicsApply a Heading 1 (h1) format to line 1Select the Hello World textIn the Properties Inspector, click the HTML button, and then Format>Heading 1File > SaveTesting your pageHit F12 to test the page. This sends your work to, then runs from, the testing server Can also choose File>Preview in browser>Choose any browser installed on your computerSave often!FTP’g the current pageAs with most things in Dreamweaver, there are several ways to FTP>Put this file (page) to the server. Find the double arrow (File Management). Click the up arrow (put). This sends the current page to the server computerWhat if it’s grayed out? Means you don’t have a remote site definedClick the arrows, and choose > Put …or…Select the helloworld.htm file in the Files Panel > click the up arrowAfter you use one of the options to Put your page to the server, it will give you a box that says "Put Dependent Files?" This gives you the option of uploading any images, videos and other objects on that page to the server as well as the page itself.Say Yes, this time, to also send up the pictureNow, let's test the page in a browser. The address should look like this: Practice using Insert panel/menu to add contentStart a new HTML page named DreamweaverPractice.htm (be sure to save right away, and NO SPACES!) inside the Practice folder It will look something like this when we are finishedLet’s use the panels to insert content. And then link HelloWorld.htm and DreamweaverPractice.htm pages to each other.Start with typing “Welcome to my practice page”…make it an H1 formatEnter the same text as the page titleInserting an email link:Fill in the information:Click EnterInserting a Horizontal Rule from the Common panel:Make it 5 pixels thick (Height): and Align Left Its properties are deprecated (may be deleted at some date…use CSS instead (later)…use CSSInserting a TableInsert a 3 rows x 2 columns table, 50% of the pageEnter data:Changing a Table’s attributeSelect the first rowSet the background color (Find the tool in the Property Panel) to a pale blue Save againProperties Inspector …again…now that we have more contentIts properties/format change based on what is selected (called context sensitive) . Text PropertiesSelect the “Welcome” text you just entered by clicking the <h1> tag in the tag selector (bottom left corner)Format Drop down boxThe Format drop down lets you make some limited format changes. Cascading Styles Sheets (CSS) provide almost unlimited formatting options Practice with Paragraphs and HTML formattingAfter the table, type “This was created by your name hereHit Shift-Enter. Recall this enters a line break, not a paragraph.Type Please enjoy my site!Hit Enter and type “I did this in JMA260”, click EnterSee the difference between Enter and Shift-Enter?Save againMore Properties for textSelect the last line you enteredLook at Property PanelNote HTML and CSS optionsHTML attributes are limited, basically Bold, Italics, listsMake the last line be bold and italicCreating lists Recall from HTML lectures: Ordered and unordered, also indent and outdentUse:Practice with lists: Add the following text : (You can’t copy/paste because there aren’t any Enter keystrokes after each item)Here are my favorite movies: AvatarTitanicBlack SwanTerminatorT1T2T3Star WarsSelect all the moviesClick the unordered list toolYou should see:Now, use the indent tool to indent T1, T2 and T3 to make them into sublistsTool:Result:SaveSo, we have two main pages: Helloworld.htm and DreamweaverPractice.htmLet’s link the pages to each otherCreating LinksA link is simply a "clickable" object (usually text ), also known as a hyperlink, that loads a new page in the current browser window, or opens a new page.What we’re going to do: Our GoalLink Helloworld.htm to DreamweaverPractice.htm andLink DreamweaverPractice.htm to Helloworld.htm Switch (open) to DreamweaverPractice.htm pageType Go to Hello World!Press Enter Select the text Go to Hello World We want this to be a link <a href> that when clicked takes the user to the HelloWorld.htm pageIn the Properties Panel, find the link box. There are three ways to enter a link: Type Helloworld.htm . This method is not recommended because of possible typos. However, you must use this method if you are linking to an external site. For example, if you want to link to the Pittsburgh Penguins' site, type into the box You must include the http Drag the Point to File tool to HelloWorld.htm in the Files Panel.Click the browse button and browse to HelloWorld.htm Choose one of the three methods and link the selected text to Helloworld.htmSwitch to HelloWorld.htmAdd the words Dreamweaver PracticeMake the words link to DreamweaverPractice.htm (on your own)Note: The Target options _blank: loads the page into a new browser window. _self: loads the page into the current window. This is the default and normally does not need to be selected. _parent and _top we will won't discussFinally, see if you can link your index page to practice.htm:Test and FTP your pages.File>Save AllFile>Close all Next class: Text and CSSFor Extra Credit (20 points)Complete the three pages (index, practice and helloworld) so they look like the pages in this document. In the practice page be sure you have:Head 1TitleEmail linkHorizontal ruleTable with 3 rows, 2 columns, blue background, with sample data in itA list with indentThe index page links to practice.htm, practice.htm links to helloworld.htm Finally, make practice.htm also link back to index.htmFTP all three pages (Use the File panel and the up arrow)Send the GA an email containing your index URL. It will look this way:: He may ask you to submit via BlackboardI Guess the most important point is the linking, so be doubly sure all three pages ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download