勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
• 1.1Internet的相关知识 • 1.2网站的相关知识 • 1.3网站的规划 • 1.4网站的设计
2
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
网站设计与开发
马瑞敏 （Email：ruimin.；电话：18635578486；
微博： ）
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
1 网站设计基础
Diligent - Prudent - Dedicated - Honest
1 网站设计基础
• 1.1 internet的相关知识
勤奋、谨慎、敬业、诚信
1.1.1WWW（万维网）
Diligent - Prudent - Dedicated - Honest
（1）链接
（2）超文本
1.1.2 URL（统一资源定位器）:例子（http，telnet，news）
命名锚记
电子邮件
16
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
5 表格和样式表
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
Diligent - Prudent - Dedicated - Honest
3 Dreamweaver MX入门
• 3.1Dreamweaver MX的工作环境
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
12
Copyright 2006 Thomson Corporation
14
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
4.1 超级链接概述
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
15
Copyright 2006 Thomson Corporation
• 5.1插入表格
• 5.2表格的选定
• 5.3表格的设置及向表格 中插入图片
• 5.4样式表
17
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
5.4 样式表
• CSS是Cascading Style Sheet 的缩写，译作「层叠样式表 勤奋单、」谨慎。、是敬用业、于诚（信增强）控制网页样式D并ilig允ent许- Pr将ude样nt -式Ded信ica息ted 与- H网onest
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
• 6.1层 • 6.2行为 • 6.3时间轴
19
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
• 框架
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
页内容分离的一种标记性语言。
• a:link • a:visited • a:hover • a:active
18
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
6 层、行为和时间轴
1.2.3网页的组成要素（文字、图像、超级链接和多媒体元素）
（1）GIF （2）JPEG
4
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
• 1.3网站的规划
勤奋、谨慎、敬业、诚信
（1）目标 （2）类型 （3）主题内容 （4）风格 （5）网页系统树 （6）网页内容 （7）技术问题
（2）布局单元格：细化
Diligent - Prudent - Dedicated - Honest
24
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
8.2模板
• 主要掌握两个主要技术：
1 网站设计基础
• 1.4网站的设计
勤奋、谨慎、敬业、诚信
1.4.1基本原则（10条） 1.4.2设计技巧
Diligent - Prudent - Dedicated - Honest 1.4.3避免的问
题（5点）
（1）网站的CI形象（LOGO，色彩）
（2）确定网站的整体风格
（3）确定网站的目录结构和命名规则
Diligent - Prudent - Dedicated - Honest
21
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
附录：个人空间
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
22
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
8 页面布局和模板的应用
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
• 8.1在布局视图中对页进行布局
• 8.2模板
• 8.3库
• 8.4演示
23
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
8.1在布局视图中对页进行布局
• 主要涉及两个核心技术
勤奋、谨慎、敬业、诚信
（1）布局表格：搭框架
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
2 网站构建基础
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
9
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信 勤奋、谨慎、敬业、诚信
信息服务类型：//信息资源地址/文件路径
1.1.3客户机/服务器 V.S. 浏览器/服务器
1.1.4TCP/IP：一种网络协议 1.1.5端口：标准端口号和自由端口号
3
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
Diligent - Prudent - Dedicated - Honest
Diligent - Prudent - Dedicated - Honest
10
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
勤奋、谨慎、敬业、诚信
（1）模板的建立方式：
Diligent - Prudent - Dedicated - Honest
a)建立空白模板 b）将现有网页保存为模板
（2）可编辑区域的选择
从两个方面来深入理解：
（1）模板的意义就是提供一种统一的模式 来构建网站，达到批量生产文档的目的。
（2）模板内任何内容和链接的改动，所有 使用模板构建的文档都会自动更新
25
Copyright 2006 Thomson Corporation
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
8.3库的应用
• 库是从更微观的角度（相对模板）来定义网页元素，这些元
勤奋素、往谨慎往、也敬是业、被诚重信复利用的。
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
3 Dreamweaver MX入门
• 3.2在网页中添加文本和插入对象
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
13
Copyright 2006 Thomson Corporation
1 网站设计基础
1.1.6 internet地址和域名系统
勤奋、谨慎、敬业、诚信
Diligent - Prudent - Dedicated - Honest
IP：共32位，四个十进制数构成→域名地址：字符型
***掌握一级域名的含义
• 1.2网站的相关知识
1.2.1 网站的分类