第2讲 网页布局与设计.pptVIP

CSS 基础 CSS文件链接分成内联接、链接内部CSS和链接外部CSS三种方式。 在现在的网站中，网页设计者都先新建一个CSS文件，然后在网页中链接此CSS文件，每控制HTML标签都在这个CSS文件中写入CSS代码，当要修改所有网页的风格时，只要对CSS样式修改即可。一个网站少则一个CSS样式，多的也有三五个，使网页表达出更好的效果。 CSS 基础 内联接 直接将CSS样式控制放置在单个HTML标记内。 font size=6 color=blue style=font-family:楷体_GB2312 pHTML文件的第一段正文写在这里.../p pHTML文件的第二段正文写在这里.../p /font CSS 基础 链接内部CSS 在网页的head部分定义样式，然后在单个HTML标记内引用，称为链接内部CSS。 style type=text/css .myfontstyle{ font-family:楷体_GB2312; color:blue; } /style font size=6 class=myfontstyle…/font CSS 基础 链接外部CSS 定义一个单独的后缀名为.css的样式表文件，在网页的head部分链接到这个文件，然后在单个HTML标记内引用文件中的样式，称为链接外部CSS。 link href=myStyleSheet.css rel=Stylesheet/ font size=6 class=myfontstyle … … /font 网页布局 DIV是HTML中的标签，也称作层，用DIV布局也说成用层布局。 DIV标签对是用来布局的，结合层叠样式表设计出完美的网页。 DIV标记主要用来布局，在布局中，可以作为容器使用，其包含其他对象，如表格、表单、文本和图像等。 网页布局 层标记语法： div p我是一个DIV！/p /div DIV标记中还可以嵌套DIV标记，而且层数没有限制，每个DIV标记与最近的DIV结束标记符（/div）相配对，且每个DIV必须有一个DIV结束符与之对应。 网页布局 层布步骤： 1.层布局先利用层把内容框架打好 2.利用样式表控制各层 示例如图： 网页布局 header main Thank you very much! * * * * * * * * * * * * * * * * * * 第1讲 ASP.NET概述 《WEB程序设计技术》 《WEB程序设计技术》 第2讲 网页布局和设计 网页可视化效果制作 网页可视化效果制作 网页可视化效果制作 HTML 基础 CSS 基础 网页布局 HTML 基础 HTML简介 HTML即超文本标记语言(HyperTextMarkupLanguage),是一种用来制作超文本文档的简单标记语言。 HTML用于描述功能的符号称为“标记”。 HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。有时因不同浏览器显示不同的效果，这就是为什么同一文档在不同的浏览器中展示的效果会不一样。 标记在使用是必须用方括号“”括起来，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如“HTML”、“BODY”等。 HTML 基础 HTML简介 HTML文档结构 任何一份网页文件，都包含了头部(Head)、标题(Title) 、主体(Body) 三个要素，分别以 head、body和 title标签来表示。同时也是为了HTML文件有别于其它种类的文件， 另外再加上 html标签加以强调。 HTML 基础 HTML简介 标记种类 单标记 标记 属性1=“” 属性2=“” … 如： hr、 br 双标记 标记 属性1=“” 属性2=“” … 内容/标记 如： p…/p 编写HTML的工具 文本编辑器、 FrontPage、 Dreamweaver 创建第一张网页 下面是一份HTML 文件的内容： HTML HEAD TITLE例一/TITLE /HEAD BODY HTML文件的第一段正文写在这里... HTML文件的第二段正文写在这里... /BODY /HTML HTML 基础 HTML 基础