Archive for the ‘html’ Category

Making wireframes with Dreamweaver VS Axure

Friday, April 3rd, 2009

Doing presently wireframes/mockups for a project, I checked around the tools to do that.

I tried 2: Axure and Dreamweaver. Below the pros and cons I find to each of them

Axure
Pros:

  • Allows to make quickly wireframe: drag and drop text boxes, form components…
  • Numerous interactions (tabs; conditional events; hidabel panels…) easy to create
  • Reusable components
  • Easy to add comments visible in the output
  • Export HTML
  • Export specs in doc (But I did not try that part)

Cons:

  • Generated HTML is definitly not reusable (made up of images, and absolutely positionned divs)
  • Price (about 589 USD)
  • Not designed to implement even bits of design (which is fair, it is a wireframe tool)
  • Tables integration weak (can put only text in it, no form elements, no buttons…)

Dreamweaver CS4
Pros:

  • Also provides nice user interaction tools (tabs, menus, accordeon) thanks to the integration of Spry (a JS library)
  • Also provides reusable components (assets) (which are copied over all files whenever saved – slightly less user friendly than Axure, but does the job)
  • Initial wireframe HTML can be reused first for mockup design, then in the project dev

Cons:

  • Building wireframes is not etremely fast (you’re closer to the html code, no really drag and drop)
  • Price too (about 573 EUR) – but is definitly more than just a wireframe / mockup design tool

Finally I’d rather choose Dreamweaver: wireframes are slightly longer to build, but it remains reasonnable (the spry integration is quite cool), and the mockup can be reused for later steps of the projects. And for about same price you’ve got more scope than Axure.

Tags: , , ,
Posted in Tools, html | 5 Comments »

Shared library items in Dreamweaver

Tuesday, March 31st, 2009

I am currently using Dreamweaver CS4 to make an intranet mockup.

Looking for a kind of include (namely, for a menu shared by all pages) without server-side scripting, I found that Dreamweaver propose a handy library.

a) You open window -> assets

b) from the asset panel, you create a new library item.
It creates a ‘.lbi’ file.

c) then, you can place this item anywhere in your pages. When you update your .lbi library item, DW propose you to update automatically all files in which it is included.

More details:
http://webdesign.about.com/od/dreamweaverhowtos/a/aa090406.htm

Tags: , ,
Posted in html | 3 Comments »

html optgroup

Tuesday, December 16th, 2008

Just discovered recently the <optgroup> html tag, allowing to group select options:

<select>       
      <optgroup label="Swedish Cars"> 
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>       
      </optgroup>       
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
</select>

(example from w3school)
Pretty basic, but handy!

Tags: ,
Posted in html | 1 Comment »

Rounded corners and floating elements in CSS

Wednesday, October 15th, 2008

I have got to implement the design (from psd/jpg to html/css) for a website of mine, which is kind of a new experience to me.
The first challenges were about implementing boxes with rounded corners and floating elements.

Rounded corners:
There are plenty of way to do rounded corners; but I wanted one without js and without image.
So I used the tips described in here:
http://www.html.it/articoli/nifty/index.html

The html looks like:

<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>

<div class="content">
My content here
</div>
<b class="rbottom">
   <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>

And the css:

/* 1 */
.rtop, .rbottom{
display:block
}

/* 2 */
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background: #08572a none repeat scroll 0 0
}

/* 3 */
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

/* 4 */
.content{
  background-color: #08572a;
  padding: 1em;
}

The first chunk of the css ensure the content of the rtop and rbottom <b> are displayed as block (not inline) in the doc.

The second chunk do the same for the inner <b>, force the height, and set the background color.The overflow does not seems to be of used, at least in Firefox. Probably is in IE.

The third chunk set decreasing margin to each inner <b>, to actually create lines increasing (top section) decreasing (bottom section) in size.

The fourth chunk is just about setting the same background color for the content than for the borders.

Floating elements
I also have a list of elements in a left panel (floating), each elements having inner floating elements as well. My problem was that the inners element were half getting out of there container.
Normally a <div style=”clear:both” /> below the last element does the trick, but as the container panel is floating itself, the content normally in the right of the left panel get displayed below (that is: the whole page get cleared, not only the elements in the left panel).

A simple fix to that is to specify “overflow:auto” for the containing element (the left panel in my case) – which does not make much sense, as the expected behaviour for this property is defined as follow (http://www.w3schools.com/css/pr_pos_overflow.asp):
“If the content is clipped, the browser should display a scroll-bar to see the rest of the content”

Tags: , ,
Posted in css, html | 2 Comments »