第1课 html+css网页设计_第1页
第1课 html+css网页设计_第2页
第1课 html+css网页设计_第3页
第1课 html+css网页设计_第4页
第1课 html+css网页设计_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一课html+css网页设计主讲：谭军Qq：83932086网页设计群：60250389加群时请注明班级、姓名课程要求：学生作品展示网站规划流程：网页是什么：HTML基础制作自己第一个网页制作网页需要什么工具本课重点：用html创建与设置文本和图像辅助：利用Dreamweaver快速创建html文档作业：看书：课本第1、2、3章，并上机实现课本例子；上机实验题：本课内容一、课程要求：实现一小型站点的设计与发布独立规划和设计一个网站，内容不限。掌握网页设计工具Dreamweaver的使用。掌握用ftp软件发布站点。写一份《综合设计报告》：包含站点设计思想及内容介绍、站点结构图、网上空间网址注明原创的动画和图像及所在的页面本课程收获自己要改进的地方二、站点设计流程：确定题目，设计出最初层次和划分每个页面的内容与布局创建一个本地站点，进行设计，并预先收集页面素材和文字资料。申请一个网上空间，自学FTP上传软件的使用在本地站点调试通过，确保每个链接成功。用FTP上传到网上空间写报告（用word文档保存）把站点和报告一起打包成.RAR或.ZIP，要求5M以下，发邮箱给老师。三、网页是什么认识HTML什么是HTML超文本标记语言：HTML是由一名叫TimBerners-Lee的科学家发明的。他发明HTML的目的，是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。HTML是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。你所看到的网页，是浏览器对HTML进行解释的结果。HTML语言并不会在浏览器中显示出来，但是却告诉浏览器如何显示文档的内容，如文本、图像及其其他媒体。这门语言还告诉你如何通过超文本链接实现交互式的文档，这些链接可把你的文档与其他本地或者因特网上的文档，以及其他的网络资源连接起来。如何查看一个网页的HTML代码：在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。四、制作我们的第一个网页打开记事本程序，输入以下html代码：<html><head><title>我的第一个网页</title>

</head>

<body><p>厉害！这是我的第一个网页。</p>

<imgsrc=“1.jpg”/></body></html>把记事本文档保存为1.html，注意后缀htm表明了它是一个html文档，然后用浏览器显示。头部：提供关于当前文档的信息

主体：提供文档的内容

五、制作网页需要什么工具浏览器：用于浏览网站的程序。游览器有很多可供选择，最普及的浏览器当属微软（Microsoft）公司的InternetExplorer（俗称“IE”）。其他的一些浏览器包括Opera、MozillaFirefox（俗称“火狐狸”或“火狐”）等。这些浏览器的基本功能都是浏览网页，因此具体使用哪个浏览器是无所谓的。网页制作工具：比如MacromediaDreamweaver、MicrosoftFrontPage等。网页制作工具可以为编写代码提供很好的提示和帮助，还提供了许多标准功能供你选择。缺点是，你只能按照这些标准功能来制作网页，更糟糕的是，这些标准功能远远不能涵盖所有的html标记和属性，如果你不懂得html，将无法制作正合你意的网页。或者，更令人讨厌的是，它们会修改你手工编写的代码。所以，要想制作精美的网页，不能完全依赖Dreamweaver，而应该在掌握一定程度html的基础上去使用工具作为设计的辅助手段。对于dw，我们要学到什么程度？第一，熟练利用代码视图来输入并修改html和CSS代码。第二，利用dw的站点功能和文件面板，来管理网站的文件，比如文件的复制、移动、重命名等，都需要更新关联的超链接以及文件的路径，这些dw都能替我们很好的完成，同时谨记网站中所有文件以及文件夹名不能用中文名或全角字符。第三，利用dw的spry插件制作流行的网页元素，比如选项卡、折叠式面板等。第四，利用dw插入表格输入标记：在英文状态下，按<键，即可弹出html标记的列表，选择相应标记按回车。输入属性：输入标记后，按空格可弹出其属性列表，选择相应属性按回车。利用dw代码视图输入html标记和属性一个网页可包含文本、图像、表格，我们把这些内容称为网页元素。元素构成了HTML文档，并告知浏览器如何呈现网页。元素是文本、图像、表格等。元素由首标记、内容（content）和尾标记构成。第2章、HTML文件结构“标记”是什么？标记指示元素的起始与结束。所有标记都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。网页有两种标记——首标记和尾标记。它们唯一的区别在于，尾标记多一条斜杠“/。你通过把内容放在首标记和尾标记之间来对内容进行标记。如：<p>这是一行文字</p>HTML主要包含各种各样的元素，所以，学习HTML，就是学习使用各种标记来显示网页元素。举例说明b标记的作用是，告诉浏览器介于标记<b>和</b>之间的文本应以粗体显示。（这里的“b”是“粗体bold”的意思。）例1：<b>显示粗体文字</b>该例在浏览器中将显示如下：显示粗体文字接下来，我们正式学习html常用的html标记各标记的属性第3章、用html设置文本和图像文本排版分段标记<p>与段内换行标记<br>：设置标题标记：<h1>…<h6>:文字水平居中标记：<center>设置文字段落缩进标记：<blockquote>设置网页背景音乐标记：<bgsound>滚动字幕标记：<marquee>设置文字列表：建立无序列表：<ul>建立有序列表：<ol>在网页中添加图像：img标记网页中的图像格式一个简单图片的网页使用路径相对路径绝对路径使用img标记属性设置图片大小：width和height属性使用img标记alt属性设置图像的替换文本：利用title标记设置网页窗口标题：html标记与html属性控制p标记的水平位置：align属性：控制body标记的网页背景颜色或图片：bgcolor、background。设置文字字体效果<font>标记及其属性：face、color、size等属性1、分段标记<p>与段内换行标记<br>：从word中复制一段文字到代码窗，并用浏览器预览，可看到浏览器会忽略掉原文中所有的空格和换行。要使得文字在浏览器中分段或换行，需要用<p>和<br>标记：<p>互联网发展的起源</p><p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>2、设置标题标记：<h1>…<h6>:<h1>…<h6>共6个标题标记，用于把文本显示为不同级别的标题。<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>3、文字水平居中标记：<center><center>标记：使得内容在浏览器中间开始显示<html><head><title>插入图片</title></head><body><center> <p>互联网发展的起源</p></center></body></html>4、设置文字段落缩进标记：<blockquote><blockquote>用于对段落进行缩进显示：<html><head><title>标题标记</title></head><body><h1>互联网发展的起源</h1><blockquote> <p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p></blockquote></body></html>5、设置网页背景音乐标记：<bgsound><bgsound>：设置网页背景音乐，该标记必须加在网页的head位置。<html><head> <title>无标题文档</title><bgsoundsrc="1.mp3"/></head><body><h1>互联网发展的起源</h1></body></html>6、滚动字幕标记：<marquee><marquee>标记用于内容的滚动显示；<html><head> <title>无标题文档</title></head><body> <marquee><h1>互联网发展的起源</h1></marquee></body></html>还可以设置marguee标记的属性来修改滚动方向、滚动方式以及内容的背景颜色。如：<marqueebehavior="alternate"bgcolor="#FF0000"direction="right"><h1>互联网发展的起源</h1></marquee>注：behavior=“alternate”：是轮替滚动；bgcolor=“#FF0000”：背景颜色；direction=“right”：滚动方向在输入标记后按空格可弹出属性列表，可根据需要选择相应属性。7、建立无序列表：<ul>+<li>无序列表相当于项目符号列表，其结构如下：<ul>以下是无序列表<li>列表第1项</li><li>列表第2项</li><li>列表第3项</li></ul>8、建立有序列表：<ol>+<li>有序列表使用ol标记，每一个列表前使用li标记，每个项目用数字表示，其结构如下：<ol>以下是有序列表<li>列表第1项</li><li>列表第2项</li><li>列表第3项</li></ol>9、在网页中添加图片：<img>标记网页中的图片格式：Gif：只支持256色图像，支持透明色，文件很小，是网页图像的首选。Jpg：支持1670万种颜色，利用img在网页中添加图片：<body>

