Bài giảng Business Driven Technology - Technology plug-in T11 - Creating Web pages Using Dreamweaver

TECHNOLOGY PLUG-IN T11Creating Web pages Using DreamweaverLEARNING OUTCOMESExplain the different Dreamweaver viewsDescribe how to add content to a blank Web page using DreamweaverDescribe the method used to insert a graphic into a Web page using DreamweaverLEARNING OUTCOMESDescribe the different types of hyperlinks you can create using DreamweaverDescribe how to create a list and table in a Web page using DreamweaverDefine the benefits of using Cascading Style Sheets when developing a Web page using DreamweaverINTRODUCTIONAdobe Dreamweaver has long (under its previous name, Macromedia Dreamweaver) been the premier visual tool for Web site developersDreamweaver's ease-of-use takes much of the pain out of creating Web pages and Web sites, without sacrificing flexibilityDreamweaver is Web authoring softwareNAVIGATING IN DREAMWEAVERDreamweaver is the tool of choice for many Web developers Dreamweaver provides the means for both visual design and code editingDreamweaver helps speed production time and provides tools for site management and maintenanceA Quick Tour of DreamweaverThe Welcome screen consists of several sections:Open a Recent ItemCreate NewCreate from SamplesExtendGetting StartedNew FeaturesResourcesDon't show againA Quick Tour of DreamweaverDreamweaver Setup Launching Dreamweaver for the first time you will see a dialog box before the Welcome screenThe Default Editor dialog lets you choose which file types you want to tell Windows to assign to Dreamweaver as the primary editorDreamweaver Setup Dreamweaver Setup Opening Dreamweaver you will be presented with the option to select one of two workspaces: Designer Layout - Dreamweaver's standard layoutCoder Layout - mimics an old program called Macromedia HomeSite, which is used by people who prefer to hand-code Web sites, typically using HTMLThese are arrangements of Dreamweaver's windows that are optimized for particular working stylesDreamweaver Setup Understanding The InterfaceADDING CONTENTWhen you add text, you need to deal with two different aspects of the text: Structure - paragraphs, headings, lists, and the likePresentation - how the text looks, including things such as the font, font size, text color, and so onCreating a New PageThe first HTML page that you create should be the index pageDepending on how you are naming pages on your site, the index page could have a variety of namesMost often named index.html or index.htmCreating a New PageThere is more than one way you can create a new pageUsing the Welcome screen Using the New Document dialogCreating a New PageUsing Sample PagesThe sample pages come in four categories:CSS Style Sheet chooses external CSS style sheet documents that contain style definitions with a wide variety of looks for your pagesFrameset has 15 premade frameset pages with different frame layoutsStarter Page (Theme) gives you dozens of pages you can use to create whole sitesStarter Page (Basic) gives you basic layouts for various tasks, such as a login window, a catalog page, or a comments formUsing Sample PagesUsing Sample PagesTo create a page from a sample page:Choose File, then select New, or press Ctrl-NClick to choose one of the sample pages tabs in the leftmost columnThe second column changes to show the available items for the tab you selectedThe name of this column also changes to match the name of the tabClick the item you want in the second columnClick CreateModify the sample page as you likeTitle Your PageThe first thing you should do with your new page is to add a titleThe title is the text that appears in the title bar of Web browser window You enter this text in the Dreamweaver document windowTo add a title to your page:Click in the Title field at the top of the page's document windowType in the titleAdding Text to Your PageAdding text is a lot like typing text in any word processorTo add text to a page:On the new page, click to set a blinking insertion pointYou can press Enter to move the insertion point down on the pageType your textThe text appears on the page, aligned to the leftAdding Text to Your PageTo format the text:On the Insert Bar, click the Text tabThe Text tab of the Insert Bar appearsUsing the Insert Bar and the Property Inspector, apply any formatting you want, as you would with a word processor Cutting, Copying, and Pasting TextJust like a word processor, you can cut, copy, and paste text on a page in DreamweaverUse the same menu commands with virtually all standard word processors and text editorsCreating LinksTo add a link to a page:Select the text you want to turn into a linkDo one of the following:If you are linking to a file on your hard drive, click the Browse for File button in the Property InspectorNavigate to the file you want to link to, select it, then click OKIf you are linking to a Web address, click in the Link field in the Property Inspector and type the full URLCreating LinksAdding ImagesTo add an image to your page:In your document, click where you want the image to appearOn the Common tab of the Insert bar, click the Image buttonNavigate to the image file you want, and select itClick OK(Optional, but strongly recommended) Enter the Alternate text for the imageClick OKAdding ImagesNaming and Saving Your PageTo save your page for the first time:Choose File, then select Save, or press Ctrl-SEnter the name for the pageDreamweaver gives the page a default name of Untitled-x, where x is the number of pages you have created since you launched Dreamweaver Click SaveNaming and Saving Your PageOpening A PageTo open a page:In the Files panel, find the page you want to open, and double-click itOr choose File, then select OpenOr press Ctrl-ONavigate to the file, select it, and click OpenPreviewing in a BrowserTo preview a page in a Web browser:Save your pageDreamweaver requires that the page be saved before it can create a previewPress F12The page opens in the default preview browser Or choose File, then select Preview in Browser, then choose a browser from the submenuPreviewing in a BrowserFORMATTING CONTENTFormatting applies to one word, a sentence, a paragraph or the page as a wholeFormatting includes applying headings, changing fonts, font sizes and font colors, indenting text, adding line breaks, using lists, adding horizontal rules, and setting page propertiesApplying HeadingsHeadings are one of the most important structural elements on most Web pagesHeadings point your site's visitors to essential information on the page, and they separate sections of the pageText you enter into Dreamweaver begins with no headingApplying HeadingsTo apply a heading:Click in the line you want to changeThere are several ways to apply the heading:Choose Text, select Paragraph Format, and then choose Heading x, where x is the heading size you wantPress Ctrl-1 for Heading 1, Ctrl-2 for Heading 2, and so onChoose a heading from the Format pop-up menu of the Property InspectorClick one of the heading buttons in the Text tab of the Insert BarApplying HeadingsApplying HeadingsTo remove heading formatting:Click in the line you want to change.Choose Text, select Paragraph Format, then choose None, or press Ctrl-OThe Format menu of the Property Inspector changes to None, indicating that the text has no heading or para­graph style assigned to itChanging Fonts and Font SizesDreamweaver comes with six predetermined font combinations, and you can add more as you need themEach choice in the Font pop-up menu in the Property Inspector represents the first font in that font combinationChanging Fonts and Font SizesChanging Fonts and Font SizesTo set a font:Select the text you want to modifyChoose a different font combination from the Font pop-up menu in the Property Inspector, or choose Text, select Font, and then choose the font combination from the submenuChanging Fonts and Font SizesTo set font size:Select the text you want to modifyChoose a different size from the Font Size pop-up menu in the Property InspectorChoose the unit of measurement you want from the units pop-up menu, next to the Font Size pop-up menuChanging Font ColorTo color text:Select the text you want to colorClick the color well in the Property InspectorClick a color with the eyedropper to select it; it can be any color in the color picker or any color visible on your desktop or the page you are editingChanging Font ColorIndenting TextTo block quote text:Click in the paragraph or other block element you want to indentYou have several choices on how you can indent:Click the Indent button on the Property InspectorIn the Text tab of the Insert Bar, click the Block Quote buttonChoose Text, then select Indent or press Ctrl-Alt-]Indenting TextTo remove block quoting:Click in the paragraph or other block element you want to indentClick the Outdent button on the Property Inspector or Choose Text, then select Outdent or press Ctrl-Alt-[Aligning TextTo align text:Click inside the paragraph you want to alignClick one of the alignment buttons in the Property Inspector Or you can choose Text, select Align, then select either Left, Center, Right, or JustifyAligning TextAdding Line BreaksTo insert a line break, you can do one of two things:At the end of the line you want to break, press Shift-EnterAt the end of line you want to break, in the Text tab of the Insert Bar, select Line Break from the Special Characters pop-up menu Working With ListsLists are an easy way to organize content on your Web pageDreamweaver supports three types of lists:Numbered lists or Ordered lists, for lists with items that need to be in a particular orderBulleted lists or Unordered, for lists of items in no particular orderDefinition lists, where each item has an indented subitemWorking With ListsTo create a list:Type the items for your list into the window. After typing each item, press EnterSelect the items in the listThere are several ways you can create the list - do one of the following:Choose Text, select List, then choose Unordered List, Ordered List, or Definition List from the submenuClick either the Unordered List or Ordered List button in the Property InspectorClick one of three buttons in the Text tab of the Insert Bar: ul = Unordered List, ol = Ordered List, or dl = Definition ListWorking With ListsSetting List PropertiesTo set list properties:Click in the list you want to change to place the insertion pointChoose Text, select List, and then choose PropertiesDo one or more of the following:In the List type pop-up menu, select Bulleted List, Numbered List, or Directory List ("definition list" is called "Directory List" in this dialog for some reason)In the Style pop-up menu, select one of the Bulleted List or Numbered List stylesUse the Start count text box to set the value for the first item in the numbered listClick OKSetting List PropertiesNesting ListsTo create a nested list:Click the end of a line within an existing list to place the insertion pointPress EnterThis creates another line of the list.Press TabThis creates a new indented sublist of the same type as the parent list(Optional) If you want the sublist to be a different type of list than the parent list, click the Numbered List or Bulleted List button in the Property InspectorType the list itemPress EnterAdding Horizontal RulesTo insert a horizontal rule:Click in the page to place the insertion point where you want the horizontal rule to appearChoose Insert, select HTML, then choose Horizontal RuleAdding Horizontal RulesSetting Page PropertiesTo set page properties:Choose Modify, then select Page Properties, or choose Ctrl-JClick the category you wantSet the options as you likeClick Apply to see the changes on the open document without closing the Page Properties dialog or click OK to save your changesSetting Page PropertiesCASCADING STYLE SHEETSCascading Style Sheets, or CSS, are all about style, looks, and presentationCSS properties and rules give you control over foregrounds, backgrounds, colors, fonts, positions, alignments, margins, borders, lists, etcDreamweaver organizes all the CSS properties into a couple of manageable interfacesThe CSS Rule definition dialog The CSS Styles panelThe CSS Styles PanelCSS Style Panel in All ModeThe CSS Styles PanelCSS Styles panel in Current modeCreating a Style Rule A style rule begins with a selectorA selector can be a tag, an id, or a classAn id can only be used once per pageSince ids are unique, they are used for all sorts of things in addition to CSS rules, such as JavaScript’s and link destinationsIds are very useful in CSS when assigned to divs that hold a section of a page that you use and style as a blockA class is reusableMany different elements on a page can be assigned to the same classCreating a Style Rule To create a style rule for a tag:Click the New CSS Rule button in the CSS Styles panelComplete the following:Selector Type: Choose TagTag: Dreamweaver makes its best guess (based on your current selection or cursor placement when you clicked the New Style button) as to what tag you wanted this style to apply toDefine in: Select "This document only" to add the style to just the doc­ument you have openClick OKSet properties in the eight categories as desiredCreating a Style Rule Creating a Style Rule Creating a Style Rule Choosing Between Divs and SpansDivs and spans are generic containersDiv is short for divisionA div is meant to hold a section of a page that you use and style as a blockUse divs to organize content into meaningful containers. Span are elements for inline use (attached directly to the code)A span, for example, can enclose a letter, word, or phraseWith style rule attached to the span, you achieve a distinctive presentation for an inline elementCreating a Custom ClassTo create a class:Click the New CSS Rule button in the CSS Styles panelSet the Selector Type to Class (can apply to any tag), and set the Name to a name of your own choosing, preceded by a period (.)Click OK, and the CSS Rule definition dialog appearsClick OK to accept your changesCreating a Custom ClassTo apply a style to a class:In a document, select the text to which you want the style to apply (or place the cursor anywhere in a paragraph to apply the class to the entire paragraph)Do one of the following:In the CSS Styles panel, select All mode, then right-click the name of the style you want to apply, and choose Apply from the contextual menuIn the Property Inspector, choose the style you want to apply from the Style pop-up menuCreating a Custom ClassExternal, Internal, and InlineCascade Styles can be external, internal, or inlineAn external style resides in a separate style sheet file, one with a name that usually ends in .cssAn internal style lives inside each individual Web page that needs it, located within style tags inside the document's headInline styles live within the HTML tags themselves, and only apply to whatever is inside that tagStyle rules cascadeCREATING TABLESTables allow you to present information in an organized mannerTables contain rows and columns that intersect to form cells in which you can place contentCells can then be merged to create larger cellsTables can be used to control layoutCREATING TABLESTables were one of the HTML elements that initially gave designers and developers control over the layout of their sitesUsing Cascading Style Sheets can be a better method of developing the layout and design of a page because it provides a wider number of layout choices and appearance options while giving better control over the look and feel of the entire siteCreating a TableTo add a table to a Web page:Place the insertion point where you want the table to appearOn the Layout tab of the Insert Bar, click the Table button (or Choose Insert, then select Table, or press Ctrl-Alt-T)Enter the number of rows you want in the table, and press TabEnter the number of columns you want in the table, and press TabCreating a TableIn the Table width text box, enter a number that will either be in pixels or a percentage of the page width, then choose the units from the pop-up menu to the right of the text boxSet one or more (or none) of the following:Enter a figure in the Border thickness text box to set the size of the borderEnter a figure in the Cell padding text box to set the amount of space between the content in the cells and the cell borderEnter a figure in the Cell spacing text box to set the number of pixels of space between cellsIn the Header section, choose the kind of header you want: None, Left, Top, or BothCreating a Table(Optional, but recommended) In the Accessibility section, enter a caption for the table, then choose how you want the caption to be displayedClick OKCreating a TableTable ElementsThere are several options for selecting the entire table:Click the table's upper-left cornerClick the bottom or the right edge of the tableClick in the table, and then choose Modify, select Table, then choose Select AllTable ElementsTo select an entire row:Place the pointer at the left edge of a rowThe pointer becomes an arrowClick to select the entire rowYou can click and drag to select multiple rowsThe cell borders for the selected row highlightTable ElementsTo select an entire column:Place the pointer at the top edge of a columnThe pointer becomes an arrowClick to select the entire columnYou can click and drag to select multiple columnsOr click the triangle in the dimension line above any column to display a pop-up menu, The cell borders for the selected column highlightTable ElementsTo select a single cell, do one of the following:Click and drag in the cellOr click in the cell, select Edit, then choose Select All, or press Ctrl-ATo select multiple adjacent cells, do one of the following:Click in the first cell you want to select, and drag to the last cellClick in the first cell you want to select, hold down the Shift key, and then click in the last cellTo select nonadjacent cells:Ctrl-click in the first cell, hold down the Ctrl key, and then click the other cells you want to selectAdding Rows and ColumnsTo insert a single row in a table:Place the insertion point in a table cellIn the Layout tab of the Insert Bar, click either the Insert Row Above or Insert Row Below buttonAdding Rows and ColumnsAdding Rows and ColumnsTo insert a single column in a table:Place the insertion point in a table cellIn the Layout tab of the Insert Bar, click either the Insert Column to the Left or Insert Column to the Right buttonAdding Rows and ColumnsTo insert multiple rows or columns into a table:Place the insertion point in a table cellRight-click, and then choose Table, select Insert Rows or Columns from the shortcut menuOr choose Modify, select Table, then choose Insert Rows or ColumnsSelect either the Rows or Columns radio buttonEnter the number of rows or columns you want to addNext to “Where”, click the appropriate button to select the location of the new rows or columnsMerging and Splitting CellsDreamweaver lets you combine two or more adjacent cells into one larger cell, or split a single cell into two or more cellsTo merge cells:Select the cells you want to mergeChoose Modify, select Table, then choose Merge Cells, or press Ctrl-Alt-MOr right-click, choose Table, then select Merge Cells from the shortcut menuMerging and Splitting CellsTo split cells:Place the insertion point in the cell you want to split into two cellsChoose Modify, select Table, then choose Split Cell, or press Ctrl-Alt-SOr right-click, and then choose Table, then select Split Cell from the shortcut menuChoose whether to split the cell into rows or columnsEnter the number of new rows or columns for the splitClick OKResizing ElementsTo resize an entire table:Click the bottom or the right edge of the tableThe table will be selected, and a border with resize handles appears around itDrag one of the resize handlesTo widen the table, drag the handle on the right edge of the tableTo make the table taller, drag the handle on the bottom edge of the tableTo make the table grow in both directions simultaneously, drag the handle at the bottom-right corner of the tableHolding down the Shift key as you drag maintains the proportions of the tableResizing ElementsTo resize a table numerically:Click the bottom or the right edge of the table to select itIn the Property Inspector, enter a number in the W (for width) field In the pop-up menu next to the field, choose either %, which makes the table width a percentage of the overall width of the page, or pixels, to set an absolute size for the table widthClick in the document window to apply your changesResizing ElementsResizing ElementsTo resize columns:Select the column you want to resizeDrag the column's right border to make the column widerOr In the Property Inspector, type a number in the W (for width) fieldResizing ElementsTo resize rows:Select the row you want to resizeDrag the bottom border of the row to make the row tallerOr in the Property Inspector, type a number in the H (for height) field Resizing ElementsDeleting ElementsIf you want to remove tables, rows, or columns, you can make short work of the taskTo delete a table:Select the table by clicking its right or bottom edgeA border with resize handles appears around the tablePress the Backspace or Delete keyDeleting ElementsTo delete rows:Select one or more rowsPress the Backspace or Delete keyTo delete columns:Select one or more columnsPress the Backspace or Delete keyTable AlignmentUsing the Property Inspector, you can choose from four different table alignments:Default uses the browser default alignment for tables (usually it places the table to the left side of the page)This setting prevents text from wrapping around the table to the rightLeft places the table to the left side of the page, and allows text to wrap around the right side of the tableCenter centers the table on the page, with no text wrappingRight places the table to the right side of the page, and allows text to wrap around the left side of the tableTable AlignmentTo set table alignment:Select the table you want to alignIn the Property Inspector, choose the alignment you want from the Align drop-down menuCell PropertiesTo set cell alignment:Place the insertion point in the cell you want to formatIn the Property Inspector, from the “Horz” menu choose Default, Left, Center, or RightFrom the “Vert” menu choose Default, Top, Middle, Bottom, or BaselineCell PropertiesTo set a cell background and border color:Place the insertion point in the cell you want to formatIn the Property Inspector, click the color well next to Bg to bring up the color picker and select the cell's back­ground colorIn the Property Inspector, click the color well next to Border to bring up the color picker and select the color of cell's border color