Dreamweaver英文版教程.doc

DreamweaverLab #4This week you will start the creation of your websites! This lab will last for 2 weeks. Which means you should have your first page complete two weeks from today! The tool we will be using is Dreamweaver. The program is large with a lot of options, so dont feel bad if you get lost and have questions. You will catch on over time J BUT, before you ask me a question, see if you can find the answer yourself using the Dreamweaver Help. I will not answer any questions you have until you have already attempted looking for the answer yourself. The program comes equipped with an in-depth and well put together Help featurelearn it and use it.Before we get into the nitty gritty instructions for creating your first page design, I want to go over a few rules/requirements that will need to be adhered to in order to accomplish this lab successfully. Where the website will be created:o On your M: Drive in the Home folder. Weve talked about this in class. You can find it (if you are on a lab computer) by clicking: Start Menu My Computer username on ITS2.PLYMOUTH.EDU Its the gray box with your username on it Save your work OFTEN Naming your fileso When creating webpages there are a few rules you must adhere to in order to prevent any problems All webpage files you create must have .html at the end of them. That tells the web browser that the file is an HTML document and should be displayed like a webpage. The page that you want to be the home page of your site MUST be named: index.html All file names should be lowercase only! If I wanted to name a file Bork.htmlI should actually name it: bork.html Do NOT use spacesuse underscores instead. If I wanted a file called, matt smells.htmlI would have to name it: matt_smells.html If you dont know how to make an underscore, hold down the shift button and press the “-“ key. Do NOT use any punctuationi.e. commas, periods, semicolons, quotes, etc. We are using Dreamweaver, which I believe is available only in this lab. So yes, you will need to do your out of class work here. If you already know how to create a site some other way, by all means do it if youd like. I just wont be answering questions about any applications other than DreamweaverI will answer generic design/HTML/CSS questions.Time to get started!1. Open Dreamweaver.a. You can find it by clicking: Start All Programs Classes Web Expressions Dreamweaverb. Dreamweaver may prompt you asking if you want to open it in Design or Developer modejust click Design and hit OK.2. First thing you want to do once you have opened Dreamweaver is set up your site (you may have to do this each time you use Dreamweaver on a new machine)a. On the top menus: Click on Site Manage Sitesb. If you see Web Expressions click on it and click Done (skip to #3)if you dont see Web Expressions continue to step c.c. Click New Sited. In the first field, enter: Web Expressionse. Leave the second field blankf. Click Nextg. The next window shows two options. Make sure “No, I do not want to use a server technology.” Is clickedh. Click Nexti. The next window has an option and a field. Make sure “Edit directly on server using local network” is selected.j. In the field titled: “Where on your computer do you want to store your files?”, type: M:Homek. Click Nextl. Click Donem. You should now see a Files section over on the right hand side of Dreamweaver. You can navigate around your sites files and folders right from Dreamweaver! Initially, you wont see any files or folders but as your site develops and you create pages and add imagesthis will fill up nicely J 3. Create an images folder to store the images you create and download from the web.a. In the files section on the right hand side of Dreamweaver, click on the green folder titled “Site Web Expressions”b. Right click on that folder and click New Folderc. Name your new folder: images4. A quick note: Deleting files is easy in Dreamweaver. Simply click on the file you wish to delete, right click, then click Edit Delete5. Now to create the first page of your site! a. On the menus at the top of the program, click File New b. A window will pop up. In the Category section, make sure that Basic is selected.c. In the Basic page: section, make sure HTML is selectedd. Click Create6. You should now see a blank page with rulers along the left and top (note: the rulers may or may not be therethey wont be necessary for this lab, so dont worry about them). This is your blank webpage. You should save it right away to make your life easier. a. Click File Saveb. Go to My Computer “username on ITS2.” Homec. Name your file index.html (remember to use all lowercase letters!)d. Click Save7. Now you need to name your homepage! This name is what appears on the internet browser bar. Change the words “Untitled Document” to whatever name you want to give this page. 8. You should now modify some of the properties of the page. The background color, the font you wish to use, etc. To do this, using the menus at the top of the page, click Modify Page Properties9. The following window will pop up. Explore and alter settings. See how it works. Dont pick background/text colors that hurt the eyes or that make text hard to read.10. Now well start with the layout of the page. Many sites use tables to lay out their designs. The tables are fairly easy to work with and allows you to position page elements where you want them (within reason)11. Lets insert the table that will contain your header, sidebar, and body of the pagea. From Dreamweavers menus, click: Insert Tableb. The following window will pop up:c. Set:i. Rows = 2ii. Columns = 1iii. Table width = 800 pixelsiv. Border thickness = 0v. Cell padding = 0vi. Cell spacing = 012. You will now see your table!13. The top cell will hold your banner/page title (like my feet/title picture on B)14. The bottom cell will hold your pages content. Before you add any content, click into the bottom table cell. Right click then click Table Split Cell15. Split cell into Columns. Number of Columns 2. Click Ok.16. Your table will now look like this: (notice how the bottom cell now has two sections. The left hand side will be for your navigation links.17. Lets set up the navigation. Click and drag the little border between those two new cells so that the left hand cell is only 120 pixels wide18. Set your header to be 90 pixels high. a. Click in the top cell of the tableb. Look at the bottom of Dreamweaver and you will see a Properties section that looks like this:c. Set the Height (H) of the Cell to 90 and hit enterd. Notice how the tables top cell has changed size.19. Start filling out your first pages information. Title, sidebar links, content. N