网页设计与制作精品课程2

第二章 CSS

第一节 CSS基础

2.1.1 什么是CSS

CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。

2.1.2 CSS的两个作用

（1）它能够简化网页的格式设置工作

（2）它能够增强网页的表现力，因为相比HTML标记符而言，CSS样式属性提供了更多的格式设置功能。

第二节在网页中使用CSS

2.2.1 在标记中直接嵌套样式信息

使用HTML语言标记的style属性可以直接在标记中嵌入样式定义，其格式如下：

<标记 style=“属性1：值1；属性2：值2；属性3：值3；..........”>

例题2-1：

一代人

黑夜给了我黑色的眼睛

我却用它寻找光明

2.2.2 在STYLE标记中定义样式信息

在HTML标记中直接指定样式信息显然没有简化网页设计的格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将同类的样式都统一定义，然后再具体应用到网页中的元素，那么就能简化网页设计的格式设置和维护工作。这正是CSS应用于网页的最常用方式，即在HEAD标记内使用STYLE标记，然后在STYLE标记中定义样式。

定义样式的格式：

其中，selector1和selector2表示样式作用的对象，在style标记内的定义样式时，在样式信息周围加上注释标记可以确保不支持style标记和CSS的浏览器把其作为注释忽略掉；当前绝大多数浏览器都支持CSS，所以注释标记可以省略。

例题2-2：

一代人

黑夜给了我黑色的眼睛

我却用它寻找光明

2.2.3 链接外部样式表中的样式信息

在style标记中定义样式对于单独网页的格式设置和维护很有效，但如果在一个网站中，为每个页面都定义类似的样式，显然又是效率不高的，这时最好的办法是将重复在多个网页中使用的样式放在外部样式表文件中，然后通过连接的方式引用其中的样式。连接式样式的优点很明显，网页设计者可以在一个连接的CSS文件上作修改，然后所有引用他的网页都会自动更新。

连接外部样式表的方法是在head标记内使用link标记。连接外部样式表的格式：

创建样式表文件的方法是：将style标记与其中的样式定义一起放置到一个空白的文本文件中，然后将文件保存为.css扩展名即可。操作方法与用“记事本”保存.htm文件类似。例题2-3：

（1）样式表文件：文件名为mycss.css，与网页文件同目录

（2）网页文件

一代人

黑夜给了我黑色的眼睛
我却用它寻找光明

第三节 CSS样式定义

样式表项的组成如下：

selector{属性1：值1；属性2：值2；属性3：值3；..........}

其中，selector表示需要应用样式的内容，它有5种：html标记，具有上下文关系的html标记，用户定义类，用户定义ID，虚类。

2.3.1 HTML标记selector

html标记是最典型的selector类型，我们可以为某个或某些具体的html标记应用样式定义。对于不同的标记，我们可以采用编组的方式简化样式定义。

例如：

