MEMO
2019.10.24
2019.09.19
- http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP
- http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample01
- http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample02
FZ
学園サーバーFTP接続先:ftp.ip.kyusan-u.ac.jp( 133.17.4.74 )
最终保存的文件夹内位置
CMS
*** Webserver
#image(): File not found: "" at page "季卓芸/MEMO"
*UPLOAD写真PLUS 添加照片
Photoshop 照片调尺寸
1.サイズ * イメージ中で 画像解析度640
2.フェルタ中でレンズ辅正
3.保存
size
画像データの準備(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>
背景变色
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