2

Grailsテクノロジーに基づいて新しいWebサイトを構築しています。

私のウェブサイトのグラフィックデザインに関しては、プロのウェブデザイナーのサービスを利用する予定ですが、その間、「ユーザーフレンドリー」なベータ版を作成するには、基本的なグラフィックデザインを自分で行う必要があります。

stackoverflow.comサイトを読みましたが、決心できませんでした。これが私が見つけたものです： how-do-you-choose-a-css-framework what-is-the-best-css-grid-framework can-someone-recommend-a-bells-and-whistles-css-フレームワーク what-is-the-best-css-framework-and-are-they-worth-the-effort

しかし残念ながら、多くの矛盾した答えがあります。まず、CSSフレームワークの使用は逆方向のオーサリングであり、良いことではないと言う人もいます。他の人は、YUIグリッド、BluePrint、960 gs、YAMLをアドバイスしています...そして多くの人が、Compassを使用するとCSSレイアウトを簡単かつ再利用できるようになると言っています。

だからそれを考えると：

  • 私はCSSの世界に不慣れで、Webデザイナーになるつもりはありません。
  • 私のレイアウトはユーザーフレンドリーである必要があります（ただし、必ずしも素晴らしいL＆Fである必要はありません）
  • 保守可能で、簡単に改善できる必要があります（プロのWebデザイナーによる）
  • 実装が簡単（何かをすばやく取得するため）

私のサイトのウェブデザインを始めるために私に何をアドバイスしますか？

アドバイスありがとうございます。

ファビアン

4

5 に答える 5

15

まず、Webデザイナーになるつもりがない場合は、CSSをアウトソーシングすることをお勧めします。HTMLまたはPhotoshopのデザインを提供し、それをグランド（1k）の下で十分にコード化できるWebサイトがいくつかあります。または、HTML/CSSデザインを無料で入手してください。

次に、知っておく必要のあることが1つあり、解決する必要のあることが2つあります。

  1. すべてのHTMLは、セマンティックで有効な方法で記述されている必要があります。セマンティック=適切に順序付けられた見出し、リスト、過度のdivなどはありません。valid=WC3検証テストに合格します。これはどれもロケット科学ではありませんが、それでも学ぶ必要のあるスキルです。AndyClarkeのTranscendingCSSは、セマンティックHTML/CSSに関する優れた本です。メンテナンスを容易にするために、HTMLとCSSは整頓され、一貫してインデントされている必要があります。

  2. コンテンツを管理するために管理バックエンドとデータベースが必要かどうか、または静的ページ（htmlおよびcssファイル、画像、その他のメディアなど）で構成されるサイトを構築するだけかどうかを判断する必要があります。前者の場合、それはまったく別の学習曲線です:-)

  3. あなたの最高のスキルは何ですか？あなたが優れたデザイナーである場合は、他の人にHTML / CSSを作成してもらうか、既製のテンプレート（Web上に多数あります）を使用してカスタマイズしてください。これが複数列レイアウトの良いスタートです。プログラマーの場合は、Django（Python）、Titanium（Perl）、Rubyの小さいフレームワーク（Ruby on Railsは最初は少し大きいため）、またはお気に入りの言語のフレームワークの使用方法を学びます。

優れたCSSは技術であり、シンプルさが本質ですが、始めるのに十分なことを学びたいのであれば、私のアドバイスは次のとおりです。

  1. 継承（CSSの「カスケード」）と、何でも「ブロック」になり得るという事実を理解しているので、スタイルを適用するためだけにネストされたdivをたくさん使用しないでください。代わりに、スタイルをHTML要素自体に適用するか、親ブロックに表示される場合にのみ要素に適用します（サイドバーdivに含まれるメニューの順序なしリストなど）。

  2. ブロック要素とインライン要素について学び（ScratchのWebデザインは優れた学習リソースであり、私はそれをお勧めします）、CSSがこの動作を変える可能性があることを学びます。

  3. Firefoxでテストしてから、InternetExplorerでテストします。> = IE7はそれほど悪くはありません（ただし、HasLayoutに注意してください）。IEで正しく機能するように調整できない場合は、条件付きコメントを使用して、IEだけが表示できるCSSを追加します。CSSハックは使用しないでください。不足しているIE機能（要素のロールオーバースタイルなど）を追加する.htcファイルを使用できます。

  4. CSSの位置付けについて学び、「fixed」を控えめに使用します。

  5. すべてのCSSを1つのファイルに入れ（初心者向け）、HTMLでインラインCSSを使用しないでください。

  6. フォームとフォームフィールドのスタイリングは、ほとんど別のスキルです:-)

