Dreamweaver: Portfolio Site

Size: px

Start display at page:

Download "Dreamweaver: Portfolio Site"

Helen Austin
5 years ago
Views:

$) Under the Category: Local Set the site name to: Portfolio Local Root Folder: C:\class7\GMU\portfolioSite\ Default Images folder: C:\$

1 Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to the Advanced Tab or just follow the wizard (You do not need Server technology at this time It can be added later.) Under the Category: Local Set the site name to: Portfolio Local Root Folder: C:\class7\GMU\portfolioSite\ Default Images folder: C:\ class7\gmu\portfoliosite\images\ Link relative to: Site Root HTTP Address: Check Enable Cache

2 You will see your new site Now you can add your first page. File, New

3 Select Blank Page, Type: HTML, Layout: <none> Save the page as home.html Below we will discuss Tracing Images in Dreamweaver Tracing Images are useful in initial design of a webpage or webpage template not necessary. You can use a take an image (.jpg, gif, etc.) and use it to draw your divs or tables in designing your site. This process is different from using the Photoshop method of Saving for Web and Devices. The drawback of using a Tracing Image is that it generally forces absolute positioning. See comments below the exercise for more detail

4 Using the image we made of the home page in Photoshop, we can use it as a tracing image Select the file home.jpg

Dreamweaver <body tracingsrc="/images/home.

5 set the transparency to about 80% (not required, it may make viewing easier ) Notice your body tag has an unusual attribute only available in Dreamweaver <body tracingsrc="/images/home.jpg" tracingopacity="80"> From the Insert panel, select the layout entry and draw AP Divs for the 5 major sections

This is the time to rename any of the div tag ids (i.e., apdiv1 to apborder1) to better organize your code. This is also the time to tweak your height and width settings <!

6 This is the time to rename any of the div tag ids (i.e., apdiv1 to apborder1) to better organize your code. This is also the time to tweak your height and width settings <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>home</title> <style type="text/css">  </style> </head> <body tracingsrc="images/hometrace.jpg" tracingopacity="80"> <div id="apborder1"></div> <div id="apheader2"></div> <div id="apbanner3"></div> <div id="apcontent4"></div> <div id="apfooter5"></div> </body> </html> From either Design View or Code View, add any background colors (or images) to each AP Div a) From Design View double click the first selector in the CSS Styles panel

7 b) Alternately - From Code View either double click the CSS Styles panel or use code tips When finished your page should look like this

8 At this point you should remove the Tracing Image (you cant see it and wont really need it anymore) Delete Notice the problem with AP Divs The problem with AP Divs is that the widths and heights are all static (fixed) Next we will look at building your page without fixed widths

