网页设计与制作知识点代码-网页设计基础知识（HTML基础）（共7页）.docx

《网页设计基础知识（HTML基础）（共7页）.docx》为会员分享，可在线阅读。 更多相关《网页设计基础知识（HTML基础）（共7页）.docx（7页珍藏版）》请在新闻库网站搜索。

1.精选优质文档——献给您 第一章网页设计基础知识 1.1 网站 网站（Web Site）是存储在网络服务器上的完整信息的集合。 它包含一个或多个网页网页设计与制作知识点代码，以一定的方式链接在一起，形成一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。 有些网站的内容很多，比如新浪、搜狐等门户网站； 有些网站只有几个页面网页设计与制作知识点代码，例如个人网站。 1.2 网页 网页（Web Page）实际上是一个文件。 网页可以包含文本、图像、声音和视频信息等。网页可以被视为单个实体，即网站的一个元素。 我们平时听到的“新浪”、“搜狐”、“网易”等都是我们俗称的“网站”。 当我们访问这些网站时，最直接的访问就是“网页”。这些网络很多

2、页面组成了整个站点，即网站。 1.3 主页 主页是一个独立的网页，与一般网页一样，可以存储各种信息。 同时，它又是一个特殊的网页，作为整个网站的起点和总结点。 例如，当访问者输入搜狐网站地址“”时，出现的第一个页面是搜狐网站的首页。 问：主页和首页有区别吗？ 通常，为了方便访问者查找和分类网站上的信息，网站会将信息进行分类，并创建一个网页来放置网站信息的目录，即网站的首页。 并非所有网站都将主页设置为首页。 有些网站喜欢在主页上放置一个入口动画，并在主页上放置主页链接。 浏览者需要点击主页上的链接才能进入主页。 1.4 网页的表现形式 1、静态网页：客户端和服务器之间没有交互。 游客只能是被动的。

3. 浏览网站建设者提供的网页内容。 其特点：除非网页设计者修改网页内容，否则网页内容不会改变。 无法与浏览网页的用户进行交互。 信息的流动是单向的。 2.动态网页：客户端和服务器必须交互。 动态网页是指浏览器与服务器数据库实时交换数据的交互式网页，而不是添加了动画等效果的动态网页。 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息是双向流动的。 2.1 网站LOGO1． 通常，网站为了体现其特色和内涵，都会涉及并制作LOGO图像，并将其放置在网站的左上角或其他醒目的位置。 2、企业网站经常使用公司的标志或注册商标。 3、精心设计的LOGO能给观众留下深刻的印象

4、印象对于网站和企业形象的推广有着非常重要的作用。 2.2 导航栏 导航栏是网页的重要元素。 设计的目的是将网站上的信息进行分类吉祥物，然后将其放置在网页上，以帮助访问者快速找到网站上的信息。 导航栏有多种形式，包括文本导航栏、图像导航栏、动画导航栏等。一些使用特殊技术（如Flash、JavaScript、CSS）制作的导航栏还可以具有下拉菜单的功能。 2.3 BannerBanner中文意思是横幅。 横幅的内容通常是网页上的广告。 在网页布局中，大多数网页都会将Banner放置在导航栏旁边或其他醒目的位置，以吸引浏览者浏览。 2.4 内容部分 网页的内容部分是整个页面的组成部分。设计者可以利用该页面的栏来

5、根据项目要求设计不同断面。 每个部分可以有一个标题内容，每个内容部分主要显示不同的文字信息。 2.5 页脚或版权部分 页脚，是页面的最低部分。 页面的这一部分通常包含网页的版权信息，以及网页所有者和设计者的联系信息。 有些网站还将网站的友情链接和一些附属的导航栏放置在这里。 3.1 文本 网页中的信息主要是文本。 与图片相比，文字虽然不能像图片一样迅速吸引观看者的注意力，但它可以准确地表达信息的内容和含义。 3.2 图片 用户在网页上使用的图片格式主要有GIF、JPEG 和PNG，其中使用最广泛的两种格式是GIF 和JPEG。 3.3 超链接 超链接本质上是网页的一部分，是允许用户与其他网页或站点进行交流的链接。