h1{color:#ff0000}

h2{color:#ff0000}

h3{color:#ff0000}

可以转换成编组样式如下：

h1,h2,h3{color:#ff0000}

2.3.2 具有上下文关系的HTML标记selector

若需要为位于某个标记内的标记设置特定的样式规则，则应将selector指定为具有上下文关系的html标记。

例如：如果只想使位于h1标记内的B标记具有特定的属性，则应使用以下格式：

h1 B{color:blue}

注意：h1和B之间以空格分隔，这表示只有位于h1标记内的B标记具有指定样式，其他B标记不具有该样式。

2.3.3 用户定义的类selector

可以使用类来为单一html标记创建多个样式，将一个类包括到样式定义中有两种情况：

1.定义通用类：

通用类可以应用到所有html标记，其定义格式如下：

.类名{属性1：值1；属性2：值2；属性3：值3；..........}

其引用格式如下：

<标记名 class="类名">…………

例如：

定义一个通用类如下：

.red{color:red}

引用该类如下：

本行文字为红色

本行标题为红色

此时，如果使用了h1和p标记但没有使用相应的class属性，则不应用所定义的样式，此处所定义的类在任何标记中都可以引用。

2.为html标记定义类：

其定义格式如下：

标记.类名{属性1：值1；属性2：值2；属性3：值3；..........}

其引用格式如下：

<标记名 class="类名">…………

例如：

为h1标记定义如下类：

h1.color_red{color:red}

h1.color_yellow{color:yellow}

h1.color_blue{color:blue}

引用这些类如下：

此标题为红色

此标题为黄色

此标题为蓝色

此时，如果使用了h1标记但没有使用相应的class属性，则不应用所定义的样式,这里所定义的类最好在定义该类的标记中使用。

2.3.4 用户定义的ID selector

我们要想在网页中使用通用的样式，除了定义通用类之外，还可以使用ID定义样式，其定义格式如下：

#ID名称{属性1：值1；属性2：值2；属性3：值3；..........}

其引用格式如下：

<标记名 ID="ID名称">…………

例如：

定义一个ID样式如下：

#red{color:red}

引用该样式如下：

本行文字为红色

本行标题为红色

2.3.5 虚类selector

对于A标记，可以用虚类的方式设置不同类型超连接的显示方式，所谓不同类型超连接，是指访问过的，未被访问的，正被访问的，鼠标指针悬停其上的这4种状态的超连接。

可以通过指定下列selector之一来设置超连接样式：

1.A:link或:link 当超连接没有被访问过时，所设置的样式应用于超连接。

2.A:visited或:visited 当超连接已被访问过时，所设置的样式应用于超连接。

3.A:active或:active 当超连接正在被访问过时，所设置的样式应用于超连接。

4.A:hover或:hover 当鼠标指针移动到超连接上时，所设置的样式应用于超连接。例如：

该组定义可以使网页中的超连接文字在未访问过时以黑色显示，访问过和被选中时以灰色显示，鼠标悬停其上时以红色显示，除了鼠标悬停时有下划线，其他状态均没有下划线。第四节 CSS的属性

2.4.1 字体与文本属性

1.字体属性

（1）font-family属性

该属性用来确定要使用的字体列表，取值可以是字体名称，也可以使字体族名称，值之

间用逗号分隔。

例如：

h1{font-family:楷体_gb2312,黑体}

在使用字体或字体族时，他们中间的空格应用破折号进行替换。

（2）font-size属性

该属性用于控制字体的大小，其取值分为4种类型：绝对大小、相对大小、长度值以及百分数。其默认值是medium。

当使用绝对大小类型时，其取值为：xx-small、x-small、small、medium、large、x-large、xx-large，表示越来越大的字体。

当使用相对大小时，其取值为smaller、larger，分别表示比上一级元素中的字体小一号和大一号。

当使用百分比值时，表示与当前默认字体（即medium所代表的字体大小）的百分比。

当使用长度值时，可以直接指定。这是最常用的一种情况，他可以控制页面文字的绝对大小。其常用单位有pt和px，pt表示点数，px表示像素数。

例如：

font1{font-size:12px}

font2{font-size:12pt}

（3）font-style属性

该属性确定指定元素显示的字形，其取值包括：normal、italic、oblique三种。默认值是normal，表示普通字形；italic和oblique表示斜体字形。

例题2-4：

S1的测试，黑体，24像素，斜体

S2的测试，楷体，12像素，斜体

S3的测试，宋体，large，普通字形

2.文本属性

（1）letter-spacing属性

该属性决定了字符间距，其取值可以是normal或具体的长度，也可以使负值。默认值是normal，表示浏览器根据最佳状态调整字符间距。也可以为该属性指定具体的长度值，通常其长度单位为px或pt。

例如：

P{letter-spacing:6px}

P{letter-spacing:0.5pt}

（2）line-height属性

该属性决定了相邻行之间的间距，即行间距。其取值可以是数字、长度或百分比。

当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。

例如：P{font-size:10pt;line-height:1.5}表示的行高是15pt。

当指定具体的长度值时，则行高为该值。

当用百分比指定行高时，则行高为当前字体高度与该百分比相乘。

（3）text-align属性

该属性指定对齐方式，其取值为：left、right、center、justify，分别表示左对齐、右对齐、居中对齐和两端对齐。

（4）text-decoration属性

该属性对文本进行修饰，其取值为：none、underline、overline、line-through、blink，其默认值为none，表示不加任何修饰。Underline表示添加下划线；overline表示添加上划线；line-through表示添加删除线；blink表示添加闪烁效果（有的浏览器不支持）。

（5）text-indent属性

该属性可以对选定的文本进行首行缩进，取值可以是长度值或百分比，其默认值是0，

表示无缩进。

（6）text-transform属性

该属性用来转换文本，取值为：capitalize、uppercase、lowercase、none，默认值是none。Capitalize选定文本的每个单词的首字母以大写显示；uppercase选定文本都以大写显示；lowercase选定文本都以小写显示。

例题2-5：

字符间距10px

行高4倍行距

文本居中

添加上划线和下划线

首行缩进0.75厘米

Idleness makes the wit rut.

2.4.2 颜色与背景属性

在CSS中，颜色属性可以设置元素内文本的颜色，背景属性可以控制元素的背景颜色以及背景图案。他的背景属性包括：background、background-attachment、background-color、background-image、background-position和background-repeat。

1. color属性

该属性用于控制文本的颜色，一般取值为6位16进制数，用来表示颜色。

例如：P.green{color:#00ff00}可以为p标记设置绿色的文本颜色。

2. background-color属性

该属性用来设置元素的背景颜色，一般取值为6位16进制数，用来表示颜色。其默认值是transparent，表示没有任何颜色。

3. background-image属性

该属性用来设置元素的背景图案，取值为url(imageurl)或none。默认值为none，即没有背景图案。

例如：.img1{background-image:url(bgimg.jpg)}

4. background-attachment属性

该属性控制背景图象是否随内容一起滚动，取值为scroll或fixed。默认值为scroll，表示背景图案随着内容一起滚动；fixed表示背景图案静止，而内容可以滚动，这类似于水印效果。

5. background-position属性

该属性指定背景图案相对于关联区域左上角的位置，通常指定由空格隔开的两个值，其取值有以下几种情况：

（1）left、center、right和top、center、bottom

（2）百分数

（3）标准单位计算的距离。

例如：50%表示将背景图象放在区域的中心位置，25px的水平值表示图像左侧距离区域左侧25px。如果只提供一个值而不是一对值，则相当于只指定水平位置，垂直位置自动设置为50%。指定距离时，也可以使用负值，表示图像可以超出边界。该属性的默认值是“0% 0%”，表示图像与区域左上角对齐。

6. background-repeat属性

该属性表示使用背景图像时，背景图案是否重复显示，其取值可以是：repeat、repeat-x、repeat-y、no-repeat，默认值是repeat，表示在水平和垂直方向都重复，即平铺效果；repeat-x表示在水平方向上平铺；repeat-y表示在垂直方向上平铺；no-repeat表示不平铺，即只显示一幅背景图案。

7. background属性

该属性是一个组合属性，可用于同时设置background-color、background-image、background-attachment、background-position、background-repeat等背景属性，在指定他的属性时，各属性值的位置可以是任意的。

例题2-6：

冬夜读书示子聿

陆游

古人学问无遗力，
少壮功夫老始成。
纸上得来终觉浅，
绝知此事要躬行。

2.4.3 定位和显示属性

1.定位属性和宽高属性

CSS的定位属性包括position、top、bottom、left、right和z-index，宽高属性包括width和height。

（1）position属性：

该属性用来规定元素在页面上的定位方式，其取值为：static（默认值）、relative或absolute。

Static表示按照HTML格式规则正常定位；

Relative是指某元素将定位在相对于页面上前一个元素的尾端位置；

Absolute是指某元素将定位在框架或浏览器窗口本身的左上角绝对位置。

（2）top和left属性

该属性用来规定某个元素与其父或其他元素之间的距离。这两个属性按像素来设定元素位置往下或往右的距离，这里既包括与其父的左上角之间的距离，也包括相对于前一个元素尾端之间的距离。

（3）z-index属性

使用top和left属性可能会造成元素相互堆叠在一起，此时可以使用z-index属性，z-index属性对元素进行分层，值较高的元素在上面，将覆盖值较低的元素。如果使用值-1，则表示元素将置于页面默认文本的后边，这对于设置背景图案是很有用的。

（4）width和height属性

width和height属性控制元素的宽度和高度，此时position属性必须指定为absolute。他的取值可以是长度值，也可以是百分比。

例题2-7：

2.显示属性

控制元素显示与隐藏的属性有：display和visibility。

（1）display属性

该属性控制一个元素是否应绘制在页面上，他的取值有多个，在一般的浏览器中，只有一个none值可以使用。当使用该属性隐藏元素时，不但元素看不见，而且元素也将退出当前的页面布局层，不占用任何空间。

（2）visibility属性

该属性有时也被分类为定位属性，它控制定位的元素是否可见，其取值包括：visible （可见）、hidden（隐藏）和inherit（继承），默认值为inherit。与前一属性的不同之处在于：当隐藏元素时，仍然为元素保留原有的显示空间。

2.4.4 布局属性

1.页面元素周围的空白

在任何一个HTML元素的周围，都包含边框、边界和填充这三种空白。最接近元素内容的是填充，接下来是边框，最外围的是边界。边界区总是透明的，可以显示出背景色或背景图像；而填充总是采用标记的背景色和背景图像；边框则可以使用自己的颜色。

2.边框属性

边框的设置包括3项：颜色（color）、样式（style）和宽度（width），而边框又包括四个方向：上（top）、下（bottom）、左（left）、右（right）。将边框设置和方向组合起来，则构成了多种属性。

（1）border-bottom-color、border-left-color、border-right-color、border-top-color属性分别用于指定下、左、右、上边框的颜色，可以用border-color属性同时指定4个边框的颜色。如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框颜色一样；如果指定了2或3值，则未指定颜色的边框采用相对边框的颜色值。

（2）border-bottom-style、border-left- style、border-right- style、border-top- style属性分别用于指定下、左、右、上边框的样式，其取值是：none、dotted、dashed、solid、double、groove、ridge、inset、outset，默认值是none。

None表示无边框；

Dotted表示边框由点线组成

Dashed使用划线表示边框

Solid边框由实现组成

Double使用双线

Groove和ridge利用元素的颜色属性值描出具有三维效果的边框

Inset和outset利用修饰元素的颜色值描出边框效果。

也可以用border-style属性同时指定4个边框的样式，如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框样式一样；如果指定了2或3值，则未指定样式的边框采用相对边框的样式。

（3）border-bottom-width、border-left- width、border-right- width、border-top- width属性分别用于指定下、左、右、上边框的宽度，其取值是：thin、medium、thick、length，默认值是medium，其中length是可以使用的长度单位数值。

也可以用border-width属性同时指定4个边框的宽度，如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框宽度一样；如果指定了2或3值，则未指定样式的边框采用相对边框的宽度。

（4）border-bottom、border-left、border-right、border-top属性分别用于指定下、左、右、上边框的宽度、样式和颜色，其取值可以是border-width、border-color、border-style属性的取值，如果没有指定某个值，则该值采用默认值。当指定宽度、样式和颜色时，并没有顺序的要求。

（5）border属性可以用来一次性设置4个方向上边框的宽度、样式和颜色，它是指定元素边框各个边的简洁方式。用他指定边框时，4个边框都具有相同的设置。同样，指定宽度、样式和颜色时，也没有顺序要求。

例题2-8：

惜春

3.边界属性

边界属性包括：margin、margin-bottom、margin-left、margin-right、margin-top。margin-bottom、margin-left、margin-right、margin-top属性分别用来设置左、右、上、下边界的宽度，margin属性可以同时指定4个边界的宽度（其使用规则同边框属性），其取值可以是长度、百分比或auto，使用百分比时，表示相对于父元素宽度的百分比，使用长度时，其单位可以是cm、px、pt等。

4.填充属性

填充属性包括：padding、padding-left、padding-right、padding-top、padding-bottom。padding-left、padding-right、padding-top、padding-bottom属性用于设置左、右、上、下填充区的宽度，取值是长度或百分数，不能取负值，使用长度时，其单位可以是cm、px、pt等。Padding属性可以同时指定4个填充的宽度（其使用规则同边框属性）。

502043《网页设计与制作》课程标准

《网页设计与制作》课程标准 课程代码： 502043 参考学时： 90 学分： 4 课程类型：专业课

2015年 1 月编 一、适用专业 计算机应用技术（3年制中职，5年制高职） 二、开课时间 第4学期 三、课程定位 1、课程性质 本课程是计算机应用技术（3年制中职，5年制高职）的专业课程。 2、教学任务 本课程主要以Dreamweaver软件为操作平台，针对职业教育网络技术专业中理论结合实践的特点，以培养高技能应用型人才为目标，重点加强学生的理论基础和训练学生的实际操作能力。在教学知识模块上首先介绍网页的相关知识，学习HTML标记语言，在此基础上深入学习Dreamweaver软件的操作方法以及网页元素在网页中的使用技巧，锻炼学生网页的排版设计能力，最后通过样式表、客户端脚本、服务器行为的学习让学生熟悉并掌握开发简单动态网站的能力。在本课程的实践教学内容中，选取紧密联系实际的项目并进行详细分解，重点培养学生的静态、动态网页制作能力、具备网站的建立和维护能力、独立思考、解决问题以及自主创新的能力。 四、课程培养目标 1、方法能力目标 1)培养学生谦虚、好学的品质； 2)培养学生勤于思考、做事严谨的良好作风； 3)培养学生良好的职业道德； 4)培养学生事物美的观念； 2、社会能力目标 1)培养学生的团队协作精神； 2)培养学生分析问题、解决问题的能力； 3)培养学生勇于创新、敬业乐业的工作作风； 4)培养学生诚实、守信、坚忍不拔的性格。 3、专业能力目标 1)掌握网页设计相关知识、网页元素组成、网页结构、网站开发流程、网页设计 与制作工具；

