静态页面设计实训内容.docVIP

HTML/CSS/JS 环境准备 设置Myeclipse 工作空间位置 设置工作空间字符编码集 / 当前项目字符集 发送tomcat HTML课程内容 Web概念介绍 何谓Internet Internet是一个全球性的计算机互联网络，中文名称有“因特网”、“国际互联网”、“网际网” 、“交互网络”等 何谓Web 万维网 www---World Wide Web的简称 实质：超文本信息系统 采用面向连接、无状态的http协议(Hypertext Transfer Protocol) http: 未加密 https: 把信息加密传输 Web和Internet关系 Web是Internet的一个应用，通过浏览器的方式访问Internet www工作原理.jpg Web浏览器类别 浏览器的种类分为IE内核、谷歌内核【Webkit】、火狐内核等。还有IE内核+Webkit内核。即双核的浏览器。比如傲游浏览器、360极速浏览器、搜狗高速浏览器。 Mozilla Firefox 仅次于IE、谷歌chrome Gecko内核 谷歌浏览器 搜狗浏览器 一堆功能，号称是世界上最快的真双核浏览器 Trident内核 遨游浏览器 Maxthon Trident内核 IE 兼容性强 Trident内核 Opera浏览器 欧鹏 号称世界上最快 腾讯浏览器 QQ浏览器 NetScape6 网景 Gecko内核 360 Trident内核 由于浏览器的内核不一致，不同浏览器访问同一个网站时可能会出现布局错乱（浏览器兼容性问题），由美工通过样式设定可以解决兼容性问题。s 1、Html文档基本结构 如何查看一个网站的源代码 如何通过记事本创建一个html页面 Html是一种标签/标记语言，以标签对的方式定义某个元素对象 a 内容 /a 标签能够嵌套，但不能交叉 diva/a/div 基本HTML文档结构： HTML的IDE：Hbuilder DW Eclipse… Eclipse中创建HTML: ① 设置好workspace的编码 ② 设置好css、html的编码（配置属性中搜索html） 2、META标签简介 Meatdata:元数据（关于数据的数据） meta 元素可提供有关页面的元信息（meta-information） META http-equiv=Content-Type content=text/html; charset=utf-8 META name=”keywords” content=”asp” 3、页面背景属性（body标签属性） BODY bgcolor=#FFCCFF background=back_image.GIF text=”yellow” title=”这是title” Hello World！ /BODY 对比好看的背景颜色和差的背景颜色 三种方式： body bgcolor=#000000 body bgcolor=rgb(0,0,0) body bgcolor=black body bgcolor=”#234” == #223344 4、文本相关标签 文本标题标签 H1 --- H6 字体标签 font FONT size=“+2” color=“red” face=“律书” … /FONT 行控制 p br 演示两者的区别 文字变粗： strong b big i small 缩进标签：blockquote文字/blockquote 对特定文字处理：span…/span sub sup 文字斜体：em 5、图像标签 常见图片格式 png质量间于jpg和gif之间，ico：系统图标 图像标签语法 IMG src=images/adv_2.jpg width=300 height=150 alt=明星演唱会开幕 Alt：当图片路径找不到时提示的内容 Title：鼠标覆盖时提示的内容 相对路径： 绝对路径： 图像文本对齐标签 IMG align=middle …… 插入非本地图像 img src=”/images/ie.gif” 图像地图 img src=./images/planets.gif width=145 height=126 usemap=#planetmap map id=planetmap name=planetmap area shape=rect coords=0,0,82,126 alt=Sun href=sun.htm area shape=circle coords=90,58,3 alt=Mercury href=mercury.htm