6. 连接元件。 超链接是指从网页到目标的连接关系。 目标可以是另一个网页、同一网页上的不同位置、图片、电子邮件地址、文件甚至应用程序。 程序。 3.4 网页中的动画 为了更有效地吸引浏览者的注意力，许多网站广告都采用动画形式。 网页中的动画主要有两种类型：GIF动画和Flash动画。 其中GIF动画只能有256种颜色，主要用于简单的动画和图标。 3.5 声音和视频 声音是多媒体网页的重要组成部分。 网上使用的声音文件格式有很多种卡通人物，常用的有 MIDI、WAV、MP3 和 AIF。很多浏览器无需插件即可支持 MIDI、WAV 和 AIF 格式文件，而 MP3 和 RM 格式声音文件则需要插件

7.需要专用浏览器才能播放。 3.6 网页中的表格用于控制网页中信息的布局。 它包括两个方面：一是利用行和列来布局文本、图像等表格数据； 另一种是利用表格来精确控制网页中各种网页元素的位置。 3.7 网页中的表单通常用于在浏览器端接受用户输入，然后将此信息发送到网页设计者设定的目标。 目标可以是文本文件、网页、电子邮件或服务器端应用程序。 表单一般用于收集联系信息、接受用户请求、获取反馈、设置访客签名簿、允许浏览者注册为会员并以会员身份登录网站等。 3.8 其他常见元素包括悬停按钮、Java 特效、ActiveX等特效。它们不仅可以点缀网页，使网页更加生动活泼

8.它很有趣，在网上娱乐、电子商务等方面发挥着重要作用。 4.1 文本编辑器 不仅可以在记事本中编写 HTML 代码，任何文本编辑器都可以编写 HTML。 例如写字板、Word等，但保存时必须保存为.html或.htm格式。 有一些文本编辑器提供了网页制作、编程等许多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript、VBScript等语法的着色显示。 例如：Sublime text3、EmEditor、EditPlus、UltraEdit4.2 Dreamweaver网页设计软件 这是使用最广泛的网页编辑工具之一。 Dreamweaver 是

9. Macromedia推出的网页编辑工具。 它是一个所见即所得的网页编辑器，支持最新的DHTML（Dynamic HTML，动态HTML）和CSS标准。 它采用多种先进技术，快速高效地创建极具表现力和动态的网页，使网页创建过程变得非常简单。 另外，微软公司开发的FrontPage也是设计网页和管理网站的软件。 除了所见即所得的编辑功能外，还可以直接编辑HTML标签，让设计者可以轻松编辑网页。 4.3 Photoshop图像处理软件 Photoshop是Adobe公司推出的一款功能强大的平面图像处理软件。 Photoshop应用于图像编辑、桌面排版、网页图像编辑、广告设计、婚纱摄影等各个领域。

10、行业应用广泛，已成为很多涉及图像处理的行业事实上的标准。 4.4 Flash动画设计软件 Flash是Macromedia公司开发的一款优秀的网页动画开发软件。 它允许用户创建从简单的动画到复杂的交互式网络应用程序的任何作品。 您可以通过添加图片、声音和视频来丰富您的 Flash 应用程序媒体。 Flash被称为“最灵活的前端”。 其独特的编译方法、跨平台能力以及广泛的应用范围（软件、游戏、Web应用、多媒体娱乐等）使其变得越来越重要。 的工具。 4.5 Fireworks网页图像处理软件 Fireworks是Macromedia公司发布的一款专门针对网络图形设计的图形编辑软件。 没有必要使用Fireworks。