2)掌握HTML标记语言并能够熟练使用标记元素来书写网页框架； 3)掌握Dreamweaver软件的使用方法；学习文本、图像等多媒体元素在网页中的 使用技巧； 4)熟练掌握表格的弹性控制及表格元素标记的使用方法并能应用单元格的合并拆 分、表格嵌套来完成网页的排版； 5)掌握模板的使用方法；熟练应用模板来制作、修改、批量更新网页； 6)掌握两栏框架的制作方法和使用浮动框架嵌套网页的技巧； 7)熟悉AP元素的浮动和定位并能结合时间轴来实现多个AP元素的动画效果； 8)熟练掌握表单的制作方法、表单元素标记、了解网页通过表单来提交数据的原 理； 9)掌握网页中客户端行为的概念；能够使用常见的客户端行为来制作前台页面的 动态效果； 10)掌握样式表对网页的外观和格式的控制、样式表的冲突与继承并能够熟练 书写样式； 11)熟练掌握服务器行为的概念、连接数据库、插入、修改、更新、删除操作 记录；能够使用服务器行为开发简单的动态网站。 五、课程衔接 在课程设置上，前导课程有《Photoshop高级应用》，后续课程有《网站建设》六、教学内容与学时分配 教学学时数分配见下表所示 表教学内容与学时分配

