LogoMark.png

季卓芸/MEMO

MEMO


2019.10.24

2019.09.19

FZ
学園サーバーFTP接続先:ftp.ip.kyusan-u.ac.jp( 133.17.4.74 )
最终保存的文件夹内位置

66.png




CMS

CMS.jpg








*** Webserver

#image(): File not found: "" at page "季卓芸/MEMO"








スクリーンショット 2019-09-19 10.41.48のコピー.png




*UPLOAD写真PLUS 添加照片

1.png

Photoshop 照片调尺寸

1.サイズ * イメージ中で 画像解析度640
2.フェルタ中でレンズ辅正
3.保存
size

2.png




画像データの準備(2019.10.17)

画像のリサイズ

画像のリサイズを行うにはオンラインツールやスマホ、PCにインストールされた画像処理ツールを使います。

   画像のリサイズサービスの活用
       Bulk Resize Photos:https://bulkresizephotos.com/
       上記の利用方法解説 :https://ferret-plus.com/1866
   Adobe Photoshop で「Web用に書き出し」を使う。
       Photoshop Express Editor というオンラインツールもあります。
   The GIMPなどのオープンソースフリーウエアを使う

第二回 2019.09.26.

PHP

Hypertext Preprocessor( Personal HomePage Tool )

PHPはオープンソースの汎用スクリプト言語で、Webアプリケーションの開発では最も頻繁に使われています。

file:///home/・・・/sample.html
自分のパソコンhttp
http://localhost/sample.php

一方、PHPが含まれたWebアプリケーションの動作確認をする場合は

http://www.kyusan-u.ac.jp/・・・/sample.php

JavaScript vs PHP

点击画面有按键🔘。 文件名dice.html

today :2019.10.03

PukiWiki サイト開発の前提

開発者自身が PukiWiki の使い方を熟知しておく必要があります。

以下のような機能については、PukiWikiのプラグインを活用すれば解決します。自分でプログラムやCSSを作り込む必要はありません。
検索機能:#search プラグイン
投稿機能:#article、 #comment プラグイン
最新の更新の表示:#recent プラグイン
他のページの読み読み込み機能:#include プラグイン
部分的な文字色の変更:&color(red){・・・・}; プラグイン
部分的な文字サイズの変更:&size(12){・・・・}; プラグイン
表組み:| (縦ストロークの利用)
囲み表示(整形済みテキスト):行頭に半角スペース
左寄せ・センタリング・右寄せ:LEFT:、CENTER:、RIGHT:
参考:EditGuide

PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知っておくことが必要です。以下、主なものを挙げます。
要素 Wikiの記法 HTMLタグ
ページ名 Wikiページ名 h1
大見出し *  h2
中見出し **  h3
小見出し ***  h4
箇条書き レベル1 -  ul.list1 li
箇条書き第 レベル2 --  ul.list2 li
段落 記述+改行  p
整形済みテキスト 行頭半角空白  pre
引用 行頭に >  blockquote p.quotation
リンク [ [ ] ]  a
強調 ’’文字列’’  strong
斜体 ’’’文字列’’’  em
取消線 %%文字列%%  del
学科サイトの個人ページで、プラグインの活用を含め、様々な書き方を試して下さい。また、ブラウザの分析ツールで、それぞれどのようなタグに置き換わっているか確認して下さい。

2019.10.24

HTML最上方

head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
   <title>Sample Site</title>

/head>

HTML最上方《head》中添加

 <script src="script.js"></script>
スクリーンショット 2019-10-24 11.32.20.png

背景变色

HTML

 <article>
         <button onClick="MyFunction()" >Click Me!</button>
         article 01
       </article>

JS

function MyFunction(){

 var obj = document.body;

obj.style.backgroundColor = 'blue';
}

下方变色(JS)

HTML

 <article>
         <button onClick="MyFunction2()" >Click Me!</button>
           article 02
         <header id="ABC">・・</header>
       </article>

JS

function MyFunction2(){

 var obj = document.getElementById('ABC');
 obj.style.backgroundColor = 'red';

}