背景画像を使用してスタイルを追加しますが、ポジショニングを使用して画像をオフセットおよびオーバーラップできることも理解してください。ただし、透明性を高めるにはPNGを使用する必要があります。そうそう、不透明度は良さそうですが、今のところ非標準のCSSが必要です。より柔軟なrgba（a = alpha）メソッドが広くサポートされていますが。丸みを帯びた角もそうですが、どちらも使用する価値があります。

今のところCSSフレームワークとリセットは避けたいと思います-学習するためにさらに別のDSLを追加することで、この段階で物事を複雑にします（ただし、議論と長所と短所を読んでください）。煩わしいデフォルトのマージンとパディングを回避するために、私は常にすべてをリセットしてhtml *, body * {margin: 0; padding 0;}から、必要な場所にパディングとマージンを再構築します-これまでのところ問題にはなりません:-)

于 2009-10-23T12:41:46.383 に答える
3

私のサイトのウェブデザインを始めるために私に何をアドバイスしますか？

Firefox用のFirebugプラグインを今すぐ入手してください！

主なCSSの用途：

  • 適用されるCSSルールを確認する
  • CSSをリアルタイムで変更し、影響を確認します
  • 他のWebサイトを調べて、それらがどのように機能するかを確認します

このツールなしではCSS（およびその他のWeb関連テクノロジー）を開発することはできません。

于 2009-10-23T11:28:07.750 に答える
1

YUICSSリセット/ベース/フォント/グリッドを見てください

http://developer.yahoo.com/yui/3/cssreset/

そしてグリッド960はまたいくつかの素晴らしいレイアウトを持っています（グーグルで彼らのサイトを検索してください）

于 2009-10-23T09:49:13.947 に答える
0

実行しているOSはわかりませんが、Macユーザーの場合は、CSS用の優れた無料ツールであるXyleScopeをお勧めします。これはエディターではなくCSSビューアー/スキャナーであり、任意のWebページのCSSコードを簡単に参照できるため、cssの動作をよりよく学習し、Web上で適切に作成されたレイアウトを分析できます。

CSSEdit（Macのみ）は、カスケードシートを作成するための優れたソリューションであり、使いやすく、高価ではなく、機能を利用できます。

花火：レイアウトを作成し、優れたグラフィック作品を作成するための優れたソフトウェアだと思います。

Dreamweaver：Web開発のためのオールインワンソリューションです...リモートバージョンのWebサイトとローカルバージョンのWebサイトの同期を簡単に維持するための非常に優れたツールです。

Coda（Macのみ）は、.htaccessファイルを管理および編集できない場合でも、Dreamweaverの非常に優れた代替手段です。

Webサイトのコーディングには、dreamweaverまたはCodaをお勧めしますが、他の良い代替手段はBBEdit（Macのみ）です。

于 2009-10-24T09:20:21.897 に答える
0

ブートストラップ、私が提案できる最高のcssフレームワークです。ファンデーションと呼ばれる別のフレームワークもありますが、開発者の間で人気があり、拡張可能であるため、ブートストラップの方が好きです。他にもいくつかのフレームワークがあります。私はそれについてブログを書きました。http：//www.andwecode.com/freebies/5-sensitive-css-frameworksが必要な場合はこちらもお読みください:)

于 2013-12-26T17:20:32.300 に答える