11.只能轻松制作小尺寸图形和GIF动画。 如果把Photoshop比作全能图像处理大师，那么Fireworks就是网页图像处理专家。 它在矢量图形的处理上有自己独特的特点。 在Web应用方面，Fireworks是第一个提供切片功能的图像处理软件。 Fireworks支持在图像中绘制热点并直接生成网页文档，并具有创建简单的GIF动画的能力。 它还支持将动画转换为Flash文件并嵌入网络中进行播放。 5.1 CSSCSS 是层叠样式表。 在制作主页时使用CSS技术可以有效地实现对页面的布局、字体、颜色、背景等效果的更精确的控制。 HTML = 内容 CSS = 演示

12、CSS的好处：CSS使页面加载速度更快； CSS可以降低网站流量成本； CSS使设计者在修改设计时更加高效、成本更低； CSS 使整个站点保持视觉一致性；5.2 JavaScript JavaScript 是Netscape 开发的一种脚本语言，可以嵌入HTML 文件中。 它是一种具有安全功能的对象和事件驱动的脚本语言。 在HTML的基础上，可以使用JavaScript开发交互式网页，它可以响应用户需求事件，而不需要通过网络来回传输数据。 简单来说，当用户输入一条信息时，不需要先将信息发送到服务器进行处理，然后再返回。 相反，它可以直接由客户端程序处理。 6.1 网页布局 网页布局是网页设计的基础。

13、页面布局主要可分为三大类： 1. 栏目结构 2. 区域分布式结构 3. 无框架限制结构 栏目布局 区域分布式布局 无框架限制布局 6.2 导航设计 1. 导航是网页的其中之一设计中不可缺少的基本元素。 导航就像网站的路标。 有了它，您在浏览网站时就不会“迷失”了。 导航链接各个页面。 只需点击导航中的超链接即可进入相应页面。 2、导航设计的好坏决定了用户能否轻松使用网站。 导航设计应该直观、清晰，最大程度地考虑用户的使用，使网页切换尽可能轻松。 导航的设计必须符合整个网站的风格和要求。 不同的网站会使用不同的导航方式。 3、一般来说，在网页的顶部或左侧设置导航栏是比较常见的方式。网站采用顶部的文字作为一级导航，左侧的树形结构菜单作为

14.是辅助导航。 让用户了解自己当前的位置； 4、允许用户根据自己走过的路径来确定下一步的方向和路径； 5.无需浏览太多页面即可找到所需的信息，让用户能够快速、轻松地找到所需的信息并使用最佳路径来到达它； 6、让用户在使用网站时遇到困难找到解决办法，找到最佳路径； 7、让用户清楚地了解整个网站的结构概览，产生整体感知； 8、有序处理不同使用频率的信息。 7.1 页面配色 设计精美的网站都有一个总体的调色板倾向。 使用一种或几种相邻的颜色作为主色，使整个网页呈现出和谐统一的色彩趋势。 使用配色方案。 首先根据网页的主题选择一种主色，然后调整透明度或饱和度，即使颜色变浅或变深，以创建新的颜色。这样的页面

15、颜色看起来一致，有层次感； 一般来说，适合网页标准颜色的颜色主要有三种：蓝色、黄色/橙色和黑色/灰/白色。 使用对比色。 可以充分利用对比色进行设计，注意使用灰色调进行协调。 此类作品的页面色彩丰富。 7.2 文字艺术 文字一般占据版面的大部分空间，是网页信息的主要载体。 处理好文字关系到网页设计的成败。 字体的选​​择、字体的大小、文字的颜色、行与行之间的距离、段落的排列都需要仔细考虑。 好的文字设计会给网页增色不少。 7.3 实例分析 1 网站描述 这是某航空公司网站的首页。 界面设计给人一种现代、动感的感觉，与公司的风格一致。 导航设计简洁利落，值得借鉴。 2 布局 网页布局采用比较常见的栏目结构。 A为网站logo所在区域； B为网站主菜单所在区域； C是搜索和其他公共功能所在的区域； D是网站的内容区，主要由文字和图片组成； E是版权信息所在的区域。 3、网页配色为蓝色，象征天空，与网站主题一致。 该网页主要使用两种蓝色，即“#14397D”和“1E95BD”。 另外，网页文字的颜色主要是白色和蓝色。专注-专注-专业