网页设计与制作教材重点.docx

上传人：b****4 文档编号：5193370 上传时间：2022-12-13 格式：DOCX 页数：17 大小：21.97KB

下载相关举报

第1页 / 共17页

第2页 / 共17页

第3页 / 共17页

第4页 / 共17页

第5页 / 共17页

点击查看更多>>

下载资源

资源描述

网页设计与制作教材重点.docx

《网页设计与制作教材重点.docx》由会员分享，可在线阅读，更多相关《网页设计与制作教材重点.docx（17页珍藏版）》请在冰豆网上搜索。

网页设计与制作教材重点.docx

网页设计与制作教材重点

教材重点

说明：

各章的倒数第2节“实训”部分均非重点。

第1章网页设计制作概述

P1：

1.1P2：

1.2

第3章用DreamweaverCS4创建基本网页

全部

第4章超链接

全部

第5章表格

全部

第6章JavaScript

P115：

6.1.2

P118：

6.3

P124：

6.4.2窗口对象（open、close、alert）文档对象（title、URL、write、getElementByID）

位置对象（reload）、历史对象（back）

P126：

6.5.2Load、Click

P128：

6.6.1marquee的各个属性

第7章CSS

P7.1.3各图中的常用属性

P150：

网页设计

网页制作

6、在HTML文档中引用CSS有几种方式?

比较其优缺点。

7、请把下面的表格转换为HTML表格代码。

8、webcode中的代码

窗口的打开与关闭

functionwopen（）

{

window.open（""）;

}

functionwclose（）

{

window.close（）;

}

动态标题栏

varn=0;

functiontitle（）

{

n++;

if（n==3）{n=1;}

if（n==1）{document.title="☆★动态标题栏★☆";}

if（n==2）{document.title="★☆个人主页☆★";}

}

跳转到新页面

document.write（"当前页面的URL：

"+document.URL+"

"）;

functionsetURL（t）

{

document.URL=t;

}

获取页面元素

functionmyadd（）

{

vartext1=document.getElementById（"text1"）;

vartext2=document.getElementById（"text2"）;

vartext3=document.getElementById（"text3"）;

text3.value=Number（text1.value）+Number（text2.value）;

vartext3=document.getElementById（"text3"）;

}

小广告

vari=0;

functionchangColor（）

{

varadv=document.getElementById（"adv"）;

if（i==0）

{

adv.style.backgroundColor="#ff0000";

i=1;

return;

}

if（i==1）

{

adv.style.backgroundColor="#00ff00";

i=0;

return;

}

window.setInterval（"changColor（）",1000）;

动态时间

functionmyclock（）

{

varmytime="";

varmynow=newDate（）;

varyear=mynow.getFullYear（）;

varmonth=mynow.getMonth（）+1;

vardate=mynow.getDate（）;

varhour=mynow.getHours（）;

varminute=mynow.getMinutes（）;

varsecond=mynow.getSeconds（）;

mytime=year+"-"+month+"-"+date+""+hour+":

"+minute+":

"+second;

varnowtime=document.getElementById（"nowtime"）;

nowtime.innerHTML=mytime;

}

window.setInterval（"myclock（）",1000）;

书本目录

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

无标题文档

{

font-size:

16px;

}

.chapter

{

font-weight:

bold;

}

.section

{

text-indent:

2em;

}

#advanced

{

color:

#ff0000;

}

第1章网页设计制作概述

1.1网页网站的概念

1.2Web标准

第2章网页版面设计基础

2.1网页基础知识

2.2网页版面设计

第3章创建基本网页

3.1制作简单网页

3.2制作图文并茂网页

新闻

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

无标题文档

科大新闻

我校综合办学实力连续七年位居河南高校前列

八旬老人跌倒路边我校学子勇敢扶救

我校举行青年马克思主义者培养学院明德班第三期开班仪式

CSS：

@charset"utf-8";

/*CSSDocument*/

#news

{

width:

450px;

height:

auto;

border:

1pxsolidgray;

}

.newsHead

{

height:

30px;

line-height:

30px;

padding-left:

10px;

background-image:

url（image/title_back.jpg）;

background-repeat:

repeat-x;

}

.newsItem

{

background-image:

url（image/arrow_002.gif）;

background-repeat:

no-repeat;

padding-left:

20px;

background-position:

2px5px;

line-height:

1.5em;

border-bottom:

1pxdottedgray;

}

淘宝网布局

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

无标题文档

body

{

width:

1000px;

height:

800px;

margin:

0auto;

border:

1pxsolid#999999;

}

.modul

{

height:

200px;

width:

320px;

border:

1pxsolid#000;

margin:

5px;

float:

left;

}

.mtitle

{

height:

30px;

width:

310px;

padding-left:

10px;

border-bottom-width:

1px;

border-bottom-style:

solid;

border-bottom-color:

#666;

line-height:

30px;

}

.back1

{

background-image:

url（image/bk1.gif）;

background-repeat:

repeat-x;

background-position:

0px-50px;

}

.back2

{

background-image:

url（image/bk1.gif）;

background-repeat:

repeat-x;

background-position:

0px-208px;

}

20px;font-weight:

bold;text-align:

center;border-bottom:

1pxdotted#999999;">

门户网站和电子商务网站的常用布局模式

手机

笔记本

台式机

both;">

女装

男装

童装

超链接特效

无标题文档

{

text-decoration:

none;

font-size:

26px;

}

link

{

color:

red;

}

visited

{

color:

green;

}

hover

{

color:

blue;

text-decoration:

underline;

font-size:

40px;

}

active

{

color:

gray;

}

center;margin-top:

100px;">

河南科技大学

滚动图片

height="200"width="200px"

scrollAmount="2"scrollDelay="1"

onMouseOut="this.start（）"

onMouseOver="this.stop（）">

•北京大学

•郑州大学

•清华大学

•武汉大学

•大连大学

展开阅读全文