Part_I：网页制作基础摘要.ppt

《网页设计与制作（第二版）》 山西财经大学 肖宁 Part I 网页制作基础 第一讲：网站、网页、浏览器概述 Web服务器是如何工作的？ 网页与网站有何区别？ 网页制作三剑客指的是什么？ 浏览器的主要功能是什么？ Word文档与网页的区别是什么？试列举组成网页的基本元素． 如查看与网页对应的HTML文档？ 能上网的计算机与Web服务器的差别是什么？ 第2讲 文本标记与CSS样式的用 文本标记与相关操作 滚动文本 CSS样式的使用： CSS样式不仅可以控制页面元素的外观，还可以实现页面布局。 单元练习 在HTML文档中应用CSS样式 内部样式 Selector定义样式作用的对象，可分为如下三类： 通用类：样式名由用户定义，可应用所有标记（由用户指定应用的对象），定义时在类名有一个句点，通过class属性引用； HTML标记类：重新定义特定HTML标记的外观，如body、li、td 等（否则使用默认值），是自动应用； 虚类（或伪类）：定义链接样式，又分为四种（a:link、a:visited、a:hover和a:active），是自动应用。 property为CSS样式属性名，value为CSS样式属性值； 一对花括号内包含若干对“CSS属性名:值”、且属性值一般加上双引号； 每对属性名:值可单独占一行，并可加上注释。 注释方法： /*注释内容（可以多行）*/ 说明：CSS样式的注释不同于body部分对HTML标记的注释！ 外部样式 样式文件和嵌入样式的使用 在Dreamweaver中，选择“窗口”—“CSS样式”，即可定义样式并保存到一个.CSS的文件中。 CSS定位属性和显示属性 样式使用总结 当用户的鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样子。 使用DW常用工具栏上的图像工具里的“鼠标经过图像”工具，则会出现对话框，选择用于交换显示的两个图像文件。 新建站点：主要是设定站点名称和指定网站所在的文件夹位置，方便网页文件的编辑（作为文件打开或存储的默认路径）和网站的上传等工作。 ASP网页必须在站点中调试、浏览，不同于HTML网页。因为ASP网页文件中可能包含有IE浏览器不能直接解释的某些代码。 图像标记应用技巧 1) 给图片加边框 边框的颜色默认的是黑色，不美观，而img标记也没有设置边框颜色的参数，我们可以通过设置class参数调用CSS达到改变边框颜色的目的。 2) 给图片加动态说明文字 若想制作当鼠标移到图片上出现一行简短说明文字的效果，只需设定title属性值。 3) 图像与文字混排 图文混排主要是设置align参数。 （1）top，middle，center和bottom所产生的效果只是一行文字，在多行文本与图像对齐时要用left和right参数值。 （2）img中的对齐参数align所产生的效果是指图片与周围文字的位置关系，而图片在页面中的位置对齐是在图片所在的页面元素中设置的。例如下面这段代码： p align=leftimg src=image/yks2.jpg width=59 height=48 border=4 alt=黄山迎客人松 align=top class=style1图文混排示例/p 其中，标记p中的align=left表示图片的位置在窗口的左端；而img中的align=top则表示图片旁边的文字与图片的顶端对齐。 （3）为了避免图片与旁边文字靠得太近不便阅读，可以通过设置hspace参数来控制图片与文字间的距离，一般设置hspace=10（表示图片的左右有10个像素的空白）就能达到较好的效果。 相对引用本地站点里的素材文件 使用绝对路径，如果把整个目录中的所有文件移植到服务器上时，则用户无法访问到使用的资源地址。所以我们最好写成相对路径，从而避免了重新修改文件资源路径的麻烦。 通常，正确的做法是：新建一个文档后，立即保存到站点根目录里（最迟要在引用站点里的素材文件前），再引用素材文件便是相对引用。 网页可以使用本站点中的素材文件，其方式一般是相对引用。网页还可以使用网络中的素材（资源）。 URL（Universal Resource Locator）是表示Web上资源的一种方法，通常可以理解为资源的地址。一个URL通常包括三个部分： (1) 协议代码，通常为http （2）文件在网络中的地址—主机域名或IP地址 (3) 计算机里的文件地址（用盘符、文件夹表示）、文件名和扩展名。 href属性用于指定链接到的页面； 被链接的对象为文本时，称为文字链接； 也可以做图像链接，其格式如下： A href=… img src=…/a 默认情况下，浏览器会新一个窗口，用于显示网页