第1章 网页制作基础
学习目标
了解HTML的组成和语法
了解网页制作的常用软件
掌握网页制作软件的启动和退出方法
目标任务&项目案例
启动Photoshop CS3 退出Photoshop CS3
随着Internet的不断发展，网页已经成为重要的信息载体。在动手制作网页前，首先应了解网页的组成、HTML的基本语法和制作网页的常用软件。本章将主要讲解网页制作的基本知识，为后面的学习打下坚实的基础。
1.1 网页制作基础知识
Internet中有许多漂亮、美观的网页，要制作出这样的网页，必须先了解什么是网页，网页的基本组成是怎样的。下面将进行详细讲解。
1.1.1 网页简介
网页又称Web页，一般都包含图像、文字和超链接等元素。如图1-1所示即为新浪网首页。
按表现形式的不同，网页可分为静态网页和动态网页。其含义和特点分别介绍如下。 静态网页：静态网页是标准的HTML文件，它是采用HTML（超文本标记语言）编写的，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或.htm。
动态网页：动态网页是指具有动态效果的网页，由ASP、PHP、JSP和CGI等程序组成。
图1-1 新浪网首页
提示：
动态网页与静态网页在许多方面是一致的。它们都是无格式的ASCII码文件，都包含着HTML代码，都可以包含用脚本语言（如JavaScript或VBScript）编写的程序代码，都存放在Web服务器上，收到客户请求后都会把响应信息发送给Web浏览器。
按网页在网站中的位置，可将其分为内页（Web Page）和主页（Home Page）。通常所说的主页是指访问网站时看到的第一页，即首页。首页的名称是特定的，一般为、、、、或等。内页是指与主页相链接的其他页面，即网站内部的页面。
1.1.2 什么是HTML
《网页设计与制作》教案
第一章：网页设计基础
1.1 教学目标
让学生了解网页设计的基本概念和原则
让学生掌握网页设计的流程和方法
1.2 教学内容
网页设计的概念和定义
网页设计的原则和要素
网页设计的流程和方法
1.3 教学方法
讲授法：讲解网页设计的概念和原则
实践法：学生动手实践设计简单的网页
1.4 教学评价
学生能回答出网页设计的概念和定义
学生能理解并运用网页设计的原则和要素
学生能独立完成简单的网页设计
第二章：HTML与CSS基础
2.1 教学目标
让学生了解HTML和CSS的基本概念和作用
让学生掌握HTML和CSS的基本语法和用法
2.2 教学内容
HTML的基本概念和语法 CSS的基本概念和语法
HTML和CSS的综合应用
2.3 教学方法
讲授法：讲解HTML和CSS的基本概念和语法
实践法：学生动手实践编写HTML和CSS代码
2.4 教学评价
学生能回答出HTML和CSS的基本概念和作用
学生能理解并运用HTML和CSS的基本语法和用法
学生能独立完成简单的HTML和CSS代码编写
第三章：网页布局与排版
3.1 教学目标
让学生了解网页布局和排版的基本原则和方法
让学生掌握使用HTML和CSS进行网页布局和排版的技术
3.2 教学内容
网页布局的基本原则和方法
网页排版的基本原则和方法
使用HTML和CSS进行网页布局和排版的技术
3.3 教学方法
讲授法：讲解网页布局和排版的基本原则和方法
实践法：学生动手实践进行网页布局和排版
3.4 教学评价
学生能回答出网页布局和排版的基本原则和方法 学生能理解并运用HTML和CSS进行网页布局和排版的技术
学生能独立完成具有良好布局和排版的网页设计
第四章：网页动画与交互
4.1 教学目标
让学生了解网页动画和交互的基本概念和原理
让学生掌握使用HTML和CSS实现网页动画和交互的技术
4.2 教学内容
网页动画的基本概念和原理
第1章网页设计基础
•教学内容：在具体设计制作网页前，不仅要清 楚网页中的基本概念、网页的基本构成元素， 了解网页制作常用工具和技术，还要了解网站 建设的基本流程。通过本章的学习，可以了解 网页设计制作相关的基础知识和网站建设的基 本流程。
• 教学重点
• 网络的基础矢II识
• 掌握网页版面布局设计
• 网页色彩设计
•• 教学难点
• 三剑客应用方向和设计就业领域
• 商业网站网页布局方法和版式布局
• 网站建设的基本流程教学目标和基本要求
•教学时间：本章共分 ___________
课时
•教学方法
案例教学 多媒体教学 理论面授
•教学素材
课程范例文件：sample\第1章\ 练习文件：exercise\第1章\
本章各节课时分配及链接
1・1网络的基础知识——( )课时
1・3网页色彩设计——()课时 1・4网页三剑客应用方向和设计、就业领域一
—()课时
1・7网站建设的基本流程一()课时 本章小结 1・2网页版面布局设计 )课T.5商业网站网页布局方法- )课时
1・6典型)课思考与练习
tl网络的基础知识
与网络相关的基本概念非常多，本节就來讲述 一些常见的基本概念，让读者对网页设计有个基本 的了解，从而为以后的学习打下良好的基础。
LL 1认识互联网
Internet是一个全球性的计算机互联网络，中文 名称为“因特网”，它集现代通信技术和现代计算机 技术于一体，是计算机之间进行国际信息交流和实 现资源共享的良好手段。Internet将各种各样的物理 网络连接起来，构成一个整体，而不论这些网络类 型的异同、规模的大小和地理位置的差异。
版面指的是用户在浏览器中看到的一个完整页 面（可以包含框架和层）。因为每个用户所使用的 显示器分辨率不同，所以同一个页而的大小可能出 现640X480像素，800X600像素，1024X768像素 等不同尺寸。布局就是指以最适合用户浏览的方式 将图片和文字排放在页面的不同位置。1X1网页版面布局原则
第一至三章网页设计与制作基础
第一章
1.什么是网络协议，内容主要包括？
网络协议是一系列通信规则的总称，主要包括：1.用户数据与控制信息的结构和格式；2.需要发出的控制信息以及相应要完成的操作与响应；3.对事件实现顺序的详细说明等三部分内容。
2.网络中存在着多种级别的协议。总的来说可以分为？
1、硬件协议：定义了硬件设备如何运作以及如何协同工作。
2、软件协议：程序之间的通信是通过软件协议完成的。
第二章
一、在网站设计时还需要考虑以下基本原则：
1.网页内容要便于阅读；
2.站点内容要精、专和及时更新；
3.注重色彩搭配；
4.考虑带宽；
5.要适当考虑不同游览器、不同分辨率的情况；
6.提供交互性；
7.简单即为美。
二、整个站点设计大体分为八个部分？
1、初始商讨；
2、构思；
3、综合内容；
4、页面布局和导航；
5、图形制作；
6、内容流程；
7、测试；
8、验收交付；
三、有关商业网站的风格特征？
1.公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小；
2.可以采用主题图形、产品广告来突出公司形象与风格。
3.主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片、文字之间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小；
4.不要把主要栏目和次要栏目都显示在同一个页面上；
5.商业网站一般都有固定的栏目页面，如：Support，service，About us等；
6.必须建立站内搜索引擎，以便浏览者在站内查找所需要的信息。
四、非商业组织的网站风格？
1.强调页面的主色调；
2.主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼；
3.超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎；
4.信息看板很重要，因为非商业组织的网站更新不如商业网站频繁，始终如一的画面显得枯燥，所以经常去更新信息查看板，将增加访问者的访问兴趣。
