ACCP5.0S1使用html语言开发商业站点第1章
- 格式：ppt
- 大小：3.26 MB
- 文档页数：36
下载文档原格式
合集下载
ACCP5.0 教材及电子资料更新说明
ACCP5.0教材及电子课件更新说明1教材勘误1.1见“教材勘误”文件夹2电子课件优化2.1每门课程的具体更新内容，见每门课程电子资料文件夹下“《课程名》更新说明.doc”文档2.2授课时间调整学期课程章节调整说明排课要求/OOP5原有第5章理论课授课时间由2学时调整为4学时，上机课授课时间由2学时调整为4学时，分别更新了理论课和上机课的PPT，具体修改情况详见该课程目录下的更新说明文档本章排课要求：8学时，顺序为：2学时理论→2学时上机→2学时理论→2学时上机5原有第5章理论课授课时间由2学时调整为4学时，上机课授课时间由2学时调整为4学时，分别更新了理论课和上机课的PPT，具体修改情况详见该课程目录下的更新说明文档本章排课要求：8学时，顺序为：2学时理论→2学时上机→2学时理论→2学时上机2.3新增案例1)本次课件优化新增案例100个，分布在3个学期的各门课程中。
2)新增的补充案例存放在每章的教学指导下的“新增的补充案例”文件夹中，每个案例提供案例源代码和案例描述文档，教员在授课时可以根据班级情况自愿使用。
3)新增的教学案例、上机任务，存放在每章电子资料文件夹下，并在文件夹中以“新增”标识，请教员在备课时注意查看对应章节的PPT和案例。
2.4理论课电子课件1)作业页面：每个理论课PPT最后增加了一页“课后作业”，包括“当堂作业”和“预习作业”，当堂作业分为“必做”和“选做”，请教员在授课前，完成本页PPT的内容。
2.5上机课电子课件1)作业页面：每个理论课PPT最后增加了一页“课后作业”，包括“当堂作业”和“预习作业”，当堂作业分为“必做”和“选做”，请教员在授课前，完成本页PPT的内容。
2)当堂和课后完成阶段调整：根据产品使用手册附件中规定的当堂完成阶段要求进行了更新，课后完成阶段对应的PPT部分全部放在当堂完成阶段后、“课堂总结”页之前，该阶段的“指导”或“练习”图标以灰色标识。
教员上机课实施时，先实施当堂要求完成的阶段，然后根据班级情况决定是否实施课后完成阶段。
PHP课件 第1章 PHP简介与开发工具
(2) XAMPP的安装。 下载XAMPP安装软件包后，双击该安装文件即可进入安装进程。安装过 程中只需确定安装XAMPP的路径，然后依次单击“下一步”按钮即可完成 安装。
(3) XAMPP的启动。 单击Windows操作系统的“开始”按钮，在“所有程序”中单击项目 XAMPP中的XAMPP Control Panel或者将其制成一个快捷图标置于桌面 上，然后双击该快捷图标 即可启动XAMPP。分别单击Apache和 MySQL右侧对应的Start按钮，就可以启动Apache和MySQL数据库服务 器，如下图所示。
1 PHP的发展过程
PHP是由Rasmus Lerdorf于1994年开发的，最初是用 来统计网站的访问者，后来加入了访问数据库的功能。 1995年正式发布了PHP 1.0，同年在增加了循环语句、数 组变量等新特性后发布了PHP 2.0；1997年推出PHP 3.0， 此时使用PHP的网站已超过5万个；2000年PHP 4.0(简称 PHP4)问世，PHP4的内核已大幅优化更新，拥有更强的 新功能、更丰富的函数库，PHP程序的执行速度更加快速， 此时PHP在Web开发领域掀起了颠覆性的革命。2004年又 推出了PHP5，标志着一个全新的PHP时代的到来。PHP5 的最大特点是引入了面向对象的全部机制，并且保留了向 下的兼容性。其功能更加完善，兼容性更强，稳定性上更 胜一筹。
1.1.2 PHP脚本程序工作流程
4. Web服务器 Web服务器(Web Server)也称为WWW(World Wide Web)服务器，其功能是接收和解析HTTP请求。 5. 数据库服务器 数据库服务器(Database Server)是一套为应用程序提供 数据管理服务的软件，这些服务主要包括数据管理服务 (例如，数据的添加、删除、修改、查询)、事务管理服务、 索引服务、高速缓存服务、查询优化服务、安全及多用户 存取控制服务等。 常见的数据库服务器有甲骨文公司的Oracle和MySQL、 微软公司的SQL Server、IBM公司的DB2等。 由于MySQL具有体积小、速度快、免费等特点，很多 中小型Web系统都首选MySQL作为数据库服务器。
网页设计与制作课件第1章
上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
HTML5 App商业开发实战教程章节设计_第六章 页面样式
操作4：演示单击Select an element按钮，在左侧要调整样式的界面中选择li下面的media元素
操作5：演示在element.style里面增加background-color:white样式，当前选择的media的背景色变成白色
操作6：演示将这个样式写入W文件的同名CSS文件中，使得所有media应用这个样式
教师：归纳总结
实战训练
给购物车页的商品列表增加卡片式风格样式
给仿微店应用首页的buttonGroup组件增加卡片式风格样式
动手实践
做中学
多媒体
真实系统环境
学生：实践操作
教师：巡视检查
评估
讨论
（1）讨论使用系统样式的好处
（2）展ห้องสมุดไป่ตู้学生的讨论结果
（3）考核学生结果
教师启发
讨论归纳
分数激励
多媒体
学生：思考
教师讲授
多媒体
学生：听讲
教师：布置作业、提出要求
多媒体
学生：思考
教师：演示
知识讲解
知识点1：使用系统样式，即有利于界面风格统一，又有利于实现App的换肤
知识点2：常用的排版样式包括：标题、情景文本颜色、情景背景色、文本对齐和元素对齐等样式
知识点3：常用的表单样式包括：基本样式、尺寸样式、水平排列的表单等样式
知识点4：常用的图片样式包括：响应式图片、图片形状等样式
知识点2：在Elements->Styles中查看现有样式，修改样式，查看效果
知识点3：将调整后的样式写入CSS文件
启发讲解
讨论归纳
多媒体
课件演示
学生：思考、记录笔记
教师：启发
示范操作
操作1：演示打开一级分类列表页面
操作5：演示在element.style里面增加background-color:white样式，当前选择的media的背景色变成白色
操作6：演示将这个样式写入W文件的同名CSS文件中，使得所有media应用这个样式
教师：归纳总结
实战训练
给购物车页的商品列表增加卡片式风格样式
给仿微店应用首页的buttonGroup组件增加卡片式风格样式
动手实践
做中学
多媒体
真实系统环境
学生：实践操作
教师：巡视检查
评估
讨论
（1）讨论使用系统样式的好处
（2）展ห้องสมุดไป่ตู้学生的讨论结果
（3）考核学生结果
教师启发
讨论归纳
分数激励
多媒体
学生：思考
教师讲授
多媒体
学生：听讲
教师：布置作业、提出要求
多媒体
学生：思考
教师：演示
知识讲解
知识点1：使用系统样式，即有利于界面风格统一，又有利于实现App的换肤
知识点2：常用的排版样式包括：标题、情景文本颜色、情景背景色、文本对齐和元素对齐等样式
知识点3：常用的表单样式包括：基本样式、尺寸样式、水平排列的表单等样式
知识点4：常用的图片样式包括：响应式图片、图片形状等样式
知识点2：在Elements->Styles中查看现有样式，修改样式，查看效果
知识点3：将调整后的样式写入CSS文件
启发讲解
讨论归纳
多媒体
课件演示
学生：思考、记录笔记
教师：启发
示范操作
操作1：演示打开一级分类列表页面
教学课件 HTML+CSS+JavaScript网页设计
第1章 网页设计基础知识
本章概述 本章的学习目标 主要内容
Hale Waihona Puke 第1页本章概述• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第4页
1.1 网页的基本概念
• 随着Internet的不断发展，网页已经被越来越多的人所熟悉。那么 什么是网页，网页有是如何搭建并呈现在用户面前的呢？
• Internet，中文正式译名为因特网，又叫做国际互联网。Internet 采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个 Internet上。
• HTML是最早的超文本标记语言，它的发展经历了HTML 1.0、2.0、3.2、4.0、 4.01和5几个版本，在发展过程这，尤其是从HTML4.0开始淘汰了很多标记和 属性，本书对这些淘汰的标记和属性不再赘述。
第12页
CSS层叠样式表
• 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格 式化。
第11页
HTML概述
• HTML的全称是超文本标记语言(Hyper Text Markup Language)，是Internet上用 于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件。
• HTML文件是纯文本的文件格式，所谓的超文本，主要是指它的超链接功能， 通过超链接将图片、声音和影视及其他网页或其他网站链接起来，构成内容 丰富的Web页面。
本章概述 本章的学习目标 主要内容
Hale Waihona Puke 第1页本章概述• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第4页
1.1 网页的基本概念
• 随着Internet的不断发展，网页已经被越来越多的人所熟悉。那么 什么是网页，网页有是如何搭建并呈现在用户面前的呢？
• Internet，中文正式译名为因特网，又叫做国际互联网。Internet 采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个 Internet上。
• HTML是最早的超文本标记语言，它的发展经历了HTML 1.0、2.0、3.2、4.0、 4.01和5几个版本，在发展过程这，尤其是从HTML4.0开始淘汰了很多标记和 属性，本书对这些淘汰的标记和属性不再赘述。
第12页
CSS层叠样式表
• 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格 式化。
第11页
HTML概述
• HTML的全称是超文本标记语言(Hyper Text Markup Language)，是Internet上用 于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件。
• HTML文件是纯文本的文件格式，所谓的超文本，主要是指它的超链接功能， 通过超链接将图片、声音和影视及其他网页或其他网站链接起来，构成内容 丰富的Web页面。
HTML5+CSS3网页设计与制作单元1 站点创建与制作商品简介页面
（4）超级链接 超级链接是Web 网页的主要特色，是指从一个网页指向另一个目的端的链接。超级链接
可以是文本、按钮或图片，鼠标指向超级链接位置时，其指针会变成小手形状。
（5）导航栏 导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方
便地浏览网页。导航栏一般有4 种常见的布局位置：页面的左侧、右侧、顶部和底部。
图1-23 【管理站点】对话框
1．利用【管理站点】对话框创建一个名称为“快乐购”的站点
在【管理站点】对话框中单击右下角的【新建站点】按钮，打开图1-24 所示【站点设置对 象】对话框。参照“任务1-1-3”所述的步骤创建一个名称为“快乐购”的站点，该站点创建完 成后，包含两个站点的【管理站点】对话框如图1-25 所示。
本章导读
The chapter’s introduction
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、 样式表文件、网页素材进行统一管理。如果使用了外部文件，Dreamweaver 就会自 动检测并提示是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹 或文件重新命名，系统会自动更新所有的链接，以保证原有链接关系的正确性。
任务描述
①在本地硬盘（例如D 盘）中创建一个文件夹“网页设计与制作案例”。 ②创建一个名称为“易购网”的站点，保存在文件夹“网页设计与制作案例”中。
任务实施
1．创建所需的文件夹 在本地硬盘（例如D 盘）中创建一个文件夹“网页设计与制作案例”。
2．创建站点“易购网”
在Dreamweaver CC 的主界面中，选择【站点】→【新建站点】菜单命令，如图1-20 所 示，打开图1-21 所示的【站点设置】对话框。
2．认识网页的基本组成元素
可以是文本、按钮或图片，鼠标指向超级链接位置时，其指针会变成小手形状。
（5）导航栏 导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方
便地浏览网页。导航栏一般有4 种常见的布局位置：页面的左侧、右侧、顶部和底部。
图1-23 【管理站点】对话框
1．利用【管理站点】对话框创建一个名称为“快乐购”的站点
在【管理站点】对话框中单击右下角的【新建站点】按钮，打开图1-24 所示【站点设置对 象】对话框。参照“任务1-1-3”所述的步骤创建一个名称为“快乐购”的站点，该站点创建完 成后，包含两个站点的【管理站点】对话框如图1-25 所示。
本章导读
The chapter’s introduction
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、 样式表文件、网页素材进行统一管理。如果使用了外部文件，Dreamweaver 就会自 动检测并提示是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹 或文件重新命名，系统会自动更新所有的链接，以保证原有链接关系的正确性。
任务描述
①在本地硬盘（例如D 盘）中创建一个文件夹“网页设计与制作案例”。 ②创建一个名称为“易购网”的站点，保存在文件夹“网页设计与制作案例”中。
任务实施
1．创建所需的文件夹 在本地硬盘（例如D 盘）中创建一个文件夹“网页设计与制作案例”。
2．创建站点“易购网”
在Dreamweaver CC 的主界面中，选择【站点】→【新建站点】菜单命令，如图1-20 所 示，打开图1-21 所示的【站点设置】对话框。
2．认识网页的基本组成元素
网页设计与制作实用教程(第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．综合门户网站 综合门户网站具有受众群体范围广泛，访问量高、信 息容量大等特点，包含时尚生活、时事新闻、运动娱 乐等众多栏目。综合门户网站定位明确，以文字链接 为主要内容、版式和色彩较为直观、简洁。
ASP NET 4.5动态网站开发基础教程(第1章)
第25页
2014年11月27日
4.5动态网站开发基础教程
清华大学出版社
PHP现在是一个开放源码的产品，其官方 网站是 http : / / ，用户可以 自由下载。 HP程序可以运行在UNIX、Linux及 Windows操作系统上，对客户端浏览器也 没有特殊要求。PHP、MySQL数据库和 Apache Web服务器是一个比较好的组合。
第22页
2014年11月27日
4.5动态网站开发基础教程
清华大学出版社
1.2.2 的优点
威力和灵活性 简易性 可管理性 可伸缩性 自定义性和扩展性 安全性
2014年11月27日
第23页
4.5动态网站开发基础教程
清华大学出版社
1.2.3 常见的网络程序设计技术
第17页
4.5动态网站开发基础教程
清华大学出版社
1.接受请求 发送请求 2.找到动态网页 3.执行程序代码， 生 成静态网页 返回网页 客户端 4.发送静态网页 服务器端
2014年11月27日
第18页
4.5动态网站开发基础教程
清华大学出版社
BBS论坛
动态网页示例
留言板
第21页
2014年11月27日
4.5动态网站开发基础教程
清华大学出版社
的历史
2002年推出的新一代体系结构——Microsoft .NET的一 部分，用来在服务器端构建功能强大的Web应用，包括 Web窗体（Web Form）和Web服务（Web Services） 两部分。 2003年，Microsoft公司发布了Visual Studio .NET 2003 （简称VS 2003），提供了在Windows操作系统下开发 各类基于.NET 框架的全新的应用程序开发平台。 2005年，.NET框架从1.0版升级到2.0版，Microsoft公司 发布了Visual 2005(简称VS 2005)。相应的 1.0也从得到了升级，成为 2.0。它修 正了以前版本中的一些Bug并在移动应用程序开发，代码 安全以及对Oracle数据库和ODBC的支持等方面都做了很 多改进。 2008年， Visual 2008(简称VS 2008)问世了， 相应的从2.0版升级到3.5版。
2014年11月27日
4.5动态网站开发基础教程
清华大学出版社
PHP现在是一个开放源码的产品，其官方 网站是 http : / / ，用户可以 自由下载。 HP程序可以运行在UNIX、Linux及 Windows操作系统上，对客户端浏览器也 没有特殊要求。PHP、MySQL数据库和 Apache Web服务器是一个比较好的组合。
第22页
2014年11月27日
4.5动态网站开发基础教程
清华大学出版社
1.2.2 的优点
威力和灵活性 简易性 可管理性 可伸缩性 自定义性和扩展性 安全性
2014年11月27日
第23页
4.5动态网站开发基础教程
清华大学出版社
1.2.3 常见的网络程序设计技术
第17页
4.5动态网站开发基础教程
清华大学出版社
1.接受请求 发送请求 2.找到动态网页 3.执行程序代码， 生 成静态网页 返回网页 客户端 4.发送静态网页 服务器端
2014年11月27日
第18页
4.5动态网站开发基础教程
清华大学出版社
BBS论坛
动态网页示例
留言板
第21页
2014年11月27日
4.5动态网站开发基础教程
清华大学出版社
的历史
2002年推出的新一代体系结构——Microsoft .NET的一 部分，用来在服务器端构建功能强大的Web应用，包括 Web窗体（Web Form）和Web服务（Web Services） 两部分。 2003年，Microsoft公司发布了Visual Studio .NET 2003 （简称VS 2003），提供了在Windows操作系统下开发 各类基于.NET 框架的全新的应用程序开发平台。 2005年，.NET框架从1.0版升级到2.0版，Microsoft公司 发布了Visual 2005(简称VS 2005)。相应的 1.0也从得到了升级，成为 2.0。它修 正了以前版本中的一些Bug并在移动应用程序开发，代码 安全以及对Oracle数据库和ODBC的支持等方面都做了很 多改进。 2008年， Visual 2008(简称VS 2008)问世了， 相应的从2.0版升级到3.5版。
商务网页设计课件-HTML
（4）Flash动画制作软件 动画或动态图片是网页的重要组成部分，充分合理地使用 Flash程序来设计网页元素，往往可达到意想不到的效果。
（5）Photoshop图像处理软件 Photoshop用于对网页图片进行润色或特殊效果处 理，是一款网页制作必备的软件。
2HTML基础
1.关于HTML
用于网页的标记语言有HTML、XHTML和XML等。使用这样的语言代码可 以将网页的文字、图片或数据等信息进行分类、排版，最终显示给使用 者浏览。
2HTML基础
6.HTML 样式 style 属性用于改变 HTML 元素的ML元素的样
式的通用方法。样式是 HTML4引入的，它是一种新 的改变HTML元素样式的方式。通过HTML样式，能 够通过使用style 属性直接将样式添加到 HTML 元素 ，或者间接地在独立的样式表中（CSS 文件）进行定 义。
3网页相关文件命名规范
4.注释的写法
/* Footer */ 内容区
/* End Footer */
3网页相关文件命名规范
5.id的命名规范 （1）页面结构
容器：container
导航：nav
页头：header
侧栏：sidebar
内容：content/container 栏目：column
页面主体：main
2HTML基础
4.HTML元素
HTML元素指的是从开始标签（start tag）到结束标签（end tag） 的所有代码。开始标签常被称为开放标签（opening tag），结 束标签常称为闭合标签（closing tag）。
（1）HTML元素以开始标签起始 （2）HTML元素以结束标签终止 （3）元素的内容是开始标签与结束标签之间的内容 （4）某些 HTML元素具有空内容（empty content） （5）空元素在开始标签中进行关闭（以开始标签的结束而结束） （6）大多数 HTML元素可拥有属性
（5）Photoshop图像处理软件 Photoshop用于对网页图片进行润色或特殊效果处 理，是一款网页制作必备的软件。
2HTML基础
1.关于HTML
用于网页的标记语言有HTML、XHTML和XML等。使用这样的语言代码可 以将网页的文字、图片或数据等信息进行分类、排版，最终显示给使用 者浏览。
2HTML基础
6.HTML 样式 style 属性用于改变 HTML 元素的ML元素的样
式的通用方法。样式是 HTML4引入的，它是一种新 的改变HTML元素样式的方式。通过HTML样式，能 够通过使用style 属性直接将样式添加到 HTML 元素 ，或者间接地在独立的样式表中（CSS 文件）进行定 义。
3网页相关文件命名规范
4.注释的写法
/* Footer */ 内容区
/* End Footer */
3网页相关文件命名规范
5.id的命名规范 （1）页面结构
容器：container
导航：nav
页头：header
侧栏：sidebar
内容：content/container 栏目：column
页面主体：main
2HTML基础
4.HTML元素
HTML元素指的是从开始标签（start tag）到结束标签（end tag） 的所有代码。开始标签常被称为开放标签（opening tag），结 束标签常称为闭合标签（closing tag）。
（1）HTML元素以开始标签起始 （2）HTML元素以结束标签终止 （3）元素的内容是开始标签与结束标签之间的内容 （4）某些 HTML元素具有空内容（empty content） （5）空元素在开始标签中进行关闭（以开始标签的结束而结束） （6）大多数 HTML元素可拥有属性
《PHP Web应用开发案例教程》教学课件 第1章-初识php
〔37行〕将ServerRoot "c:\Apache24"改成ServerRoot "D:\phpEnv\Apache24"
〔2〕修改主机名称ServerName： 〔220行〕将ServerName example :80前面的#去掉，该属性在从命令行启动 Apache时需要用到。
20
1.2.1 安装常规运行环境
〔277行〕<IfModule dir_module>
</IfModule> 改为
<IfModule dir_module>
</IfModule>
22
1.2.1 安装常规运行环境
〔5〕设定ServerScript目录： 〔362行〕ScriptAlias\cgi-bin\ "c:\Apache24\cgi-bin/" 改为 ScriptAlias \cgi-bin\ "D:\phpEnv\Apache24\cgi-bin"
13
1.1.3 PHP的应用领域
在互联网高速开展的今天，PHP的应用领域非常广泛，主要包括 以下几方面：
中小型网站的开发。 Web办公管理系统的开发。 硬件管控软件的GUI〔Graphical User Interface，图形用户接 口〕开发。 电子商务应用开发。 Web应用系统开发。 多媒体系统开发。 企业级应用开发。
1.2.1
安装常规运行环境
1.2.2
集成软件简介
1.2.3
PHP常用开发工具
1.2.4
PHP参考手册
17
1.2.1 安装常规运行环境
Windows操作系统是目前世界上使用最广泛的操作 系统，本节主要介绍在Windows 7下如何安装和配置 PHP的开发与运行环境。大致分3步：安装Apache，安 装PHP扩展，安装MySQL数据库。此处只介绍前两步的 操作，MySQL数据库将在第11章用到时进行安装。
〔2〕修改主机名称ServerName： 〔220行〕将ServerName example :80前面的#去掉，该属性在从命令行启动 Apache时需要用到。
20
1.2.1 安装常规运行环境
〔277行〕<IfModule dir_module>
</IfModule> 改为
<IfModule dir_module>
</IfModule>
22
1.2.1 安装常规运行环境
〔5〕设定ServerScript目录： 〔362行〕ScriptAlias\cgi-bin\ "c:\Apache24\cgi-bin/" 改为 ScriptAlias \cgi-bin\ "D:\phpEnv\Apache24\cgi-bin"
13
1.1.3 PHP的应用领域
在互联网高速开展的今天，PHP的应用领域非常广泛，主要包括 以下几方面：
中小型网站的开发。 Web办公管理系统的开发。 硬件管控软件的GUI〔Graphical User Interface，图形用户接 口〕开发。 电子商务应用开发。 Web应用系统开发。 多媒体系统开发。 企业级应用开发。
1.2.1
安装常规运行环境
1.2.2
集成软件简介
1.2.3
PHP常用开发工具
1.2.4
PHP参考手册
17
1.2.1 安装常规运行环境
Windows操作系统是目前世界上使用最广泛的操作 系统，本节主要介绍在Windows 7下如何安装和配置 PHP的开发与运行环境。大致分3步：安装Apache，安 装PHP扩展，安装MySQL数据库。此处只介绍前两步的 操作，MySQL数据库将在第11章用到时进行安装。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
无序列表语法
预格式文本<PRE>标签 标签 预格式文本
如何实现如下图所示的页面中的文字效果？ 如何实现如下图所示的页面中的文字效果？
使用<PRE> 标签可以实现 使用
如何使用预格式文本<PRE>标签 标签 如何使用预格式文本
查看源代码
<PRE> <IMG src="images/QQ.JPG" width="159" height="133" align="LEFT">
网页页面中出现乱码，那如何消除乱码使其正常显示？ 网页页面中出现乱码，那如何消除乱码使其正常显示？
使用<META>标签 标签 使用
简体中文： 简体中文：gb2312 繁体中文： 繁体中文：big5 纯英文网页： 纯英文网页：iso-8859-1 <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>网页标题 网页标题</TITLE> 网页标题 </HEAD> 可以避免页面 中的乱码
链接到其他页面
单击” 免费注册 免费注册]” 单击”[免费注册 之后链接到的页面
页面链接<A>标签 标签 页面链接
在同一个文件夹下有两个html文件，从一个文件超 文件， 在同一个文件夹下有两个 文件 链接到另一个文件的路径有几种方式？ 链接到另一个文件的路径有几种方式？
两种方式： 两种方式：相对路径和绝对路径
图像与文本的对齐方式
<IMG align="middle">
图像与文本居中对 齐,还可以取 还可以取 top, bottom 值
查看源代码
…. 图像和文本居 <BODY> 中对齐 <A href="star.html"> <IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" /> </A>请点击广告进入明星专区 请点击广告进入明星专区 </BODY> ……
本章任务
制作图文并茂的“广告” 制作图文并茂的“广告”页面 查看源代码
本章目标
会使用HTML的基本结构创建网页 的基本结构创建网页 会使用 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转
HTML文件的基本结构 文件的基本结构
HTML文档的结构 文档的结构 查看源代码
腾讯-QQ币/QQ幻想 元卡 币 幻想-30元卡 腾讯 幻想 一 口 价：26.45元 元 运 费：卖家承担运费 剩余时间： 天 剩余时间：5天 宝贝类型： 宝贝类型： 全新 卖主声明：货到付款，可试用 天 卖主声明：货到付款，可试用10天！ </PRE> HTML中代码格式与浏 中代码格式与浏 览器中显示效果一样
字体、 字体、字号相关标签
查看源代码
...... <BODY> <P> <FONT size="+2" color="red" > 手机充值、 卡 电话卡 手机充值、IP卡/电话卡 </FONT><BR /> 移动 | 100 | 联通 | 50</P> 移动 联通 Copyright © 2007 "淘宝网 淘宝网" All rights. 淘宝网 </BODY> 空格效果 ……
<HTML> 网页标题 <HEAD> <TITLE>我的第一个网页 </TITLE> 我的第一个网页 </HEAD> <BODY > Hello World! </BODY> </HTML> 网页内容， 网页内容，可以是 文本、 文本、图像等
<HEAD>头部部分 头部部分 HTML 网页 <BODY>主体部分 主体部分
字体、 字体、字号相关标签
标题标签
<H#> ... </H#> #=1, 2, 3, 4, 5, 6 说明： 说明：<H1>到<H6> 到 字体大小依 次递减
…… <BODY> <H1>一级标题 一级标题</H1> 一级标题 <H2>二级标题 二级标题</H2> 二级标题 <H3>三级标题 三级标题</H3> 三级标题 <H4>四级标题 四级标题</H4> 四级标题 <H5>五级标题 五级标题</H5> 五级标题 <H6>六级标题 六级标题</H6> 六级标题 </BODY> ……
页面背景色或背景图像
网页背景色彩 网页背景图像
<BODY bgcolor="#FFCCFF“ background="back_image.GIF" > Hello World！ ！ </BODY>
查看源代码
…… <BODY bgcolor="#FFCCFF“> Hello World! </BODY> ……
这部分包括标题和其他说明信息。 这部分包含文本、图像和链接。 。包括在 <BODY>…</BODY> 标签内 这部分包括标题和其他说明信息 这部分包含文本、图像和链接。它包括在HTML 文档的开始和结束 <HTML>…</HTML>标签标记 <HEAD>…</HEAD> 标签标记
使用记事本创建网页
使用记事本创建网页 使用记事本创建网页的步骤： 使用记事本创建网页的步骤：
1、打开记事本 、 2、输入HTML代码 、输入 代码 3、保存为*.html或*.htm文件，注意格式问题 、保存为 文件， 或 文件 4、打开网页预览效果 、
演示示例2 演示示例2：如何在记事本里创建网页
<META>标签 标签
有序列表
无序列表
用了预先定义 好的格式
如何使用内容分隔<HR>标签 标签 如何使用内容分隔
线的厚度值 线的颜色 线的宽度
<HR size="5" color="red" width="300"> 查看源代码
…… <BODY> <HR size="5" color="red" width="300"> <HR size="10" color="black" width="200"> <HR size="5" color="#0000FF" width="50%"> </BODY> ……
为图像添加的提示性文字
查看源代码
…… <BODY> <IMG src="images/adv_2.jpg" alt="明星演唱会开幕 明星演唱会开幕" 明星演唱会开幕 width="300"height="150"> </BODY> ……
鼠标移到图像上， 鼠标移到图像上，出 现的提示性文字
图像标签
第一章
HTML的基本标签 的基本标签
课程地位
Prev
Project1:+WinForms C/S SQL Base C#/WinForms
STB Logic Java HTML
SQL Advance
.Net/OOP /Three Tier
Java OOP JSP
JavaScript Project2:所示效果对应的html代码 编写如下图所示效果对应的 代码
字号大小为3 字号大小为
练习代码
练习答案
文字布局
内容分隔<HR>标签 内容分隔 标签 项目列表和编号
有序列表<OL> 有序列表 无序列表<UL> 无序列表
水平分隔线 <HR>
预格式文本<PRE>标签 标签 预格式文本
*.swf *.bmp
网页动画 桌面墙纸
Flash photoshop
支持 24 位颜色深度，不支持压缩 位颜色深度， 兼容性好 容量大
图像标签
图像的基本语法
图像的 位置 图像的 宽度 图像的 高度
<IMG src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕 > 明星演唱会开幕" 明星演唱会开幕
<HR> 标签用于在页面上绘制水平线
如何使用列表
查看源代码
<H4>注册步骤：</H4> 注册步骤： 注册步骤 <UL> <OL type="1" > <LI>列表项内容 </LI> 列表项内容 <LI>填写信息 填写信息</LI> 填写信息 <LI>收电子邮件 收电子邮件</LI> 收电子邮件 …… <LI>注册成功 </LI> 注册成功 </UL> </OL> 新人上路指南 有序列表语法 <UL type="circle"> <OL > <LI>如何激活会员名？ </LI> 如何激活会员名？ 如何激活会员名 <LI>列表项内容 列表项内容 <LI>如何注册淘宝会员？ </LI> 如何注册淘宝会员？ 如何注册淘宝会员 </LI> <LI>注册时密码设置有什么要求？</LI> 注册时密码设置有什么要求？ 注册时密码设置有什么要求 …… <LI>支付宝认证 支付宝认证</LI> 支付宝认证 </OL> </UL>