Closed6

ウェブデザイン技能検定２級実技

__Tomoki____Tomoki__

Q1

基本はメニューのボタンとなるオブジェクトを作成する。
手順は以下である。

アートボードの大きさなどの設定

以下に注意する。

  • 幅: 200
  • 高さ: 30
  • ピクセル
  • 解像度: 72
  • ピクセルインチ
  • カラーモード: RGB

メニューのボタンとなるオブジェクトの作成

  1. 長方形ツールでメニューの背景色を作る

カラーは#FDECCFとする。
文字サイズは14くらいが良かった。

  1. テキストツールでメニューの文字を作る

  1. 中央寄せをする
    command + Aでオブジェクトを指定して、上の水平、垂直を中央寄せにするボタンをおす。

  2. gifで保存する
    メニューの「ファイル」→「書き出し」→「Web用に保存(従来)...」をおす。

「保存」をおす。

  1. カラーを変えてマウスオーバー用のメニューを作る
    カラーは#FDEEEEとする。
    合計4×2=8個作成し、wd2フォルダにt1フォルダを作成し保存する。
__Tomoki____Tomoki__

Q2

アニメーションのあるバナーを作る。
手順は以下である。

アートボードの大きさなどの設定

以下に注意する。

幅: 800
高さ: 42
ピクセル
解像度: 72
ピクセルインチ
カラーモード: RGB

アニメーションのあるバナーの作成

  1. タイムラインの表示
    メニューの「ウィンドウ」→「タイムライン」をおす。


  1. 画像をドラッグアンドドロップし、テキスト作成
    画像をドラッグアンドドロップし、配置する。
    指定されたテキストも作成する。
    上記を2個作る。


  1. レイヤーからフレームを作成する
    タイムラインのハンバーガーメニューから「レイヤーからフレームを作成する」をおす。
    レイヤーの各オブジェクトがタイムラインに追加される。
    2つまで削除し、右下のレイヤータブの「目のアイコン」でアニメーションで表示するオブジェクトを選択する。

wd2フォルダにt2フォルダを作成し保存する。

__Tomoki____Tomoki__

Q3,4

index.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <header id="header"></header>
        <nav id="nav">
            <div class="dummy" id="home">HOME</div>
            <div class="dummy" id="kyoukai">協会概要</div>
            <div class="dummy" id="web">ウェブデザイン技能検定</div>
            <div class="dummy" id="faq">FAQ</div>
        </nav>
        <main id="main">
            <h1>ウェブデザイン技能検定</h1>
            <p>ウェブデザインとはパソコンや携帯端末を通して、様々な情報をインターネット上に掲載し、これを配信することを目的に、ウェブサイト（ホームページ）のデザイン（設計）を行う職種を指します。ウェブデザイン技能検定とは、こうしたウェブデザインに関わる技能を照査するための国家検定です。
            </p>
            <h2>技能検定とは</h2>
            <p>技能検定（ぎのうけんてい）とは、働く人々の有する技能を一定の基準により検定し、これを公証する国家検定制度であり、技能に対する社会一般の評価を高め、働く人々の技能と地位の向上、産業の発展の寄与を目的として、職業能力開発促進法に基づき、昭和34年度より実施されています。技能検定は試験に合格することにより、「技能士」と称することができます。</p>
            <h2>新着情報</h2>
            <ul>
                <li>2014-2015年 試験日程</li>
                <li>第1回試験の合格者発表</li>
            </ul>
            <h2>検定情報</h2>
            <ol>
                <li>学科試験について
                    <ul>
                        <li>2014年度版　試験細目</li>
                        <li>学科試験問題解答</li>
                    </ul>
                </li>
                <li>実技試験について
                    <ul>
                        <li>公式ソフトウェアについて</li>
                        <li>受検用PCについて</li>
                    </ul>
                </li>
            </ol>
        </main>
        <footer id="footer">
            <a href="#">HOME</a>
            <a href="#">協会概要</a>
            <a href="#">ウェブデザイン技能検定</a>
            <a href="#">FAQ</a>
        </footer>
    </div>
</body>
</html>
style.css
body {
    margin: 0;
    padding: 0;
}

#wrapper {
    margin: 0 auto;
    width: 800px;
}

#header {
    width: 800px;
    height: 42px;
    background-color: palegreen;
}

#nav {
    display: flex;
    justify-content: center;
    width: 800px;
    height: 30px;
}

#home:hover {
    background-color: red;
}

#kyoukai:hover {
    background-color: yellow;
}

#web:hover {
    background-color: firebrick;
}

#faq:hover {
    background-color: violet;
}

.dummy {
    width: 200px;
    height: 42px;
    text-align: center;
    background-color: aqua;
}

#main {
    width: 800px;
    background-color: blue;
}

#footer {
    width: 800px;
    text-align: center;
}
__Tomoki____Tomoki__

Q5b

q5.js
function change(){
// ここにコードを記入する
    var element = document.getElementById("contents");
    element.style.padding = "10px";
    //  element.style.cssText= "padding: 10px";
}
このスクラップは2021/11/29にクローズされました