Download presentation
Presentation is loading. Please wait.
1
主讲教师：唐大仕 dstang2000@263.net http://www.dstang.com
第9讲 网页制作初步 主讲教师：唐大仕
2
网页的制作 复习几个概念 Html的基本标记 使用EditPlus / FrontPage 了解样式(Css )及JavaScript
3
有关WWW的几个概念 WWW: World Wide Web URL: Uniform Resource Location
Http: Hyper Text Transfer Protocol Html: Hyper Text Markup Language 多媒体 超链接
4
Html 基础 Html 源文件 文件结构 head body Title标题 Meta
5
标记 标记 tag 成对的标记, 不成对的标记 标记的属性 如<title> 如<br>
如<img src=“xxxx”>
6
网页的基本内容 文字 图片 表格 超级链接
7
文字 段落 <p> 换行 <br> 标题 <h2>….</h2>
粗体 <b>…</b> 斜体 <I>…..</I> 字体 <font size=20 color=red>…..</font> 颜色 red, blue, white #rrggbb 如#FF0088
8
图形 图片 <img src=… border=0 width= height= Alt=> .gif 及 .jpg 文件
9
链接 <a href=….>文字或图片 </a> URL 的写法
相对URL 目录/文件名 or 文件名
10
列表 <UL> 或<OL> <LI>….. <LI>…. </UL>
11
表格 <table bgcolor=yellow border=1 cellspacing=0>
<tr><td>….<td>….<td>…. <tr><td>….<td>…. <td>…. <tr><td>….<td colspan=2 align=center>…. </table> 表格的重要作用: 用于定位
12
其他 水平线 <hr> 预设格式 <PRE> </PRE> 注释 <!-- -->
注释 <! > 空格 小于号/大于号 < >
13
参考“书” 网上资料 html 4.0 specification 各种介绍网页制作的站点 通过 查看/源文件 来学习
14
编辑器 用Word ,PPT 另存为html 文字编辑器 专用编辑器 记事本 保存时，文件类型(所有文件),文件名.htm
EditPlus / UltraEdit / CuteHtml FrontPage /Netscape DreamWeaver
15
使用EditPlus / UltraEdit
手工书写 使用工具栏 预览 保存(注意文件名带上扩展名.htm)
16
使用FrontPage 界面简介 几种视图 三种状态：编辑，HTML，预览 各种工具栏
17
使用FrontPage制作网页 文： 格式、样式、项目编号 图： 大小，alt 表： 列举，文图定位，局部背景
文： 格式、样式、项目编号 图： 大小，alt 表： 列举，文图定位，局部背景 链接： 指向URL, 文件，或书签位置 网页属性： 背景，链接的颜色，声音 样式： 格式/样式， 如a, a:hover, a:visited, a:active, td, p p.mystyle, td.myRed 在格式工具栏上应用样式
18
使用Style(CSS,层叠样式表) CSS的使用 直接在一个元素上写 将样式定义在一个单独的css文件中
<body style=“color: red”> 将样式定义在一个单独的css文件中 然后，在<head>中引用这个文件 <link rel="stylesheet" href="mystyle.css">
19
将样式定义在<head>中的<style>标记中
body,td,p{ color:#0000CC; font-size: 9pt;} . myfont {font-family: 宋体; font-size: 20px;} #myhead {font-size: 9pt; line-height: 13pt} a:link {color:#00007f;} a:hover {color: #ff7f24; background-color:#fffff} a:visited {text-decoration:none; color:#65038e;} a:active {color:#ff0000;} </style> 注：对于.类型的style，使用class属性来引用它： <span class=“myfont”>……</span> 注：对于#类型的style, 使用id属性来引用它： <h2 id=“myhead”>…..<h2>
20
了解Script Script(脚本语言)，可以动态处理网页 常用的有JavaScript及VBScript两种
可以通过搜索网上的技巧来进行学习
21
如何让别人访问到我的网页 将文件放入到c:\Inetpub\wwwroot下 别人使用IE进行访问，如： 前提：
前提： 我的机器安装了WWW服务 开始设置控制面板添加删除程序Windows组件Internet信息服务详情World Wide Web服务 使用IIS服务管理器进行管理 开始设置控制面板管理工具Internet服务管理器
22
网上申请个人主页 网上申请个人主页空间 将做好的网页上传到服务器 必要时可以申请一个域名 免费的空间 虚拟主机 QQ等站点提供的空间
通过ftp等方式 有的网站提供网页模板 有的网站可以在线制作网页 必要时可以申请一个域名
Similar presentations
