Dreamweaver Basics - Computer-Aided Design in Practice | ARCH 425, Study notes of Architecture

Download Dreamweaver Basics - Computer-Aided Design in Practice | ARCH 425 and more Study notes Architecture in PDF only on Docsity! Arch425 Dreamweaver Basics 2008-08-25 Organization 01. Web based programs REQUIRE PRECISION 02. Folder setup In order to ensure that web links, images etc work continue to work, it is imperative that all webpages (.htm/l etc) and images (.jpeg/gif etc) are located in a simple folder tree. Arch 425 – contains all Arch425, finished or working (the folders www and working) www – contains all finished .htm/l files and images folder images – contains all uploaded images and files working – unfinished or non-web files (.psd, ai. etc) Only content located in the www folder will be uploaded to the website. Dreamweaver Basics 01. Interface At the startup menu, choose Create New, HTML document. The other options are web documents of different types. The Toolbar at the top of the screen represents the most common buttons/commands for Dreamweaver. Here, we find commands to insert links, images, and similar functions Beneath the toolbars is the document window (the tab named ‘Untitled-1’). At the top-left corner, there are options to view the document as Code, Split, or Design. HTML code can be written (with text) or created automatically, by the program, and these options allow the user to view the document in its different states. To the right of this tab is the Title field. Enter text into the field to change the name of the page. It will show up at the top of the browser window when viewed on the web. Note the ruler running across the file from left to right and up to down. It is set to pixels and represents the physical size of the document. Ideally, the webpage should be kept to a size that fits within a computer’s monitor size (1600 pixels wide is approximately maximum width for most computers). 02. Properties The Properties window, at the bottom of the screen, is, essentially, the options modifier for any content (text, image, etc) both individually and globally. It is also where web links and email links can be added to any selected object. The Page Properties button will open a new menu displaying the global properties of that web document. Default fonts, colors, backgrounds, link display etc can be modified from there. 03. Adding content Text can be added into the Design window; its size, color, and font can be adjusted by selecting the text and changing its properties from the Properties window. Dreamweaver will only allow one “space” between characters. If desired, insert characters that have the same color as the background to make larger spaces. An extra space will be created when pressing ENTER to make a new line; hold SHIFT+ENTER to make only one line. Images Insert image objects from the Image pulldown menu. Images can be jpeg, gif, png or psd (I would not suggest inserting .psd files, they are large) Choose the source (src) of the image, click OK and it will be placed in the window. Once inserted, and selected, the Properties window presents information about the object. The source (src) of the file can be changed by clicking the “folder” icon next to it. Likewise, the image can be given a link by clicking the “folder” icon next to the Link window. If the link is a part of your website (it should existing the www folder), then it can be selected with the folder. If the file is outside of your website, the class website for example, the url must be input into the window. (ex. input http://www...etc into the link window). If a link is applied to an image, a border will applied to it. Remove the border by setting the Border value to 0. (Text can be turned into a link in the same manner.) Despite the ability to do so (W and H) NEVER change the size in Dreamweaver. Doing so will not change digital size (bytes) of the image and may distort the physical (pixels) size on the page. Images should only be changed in Photoshop of Illustrator. Because the image is ‘sourced’ (not “pasted”) into the file, if it is modified, a small Refresh icon will appear between the W and H fields. Click it to update the image. If, in place of the image, a gray field is shown, then the image has been moved from its source (src). Click the source icon to re-find it. Rollover images Select two images, one to replace the other when mouse rolls over. Tables We may use a table to organize data, images etc into columns and rows. Click the table icon (or from Insert pulldown) to insert the table. The default options can be modified at insertion or later. Select the table (click the border) to modify its properties or drag the width and height to change the size of the table. Note the abilities of : CellPad, CellSpace, and Border Both the Border and Background of each cell, and table whole, can be modified with color or image. Right-click inside a table’s cell to add/delete columns or rows or to split or merge selected cells.