9 Fixing our Web Design - Time to Tweak By tweaking the AP Divs with position rules you can make a page that will fit the size of the client s browser. Below is the approach used in this example. (Note that modifications are in maroon) Tweaked Original body{ background-color: #000; font-family: Arial, Helvetica, sans-serif; font-size:1em; #apborder1 { left:0; top:0; width:98%; margin-left:1%; margin-right:1%; height:20px; z-index:9999; background-color: #000; #apheader2 { left:0; top:20px; width:98%; margin-left:1%; margin-right:1%; height:85px; z-index:9998; background-color:#666; #apbanner3 { left:0; top:105px; width:98%; margin-left:1%; margin-right:1%; height:115px; z-index:9997; background-color: #000; white-space:nowrap; #apcontent4 { left:0; top:220px; width:98%; margin-left:1%; margin-right:1%; height:370px; z-index:9996; background-color: #320000; font-size:1.3em; #apfooter5 { left:0; top:590px; width:98%; margin-left:1%; margin-right:1%; height:20px; z-index:9995; background-color: #000; color: #999; font-family: Arial, Helvetica, sans-serif; font-size:.5em; text-align: right; #apborder1 { top:15px; height:35px; z-index:1; #apheader2 { top:50px; height:130px; z-index:2; #apbanner3 { top:180px; height:135px; z-index:3; #apcontent4 { top:315px; height:385px; z-index:4; #apfooter5 { top:710px; height:35px; z-index:5; The above modification to your style is optional, (but is a useful technique for many sites). The complete code for the page at this time is here (C7_PortfoilioTemplateCodStep1.txt) Now your design should be able to expand and contract base on the users browser and monitor...

$jpg (image folder is here: Portfolio_Class7\images) Modified HTML <span class="imglogo"> <img src="images/joannestern.$

10 Next, add the image (logo or name) by inserting a span tag from the insert panel, common tab (convert the div to a span) Add New CSS Rule:.imgLogo { z-index:9994; width: 1%; height:84px; Next add the image logo or name: joannestern.jpg (image folder is here: Portfolio_Class7\images) Modified HTML <span class="imglogo"> <img src="images/joannestern.jpg" width="339" height="81" alt="" /> </span> Alt text can be anything (JStern image). Remove any unwanted Dreamweaver text

11 Add another span for the top menu this time select New CSS Rule Be sure to apply the Class selector type for the new class topmenu

Required Rules: Color: White (#fff) Your new HTML and CSS rules should resemble the code below HTML <body> <div id="apborder1"></div> <div id="apheader2"> <span class="imglogo"> <img src=".

12 Required Rules: Color: White (#fff) Your new HTML and CSS rules should resemble the code below HTML <body> <div id="apborder1"></div> <div id="apheader2"> <span class="imglogo"> <img src="../images/joannestern.jpg" width="339" height="81" alt="" /></span> <span class="topmenu"></span> </div> <div id="apbanner3"></div> <div id="apcontent4"></div> <div id="apfooter5"></div> </body> Next, a simple top menu can be placed in the span with various # links to home, about, etc <span class="topmenu"> <a href="#">home</a> <a href="#">about</a> <a href="#">portfolio</a> <a href="#">contact</a> </span> CSS.imgLogo { z-index:9994; width: 1%; height:84px;.topmenu { z-index:9993; width: 99%; height:36px; float:right; top:52px; right:1px; Save a copy of your work here It will be used in the next section

13 If you add a simple hyperlink menu, you need to add the appropriate pseudo-class in your style tags for hyperlinks.topmenu a:link{text-decoration:none;color:#fff;.topmenu a:visited{text-decoration:none;color:#fff;.topmenu a:hover{text-decoration:none;color:#ccc;.topmenu a:active{text-decoration:none;color:#fff; The banner will contain several images. Although it will be static, you can add the images now <div id="apbanner3"> <img src="images/treesm.jpg" alt="tree1" width="113" height="90" class="bnrimg" style="padding-left:7%;"/> <img src="images/romesm.jpg" alt="rome" width="113" height="90" class="bnrimg" /> <img src="images/still03sm.jpg" alt="still3" width="113" height="90" class="bnrimg" /> <img src="images/russiasm.jpg" alt="ussr" width="113" height="90" class="bnrimg" /> <img src="images/venicesm.jpg" alt="venice" width="113" height="90" class="bnrimg" /> </div> You can use the to add space between the images, but it would be much more practical to add a short rule to your style sheet. Padding will be more effective across various browsers, and user settings..bnrimg{ padding-top:12px; padding-right:5%; Your content division should contain a specialized greeting and an image or flash to catch the user s eye. <div id="apcontent4"> <img id="imgcnt" class="imgcontent" src="images/tree.jpg" align="right" height="330" alt=""/> <p class="txtcontent"><br /> <b>welcome</b> and thank you for visiting my personal website and online portfolio. My name is Joanne Stern, and I specialize in graphic design, front-end design and standards-compliant XHTML and CSS. I also have expertise in JavaScript, ASP (ASP.Net), templating and various content management systems.<br /><br /> In design I strive to balance between text and visual elements, and I love to create websites that are attractive and elegant, yet also simple, informative and accessible to all. If you would like to work with me on a project, please send me an . </p> </div> To better style the content you will need to add some simple rules to your style tags.imgcontent{ float:right; padding:10px 3% 10px 3%;.txtContent{ padding:10px 3% 10px 3%; color:#fff; font-size:16px; text-align:justify; Your footer will need the usual copyright info (don t forget to add the css rule: text-align: right ) <div id="apfooter5"> JoanneStern 2009, All Rights Reserved.</div> Same effect When in doubt use style Although static in behavior, you have a home page. Save it as home.html. Your code should look like the example shown in the lecture menu (PORTFOLIO TEMPLATE CODE STEP 2)

14 ========================================================================= Note This next step is optional, but if you are building a very simple static site you can create a template for your other pages at this time. In our exercise, we will not use this simple template, (but the example is shown anyway) Save home.html as TemplateSimple.html this will be the template for your other pages (about, contact ) Delete the div: apbanner3 Delete the contents of paragraph in the div: apcontent4 and type something like Add text here Reset the Top and Height of the style for div apcontent4 to: T 105px H 485px (Optional: You can also change the image src to something different or unknown ) Save the file it will look like the example (PORTFOILIO TEMPLATE CODE STEP 2B) ================================================================ At this point we will add a Spry (Horizontal) menu See Lecture on Spry ADOBE SPRY AND DREAMWEAVER (SUP)

Web Publishing Basics I

Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic