html+css网页设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<img src=“ />
利用img标记的width和height属性设置图像 宽度与高度：
src="1.jpg" />
如： <img width="200“ height="150" border="5"
注： 1. width是设置图片宽度 2. Height是设置图片高度 3. border是设置图像边框的粗细。
<html> <head> <title>标题标记</title> </head> <body> 以下为标题样式： <h1>H1标题大小</h1> <h2>H2标题大小</h2> <h3>H3标题大小</h3> <h4>H4标题大小</h4> <h5>H5标题大小</h5> <h6>H6标题大小</h6> </body> </html>
<p>互联网发展的起源</p> <p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA 资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个 大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。 </p>
2、设置标题标记：<h1>…<h6>:
<h1>…<h6>共6个标题标记，用于把文本 显示为不同级别的标题。
三、网页是什么---认识HTML
什么是HTML超文本标记语言： 如何查看一个网页的HTML代码：
四、制作我们的第一个网页
打开记事本程序，输入以下html代码：
<html>
<head>
<title>我的第一个网页</title>
头部：提供关于当前文档的信息
</head>
<body>
<p>厉害！这是我的第一个网页。</p>
<img src=“1.jpg” /> </body>
主体：提供文档的内容
</html>
把记事本文档保存为1.html，注意后缀htm或html 表明了它是一个html文档，然后用浏览器显示。
五、制作网页需要什么工具
浏览器：用于浏览网站的程序。
网页制作工具：
比如Dreamweaver 、 Microsoft FrontPage等。
2.
设置文字列表：
3.
在网页中添加图像：img标记
网页中的图像格式 一个简单图片的网页 使用路径
相对路径 绝对路径
使用img标记属性设置图片大小：width和height属性 使用img标记alt属性设置图像的替换文本：
4.
利用title标记设置网页窗口标题：
5.
html标记与html属性
<blockquote>用于对段落进行缩进显示：
<html> <head> <title>标题标记</title> </head> <body> <h1>互联网发展的起源</h1> <blockquote> <p>1969年，为了保障通信联络，美国国防部高级研究计划 署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美 国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的 新纪元。</p> </blockquote> </body> </html>
用html建立超链接；html创建表格 CSS核心基础；用CSS设置文本 用CSS设置图像 ；CSS盒子模型 盒子浮动与定位 ；用CSS设置表格样式 用CSS设置超链接与导航菜单 ；用CSS建 立表单
2
2 2 2 2 2
2
2 2 2 2 2
17
19-21
行为特效的添加与修改
网页设计综合案例 合计
2
2 18
<body>
<img
</body>
src=“1.jpg" />
注：
Img标记用于在网页中插入图片 Src属性用于指定图片所在的路径和名称，此例中图片 和网页文件是处于同一个文件夹下，所以省略了路径。 那么，当图片与网页不在同一个文件夹下，又怎么表 示文件的路径呢？
文件路径的表达：分为两种情况
第2章、HTML文件结构
一个网页可包含文本、图像、表格，我们 把这些内容称为网页元素。 元素构成了HTML文档，并告知浏览器如何 呈现网页。
元素是文本、图像、表格等。 元素由首标记、内容（content）和尾标记构成。
“标记”是什么？
标记指示元素的起始与结束。 所有标记都具有相同的格式：以小于号“<”开头，以 大于号“>”结尾。 网页有两种标记——首标记和尾标记。它们唯一的区 别在于，尾标记多一条斜杠“/。你通过把内容放在首 标记和尾标记之间来对内容进行标记。 如：
<p>这是一行文字</p>
HTML主要包含各种各样的元素，所以，学习 HTML，就是学习使用各种标记来显示网页元素。
举例说明
b标记的作用是，告诉浏览器介于标记<b> 和</b>之间的文本应以粗体显示。（这里 的“b”是“粗体bold”的意思。） 例1：
<b>显示粗体文字</b>
该例在浏览器中将显示如下：
6、滚动字幕标记：<marquee>
<marquee>标记用于内容的滚动显示；
<html> <head> <title>无标题文档</title> </head> <body> <marquee><h1>互联网发展的起源</h1></marquee> </body> </html>
还可以设置marguee标记的属性来修改滚动方向、滚 动方式以及内容的背景颜色。如：
站点设计思想及内容介绍、 站点结构图、 网上空间网址 注明原创的动画和图像及所在的页面 本课程收获 自己要改进的地方
来自百度文库
二、站点设计流程：
确定题目，设计出最初层次和划分每个页面的内容与 布局 创建一个本地站点，进行设计，并预先收集页面素材 和文字资料。 申请一个网上空间，自学FTP上传软件的使用 在本地站点调试通过，确保每个链接成功。 用FTP上传到网上空间 写报告（用word文档保存） 把站点和报告一起打包成.RAR或.ZIP，要求5M以下， 发邮件给老师。
3、文字水平居中标记：<center>
<center>标记：使得内容在浏览器中间开始 显示
<html> <head> <title>插入图片</title> </head> <body> <center> <p>互联网发展的起源</p> </center> </body> </html>
4、设置文字段落缩进标记：<blockquote>
显示粗体文字
接下来，我们正式学习html
常用的html标记 各标记的属性
第3章、用html设置文本和图像
1.
文本排版
分段标记<p>与段内换行标记<br>： 设置标题标记：<h1>…<h6>: 文字水平居中标记：<center> 设置文字段落缩进标记：<blockquote> 设置网页背景音乐标记：<bgsound> 滚动字幕标记：<marquee> 建立无序列表：<ul> 建立有序列表：<ol>
如果图片文件就在本网站内部，那么要以显示 该图像的网页文件为起点，通过层级关系描述 图像位置，我们称这为相对路径。 如果图像不在本网站内部，那么通常以http:// 开头的URL作为文件的路径。
下面举例说明相对路径的使用：
假设网站中有一个网页名为1.html，还有一个图像文件名为 1.jpg，现在你要在网页中插入该图像，根据图像所在位置 不同，其路径也有不同的表示方法：
看书：课本第1、2、3章，并上机实现课本例子； 上机实验题：
实验要求
平时作业：每周上机课提交上一周理论课的实验 作业！ 独立规划和设计一个网站，内容不限。
掌握网页设计工具Dreamweaver的使用。 掌握用ftp软件发布站点。 写一份《综合设计报告》：包含
控制p标记的水平位置：align属性： 控制body标记的网页背景颜色或图片：bgcolor、background。 设置文字字体效果<font>标记及其属性：face、color、size等 属性
1、分段标记<p>与段内换行标记<br>：
从word中复制一段文字到代码窗，并用浏 览器预览，可看到浏览器会忽略掉原文中 所有的空格和换行。 要使得文字在浏览器中分段或换行，需要 用<p> 和<br>标记：
<ol>以下是有序列表 <li>列表第1项</li> <li>列表第2项</li> <li>列表第3项</li> </ol>
9、在网页中添加图片：<img>标记
网页中的图片格式：
Gif：只支持256色图像，支持透明色，文件很 小，是网页图像的首选。 Jpg：支持1670万种颜色，
利用img在网页中添加图片：
网络资源： http://218.75.196.218:90/ec2006/c16/ http://jp.zzuli.edu.cn/wyzz/old/index.asp http://202.121.166.71
http://www.csszengarden.com
教学视频
http://learning.artech.cn前沿视频课室
5、设置网页背景音乐标记：<bgsound>
<bgsound>：设置网页背景音乐，该标记必须
加在网页的head位置。
<html> <head> <title>无标题文档</title> <bgsound src="1.mp3" /> </head> <body> <h1>互联网发展的起源</h1> </body> </html>
图像与网页在同一个文件夹： <img src=“ 1.jpg ” />
图像在网页的下一级文件夹： <img src=“ 子文件夹名 / 1.jpg ” /> 图像在网页的上一级文件夹:
<img src=“
.. / 1.jpg ” /> .. /
子文件夹名 / 1.jpg”
图像在网页的同一级文件夹:
Dreamweaver 可视化网页编辑工具
Flash 二维动画制作
Photoshop/Fireworks图形处理软件
教学安排
章节 1、2 主要内容 网页设计基础知识；Html的基本用法 讲授 2 实验 2 讨论 习题 其他
3
4、5 6-10 11-13 14、15 16
用html设置文本和图像
7、建立无序列表：<ul>+ < li>
无序列表相当于项目符号列表，其结构如 下：
<ul>以下是无序列表 <li>列表第1项</li> <li>列表第2项</li> <li>列表第3项</li> </ul>
8、建立有序列表：<ol>+<li>
有序列表使用ol标记，每一个列表前使用li 标记，每个项目用数字表示，其结构如下：
2
2 18
课程学习方法
实践式学习 任务驱动 勤学多思
Dreamweaver 搭起网页整体框架 Fireworks 用于切网页图、制作按钮 Flash使你的网页更“生动” 每一部分的内容完成，学期结束你就 拥有一个自己的网站和满意的成果！
成果？
利用所学知识设计一个综合性网站，主题自定。
课程学习资源
网页设计与制作
主讲：曹忠 QQ：22087284
课程相关问题
1.学习后我们能做什么？学生作品欣赏
课程要求：实现一小型站点的设计与发布
2.我们要学些什么？课程内容介绍 3.用什么样的学习方法？课程学习方法
课程内容
网页设计基础知识
HTML的使用
运用CSS+DIV进行网页设计与布局
主要涉及的软件
参考书
1.《css禅意花园》，（美）莫里 著，陈黎夫 等译，人 民邮电出版社， 2007-6-1 2009 年2月 2.《css设计彻底研究》，前沿科技 温谦，人民邮电出 版社，2008年2月
本课内容
1. 2. 3. 4. 5. 6. 7. 8.
课程要求：学生作品展示 网站规划流程： 网页是什么： HTML基础 制作自己第一个网页 制作网页需要什么工具 本课重点：用html创建与设置文本和图像 辅助：利用Dreamweaver快速创建html文档 作业：
<marquee behavior="alternate" bgcolor="#FF0000" direction="right"><h1>互联网发展 的起源</h1></marquee> 注： behavior=“alternate” ：是轮替滚动； bgcolor=“#FF0000” ：背景颜色； direction=“right ”：滚动方向 在输入标记后按空格可弹出属性列表，可根据需要选择相应属性。
利用img标记的width和height属性设置图像 宽度与高度：
src="1.jpg" />
如： <img width="200“ height="150" border="5"
注： 1. width是设置图片宽度 2. Height是设置图片高度 3. border是设置图像边框的粗细。
<html> <head> <title>标题标记</title> </head> <body> 以下为标题样式： <h1>H1标题大小</h1> <h2>H2标题大小</h2> <h3>H3标题大小</h3> <h4>H4标题大小</h4> <h5>H5标题大小</h5> <h6>H6标题大小</h6> </body> </html>
<p>互联网发展的起源</p> <p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA 资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个 大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。 </p>
2、设置标题标记：<h1>…<h6>:
<h1>…<h6>共6个标题标记，用于把文本 显示为不同级别的标题。
三、网页是什么---认识HTML
什么是HTML超文本标记语言： 如何查看一个网页的HTML代码：
四、制作我们的第一个网页
打开记事本程序，输入以下html代码：
<html>
<head>
<title>我的第一个网页</title>
头部：提供关于当前文档的信息
</head>
<body>
<p>厉害！这是我的第一个网页。</p>
<img src=“1.jpg” /> </body>
主体：提供文档的内容
</html>
把记事本文档保存为1.html，注意后缀htm或html 表明了它是一个html文档，然后用浏览器显示。
五、制作网页需要什么工具
浏览器：用于浏览网站的程序。
网页制作工具：
比如Dreamweaver 、 Microsoft FrontPage等。
2.
设置文字列表：
3.
在网页中添加图像：img标记
网页中的图像格式 一个简单图片的网页 使用路径
相对路径 绝对路径
使用img标记属性设置图片大小：width和height属性 使用img标记alt属性设置图像的替换文本：
4.
利用title标记设置网页窗口标题：
5.
html标记与html属性
<blockquote>用于对段落进行缩进显示：
<html> <head> <title>标题标记</title> </head> <body> <h1>互联网发展的起源</h1> <blockquote> <p>1969年，为了保障通信联络，美国国防部高级研究计划 署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美 国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的 新纪元。</p> </blockquote> </body> </html>
用html建立超链接；html创建表格 CSS核心基础；用CSS设置文本 用CSS设置图像 ；CSS盒子模型 盒子浮动与定位 ；用CSS设置表格样式 用CSS设置超链接与导航菜单 ；用CSS建 立表单
2
2 2 2 2 2
2
2 2 2 2 2
17
19-21
行为特效的添加与修改
网页设计综合案例 合计
2
2 18
<body>
<img
</body>
src=“1.jpg" />
注：
Img标记用于在网页中插入图片 Src属性用于指定图片所在的路径和名称，此例中图片 和网页文件是处于同一个文件夹下，所以省略了路径。 那么，当图片与网页不在同一个文件夹下，又怎么表 示文件的路径呢？
文件路径的表达：分为两种情况
第2章、HTML文件结构
一个网页可包含文本、图像、表格，我们 把这些内容称为网页元素。 元素构成了HTML文档，并告知浏览器如何 呈现网页。
元素是文本、图像、表格等。 元素由首标记、内容（content）和尾标记构成。
“标记”是什么？
标记指示元素的起始与结束。 所有标记都具有相同的格式：以小于号“<”开头，以 大于号“>”结尾。 网页有两种标记——首标记和尾标记。它们唯一的区 别在于，尾标记多一条斜杠“/。你通过把内容放在首 标记和尾标记之间来对内容进行标记。 如：
<p>这是一行文字</p>
HTML主要包含各种各样的元素，所以，学习 HTML，就是学习使用各种标记来显示网页元素。
举例说明
b标记的作用是，告诉浏览器介于标记<b> 和</b>之间的文本应以粗体显示。（这里 的“b”是“粗体bold”的意思。） 例1：
<b>显示粗体文字</b>
该例在浏览器中将显示如下：
6、滚动字幕标记：<marquee>
<marquee>标记用于内容的滚动显示；
<html> <head> <title>无标题文档</title> </head> <body> <marquee><h1>互联网发展的起源</h1></marquee> </body> </html>
还可以设置marguee标记的属性来修改滚动方向、滚 动方式以及内容的背景颜色。如：
站点设计思想及内容介绍、 站点结构图、 网上空间网址 注明原创的动画和图像及所在的页面 本课程收获 自己要改进的地方
来自百度文库
二、站点设计流程：
确定题目，设计出最初层次和划分每个页面的内容与 布局 创建一个本地站点，进行设计，并预先收集页面素材 和文字资料。 申请一个网上空间，自学FTP上传软件的使用 在本地站点调试通过，确保每个链接成功。 用FTP上传到网上空间 写报告（用word文档保存） 把站点和报告一起打包成.RAR或.ZIP，要求5M以下， 发邮件给老师。
3、文字水平居中标记：<center>
<center>标记：使得内容在浏览器中间开始 显示
<html> <head> <title>插入图片</title> </head> <body> <center> <p>互联网发展的起源</p> </center> </body> </html>
4、设置文字段落缩进标记：<blockquote>
显示粗体文字
接下来，我们正式学习html
常用的html标记 各标记的属性
第3章、用html设置文本和图像
1.
文本排版
分段标记<p>与段内换行标记<br>： 设置标题标记：<h1>…<h6>: 文字水平居中标记：<center> 设置文字段落缩进标记：<blockquote> 设置网页背景音乐标记：<bgsound> 滚动字幕标记：<marquee> 建立无序列表：<ul> 建立有序列表：<ol>
如果图片文件就在本网站内部，那么要以显示 该图像的网页文件为起点，通过层级关系描述 图像位置，我们称这为相对路径。 如果图像不在本网站内部，那么通常以http:// 开头的URL作为文件的路径。
下面举例说明相对路径的使用：
假设网站中有一个网页名为1.html，还有一个图像文件名为 1.jpg，现在你要在网页中插入该图像，根据图像所在位置 不同，其路径也有不同的表示方法：
看书：课本第1、2、3章，并上机实现课本例子； 上机实验题：
实验要求
平时作业：每周上机课提交上一周理论课的实验 作业！ 独立规划和设计一个网站，内容不限。
掌握网页设计工具Dreamweaver的使用。 掌握用ftp软件发布站点。 写一份《综合设计报告》：包含
控制p标记的水平位置：align属性： 控制body标记的网页背景颜色或图片：bgcolor、background。 设置文字字体效果<font>标记及其属性：face、color、size等 属性
1、分段标记<p>与段内换行标记<br>：
从word中复制一段文字到代码窗，并用浏 览器预览，可看到浏览器会忽略掉原文中 所有的空格和换行。 要使得文字在浏览器中分段或换行，需要 用<p> 和<br>标记：
<ol>以下是有序列表 <li>列表第1项</li> <li>列表第2项</li> <li>列表第3项</li> </ol>
9、在网页中添加图片：<img>标记
网页中的图片格式：
Gif：只支持256色图像，支持透明色，文件很 小，是网页图像的首选。 Jpg：支持1670万种颜色，
利用img在网页中添加图片：
网络资源： http://218.75.196.218:90/ec2006/c16/ http://jp.zzuli.edu.cn/wyzz/old/index.asp http://202.121.166.71
http://www.csszengarden.com
教学视频
http://learning.artech.cn前沿视频课室
5、设置网页背景音乐标记：<bgsound>
<bgsound>：设置网页背景音乐，该标记必须
加在网页的head位置。
<html> <head> <title>无标题文档</title> <bgsound src="1.mp3" /> </head> <body> <h1>互联网发展的起源</h1> </body> </html>
图像与网页在同一个文件夹： <img src=“ 1.jpg ” />
图像在网页的下一级文件夹： <img src=“ 子文件夹名 / 1.jpg ” /> 图像在网页的上一级文件夹:
<img src=“
.. / 1.jpg ” /> .. /
子文件夹名 / 1.jpg”
图像在网页的同一级文件夹:
Dreamweaver 可视化网页编辑工具
Flash 二维动画制作
Photoshop/Fireworks图形处理软件
教学安排
章节 1、2 主要内容 网页设计基础知识；Html的基本用法 讲授 2 实验 2 讨论 习题 其他
3
4、5 6-10 11-13 14、15 16
用html设置文本和图像
7、建立无序列表：<ul>+ < li>
无序列表相当于项目符号列表，其结构如 下：
<ul>以下是无序列表 <li>列表第1项</li> <li>列表第2项</li> <li>列表第3项</li> </ul>
8、建立有序列表：<ol>+<li>
有序列表使用ol标记，每一个列表前使用li 标记，每个项目用数字表示，其结构如下：
2
2 18
课程学习方法
实践式学习 任务驱动 勤学多思
Dreamweaver 搭起网页整体框架 Fireworks 用于切网页图、制作按钮 Flash使你的网页更“生动” 每一部分的内容完成，学期结束你就 拥有一个自己的网站和满意的成果！
成果？
利用所学知识设计一个综合性网站，主题自定。
课程学习资源
网页设计与制作
主讲：曹忠 QQ：22087284
课程相关问题
1.学习后我们能做什么？学生作品欣赏
课程要求：实现一小型站点的设计与发布
2.我们要学些什么？课程内容介绍 3.用什么样的学习方法？课程学习方法
课程内容
网页设计基础知识
HTML的使用
运用CSS+DIV进行网页设计与布局
主要涉及的软件
参考书
1.《css禅意花园》，（美）莫里 著，陈黎夫 等译，人 民邮电出版社， 2007-6-1 2009 年2月 2.《css设计彻底研究》，前沿科技 温谦，人民邮电出 版社，2008年2月
本课内容
1. 2. 3. 4. 5. 6. 7. 8.
课程要求：学生作品展示 网站规划流程： 网页是什么： HTML基础 制作自己第一个网页 制作网页需要什么工具 本课重点：用html创建与设置文本和图像 辅助：利用Dreamweaver快速创建html文档 作业：
<marquee behavior="alternate" bgcolor="#FF0000" direction="right"><h1>互联网发展 的起源</h1></marquee> 注： behavior=“alternate” ：是轮替滚动； bgcolor=“#FF0000” ：背景颜色； direction=“right ”：滚动方向 在输入标记后按空格可弹出属性列表，可根据需要选择相应属性。