96's blog

WEBサイト制作科 6ヶ月コース

ケーキショップサイト01

f:id:webtm2013:20130806144943p:image

  • facebookのグループからデータをダウンロード。
  • 中身は全ページのカンプ、baseのCSS、ナビゲーションのIMG。

カンプから画像切り出し

  • FireWorks
  • 各カンプをページごとに読込み プロパティで座標指定X:0 Y:0
  • webレイヤーに切り出す素材
  • ガイドを引く→スライスツール→スライス名
  • プレビュー表示にして最適化ウィンドーでGIF(写真はJPEG)のカラー数を調整。できるだけ軽くする。
  • ナビゲーションやフッターは、repeatを指定するため幅1pxでつくる。ファイルサイズが軽いので、カラーとディザはMAX。
  • 選択したスライスの書き出し
  • 書き出し項目を「HTMLと画像」にしてスライスのない領域とサブフォルダーのチェックはずす。
  • オプションのドキュメント詳細でドキュメント名以外なしにする。
  • 書き出し項目を「画像のみ」に戻して保存。

コーディング

  • DreamWeaver
  • XAMMP内のhtdocsにcakesiteフォルダを作成し、サイト管理する。
  • template.htmlとbase.cssの作成
  • bodyの文字はline-height1.5以上、colorは#333が見やすい。
  • visibility:hidden;は領域は確保されたままになる。
  • 8日はトップページ作成から。base.cssの続きは各自で。