网页的设计与制作

网页的设计与制作（常用版）(可以直接使用，可编辑完整版资料，欢迎下载）

网页的设计与制作网页的设计与制作（常用版）(可以直接使用，可编辑完整版资料，欢迎下载）第27卷第10期

2021年10月

赤峰学院(自然科学版)

JournalofChifengUniversity(NaturalScienceEdition)

V01.27No.1O

0et.2021

网页的设计与制作

吴振华

(赤峰学院物理与电子信息工程系,内蒙古赤峰024000)

摘要:本文是以指导”赤峰学院第四届’挑战杯’大学生课外学术科技作品竞赛”的网页设计——物

理与电子信息工程系网建站为例谈谈网页设计的相关问题.首先说明了系网站的页面设计与制作主题,站

点的规划以及网页设计的风格,最后简要地介绍所需工具,材料的收集和网页的制作.在对学生的指导上

重点突出设计思想和制作流程.本网站主要由物理系简介,教学管理,专业简介,课程简介,精品课程,EDP

考试,信息资源以及学生管理等栏目组成主页.

关键词:页面布局;站点规划;网页制作

中图分类号:TP391文献标识码:A文章编号:1673—260X(2021)10—0037—03

对非计算机专业的学生,如何让其在最短的时

间内能够掌握网页设计制作技术,并能制作出好的

参赛作品是问题的关键.根据学生的实际情况初步

制定指导计划:一是根据参赛作品的要求确定网页

制作的主题,以方便对素材的收集和准备工作;二

是选择网页制作工具,确定指导学习的内容.最终

目的是使学生在最短的时间内掌握网页制作技术,

并能做出高质量的作品参加竞赛.

1站点的规划与设计

1.1确定网页设计制作的主题

确定网页设计的主题是决定网页设计活动最

关键的一步.主题是否鲜明,不仅是参赛作品能否

中成功的问题,更是网页设计制作的一个非常重要

的技术指标.由于作品确定以物理与电子信息工程

系为网站作为主题,就要以专业设置,课程建设,教

学管理等因素确定网页设计及制作的类型.有了明

确的主题,并要按照视觉心理规律和形式将主题传

达给评判人.这就要求网页设计不但要简练,清晰

和精确,而且在强调艺术性的同时,更应该注重通

过独特的风格和强烈的视觉冲击力,来鲜明地突出

设计主题.

1.2规划站点的结构

根据参赛作品要求及素材的具体情况,决定采

用树形结构,如图1所示,处于顶部的是站点的首

页,在首页上链接若干个二级网页,每个二级网页

图1系站点结构

链接若干三级网页.

1.3确定网页的风格

在网页设计过程中包含着主观和客观两方面

的因素.在确立了网页主题和结构之后,就要在颜

色搭配,页面布局和内容结构进行风格设计.网页

风格的设计虽然没有统一的标准,但一定要符合人

们的心里感受,要么给人生动活泼,要么给人雅致

整洁,要么给人宁重严肃.成功的网页设计给人们

留下的都是难忘的记忆.只有形成了自己风格的网

页,才能有无限的生命力.

颜色搭配是网页风格设计的关键.当我们距离

显示器较远时候,看到的不是网页优美的版面或者

是美丽和图片,而是网页的色彩.网页色彩搭配设

计包括背景色彩,色调的选择和文字,图片色彩的

选择.我们知道:白纸黑字是永远的主题,谁都说不

出不好来.而网页最常用流行色是:

?

兰色——蓝天白云,沉静整洁的颜色.

?

绿色——绿白相间,雅致而有生气.

?

橙色——活泼热烈,标准商业色调.

?

暗红——宁重,严肃,高贵,需要配黑和灰来

压制刺激的红色.

几种固定搭配是:

?

蓝白橙——蓝为主调.白底,蓝标题栏,橙色

按钮或ICON做点缀.

?

绿白兰——绿为主调.白底,绿标题栏,兰色

或橙色按钮或ICON做点缀.

?

橙白红——橙为主调.白底,橙标题栏,暗红

或桔红色按钮或ICON做点缀.

?

暗红黑——暗红主调.黑或灰底,暗红标题

栏,文字内容背景为浅灰色.

在具体的设计制作中,主页采用了深蓝,浅蓝

一

37—

和白色几种颜色的搭配,其它页面根据内容的需要

进行了亮色与暗色近似色的搭配,并且在一个页面

里都控制在3—4种色彩内.

页面布局设计页面布局类型有不同的分类

方法,有的将网页布局分为”国”字型,拐角型,标题

正文型,左右框架型,上下框架型,综合框架型,封

面型,Flash型,变化型等;还有的将网页布局分为

骨骼型,满版型,分割型,中轴型,曲线型,倾斜型,

对称型,焦点型,三角型,自由型等;不管那类分法

都可以简单地概括为:

(1)最上面是网站的标题以及横幅广告条,接

下来就是导航链接,在下面就是网站的主要内容,

左右分2栏,或3栏或4栏,最下面是网站的一些

基本信息,联系方式,版权声明等.

(2)上面是标题及广告横幅,接下来的左侧是

一

窄列链接等,右列是很宽的正文,下面也是一些

网站的辅助信息.在这种类型中,一种很常见的类

型是最上面是标题及广告,左侧是导航链接.

(3)最上面是标题或类似的一些东西,下面是

正文.

(4)左右或是上下为分两部分,左面或上面是

导航链接,有时最上面会有一个小的横幅,右面或

下面是正文.

(5)在网站的首页,放置一些小的动画或图片,

再配上几个简单的链接或者仅是一个”进人”的链

接甚至直接在首页的图片上做链接而没有任何提

示的页面.

(6)以上页面结构的结合,做的无规律可循,相

对复杂一些,大多和图片结合进行的布局.

本例中,主页采用了最上面是网站的标题,接

下来是跑马灯消息,导航链接,在下面就是网站的

主要内容.左中右分3栏,左边是最新消息滚动窗

口,中间部分是系的主要内容,最右边是图片切换

窗口.最下面是网站的版权声明等.

内容结构设计内容结构设计的比较简单,页

面链接的层深为二级.并采用树形结构,各栏目之

间都能方便地跳转.

在进行网页风格设计时,需要注意:

?

尽量使用网页中的标准色彩.文字的链接色

彩,图片的主题色,背景色,边框的色彩等都要使用

标准色彩.

?

网页中要使用标准字体和字号.在所有的标

题,文字,图片里要使用统一的标准字体.

?

在网页中使用统一的图片处理效果.

?

网页中尽量使用自己设计的花边,图案和按

钮,以突出网页的特点.

2工具的选用和介绍

2.1网页制作工具选用的是AdobeDreamweaver

cs软件

一

38一

Dreamweaver是美国MACROMEDIA公司开发

的集网页制作和管理网站于一身的所见即所得网

页编辑器.它是第一套针对专业网页设计师特别发

展的视觉化网页开发工具,利用它可以轻而易举地

制作出跨越平台限制和跨越浏览器限制的充满动

感的网页.

它包含HomeSite和BBEdit等主流文字编辑

器.帧(frames)和表格的制作速度快的令您无法想像.

进阶表格编辑功能使您简单的选择单格,行,栏或

作未连续之选取.甚至可以排序或格式化表格群

组,Dreamweaver支援精准定位,利用可轻易转换成

表格的图层以拖拉置放的方式进行版面配置.所见

即所得Dreamweaver成功整合动态式出版视觉编

辑及电子商务功能,提供超强的支援能力给

Third—party厂商,包含ASP,Apache,BroadVision,

ColdFusion,iCAT,Tango与自行发展的应用软体.

目前版本的DreamweaverCS5最突出的亮点有三

处:①对CMS的支持功能;②对CSS的校验;③对

PHP更好的支持.CS5还内置了webkit引擎,可以

模仿Safari,Chrome浏览器预览网页效果.

2.2动画制作工具选用的是AdobeFlashCS软件

Flash是一种创作工具,设计人员和开发人员

可使用它来创建演示文稿,应用程序和其它允许用

户交互的内容.Flash可以包含简单的动画,视频内

容,复杂演示文稿和应用程序以及介于它们之间的

任何内容.通常,使用Flash创作的各个内容单元称

为应用程序,即使它们可能只是很简单的动画.您

也可以通过添加图片,声音,视频和特殊效果,构建

包含丰富媒体的Flash应用程序.Flash特别适用于

创建通过Intemet提供的内容,因为它的文件非常

小.Flash是通过广泛使用矢量图形做到这一点的.

与位图图形相比,矢量图形需要的内存和存储空间

小很多,因为它们是以数学公式而不是大型数据集

来表示的.位图图形之所以更大,是因为图像中的

每个像素都需要一组单独的数据来表示.

2.3图像处理工具选用的是AdobePhotoshop软

件

Photoshop:它是由Adobe公司开发的图形处理

系列软件之一,主要应用于在图像处理,广告设计

的一个电脑软件.平面设计是Photoshop应用最为

广泛的领域,无论是我们正在阅读的图书封面,还

是大街上看到的招帖,海报,这些具有丰富图像的

平面印刷品,基本上都需要Photoshop软件对图像

进行处理.

3网页设计制作的过程

3.1资料信息的收集

在确定主题,规划站点结构和内容之后,还要

收集相关的资料信息.资料信息是人类的科学文化

知识,各种思想和各种实践活动赖以记录,保存,交

流和传播的一切印刷品和视听材料的统称.资料信

息搜集是有一定技巧的.包括;规划资料,具体搜

索,编辑整理等.

将需要的资料信息搜集完成后,并不是可以直

接应用在网页设计中,因为这些资料往往是凌乱

的,不系统的,还需要大量的编辑工作.首先要仔细

分析资料信息,确定哪些需要,哪些不需要,哪些需

要修改和整理.

本例网页”物理与电子信息工程系”需要搜集

准备的信息资料有以下几种:

?

“物理系概况”栏目方面的图片及相关文字资

料,可以到系办去搜集.

?

“教学管理”,”精品课程”等栏目的相关资料

到系教务办去搜集.

?

“专业介绍”,”课程介绍”,”EDP考试”,”信息

资源”等栏目相关内容到系各教研室去搜集.

?

“精彩瞬间”,”学生管理”等栏目的相关资料

到系学生办去搜集.

以上几点都是实现网页工程项目所需要的前

期搜集准备工作,这是完成网页设计不可缺少的一

个步骤.

3.2网页的制作

首先用Photoshop图形处理软件来处理图片,

制作LOGO和超链接图标;其次用Flash软件制作

所需的动画;最后利用Dreamweaver软件制作网页.

本例中的网页是用html语言编写的一个关于

“物理与电子信息工程系”的网站,htnl中文翻译为

“超文本标记语言”,所谓”超文本”就是指页面内可

以包含图片,链接,多媒体等非问字的元素,通过

html语言将这些元素表示出来,就形成了html代

码.

html的结构包括头部head,主体body两大部

分,其中头部描述浏览器所需的信息,而主体则包

含所要说明的具体内容.另外,html是网络的通用

语言一种简单,通用的全置标记语言.它允许网页

制作人建立文本与图片相结合的复杂页面,这些页

面可以被网上任何其他人浏览到,无论使用的是什

么类型的电脑或浏览器.其主要特点如下:

(1)简易性,html版本升级采用超集方式,从而

更加灵活方便.

(2)可扩展性,html语言的广泛应用带来了加

强功能,增加标识符等要求,html采取子类元素的

方式,为系统扩展带来保证.

(3)平台无关性.虽然Pc机大行其道,但使用

MAC等其他机器的大有人在,HTML可以使用在

广泛的平台上.

部分页面采用DIV+CSS进行页面布局.

DIV+CSS是网站标准(或称”WEB标准”)中常用术

语之一,DIV+CSS是一种网页的布局方法,这一种

网页布局方法有别于传统的HTML网页设计语言

中的表格(table)定位方式,真正地达到了w3c内容

与表现相分离.其优点在于:①使页面载人得更快

.

②降低流量费用.③修改设计时更有效率.④保持

视觉的一致性.⑤更好地被搜索引擎收录.⑥对浏览

者和浏览器更具亲和力.我们都知道网站做出来是

给浏览者使用的,对浏览者和浏览器更具亲和力,

DIV+CSS在这方面更具优势-由于CSS富含丰富的

样式,使页面更加灵活性,它可以根据不同的浏览

器,而达到显示效果的统一和不变形.

在”专业简介”,”课程简介”以及”精彩瞬间”还

用到了iframe元素.iframe元素的功能是在一个

html内嵌一个文档,创建一个浮动的帧,可以嵌在

网页中的任意部分.Iframe虽然内嵌在另一个

HTML文件中,但它保持相对的独立,是一个”独立

王国”,在单一HTML中的特性同样适用于浮动帧

中.通过Iframe标记,我们可将那些不变的内容以

Iframe来表示,这样,不必重复写相同的内容,这有

点象程序设计中的过程或函数,减省了多少繁琐的

手工劳动.

3-3网页测试

在制作过程中随时浏览每一张网页,及时发现

网页中的错误,并改之.

本次参赛作品——网页设计制作是静态网页.

静态网页是相对于动态网页而言.也就是以.htm,.

html,.shtml,.xml等为后后缀的.在html格式的网页

上,也可以出现动画,滚动字母等.这些”动态效果”

只是视觉上的,与动态网页是不同的概念.

静态网页每个网页都有一个固定的URL.且网

页htm,.html,.shtml等常见形式的后缀,网页内容

一

经发布到网站服务器上,无论是否有用户访问,

每个静态网页的内容都是保存在网站服务器上的,

每个网页都是一个独立的文件.静态网页的内容相

对稳定,因此容易被搜索引擎检索静态网页没有数

据库的支持,在网站制作和维护方面工作量较大,

因此当网站信息量很大时完全依靠静态网页制作

方式比较困难.静态网页的交互性交叉,在功能方

面有较大的限制.尽管”静态网页”存在许多不足,

但是初学者要学好网页制作不妨从”静态网页”制

作学起.

做好一个网页不是一件容易的事,对个人的要

求是全方位的,需要有扎实的知识和综合素质,要

有全身心投入到网页世界的决心和勇气,去不断的

学习,去不断的探索;同时去不断的充实,去不断的

完善自我.

一

39—

《网页设计与制作实训教程》大纲一、课程的地位与性质“网页设计与制作”是高职动漫设计与制作专业的职业技术课程，重点讲述网页设计与制作的基础知识、基本理论和基本技能，是一门包含了网页、网站的概念、网页主要工具软件HTML、dreamweaver中文版的使用等诸多知识的操作性极强的技能型应用课程。“网页设计与制作”以“信息技术与应用”和“计算机辅助平面设计”为前期基础课程。二、课程的任务与目的通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。本课程培养学生的职业素养和创新能力，为日后走向工作岗位打下理论与实践基础。通过本课程的学习实现学生思想过硬、理论基础扎实、实际工作能力强的教学目标。三、课程总体结构、教学环节和课时分配章课程内容课时小计讲授实验案例其他1Intelnet和www660002HTML基础808003网页规划和网页设计606004网页制作与编程工具404005建立本地站点404006制作第一个网页404007表格及其应用404008CSS基础及应用4049框架基础及应用40410行为及应用20211层与动画40412JavaScript编程基础60613实例网站制作40414复习220合计62854四、教学内容第一章概述6学时教学目的：掌握HTML的基本语法、学会用HTML编写简单网页。教学重点与难点：HTML的基本语法、HTML的主要标记、表格标记及其属性、超级连接标记。第一节Internet简介一、Internet的历史二、Internet的网络结构三、Internet的应用第二节Internet的IP地址与域名一、IP地址及结构二、IP地址分类三、IP地址的特殊属性四、域名系统第三节Web站点和网页一、Web站点和网页二、Web的运行机制第二章HTML基础8学时教学目的：掌握HTML的基本语法、学会用HTML编写简单网页。教学重点与难点：HTML的基本语法、HTML的主要标记、表格标记及其属性、超级连接标记。第一节HTML简介一、HTML的特点二、HTML的基本框架第二节HTML编程入门一、HTML程序结构二、编写一个简单网页第三节常用HTML标记一、文本相关标记二、图片的HTML标记三、层的HTML标记四、滚动标记第四节列表标记一、无序列表二、有序列表三、定义列表第五节表格标记和属性第六节超级连接一、程序编写步骤二、程序清单第七节支持多媒体一、插入音乐文件二、插入视屏文件第三章网站规划和网页设计6学时教学目的：掌握网页设计、网站规划的基本方法。教学重点与难点：网站规划、网站内容组织和导航、网页色彩设计、网页版面设计第一节网站规划一、网站内容规划二、题材的选择与定位第二节网站创意和风格一、设计创意的获得二、确定网站风格三、网站内容组织第三节页面内容设计一、页面整体视觉效果二、页面内容编排第四节信息结构和导航设计一、网站的信息结构二、网站导航设计第五节网站首页设计一、确定网站首页功能模块二、设计首页的版面第六节网页色彩一、色彩的视觉效果二、页面色彩搭配三、HTML的色彩属性值第四章网页制作与编程工具4学时教学目的：掌握DreamweaverMX工作区、菜单的基本使用方法。教学重点与难点：DreamweaverMX开发环境的界面布局与基本操作。第一节DreamweaverMX网页开发环境一、选择工作区二、工作区窗口三、面板组和属性检查器四、编辑代码和视图切换第二节其他相关工具第三节图片处理基础一、网页图像文件格式二、图片的Web格式第五章建立本地站点4学时教学目的：掌握在Dreamweaver中建立和维护站点的方法教学重点与难点：在Dreamweaver中建立站点并维护站点第一节网站文件结构一、网站名称二、设计站点结构第二节在Dreamweaver中定义站点第三节维护和管理站点一、站点面板二、编辑和删除站点三、在站点中操作文件第四节制作网页的基本流程第六章制作第一个网页4学时教学目的：掌握各种网页元素及其属性的设置方法第一节实训准备第二节文本元素一、文本输入二、设置文本属性第三节图像元素一、插入图象二、设置图像的属性第四节超级链接一、文本超级链接二、锚点链接三、邮件链接四、创建空链接和脚本链接五、图片超级链接六、翻转图片链接第五节flash元素一、插入flash按钮二、插入flash文本三、插入flash动画第七章表格及其应用4学时教学目的：掌握表格的基本操作方法。第一节实训准备第二节表格基础一、表格的基本操作二、设置表格属性三、设置单元格属性四、表格的修改五、在表格中插入元素第三节表格排版技术一、表格排版二、用表格制作细线第四节表格技巧和应用一、制作细线表框二、制作圆角表格三、制作阴影表格四、处理表格数据第五节实例表格布局步骤第八章CSS基础及应用4学时教学目的：掌握CSS的基本概念，掌握用Dreamweaver定义CSS样式的方法，能按给定的样式规格说明制作符合设计要求的CSS样式，并能对样式进行修改和引用。第一节CSS基础知识一、CSS的语法规则二、在网页中添加CSS样式第二节Dreamweaver中的CSS一、新建样式和样式文件二、设置样式参数三、编辑CSS样式参数四、引用CSS样式五、附加样式表六、利用CSS浮动面板第三节CSS应用一、用CSS修饰文本二、改变超级链接的样式三、用CSS美化表格第四节CSS的扩展属性一、阴影滤波器二、alpha滤波器第九章框架基础及应用4学时教学目的：掌握框架的基本概念和操作方法，会用框架制作网页；掌握设置和修改框架属性的方法，以及框架页面导航的链接方法第一节框架介绍一、实例设计说明二、创建框架集三、保存框架四、框架浮动面板和属性设置第二节实例框架制作一、素材准备二、布局分析三、实现方法和步骤第三节内嵌框架第十章行为及应用2学时教学目的：理解行为的工作原理，掌握事件和动作等基本概念；掌握行为面板的使用方法；掌握常用事件和动作的添加方法。第一节行为面板的使用第二节添加行为一、播放声音二、弹出消息窗口三、弹出公告牌窗口四、改变对象属性五、检查插件六、显示/隐藏层七、交换多张图片八、拖动层第十一章层与动画4学时教学目的：掌握层、层面板的操作方法；掌握层的属性设置方法，层与表格的转换方法。掌握层、动画、行为等技术的综合应用方法。第一节层的属性设置与操作一、创建层的方法二、层的属性设置三、层的操作四、层的浮动面板第二节用层制作拼图游戏第三节用层制作下拉菜单第四节网页动画 一、时间轴面板二、时间轴动画三、制作浮动广告第十二章JavaScript编程基础6学时教学目的：了解JavaScript语言基本知识，掌握JavaScript程序的网页应用方法。教学重点与难点：JavaScript的基本数据类型和程序结构、自定义函数及调用、常用内部对象、JavaScript程序的网页应用方法。第一节JavaScript语言的特点第二节JavaScript和Java的区别第三节在网页中嵌入JavaScript程序一、JavaScript的开始于结束标记二、在JavaScript中使用注释标记第四节JavaScript的基本数据类型一、常量二、变量第五节程序结构一、分支结构二、循环结构第六节自定义函数一、函数的构成二、函数的定义和调用三、链接JavaScript脚本程序四、JavaScript的内部函数五、函数的返回值第七节JavaScript的内部对象一、数组对象Array二、日期对象Date三、数学对象Math四、字符串对象String第十三章实例网站制作6学时教学重点与难点：实例网站设计说明、制作和程序应用详解第一节实例说明一、设计说明二、实例图解第二节创建实训网站一、网站结构设计二、建立站点三、站点结构实现第三节制作第一个网页一、制作准备二、页面布局分析三、制作步骤与参数四、CSS样式规格第四节制作第二个网页一、制作准备二、页面布局分析三、制作步骤与参数四、制作图片热区链接五、网站链接结构第五节制作第三个网页一、制作准备二、页面布局示意三、制作步骤与参数四、设置文本的CSS第六节制作第四个网页一、制作准备二、页面布局示意三、制作步骤与参数四、时间轴面板的操作方法第七节制作第五个网页一、制作准备二、页面布局分析三、制作步骤与参数四、制作时间轴动画第八节制作第六个网页一、制作准备二、页面布局分析三、制作步骤与参数第九节程序应用：交换图片 一、程序应用背景 二、程序源码与说明 三、使用程序的步骤第十节程序应用：图片渐显渐隐 一、程序应用背景二、程序说明与应用1三、程序说明与应用2四、程序说明与应用3第十一节程序应用：图片旋转运动一、程序应用背景二、程序源码与说明 三、使用程序的步骤第十二节网页背景移动与音乐第十三节程序应用：星光闪入一、程序应用背景二、程序说明与使用五、教学建议1、必须以实际出发，密切联系当前网络的实际情况，要按照洋为中用、外为我用的精神，认真学习网页设计知识，加强动手能力的培养，不断提高解决实际问题的能力。2、在学习中不仅要注重HTML和dreamweaver基本知识的掌握，还要对网页的主要概念和操作内容进行模拟和训练，通过课堂学习、课后练习和模拟实验、实训及到业务部门实习，使基本技能的训练得到加强，培养学生实际操作的能力。3、考试：①考试形式：无纸化考试,实验课考试。②评卷标准：60%期末卷面+40%平时成绩及上机操作六、使用说明本大纲适用于电子商务专业。本大纲推荐使用的教材为《网页设计与制作实训教程》（中国水利水电社出版，白征、李云程主编，21世纪高职高专新概念教材，2006年7月出版）编写人：（签字）董华亮教研室主任：（签字）系（部）主任：（签字）编写日期:200执行日期:200網頁設計與制作網上作業时间:2021-02-2711:21:27|[<<][设计与制作网上作业网页制作第一章答:（1）：超文本传输协议，用于WEB服务器和WEB客户机之间；（2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间；（3）TELNET：远程登录协议，用于客户机与终端之间。2．现给出一个网址如下：anetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。您的答案：答://前的表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上；表明了WWW服务器的位置；planetwide/select/selector.html表明最终要访问的文件所在的位置。3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可）您的答案：答：访问信息的链接方式有以下几种:3、News：例如[url=news:\\]news:\\[/url]4、telnet：例如[url=telnet:\\]telnet:\\[/url]4．我们要进入紫霞的公众网，网址如下：，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。您的答案：答：进入紫霞公众网可采取以下几种方法:1、在浏览器中登录：在URL地址栏中输入。2、开始→运行→输入cmd→在命令行输入telnetwforum.zixia.ne命令并回车。3、开始→运行→输入telnet→输入“open命令并回车。5．如果远程登录失败，请问原因可能是什么？您的答案：答：远程登录失败，可能有以下几种原因：1、远程主机的网址或IP地址拼写错误。2、远程主机不存在。3、远程计算机暂时不能使用。6．实践：启动INTERNETEXPLORER浏览器，修改其INTERNET选项，并观察其效果。您的答案：答：INTERNET选项的配置图如下:本题中我把设置为主页，这样当打开Internetexploer时，将自动打开网站:网页制作第二章答：（1）主题图形式；（2）信息发布式；（3）介于两者之间的风格。 2．根据本章中学习的商业网站的风格，请你通过比较列出三条商业网站的共同特征： 您的答案：答：（1）公司标志或徽标应出现在页面上方，占用版面小；（2）可以采用广告或主题图形的形式来突出公司形象与风格；（3）有一些固定的栏目页面，如产品、服务等；（4）必须建立站内搜索引擎，便浏览者查找信息。 3．在规划站点的目录结构的时候，应该注意哪些问题？ 您的答案：答：（1）要将目录分层，不能只有一个根目录，最好不使用中文目录，尽量用意义明确的目录；（2）按栏目内容建立子目录，而不能将所有内容都放在根目录下；（3）为每一个子目录都建立一个独立的images目录，用于存放该子目录的图象；（4）目录的层次不能没有，但必须尽量少，以便于管理； 4．请根据信息发布式模式的特点列出4种适合于用信息发布式风格来制作网页的题材。 您的答案：答：（1）用于软件下载的网页；（2）用于新闻发布的网页；（3）用于音乐下载的网页；（4）文学作品大全；（5）论坛。 5．请你浏览海尔集团的网站：，说明海尔网站的层次结构是几级的，学习海尔网站的链接结构并以图表示出来（图中可省略同类项目）。 您的答案：答: 6．请根据本章学习的内容，如果你想建一个个人网站，请问你将如何规划你的站点，通过你所使用的网页制作工具尝试设计一个个人网站。（本题为选作题，同学们可以将做好的网页放到论坛中的作业空间中，相互比较和学习。）您的答案：答：我建立了一个个人简历型个人网站：包括如下栏目：我的主页——我的作品——我的照片——与我联系阅读(747)分享(0)评论(1)分类：网上作业发表于16:19[2007/12/02]网页制作第一章1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。您的答案：答:（1）：超文本传输协议，用于WEB服务器和WEB客户机之间；（2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间；（3）TELNET：远程登录协议，用于客户机与终端之间。2．现给出一个网址如下：，请你根据所学的URL分析该网址各个部分的含义。您的答案：答://前的表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上；表明了WWW服务器的位置；planetwide/select/selector.html表明最终要访问的文件所在的位置。3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可）您的答案：答：访问信息的链接方式有以下几种:3、News：例如[url=news:\\]news:\\[/url]4、telnet：例如[url=telnet:\\]telnet:\\[/url]4．我们要进入紫霞的公众网，网址如下：，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。您的答案：答：进入紫霞公众网可采取以下几种方法:1、在浏览器中登录：在URL地址栏中输入。2、开始→运行→输入cmd→在命令行输入telnetwforum.zixia.ne命令并回车。3、开始→运行→输入telnet→输入“open命令并回车。5．如果远程登录失败，请问原因可能是什么？您的答案：答：远程登录失败，可能有以下几种原因：1、远程主机的网址或IP地址拼写错误。2、远程主机不存在。3、远程计算机暂时不能使用。6．实践：启动INTERNETEXPLORER浏览器，修改其INTERNET选项，并观察其效果。您的答案：答：INTERNET选项的配置图如下:本题中我把设置为主页，这样当打开Internetexploer时，将自动打开网站:网页制作第三章答:如果在采用了安全调色板以外的颜色，在Web上显示时就会产生"抖动".抖动是由于Web安全色的限制而产生的。由于浏览器本身不能显示所有的颜色。因而伪造了那些在颜色有限的调色板中不能显示出来的颜色。在视觉上，近邻的像素倾向于混合而产生在图像中实际不存在的颜色，从而达到一种补偿目的。"抖动"的图像有很多颗粒，显得图像非常粗糙。2．图象有两种常用的文件格式：GIF文件格式和JPEG文件格式，请简述这两种格式有什么区别，我们要制作透明图形和动画的时候选择哪种文件格式更好，如果我们要处理照片选择哪种文件格式更好。您的答案：答:（1）GIF支持的颜色比JPEG少；（2）JPEG保存的是像素点，文件较大，GIF保存的是颜色索引号；（3）JPEG的压缩算法压缩算法对包含有复杂颜色的图片更有效。制作透明图形和动画的时候选择GIF格式更好；而处理照片的时候选择JPEG文件格式3．上面给出的是一个个人主页，请根据该页面和本章所学习的内容，分析该页面的重心平衡情况，并简要说明理由，如果你认为该页面不平衡请给出一个使它重心平衡的方案。您的答案：答:我认为该页面的重心不平衡，重心偏左，左边的导航条和右边的友情链接本来是可以平衡该页面的，使它成为一种对称型网页，但是，中间的文字却没有放在中间，而是靠左，因此导致了整个页面的重心偏左。解决方法（这里给出两个可行的方法）：（1）在网页上添加一个渐变色图片，从左往右颜色越来越深；（2）将网页中间的文字改为居中对齐，使页面趋于平衡。此答案仅供参考，同学们只要分析得清楚有理皆算正确。4．请简述在网页设计的时候要考虑哪些规则。您的答案：答:（1）网站的设计目的决定设计方案；（2）浏览者的需求第一位；（3）页面的有效性；（4）页面布局的保持统一性；（5）使用表格和适当的帧结构来设计网页；（6）谨慎使用图片；（7）平面设计意识；（8）减少JavaApplet和其他多媒体的使用。5．灵活运用色块是网页设计中的一项重要技能，在运用色块制作网页的时候应该注意哪几点？您的答案：答:（1）冷暖色调在均匀使用时不宜靠近，如果必须的话，应当使用中间色分隔过渡；（2）纯度相同的两种颜色不宜放在一起，如亮红和亮绿；（3）整个页面中最好有一个主色调，否则整个页面就显得凌乱。6．请使用具体的网页制作工具新建一个网页，网页的整体框架如图3-1所示，请同学们根据框架中的提示并根据你们的个人爱好，在网上下载一些适合的图片（如在百度（）中搜索图片），并结合文字设计一个简单但布局合理的网页?网站的主题图形及网站的主题文字导航栏目（链接可以直接链接到本页而不需再做别的网页） 网页的主要展示空间，可以是主题图形式，放一张图片，也可以是信息提供式，提供大量信息 友情链接（可链接到一些与本网页主题相关的知名网站）图3-1网站主要框架网页制作第四章答:<html><head><title>无标题文档</title></head><body></body></html>2．在本章中我们学习了很多网页制作的技巧，请你为你在上一章所做的网页嵌入适当的音乐（可以是你喜欢的，但一定要与你的网页相协调）。您的答案：答:（1）可以将网页右键用记事本的方式打开源代码；（2）在源代码的<body>的下方插入代码“<embedsrc="../../音乐/01-夜曲.mp3"autostart="true"loop="true">”即可，其中src=后面所跟的是你所要插入的音乐的文件的位置。3．新建一个页面，并在其中添加一个符号清单，结果如图4-1所示。图4-1清单结果您的答案：答:<html><head><title>清单</title></head><body><UL><LI>JAVA2介绍<UL><LI>探索JAVA2<OL><LI>JAVA的发展<LI>交互式WEB编程<LI>JAVA语言的来源<LI>JAVA语言的版本</OL><LI>选择JAVA的原因<OL><LI>面向对象<LI>易于学习<LI>平台无关性</OL><LI>JAVA编程<OL><LI>选择JAVA开发工具<LI>安装软件开发工具包</OL></body></html>4．在第3题的结果中，改变标号清单的格式，使其成为如图4-2所示的结果。图4-2清单结果您的答案：<html><head><title>清单</title></head><body><UL><LI>JAVA2介绍<UL><LI>探索JAVA2<OLtype=a><LI>JAVA的发展<LI>交互式WEB编程<LI>JAVA语言的来源<LI>JAVA语言的版本</OL><LI>选择JAVA的原因<OLtype=I><LI>面向对象<LI>易于学习<LI>平台无关性</OL><LI>JAVA编程<OLtype=A><LI>选择JAVA开发工具<LI>安装软件开发工具包</OL></body></html>5．请你根据本章中所学的本章的内容，设计一个登录页面，在登录页面中要输入用户名和密码，然后要设置提交和重新输入按钮，请提交你所做的网页的HTML文件。（仅要一个表格练习表单即可，不需考虑网页的设计和布局）您的答案：答:<html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>登录页面</title><styletype="text/css"><!--.style1{font-size:large;color:#990066;}--></style></head><body><tablewidth="297"border="0"cellpadding="0"cellspacing="0"><!--DWLayoutDefaultTable--><tr><tdwidth="148"height="18"> </td><tdwidth="149"> </td></tr><tr><tdheight="17"> </td><tdvalign="top"><spanclass="style1">请正确输入你的信息:</span></td></tr><tr><tdheight="39"> </td><td><tablewidth="279"><tr><tdwidth="69">姓名:</td><tdwidth="198"><inputtype=textname=姓名size=10></td></tr><tr><td>密码:</td><td><inputtype=passwordname=密码><br></td></tr><tr><td><inputtype=submitvalue="提交"></td><td><inputtype=resetvalue="重新输入"></td></tr></td></tr></table></body></html>网页制作第五章答:（1）HTML4.0：包括许多增强特性，使格式更灵活；（2）CSS：用于控制文档的显示，可以使页面布局和格式比HTML更精确；（3）DOM：为HTML文档定义了一个与平台无关的程序接口；（4）脚本语言：可以是Javascript__或者是VBscript__.2．通过了解客户端表单检测的内容，新建一个HTML页面，在该页面中仅使用一个文本框输入用户的姓名，并且不能为空，如图5-6所示。图5-6表单检测姓名您的答案：答:<html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>无标题文档</title></head><body><script__language=javascript__><!--//Powerbyxiaotian2002functioncheckSubmit(){if((.value)==''){window.alert('姓名必须填写');.select();.focus();returnfalse;}elsereturntrue;}//--></script__><formname="form1"onsubmit="javascript__:returncheckSubmit()">请输入您的姓名:<inputtype="text"name="name">(姓名不能为空)<inputtype="submit"value="提交"></form></body></html>3．JavaScript脚本应放在页面的什么位置，其存放位置对脚本的执行有什么影响？您的答案：答:其实javascript脚本放在那里，一般来说不会影响其执行地效果，当你打开一个网页的时候他会先执行你需要执行的脚本语言最后才会执行HTML语言脚本，所以就上边这个事实，我觉得，这样的话应该放在html语言的头部，人一看就一目了然，更容易以后代码的修改。4．在上一章中我们使用HTML编写了一个登录页面，请在该登录页面的HTML代码中添加一段JavaScript代码，使它可以显示当前的日期和星期（结果如图5-7所示），并提交页面的源代码或页面。您的答案：答:代码如下：<html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>登录页面</title><styletype="text/css"><!--.style1{font-size:large;color:#990066;}--></style></head><body><script__language="javascript__"><!--todayDate=newDate();date=todayDate.getDate();month=todayDate.getMonth()+1;year=todayDate.getYear();document.write("今天是")document.write("<br>")if(navigator.appName=="Netscape"){document.write(1900+year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")}if(navigator.appVersion.indexOf("MSIE")!=-1){document.write(year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")}if(todayDate.getDay()==5)document.write("星期五")if(todayDate.getDay()==6)document.write("星期六")if(todayDate.getDay()==0)document.write("星期日")if(todayDate.getDay()==1)document.write("星期一")if(todayDate.getDay()==2)document.write("星期二")if(todayDate.getDay()==3)document.write("星期三")if(todayDate.getDay()==4)document.write("星期四")//--></script__><tablewidth="297"border="0"cellpadding="0"cellspacing="0"><!--DWLayoutDefaultTable--><tr><tdwidth="148"height="18"> </td><tdwidth="149"> </td></tr><tr><tdheight="17"> </td><tdvalign="top"><spanclass="style1">请正确输入你的信息:</span></td></tr><tr><tdheight="39"> </td><td><tablewidth="279"><tr><tdwidth="69">姓名:</td><tdwidth="198"><inputtype=textname=姓名size=10></td></tr><tr><td>密码:</td><td><inputtype=passwordname=密码><br></td></tr><tr><td><inputtype=submitvalue="提交"></td><td><inputtype=resetvalue="重新输入"></td></tr></td></tr></table></body></html>5．在上题结果的基础上，使用DOM使用户在点击“提交”后看到如图5-8所示的页面。图5-8显示结果您的答案：答:（1）在<head>、</head>之间加入以下程序：<script__>functioncreateNewDoc(){varnewDoc=document.open("text/html","replace")vartxt="<html><body>你好,欢迎光临我的网站,希望你观赏愉快!</body></html>"newDoc.write(txt)newDoc.close()}</script__>（2）在<body>、</body>中“提交”的位置将其<input>内的内容改为：<inputtype="button"value="提交"onclick="createNewDoc()">网页制作第六章答:（1）超文本标记选择符：HTML标记；（2）类选择符：class；（3）ID选择符：ID；（4）包含选择符。（该类选择符在本章中没有作详细介绍，如感兴趣可以自学）2．从样式单插入的形式来看，层叠样式表中的样式单可以分为哪三种，它们的作用分别是什么您的答案：答:（1）内联式样式单：只对插入该样式单的段落或标记起作用，简化了HTML标记的属性，直接通过CSS控制显示样式；（2）嵌入式样式单：统一整个页面的样式，只要改变样式，整个页面中与样式相关联的位置都将改变；（3）外部式样式单：统一整个网站的所有网页的样式，只要改变样式，整个网站内所有页面对应的样式都将改变。3．建立一个CSS，完成的功能是使网页中的链接没有下划线（网页中可以做一个百度搜索引擎的链接，网址是：）。您的答案：答:完整的HTML代码如下：<html><head><title>css</title><style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:active{text-decoration:none;}</style><meta-equiv="Content-Type"content="text/html;charset=gb2312"></head><body><Ahref=://baidu>百度搜索引擎</A></body></html>4．建立一个CSS，使网页可以在不同的段落显示不同的背景色，结果如图6-5所示。（颜色可以自己选择）图6-5段落背景颜色结果您的答案：答:<html><head><title>css</title><style>P{background-color:blue;color:white}</style><meta-equiv="Content-Type"content="text/html;charset=gb2312"></head><body>这段文字用于对比.<p>请注意该段文字的背景颜色和字体颜色.</P></body></html>5．上一章中我们修改了一个登录页面，请在上一章修改的基础上给页面加上一个边框，宽度和颜色及样式都自己确定。您的答案：答:<style>body{border-top-width:20pt;border-right-width:20pt;border-bottom-width:20pt;border-left-width:20pt;border-top-color:#9900CC;border-right-color:#00FFFF;border-bottom-color:#66FF00;border-left-color:#666666border-style:outset}</style>网页制作第七章答:（1）创建和管理WEB站点；（2）制作网页；（3）发布站点；（4）维护站点。2．请你用FrontPage2003新建一个只有一个网页的站点，并为站点取名为“mysite”。您的答案：答:3．在站点中的页面中练习使用主题，并观察其效果，并在运用完后删除主题。您的答案：答:4．设计自己的主页，并熟悉FrontPage2003的各项菜单和工具栏及其使用。（在主页中一定要使用一个以上的表格，也可以使用主题）您的答案：答:5．创建一个或多个二级页面，并设置它们与主页之间的相互链接。您的答案：答:6．在所做的网站中的任一网页中插入一首你所喜欢的音乐。您的答案：答:网页制作第八章答:（1）紧扣主题：将网站的主题分类，并将它们作为网站的主栏目；（2）主页庞大或层次过多：设一个最近更新或网站指南栏目；（3）双向交流：设一个可以双向交流的栏目，如论坛、留言本等；（4）避免重复回答问题：设置一个常见问题回答栏目2．对于商业网站来说，站点的推广非常重要，常用的站点推广方式有哪几种。您的答案：答:（1）搜索引擎注册；（2）网络广告交换；（3）邮件列表服务；（4）BBS讨论组的宣传。3．现在我们已经学会了如何建立网站并学会了将其在互联网中发布，那么，我们应该如何在搜索引擎中注册呢，请你通过上网查资料免费将你所发布的网页在搜索引擎中注册，以推广你的网站，使更多人看到你的网页。您的答案：答:（1）进入搜狗搜索注册的页面，并在该搜索引擎进行注册，网址如下：（2）正确填写信息，如图8-10所示；（注：为了使你的网页在多个关键词的搜索中都出现，在网站描述中应尽量详细地描述你的网站的内容，在这里我省略了）（3）提交，成功后即为注册成功。4．用FRONTPAGE2003打开你的网站，查看并分析它的链接结构，看看是否与你想象的一致（其中包括从主页到所有文件和页面的链接）您的答案：答:我的网站的链接结构如图8-11所示，从主页链接到了我的二级页面，并且链接了所有的图片和音乐以及该网页中使用到的超级链接5．使用FRONTPAGE2003将你所制作的网站发布到自己的计算机上（即将网页发布到“文件系统”），并启用浏览器进行浏览。您的答案：答:网页制作第九章答:（1）严密性；（2）可扩展性；（3）互操作性；（4）开放性。2．进行实际操作，熟悉XML的写法并熟悉如何在浏览器上浏览XML页面。（可以将本章中所用到的案例在本地进行调试，运行的结果应该与本章中例子所给出的结果一致）您的答案：答:3．将已经写好的XML代码另存为HTML格式，比较它们之间的差别。您的答案：答:这里以XML的一般实体的例子来说明，XML格式在浏览器中显示的结果如图9-2所示，而将其存为HTML格式的结果如图9-5所示。4．假设你要销售图书和CD，每一本书和每一个CD都有价格和数量，请你为它们定义一个DTD，来记录你的销售情况。您的答案：答:<!DOCTYPEsales[<!ELEMENTsale(#PCDATA|item)*><!ELEMENTitem(itemno,itemp,quantity)><!ELEMENTitemno(#PCDATA)><!ELEMENTitemp(#PCDATA)><!ELEMENTquantity(#PCDATA)>]>5．上一题中我们已经定义了一个文档格式，请你实际调用它，使用XML编写程序并使用该种文档格式输出以下数据：CD编号 价格 销售数量0001 10.00 40002 14.00 20003 75.00 1您的答案：答:<?xmlversion