Wiley Dreamweaver CS4 Digital Classroom, (Book and Video Training)
Contents
1. Questions 1 From what two locations in Dreamweaver can a new document be created 2 In what three views does Dreamweaver allow you to view and edit documents 3 True or False When a web page is requested it is delivered to a user s browser as a completed flat file ready for viewing Answers 1 From the Welcome Screen or by choosing File gt New 2 Design Split and Code views 3 False Files are delivered individually the browser uses HTML code to assemble the resources together to display a finished page Lesson 1 Dreamweaver CS4 Jumpstart 332. TE The Fungo exhibk ts here becouse spring tme Is sound the Aleea Geis MEI Wear corner Thal maana baseball aasan if back and Uva Saronaubics D ae a Threagh Sperta sxhibit has the HEL Funge teem raady Eo ming team o sssisY Canlaci Ls ech Taya B F fa the bat Always sonder shy the ball leaps Into the ak off the bat cog random lari coat iit sseui De why tha ball akida acrcas the amp rt bo the infieldere Liva anedha dopis lie ee achitit om whebssar Se demansbakions mill happen en the holes Bring yaur glave Lote cd good siut heganning her and try it out Learn It s not slime onze or goo that keepa that gecko on the wall How does It work Go ba the Seino of Skeky exhibit and ceed arowad en Sar indira wall and find ou Welcome to MEI Weleonve to Tha Knight Cnabtube When pours visiting MEI yeu Il loome track of bis Howe snd hours of vieus srd tactiles expences seit a4 Exhibits Ak MET B e rxt just lesming skout karr things sre ie about learning how things work Wa dant shor you an imaga with lats of taxt to demonstrate aur exhibits fou actimel pacticinete maida tha axhibita Whether ita learning sncut seccdpoermice through Alting go galls or throwing bassballs diving an expedmertal spaceship around bas olar avatar playrig ml shear pracara bo power a lailo wasting r r schanier or ceiving Strain up a mcunksin asas yaur ceehviby w neH ping to rum taa exhibit body theo ighdr i i el Q ore e see GEE
3. allows developers to use familiar tools to build their applications and easily deliver a single application installer that works across multiple operating systems Adobe Dreamweaver CS4 Digital Classroom An overview of features Subversion Dreamweaver now includes Subversion a version control system similar to CVS and Visual Sourcesafe VSS Subversion is typically used by companies to maintain a team environment on larger projects that require changes to be logged and versions to be controlled Previously in Dreamweaver if you wanted to maintain versions you would have to do the work yourself maintaining folders and copies of previous versions With Subversion all files are kept on the Subversion server Changes are tracked so that you can restore your project to any previous state An overview of features This book is dedicated to exploring learning and putting to use all that Dreamweaver has to offer This section looks at some of the application s key features Three different points of view When you edit a document Dreamweaver lets you see your work in one of three views the Design Split or Code view Dreamweaver s easy to use Design view lets you build visually and see everything come to life as you create your pages More experienced web designers and coders can use the Code view to edit a document s HTML code and scripts directly enhanced with easy to read color coding and visual aids For those who l
4. ce Unicode FE Live View enables you to interact with your pages When you select Live Code while in Live View mode you can see in real time how visually changing your page affects the code behind the scenes You can preview your code as classes are added and removed using JavaScript as dynamic content is inserted using Spry and much more It s one thing however to preview these states and another to effectively work with them The Freeze JavaScript button or the F6 key freezes your page in a particular state for example with a menu locked open and a hover effect in place You can then edit those interactively displayed elements directly in Dreamweaver without having to use the Preview in Browser feature F12 and your favorite web browser Lesson 1 Dreamweaver CS4 Jumpstart Live View 11 Related files Related files Web based projects are becoming more complex than ever before and you often find that even a single page is composed of a variety of assets These assets can include Cascading Style Sheets CSS external JavaScript files or even server side includes Dreamweaver CS4 has a new feature that will help you be much more effective at designing and managing sites and applications with multiple assets The Related Files bar now runs across the top of your document window just below the document tabs The bar shows you all the various files that combine to create your finished page Switch between t
5. easier to write and read HTML and other languages Lesson 1 Dreamweaver CS4 Jumpstart 19 An introduction to HTML Tag structure and attributes HTML uses tags or bracketed keywords that you can use to place or format content Many tags require a closing tag which is the keyword preceded by a forward slash 1 Choose File gt Open When the Open dialog box appears navigate to the dw01lessons folder Select BasicHTML html and press Open 2 Select the Split button in the Document toolbar to see the layout as well as the code that makes up the page Take a look at line 10 indicated at the left edge of the Code panel The text My Bold Title is inside a Strong tag which is simply the word strong contained within angled brackets Any words or characters inside these tags are formatted in bold and appear as shown in the Design view Fie Edt wew leet Mody Fomat Commands She Widow Hep M Se DESIGNER COMP EasikHTML bind Bab CoBecuments and Sect ngs acids AAEH De sbtap jahe I 1 s SORT r a l jsafeode 45 sae _a oesmn ejuneview e oP vecd Tile Puk a teie here Me g e Loe fi heke 1 lt lt DOCTYTE bcl MALIC lt J03C DT XETHL 1 0 Teaicimal EN acep Ame wS argi Mehl 1 01 kkl teat clone dod 2 chal xelnag bhoo feo wd orgs L099 eho Pal Tear Ted 40 etA ATE egds Conrene Type connie Tee hal charaoreart k fs crirtlestur a Title heres cides fi a heute cpeNy Cea and pictur
6. is an excellent coding and development tool for new and experienced users alike and it has quickly become the preferred web site creation and management program providing a creative environment for designers Whether you design web sites develop mobile phone content or script complex server side applications Dreamweaver has something to offer Design and layout tools Dreamweaver s many icon driven menus and detailed panels make it easy to insert and format text images and media such as video files and Flash movies This means that you can create great looking and functional web pages without knowing a single line of code Dreamweaver takes care of building the code behind the scenes for you Dreamweaver does not create graphics from scratch instead it is fully integrated with Adobe Photoshop CS4 so you can import and adjust graphics from within the application INSERT Common Y h Hyperlink Email Link ofits Named Anchor Horizontal Rule Table El Insert Div Tag The Insert panel features objects in several categories that let you easily add images web forms and media to your page Site management and File Transfer Protocol Dreamweaver has everything you need for complete site management including built in file transfer protocol FTP capabilities between a server and your local machine reusable objects such as page templates and library items and several safety mechanisms such as link checkers and site
7. new HTML document in Dreamweaver this framework is created automatically before you add anything to the page Any visual elements you add to the page are added using the appropriate HTML code inside the lt body gt tags 22 Adobe Dreamweaver CS4 Digital Classroom An introduction to HTML Placing images in HTML You use some tags in HTML to place items such as pictures or media files inside a web page The lt img gt tag is the most common example its job 1s to place and format an image on the page To place an image and see the resulting code follow these steps 1 Choose File gt Open When the Open dialog box appears navigate to the dw01 lessons folder Select the Images html file and press Open to edit the file 2 Click the Split button in the Document toolbar so that you re viewing both the layout and the code for your page In the Design view portion of the Split view click below the line of text to place your cursor underneath it This is where you ll place a new image GE fe Eit vew Inset Mody Foma Commands Ste Window Hep m B DESIGNER COMP Ins shnl Pathe Gienek and Seth rege dmn Mook ar Ceskhop chdsssore kl esns rages r i alcoi 5m alDesian Llin wew ai acude Tite Your Prst megs AS g E EL A pt FEA eck rage E 7 l S IDOCTYF2 OTEL PUBLIC s DICCI MTAL 4 0L FEO htepi ys wed ocg TR tals sterii dtd Shtal heady webs Wthp equirs Comtent Typs oontent textehtl che
8. reports so that you can ensure that your site works well and looks good If you re designing your pages with Cascading Style Sheets CSS the Browser Compatibility Check and CSS Advisor features will help you to locate and troubleshoot any potential display issues that may occur across different web browsers Adobe Dreamweaver CS4 Digital Classroom What is Dreamweaver Coding environment and text editor Dreamweaver lets you work in a code only view of your document that acts as a powerful text editor Edit HTML code directly and switch views to see the results of your code as you work Features such as color coding indentation and visual aids make Dreamweaver a perfect text editing or coding environment for web designers of any level For more experienced developers Dreamweaver also supports popular coding and scripting languages such as JavaScript and several server side languages including ColdFusion PHP and ASP NET Specialized insert menus and code panels help you to build pages and applications in the language of your choice ca code ispit af Design _ uveview w ive code Title Put a btie here Of GG ELS p ff checkrage l DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Transitional EN herp in wa 0c TR xR DTD xntull transirtional dtas ki See html xmlnss hetp fon ws org 1999 xhtnl gt Se ee chead gt Eee eta hetp eguiv Content Type Content Text titml charsetsuce 3 s gt Tt eee ctitle
9. web sites on its premises The role of web browsers A web browser is an application that downloads and displays HTML pages Every time you request a page by clicking a link or typing in a web site address you are requesting an HTML page and any files it includes The browser s job 1s to reconstruct and display that page based on the instructions in the HTML code which guides the layout and formatting of the text images and other assets used in the page The HTML code works like a set of assembly instructions for the browser to use An introduction to HTML HTML is what makes the Web work web pages are built using HTML code which in turn 1s read and used by your web browser to lay out and format text images and video on your page As you design and lay out web pages in Design view Dreamweaver writes the code behind the scenes that is necessary to display and format your page in a web browser Contrary to what you may think HTML 1s not a programming language but rather a simple text based markup language HTML is not proprietary to Dreamweaver you can create and edit HTML in any text editor even simple applications such as Windows Notepad and Mac OS X s TextEdit Dreamweaver s job is to give you a visual way to create web pages without having to code by hand If you like to work with code however Dreamweaver s Code view discussed earlier is a fully featured text editor with color coding and formatting tools that make it far
10. wth steam preerure to Dair a atori crtana Adi edliaiives oe david a been uo a ankan Dass trl beds thrGolligHdr gt sdriookarrr lt i bodvbest manmancontent gt m bodrtsz mein lt imo kee TOO i S oe a Rulers a document grid and guides help you to size and position page items with precision CSS panel Take advantage of the vast design and formatting options that CSS provides through Dreamweaver s full featured CSS panel which lets you create edit and manage styles on the fly from a single panel How web sites work Before embarking on the task of building web pages and in turn a web site it s a good idea to know the basics of how web sites work how your users view them and what you need to know to make sure your web site looks and works its best Lesson 1 Dreamweaver CS4 Jumpstart 17 How web sites work A simple flow chart What happens when you type in a web site address Most people don t even think about it they just type in a URL and a web site appears in a flash They likely don t realize how many things are going on behind the scenes to make sure that pages gets delivered to their computers so that they can do their shopping check their e mail or research a project User Machine client http www yoursite com Web Host Server e lt html gt fii When you type in a URL or IP address you are connecting to a remote computer referred to as a server and downloading th
11. E furga teem ready ko ming i EEEE E pd tha bak lwavs aondar aby the ball aapa into tha ar off tha bak F Sema random tactdhat tala abort Gr why the ball skids across the drt to the inlielders Live eee bie Le ai Ea el E Lets of goad shh capeaning her e sa a ace SPER S S EE RR Contact We ea dereonsteations wlll happen on the boal howes Being pour glove and try t nuk stbedy thr CollioHdes lt divatcontainer sdbetheader HL gt Cue 4 100 JIA xb fae J FE unicode ITB The Split view lets you edit your page visually while seeing the code being created behind the scenes Built in FTP You can easily upload and download files to and from your web server using the Files panel s drag and drop interface or use the Get Put button at any time to post pages you re currently working on There s no need for separate software Dreamweaver also provides Check In Check Out functionality and synchronization features for easy management Lesson 1 Dreamweaver CS4 Jumpstart 15 An overview of features Page and code object Insert panels You can find intuitive icons for most common web page elements in a categorized Insert panel from which you can add elements to your page with a single click You can use additional panels to fine tune any page element to ensure that you see exactly what you want Included in the default Insert panel are tools for formatting text building forms and creating layout
12. IP addresses 18 Adobe Dreamweaver CS4 Digital Classroom An introduction to HTML Servers and web hosts A DNS server is responsible for matching a domain name with its companion IP address Think of the DNS server as the operator at the phone company who connects calls through a massive switchboard DNS servers are typically maintained by either the web host or the registrar from which the domain was purchased Once the match 1s made the request from your user is routed to the appropriate server and folder where your web site resides When the request reaches the correct account the server directs it to the first page of the web site which is typically named index html default html or whatever the server is set up to recognize as a default starting page A server is a machine very much like your desktop PC but it s capable of handling traffic from thousands of users often at the same time and it maintains a constant connection to the Internet so that your web site 1s available 24 hours a day Servers are typically maintained by web hosts companies that charge a fee to host and serve your web site to the public A single server can sometimes host hundreds of web sites Web hosting services are available from a variety of providers including well known Internet service companies such as Yahoo and large dedicated hosting companies such as GoDaddy It 1s also common for a large company to maintain its own servers and
13. Lesson 1 What you ll learn in this lesson e Exploring Dreamweaver s primary features e Introducing new features in CS4 e Understanding how web sites and web pages work e Coding HTML XHTML th basics Dreamweaver CS4 Jumpstart Whether you are a novice web designer or an experienced developer Dreamweaver is a comprehensive tool you can use for site design layout and management In this lesson you ll take a tour of Dreamweaver s key features and get a better understanding of how web pages work Starting up Before starting make sure that your tools and panels are consistent by resetting your workspace See Resetting the Dreamweaver workspace on page 3 You will work with several files from the dwO1lessons folder in this lesson Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD See Loading lesson files on page 3 Note If you want to get started creating a page jump ahead to Tag structure and attributes on page 20 Otherwise the next few pages provide you with an overview of key capabilities and features of Dreamweaver CS4 Lesson 1 Dreamweaver CS4 Jumpstart 7 What is Dreamweaver See Lesson 1 in action Use the accompanying video to gain a better understanding of how to use some of the features shown in this lesson The video tutorial for this lesson can be found on the included DVD What is Dreamweaver Dreamweaver
14. Rule x Selector Type 55 rule apply to your HTML according to a contextual selector type Cancel class ican apply to any HTML element gt Selector Name Choose or enter a name for your selector center Y This selector name will apply your rule bo all HTML elements with class center r F Less Specitic More Specific Rule Definition Choose where your rule will be defined This d t onl This document only Help Name a newly created style in the New CSS Rule dialog box 6 The text is now centered Take a look at the Code view and notice that the center rule has been added to the opening lt p gt tag GR fe eit vew iret mindy Foma Commancs Sita Window Hep m G By DESIGNER COME BaseHIMLhiml a a ath mer ard Setinge ddan Ps BU Ue a isto pibeseH IML hard i alene spt Lacan Lelike e aiea Tatas Put e tele here St g C E aA et FA Teke i ir ky i gt O EEE kal l F 1 chong Ree lt poWy cert and pictures go heee t i E E cpecececepeWy Bold Tinles acroneee p gt 17 ir Es 14 y B Bg qbid Ze eg ha gt Pi 5 i i Liy text and pichwee ge here i My Bold Tide sbedy gt lt p certer file gt 4 floor AA LEP ise Uniccds urna PROPERTIES E re Se ane a HTP Targeted Rule center Fort Cerul Font a z a Etak c e e O Page Propstiss Align or format text in the Property Inspector and then see t
15. T COLOR ec0000 gt Text lt FONT lt fOmnT color ccO000 gt Text lt EUNT a lt p align center gt This is one s entence lt bre gt lt br fatconge This ia another lt 3tcong gt p gt lt body gt lt html gt To create a line return hold down the Shift key while pressing the Enter or Return key Lesson 1 Dreamweaver CS4 Jumpstart 27 An introduction to HTML 4 To create a new paragraph position your cursor before the phrase This is another and press Enter Windows or Return Mac OS The text is separated by a line above and below and is wrapped inside a set of lt p gt paragraph tags i 12 Code soit Lu Design Live View 43 Live Code Title Untitled Document at Gy A 3 GB lt body gt l0 body gt lL sp gt dfont color sccO000 gt Texte tonte le lt FONT COLOR ccO000 gt Texte lt FONT A lt f0nT coloc ccO000 gt Texte foNc gt 14 rp 15 lt p ealigns centerc gt This is one sentence hr 16 br gt ly p gt 16 p aligne center atrong Thia is another lt strong p gt 20 lt body gt 21 lt html gt Text Text Text This is one sentence See a ee ee ee ee ee ee ee Sl ee ee eee ee ee ee ee ee ee eee ia a a a A ee ee ee ee eee ee ee ec Dreamweaver creates a new paragraph each time you press the Enter or Return key Other than a standard single space such as the ones used between words several consecutive spaces created by the space
16. a Dc cs DESE po Place an Toage Below co Spice Tadege up oop D piir arce iwages gears jpg alte Geeara wage bordere 2 20 po cibini e yogy frei a laja As you change or add options to a selected image Dreamweaver changes code behind the scenes 7 Choose File gt Save to save your work then choose File gt Close Note that in HTML images and media are not embedded but placed This means that the tags point to files in their exact locations relative to the page The tags count on those files always being where they re supposed to be in order to display them This is why HTML pages are typically very lightweight in terms of file size Colors in HTML In Dreamweaver s various panels and in your code each color is referred to by a six character code preceded by a pound sign This code is called hexadecimal code and is the system that HTML pages use to identify and use colors You can reproduce almost any color using a unique hexadecimal code For example you represent dark red in HTML as CCOO000 The first middle and last two digits of the hexadecimal code correspond to values in the RGB spectrum For instance white which 1s represented in RGB as R 255 G 255 B 255 1s represented in HTML as FFFFFF 255 255 255 Choosing colors is easy thanks to a handy Swatches panel which you can find in many places throughout the work area The Swatches panel makes it easy to work with colors Lesson 1 D
17. arter pages include many useful and common layout structures for e commerce photo display and utility forms Adobe Dreamweaver CS4 Digital Classroom Creating opening and saving documents Creating opening and saving documents The lessons throughout this book require that you create save and open existing files You can accomplish most file related tasks from the File menu at the top or from the Start page that appears when you launch Dreamweaver Creating new documents Dreamweaver creates text files commonly in the form of HTML files or web pages It can also create files in a variety of text based languages including CSS XML JavaScript and even Flash ActionScript You can create blank files that you build from the ground up or get started with a variety of layout templates and themes You can create new documents from the File menu or from the Welcome Screen New Document j x Layout ke i m Blank Fage B Blank Template HTML template Library kem KALT Entire page XSLT Fragment l column elastic centered Loedlumn elastic centered header and 1 column Fed centered 1 column Fixed centered header and F ActionScript 1 column liquid centered aho preview a Page from Template cas 1 column liquid centered header and f JavaScript 2 column eee left awed ri a an yh 2 column elastic left sidebar header ai A p i l 2 column elastic right sidebar r 2 column elastic r
18. bar are ignored and are displayed as only one space in Design view and in a browser 5 Choose File gt Save to save your work then choose File gt Close Tag hierarchy HTML tags follow a certain order of weight or hierarchy to make sure that everything displays as it should The tag at the top of the hierarchy is the lt html gt tag and every other tag you create is contained within it Tags such as the lt body gt tag always hold smaller tags such as the lt p gt paragraph lt img gt image and lt strong gt bold tags In addition structural tags such as those that create paragraphs lists and tables hold more weight than formatting tags such as lt strong gt bold and lt em gt italic Take this line of code for example lt strong gt lt p gt Big bold paragraph lt p gt lt strong gt Although code such as this may work in certain browsers it isn t recommended because the lt strong gt tag technically holds less weight than the lt p gt tag The following code represents a safer and more proper way to include the bold type lt p gt lt strong gt Big bold paragraph lt strong gt lt p gt 28 Adobe Dreamweaver CS4 Digital Classroom A look at the Welcome Screen Dreamweaver generally does a great job of keeping tags properly nested or contained within each other When you choose to manipulate the code by hand you should always keep good coding techniques in mind XHTML 1 0 Transitional Th
19. csebsuti o gt SoLele four First Iwegec ticle ifbeed shoddy lt pyPlace an Image Below to Spice Thibga up lt pe lt p rl ype 1L body wm am im fs il Pl l tbc a le e ang ebody gt pe ho Sh ins rs ee EPs Mioa tlre Enter the Split view before you insert the image onto your page Lesson 1 Dreamweaver CS4 Jumpstart 23 An introduction to HTML 3 From the Common category in the Insert panel on the right side of the screen click on the Images element and choose Image When the Select Image Source dialog box appears select the file named gears jpg located in the images folder within the dw0O lessons folder INSERT common Hyperlink Email Link Mamed Anchor Ge amp Horizontal Rule Table Insert Div Tag 777 nji lte E a ae Images Image Eh Image Placeholder N a Rollover Image Fireworks HTML Navigation Bar L Draw Rectangle Hotspot OD Draw Oval Hotspot Draw Polygon Hotspot Choose Image from the Common tab on the Insert bar 4 Press OK Windows or Choose Mac OS when the Image Tag Accessibility Attributes dialog box appears type the words Gears Image in the Alternate text field and press OK to place the image Image Tag Accessibility Attributes l x OK Alternate text Gears Image Long description http Cancel e Help TF vou don t want to enter this information when inserting objects change the Accessibility pref
20. e documents images and resources necessary to reconstruct the pages you will view at that site Web pages aren t delivered as a finished product your web browser Internet Explorer Firefox Safari and so on is responsible for reconstructing and formatting the pages based on the HTML code included in the pages HTML Hypertext Markup Language is a simple tag based language that instructs your browser how and where to insert and format pictures text and media files Web pages are written in HTML and Dreamweaver builds HTML for you behind the scenes as you construct your page in the Design view An Internet Service Provider ISP enables you to connect to the Internet Some well known ISPs include America Online and Earthlink You view web pages over an Internet connection using a browser such as Internet Explorer Firefox or Safari A browser can decipher and display web pages and their content including images text and video Domain names and IP addresses When you type in a web site address you usually enter the web site s domain name such as eBay com The web site owner purchased this domain name and uses it to mask an IP address which is a numerical address used to locate and dial up the pages and files associated with a specific web site So how does the web know what domains match what IP address and in turn which web sites It uses a Domain Name Service DNS server which makes connections between domain names and
21. e latest recommended version of HTML is XHTML 1 0 a stricter version of HTML that makes the language more compatible with newer platforms such as mobile phones and handheld devices which require code to be perfectly formed XHTML combines elements of HTML and XML a language used to describe data XML or Extensible Markup Language has become a popular method of exchanging information among seemingly unrelated applications platforms and systems By default Dreamweaver creates new web pages using the XHTML 1 0 Transitional standard What s the difference Although tags and attributes remain the same the structure of the language changes with XHTML becoming stricter Whereas HTML was very forgiving of sloppy coding practices such as overlapping or unclosed tags XHTML requires all tags to be closed and properly nested HTML doesn t care which case you use when constructing tags but in XHTML all tags must be lowercase For example a lt br gt break tag which normally doesn t require a closing tag now must be closed You can write tags to self close by using a forward slash making sure there is a space between the br and the forward slash and then closing the bracket like so apr 7S The result is a well formed language that takes advantage of newer browsers and device platforms while remaining compatible with older browsers Working with XHTML in Dreamweaver requires nothing more than selecting XHTML 1 0 Transitional as
22. eaver for the first time or new to web design keep in mind that some of these features are geared to intermediate or advanced users You may choose to skip this section and go directly An overview of the features later in this lesson CS4 introduces many innovative design and coding features as well as improvements to Dreamweaver s flagship features Because Dreamweaver is part of the industry standard Adobe Creative Suite it has been engineered to work as seamlessly as possible with files from other CS4 applications offering native support for Photoshop files and the ability to edit placed images directly in Adobe Photoshop CS4 New user interface When you launch Dreamweaver CS4 one of the first things you ll notice is that it now features a user interface that is consistent with the rest of the applications in the Creative Suite A highlight of this new interface is the workspace configurator which allows you to easily choose the most efficient workspace for the job at hand Hep Ely wv w Insert Ctrl F2 w Properties Chrl F3 Workspace Layout 755 Layout Hide Panels F4 App Developer Cascade App Developer Plus Tile Horizontally Classic Tile Vertically Coder Coder Plus w 1 BasicHTML html w Designer Designer Compact Dual Screen N Choose the workspace that matches your tasks or create your own Dreamweaver has included some common workspaces for you but you can also choose to create your own custom
23. erences Attach alternate text to your image The Image Tag Accessibility Attributes dialog box appears when you add images to provide additional information for users with special needs such as the visually impaired You should always provide each image with alternative text but you can disable this panel by choosing Edit gt Preferences Windows or Dreamweaver gt Preferences Mac OS In the Accessibility category uncheck the Images option 24 Adobe Dreamweaver CS4 Digital Classroom An introduction to HTML 5 The code shows that the HTML lt img gt tag has been used to place the image Click once on the image in the document window to select it The Property Inspector at the bottom of the page displays and sets the properties for the image 6 Inthe Border box of the Property Inspector type 3 to set a three pixel border around the image then press Enter Windows or Return Mac OS Click on the background of the page to deselect and note the appearance of the border The lt img gt tag now contains the border attribute which is set to a value of 3 just the way you typed it in the Property Inspector InsxsttnF Pat Cobo uments and Sect nE dmi Tce heat op dasse ra megs hon Tia Pour First image Ai Ga ES pt Gof eck Pape FEO http nnm gi one TR hold strict dtd ar 2 stl dhani Mee ta Aoop ei ss Content Type roatenT tektik charset snrti 8 BE Tle Pour First Tweges ticles E tf bead
24. es go here lt p gt Le F Oo F a totp Wold cpreaceoyNy Fold Title fences Ap 1 a l3 prThis keke oil appear inside of ite oan pearagcaphe ps it 15 E af a Db ee ed eae m 21 A E o mo m m e OO ee OP Oe i OU OPT Po Pm OU Oe Pe dE Tite Ady text and pichuree ge here A Gr Bold Tide bady lt p gt asrang Tis tet will appear inside of tts own paragraph Te Pe GQ toms ligt E sec Unicode T a A look at the code reveals the tags used to format text in your page Tags can also accept CSS rules that specify additional information for how the tag should display the content CSS rules can take a number of different values such as a size a color or a direction in which to align something Take a look at the line that reads This text will appear inside of its own paragraph This line 1s enclosed in a p paragraph tag which separates it from the other text by a line above and below You can add a class rule to this to align the text in whichever direction you want 3 Highlight the entire line that reads This text will appear inside of its own paragraph at the bottom of the Design view 4 With the CSS button selected in the Property Inspector locate the paragraph align buttons Press the Align Center button 2 20 Adobe Dreamweaver CS4 Digital Classroom An introduction to HTML 5 Inthe New CSS Rule dialog box type center into the Selector Name field and press OK New CSS
25. gt Put a title here lt title gt lt head gt i 7 EJ lt body gt EE poy text and pictures go here lt p gt ie patrony Bold Title lt stronge lt p gt i 11 s EEE p gt THiS text will appear inside of its am paragraphs p gt ita MIRER lt body gt Code view is a full featured text editor that color codes tags and scripts for editing that s easier to decipher Scripting languages such as those used to build interactive web pages or e commerce sites fall into two categories client side and server side Client side languages such as JavaScript run in your browser while server side languages such as ColdFusion require special software installed on the server to run Who uses Dreamweaver Dreamweaver s popularity is a result of its diversity Its ability to take a site from conception through to launch and maintenance afterward amakes it a preferred tool among industry professionals businesses and educational institutions However it remains easy and accessible enough for novice designers to get up and running quickly It s not unusual to see Dreamweaver utilized for personal projects or by small businesses and media professionals such as photographers and painters to maintain a web presence Lesson 1 Dreamweaver CS4 Jumpstart 9 New user interface What s new in Dreamweaver CS4 In this lesson you ll look at some of the newest features in Dreamweaver CS4 if you are using Dreamw
26. he appropriate rules and attributes created in your code Lesson 1 Dreamweaver CS4 Jumpstart 21 An introduction to HTML s For more information on formatting text with CSS rules please see Lesson 3 Adding Text and Images 7 Choose File gt Save to save your work then choose File gt Close The structure of an HTML document Although you use many HTML tags to format text certain tags are devoted to establishing structures such as lists tables or most importantly the HTML documents themselves The HTML tag is the most fundamental tag It is used to specify the beginning and end of HTML in a document lt html gt lt html gt Inside the main HTML tags are two tags that define the key areas of your web page the head and the body The head of your page contains items that are not visible to your user but are important nonetheless such as search engine keywords page descriptions and links to outside scripts or style sheets You create the head of the document inside the HTML tags using the lt head gt tag lt html gt lt head gt lt head gt lt html gt The body of your page is where all the visible elements of your page are contained Here is where you place and format text images and other media You define the body of the page using the lt body gt tag lt html gt lt head gt lt head gt lt body gt My text and pictures go here lt body gt lt html gt Whenever you create a
27. hese files using the Related Files bar without losing the visual preview of their parent page Design view or Live View always shows the parent file but you can now edit any of the related files without losing their important visual context Cm cosstyles css SpryMenuBar js SpryMenuBarvertical css The Related Files bar shows you the various files that are part of your finished page Code Navigator Using the new Code Navigator you can easily jump to any of the related files including the specific rules within that combine to create the final display of a selected element It is no longer necessary to look through multiple style sheets to find a specific rule It s now just a context menu click away in Dreamweaver With the Code Navigator when you hover over a CSS rule you are able to see the properties and values and click on them to navigate to that specific code As with related files you can do this without losing the visual context that s so important to creating interactive experiences font family Arial Helvetica sans serif Body font size 12px background color 660000 margin Opx background image url images bg gif background repeat repeat x Cmd Opt click to show _ Disable indicator The Code Navigator allows you to easily jump to any of your related files 12 Adobe Dreamweaver CS4 Digital Classroom CSS improvements CSS improvements The rebuilt Property Inspector reduces the risk
28. idgets html Open Getting Started New Features E Resources Dresmweaver Exchange _ Dont show again Create New TE HTML T ColdFusion 1 PHP TE ASP VBScript T XSLT centre page Tr css T JavaScript Th XML da Dreamweaver Site E More Top Features videos ey Related Files f ve vew The Welcome Screen appears when you launch the application or when no documents are open Here s what you ll find on the Welcome Screen Open a Recent Item A list of the last few documents you worked on appears in the leftmost column or you can browse to open a different file using the Open button at the bottom Create New In addition to HTML pages you can choose from a variety of new document formats such as CSS JavaScript and XML Dreamweaver 1s not just a web page building tool but also a superior text editor making it ideal for creating many non HTML files You can also define a new Dreamweaver site using the link at the bottom or choose the More folder for even more new file options Create from Samples If you re not up to creating a design from scratch or if you need a little inspiration Dreamweaver features several starter files ranging from complete page designs to stripped down starter layouts Starter page designs are categorized into several themes from Health and Fitness to Entertainment giving you plenty of options for getting started quickly and in style Basic st
29. ight sidebar header J Other eee iam 2 column Fixed left sidebar T ASP VBScript HTML document ASP NET C A ASP NET VB n ColdFusion ColdFusion component A JSP a PHP 2 column Fixed left sidebar header arm 2 column Fixed right sidebar 2 column Feed right sidebar header ai 2 column hybrid left sidebar 2 column hybrid left sidebar header ai 2 column hybrid right sidebar 2 column hybrid right sidebar header 2 column liquid left sidebar 2 column liquid left sidebar header ani 2 column liquid right sidebar Attach SS File Helo Preferences Cancel The New Document dialog box gives you a choice of new files in a variety of formats and templates Get more content 1 To create a new document choose File gt New The New Document dialog box appears 2 Select Blank Page and under the Page Type column choose HTML Under Layout choose lt none gt to start a new blank document Leave the DocType drop down menu at its default Press Create 3 Choose File gt Save or File gt Save As to start the process of saving your document 4 When prompted choose a location for your file and assign it a name Note that you must save HTML files with an html extension or they will not be interpreted properly in a browser This rule applies for files of any type such as xml css and cfm Lesson 1 Dreamweaver CS4 Jumpstart 31 Self study Opening a recently opened document To
30. ike something in between the Split view provides a split pane Design and Code view all at once You can easily change views at any time with a single click in the Document toolbar GY fe Eit view Inset Modify foma Commands She Window Hep Mile 3 DESIGNER COME SandeLoyauchtml Pack Ci Cocunenks ant Scttincs odoin MacBook GHitesocpitandel secur trl EPA bies Spykequba is Sprawia tartia os sa tode H5 50e a oesgn rine e 0 ve cod Tile Untied Document v amp El e Caf check page 32 taceipt sece dwlessons dul Llessons Spoyassecs Speyptewobar ja Types text qavascripe script a 36 lt link hrede dolesson2 do0llessonssSpryassets SpoyenerVecticel csa vele stylesbeet types ceatfcas fh WE as gbrad a 100 EF Lol dhot classe checolbighdes F E ka 103 diy ode container Lig ediv ide heeder s a Los O APET Eokmiehe Mmari bunch eg a LIE lo eni fhonder sede T L07 eddy id sideborl s Lid CO dd Eeniearl elaaa Merdeka res tical gt me Log Clizen Clags Konia iewsuboens ayet a Dacor sas L10 culy ghean A i SE OVEN n Taat aH I he McKnight Institute Disewer Po aa eee The Punga echiit ic here bur anhe dor Ese Spring season sy deat mis Being The Fungo exhib is hera betause spring time is ound the Ue ee ee eas commer That means baseball season Is back and the Aeronautics eo ae aay iy Threagh Saarte exhistt hae the HE
31. ion E ba 4 Recordset Paging The HTML data set feature allows you to import and present data in different ways Lesson 1 Dreamweaver CS4 Jumpstart 13 Photoshop smart objects Photoshop smart objects For this version Dreamweaver supports a key long standing feature of the other Creative Suite programs smart objects Dreamweaver CS4 offers support for Photoshop smart objects meaning you can drag a PSD file into a web page within Dreamweaver optimize the image for the web and even resize it If you later update the original PSD file a red arrow appears on the image in Dreamweaver indicating that the source file has changed You can then click the Update from Original button in the Property Inspector and a new version of the image is created Image Preview Options File JPEG e Preview Saved settings ec si Quality 79 0 Feil lions Format JPEG 34 28K 5 sec 56kbps anil Ie Smoothing No Smoothing Progressive browser display fe Sharpen color edges DISCOVER e Remove unused colors h Q fins eo Bue wi fi u mes Smart objects provide easier optimizing and updating of graphics Other new features Adobe AIR authoring support Adobe AIR is a cross platform system that lets developers combine HTML AJAX Adobe Flash and Flex technologies to deploy Rich Internet Applications RIAs on the desktop Because it fully supports Adobe AIR Dreamweaver
32. kta Leary LE the Spiing sazon 2 dant misih Bring ta Hiand co baal The Fungo axhibetis hara beceure rprng tma is around ths Shop E Baemiilk a TN torte Thal means baseball season ia beck ard Lhe arisia A Thecugh Sports cubbit has the MEI fungi team ready to swing Rie the Gat Always wonder shy the Gall leaps Into the sr off the hat aone ndon teed ateik abeat Eoo r why the Esll rkida merorce the dirt to the inf ldarr Lice Bette Cit ka on ehib aneharawet TT j ee al ged Aut hapanning ae denonyb akiona Fill happar on the haf hours bang sour gora ard try out antactiJs 417 00 px BOLO Leam SETAN opze or got ihat keeps that gerko on the wall Hos dons Ik wok aa the Science of Ridy awhikik snd amasl around om our indine wall snd find out Velcome to WEI aloones bo The Mckinight Instituta her gout ng visiting WEI vou loose track of Hee Hours sod hours of visual and tacthe cependenoss awak Exhibits MEL it s net gust learning about hos things ene s about learning hos things ork Whe dort shoe you an image seth lots of teat ta deronstate our auhiits Ou octhech pacticpate nade the enbebits Whether t s bearing about arodynarnicoe Hough hitting golf balls or throsing baceballe driving an periments spaceship around the rolar system playing
33. of making mistakes when adding HTML and CSS for text In earlier versions Dreamweaver would sometimes add HTML to the page and sometimes create CSS styles depending on which buttons you clicked in the Property Inspector This often led to a long undesired list of styles with ambiguous names such as Style1 Style2 and so on In Dreamweaver CS4 the two functions adding HTML and creating styles are divided into two different views of the Property Inspector RPS eee HTML Targeted Rule header_sub Font Palatino Times New Roman Times E vs css Edit Rule C55 Panel Size E Ipx BR 950000 Page Properties List Item The reconfigured Property Inspector eliminates confusion when using HTML and CSS HTML data sets Dreamweaver s new HTML data set feature lets you convert a regular HTML file to a small database system For instance you can create an HTML table with rows and columns of data and use Dreamweaver to import that table into another web page using JavaScript and Spry Then you can present that data in a variety of different ways such as a Master Detail page that lets a user view a master summary of rows from the table click an item in the list and instantly see all the details for that table row INSERT Data Y Import Tabular Data A Spry Data Set 1 Spry Region fh Spry Repeat Spry Repeat List Recordset ia Stored Procedure A Dynamic Data E Repeat Region Ge Show Reg
34. open a document you ve worked on recently Choose File gt Open Recent or from the Welcome Screen select a document under the Open a Recent Item column Dw ADOBE DREAMWEAVER C54 beta Open a Recent item ta dwi lessonsiAhtespace html ol dwt lessonsdimages html DesktopEiasicHTML tril Desktop SempleLayout hbml 3 pagesihours html dwOSlessonsindex html TA dwSlessonsindex_finished htm dwiilessonsiCSSLayouts htnl div lessons Spriggs Mil File Edit view Insert Modify For Mew Ctrl M Open Cr Browse in Bridge Chrl AlE O Open Recent 1 Whitespace html pen in Frame atrith E 2 Images hkml Glose Chri 3 BasicHTML html lose Gl trl Shi 4 SampleLayouk html N cs D hars heml Save Gtri 5 Baths trad Ne EN Tindes finshedsbiml Choose a file from the Welcome Screen or choose File gt Open Recent to select a recently opened file Now that you ve seen what Dreamweaver can do it s time to put what you ve learned into practice Move to the next lesson so that you can begin building your first Dreamweaver site 32 Adobe Dreamweaver CS4 Digital Classroom Self study Self study Explore the ready to use CSS layouts available in Dreamweaver by choosing File gt New then selecting HTML from the Page Type column Browse the options listed in the Layout column and open a few layouts Identify some that you d like to use as a starting point for any future project Review
35. reamweaver CS4 Jumpstart 25 An introduction to HTML The color pickers in Adobe Photoshop and Illustrator also display and accept hexadecimal codes making it easy to copy and paste colors between these applications and Dreamweaver Case sensitivity and whitespace rules HTML is a flexible language that has very few rules regarding its own appearance Based on how strictly you want to write it HTML can be either very specific about whether tags are written in upper or lowercase called case sensitivity or not specific at all To see how HTML treats whitespace follow these steps 1 Choose File gt Open When the Open dialog box appears navigate to the dwO1lessons folder Select the Whitespace html file then press Open 2 If your file is not in Split view press the Split button in the Document toolbar so that you can view both the layout and the code Notice three seemingly identical tags beneath line 9 in your code sa Code E spit a Design L Juve View w J Live Code Title Unbtied Document 1 G l DOCTYPE HTAL PUBLIC W3C DTD HTML 4 01 Teansircional EN hetp www W3 org Z lt html gt dueta AGEp eqilv Content Type content text htwl charsec UTF 8 gt titlesOUntitled Document title gt lt fhead gt All these tags are valid even though they have very different case structures 26 Adobe Dreamweaver CS4 Digital Classroom An introduction to HTML All three tags
36. s Customize a Favorites tab with your most used icons INSERT Common Layout Forms Data Spry Text t o Favorites Hide Labels Insert Div Tag ag Images Image 4 gt Media Date L Server Side Include Comment gt The Insert panel is divided into several categories geared toward specific tasks Customizable workspace layouts You can save combinations and positions of panels and toolbars for easy recall at any time Save multiple workspace layouts for different users or create different workspaces for specific tasks such as coding or designing page layouts Favorites Y 2 Image Draw AP Diy You can customize the Favorites panel with icons from any of the other Insert panel categories 16 Adobe Dreamweaver CS4 Digital Classroom How web sites work Powerful visual aids Take advantage of the precision you re accustomed to in other design programs through Dreamweaver s guides rulers measuring tools and customizable positioning grid Dreamweaver s Design Time style sheets let you customize the look of your page exclusively for the editing process making layout quicker and easier without permanently altering the page s appearance GR fe edt view iret kodi Format Commands Ste Window Hap m o gt A DESIGVER COMP Sandsa htn Path CilUoconerks srd Sebungs deen HEE eonna het EY 1 See E sin irk k SprMteruBarvertical cas Li sacie Tilas Untitled poourene li g E LG pt El he
37. the Document Type DocType when creating a new page Explorations in code Although this book occasionally refers to the code for examples hand coding is not a primary goal of the included lessons The best way to learn how code represents the layouts you are building visually is to switch to the Code view and explore what s happening behind the scenes It s important to remember that every button panel and menu in Dreamweaver represents some type of HTML tag attribute or value very rarely will you learn something that is unrelated or proprietary to Dreamweaver alone Think of the Dreamweaver workspace as a pretty face on the HTML language Lesson 1 Dreamweaver CS4 Jumpstart 29 30 A look at the Welcome Screen A look at the Welcome Screen A common fixture in most CS4 applications is the Welcome Screen which is a launching pad for new and recent documents In Dreamweaver the Welcome Screen appears when the application launches or when no documents are open From the Welcome Screen you can create new pages create a new site definition open a recent document or use one of Dreamweaver s many starter pages or layouts Dw ADOBE DREAMWEAVER C54 Open a Recent Item TE dwt lessonsvhitespace html Tj dwOllessons mages him DesktopBasicHTsL html TE DesktoptSampleLayout her Tj pagessnours him TJ dwOStessonsiindesc html T dwOSessonsiindex_finished him Tj dw lessons CSSLayouts htm T deN lessons SpeyVv
38. use a completely different case structure but all are valid and are treated in the same way Take a look at the text that reads This is one sentence This is another The code shows a lot of space between the two lines but the Design view shows no space at all This is because both whitespace and line returns between two pieces of text or tags are not recognized sal Code E spit of Design aUe wiew w i ive code Tite Unttied Document a E m NISU 40 lt body gt kl ll lt p iont color ccO000 STexte Eont lt FONT COLOR g0ec0000 gt Texte FONT gt lt ET color cec0000 STexts CONT lt p gt Pl lt p align center gt eRe ies ede tatrong gt hia 12 another po lt body gt lt html gt Despite the large amount of space between the two sentences they appear side by side in the Design view To create a line return or a new paragraph you need to enter the necessary HTML tags In the Design view at the bottom position your cursor after the first sentence then press Shiftt Enter Windows or Shift Return Mac OS twice This creates two line returns you can see that each line return is created in your code by a lt br gt break tag When rendered in the browser the lt br gt tag adds blank lines between the sentences however the sentences are technically within the same paragraph Title Untitled Document lt body chody epectont color ccO000 gt Text lt font gt lt FON
39. workspaces Among the included workspaces is the new compact mode for your panels which lets you conserve monitor space by collapsing your panels onto the right side of the screen and expand them only when needed 10 Adobe Dreamweaver CS4 Digital Classroom Live View Experience tells you that visual web editors often display differently from the browsers they re emulating As script driven interactivity gains popularity the need to accurately design the different states of your page including menus panels and interface elements has become increasingly important The static nature of Design view in Dreamweaver might no longer meet users advanced needs Dreamweaver s new Live View mode uses the WebKit rendering engine which is also the basis for the Safari web browser and Adobe AIR to give you a more accurate preview of your page usually just as a browser would render it In addition you can interact with your page directly within Dreamweaver viewing all the various states it may require in context Ale Edt view Insert Modify Former Commands Sts Window He Le Ge Ae DESTENER COME Path Cilocunerts ard Sebungs den AA N best pide lessonsice ll lsssoretLio Layouts hind F STE cesca Sprene 9 SpeyWenuBarvertical cos 2 Coca spar A es Flie tine be Alive Code Tele unted Gocumeret Eia pet Fed check page The McKnight Institute fora Tee Funga shibh is here kut andy for ine Spring sson so dori mls H Being a
Download Pdf Manuals
Related Search