下方有色到变色(JS)

HTML

 <article>
         <button onClick="MyFunction3()" >Click Me!</button>
           article 03
         <ul class="list">
          <li class="line">A</li>
          <li class="line">B</li>
          <li class="line">C</li>
          <li class="line">D</li>
          <li class="line">E</li>
          <li class="line">F</li>
          <li class="line">G</li>
          <li class="line">H</li>
          <li class="line">I</li>
          <li class="line">J</li>
          <li class="line">K</li>
         </ul>
       </article>

JS

function MyFunction3(){

   // lineクラスの把握(情報が line[0], line[1] ,line[2]・・に一括で入る)
  //var lines = document.getElementsByClassName('line');
  var lines = document.querySelector('.list').children;
   //  i 番目の pタグ部分の背景を赤に
   for( var i=0; i<lines.length; i++ ){
     lines[i].style.backgroundColor = 'green';
 }

}

CSS中添加 可表示***条形

article ul li{

  margin-bottom: 10px;
}

尺寸变换自由缩小扩大

HTML最上方《head》中添加

 <meta name="viewport" content="width=device-width">  

CSS

举例:/****** Header ************/部分

header h1{

 position: absolute;
 top: 2rem;
 left: 6rem;
 font-size: 2rem;
 color: white;

}

header h2{

 position: absolute;
 top: 5rem;
 left: 6rem;
 font-size: 2rem;
 color: white;

}

添加⬇️

@media only screen and (max-width: 768px) {
然后只输入调整的部分

   header h1{
     font-size: 1.5rem;
   }

举例:/****** NAV ************/部分

nav {

 padding: 1rem 3rem ;
 background:  #CCEAF2;

}

nav ul{

 display: flex;
 flex-direction: row;

}
nav ul li{

 margin-right: 2rem;

}
nav ul li a {

 color: white;

}

添加⬇️

@media only screen and (max-width: 768px) {

然后只输入调整的部分
横的改为竖的

 nav ul{
   flex-direction: column;
 }

}

CSS 尺寸中的 高度自由合理变换

例: 添加👉min-height: 8rem;
article{

 min-height: 8rem;
 padding: 1rem;
 margin-bottom: 2rem;
 background: #FFF;

}

関数の独立性を高める

可随机变换颜色

 ***  HTML側
   <button onClick="ChangeBGColor()" >Click Me!</button> 
   ***JS側
   // 背景色の変更(汎用性が低い)
   function ChangeBGColor( ){  
     var obj = document.body;
     obj.style.backgroundColor =RandomColor();
   }
   //ランダムな16進6桁のカラーコードを生成(汎用性が高い)
   function RandomColor(){ 
       var col = Math.floor( Math.random() * 0xFFFFFF ).toString(16);
       for( var i = col.length; i<6; i++ ) { col = '0' + col; }
       return '#' + col;
   }

情報科学研究科公式サイト開発

   WireFrame > pukiwiki.skin.php
   informationscience_20191205.zip

http://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A8%AD/%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E7%A0%94%E7%A9%B6%E7%A7%91%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E9%96%8B%E7%99%BA

PAGES

GUIDE

添付ファイル: file1.png 50件 [詳細] file66.png 48件 [詳細] fileスクリーンショット 2019-10-03 9.46.54.png 43件 [詳細] file224.png 34件 [詳細] filehttps---qiita-image-store.s3.amazonaws.com-0-122648-75521efa-5c7c-fcb7-a52c-d53bbfe6b128.png 24件 [詳細] file2.png 45件 [詳細] filephp.png 27件 [詳細] fileWebsever.jpg 40件 [詳細] file222.png 45件 [詳細] fileスクリーンショット 2019-10-24 11.32.20.png 52件 [詳細] file223.png 36件 [詳細] fileCMS.jpg 51件 [詳細] fileスクリーンショット 2019-09-19 10.41.48のコピー.png 54件 [詳細]
Last-modified: 2020-03-30 (月) 20:15:04