70 likes | 149 Views
Dreamweaver-Part 1 The Basics. Web Page Design. Defining a Web Site. Go to Site, Manage Sites. Click on New, Site. Click on the Advanced Tab. Give your site a name and identify the root folder (the folder that you want to save your site in) and the images folder. Creating a Page.
E N D
Dreamweaver-Part 1The Basics Web Page Design
Defining a Web Site • Go to Site, Manage Sites. • Click on New, Site. • Click on the Advanced Tab. • Give your site a name and identify the root folder (the folder that you want to save your site in) and the images folder.
Creating a Page • Click on File, New to create a new HTML document. • If you want to create a home page, save the document as index.html. Otherwise, choose any name you want. The file extension is always htm or html! • Type a title for your page in the title box. • Click on Page Properties in the Properties Panel (at the bottom) to set the background color, default font, text color, link colors, and other properties. • You can view both the code and your web page by clicking on the Code view, Split view, and Design view buttons. • Type your text like you would type a document in Microsoft Word. However, to make a line break (<BR>), you must press Shift+Enter. Otherwise, Dreamweaver will insert two breaks (<P>).
Tables • To create a standard table, click on the Layout tab, and make sure you are in Standard View. Click the insert table button. • Set the number of rows and columns, cellpadding, border width and other properties in the dialog box that appears. • To change a table’s properties, select it and change the properties in the Properties Panel at the bottom of your screen.
Creating Tables in Layout View • Layout tables allow you to have more flexibility when placing content in a table. You can easily merge or split cells. • To create a layout table, go to View, Table Mode, Layout Mode. • You can click on Layout Table to draw a whole table or click on Draw Layout Cell to draw one table cell at a time. These buttons are located at the right-hand end of the toolbar.
AP Div Tags • AP Divs allow you to place content wherever you want on a page. You can also overlap content. • To create a AP Div tag, click on the Layout Tab, and select standard view. • Click on the Draw AP DIV button and draw a rectangle. • Go to Window, AP Elements to view a list of your AP Divs. You can arrange the stacking order of the them here. • The z-index determines the stacking order of the AP Divs. A z-index of 1 corresponds to the lowest AP Div in a stack.
Links • To add a link that goes to another page, highlight the words that you want to be the link, and type the place where you want it to go in the Link box in the properties panel. Be sure to use relative links! • To link to a place within your page, you must add an anchor: • Highlight the words that you want to link to. Then click on the Named Anchor button. • Highlight the words that you want to be the link. In the link box, type a # and the name of your anchor.