第1章 网页设计与网站建设

nullnull第1章 网页设计基础1.1 如何欣赏网页 1.2 如何制作网页 1.3 网页制作工具 1.4 网络 通过本章的学习，将了解到关于网页的基础知识，掌握设计网页的基本过程以及网络的基础知识，为后续的章节的学习做好铺垫工作。 null1.1 如何欣赏网页分析网页的主题 分析网页的颜色搭配、视觉效果 分析网页的布局结构 分析网页的构成元素及内容填充null1.1 如何欣赏网页nullnullnullnullnullnullnullnullnull地板上的记事本里的文字内容是网站的内容 null这个网站用了一个大黑底图，然后在上面手绘了几朵云，在网页中间是由导航组成的一个圈。 null两边的是导航条 1.2 如何制作网页 1.2 如何制作网页制作网页的一般步骤 确定主题 网页配色 结构布局 填充内容 1.2 如何制作网页 1.2 如何制作网页网站的主题就是网站所要表达的主要内容，作为一个网页设计者，在动手制作网站之前，首先要考虑的就是自己的网站究竟是要做些什么，通过这个网站要表达一些什么内容，必须给自己划定一个范围。 主题没有好坏之分，但在选择时，要注意以下几点： 1.2 如何制作网页 1.2 如何制作网页1.主题要鲜明 对于任何网站，要给浏览者留下深刻的印象，必须要有一个鲜明的主题，突出自己的个性和特色，在内容的深和精上下功夫。对于大杂烩式的网站，恐怕很少给人留下什么印象，因为许多大的网站已经做得很好了。所以个人网站要有特色，选中一个主题，做深做透。例如小熊在线，它就专做硬件，以给用户提供客观、及时、全面的硬件信息而闻名。 1.2 如何制作网页 1.2 如何制作网页2.主题要小而精 所谓小，就是说可以作为网站题材的范围非常广，但是由于个人能力所限，不可能做非常大的题材，我们要选择一些自己感兴趣的、题材范围较小的内容，这样才能在自己的能力所允许的范围内尽量把它做好。所谓精，就是网站的内容要精，在你选定的主题范围内要尽可能地搜集相关，把最新、最快、最好的内容奉献给用户。 1.2 如何制作网页 1.2 如何制作网页3.自己感兴趣 兴趣是最好的动力，网站做好之后，并不是一成不变了，它还要不断地维护更新内容。如果选择不感兴趣的内容，就不会下很大功夫去搜集有关材料。占有的材料少，你的网站内容就会很贫乏，自然对读者也就没有吸引力，同时在以后的维护更新过程中，你也不会有更多心思来进行内容的搜集，这样的网站是留不住用户的。 根据主题确定网页主色调 根据主题确定网页主色调 在确定主题后，要了解哪些颜色适合哪类站点。比如一个影视的站点，用黑色或其他较深的色彩为主比较好，因为人们看电视、电影一般在黑暗的环境下观看的，网页上使用深色较符合人们的视觉习惯；反之一个介绍医院、医学的站点就要使用浅色为主色，衬托其医学站点的氛围。 人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 一般来说，一个网页的色彩不超过3种，太多则让人眼花缭乱。 网页安全色 网页安全色 网页安全色是指在不同的硬件环境、不同操作系统、不同浏览器中都能正常显示的颜色集合，这些颜色在任何终端浏览显示设备上都是相同的，所以使用这216个网页安全色可以避免原有的颜色失真问题 页网页布局类型 页网页布局类型 国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是的一些基本信息、联系方式、版权声明等。 拐角型：这种结构与上一种其实只是形式上的区别，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。 网页内容 网页内容页面标题：每一个网页都有一个标题，用来提示页面的主要内容，着一信息将出现在浏览器的标题栏中，而不是在页面的布局中。 网站（LOGO）：设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置或是二级页面的页眉位置。 导航：导航是网页设计中的重要部分。一般来说，一个网站的导航位置在每个页面中出现的位置是固定的，一般有四种标准的显示位置：左侧、右侧、顶部和底部。 主体内容：主体内容是页面设计的主体元素，一般是文字和图象相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列 页脚：页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。 1.3 网页制作工具 1.3 网页制作工具制作网页的专门工具：Dreamweaver、FrontPage。 图像处理工具：Photoshop、Fireworks。 动画制作工具：Flash、Swish。 1.4 网络基础知识 1.4 网络基础知识WWW是环球信息网（World Wide Web ）的缩写，中文名字为“万维网” 。 WWW是一个由网页构成的资源空间，并且每个网页由一个 “统一资源定位器”（URL）标识。这些资源通过超文本传输(Hypertext Transfer Protocol，HTTP)传送给使用者，使用者再通过浏览器(Browser)来浏览网页中的内容。IP地址IP地址IP地址就是给每个连接在Internet上的主机分配的一个32bit地址。按照TCP/IP协议规定，IP地址用二进制来表示，每个IP地址长32bit，例如一个采用二进制形式的IP地址是“00001010000000000000000000000001”，这么长的地址，使用起来很麻烦。为了方便人们的使用，IP地址经常被换算成十进制的形式，中间使用符号“.”分开不同的字节。于是，上面的IP地址可以表示为“10.0.0.1”。 域名域名http://202.108.22.5/，百度服务器的IP。 域名是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有重复的域名。域名的形式是以若干个英文字母和数字组成，由"."分隔成几部分，如BAIDU.COM就是一个域名。 如何把域名与网站主机的IP对应起来呢？这是由域名解析来完成的。 统一资源定位器（RUL） 统一资源定位器（RUL） http://wenwen.soso.com/z/q103071499.htm 统一资源定位器一般由三部分组成,即协议、主机名与文件名 。 Server与Browser Server与Browser Server即服务器，Browser即浏览器。用户必须通过浏览器连接到Web服务器上，才能阅读Web服务器上的网页文件。 网页网页 万维网中的文档又称为网页，网页中可以包含文本、图像、动画、音频、视频等信息。网页按其表现形式可以分为静态网页和动态网页。 网站网站网站是网页的集合。通过超级链接将网站中多个网页联系起灵，形成一个主题鲜明、风格一致的站点。通常，网站都有一个主页，包括网站的Logo和导航栏等内容。超级链接超级链接浏览网页时，我们通过点击网页内的某段文字或图片，在另一个页面看到相关的详细内容，这就是超级链接。超级链接让网页之间形成一种互相关联的关系。网站正是因为有大量的超级链接，才形成一个内容详实丰富的立体结构。 null★ 本章小结 ★ 本章主要欣赏了几类典型网站的首页，通过对这些网站的主题、颜色搭配、布局结构进行分析，对网页设计的方法和流程有一个初步的了解。null★ 习题 ★进一步了解“网页安全色”的相关内容 如果让你做一个网站，你会选择什么主题？