专题1 网页设计基础知识
1.1 认识网站、网页与主页
1.1.1什么是网页
网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和翻译成页面的文件。
HTML是“HyperText Markup Language”的缩写，意为“超文本标记语言”，它是一种规范，一种标准。它是纯文本格式的，用任何文本编辑器都可以打开编辑。
网页包括的主要元素有：文本、图像、动画、声音、视频、超链接、表格、表单等。
由于多数网页一般均有文字、图像、图形、动画、音频、视频等多媒体信息，具有超链接、并可与网络链接，因此这就使人们登上站点以后，便可以看到五彩缤纷的界面。那么，这些五彩缤纷和千姿百态的Web网页是如何制作出来的？制作好网页以后又如何将它发布到Internet上？这些问题正是本课程所要阐述的主题。
1.1.2什么是网站
多个相互之间具有一定联系的网页就构成了一个网站。
网站用于存储提供给用户浏览的网页文件。它也是一种文档的磁盘组织形式，由文档和若干文件夹组成，文档经过组织分类分别放在不同的文件夹中。
网站存储在服务器或服务器的虚拟主机上，接受访问者通过WWW域名的访问。
网站是具有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其它文件，一个网站不一定要有很多网页，主要是有独立域名、独立存放空间，即使只有一个页面，也叫网站。
网站按照其内容可以分为以下几类：
1、企业网站：围绕企业、产品及服务信息进行网络宣传，通过网站树立企业网络形象。
2、个人网站：个人为了兴趣爱好或为了展示个人等目的而建的网站，具有较强的个性化特色。
3、门户网站：提供综合性互联网资源的网站。国内著名三大门户网站：网易、搜狐、新浪。
4、机构网站：政府机关、相关社团组织或事业单位建立的网站。以机构或社团形象宣传和政府服务为主。
5、娱乐网站：提供娱乐信息、流行音乐、视频等娱乐内容为主的网站。
6、电子商务网站：依靠因特网来完成商业活动的各个环节的网站，如卓越、当当、淘宝、易趣、拍拍等。
7、行业信息网站：随着因特网的发展，网民数量的增加，上网不同兴趣群体的形成，门户网站已经明显不能满足不同上网群体的需要。行业信息网站应运而生，它是能够满足某一特定领域上网人群及其特定需求的网站。如房地产行业网站。
8、专业网站：专门以某个主题为内容而建立的网。如某某课程的网络课程
不同类型网站具有不同的风格和作用，在设计网站时，页面元素的设计、构图、色彩搭配、多媒体信息的使用、文本格式等的设计，要考虑网站的类型。
1.1.3什么是主页
主页又叫首页，主页是网站的第一页，既是一个网站的封面，也是该网站的目录。
欣赏几个不同类型的网站主页：
问题：主页、网页与网站的关系？先规划土地还是先建房？先建房还是先买家具？先
建网页还是先建网站？
1.1.4网页基本构成要素
不同性质的网站具有不同的页面元素，但是，一般的网页都会具备以下一些元素：
1、标题
标题用来说明网站的形式、内容等信息。
2、站标Logo
网站Logo，也叫网站标志，它是一个站点的象征，也是一个站点是否正规的标志之一。一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它。成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。
3、banner
Banner是一种网络广告形式，Banner广告一般是放在网页的顶部位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注。
Banner广告有多种规格和形式，其中最常用的是486 ×60像素的标准广告。这种标志广告有多种不同的称呼，如横幅广告、全幅广告、条幅广告和旗帜广告等。通常是以GIF、JpG等格式建立的图像文件或Flash文件。
4、导航栏—网站索引
导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航栏位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。
5、内容—网站的精神所在
文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。
图像在网页中具有提供信息、展示形象、美化网页、表达个人情趣和风格的作用。可以在网页中使用GIF、JpEG和pNG等多种图像格式，其中使用最广泛的是GIF和JpEG两种格式。
随着网络技术的发展，网页上出现了越来越多的Flash动画。Flash动画已经成为当今网站必不可缺少的部分，美观的动画能够为网页增色不少，从而吸引更多的浏览者。Flash动画不仅需要对动画制作软件非常熟悉，更重要的是设计者独特的创意。
6、页脚
页脚放置网页设计者的基本信息。
思考题：网页的设计需要考虑哪些因素？标题、Logo、页眉、页脚、导航的设计、版面布局的设计、连接结构的设计、网页色彩的搭配设计、字体的设计、宣传标语的设计等。
1.1.5网页的分类
我们通常看到的网页，大都是以HTM或HTML后缀结尾的文件。除此之外，网页文件还有以CGI、ASp、pHp和JSp后缀结尾的。目前网页根据生成方式，大致可以分为静态网页和动态网页两种。
1、静态网页
静态网页是网站建设初期经常采用的一种形式。网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容。其特点如下：
网页内容不会发生变化，除非网页设计者修改了网页的内容。
不能实现和浏览网页的用户之间的交互。信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的选择调整返回给用户的内容。
静态网页的浏览过程如图1所示。
我们使用dreamweaver和html制作的网页属于静态网页。
2、动态网页
再只是.htm，还有.php、.asp等，这些都是采用
动态网页技术制作出来的。动态网页其实就是建立
在B/S架构上的服务器端脚本程序。在浏览器端显
示的网页是服务器端程序运行的结果。动态网页是
经过人与服务器对话的结果。如图网页上的登录、
图1 静态网页的浏览过程
注册、网上购物等都属于此类网站。
静态网页与动态网页的区别在于Web服务器对它们的处理方式不同。当Web服务器接收到对静态网页的请求时，服务器直接将该页发送给客户浏览器，不进行任何处理。如果接收到对动态网页的请求，则从Web服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器。
应用程序服务器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序服务器将该网页传送回网页服务器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯HTML的静态网
页。
如图2所示为动态网页的工作原理图。Array
图2 动态网页的工作原理图
动态网页的一般特点如下。
●动态网页以数据库技术为基础，可以大大降低网站维护的工作量。
●采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、
用户管理、订单管理等。
●动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回
一个完整的网页。
●搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网
站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。
1.2 网站制作基本流程
创建网站是一个系统工程，有一定的工作流程，只有遵循一定的步骤，按部就班地来，才能设计出满意的网站。
1.2.1 前期策划
建立网站第一步就应该确定网站的目标，包括1、网站的整体定位：是商务网站、科
研网站、个人网站还是交流平台或者公司或企业的介绍性网站？2、网站要包含的主要内容和方向等。在确定了目标和内容后，应该给自己的网站起一个响亮的名字。思考如何使
自己的网站在网络海洋里脱颖而出？
一、确定网站主题
设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是的网站的题材。网络上的网站题材千奇百怪,琳琅满目。常见的网站题材有：
第1类：网上求职
第2类：网上聊天／即时信息/ ICQ
第3类：网上社区／讨论 / 邮件列表
第4类：计算机技术
第5类：网页/ 网站开发
第6类：娱乐网站
第7类：旅行
第8类：参考 /资讯
第9类：家庭/教育
第10类：生活/时尚
每个大类都可以继续细分，比如娱乐类再分为体育 /电影/ 音乐大类，音乐又可以按格式分为Mp3、WMA、Ra等，按表现形式分古典，现代，摇滚等。以上都只是最常见的题材，还有许多专业的，另类的，独特的题材可以选择，比如中医，热带鱼，天气预报等等，同时，各个题材相联系和交叉结合可以产生新的题材，例如旅游论坛（旅游+讨论），经典入球播放（足球+影视）等，按这样分下去，题材可以有成千上万个。
对于题材的选择，通常遵循以下原则：
1.主题要小而精
定位要小，内容要精。如果想制作一个包罗万象的站点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色，样样有却样样都很肤浅，因为您不可能有那么多的精力去维护它。网络的最大特点就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次。最新的调查结果也显示，网络上的【主题站】比【万全站】更受人们喜爱，就好比专卖店和百货商店，如果我需要买某方面的东西，肯定会选择专卖店。
2.题材最好是自己擅长或者喜爱的内容
比如：您对擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。
3.题材不要太滥或者目标太高
【太滥】是指到处可见，人人都有的题材；比如软件下载，免费信息。【目标太高】是指在这一题材上已经有非常优秀，知名度很高的站点，要超过它是很困难的。除非下决心和有实力竞争并超过它，记住，在互联网上只有第一，人们往往只记得最好的网站，第二第三名的印象则会浅得多。
二、定义网站名称
网站名称也是网站设计的一部分，而且是很关键的一个要素。比如，【电脑学习室】和【电脑之家】显然是后者简练；【迷笛乐园】和【MIDI乐园】显然是后者明晰；【儿童天地】和【中国幼儿园】显然是后者大气。我们都知道pIIICUp的中文名称【奔腾】，如果改为【奔跑】，可能就没有今天这么【火】了。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是：
1、名称要正
2、名称要易记
根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。例如：beyond studio和超越工作室，后者更亲切好记。另外，
网站名称的字数应该控制在六个字（最好四个字）以内，比如【XX阁】【XX设计室】，四个字的可以用成语，如【一网打进】。字数少还有个好处，一般友情链接的小logo尺寸是88X31，而六个字的宽度是78左右，适合于其他站点的链接排版。
3、名称要有特色
名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。如，音乐前卫、网页陶吧、天籁绝音、地球之殇，在体现出网站主题的同时，能点出特色之处。
1.2.2 站点规划与设计
要想制作精彩的网页，吸引住浏览者，还要好好规划网站。规划站点就像设计一座大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。在规划网站时，明确该网站中需要包含哪些元素，网站的整体结构，同时将网站内容分类、确定各页的主题、各页包含的内容，以及各页之间的层次结构和逻辑关系。以及每幅网页的布局，包括每幅网页中图片和文字的排列、它们之间的相互关系、在页面中各部分的颜色如何选取，如果是框架页面，还要设计页面框架的分布，页面中在什么位置放置链接点，页面中包含哪些信息内容等等。
一、栏目的设置
要将最好的，最吸引人的内容放在最突出的位置，让好东西在版面分布上占绝对优势，那么栏目就是最好的工具。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面：
1.要紧扣主题并突出主题
一般的做法是：将主题按一定的方法分类并将它们作为网站的主栏目。例如有一个以提供网站动画和图片素材为主题的站点，可以将栏目设计如下：
记住：主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。
把主题栏目放在最显眼的地方，让访问者更快、更鲜明地知道网站所要表现的内容。
2.设一个最近更新栏目或网站指南栏目
3.设定一个可以双向交流的栏目
比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。
4.设一个下载或常见问题回答栏目
至于其他的辅助内容，如关于本站，版权信息等可以不放在主栏目里，以免冲淡主题。总结以上几点，我们得出划分栏目需要注意的是：
●尽可能删除与主题无关的栏目
●尽可能将网站最有价值的内容列在栏目上
●尽可能方便访问者的浏览和查询
二、版块的设置
版块比栏目的概念要大一些，每个版块都有自己的栏目。
举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面又各有自己的主栏目。
图网站板块举例
一般的个人站点内容少，只有主栏目(主菜单)就够了，不需要设置版块。
如果觉得的确有必要设置版块的，应该注意：
●各版块要有相对独立性。
●各版块要有相互关联。
●版块的内容要围绕站点主题。
三、网站的目录结构的设计
网站的目录是指建立网站时创建的目录。例如：在用DW建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议：
1.不要将所有文件都存放在根目录下。
有人为了方便，将所有文件都放在根目录下。这样做造成的不利影响在于：
●文件管理混乱。常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。
●上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。所以，建议是：尽可能减少根目录的文件存放数。
2.按栏目内容建立子目录。
子目录的建立，首先按主菜单栏目建立。例如:网页教程类站点可以根据技术类别分别建立相应的目录，象Flash、Dhtm、Javascript等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈联系等建立相应目录。
而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在一个统一目录下。
3.在每个主目录下都分别为图像建立独立的images目录。
默认的，一个站点根目录下都有一个images目录。为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。
4.目录的层次不要太深。
目录的层次建议不要超过3层。原因很简单，维护管理方便。
5.其它需要注意的
●不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。
●不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。
●尽量使用意义明确的目录；上面的例子中，可以用Flash、Dhtml、Javascript来建立目录，也可以用1，2，3建立目录，但是哪一个更明确，更便于记忆和管理呢？显然是前者！
四、网站的链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。
一般的，建立网站的链接结构有两种基本方式：
1.树状链接结构（一对一）
这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下
的子页面，必须绕经首页。
2.星状链接结构（一对多）
类似网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。
这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置。所以，最好的办法是：
首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。
例如，一个新闻站点的页面结构如下：
一级页面
二级页面
图新闻站点页面结构图
其中，首页，财经新闻页，娱乐新闻页，IT新闻页之间是星状链接，可以互相点击，直接到达。而财经新闻页和它的子页面之间是树状连接，浏览财经新闻1后，必须回到财经新闻页，才能浏览IT新闻2。
注意：如果的站点内容庞大，分类明细，需要超过三级页面，那么建议在页面里显示导航条，可以帮助浏览者明确自己所处的位置。就是您经常看到许多网站页面顶部的，类似这样：。
关于链接结构的设计，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如的主菜单放在什么位置，是否每页都需要放置，是否需要用分帧框架，是否需要加入返回首页的链接。在连接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是用DHTML动态菜单等等。
五、网页的布局
网页页面的版面布局是不可忽视的。一个网页是否精彩，与网页布局有重要关系。
常见的网页布局类型：国字型、匡字型、三字型、川字型、拐角型（厂字型）、封面型、flash型等，此外还有骨骼型、满版型、分割型、中轴型、对称型、焦点型、自由型等。
“国”字型布局：最上面是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息，这种结构是国内一些大中型网站常见的布局方式。优点是充分利用版面、信息量大，缺点是页面显得拥挤、不够灵活。
拐角型结构布局是指页面顶部为标志+广告条，下方左面为主菜单，右面显示正文信息。这是网页设计中使用广泛的一种布局方式，一般应用于企业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。在这种类型中，
一种很常见的类型是最上面是标题及广告，左侧是导航链接。
框架型布局：一般分成上下或左右布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局。上边一栏放置图像广告，左边一栏显示导航栏，右边显示正文信息。
封面型布局：一般应用在网站的主页或广告宣传页上，为精美的图像加上简单的文字链接，指向网页中的主要栏目，或通过“进入”链接到下一个页面。
Flash型布局：这种布局与封面型的布局结构类似，不同的是页面采用了Flash技术，动感十足，可以大大增强页面的视觉效果。
标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，如一些文章页面或注册页面等就是这种类。
网页布局的技巧：
1、内容第一，形式第二。内容决定形式，形式表现内容。
2、布局设计要综合运用对比与调和、对称与平衡、节奏与韵律、以及留白等手段，通过
空间、文字、图形之间的相互关系建立整体的均衡状态，使网页疏密有致、井井有条、重点突出、平衡和谐。
3、加强视觉效果，保持新鲜和个性。在浩瀚的网页中，如何使自己的网页吸引浏览者的
视线，增强网站的浏览量？强烈的视觉效果是必要手段，同时，只有那些具有个性的，充满趣味且与众不同的网页，才能给人带来赏心悦目的感觉。
4、页面风格的统一协调。包括布局结构、色彩搭配、等设计风格的统一，如网站标志等
设计性元素的一致性、网站导航的位置、形式的一致性、版权信息及色彩的一致性，还要注意其它页面和首页的风格一致性等。
网页布局的技术：
1、表格布局。
2、ApDiv（层）布局。
3、Spry布局对象。
4、CSS+Div布局。
5、框架布局
六、确定网站的整体风格和创意设计
网站的整体风格及其创意设计是设计者最希望掌握，也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给一个主题，任何两人都不可能设计出完全一样的网站。
1、风格
风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字字体和大小以及背景的使用，语气，内容价值等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。
有风格的网站与普通网站的区别在于：普通网站看到的只是堆砌在一起的信息，只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但浏览过有风格的网站后能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。
如何树立网站风格呢？我们可以分这样几个步骤：
第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。首先必须保证内容的质量和价值性。这是最基本的，无须置疑。
第二，需要彻底搞清楚自己希望站点给人的印象是什么。可以从以下几方面思考：
第三，在明确自己的网站印象后，开始努力建立和加强这种印象。
此时，需要进一步找出其中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化。例如：再次审查网站名称、域名、栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等等。比如：定位网站CI形象
所谓CI(corporate identity)，是借用的广告术语，意思是通过视觉来统一企业的形象。现实生活中的CI策划比比皆是，杰出的例子如：可口可乐公司，全球统一的标志，色彩和产品包装，给我们的印象极为深刻。更多的例子如SONY，三菱，麦当劳等等。一个杰出的网站，和实体公司一样，也需要整体的形象包装和设计。准确的，有创意的CI 设计，对网站的宣传推广有事半功倍的效果。
1、设计网站的标志(logo)
首先需要设计制作一个网站的标志(logo)。就如同商标一样，logo是站点特色和内涵的集中体现，看见logo就让大家联想起的站点，即网站的标志。
标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。比如新浪用字母sina+眼睛作为标志。标志的设计创意来自网站的名称和内容。
欣赏一些网站Logo
(1) 网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如腾讯的企鹅，搜狐的卡通狐狸。
(2) 网站有专业性的，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。
(3) 最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体，字母的变形，字母的组合可以很容易制作好自己的标志，例如前面提到的新浪，以及迪斯尼。
2、设计网站的配色方案
打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因此，在设计网页时，必须要高度重视色彩的搭配。
一般来说，适合网页标准色彩有3大色系：蓝色、橙色/黄色、黑/白/灰色系。不同的色彩搭配会产生不同的效果，应该结合站点整体目标和内容来设计。
红色、橙色温暖、兴奋、热情，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜色，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。但是，暖色调容易造成人视觉疲劳，慎用。
黑色神秘、高贵，在商业设计中，黑色是许多科技产品的用色，如电视、跑车、摄影机、音响、仪器的色彩大多采用黑色。
灰色具有柔和、高雅的意象，而且属于中间性格，男女皆能接受，所以灰色也是永远流行的主要颜色。许多高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级、高科技的形象。使用灰色时，大多利用不同层次的变化组合和与其他色彩搭配，才不会过于平淡、沉闷、呆板、僵硬。
紫色具有强烈的女性化性格，在商业设计用色中，紫色受到相当的限制，除了和女性有关的商品或企业形象外，其他类的设计不常采用紫色作为主色。
黄色是阳光的色彩，具有活泼与轻快的特点，给人以十分年轻的感觉。象征光明、希望、高贵、愉快。它的亮度最高，和其他颜色搭配显得很活泼，有温暖感，具有快乐、希望、智慧和轻快的个性，有希望与功名等象征意义。黄色也代表着土地、象征着权力，并且还具有神秘的宗教色彩。浅黄色系明朗、愉快、希望、发展，它的雅致，清爽属性，较适合用于女性及化妆品类网站。中黄色有崇高、尊贵、辉煌、注意、扩张的心理感受。深黄色给人高贵、温和、稳重的心理感受
绿色所传达的是清爽、理想、希望、生长的意象，符合服务业、卫生保健业、教育行业、农业、餐饮酒店的要求。在工厂中，为了避免操作时眼睛疲劳，许多机械也是采用绿色，一般的医疗机构场所，也常采用绿色来做空间色彩规划。
蓝色给人以沉稳的感觉，且具有智慧、准确的意象，在商业设计中强调高科技、效率高的商品或企业形象，大多选用蓝色作为标准色、企业色，如电脑、汽车、影印机、摄影器材等。另外，蓝色也代表忧郁和浪漫，这个意象也常运用在文学作品或感性诉求的商业设计中。
举个实际的例子：IBM的深蓝色，肯得基的红色条型，windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。如果将IBM改用绿色或金黄色，我们会有什么感觉？
色彩搭配既是一项技术性工作，同时也是一项艺术性很强的工作，因此在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。
网页色彩搭配的技巧
到底用什么色彩搭配好看呢？下面是网页色彩搭配的一些常见技巧。
（1）运用相同色系色彩：使网页色彩趋于一致，塑造和谐统一的氛围，缺点是容易造成单调，所以使用局部对比色增加变化，如局部地区加入一张与背景呈对比色彩的图片。
什么是相同色系？
在360度色相环上位置相近，大约在45度左右的色彩，或同一色相不同明度的色彩。
（2）使用邻近色：色带上向邻近的颜色。作用同上。
（3）使用对比色：对比色作为点缀，突出重点，画龙点睛。
（4）背景色的使用：采用素淡清雅的颜色，避免采用花纹复杂的图案和纯度很高的色彩。背景要与文字的颜色对比强烈。
（5）把握色彩的数量：网站用色控制在3种以内，多了，显得花哨、杂乱。通过改变色彩的各种属性，如明度，饱和度，来产生变化。
3、设计网站的标准字体
和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的与众不同和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。
需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的pC里没有
安装的特别字体，那么您的辛苦设计制作便付之东流啦！
突出的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。
4、设计网站的宣传标语
也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：鹊巢的【味道好极了】；麦斯威尔的【好东西和好朋友一起分享】；Intel的【给一颗奔腾的芯】。
想一条朗朗上口宣传标语。把它做在的banner里，或者放在醒目的位置，告诉大家的网站的特色是什么。
以上四方面：标志，色彩，字体，标语，是一个网站树立CI形象的关键，确切的说是网站的表面文章，设计并完成这几步，的网站将脱胎换骨，整体形象有一个提高。
风格的形成不是一次定位的，需要在实践中不断强化，调整，修饰.
2、创意
创意(idea)是网站生存的关键。那么创意到底是什么，如何产生创意呢？
创意是引人入胜，精彩万分，出奇不意的；创意是捕捉出来的点子，是创作出来的奇招等。这些讲法都说出了创意的一些特点，实质上，创意是传达信息的一种特别方式。
E字母大写一下
是一种创意！
创意是将现有的元素重新组合。比如，网络与电话结合，产生Ip电话。从这一点上出发，任何人，包括和我，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。就好比万花筒，筒内的玻璃片越多，所呈现的图案越多。如果有心可以发现，网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在线拍卖。
关于风格和创意，又是一门学问，可以自己找一些广告设计方面的书阅读。
通过以上步骤，最终会形成一个文件【策划方案】，说明网站的用户群、定位网站主题、风格、创意、主要内容、栏目、版块、目录结构和链接结构，以及网站形象策划、制作规范和后期推广宣传等方面的内容。
1.2.3 规划和搜集素材
网站的主题内容是文本、图像和多媒体等，它们构成了网站的灵魂，否则再好的结构设计都不能达到网站设计的初衷，也不能吸引浏览者。在对网站进行结构设计之后，需要对每个网页的内容进行一个大致的构思，如哪些网页需要使用模板，哪些网页需要使用特殊设计的图像，哪些网页需要使用较多的动态效果，如何设计菜单，采用什么样式的链接，网页采用什么颜色和风格等，这些都对资源收集具有指导性作用。
要围绕主题开始搜集资料。资料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集；然后再把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
1、使用图形图像软件设计与制作网页图像：LOGO、导航条、Banner、首页布局等。
2、使用flash等软件制作网站动画，如Banner、广告窗。
1.2.4 网站的创建和网页的设计与制作
在全面考虑好网站的栏目，链接结构和整体风格之后，我们就可以正式动手创建网站、制作网页了。
1、创建站点：先建目录，在目录下建站点
2、设计并制作网页：
先设计后制作。
按照前期的策划方案，制定适当的标准。
设计人员进行设计，根据前期的策划方案，设计具体的页面，包括页面布局、导航、背景颜色、文字颜色、链接颜色、页面间的链接结构。
制作人员进行制作，按照先大后小、先简单后复杂的顺序进行制作，先设计制作大结构，再逐步完善小结构和小细节。先建主页、再建子页、在建立超链接。
开发动态网站模块。页面制作完成后，如果还需要动态功能，则需要开发动态功能模块，网站中常用的功能模块包括搜索功能、留言板、新闻发布、在线购物和论坛及聊天室等。
3、测试站点和改进。
1.2.5 申请域名和服务器空间并上传网页
不论公司还是个人，制作网页的目的一般来说是为了将其发布到网上，这就涉及需要在WWW上建立Web站点，以及将站点发布到某一个WWW的Web服务器上。
申请域名和服务器空间
域名是企业或事业单位在因特网上进行相互联络的网络地址，在网络时代，域名是企业、机构进入因特网必不可少的身份证明。
找到一家合适的域名服务提供商，注册域名并付费，以获取服务器空间。
测试与上传网页
可以采用Dreamweaver自带的站点管理上传文件，也可以采用专门的FTp软件上传。利用这些FTp工具，可以很方便地把网站发布到服务器上。网站上传以后，要在浏览器中打开自己的网站，逐页逐个链接地进行测试，发现问题，及时修改，然后再上传测试。1.2.6 网站的宣传、推广、维护与管理
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，如到搜索引擎上注册、网站交换链接、添加广告链等。
互联网络的最大优势就是信息的实时性，只有快速的反映，准确的报道，才能吸引更多的浏览者。并且严格来说，每一个站点都应该由专业人员定期更新维护。更新维护不仅仅只局限于简单的更换文字稿。以企业网站为例来说，更新维护应该将企业的商业动态和发展方向充分考虑进去，再结合现有的网站规划结构，迅速作出相应的改进。
1.3 网页制作的工具软件和技术
1、网页编辑软件：Dreamweaver、frontpage
2、网页动画制作软件：Flash
3、网页图形、图像编辑软件：photoshop、Fireworks。
4、网页标记语言：HTML
5、网页脚本语言：JavaScript
6、动态网页编程语言ASp
1.4 Dreamweaver软件简介
1.4.1 安装与卸载
1.4.2 界面简介
一、标题栏和菜单栏
★标题栏
标题条显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改但仍未保存，则在文件名后显示一个星号。
观察：对网页进行编辑后，标题栏有何变化？
观察：使用【文件】菜单中的【保存】命令保存文件，标题栏有何变化？
归纳：如果对当前网页进行了编辑但未存盘，则在文件名右侧出现【*】号标记，保存后【*】号消失。
★菜单区
和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,实例：演示使用
【查看】菜单中的标尺和网格命令进行工作环境的设置。
二、工具栏
演示：【工具条】的显示与隐藏。
★【文档】工具栏
若要显示或隐藏工具条，选择【查看】＞【工具栏】＞【文档】。
点击带有向下小箭头的工具，会弹出更多选择。
若要在【网页文档】窗口中只显示代码，点击【代码】按钮
若要显示包括[代码]和[设计]的视图，点击【拆分】按钮。
若要只显示[设计]视图，点击【设计】按钮。
若要为文档输入一个标题，使用【标题】域。如果文档已经有了标题，它将出现在该域中。
若要在浏览器中预览或者调试文档，点击[在浏览器中预览/调试]按钮，在弹出的菜单中选择一种浏览器。若要添加或改变菜单中列出的浏览器，选择[编辑浏览器列表]。
若要刷新的[设计]视图，请点击[刷新设计视图]按钮。
若要访问[参考]面板，点击[参考]按钮。[参考]面板包括关于HTML，CSS和JavaScript 代码的参考信息。
★【标准】工具栏
【查看】>【工具栏】 >【标准】
三、状态栏
提供正在创建的文档的一些其他信息。组成状态栏的各个部分：窗口尺寸栏，下载时间栏等。
标签选择器显示控制选定文本或对象的HTML父标签。点击其中的一个标签就可以在[文档]窗口中高亮其内容。点击
就可以选择该文档的整个主体部分。[窗口大小]弹出式菜单可以将【网页文档】窗口调整到预先定义的大小或自定义的尺寸。
估计的文档大小和该页面的大概下载时间，该大小是包括所有相关文件如图象和其他媒体文件以后的大小。
四、插入浮动面板
包含用于创建和插入对象的各种按钮。这些按钮被组织到选项卡中。
显示或隐藏【插入】栏：选择【窗口】>【插入】。
展开或折叠【插入】栏：单击【插入】栏标题条左角处的展开箭头。
★【插入项目】
选择【窗口】>【插入】，打开【插入面板】，选中了某个项目，则会出现相应的【插入项目】
简单介绍插入面板里各项的作用。
五、文档编辑窗口
网页设计区，所设计的网页或代码将出现在该区。
六、属性面板 (属性区)
属性面板主要用于查看和编辑当前所选页面元素的各种属性。每种对象有不同的属性，属性面板会随着选择对象的不同而变化。在文档窗口选择要编辑的对象元素之后，就可以在属性面板设置其属性了。
显示或隐藏属性面板方法：选择【窗口】>【属性】菜单。
单击属性面板右下角的箭头按钮可以展开或折叠面板。
七、面板组
面板组是组合在文档窗口右侧的相关面板的集合。
①展开或折叠一个面板组
直接单击面板标题。
②在展开的面板组中选择一个面板
单击该面板的选项卡。
③关闭一个面板组
从面板组标题条中的【选项】菜单中选择【关
闭面板组】。
④打开屏幕上不可见的面板组
从【窗口】菜单中选择一个面板的名称。
⑤将一个面板组停靠到其它面板组
打开该面板；右键点该面板名后选择【将资源
组合在】
小提示：在菜单上看到的一些组合字母(如CTRL
＋N)就是该项操作的快捷键，日后熟练了，可以使用，
加快网页设计的速度。
1.4.3 网页的视图
三种试图：代码视图、设计视图、拆分视图。
了解XHTML语言
1.4.4 网页文件的基本操作
一、新建网页
二、打开网页
三、保存网页
四、在浏览器中预览网页
单击工具栏上预览按钮，或F12键，可以在浏览器中预览编辑的网页。
五、设置页面头部内容
设计视图模式下，选择【查看>文件头内容】，文件头内容会显示在设计视图的上部，如下图所示：
设置网页标题
1、什么是网页标题？
?网页标题就是在浏览器中浏览网页时，浏览器窗口顶部显示的文本信息。
?网页标题可以简明地概括网页的内容，点明网页的主题。
?当网页被加入收藏夹时，网页标题又作为网页的名称（标签）出现在收藏夹中。
?网页标题也是搜索引擎robots搜索的主要依据。
?DW在新建网页时，默认的页面标题为“无标题文档”。
2、设置网页标题的具体操作：
法一：设计视图模式下，单击文件头内容窗口中的【标题】按钮，可以在【属性】面板中查看并修改网页标题属性。
法二：在【文档】工具栏的【标题】文本框中直接输入网页的标题。
六、设置网页基本属性
在开始制作具体的页面之前，先对整个网站的页面属性进行设置，这样在具体制作时能够具有同一的风格，保证网页的协调性和整体性。
选择【修改】>【页面属性】菜单命令，或者单击属性面板中的【页面属性】按钮，打开页面属性对话框。
补充：什么是CSS？
CSS是 Cascading Style Sheet 的缩写，译作层叠样式表，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。具体应用将在后续章节详细讲解。
1、设置外观（CSS）
【分类】列表下选择【外观（CSS）】选项卡，可以设置页面字体、字号、背景图像、背景颜色、文本颜色、左边距、上边距等属性。【重复】下拉列表用来设置背景图像的重复方式。
p120李晓斌
2、设置外观（HTML）
外观（HTML）的设置与外观（CSS）大致相同，后期讲解区别。
外观（HTML）选项中设置的属性会出现在页面主体标签
中，不会自动生成CSS样式。3、设置链接
对网页的链接样式进行详细设置。
4、标题（CSS）
设置标题字体相关属性。
5、标题/编码
标题：设置在文档窗口和大多数浏览器窗口的标题栏中出现的页面标题。
总结：标题的设置方法：①页面属性对话框>标题编码分类②文件头内容窗口中的【标题】按钮，可以在【属性】面板中查看并修改网页标题属性③【文档】工具栏，【标题】后面文本框直接输入。
文档类型：可以在下拉列表选择文档类型。DWcs6默认新建的文档为XHTML1.0Transitional。
作业：查资料，分析HTML5.0和XHTML1.0有什么区别。
编码：网页的文字编码方式，DWcs6默认文档编码方式为Unicode(UTF-8)，也可以选择简体中文（GB2312）
6、跟踪图像
设计页面的草图，作为背景铺在网页下面，用来引导网页的设计。
跟踪图像：可以指定一幅图像作为页面创作时的草稿图，它显示在页面的背景上，（一般是前期使用pS设计制作的网页布局效果图）便于在网页创作时进行网页元素的定位与安放。在实际生成的网页中并不显示它。跟踪图像同背景图像唯一的相同之处在于都是一幅存在于页面背景中的图像。但是跟踪图像不会被Dreamweaver 平铺（对一个背景图像来说，如果图像尺寸小于页面的尺寸就会被平铺。）；可以指定跟踪图像的透明度；跟踪图像只在Dreamweaver 中可见，在浏览器中它会被忽略。
1.5 站点的创建与管理
问题：网页与网站的关系？先规划土地还是先建房？先建房还是先买家具？先建网页还是先建网站？
讲述：先建网站，后建网页。
1.5.1 定义站点的必要性和注意事项
1、本地站点与远程站点
Dreamweaver中，站点（Site）一词既可以指Internet上的一个网站，也可以指在本地硬盘上的一个网站（更多的时候）。本地硬盘的网站实际上是一个文件夹，它作为我们站点的根目录，里面包含了站点的所有页面、图像、声音、动画等。我们开发站点是在本地硬盘进行的，当站点开发完毕后，再将本地站点的内容上传到Web服务器上，供别人访
问浏览。
总结：放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。
2、本地站点的作用
在建立网站、制作网页之前，首先需要创建一个本地站点。这是为了更好地利用站点窗口对站点文件进行管理。在做网页文件时，打开软件后，先把我们要做的网页文件保存到事先建好的站点里，这样是为了避免插入图片时出现错误。可以尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手）。只有站点内才可以利用我们将在以后章节中讲述的模板、资源管理和库等高级功能编辑更新网站。
3、创建站点的注意事项
（1）合理规划文件和文件夹
新手做网页，就只知道做网页，不懂得条理性、结构性，一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。提倡的做法是：建立一个文件夹用于存放网站的所有文件，再在文件内建立几个子文件夹，将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内。当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。
（2）文件命名注意事项
文件的命名也是非常重要的，新手通常不注意这些，随便乱起些名字，这样过些时候自己也搞不懂是什么了（特别是文件比较多的时候）。我们要做到一看文件的名字就知道是什么内容的文件。提倡的做法是：
①站点里的所有文件的名称都不能为汉语名，必须为英文名或者是数字命名的。
②在文件以及文件夹的命名中不能使用特殊符号（&、+、中文双字节标点符号等），会导致网站不能正常工作。
③文件夹采用小写英文字母、数字、下划线，字符长度不超过20个。
1.5.2 创建本地站点
Dreamweaver的站点可以是本地计算机中任意位置的一个文件夹。
案例一：使用新建站点定义向导创建本地站点
具体操作如下：
1、建立根文件夹：打开资源管理器，在本地硬盘上创建一个新文件夹并命名，作为本地网站的根文件夹。如：55某某某web。
2、启动Dreamweaver，执行【站点-新建站点】菜单命令，弹出【站点设置】对话框。
3、设置站点名称、本地站点文件夹目录。
补充：若没有提前在本地磁盘上建立文件夹，怎么办？可以在创建站点时建立根文件夹：（【站点设置】对话框中选择本地站点文件夹目录时可以新建文件夹）。
站点名称（N）处：填上要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关；最好与网站主题相关，便于日后维护管理。
可以使用中文。不能使用的字符：\、/、:、*、?、<、>、|
本地根文件夹（F）处：选择设置网站在本地硬盘的位置，点击后面的【文件夹图标】可以选择硬盘的任意目录作为存放网站文件的目录（最好不要与系统文件处在一个分区）；
如果已建好文件夹，可直接输入路径或选择文件夹；如果没有文件夹可在此创建新文件夹。只能使用英文小写字母作文件夹名。不能使用中文。
4、单击【保存】按钮。
5、查看【文件】面板，看到创建的站点文件。
案例二：使用管理站点定义向导创建本地站点
1、在本地硬盘上创建根文件夹
2、执行【站点-管理站点】命令，弹出【管理站点】对话框，单击【新建站点】按钮，弹出【站点设置对象】对话框。
3、设置站点名称、本地站点文件夹目录
4、单击【保存】按钮。
5、查看【文件】面板，看到创建的站点文件。
案例三：使用【高级】面板创建本地站点
1、在本地硬盘上创建根文件夹
2、执行【站点-管理站点】命令，弹出【管理站点】对话框，单击【新建站点】按钮，弹出【站点设置对象】对话框。
单击【站点】选项卡以使用【站点定义向导】，
单击【高级设置】选项卡以使用【高级设置】。
快速设置【本地信息】、【遮盖】、【设计备注】、【文件视图列】、【Contribute】、【模板】和【Spry】中的参数来创建本地站点。
3、其余步骤同方法二。
一旦创建好一个本地站点，便可以创建文档并将其放入站点中。
1、管理站点
在Dreamweaver中，可以对本地站点进行管理，如打开、编辑、删除和复制站点等。
2、打开站点
当运行Dreamweaver后，系统会自动打开上次退出
Dreamweaver时正在编辑的站点。如果想打开另外一个站点，单击
文档窗口右边的【文件】面板中左边的下拉列表，在弹出的列表
中将会显示已定义的所有站点。如右图所示。
3、编辑站点
1、执行【站点-管理站点】菜单命令，打开【管理站点】对
话框；或者【文件】面板中左边的下拉列表，在弹出的列表中选
择【管理站点】。
2、在【管理站点】对话框中，单击【编辑】按钮，弹出【站
点设置对象】对话框。
3、在高级设置选项卡中可以编辑站点的相关信息。
4、删除站点
如果不再需要站点，可以将其从站点列表中删除。
1、执行【站点-管理站点】菜单命令，打开【管理站点】对话框。
2、在【管理站点】对话框中，单击【删除】按钮。
注意：当您从列表中移除一个站点时，所有的关于该站点的设置信息将永久性丢失。
话题：为什么删除了站点，我的硬盘上还有该站点的文件夹？
该操作实际上只是删除了DW与该站点的关系，实际上本地站点内容，包括文件、文件夹和文档等，都仍然保存在磁盘相应位置，可以重新创建指向其位置的新站点，重新对其进行管理。
5、复制站点
有时候希望创建多个结构相同或类似的站点，可以利用站点的复制功能
1、执行【站点-管理站点】菜单命令，打开【管理站点】对话框。
2、在【管理站点】对话框中，单击【复制】按钮。
6、切换站点
DW中可以同时存在多个站点，【文件】面板左边下拉列表中可以选择已经创建的站点，
进行站点间的切换。
1.5.3 站点中的文件和文件夹操作
1、创建文件夹和文件
新建文件夹：【文件】面板的站点文件列表框中，在想新建文件夹的父级文件夹上右击，选择【新建文件夹】
新建文件：【文件】面板的站点文件列表框中，在想保存新建文件（html）的文件夹上右击，选择【新建文件】
2、重命名文件夹和文件
【文件】面板的站点文件列表框中，单击目标文件夹或文件，右击，选择【编辑】>【重命名】。
3、移动和复制文件
【文件】面板的站点文件列表框中，单击目标文件夹或文件，右击，选择【编辑】>【剪切、复制、粘贴】。
4、删除文件夹或文件
【文件】面板的站点文件列表框中，单击目标文件夹或文件，右击，选择【编辑】>【删除】。
1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。 参考答案： （1）HTTP：超文本传输协议，用于WEB服务器和WEB客户机之间； （2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间； （3）TELNET：远程登录协议，用于客户机与终端之间。 2．现给出一个网址如下：https://www.doczj.com/doc/2516953375.html,/planetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。 参考答案： //前的http表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上； https://www.doczj.com/doc/2516953375.html,表明了WWW服务器的位置； planetwide/select/selector.html表明最终要访问的文件所在的位置。 3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可） 参考答案： （1）file：如file:\\D:\作业\作业\主页.htm（前面的file:\\一般可省略）就是打开本地D盘下的一个网页；（2）ftp：如ftp:\\https://www.doczj.com/doc/2516953375.html,（此处也可输入IP地址）； （3）http：如https://www.doczj.com/doc/2516953375.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.doczj.com/doc/2516953375.html,，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。 参考答案： （1）在浏览器中登录：启动INTERNET EXPLORER，在URL地址栏中输入“telnet://https://www.doczj.com/doc/2516953375.html,”；（2）“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.doczj.com/doc/2516953375.html,”命令并回车； （3）“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.doczj.com/doc/2516953375.html,”命令并回车； （4）“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5．如果远程登录失败，请问原因可能是什么？ 参考答案： （1）计算机地址拼写错误（主机名或IP地址错误）； （2）远程计算机暂时不能使用； （3）你所指定的计算机不在Internet上。 6．实践：启动INTERNET EXPLORER浏览器，修改其INTERNET选项，并观察其效果。 您的答案： 答：将https://www.doczj.com/doc/2516953375.html, 设置为INTERNET选项的首页后，只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1．个人网站有哪三种基本风格？ 参考答案： （1）主题图形式； （2）信息发布式； （3）介于两者之间的风格。
存档资料成绩： 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 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）设计五课程设计心得。
《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 2、利用记事本来编辑HTML文档并浏览； 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上（如网页制作大宝库https://www.doczj.com/doc/2516953375.html,等）下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设 为主页。 4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”， 内容为司空曙的《江村即事》，如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）
实验二 Dreamweaver基本操作（一） 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 2、熟悉网页文件的基本操作； 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几 个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网 页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html，效果如图所示。 ●标题文字大小用
标记； ●作者信息文字大小为24像素，字体为幼圆，颜色为红色； ●古诗文字大小为24像素，字体为隶书，颜色为蓝色； ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20 个像素，颜色为棕色；《网页设计与制作》期末考试试题 一、单项选择题(本大题共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、