第一章 网页设计基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页中的信息主要是以文本为主的，在网页中可以通过字体、大小、 网页中的信息主要是以文本为主的，在网页中可以通过字体、大小、 颜色、底纹、边框等来设置文本的属性。 颜色、底纹、边框等来设置文本的属性。 建议： 建议： 正文文字不宜太大，一般9磅或12像素左右即可； 正文文字不宜太大，一般9磅或12像素左右即可； 12像素左右即可 字体也不宜过多，中文文字一般使用宋体； 字体也不宜过多，中文文字一般使用宋体； 颜色也不要使用得太过斑驳。 颜色也不要使用得太过斑驳。 大段文本文字的页面，请参考一些优秀的杂志或报纸的编排设计。 大段文本文字的页面，请参考一些优秀的杂志或报纸的编排设计。
第 一 节 网 页 设 计 的 基 础 知 识
静态网页:纯粹HTML格式的网页,即以.htm HTML格式的网页 静态网页:纯粹HTML格式的网页,即以.htm
.html等为后缀的文档 .html等为后缀的文档
动态网页:在服务器端运行的程序、网页和组件等属于动态网页， 动态网页:在服务器端运行的程序、网页和组件等属于动态网页，一
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
下图为文本编排的示例： 下图为文本编排的示例：
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
2）图像 <img src="myweb/10.JPG" width="500" height="150"> ）
图像很重要。其格式一般为JPG和GIF两种格式，一般被运用在Logo， 图像很重要。其格式一般为JPG和GIF两种格式，一般被运用在Logo， JPG 两种格式 Logo Banner和网页背景中。 Banner和网页背景中。 和网页背景中 Logo： Logo是代表企业形象或栏目内容的标志性图片，一般位于网页 Logo： Logo是代表企业形象或栏目内容的标志性图片， 是代表企业形象或栏目内容的标志性图片 的左上角。 Logo的设计 要求形象鲜明、笔触简练，给人第一印象要深刻。 的设计， 的左上角。 Logo的设计，要求形象鲜明、笔触简练，给人第一印象要深刻。 Banner： Banner是用于宣传站内某个栏目或活动的广告 是用于宣传站内某个栏目或活动的广告， Banner： Banner是用于宣传站内某个栏目或活动的广告，一般要求制 作成动画形式，常用的是Flash动画。 作成动画形式，常用的是Flash动画。 Flash动画 为了便于相互交换及相互宣传，Banner的尺寸有一定的要求。 为了便于相互交换及相互宣传，Banner的尺寸有一定的要求。如，位 的尺寸有一定的要求 于网页顶部的Banner要求尺寸为468像素×60像素。文件大小一般不要超过 于网页顶部的Banner要求尺寸为468像素×60像素。 Banner要求尺寸为468像素 像素 12KB。 12KB。 KB Banner一般不是位于网页顶部，就是位于网页底部， Banner一般不是位于网页顶部，就是位于网页底部，小型广告则被适 一般不是位于网页顶部 当地放在网页的两侧。 当地放在网页的两侧。
http://www.milliondollarhomepage.com/ （创意） 创意） Google.com （专注） 专注）
网站收录： 网站收录：http://sj63.com/
第一章 网页设计基础
第一节 网页设计的基础知识 网页: 网页:
是全球广域网上的基本文档， HTML(超文本标记语言 书写。 超文本标记语言) 是全球广域网上的基本文档，用HTML(超文本标记语言)书写。
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
2、网页的基本构成元素
网页是由一些基本元素组成的，包括如文本、 图像、超链接、表格、 网页是由一些基本元素组成的，包括如文本、 图像、超链接、表格、 表单、导航栏、 动画、 动画、 表单、导航栏、GIF动画、Flash动画、框架等，还包括横幅广告、字幕、 动画 动画 框架等，还包括横幅广告、字幕、 悬停按钮、日戳、计数器、音频、视频。 悬停按钮、日戳、计数器、音频、视频。 1）文本 ） <font color="#666666" size="2">你好 你好</font> 你好
网页中还包含声音、图形图像、动画视频等多媒体信息。 网页中还包含声音、图形图像、动画视频等多媒体信息。
网站:是诸多网页的集合。如图所示。 网站:是诸多网页的集合。如图所示。 网址: URL,通过它可以访问Internet上任何一台主机或者主机上的 通过它可以访问Internet 网址:即URL,通过它可以访问Internet上任何一台主机或者主机上的
般以.ASP 般以.ASP .jsp等为后缀 .jsp等为后缀
第一章 网页设计基础
1、网页的基本特征
HTML文件 一个HTML网页包含了许多HTML标记符， 文件， HTML网页包含了许多HTML标记符 网页被称为 HTML文件，一个HTML网页包含了许多HTML标记符，这些 标记符是一些嵌入式命令，提供网页的结构、外观和内容等信息。 Web浏 标记符是一些嵌入式命令，提供网页的结构、外观和内容等信息。 Web浏 览器利用这些信息来决定如何显示网页。 览器利用这些信息来决定如何显示网页。下面这段代码就是网页的源代码 基本构成结构。 基本构成结构。 <HTML> <head> <title>标题< <title>标题<／title> 标题 <／head> <body> 正文 <／body> <／HTML> 具体内容， 具体内容，将在后续课程中另作详细介绍
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
4）表格 ）
表格是网页排版的得力助手。 表格是网页排版的得力助手。借助表格可精确地控制网页元素在网页 中的位置，组织整个网页的外观。 中的位置，组织整个网页的外观。通过在表格中放置相应的图片或其他内 容，即可高效、快捷地创建符合设计效果的页面。表格使网页元素得以方 即可高效、快捷地创建符合设计效果的页面。 便的固定在希望固定的位置上。 便的固定在希望固定的位置上。
层次感强； 影效果 ，层次感强；多用手绘
http://www.seroum.com/ 清新淡雅，有着日本文化特有“灰蒙蒙”的感觉， 日本网站特点：清新淡雅，有着日本文化特有“灰蒙蒙”的感觉，偶尔使用
像素和卡通风格
中国网站特点： 中国网站特点：没有特点；
长、闪、挤、花 你见过最酷的网站有哪些？ 你见过最酷的网站有哪些？
第 一 节 网 页 设 计 的 基 础 知 识
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td height="18"> </td> <td> </td> <td> </td> </tr> </table>
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
你好</a> ３）超链接 <a href="myweb/index.htm">你好 你好
是网站的灵魂，它提供与图片和文字相关内容的链接， 超链接是网站的灵魂，它提供与图片和文字相关内容的链接，实现网 页之间的跳转。超链接可在文本或图片中设置。 页之间的跳转。超链接可在文本或图片中设置。如下图 所示的是网页当中 栏目的超链接，点击栏目按钮，即弹出新窗口，实现页面的跳转。 栏目的超链接，点击栏目按钮， 即弹出新窗口，实现页面的跳转。
文件和文件夹,它包含被访问资源的类型,服务器的地址,文件的位置等 文件和文件夹,它包含被访问资源的类型,服务器的地址, URL的格式如下: URL的格式如下: 的格式如下 访问协议://主机域名或者IP地址[:端口号]/路径/ 访问协议://主机域名或者IP地址[:端口号]/路径/文件名 ://主机域名或者IP地址[:端口号]/路径
网页设计与制作
●网站欣赏
欧美网站风格特点： 欧美网站风格特点：简洁，平淡，严谨 ，体贴，专注 http://www.thetoshibatablet.com/ http://www.chinabird.com/ 韩国网站特点：色彩运用大胆，善用渐变；大量运用flash和图片 ；善用阴 色彩运用大胆，善用渐变； 大量运用 和图片
第一章 网页设计基础
5）表单 ）
表单是用来收集站点访问者信息的域集。 表单是用来收集站点访问者信息的域集。 站点访问者填表单的方式是输入文本、单击单选按钮与复选框， 站点访问者填表单的方式是输入文本、单击单选按钮与复选框，以及 从下拉菜单中选择选项。 从下拉菜单中选择选项。 在填好表单之后，站点访问者便送出所输入的数据。 在填好表单之后，站点访问者便送出所输入的数据。该数据就会根据 网站设计者所设置的表单处理程序，以各种不同的方式进行处理。 网站设计者所设置的表单处理程序，以各种不同的方式进行处理。 如下图所示的是表单页面。 如下图所示的是表单页面。
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
表单页面： 表单页面：
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
6）导航栏 ）
导航栏就是一组超链接，用来指向站点的主页和主要网页的超级链接， 导航栏就是一组超链接， 用来指向站点的主页和主要网页的超级链接， 方便浏览。 方便浏览。 导航栏可能是按钮或者文本超链接， 导航栏可能是按钮或者文本超链接，用于站内各部分内容间的相互链 接的指引。可以直接使用文本文字。而用图片做成的导航栏， 接的指引。可以直接使用文本文字。而用图片做成的导航栏，表现力以及 和整个画面的配合要更好一些。 和整个画面的配合要更好一些。 在导航栏中可能会用到翻滚图(Rollover Image)，就是当鼠标悬停在该 在导航栏中可能会用到翻滚图 ， 图片上时，在区域内的图片自动切换成其他颜色的图片， 图片上时，在区域内的图片自动切换成其他颜色的图片，以区分该栏与其 他栏。也可使用下拉菜单效果。 他栏。也可使用下拉菜单效果。 如图为导航栏示意。 如图为导航栏示意。
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
百度文库
带有下拉菜单的导航栏示意： 带有下拉菜单的导航栏示意：
导航栏
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
7）GIF动画 ） 动画
动画是网页上最活跃的元素，通常认为制作优秀、 动画是网页上最活跃的元素，通常认为制作优秀、创意出众的动画是 吸引浏览者最有效的方法。动画的制作手段有很多，技术发展也很快。 吸引浏览者最有效的方法。动画的制作手段有很多，技术发展也很快。尽 管各种形式的动画使用形式不一， 管各种形式的动画使用形式不一，GIF动画仍然是占据主体地位的网页动 动画仍然是占据主体地位的网页动 画之一。因为 动画的标准简单， 画之一。因为GIF动画的标准简单，在各种类、各版本的浏览器中都能播 动画的标准简单 在各种类、 放。如图所示。 如图所示。
第 一 节 网 页 设 计 的 基 础 知
GIF动画示 动画示
识
第一章 网页设计基础
8）Flash动画 ） 动画
Macromedia的Flash虽然出现时间不长，业已成为最首要的 的 虽然出现时间不长， 虽然出现时间不长 业已成为最首要的Web动画形式 动画形式 之一。 有很多重要的动画特征， 之一。Flash有很多重要的动画特征，如关键帧、运动路径、动画蒙版、形状 有很多重要的动画特征 如关键帧、运动路径、动画蒙版、 变形和洋葱皮等等。用Flash设计者不仅可以创作 变形和洋葱皮等等。 设计者不仅可以创作Flash电影，而且可以把动画 电影， 设计者不仅可以创作 电影 输出为QuickTime文件、GIF89a文件或其他不同的文件格式 文件、 文件或其他不同的文件格式(PICT，JPEG， 输出为 文件 文件或其他不同的文件格式 ， ， PNG等)。如图所示的是一个完全由 等 。如图所示的是一个完全由Flash动画构成的网页页面。 动画构成的网页页面。 动画构成的网页页面
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
图像应用范例1－ 图像应用范例 －Banner和Logo： 和 ：
第 一 节 网 页 设 计 的 基 础 知 识
第一章 网页设计基础
注意： 图像在网页中不可或缺，但不能太多、太大。因为图像的下载速度较慢， 注意： 图像在网页中不可或缺，但不能太多、太大。因为图像的下载速度较慢， 如果网页上插入了过多的图像，或单幅图像过大，网页会很长时间打不开。 如果网页上插入了过多的图像，或单幅图像过大，网页会很长时间打不开。而且 网页上如果放置了过多的图片，会显得很乱，有喧宾夺主之嫌。 网页上如果放置了过多的图片，会显得很乱，有喧宾夺主之嫌。下图为网页中一 张分辨率很高的大图。 张分辨率很高的大图。