WEBデザイン勉強仲間を増やしたい!「きょうのDesign Tip」を始めました【webデザイン勉強4日目】2020/4/12
「きょうのDesign Tip」を始めてみます👌
この3日間、noteが続いてます!えらい!
ただ、このnoteは自分のメモ的な感じなので、「人の役に立ててるか?」というと微妙かな、と思いました。
なので、1日の中で「なるほど~」と思ったDesign Tip(デザインのお役立ち報)を最初に簡単にシェアしてから、以下は自分の勉強日記にしようと思います、
日記は読み取ばしてしてもらっても良いので、ちょっとでも良いな~と思ったら💖押してもらえると嬉しいですっ
【きょうのDesign Tip】Adobe XDとDreamweaverって何が違うの😶?
恥ずかしながら、私。
XDとDreamweaverの違いを分かっていません。
XDもWEBデザインできるんじゃないの?
DreamweaverもWEBデザインできるよね…?
そういう疑問を抱えつつ勉強していたので、改めて調べてみました。
◎最初に結論◎
XD→プロトタイプツール(試作品を作るツール)
Dreamweaver→コーディングツール
だそうです。
XDでデザインカンプ(試作品)を何回か作ってブラッシュアップして、OKだよということになったら、Dreamweaverコーディングしていくということらしいです。
つまり、XDとDreamWeaberは別物ということ。
いままで、XDでそのままコーディング作業もできると勘違いしていたのが、混乱の元だったようです。
では、XDからコーディングしていくにはどうすれば?と思い検索してみたところ、クリ★スタというサイトでXDからコーディングしていくための練習データを用意してくれているみたいです↓
取り組むレベルとしては、「PorgateでHTML/CSS、jQueryを学習した方」となっているので、jQueryを勉強したら私も取り組んでみようと思います!
おまけ:コーディング無しでWEBサイトが作れるサービス
わざわざコーディングしなくても公開までできるSTUDIOというサービスもあります✍
自分の用途と合えば便利かと😍
WEBデザインの勉強日記💡
・Dreamweaver触ってて、ProgateでHTML/CSSの基本を理解しててよかったなと思った。知らなかったら何してるのか分からんってなってたと思います。
Dreamweaverのチュートリアルをやってます
Progateと違って、文字が多いのでかなり進みが遅い。
「この作業、いま全体の作業中のどのあたりにいるの?」と分からなくなることが多いので、自分の確認のために項目を貼ります。
1.HTML5要素を使用してwebページの構造を定義する ←イマここ
2.DOMパネルを使用してページのどこにいるのかを調べ、新しい要素を追加する
3.ページにテキストと画像を追加する
4.Creative Cloudライブラリから画像をダウンロードしてリサンプリングする
5.DreamweaverのCSSデザイナーを使用してページのスタイルを設定する
6.2番目のwebページを作成して、同じようにスタイルを設定する
7.ビジュアルメディアクエリバーを使用して各種レイアウトを制御する
(https://helpx.adobe.com/jp/dreamweaver/how-to/make-website-pt1-site-setup.html )
Part1<プロジェクトの概要とサイトの設定>終了
とりあえず、コードを書いていく前の土台を作っていく作業。
知らない用語が多いのは大変だ~
人間と同じように、HTMLページは1つの頭(head)と1つの体(body)しか持つことができません。
(https://helpx.adobe.com/jp/dreamweaver/how-to/make-website-pt1-site-setup.html)
↑この表現すごくないですか。
これで<head><body>の個数を忘れることは無いと思う。
Part2<テキストコンテンツの追加と書式設定>終了
コードを手打ちで書いていくのではなくて、ボタンみたいなのを作って、効率的にコーディングしていく勉強のようなものをした。
ルールさえ覚えれば便利に書いていけるのかもしれないけど、独特の癖がなかなか抜けない。
作業時間と進捗🔥
✔Dreamweaverのチュートリアル 40%
→未達、35%。チュートリアルPart1、Part2完了。Part3半分まで。
4/13の予定✨
✔Dreamweaverのチュートリアル Part4まで
たこやきたべたYO-YO🐙
疲れがたまりやすい今日この頃です。
ゆるゆる行きましょう~🐑✨
この記事が気に入ったらサポートをしてみませんか?