1、网页设计与制作教程单元一 网页基础知识清华大学出版社单元一 网页基础知识l教学目标认识互联网中网站的分类，能够深入分析每一类网站的特点。认识网页中相关的知识与元素，进一步了解网站。了解常用网页设计软件Dreamweaver的基本操作。单元一 网页基础知识l任务1.1 确立课程目标l任务1.2 优秀网站赏析l任务1.3 初识网页l任务1.4 认识网页基础语言l任务1.5 DreamWeaver简介l上机实训任务1.1 确立课程目标：l任务描述 了解网页设计与制作行业的社会需求及前景，确定学习网页设计与制作课程目标：独立完成深圳可盈资产经营有限公司网站开发项目。任务1.1 确立课程目标：l工作过程
2、1.1.1行业需求、前景l传统企业同互联网联姻，借助互联网展示企业形象，发布产品信息，做好客户服务已经成为业界的共识，成为现代企业发展中一个不可或缺的步骤；互联网为企业服务，渗透到企业的生产、销售、管理当中去，这也成为互联网发展的重要模式之一。如图1-1所示为客户在威客网发布与网站设计制作有关的任务需求信息。任务1.1 确立课程目标：l 工作过程1.1.2目标l对任务的理解，分析，表达能力；l项目任务的执行能力；l对项目任务结果的展示，分析，评价能力；l对工作环境的熟悉能力；l按照规范操作的能力；l按照安全要求操作的能力；l主要工具的使用能力；l事故处理的能力；l在复杂环境中做事，与人竞争协作
3、的能力；l在完成任务过程中自我学习和持续发展的能力。任务1.1 确立课程目标：l任务回顾凡事预则立，不预则废。在学习新知识的时候，我们不明确自己的学习目标，不思考通过学习后需要掌握什么样的能力，那么就无法事先做好学习准备和计划，最终导致学习效率低下。任务1.2 优秀网站赏析：l任务描述 在制作网站之前，必须先了解一下当前网站的主要分类。了解互联网中网页设计的主流方向，了解各类网站的设计方法和风格特点。根据网站的主题、形式、客户企业的特点以及企业的业务背景，目前主要有五种类型网站：门户类网站、商务类网站、政府类网站、文娱类网站及动漫游戏类网站。任务1.2 优秀网站赏析：l工作过程1.2.1门户类
4、网站l门户类网站特点是拥有庞大的信息量和用户资源，设计上以内容为主，设计为辅。如新浪。任务1.2 优秀网站赏析：l工作过程1.2.2商务类网站l产品型企业网站：设计上突出产品特色，制作精美。如NIKE。l信息、客户服务型网站：设计上以需求为中心，风格简洁明了。如众品网。l在线商店网站：设计上注重功能实现，易用性。如VANCL凡客诚品。任务1.2 优秀网站赏析：l工作过程1.2.3政府网站l设计风格给人严肃、公正、可信赖的感觉。如中华人民共和国外交部。任务1.2 优秀网站赏析：l工作过程1.2.4文娱类网站l设计风格轻松休闲。如幻剑书盟。任务1.2 优秀网站赏析：l工作过程1.2.5游戏类网站l
5、设计上突出游戏氛围，交互性强。如魔兽世界。任务1.2 优秀网站赏析：l工作过程1.2.6项目案例l本书以”网站开发项目作为学习载体。因此，要认真分析网站的业务背景，做到对不同类型的网站能准确定位和归类。当我们与客户洽谈网站业务事宜时，通过分析对方提供的网站规划文案和公司背景情况后，能快速对所建网站进行归类，头脑中能迅速浮现出该类型网站的设计风格和表现形式特点，这样才能在接下来与客户的交流中处于主动的位置，通过了解网站类型，向客户提供网站设计理念和视觉特效的可行性方案。任务1.2 优秀网站赏析：l任务回顾互联网是一个丰富多彩的信息世界，拥有大量的网站资源，对于网站种类的划分，让我们可以更清晰的了
6、解我们的客户群体。有利于我们在网页设计中拥有更加明确的思路。任务1.3 初识网页：l任务描述 了解网站在互联网中的运行环境，网站的各种相关知识，还有网页的基本元素和基本术语。本次项目的完成使学者具备与客户更深层次的交流能力。任务1.3 初识网页：l工作过程1.3.1网站的相关知识1.3.2网页中的基本元素与常用术语l1网页中的基本元素 文本、图形图像（JPG、GIF和PNG类型）、超链接、交互功能、多媒体l2网页中的常用术语 网站与网页 服务器（Server）与浏览器（Browser）远程站点(Remote Site)和本地站点（Local Site）统一资源定位器URL任务1.3 初识网页：
7、l 工作过程1.3.3静态网站与动态网站简介l1静态网页是指以纯粹HTML(超文本标记语言)制作的网页，通常是以.htm、.html、.shtml、.xml等为后后缀的。l2动态网页是指使用网页脚本语言，如php、asp、jsp等制作的网页，其网址通常是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀。是否有程序在服务器端运行，是区别静态网页和动态网页的重要标志。网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。任务1.3 初识网页：l工作过
8、程1.3.4网页制作的常用软件l1网页制作三剑客：Flash、Dreamweaver、Fireworksl2Photoshopl3应用程序开发技术：ASP、PHP、JSP、JavaScript。任务1.3 初识网页：l任务回顾了解网站的相关知识和网页的基本元素，是一个网页设计师应具备的基础知识。而对基本的理论知识的了解，让设计师能够更深层次的了解互联网中网站的运行环境。任务1.4 认识网页基础语言：l任务描述 认识网页基础语言，了解HTML的概念和HTML的基本结构。任务1.4 认识网页基础语言：l工作过程1.4.1关于HTMLlHTML（HyperTextMark-upLanguage）即超
9、文本标记语言，是WWW的描述语言，也是网页的基本语言。该语言使用“标记（标签符号，TAG）对文件的内容进行标注，指出内容的输出格式，如字体大小及颜色、背景颜色、表格形式、各部分之间逻辑关系等。任务1.4 认识网页基础语言：l工作过程1.4.2了解HTML的基本结构l1HTML的基本结构，例1。任务1.4 认识网页基础语言：l 工作过程 1.4.2了解HTML的基本结构l 2标签符号是以括起来的，一般成对出现，表示起始和结尾。以下是一些常用标签：（1）标签：标识HTML文件的开始和结束，中间是一些HTML语言的元素。它允许网络浏览器把文件内容确认为HTML文件。（2）标签：标题标签，其中的信息不
10、会出现在网页中。但其中包含了许多网页的属性信息标签一般紧跟标签，标签在标签之前。（3）标签：主体标签，它是文档的主干，包含了文档的内容。可以通过多种途径来表现这些内容。（4）标签：段落标签，中间是一段文字的内容，可以设置其属性来对文字排版。HTML的浏览器是基于窗口的，用户可以随时改变显示区的大小。HTML的分段完全依赖于分段元素。（5）标签：字体标签，可通过设置其属性来美化字体。（6）标签：图像标签，设置网页中图像的来源、尺寸、对齐方式和说明等。（7）标签：超链接标签，设置超链接的链接目标和名字等。（8）标签：标题标签，设置页面的标题。任务1.4 认识网页基础语言：l任务回顾通过认识基本的网
11、页文件源代码，了解HTML的概念和HTML的基本结构，这样才能够清楚的了解互联网中网页制作与网页展示的本质。任务1.5 Dreamweaver简介简介：l任务描述 Dreamweaver是网页制作最常用的软件，要求在掌握网页设计的基本工作流程后，了解Dreamweaver 在网页制作中的重要性。任务1.5 Dreamweaver简介简介：l工作过程1.5.1 Dreamweaver CS3概述1.5.2 Dreamweaver CS3的新增功能任务1.5 Dreamweaver简介简介：l工作过程1.5.3 Dreamweaver CS3的操作界面任务1.5 Dreamweaver简介简介：l
12、工作过程1.5.4网页文档的基本操作 l1新建网页l2保存网页l3设置新文档l4打开现有文档l5使用页面任务1.5 Dreamweaver简介简介：l任务回顾项目介绍了中文版Dreamweaver CS3的功能以及它的工作界面，菜单，工具栏、属性面板和浮动面板组。让学生通过本项目的学习，对Dreamweaver CS3有个初步的认识，为学生进行网站项目的开发做技术准备。上机实训：l目的要求 练习插入网页文本和图片；利用属性检查器查看页面元素属性；了解基本页与动态页的区别；HTML标签。上机实训：l实训内容1.练习插入网页文本和图片，制作网页01-1.html，效果。2.下载网页01-2，利用属性检查器查看页面元素属性。3.了解基本页与动态页的区别。4.制作有跑马灯效果的网页01-4.html，HTML标签，效果。下载具体要求。Thank You!
