第一章 网页与网站基础
网页设计教程文字和图片
网页设计教程第一章网页制作基础知识1.1 认识网页与网站1.1.1 网页和网站1．网页网页（Web page）是一个文件，它存放在某一部与互联网相连的计算机中，如图1-1所示。
2．网站网站（Website）是用于展示特定内容的相关网页的集合。
3．首页首页是进入某个网站的入口网页，即打开网站后看到的第一个页面，大多数作为首页的文件名是index和default加上扩展名。
1.1.2 网页构成元素虽然网页的外在表现形式多种多样，但构成网页的基本元素却是大体相同，一般包括文本、图像、超链接、表单、动画、音频和视频等，如图1-2所示。
1．文本和图像文本和图像是网页中最基本的构成元素。
2．超链接超链接是指超文本内由一文件连接至另一文件的连结。
当用户单击超链接时，其指向的目标内容将显示在用户的浏览器中。
3．表单表单通常用来收集信息或实现一定的互交效果，其主要功能是收集用户在浏览器中输入的信息，然后将这些信息发送到目的端。
4．动画为了吸引浏览者的眼球，通常网页中的都包含一定的动画效果，常见的有GIF图像动画和Flash动画。
5．音频和视频根据实际需要，网页中还会添加音频和视频来丰富页面效果，常见的音频格式为MP3，视频格式为FLV。
1.1.3 网页制作的工作环境1．Adobe Dreamweaver2．Adobe Photoshop3．Adobe Flash1.2 如何设计网页1.2.1 网页设计基本原则网站设计制作的优劣直接关系到门户网站的外在形象和访问者的使用效率，以下是一些在网站设计中应注意的基本原则。
（1）明确网站目标和用户需求。
（2）主题鲜明。
（3）注重布局设计。
（4）避免滥用技术。
（5）及时更新维护。
1.2.2 设计风格与颜色搭配1．风格定位风格即网站的特点，指的是浏览者对网站内容和形式的直观感受，所透露出来的是设计者的文化品位，图1-3所示的是卡通风格的网站。
网站的风格定位可从以下几方面考虑：第一，确保网页界面有较强的一致性，使网站形成统一的风格界面，这里的一致性包括字体、标题、图像、背景颜色和注脚等第二，确保网页界面美观、简洁，易于访问。
《网页设计与制作》课程标准
《网页设计与制作》课程标准序言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程系统中拥有重要的作用，一、课程的说明：经过本课程的学习，使学生认识网页设计技术的发源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，经过运用Photoshop图像办理软件和Flash动画制作软件，三个软件相互当合，达成网页设计与制作任务的方法。
为此后从事网页设计与制作、网站开发和管理确立基础。
在网页设计的实践中要点培育团队协作、交流交流能力，培育自主学习能力和探究创新能力。
二、课程内容与基本要求：该课程波及的知识是网页设计人员必备的基本技术，职业活动与课程内容的对应关系以下：三、教课目的1、职业要点能力目标(1) 掌握使用Photoshop进行图像办理的基本方法及操作技术(2) 掌握DreamweaverCS5的基本知识及操作技术(3) 掌握成立与管理站点的方法(4) 掌握制作主要内容为文本的网页的方法(5) 掌握在网页中插入与编写图像的方法(6) 掌握在网页中插入多媒体元素的方法(7) 掌握表格办理与网页布局的方法(8) 掌握创立超级链接的方法(9) 掌握使用框架制作旅行网站的方法(10) 掌握创立和使用模板的方法(11) 掌握创立和使用库的方法(12) 掌握在网页中增添AP Div的方法(13) 掌握在网页中使用行为的方法(14) 掌握HTML基础知识及经过代码修饰网页的方法(15) 掌握使用CSS款式表修饰网页的方法(16) 掌握动向网页的观点及简单动向网页的制作方法2、职业特意能力目标(1) 经过达成有关的项目，掌握网页设计的基本工作流程。
(2) 经过达成有关的项目，掌握网页设计常用工具的使用方法。
网页制作基础
常用的WEB图像格式
• GIF（Graphics Interchange Format） –GIF可以用来存储各种图像文件。特别适用 于存储线条、图标和电脑生成的图像、卡 通和其它有大色块的图像。 –GIF文件小，是一种压缩的8位图像文件， 所以最多只支持256种不同的颜色。Gif支 持动态图、透明图和交织图。
HTML
• 文档类型定义
HTML文件结构
–DTD（Document Type Definition） –一组标记（编码：特定文档类型）＋内容模型＋属 性表
• 文档标记语法
–HTML文档标记语法有文件结构、文本段、组件、多 媒体及动态方式、超级链接等。
• 文本结构语法
–描述文本内容、文件头部、标题、语言字符集、文 本主体、多窗口页面等
网页元素
网页中的元素-声音和视频
• 声音
–不同浏览器对声音文件的处理方法是不同的，彼此之 间很可能不兼容。 –常用的有MIDI、WAV、MP3和AIF等。 –很多浏览器不要插件也可以支持MIDI,WAV和AIF格式的 文件，而MP3和RM格式需要专门的浏览器播放。 –使用声音作为背景音乐—会影响网页下载的速度。 –可以在网页中添加一个打开声音文件的链接，让音乐 播放变得可以控制。
网页元素
网页中的元素-图像
• 图像的作用
–提供信息，展示作品，装饰网页，表达个人情调和风格。
• 图象格式
–GIF、JPEG(JPG)、PNG，使用最广泛的是GIF和JPEG。
• 说明：当使用网页设计软件在网页上添加其他非GIF, JPEG, 或PNG格式的图片并保存时，这些软件通常会 自动将少于8位颜色的图片转化为GIF格式，或将多于 8位颜色的图片转化为JPEG. • 在网页中为了更有效地吸引浏览者的注意，许多网站 的广告都做成了动画形式。
网页设计与制作实用教程(第3版) 第1章-网站开发基础
1.1.2 网站的类型及定位
2．电子商务网站 电子商务网站是目前最具发展潜力的网站类型。电 子商务网站提供网上交易和管理等全过程的服务， 因为它具有广告宣传、咨询洽谈、网上订购、网上 支付、电子账户、服务传递、意见征询、交易管理 等各种功能。
1.1.2 网站的类型及定位
3．视频分享网站 视频分享网站为用户提供视频播客、视频分享、视 频搜索及所有数字视频内容的存储和传输服务。可 供用户在线观看最新、最热的电视、电影和视频资 讯等。
1.1.3 认识网页
表单：访问者要查找一些信息或申请一些服务时需 要向网页提交一些信息，这些信息就是通过表单的 方式输入到Web服务器，并根据所设置的表单处 理程序进行加工处理的。表单中包括输入文本、单 选按钮、复选框和下拉菜单等。 超链接：超链接是实现网页按照一定逻辑关系进行 跳转的元素。 动态元素：动态元素包括GIF动画、Flash动画、 滚动字幕、悬停按钮、广告横幅、网站计数器等。
网页设计与制作实用教程（Dreamweaver+Flash+Photoshop（第3版））
第1章 网站开发基础
本章主要内容：
网站开发概述 网站开发流程 常用网页设计软件 HTML入门
1.1 网站开发概述
网站开发就是使用网页设计软件， 经过平面设计、网络动画设计、网页排 版等步骤，设计出多个页面。这些网页 通过一定逻辑关系的超链接，构成一个 网站。
1.1.2 网站的类型及定位
网站是一种新型媒体，在日常生活、商业活动、娱 乐游戏、新闻资讯等方面有着广泛的应用。在网站 开发之前，需要认识各种网站的主要功能和特点， 对网站进行定位。下面介绍几种常见的网站类型。
1.1.2 网站的类型及定位
1．综合门户网站 综合门户网站具有受众群体范围广泛，访问量高、信 息容量大等特点，包含时尚生活、时事新闻、运动娱 乐等众多栏目。综合门户网站定位明确，以文字链接 为主要内容、版式和色彩较为直观、简洁。
第一章网页基础
1.1.3静态网页与动态网页 1.1.3静态网页与动态网页
2. 动态网页 动态网页使用ASP、PHP和CGI等程序生成，动态网页中的某些脚本 只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web 服务上运行。当Web服务器接收到对静态网页的请求时，服务器将 Web 该页发送到请求浏览器，而不进一步的处理。当Web服务器接收到 对动态网页的请求时，它将做出不同的反映：服务器根据URL携带 的参数通过应用服务软件（如IIS等）运行服务器端程序，产生的结 果页面再返回客户端。应用服务软件与Web服务器软件一并安装、 运行在同一台计算机上。
1.2 网站的基本结构
• 1.2.2 动态网站的层次结构 • Web服务器上存在许多HTML文件，用户可以使用浏览器通过HTTP 协议来访问并显示这些超文本页面。但是HTML文件仅仅是静态的网 页，不能动态更新，为了能动态访问网上的数据库资源，达到交互式 的访问的目的，Web服务器中包括了CGI（公共网关接口），提供了 与网上数据库资源连接的可能性。中间件可以实现Web服务器与数据 库资源的连接。对于嵌入了数据库访问检索项的网页，中间件可以将 检索项转换成SQL语句访问数据库，并将所需的数据库资源解释成浏 览器可以解释的HTML页面供用户浏览。数据库资源可以经局域网或 广域网与Web服务器连接。 • 另外，从站点的文件目录层次来看，网站内文件组织的第一层是站点 文件夹，可以看成是站点的根目录；将网站内容分类后，放在站点文 件夹下面的子目录，称为第二层；每个分类内容下面还有细节内容可 以放在第二层目录的下面，称为第三层。网站的目录结构设计主要考 虑是否方便浏览者进行浏览，这需要网站的设计者对网站的内容在整 体上进行规划。一般中小型的网站的层次不超过三层，层次过于复杂 容易使浏览者不易查找到想要浏览的内容。
第1章 网站与网页概述
• 对于静态网页HTML或XML，服务器直接返
回给客户。
• 对于动态网页ASP或JSP ， Web服务器则与数
据库服务器建立连接 ,运行脚本程序，最后生 成新的、包含动态数据的HTML或XML文档 返回客户端浏览器 。
1.1.2 Web的工作原理
图1-1 Web的工作原理
XML为可扩展标记语言，它与HTML一样都是标准通 用标记语言。
为美工设计人员提供了广阔的创意空间，
• Photoshop广泛应用于网页图像编辑、桌面出版、广
告设计、婚纱摄影等各行各业，成为许多涉及图像处 理的行业的事实标准。
小结
•
本章介绍网站与网页的相关概念和基础知识， 重点讲解网站建立的方法和管理技术，分析网站 设计要则及建站前的准备工作。设计者需要具备 一定的网络基础知识、掌握各种多媒体处理技术， 才能从容地应对开发过程中遇到的各种问题。
/k/2011-06-01/10055601835.shtml
1.1.4 静态网页与动态网页
• 动态网页中除了普通网页中的元素外，还包括一些
应用程序，这些应用程序使浏览器与Web服务器之 间发生交互行为，而且应用程序的执行需要应用程 序服务器框架 第6章：AP Div 第7章：表单
•
• •
第1章 网站与网页概述
学习目标：
• 了解Internet、Web、网站、网页的基本概念 • 了解网站、网页与主页之间的相互关系 • 掌握网站建立及管理方法 • 了解网站的开发设计应遵循的基本原则 • 了解网页设计的常用工具软件
1.1网站与网页基础知识
Internet是世界上覆盖面最广、规模最大、信息 资源最丰富的计算机网络。
•
Internet提供了许多受大众欢迎的服务，包括：
《网页设计与制作》笔记_学习笔记
《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。
这包括网页的整体外观、结构和交互功能。
网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。
一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。
重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。
2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。
3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。
4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。
考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。
当时网页主要是以文本为主，简单的超链接连接不同的信息。
《网页设计》教学大纲
网页设计课程教学大纲一、课程说明【课程编号】【课程类别】专业选修课【学分、学时】2学分、48学时【授课对象】数字媒体艺术专业本科四年级【修订日期】2021年3月31日本课程是一门操作性和实践性很强的课程，对于网页设计与制作岗位应具备的网页设计与制作能力的培养起到重要作用。
在学生具备了一定的计算机应用基础知识和平面图像处理基础能力的基础上，本课程主要介绍了网页设计与布局知识、网页制作技术以及Dreamweaver、Sublime Text等网页编辑与制作软件的使用，让学生具备熟练地制作出有专业水准的网页的能力。
本课程在教学设计当中充分融入思想政治德育教育的元素，突出以专业技能和理论知识为主、思想道德教育为辅的教学特点，发挥出思政教育在专业课程教学中的作用。
在教学过程中，引入实事政治案例，对学生进行正确的价值观的影响，使专业课程教学发挥引领学生树立正确价值导向的作用。
教学环节中，让学生参与讨论和互动，在选择案例和实践操作上多聚焦中华传统文化、国内优秀网页设计作品等，引导学生从全球视野看待中国文化，增强学生的价值认同与文化自信；在学习专业知识的同时，谈理想谈目标，在讨论过程中引导学生将专业知识与实际应用联系在一起，将个人理想与建设祖国联系在一起，从而进一步达到课程思政的教学目的，提高学生课堂学习的收获感、成就感，增强立德树人的成效，实现课程思政的教学效果。
表1 本课程对毕业要求支撑关系矩阵表注：课程矩阵图中课程与毕业要求各项相关关系，按照H （高相关）、M （中相关）、L （低相关）填写。
二、课程目标通过本课程的学习，培养学生利用网页设计技术进行网站设计与开发的基本知识和技能，能基本胜任网页制作的岗位。
通过教师的教学工作，不断激发并强化学生的学习兴趣，并引导他们逐渐将兴趣转化为稳定的学习动机，以使他们树立自信心，锻炼克服困难的意志，乐于与他人合作，养成健康向上的品格。
同时，培养学生严谨、细致的工作作风和认真的工作态度。
自学网页设计与制作
课程的地位和作用 - 课程的地位
是计算机网络技术及相关专业的专业必修课 是计算机网络技术专业的专业核心课 程
网页设计与制作
课程的地位和作用 - 课程的作用
知识要求： 通过课程学习，掌握运用Dreamweaver设
计制作网页、特别是制作动态网页的方法；掌 握运用Fireworks进行网页中图形设计和运用 flash进行网页中动画设计的方法。进而掌握 综合运用三个软件，完成网页设计与制作任务 的方法。
（开放任务分成了网页设计和图形动画设计两个
阶段）
网页设计与制作
评价模式 – 评价的多样性
使用建立在共同的基础层面上的多样性评价尺度 模仿任务：统一要求 开放任务：综合运用和在原有基础上的提高
网页设计与制作
教学要求 提前2分钟进入教室，上课结束整理好机房方可
离开。 上课违纪3次扣平时成绩10分，5次以上平时成绩
第一单元 网页设计概述与经典网站赏析
国内外优秀网站赏析之一
门户网站
中华人民共和国中央人民政府 中国教育科研网 新浪网 无锡阿福台
第一单元 网页设计概述与经典网站赏析
国内外优秀网站赏析之二
商业网站
太平洋电脑网 万科房地产
第一单元 网页设计概述与经典网站赏析
国内外优秀网站赏析之三
教育网站
以0分记。
第一单元 网页设计概述与经典网站赏析
提出任务：
角色转换：浏览者—>设计者
第一单元 网页设计概述与经典网站赏析
概述: 网络->网站->网页
网络：将不同地理位置的、具有独立功能的多个 计算机系统通过通信设备和线路连接起来，并能 以功能完善的软件实现网络内资源共享的系统。
因特网：全球范围的计算机互联网。
第一章网页设计概述ppt课件
？ 网页浏览过程
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
使用浏览器可以搜索、查看和下载互联网上的各 种信息。
？ 网页浏览过程
第一章 网页设计与制作基础
三、网页设计常用工具
网页美化工具（图像）： photoshop和fireWork等
网页美化工具（动画）： flash和swish等
网页排版工具： DreamWeaver和FrontPage等
网页设计是技术与艺术的结合，涵盖了网络技术 、多媒体技术、界面设计艺术等。通过对国内外 优秀网站进行赏析，我们了解这些网站设计的特 色、技术、效果。
二、 网页、网页设计、网站和主页
总结：网页就是包含了文字、图片、动画、声音等内 容的可以在网上传输的界面。他可以用来共享信息、 宣传自己、服务用户等。
• 问题：
? ? ?
– 为什么同样是网页给我们的视觉效果是不一样的？
– 为什么同样是网页给我们提供的信息也是不尽相同的？
二、 网页、网页设计、网站和主页
典型的web站点有，新闻信息网站、娱乐网站 、教育网站、电子邮件站点、服务站点、照片 共享站点、社区、博客与维基等等
？ 网页浏览过程
一、网页设计相关概念
2.WEB服务器及客户机
用URL发出请求 客户机
送出网页
服务器
第一章 网页设计与制作基础
网页由超文本标记语言（HTML）的文件格式来构 造，网页中包含了文本、图像、动画、声音及其 他信息。
在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。
DreamweaverCS6 HTML CSS DIV JavaScript网站开发网页基础知识
Photoshop:简称"PS",是由AdobeSystems开发与发行地图像处理软件。Photoshop主要处 理以像素所构成地数字图像。使用其众多地编修与绘图工具,可以有效地进行图片编辑工作。PS 有很多功能,在图像,图形,文字,视频,出版等各方面都有涉及。网页主要使用PS来实现图片地处理。
起始页
1.3.1 DreamweaverCS6工具介绍
起始页地设置 设置起始页:勾选"起始页"左下角地不再显示地复选框,可设置关闭"起始页"地效果,如需重新开启改功能,单击 菜单栏地编辑首选参数常规文档类型显示欢迎屏幕,勾选这个选项重新启动"起始页"。
1.3.1 DreamweaverCS6工具介绍
1.3.1 DreamweaverCS6工具介绍
2 认识Dreamweaver CS6工作面板 DreamweaverCS6地属性面板默认在窗口地下部,会随着鼠标所在位置或所选对象地不同显示相对应地属性面 板内容。
1.3.1 DreamweaverCS6工具介绍
2 认识Dreamweaver CS6工作面板 当前标签:光标所在位置地HTML标签名称; 状态栏:状态栏位于文档窗口地底部,它地作用是显示当前正在编辑地文档地有关信息,主要包含当前窗口大小,文 档大小,当前标签,估计下载时间,当前页面编码类型等。 当前文档:表示当前编辑地文档名称,通过点文档名称可更改当前编辑地文档。
第一~三章网页设计基础知识
1.1.2 Internet 1.什么是Internet Internet即“因特网”，它是目前全球 最大的、开放的计算机互联网络。是一个 基于TCP/IP的网络，由分布在各个国家的 数以万计的网络互联设备组成。
1.1.2 Internet 1.什么是Internet （1） Internet起源于美国国防部的高级 研究计划局，最初主要用于军事。 20世纪70年代迅速壮大，发展成科研和 教育机构服务的网络。 （2） Internet提供的服务：WWW服务 （网页浏览服务）、电子邮件、文件传输 （FTP）、在线聊天、网上购物、网络炒股、 联网游戏等等。
WWW服务器采用客户机/服务器的工作模式。
1.1.4 统一资源定位器URL 1.URL：是对Internet上资源的一种准确定位 机制，它以一种全世界统一的、唯一标识 来确定某个网络资源，可以访问Internet 任何一台主机或者主机上的文件。
1.1.4 统一资源定位器URL
2.URL的组成：检索资源所使用的协议类型、存放 资源的主机域名、资源所在的路径名与文件名。 3.URL的地址格式：应用协议类型://主机域名/路径/ 文件名
2.1 页面的构成元素
2. 页面的构成元素
设计是一个思考过程，制作是将思考表现出来。也就 是说设计是网页的核心和灵魂。 结合网页设计的过程，按照网页页面所包含的各个构 成元素分类阐述： 表现主题 网站名称和CI形象 设计风格 版式设计 色彩运用 网页导航 视听元素
2.2 主题设计
1. 网页制作工具 （1）文本编辑器---网页制作通常使用HTML语言， HTML文档可以使用多种文件编辑器进行编辑。 例如记事本、word、写字板等。 （2）FrontPage---是由微软公司推出的网页制作工 具。其界面与word极为相似。 （3）Dreamweaver---具有可视化编辑界面，用户 不必编写HTML源代码就可生成跨平台、跨浏览 器的网页，即使是初学者也能制作出专业水准的 网页，是网页设计者的首选工具。
《网页设计与制作》第一章：网页制作基础
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记
对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color>
2.个人网站
❖ 个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
3.专业网站
❖ 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（）即是一个专业文学网站。
4.职能网站
❖ 职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书店（）等。
Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。
Macromedia Flash 工具可较快的制作 SWF 文件。
思考题
1.1 什么是WWW？什么是网页？ 1.2 一个完整的URL由哪几部分组成？举
出几个URL的例子。 1.3 如何设置IE的主页？如何用IE收藏一
➢ 浏览器
❖概述 ❖分类 ▪Internet Explorer ▪Netscape Navigator ▪Mosaic等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。
网页制作基础教程
网页制作基础教程第一章网页制作基础1、什么是网页一般浏览器中打开的都是网页，这些文档是通过超文本标记语言HTML表示出来的；主页：在网站中默认打开的页面称为主页，也叫首页，主页是进入网站的门户，网页中包括的内容：文本，图像，超级链接，表格，表单，多媒体及一些特殊的效果2、网站及运作原理网站是在互联网上一个固定的面向全世界发布消息的地方，它由网站地址和网站空间构成；网站开发者常常将网站称作为站点，在网站的开发者来说，网站就是在计算机上创建的一个多级的文件夹，并在各文件夹中保存着相关网页文件。
根据站点文件夹所在的位置分为：本地站点和远程站点；根据服务技术分：静态网站和动态网站3、了解HTML语言HTML是网上用于编写网页的主要语言，使用HTML语言编写的网页文件也是一个标准的纯文本文件，可以使用文本编辑器将它打开，但是该纯文本文件如果使用浏览器打开就会看到排版整齐的网页；4、HTML语言标签HTML标签用来标记网页元素，以形成文本布局，文字的格式及五彩缤纷的画面，HTML的标签分单标签和成对标签两种基础标签：<html></html> <head></head> <body></body>5、常用动态建站技术ASP是由微软开发的动态网页技术标准，其原理通过在HTML页面中加入VB JA V A代码，服务器在返回网页之前首先执行这些代码，产生最终的结果。
6、网站的制作流程及制作工具初期规划：建站之前，要有明确目的，要明白建立网站的目的，接受对象是哪些群体，要为访问者提供怎样的服务，然后对整个网站进行策划，中期制作：搭建本地站点，建立文件夹，建立站点结构图，设置页面属性等；后期工作：全面测试，上传后进行实地测试，完成本地测试后，再上传到服务器，以便进行远程测试；7、网页设计工具Dreamweaver 8 是最常用的网页编辑工具之一，使用该工具可以在其提供的三种视图中进行网页编辑与修改；图像处理工具Firework 8主要用来对网页中用到的图像素材进行制作或处理，它可以快速地制作和处理网页中图像，动画制作工具：FLASH 8 主要用来制作一些精彩的小动画，可以使页面变得更加精美，该软件是目前最流行的，矢量的，具有交互性的图形编辑软件；第二课创建站点1、启动：开始——程序——Macromediadreamweaver 8（双击桌面的图标）2、关闭：文件——退出，关闭按钮3、窗口的组成：标题栏（软件名称，版本号，文件名，最小化，最大化，关闭按钮）菜单栏：由文件，编辑，查看，插入，修改，文本，站点，窗口等主菜单组成；插入栏：位于菜单栏下方，有网页制作时常用的元素及命令，如常用，布局等开始页：打开软件时的页面，该页面位于屏幕中间的大部分区域；属性面板：一般位于窗口的底部，显示文档，网页元素及相关工具的属性；面板集：位于窗口右侧，可以快速展开或折叠一些功能面板，4、创建站点：站点——新建站点——站点名称——否（不用服务器）——建立一个本地文件夹——如何连接远程服务器（无）——完成；5、编辑站点，复制站点，删除站点，导出站点，导入站点，完成按钮；6、管理站点中的文件：站点的名称，远程文件管理器，站点文件结构——弹出菜单——视图菜单8、文档的新建，保存，打开及属性设置9、设置页面属性：修改——页面属性（页面字体，大小，文本颜色，背景颜色，背景图像，页边距，跟踪图像）第三课：制作网页1、在网页中插入文本（直接输入文本即可）（换行：ENTER，按SHIFT+ENTER可得到较小的行距；2、设置字体，大小，字形，颜色，对齐方式3、在网页中插入图像：插入——图像（图像的大小，对齐方式，边距等设置）4、插入——层（在层中插入图像，可将图像到处拖动）5、在网页中插入鼠标经过图像：插入——图像对象——鼠标经过图像（原始图像，鼠标经过时的图像）6、插入特殊的符号，版权，注册商标等；插入——文本——版权，注册商标，符号等7、插入多媒体文件；插入——媒体——FLASH（选择插入的文件）8、设置动画的大小及其边距（属性面板：宽，高，垂直，水平的间距）9、插入——布局对象——层（设置背景图像，大小，方向等设置）10．向网页中插入链接：选择文本——在图像中选择链接的文件；11．创建外部链接：在文档中输入网名，选择名称：引用链接网址12．创建锚记：先命名锚记——然后再选择要引用锚记的文字，然后进行链接OK（引用时加#）13．在网页中插入视频：插入——媒体——插件（选择视频文件14．创建邮件链接：选择图像——链接邮箱地址15．创建下载链接：选择文本或图像——链接文件（ZIP RAR EXE）等文件第四课页面布局1、插入——表格（行数，列数）2．表格的宽度，3．边框粗细；4．单元格边距；5．单元格间距；6．合并所选单元格，拆分单元格，背景，背景颜色，边框；7．表格布局；插入——表格（在单元格内插入表格（做嵌套表格）8．改变列宽，行高9．网页的布局：插入——布局对象——层（可以创建多个层，如同文本框的设置）10．设置层的属性：宽度，高度，单击插入图像的层选择手柄，在属性面板中11．布局网页框架：创建布局表格，创建布局单元格，做嵌套布局表格；12．将布局转换成表格：修改——转换——表格到层（防止层重叠，显示层面板，显示靠齐到网格）13．框架布局与样式定义：插入——框架（选择框架布局形式）14．制作背景固定网页：定义样式第五课CSS样式与行为1、光晕效果的应用CSS面板——添加滤镱设置（名称，（GLOW（color=?,strength=?）设置(color=red,strength=3)2、添加行为：行为面板（添加行为，删除行为，执行顺序）3．设置触发行为的事件：事件，动作4．记录移动路径5、添加时间轴行为：6、制作表单元素；第六课，表单与模板、1、制作注册页面2、创建网站模板；3、将网页保存为模板：文件——另存为模板4、创建可编辑区域：插入——模板对象——可编辑区域；5、网页模板的应用，打开后修改——然后另存为其它网页文件；6、分离模板：修改——模板——套用模板到页（修改——模板——从模板中分离）第七课：FLASH的操作1、启动：双击桌面图标，2、退出：关闭按钮；3、窗口的组成：标题栏，菜单栏，编辑栏，工具箱，面板集，舞台，属性面板；4、标题栏：它位于整个窗口的最上方，最小化，最大化，关闭按钮等；5、菜单栏：由文件，编辑，视图，插入，修改，文本，命令等6、工具栏：位于整个软件的左侧，分为，工具，查看，颜色和选项四个选项；绘制卡通房子的练习；第二课工具的使用1、直线工具；按SHIFT水平或垂直直线，粗细，端点（尖角，圆角，斜角）2、钢笔工具：是通过路径来绘制笔触图形的，按CTRL或双击曲线外时，可结束绘图；3、任意变形：旋转，倾斜，缩放，扭曲，封套模式等；4、输入文本：文本类型，字体，字号，字体样式，对齐方式；5、添加滤镜效果：选择对象或文本——属性栏中找到滤镜类型；（删除滤镜）6、美化图形——设置颜色7。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一章网页与网站基础【本章要点】1、WWW服务、网页与网站2、静态网页与动态网页3、HTML静态网页技术4、XHTML新规范5、CSS基础6、网站建设的步骤1.1 WWW简介因特网（Internet）把世界上无数台计算机连接成一个巨大的计算机网络，其主要目的就是要实现信息资源的共享。
因特网实现信息资源共享的主要途径，便是WWW服务。
WWW是World Wide Web的缩写，即世界范围内的网络的意思，也叫万维网，更简单地缩写为W3，W3C（World Wide Web Consortium）是万维网联盟。
WWW服务采用一种客户机浏览器／服务器体系结构。
在这种体系结构中，WWW客户机通常比较简单，它仅仅是已接入Internet并具有网页浏览器的计算机。
而WWW服务器相对复杂得多，它除了负责接收所有来自客户机的访问请求并进行相应的处理之外，还需要对自身的资源进行合理的配置、管理和优化。
WWW服务的信息资源是以Web网页的形式组织起来的，Web网页存放在资源提供者的WWW服务器里。
因特网上每一台WWW服务器都有不同的地址，普通的因特网用户只要在计算机的浏览器中输入不同的WWW服务器地址就能“浏览”不同WWW服务器里的Web网页。
在Web网页中通过一种“链接”技术，可以实现Web网页之间的连接与跳转，用户只要点击Web网页里的某个“链接”就可以跳转并打开相应的另一个Web网页。
Web网页在WWW服务器与客户机浏览器之间按照http协议进行传输。
http是hypertext transfer protocol（超文本传输协议）的缩写，它是实现Web网页在因特网（Internet）上传输的应用层协议。
WWW服务的体系结构可用图1-1简单示意。
web网页web网页图1-1 WWW服务体系结构图从上面的图中可以看出，客户机和WWW服务器之间的通信通常分为四个步骤：（1）首先客户机浏览器通过网络向服务器发送http请求，请求一个特定的Web 网页；（2）这个请求通过Internet传送到服务器端；（3）服务器接收这个请求，找到所请求的网页，然后用http协议再将这个Web 网页通过网络发送给客户机；（4）客户机接收这个Web网页，显示在浏览器中。
1.2网页与网站的关系Web网页，简称为网页，一般是用HTML语言和其它嵌入式语言编写而成的程序文件。
HTML是HyperText Markup Language的缩写，即超文本标签语言；嵌入式语言有JavaScript、VBScript、JSP、PHP等。
文字可以直接输入在网页里，设置适当的格式即可，其它媒体素材（图像、声音、动画和影像等），需要在网站中保存为单独的一个个的文件，然后才能在网页中链接或嵌入该媒体素材。
一个WWW服务器里常常有许多网页和相关文件，将这些网页及相关文件存放到一个主目录（也叫根目录）下，在主目录下创建一些子目录，将相关文件按类别存放各个子目录里去，在所有网页中确定一个主网页（放在根目录下），建立从主网页与各级子网页的相互链接关系，就形成了一个网站。
每个服务器有一个固定的IP 地址，每个网站有一个单独的域名（如：等）。
当因特网用户通过域名或IP地址访问到某网站时，首先打开的就是该网站的主网页（简称为主页），通过网页之间的链接，用户可以方便地访问网站内所有的网页。
图1-2所示为网站内多个网页之间的链接关系。
图1-2 一个网站内多个网页之间的链接从用户的角度来看，网站的主要特征有：（1）拥有众多的网页。
从某种意义上讲，建设网站就是制作网页，网站主页是网站默认的第一个网页，也是最重要的网页。
（2）拥有一个主题与统一的风格。
网站虽然有许多网页，但作为一个整体来讲，它必须有一个主题和统一的风格。
所有的内容都要围绕这个主题展开，不切合主题的内容不应出现的网站上。
网站内所有网页要有统一的风格，主页是网站的首页，主页的风格往往就决定了整个网站的风格。
（3）有便捷的导航系统。
导航是网站非常重要的组成部分，也是衡量网站是否优秀的一个重要标准。
便捷的导航能够帮助用户以最快的速度找到自己所需的网页。
导航系统常用的实现方法是导航条、导航菜单、路径导航等，导航是通过链接来实现的。
（4）分层的栏目组织。
将网站的内容分成若干个大栏目，每个大栏目的内容都放置在网站内的一个子目录下，还可将大栏目分成若干小栏目，也可将小栏目分成若干个更小的栏目。
这就是网站所采用的最简单、最清晰的层次型组织方法。
（5）有用户指南和网站动态信息。
除了能完成相应的功能之外，还应有相应的网站说明，指导用户如何快捷地搜索、查看网站里的内容。
网站还应具有动态发布最新信息的功能。
（6）与用户双向交流的栏目。
网站还有一个重要的功能，就是收集用户的反馈信息，与用户进行双向交流。
双向交流栏目常采用E-mail、留言板或BBS的方式。
（7）有一个域名。
任何发布在因特网上的网站都有不同于其它网站的域名，因特网上每一台主机（客户机和服务器）都有一个不同于别的主机的IP地址。
网站域名要与该网站所在WWW服务器的IP地址相对应，如百度网站的域名是，它的WWW服务器IP地址为119.75.217.56。
从域名到IP地址的解析，是由域名服务器（DNS）完成的。
1.3 静态网页与动态网页Web网页有很多种，例如HTML网页、XHTML网页、ASP网页、JSP网页、PHP网页等，可以将其分为两大类：静态网页和动态网页。
静态网页指的是HTML网页，即用HTML语言编写的网页，它是所有其他网页技术的基础。
其中所有的网页对象，包括文字、图片、超链接、Flash动画、表格、列表等都需要通过HTML才能展现出来。
当客户机通过Internet向WWW服务器发出http请求时，WWW服务器响应请求，如果发现这是一个HTML网页，WWW服务器找到这个HTML网页文件后，就用http协议通过Internet将这个网页发送到客户机，网页在客户机浏览器里按照HTML的规则呈现出来。
如图1-3（a）所示。
静态网页中可以插入动画、使用CSS样式，也可以插入JavaScript代码，使网页具有一定的动感。
如鼠标移上后弹出快捷菜单、随滚动条移动的广告图片等。
动态网页是在WWW服务器端动态生成网页的技术，ASP、JSP、PHP等技术都属于动态网页技术。
本书将学习目前非常流行的ASP技术。
动态网页一般都需要通过访问数据库（或文本类文件）来实现网页的生成，系统中可有一台单独的数据库服务器（存放数据库系统），也可以将WWW 服务与数据库系统放置在同一个服务器上。
当WWW 客户机通过因特网向WWW 服务器发出http 请求时，WWW 服务器响应客户机的http 请求，如果发现请求的是一个动态网页(如ASP 、JSP 或PHP 等)，WWW 服务器就需要将这个请求转交给一个应用程序（如ASP 、JSP 、PHP 程序等），应用程序根据需要，从数据库（或其它文本型文件）中取出相应的数据并对其进行相应的处理，然后动态生成一个新的HTML 网页，通过HTTP 协议将这个HTML 网页传递给客户机。
最后，在客户机浏览器里按照html 和一些脚本规则呈现出网页效果。
如图1-3（b ）所示。
(a) 静态网页访问方式 (b) 动态网页访问方式图1-3 静态网页及动态网页的访问方式1.4 HTML 静态网页技术1.4.1 HTML 简介HTML 是英文HyperText Markup Language 的缩写，即超文本标签语言。
用HTML 语言编写的网页是静态网页。
HTML 是网页基本语言，也是其他网页技术的基础，学做网页，就应从HTML 学起。
HTML 是一种结构化的语言，采用“标签”来描述HTML 网页内的元素，如网页的头部信息、段落、列表、超链接、图片、表格等。
网页元素的一般格式如下：<标签名 属性1="值1" 属性1="值2"> 描述的内容 </标签名>标签名是一串英文字符。
在HTML 中，标签名字符串可以小写，也可以大写，但必须使用半角字符。
同一个网站内网页文件的标签字符，最好统一使用小写或大写的格式（本章例题全部采用小写格式）。
例如头部元素（<head>…</head>）、段落元素（<p>…</p>）、超链接元素（<a>…</a>）等等。
“<head>”、“<p>”、“<a>”等起始标签，“</head>”、“</p>”、“</a>”等是结束标签。
大多数元素都有配对的起始标签和结束标签，如上面已经介绍的头部元素（<head>…</head>）、段落元素（<p>…</p>）、超链接元素（<a>…</a>），以及标题元素（<h1>…</h1>）、文本字符（<font>…</font>）等。
少数只有起始标签而没有结束标签（或结束标签可省略），如换行标签<br>等，没有相应结束标签的，常常写成<br />的格式。
大多数元素都有一些属性，属性一般都是可选取的，属性只出现起始标签里，并且具有固定的描述结构：属性名="属性值"。
属性值原则上都要用半角双引号" "括起来，但在HTML 中，有些属性值可不加双引号，浏览器也能识别。
例如，网页中的一个超链接元素：<a href="" target="_blank">网易网站</a>或：<a href="" target=_blank>网易网站</a>两者的功能都是，在网页中显示“网易网站”的字符串，当单击这个字符串时，将在一个新窗口中打开网易网站（）。
其中“<a>”是超链接元素的起始标签，“</a>”是超链接元素的结束标签。
href和target是超链接元素a的两个属性，"http:// "是href的属性值，表示链接目标地址；_blank是target 的属性值，表示将在一个新窗口中打开目标网页。
需要注意，标签名与属性之间、一个属性与另一个属性之间，要用空格符间隔。
可以用任意一种文本编辑工具（如记事本、写字板、WORD等），也可采用专业的网页编辑软件（如DREAMWEAVER、FRONTPAGE等）来编写HTML网页文件。
HTML文件的扩展名为.htm或.html。