1. Workspace. In the integrated workspace, all windows and panels are displayed in a single larger application window.

Transcription

1 Dreamweaver myth Dreamweaver generates html code instead you hand-coding it yourself NOTE: Dreamweaver can create webpages, organize your website materials & help you to manage the wesite, BUT it cannot replace your creativity and artistic integrity. You are the one who design the website, not the software.

2 1. Workspace In the integrated workspace, all windows and panels are displayed in a single larger application window.

3 1a. Set up a local Site folder You need to set up a local folder to start developing in Dreamweaver. The local folder is your working directory. Choose Site > New Site. The Site Definition dialog box appears. Enter the Local Info options. Click OK. Dreamweaver creates the initial site cache, and the new site appears in the Site panel.

4

5 1b. Create a new blank document choose File > New. The New Document dialog box appears. In the Category list, select the category of document you want to create. Click Create.

6 1c. Document properties in Properties Inspector, choose Page Properties page title - identifies the document background colors / image - sets the overall appearance of the document text & link colors - distinguish regular text from hypertext and show difference of visited and unvisited links

7 Left Margin and Top Margin specify the sizes of page margins for Microsoft Internet Explorer only. To ensure that no margins appear in either browser, set all four values to 0. to see the margins, use Preview in Browser. If you leave all 4 Margin properties blank, the default is approximately left: 8 top:11 Margin Width and Margin Height specify the sizes of page margins in the body tag, for Netscape Navigator only. Document Encoding specifies the encoding used for characters in the document. For English and Western European languages, choose Western. Other options include Japanese, Traditional Chinese, Simplified Chinese, etc.

8 1d,Connecting In Dreamweaver, it s easy to add hyperlinks. Hyperlinks can be applies to either text or image: Hyperlink Highlight the text or image in Properties type URL in Link field Type in the URL directly absolute link ( OR relative link: should be within your site folder and you will need to specify path to it. Note: if you select a document from a folder outside of your local site folder, a warning window will appear and Dreamweaver will ask you to copy the file to the local site folder.

9 Link Type in : mailto:your address.com Anchor Link go to specific area of a webpage, good for long webpage with lots of contents Choose Anchor button in Common toolbar to insert anchors throughout a long page and name the anchor Create a link to the anchor (text or image). If it is in the same document, type #nameofyouranchor for the link.

10 2. Design layout with table table is an excellent solution for designing web page layout Table is easy to modify and compatible with most browsers. You can use the table cells to control the placement of text and images in a web page. If you make the borders = 0, the table becomes invisible, viewers won t see the underlying structure of your design when they look at the page in a browser.

11 In the Document window, place the insertion point in the document: Select Insert > Table. OR In the Insert bar s Common category, click the Table icon. The Insert Table dialog box appears.

12 In the dialog box, set the following options: In the Rows text box, type 3. In the Columns text box, type 4. In the Width text box, type 600, and then select Pixels in the pop-up menu to the right of the Width text box. *Setting the width to 75% creates a relative width table (75% of the webpage width whatever how it displays). *Setting the width to 600 pixels creates a fixed width table (always 600 pixels disregarding how the webpage displays). In the Border text box, type 1 to set a 1-pixel border around the table and table cells.

13 Modify the table: OR You can add rows and columns to the table. Also, you can merge and split cells to create the desired page layout. Place cursor to a cell Select Modify > Table > Insert Column. Right click > Table > Insert Column A new column is added. Do the same to add a new row If you want to insert multiple columns or rows, select Modify > Table > Insert Rows or Columns. You can insert a table inside a table.

14 Layout design with table Modify table properties Background color Border width Border color Cell color Cell border color Cell pad specifies the number of pixels between a cell s content and its boundaries Cell space - specifies the number of pixels between cell borders

15 Class Exercise 1. Open Dreamweaver 2. Create a local site in your folder 3. Create a new document and customize the document properties 4. Insert table 5. By only using table, design a layout, For content, you can use text, alphabets, keyboard symbols from computer keyboards. Forget the image and other media first. 6. Add hyperlinks if you like You have 25 minutes to experiment. Try to make use of the table features. You will see lots of possibilities open up!