<imgsrc=“1.jpg"/></body> 注：Img标记用于在网页中插入图片Src属性用于指定图片所在的路径和名称，此例中图片和网页文件是处于同一个文件夹下，所以省略了路径。那么，当图片与网页不在同一个文件夹下，又怎么表示文件的路径呢？文件路径的表达：分为两种情况如果图片文件就在本网站内部，那么要以显示该图像的网页文件为起点，通过层级关系描述图像位置，我们称这为相对路径。如果图像不在本网站内部，那么通常以http://开头的URL作为文件的路径。下面举例说明相对路径的使用：假设网站中有一个网页名为1.html，还有一个图像文件名为1.jpg，现在你要在网页中插入该图像，根据图像所在位置不同，其路径也有不同的表示方法：图像与网页在同一个文件夹：

<imgsrc=“1.jpg”/>图像在网页的下一级文件夹：

<imgsrc=“子文件夹名/1.jpg”/>图像在网页的上一级文件夹:

<imgsrc=“../1.jpg”/>图像在网页的同一级文件夹: <imgsrc=“../子文件夹名/

1.jpg”/>利用img标记的width和height属性设置图像宽度与高度：如：<imgwidth="200“height="150"border="5"src="1.jpg"/>注：width是设置图片宽度Height是设置图片高度border是设置图像边框的粗细。10、利用title标记设置网页窗口标题<title>标记写在head头部里，用于在浏览器窗口的标题栏上显示网页标题。网页标题很重要，因为搜索引擎（比如Google）要用它来索引网页，并显示在搜索结果里。<html><head> <title>欢迎来参观</title></head><body> <h4>我的第一个网页</h4></body></html>html标记与html属性通过前一阶段学习，我们利用html标记，使得内容在浏览器中显示出来，接下来我们学习如何设置html标记的属性来进一步控制内容的编排，比如文字的大小、颜色、网页的背景等。标记属性的语法：<标记名称属性名1=“属性值1”属性名2=“属性值2”……..></标记名称>注：如果一个标记使用了多个属性，各属性之间用空格隔开。不同标记可以使用相同的属性，但有些标记也有自己专门的属性设置。11、利用align属性设置段落对齐方式align属性是用于控制元素的对齐方式，很多标记都含有该属性，比如：<p>、<h1>、…<h6>标记的align属性设置了文字的水平对齐方式<img>标记的align属性是设置图片与文字的对齐关系，以实现图文混排的效果。align属性值一般有三个：center、left、right如：<h1align=

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论