网页设计与制作》网上作业题答案(全)

1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。 参考答案： （1）HTTP：超文本传输协议，用于WEB服务器和WEB客户机之间； （2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间； （3）TELNET：远程登录协议，用于客户机与终端之间。 2．现给出一个网址如下：https://www.sodocs.net/doc/73529508.html,/planetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。 参考答案： //前的http表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上； https://www.sodocs.net/doc/73529508.html,表明了WWW服务器的位置； planetwide/select/selector.html表明最终要访问的文件所在的位置。 3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可） 参考答案： （1）file：如file:\\D:\作业\作业\主页.htm（前面的file:\\一般可省略）就是打开本地D盘下的一个网页；（2）ftp：如ftp:\\https://www.sodocs.net/doc/73529508.html,（此处也可输入IP地址）； （3）http：如https://www.sodocs.net/doc/73529508.html,/； （4）News：news:\\192.168.1.7可以查看IP地址192.168.1.7的可用新闻组； （5）telnet：telnet:\\192.168.1.7就可以运行远程登录IP地址192.168.1.7； 4．我们要进入紫霞的公众网，网址如下：telnet://https://www.sodocs.net/doc/73529508.html,，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。 参考答案： （1）在浏览器中登录：启动INTERNET EXPLORER，在URL地址栏中输入“telnet://https://www.sodocs.net/doc/73529508.html,”；（2）“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.sodocs.net/doc/73529508.html,”命令并回车； （3）“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.sodocs.net/doc/73529508.html,”命令并回车； （4）“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5．如果远程登录失败，请问原因可能是什么？ 参考答案： （1）计算机地址拼写错误（主机名或IP地址错误）； （2）远程计算机暂时不能使用； （3）你所指定的计算机不在Internet上。 6．实践：启动INTERNET EXPLORER浏览器，修改其INTERNET选项，并观察其效果。 您的答案： 答：将https://www.sodocs.net/doc/73529508.html, 设置为INTERNET选项的首页后，只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1．个人网站有哪三种基本风格？ 参考答案： （1）主题图形式； （2）信息发布式； （3）介于两者之间的风格。

