How to Edit in Dreamweaver 8 / CS3 Table of Contents
How to Edit in Dreamweaver 8 / CS3 -1- How to Edit in Dreamweaver 8 / CS3 By: Charlie Pettypiece Table of Contents (Ctrl + Click to jump to topics) 1. 2. 3. 4. Basics: Layout of Dreamweaver Basics: HTML Basics: CSS Basics: DW Templates 5. What Not To Do 6. Adding Text/Bullets to Existing Pages 7. Adding a New Link to the Sidebar 8. Adding New Lab Members 9. Adding Links to Files and Pages 10. Adding Images 11. Advanced CSS 12. Site Setup in DW 13. Validation, Checking and Previewing Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -2- Basics: Layout of Dreamweaver (DW) Dreamweaver gives you the choice of making web pages from a Design or Coding point of view. Editing in the Design view is more akin to using a word processor (you can type directly on to your page, using bolding/italic effects, and DW will automatically enter the code for you), but it limits you in what you can accomplish. Editing in the Code view presents more possibilities, but can be difficult for beginners (and doesn’t allow you to view your changes as you work). The solution: USE BOTH (the Split view)! With the Split view you can see both the code and the design simultaneously. Also, by positioning your cursor or highlighting a part of one view, DW will highlight the corresponding content in the other view (making it easy to find the code for a particular part of the web page.) At the bottom of the screen, notice that DW will show you what tags are associated with the content you have selected (more on html/css tags later). The Properties window gives a more user friendly overview of the properties associated with the selected text. Typically all of the stylistic settings in the properties window will already be set by your CSS file. I only use this window to create hyperlinks and sometimes to align text or pictures using the buttons. Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -3- On the right hand side of the screen you can expand and stretch the various windows to look like the following: • Have the CSS Styles and the Files tabs expanded, and make sure that the Properties for “…” window is expanded enough such that you can see all of the properties associated with the selected CSS tag. • • • Make sure that you select the button, as it will only show you those properties that are being used by that tag (rather than all possible properties) The Files tab shows you which site you are currently working with (CulhamLab) and will allow you to view all of the files and folders contained within your site’s root folder. (more on how to set up a site in this manner later) o This tab will also allow you to synchronize and update your remote site (located on the web server) with your local site (located on your computer) o With this Files tab you will never need to use My Computer to open/view/create site content (in fact I would advise against it) Mostly you will be using the Properties for section for the purpose of editing CSS tags Basics: HTML It is always helpful to know a few basic things about html coding before trying to edit or create a web page. First of all, when making a new blank page in DW you will notice that it automatically puts a bunch of crap in the code view. (To view this your self, click the button at the top left, go Blank PageÆHTMLÆ<none>) The only important things to know about this junk DW automatically inserts is that all the content for your page goes after the <body> tag and before the </body> tag, and that the title for your web page (which will appear here: in your browser) goes in between the <title> and </title> tags where it currently says Untitled Document. Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -4- You may now have gathered that all html tags begin and end with < > brackets. These brackets separate the tags (which specify the type of content) from the content itself. You can see below that DW colorcodes HTML tags in blue and regular content in black. • Whenever you ‘open’ a tag, such as the common paragraph tag <p> you must at some point close the tag by inserting a forward slash into the tag as such: </p> o DW does this automatically when typing in the code view. Simply typing </ will automatically close the most recently opened tag. o Simply put all the text you want to be covered under that paragraph between the <p> and </p> tags Here is an example of some of the most commonly used HTML tags: • • • • <div> : stands for division, used for dividing your web page into discrete sections (header, menu, sidebar etc.) o Each division has a name that corresponds to a name in the CSS file o Here the wrap division it is responsible for centering all the content in an area that is 775 pixels in width. o Properties such as width for each division are specified in the CSS file under the wrap tag o Often it is necessary to have divisions within divisions <h1>, <h2>, <h3>, <h4> : stands for header, there are only 4 o properties for each of these (such as color, underline, indentation) are also specified under corresponding tags in the CSS file <ul>, stands for unordered list, meaning that it produces bullets rather than ordered numbers o If ever you want to make such a list, a <ul> tag must precede the list, and a </ul> tag must occur at the end of the entire list. o Each item in the list is surrounded by a <li> (list item) tag, as shown above. <strong>, used for bolding text, <em>, used for italicizing text Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -5- Basics: CSS CSS stands for Cascading Style Sheet. In short, CSS is to style as HTML is to content. More specifically, for any given web page you can have one or more CSS files (.css) that dictate the style for all the pages in your site. The CSS file will contain the properties for each of the HTML tags listed above (and much more). So if you want to have your regular paragraph font to always appear green on every web page in your site, you simply state the color property for <p> to be green. Without a CSS file, you would have to stipulate ‘FONT COLOR = green’ for every paragraph on every page in your site. CSS files therefore make it very easy to make changes to the style of your site. If you want to change the bullet image for every list item on every page in your site, for example, you simply change the bullet image property in the CSS file, rather than editing every page. In the head of each page (where DW automatically throws all that junk I mentioned before) you will see the line: This tells your web browser where to go looking for the linked style sheet. The link above is relative to the site root, pointing to a CSS file called all.css in a folder called Style (where DW automatically places CSS files). You may sometimes run into problems where you can see the content, but your style/colors aren’t showing up right. This line is usually a good place to start looking for problems. The image on the right shows DW’s representation of the attached style sheet. You can see the title of the sheet at the top (all.css). You will recognize the p, h1, h2, li, etc. HTML tags. All of the tags beginning with ‘#’ are <div> tags. You will also notice that some of the division tags also have HTML tags after them (ie #sidebar li). These tags will set properties for those HTML tags that only apply when those tags occur within the specified division. To add properties to any particular tag, simply highlight the tag in the list and select Add Property in the Properties window. Click or double click the tag itself to view all available properties. There will be more on CSS properties later. You may also wish open your CSS file with Dreamweaver (DW will do this automatically when you edit any of the CSS tags in the CSS Styles tab). This I find to be useful when creating new CSS tags because you can simply highlight old ones, copy them, and rename the tag. The following is a CSS file opened in DW. Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -6- Highlighted here are comments that I inserted to help keep track of tags. These have no function in the file itself. The /* … */ tells your web browser to ignore the contents. You can also see that the name of the tags appear in pink, with the properties in dark blue and the property values in light blue. Basics: DW Templates DW offers the ability to turn any page that you have created into a Dreamweaver Template (DWT file). These files can specify which divisions of your page will be editable, and which will be fixed to the content specified in the template file. • To do this simply select FileÆSave As o Select Template Files (*.dwt) from the file types dropdown menu I have found this feature to be particularly useful for things like menus and sidebars. These are divisions that will remain constant for all of your pages on your site. However, if you want to say add a new item to your menu, normally you would have to add that item to every page in your web site. However, if all of your pages are based on a single template, and the menu region is fixed (not editable), then simply adding a menu item to your template file will automatically update any file using that template with the new item. (This is how I have made www.culhamlab.com, www.fmri4newbies.com and www.jodyculham.com.) Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -7- Below shows a DWT file called all.dwt open in DW. I have specified an Editable Region using the highlighted button and called it ‘Body’. As you can see in the Code view, it is surrounding the Body division and all the tags within. In design view the editable region appears as a blue outline. • If you want to create a new page using a template you created or one I have already created, select FileÆNew… Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 • • -8- You will see the three sites I have created in the site field, choose the one you would like to add a new page to (you will only see these if your have set up DW’s site manager properly; more on this later) o For the CulhamLab site, I have made two templates; one for the Lab Members section and one for the rest of the pages Select the desired template and click Create Below I have created a new page using the all.dwt template for CulhamLab. Notice that all the code outside the editable region is grayed-out and cannot be edited. If you want to edit this code for whatever reason, you must do it outside of DW. NOTE: You can always use notepad to open any HTML, CSS or DWT file. When you’re more comfortable working with code, you can edit with notepad rather than using DW. Just make sure you upload your changes to the remote and local sites. The top right corner of the design view displays what template the page is referring to. You will also notice that when moving your cursor over the non-editable regions in the design view, your cursor will turn into a . Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 -9- • When altering your template file, you will be prompted to update any file that is linked to that template file. • Select Update At this point we are past the basics and I will be outlining how to perform specific alterations to the web sites I have created. Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 10 - What Not To Do • Whenever possible, ALWAYS edit site content within DW o As I will discuss in more detail later, I always keep 2 copies of the sites. A Local one on a lab computer and a Remote one on the Psychology web server. o DW is setup to save to both locations when any alterations are made. If you edit outside of DW, you must manually upload the changed file using the button in the Files tab o Ensure that you have the site in which you are working selected in the Files tab in order for synchronizing to work properly • • • • • • Leave <div> tags alone, don’t move them in HTML and don’t edit their properties in CSS o Work around them where ever possible o If things start looking out of whack, you may have accidentally moved a <div> or inserted content that extends past the set dimensions Do not add new editable regions or change existing editable regions in any of the templates I created o This can cause MANY PROBLEMS that can quickly become irreversible o Only change content in non-editable regions (such as the sidebar) and promptly save and update Do not alter the site properties o You may access them through the Manage Sites… option seen in the dropdown menu above Try to keep the existing folder structure for each of the sites (CSS file located in Style, DWT files located in Templates, images in Images, ALL HTML pages in ROOT folder, etc.) Keep naming consistent, avoid using spaces in page names Leave the Hit Counter alone, it will disable itself if you change any of the code surrounding it Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 11 - CulhamLab • Leave the following CSS tags alone (ones that start with a period), they have specific dimensions and apply to many of the pictures on the three sites • I would not recommend altering anything to do with the top menu o Here I have highlighted the two template files that specify content for the menu, as well as the CSS tags that specify the properties (width, padding, etc.) o The menu is very tricky because it displays slightly differently in different browsers (Opera, Safari, Firefox, IE) therefore slight changes in the amount of text, width, or padding can completely throw off the design Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 12 - Adding Text/Bullets to Existing Pages Regular text can be added to any page by simply typing as normal in the Design view, or by surrounding the desired text in <p> </p> tags in the Code view If you wish to add a new bullet to, say, the News section on CulhamLab, do the following: • Please cursor at the beginning of the previous bullet • • Press Enter Type News entry into the bullet created above and highlight the date part of it • Now under the Properties window at the bottom, select the CSS date style • You can accomplish the same by simply copying the previous news entry in either the Design or Code view, pasting it above, and editing as needed Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 13 - The same steps apply for making new News entries in the fMRI4Newbies page. However, for fMRI4Newbies there is no CSS date style. Instead you simply Bold the date section. The same general procedures apply to adding new content to the tutorials/resources sections. You will find that when inserting new text or bullets, it is often easiest to use the Code view to get an idea of where the formatting is coming from. Then simply copy and paste within the same division to add new stuff. Adding a New Link to the Sidebar The procedure for doing this will be essentially the same for all three sites. The only difference will be that for CulhamLab, you will have to do it for both DWT files (all.dwt and members.dwt). • • • Select the CulhamLab site from the Files tab Open all.dwt from the sitemap explorer window In the Code view, find the section where the list corresponding to the sidebar is located (under ) o Highlight one of the existing list items (starting with <li> and ending with </li>) o Copy the list item and paste it (in the Code view) in the desired spot in the list o I will copy Lab Photos and paste it at the beginning of the list • Now rename the text to how you want it to appear, lets say Home o You also must rename the link if you want to change where the item will point o I will change the link to index.html (the universal name for home pages) NOTE: You can also link to your index.html file by simply typing “.” Instead of “index.html” (this is more proper) Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 • • • - 14 - You will now notice that the new item has been added to your sidebar in design view. Now simply save the template file and click Update when prompted Again, if you are editing the CulhamLab page, you must do this twice, once for each of the two templates. Adding New Lab Members • • • • • Select the CulhamLab site from the Files tab Select FileÆNew… Select Page from Template CulhamLab should already be selected and you will be given the choice of opening all.dwt or members.dwt o Open members.dwt Simultaneously open another Lab Member’s page as a guideline for formatting sections on Education, Publications etc. Currently I store everyone’s pictures and CVs in a folder called Members, so it’s a good idea to store new pictures and new CVs in the same area for organizational purposes Now highlight the following text in the Code view • Copy the following text, and paste it over what you have highlighted • • <div id="content1"> <div align="center"><img src="Members/MEMBER.jpg" alt="MEMBER" width="146" height="176"/><br /> </div> <h2 align="center"><a href="Members/MEMBER CV.pdf" target="_blank">Link To CV</a></h2> </div> Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 • - 15 - Should now look like this: • Now replace anywhere that says MEMBER with the new person’s name (corresponding to the names you have given their photo and CV in the Members folder) in the code view NOTE: alt=“MEMBER” identifies the content of an image for the visually impaired • You will notice that the picture has been horribly stretched o You can play with the dimensions by dragging in the design view or by changing the values under height and width in the code view o Make sure that you do not exceed the dimensions of the Content 1 division NOTE: You can delete the Link To CV that appears in the Content 2 division, as it is now located below the picture • Remember to change the Title of the page to the name of the lab member • Once you are finished adding content, save the page as the new member’s name o Make sure you save it to the root directory of the CulhamLab site (with all the other HTML pages) Next you must add a link to the LabMembers.html page, so that you can get to the new page you have created o Creating links will be covered in the following section • Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 16 - Adding Links to Files and Pages Let’s say that you have entered some text that you want to make link to another page. There are a few ways to do this. First I will look at what links look like in code: • • <a href=“nameofpage.html”> is how links appear in HTML code o a href I think stands for hypertext reference o You end the link with </a> If I wanted to make the text ‘Richard Nixon’ into a link, I can simply type the following: <li><a href="Richard Nixon.html">Richard Nixon</a></li> NOTE: To share the same formatting as the other Lab Members, I must also bold the text. However, there is an easier way. • Highlight the text you would like to use as a link • Now look to the bottom Properties window, there are three ways to link from here: Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 • • • • • • • - 17 - 1. Type the name of the html file you would like to link to. If the desired page is in the root directory, simply type the page’s name. If it is in a folder in the root directory, you must first type the folder’s name, then “/’ then the name of the desired page. (ie. Members/Richard Nixon.html) 2. Use the target button to drag to the file in the Files tab you would like to link to. The neat thing about this way is that it will automatically type the proper pathway to get to the file once it is selected. 3. This button will open an explorer window to search out the desired file. I DO NOT recommend this way, because it will allow you to access files outside your site map, which can screw things up. Once you have successfully linked, the Target field will become active o This field determines where the new page will open up o Leaving field blank – open in same window o _blank – opens in new window/tab o the rest – I don’t know Typically, when linking to other pages within the same site, you just leave the field blank and have the link open in the same window When linking to pictures, outside pages or PDF documents, I would select _blank so your browser will open a new window For files, the same procedures apply o If the file is of the type that your browser will open a Download dialog box, then leave the target box empty (that way you wont open up and new blank page just to download a file) o The exception is the PDF file, because it usually opens inside the browser Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 18 - Adding Images • To add an image, you can either click the image button under the common tab, or you can go InsertÆImage: • • You can also drag an image directly from the Files tab into the design view When inserting an image, you will be prompted with the following box: • DW wants you to enter a small description of what the image is (for the sake of screen readers for the visually impaired) Once an image has been inserted, there are a few options you have with regard to formatting • Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 • • • - 19 - You may make the image into a link (either to another page, or to a larger image) You may specify the alignment of the image You can also choose from different Classes, which are specified in the CSS file. o For the PDF button, I created a class called pdflink, which puts padding on either side of the image and gets rid of the boarders DW puts on images when they become links o Another useful class is imglink, which pads all sides of the image and gets rid of link boarders (I use it on every linked image I insert) Advanced CSS body • The body tag contains general properties of the web page • Here you can set the background image, as well as its position, how it repeats and whether it stays attached to the text during scrolling or stays fixed • I have been told that to avoid certain problems with some browsers, it is also proper to set margin and padding in the body tag to zero a: • These tags set the properties for hyperlinked text • Typically each has a different colour o link: unvisited text link o visited: visited text link o hover: properties during mouse-over Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 20 - Difference between margins and padding? Padding creates space between content (text or images) and the border around that content. Margins create space between the border around content and other content. li • • Under the list item tag, you can set the image that will be used as a bullet I suggest using PNG images o They allow for transparency and a larger color range than GIF images #wrap • Leave this tag alone • It sets the properties for the main division that contains all the other divisions • Changing these properties will make drastic changes to the appearance and position of the site in the browser window Typical div tags (ie header 1) • Each division can have its own background image o For my sites, the header is just the background image for the header division • Float is a property that sets the position of divisions within other divisions (I think) o I set float for every div to left, because then the divisions will stack in order • Each division also has a specified height and width in pixels o You may use other units to fit the needs of your design (ems, %, etc.) Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 21 - Site Setup in DW Here I will the outline the process of setting up a new site in DW. This involves setting pathways to the local and remote folders, specifying the domain, setting up the images folder, and setting some other useful properties. • • • • In the Files tab, select the following: Next, select New…Æ Site o I will assume here that you are setting up DW to edit CulhamLab, fMRI4Newbies or JodyCulham on another computer Make sure the Advanced tab is selected Under Local root folder, browse to the root folder of the site on your computer o This first assumes that you have an up to date copy of the entire site on your computer (this can be accomplished by mapping a network drive to the Gemini psychology server and directly copying the three root folders off) • • • • • Charlie Pettypiece [email protected] The root folders are named CulhamLab, fmri4newbies and jodyculham Next browse to the images folder that is inside the root folder you previously chose Type the web address of the site (http://www.culhamlab.com, http://www.fmri4newbies.com, http://www.jodyculham.com) Leave links relative to document selected Next, select Remote Info in the left menu How to Edit in Dreamweaver 8 / CS3 • • • • - 22 - Select Local/Network from the Access dropdown menu Now browse for the root folder on the remote server (again, you must map a drive to access this folder on the Gemini psychology server) Ensure that the following boxes are checked: This will ensure that DW saves changes to both the remote and local copies of the site • • • • • You can switch whether the Files window displays the remote or local version of the web site Buttons I frequently use are highlighted and include refresh, put and synchronize o Put will copy the selected file(s) from the local to the remote server o Synchronize looks for the most recently edited and updates accordingly (I think) Charlie Pettypiece [email protected] Select Site Map Layout from the menu Again, browse to the local root folder of your site and select index.html Leave the rest of the options alone and click OK How to Edit in Dreamweaver 8 / CS3 - 23 - Validation, Checking and Previewing There are a number of checks that DW has built in to make sure your code is properly written and that your site will look relatively constant across different browsers. • • • • To perform a Browser Compatibility check, select the following from the top menu: This will only test the page that is currently open When the check is complete a results window will pop up o This will give you information what where the problem occurs (line # in code view), what the problem is called, what browsers it affects, and what the nature of the problem is I common problem I come across is the Extra White Space problem. o This means that when making a list, you have left white space between where the first item ends and the next begins o If you come across this problem (usually after adding a new item to the sidebar) simply fix it by deleting all the white space between list items, as follows: After doing a series of edits to multiple pages, it is a good idea to perform Validation. This can be done either only to the currently opened page or to all the files in your site at once, as follows: • To perform the check on all your html files, simply highlight them all in the Files tab • Do not choose Entire Current Local Site (it will take too long and scan unnecessary files) Some of the pages (on CulhamLab in particular) will always come up with errors. That is because some of them are made with tables, and DW does not like tables. Ignore these (ScreeningForm, fMRIJournalClub, etc.). The most commonly flagged error is including characters like “ % $ & < > in your HTML code. If you want those characters to display properly in a browser, you cannot just type them into the code screen. You can, however, just type them into the design view and DW will automatically write the proper code from them. Alternatively, by typing & in the code view, a dropdown menu will appear that gives you the code for each of the symbols. You can type it or just select it from the menu (includes semicolon). Charlie Pettypiece [email protected] How to Edit in Dreamweaver 8 / CS3 - 24 - Finally, as you are working, is it always helpful to preview your changes in a web browser. You can do this by simply having the URL for the site opened in a browser and refreshing as you work. However, DW also allows you to view changes to your local site via the following button: If you have DW setup to not automatically upload to the remote server, and you just want edit the local site (for precautionary reasons maybe), then this button is useful for previewing your progress. Remember to preview your changes in as many browsers as possible. I suggest the following five: 1. 2. 3. 4. 5. Firefox Internet Explorer 7.0 Internet Explorer 6.0 Safari Opera I’ve tried to make the site as consistent as possible across these 5, but there will always be slight discrepancies. Charlie Pettypiece [email protected]
© Copyright 2024