网页制作基础
王翠平
- 1
-
- 项目一 初识网页
- 2
-
- 项目二 构建HTML网页
- 3
-
- 项目三 使用CSS美化网页
- 4
-
- 项目四 使用DIV CSS布...
- 5
-
- 项目五 创建HTML表单
- 6
-
- 基本资源
- 7
-
- 期末教学检查资料/资源菜单里...
第1课时
导入：当我们在互联网上浏览各类网页的时候，除了对那些精美的网页赞叹之外，我门是否也想自己动手建立一个属于自己的网络家园呢？自己制作网页很难吗？不！只要您在点脑上编辑过任何一种文本您就能随心所欲的建立自己的网页了。我们首先来做一个试验。您复制下面的这几行文字，并把它们粘贴在记事本中，然后保存为.htm文件，您看到了什么？一个你自己的网页就这样诞生了！
<html>
<body bgcolor="black" text="red">
<font size=5>我也能够做网页！</font>
</body>
</html>
大家是不是觉得很简单，但也很繁琐呢？有没有一种简单的方法就像WORD软件那样随心所欲的编辑呢？有！Adobe公司的Dreamweaver CS3是一款所见即所得的网页编辑工具，它把那些繁琐的代码都封装在一起，我们不用再背记和一一输入诸如color=red(颜色＝红色)这样的标记，而同样能达到我们预期的效果。
内容：
一、作品展示
给学生展示一些往届学生用Dreamweaver制作的网站作品，提高同学们对制作网页的兴趣。
看知名电子商务网站异同点分析。
二、预备知识
1、网站和网页
网站是由网页构成的具有相互关联的页面集合。
网页是网站的重要组成部分，所有的信息都通过网页这个载体传递给浏览者。
首页是一个网站的门面，设计和制作非常重要。
2、网页的类型
网页从是否执行程序来分，可分为：静态网页和动态网页。
所谓静态网页，就是网页里面没有程序代码，在网络中看到的静态网页通常是以.htm或.html为后缀结尾的，俗称HTML文件。
所谓动态网页，就是网页里面含有程序代码，运行于服务器端的程序、网页、插件和组件等都属于动态网页，它们会随客户、时间及需求的不同而返回不同的网页。在网络中看到的动态网页通常是以.asp或.php或.jsp等为后缀结尾的。并且在动态网页网址中有一个标志性的符号——“?”，如有这样一个动态网页的地址为:
https://www.pagehome.cn/ip/index.asp?id=1这就是一个典型的动态网页URL形式。
3、网页的构成元素
①文本
②图像：常用的图像类型有GIF、JPEG。
GIF分为静态GIF和动画GIF两种，支持透明背景图像，网上很多小动画都是GIF格式。但GIF只能显示256色。一般网站的LOGO和按钮图片等都使用这种格式。
例： 
JPEG是Joint Photographic Experts Group(联合图像专家组)的缩写，文件后辍名为"．jpg"或"．jpeg"，是最常用的图像文件格式，JPEG图像文件不支持透明的背景色和动画格式，它只支持24位真彩色。JPEG用于色彩丰富，形状复杂的图像。
③动画:Flash动画和GIF动画
④表格
⑤表单
⑥音频、视频
4、常用的网站设计工具
Dreamweaver 网页编辑软件
Fireworks 图形图像处理软件 “网页制作三剑客”
Flash失量动画编辑软件
5、常见的网络术语
（1）HTML：超文本标记语言
（2）IP地址：在Internet中用来唯一标记电脑在网络上的地址。IPV4地址是一组32位的二进制数，人们将其按照八个二进制数为一个字节段分成四段，每一段采用十进制直观表示。比如：192.168.4.213就是一个IP地址。
（3）域名：为了摆脱数字的单调和难以记忆的缺点，人们给Internet的主机起了“域名”。域名是一个层次结构的名字，主要用来标识服务器或网络系统。
例：mail.tsinghua.edu.cn表示清华大学的一台服务器
（4）URL（Uniform Resource Locator）
统一资源定位符URL，是对可以从因特网上得到的资源的位置和访问方法的一种简洁的表示，唯一标记一台电脑的某一资源。
这里的“资源”是指在因特网上可以被访问的任何对象，包括文件目录、文件、文档、图像、声音等，以及因特网相连的任何形式的数据。
三、Dreamweaver CS6的工作界面
1、Dreamweaver CS6的工作界面
2、上下文菜单
3、dreamweaverCS6的工作区布局：“编码器”“设计器”和“双重屏幕”
更改工作区：“窗口” “工作区布局” “编码器”
4、可视化助理：标尺和辅助线
“查看”菜单 标尺
“查看”菜单 网格
5、dreamweaver自定义
（1）自定义首选参数：“编辑” “首选参数”
（2）自定义快捷键：“编辑” “快捷键”
6、dreamweaverCS6基本操作
（1）创建新文档：“文件”“新建”
（2）保存新文档：“文件”“保存”
（3）打开现有文档：“文件”“打开”
（4）清理MicrosoftWord的HTML文件：“命令” “清理MicrosoftWord的HTML…”
四、作业
1、熟练使用dreamweaver相关功能
2、总结对网页网站认识
鲁公网安备 37110202000410号