网页设计与制作课程标准

《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：

三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法

(13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容： 网页制作基础知识 网页的基本构成元素 网页制作常用软件和技术 第二章 Dreamweaver CS6轻松入门（2学时）

网页设计与制作

Web考点 一、判断、单选（20*2’）、填空 1、Window对象表示一个浏览器窗口或一个框架，在JavaScript中，Window对象是全局对 象，所有的表达式都在的那个齐纳的环境中计算。就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来声明。例如，可以只写document 和alert，不必写成window.document和window.alert（）。 2、Document对象 每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。 提示：Document对象是Window对象的一部分，可通过window.document属性对其进行访问。又代表了整个HTML文档，可以来访问网页中的页面中的所有元素。 Document.childNodes 包含着document.documentElement 3、JavaScript不可以增加类型（弱类型）。C#是强类型语言，声明变量要指定类型。 4、Html.CSS.DOM标准是由https://www.sodocs.net/doc/73529508.html,指定的。 JavaScript标准是由Ecma制定的。 C#、https://www.sodocs.net/doc/73529508.html,由微软制定的。 5、Hypertext transport protocol——HTTP协议。 超文本传送协议，是万维网（world wide web）交换信息的基础。它允许将超文本标记语言（HTML）文档从Web服务器传送到Web浏览器。HTTP允许输入任意类型的数据对象。正在传输的类型由Content-Type加以标记。 6、相对路径（Relative Path） (1)如何表示同级目录的文件 2.html和 3.html在同一个文件下，如果2.html链接到3.html，可以在2.html中这样写：同目录下文件间互相链接； ../代表一级上级目录路（间隔一个目录） ../../代表二级上级目录（间隔两个目录），比如4，html链接到1.html，可以在4，html中这样写：链接到上级目录的上级目录中的文件。 (2)如何表示下级目录文件 2.html和 3.html是1.html的下级目录中的文件，如果在1.html中链接到2.html，可以在1.html中这样写：链接到下级目录（first）中的文件； 如果在 1.html中链接到 4.html，可以在 1.html中这样写：链接到下级目录（first/second）中的文件。

网页设计与制作模板

存档资料成绩： 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日

课程设计评阅意见 评阅人__________职称________ 年月日

目录 第1章课程设计任务书 (1) 一、课程设计题目设计个人网站主页 (1) 二、课程设计工作： (1) 三、课程设计的内容要求： (1) 1、课程设计要求 (1) 2、课程设计内容 (1) 第2章课程设计目的 (3) 第3章课程设计内容 (4) 设计一选题的基本原则 (4) （1）选题应反映本专业的培养目标，符合专业综合训练的要求。 (4) （2）选题要有利于深化所学的专业知识和拓展所学的知识面。 (4) （3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。 设计二选题范围 (4) 设计三选材 (4) 设计四正确运用DW和Ps (4) 设计五课程设计心得 (4) 第4章课程设计步骤 (5) 设计一查找相关资料 (5) 设计二利用Ps进行切片 (5) 设计三利用DW编辑 (6) 设计四利用DW的站点功能上传或用FTP工具上传站点 (8) 第5章课程设计心得 (10) 第6章参考文献 (11)

第1章课程设计任务书 专业电子商务班级（1）班姓名肖恢邦 一、课程设计题目设计个人网站主页 二、课程设计工作： 自 2011 年 6 月 12 日起至 2011 年 6月 20 日止 三、课程设计的内容要求： 1、课程设计要求 （1）通过课程设计把课堂上讲的内容融会贯通，掌握表格在网页布局中的特点及应用，掌握如何通过表格来布局一个完整的界面。学会使用Dreamweaver软件设计网页及Dreamweaver的表格功能进行网页布局。使整个网页页面清新自然，整体界面美观大方，简洁高效，使之达到界面动与静的搭配合理，动而不乱，静而不僵和谐效果。 2、课程设计内容 （1）设计一选题的基本原则。 （2）设计二选题范围。 （3）设计三选材。 （4）设计四正确运用DW和Ps。 （5）设计五课程设计心得。

《网页设计与制作》课程说课稿

《网页设计与制作》课程说课稿 一、课程定位 《网页设计与制作》课程是我院计算机应用技术专业、计算机网络技术专业及电子商务专业的重要专业基础技能课程，该课程不仅实用性强、应用面广，而且与岗位的联系非常密切，仅仅就这一门课程的学习，学生毕业后就可以从事相关网页设计与制作的工作，考取相关的网页设计与制作员的资格证书，如果将此作为技能基础，继续学好后续基于网络编程的动态网页设计技术，学生还可以从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。该课程的开设，正好满足我校关于“高素质、技能型人才”培养目标的需求，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护的工作人才。基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。 二、课程教学设计的过程与思路 在教学过程中，结合职业岗位对人才的需求（一线工作岗位上从事网页设计、制作、编辑，网站规划、维护和管理的人员）、我校对人才培养的目标（培养高素质、技能型、应用型人才）及本课程对人才培养的目标（能够独立完成一个网站的建设，毕业后能够从事企事业单位的网页设计与制作、网站维护与管理等工作的人才），我们将培养学生熟练的网页设计与制作操作技能作为培养重点，在具体课程教学设计中，应用“工学结合”的教育思路、实施“建构主义”的教学方法，采取“小组协作学习”的学习方式完成整个课程的教学与学习。 在“工学结合”的教育思路下，主要以“工作导向——项目导向——任务驱动——知识学习”的一个架构来完成教学。 具体给大家阐述如下： 老师教学之前的教学设计：根据知识点——设计任务——组合项目——达成一项工作 老师教学中的教学设计：给学生布置一项工作（工作导向）——将工作转化为项目（项目导向）——将项目细化为每一个任务（任务驱动）——通过任务引出知识点（知识学习）

网页设计与制作教程

网页设计与制作教程 第一章基础篇 1.INTERNET和WWW INTERNET的功能和应用 1．信息的获取与发布 2．电子邮件 3．网上交际 4．电子商务 5．网络电话 6．网上事务处理 7．远程登陆 8．文件传输 9．电子公告版 10．全球信息网 11．INTERNET的其他应用 WWW简介 1．网页，网页文件和网站 2．HTTP和FTP协议 3．超文本和超链接 4．INTERNET地址 5．域名 6．统一资源定位器（URL） 7．HTML 常见网络浏览器----IE 第二章网站建设概论 （1）信息类网站 （2）交易类网站 （3）有偿信息类网站：101网校、 （4）功能型网站 （5）综合类网站 2.根据网站的性质分类： （1）政府网站 （2）企业网站 （3）商业网站 （4）教育科研机构网站 （5）个人网站 （6）非赢利机构网站 （7）其他类型的网站 3.根据在大型搜索引擎上的设置分类 4.娱乐和休闲类网站；商业与经济类，艺术，人文，健康，医药，政府，政治类，电脑与 网络类，社会和文化，科学与教育类，参考资料类 2.1.2网站建设的步骤 1．制作环境的准备：1）设备：扫描仪，数码相机，打印机2）完善系统环境3）备齐网页开发工具软件，网页制作工具，服务器端程序开发工具及一些实用的辅助工具。。。4。

备齐素材制作和加工软件，包括对图形，动画，刘媒体和声音进行处理的素材制作和加工软件 5）备齐常用的网站发布工具，如FTP文件传输软件 2.网站目标的确定：对象：访问者的类型；主题明确，数据充分。保持目标的简洁 3.网站主题，风格和创痍点的确定 1）主题选材要小而精 2）擅长或感兴趣的内容 ）选题不要太滥：因特网上只有第一，人们记不住第二第三名 2）网站的风格：CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素 1）确信风格是建立在有价值的内容上的 2）需要彻底弄清楚站点给人的印象是什么 3）在明确网站印象后，开始努力建立和加强这种印象：1）标志（LOGO）2）色彩3）标准字体4）醒目标准口语5）统一图片处理效果7）使用网站特有的图标；使用自己设计的花边，线条和点；；9）展示网站的荣誉和成功作品10）告诉网友关于个人真实的故事和想法3）网站的创意（准备期，孵化期，启事期，验证期，形成期） 4.网站结构的确立：1）网站结构的确立2）网站目录的设置3）网站链接结构的设置：树状连接结构；星状链接结构3）两种结构的综合 5.网站素材的准备 6.网站制作工具的选择和确定：DREAMWEA VER和FRONTPAGE，PHOTOSHOP，FIREWORKS，动画制作工具：FLASH，COOL 3D；网页特效工具，网页特效精灵，有声有色 7.网站的建设 1）申请E---MAIL帐号 2）申请网页空间：1。打开虎翼网空间申请主页 3）域名注册：对于个人网站，在申请免费网页空间的同时也完成了域名的注册 4）网页制作：先简单后复杂，布局先大后小，制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率 8。网站的测试（看看有没有问题）和上传（将网站发布到WEB服务器，网页制作工具本身具有FTP功能） 9。网站的宣传和推广（搜索引擎上注册，与别的网站交换链接，运用网络广告） 10.网站的更新和维护：必须不断给它补充新的内容，才能够长期吸引住浏览者 2.1.3 网站设计的原则 1）网站主题不要多于三个：小而精，定位小 2）网站的标准色彩不要超过三种 3）重视网站目录结构的创建（创建目录的原则百度上找出来）：不要将所有文件都存在根目录下，目录层次不超过三层，不要使用过长的目录名，尽量不要使用中文目录名 4）链接层次不要超出三层（便于维护） 5）网页长度应限定在三个整屏以内 6）表格的嵌套层次要控制在三层左右（表格插入表格里） 7）网站导航要清晰 2.优秀网站的五大要素 1）网站内容丰富 2）页面下载速度快（网页简单，不要大量图片）

网页设计与制作总结

网页设计与制作 实训报告 班级：多媒体152 姓名：张莉钧 学号： 指导老师：薛杨王淑惠 实训时间：6.20——6.24 一、实训目的： 1、进一步熟悉和掌握网站建设的基本流程和技术规范； 2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识； 3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识； 4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站； 5、具备独立撰写实训报告基本能力； 6、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识； 7、紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予 以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等），为今后从事网站开 发、维护和管理奠定基础 二、实训项目——特色美食餐厅网站设计 1、网站主题 我的网站的主旨在于从各个方面全面的介绍特色美食餐厅，包括它的菜品、餐厅的环境以及促销活动。另外，网站里还包括餐厅资料和联系方式，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是橙色和白色搭配，用以展示餐厅特色的效果。其实最重要的是要做出自己的风格，给浏览者好的欣赏感受。 2、网站材料 主要在网站上搜集所要的网页信息，包括图片、文字。同时，查 询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。 3、网站规划 我的网站共有７个主页面：首页、美食介绍、优惠活动、商品促销、宴会定制、会员中心和关于我们。每一个页面用统一的模块，以保证网站统一的页面风格。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是CSS设计一个样式，以保证随时、准确的调用。 三、网页设计工具使用 1、Dreamweaver——我们使用它做网页的主要布局。 2、Photoshop——我们使用它做网页图片的处理以及logo的制作。

网页设计与制作试题及答案精选范文

《网页设计与制作》期末考试试题 一、单项选择题(本大题共15小题，每小题2分，共30分) 1、目前在Internet上应用最为广泛的服务是( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成，其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时，应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时，代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是( )。 A、