第一课网页制作基础共54页文档

网页制作第1课

电脑基础实例上机系列丛书
清华大学出版社
Dreamweaver中文版网页制作教程
学习目标
网络以其独特的优势渗入到人们的生活中,它已成为人们生活的一个重要组成部分.若想要学习网页制作,需先了解网页的一些基本知识,如网页的定义, 分类,制作网页的软件以及网页制作的基本步骤和规则等.本章将讲解网页制作的基础知识,为以后学习网页制作做好铺垫.
电脑基础实例上机系列丛书
清华大学出版社
Dreamweaver中文版网页制作教程
1.1.3 页面的基本组成元素
网页是由多种元素组成的.文本和图像是网页中最基本的元素,是网页信息的主要载体,它们在网页中起着非常重要的作用.其余的元素如超级链接等都是基于这两种基本元素而创建的.
电脑基础实例上机系列丛书
电脑基础实例上机系列丛书清华大学出版社
Dreamweaver中文版网页制作教程
6. 超级链接
超级链接能起到将不同页面链接起来的功能,可以是同一站点页面之间的链接, 也可以是与其他网站页面之间的链接. 超级链接有文字链接和图像链接等.在浏览网页时单击超级链接就能跳转到与之相关的页面.
电脑基础实例上机系列丛书清华大学出版社
电脑基础实例上机系列丛书清华大学出版社
Dreamweaver中文版网页制作教程
本章要点
网页制作基础知识网页制作的一般步骤网页的制作原则启动与退出Dreamweaver MX 2004 Dreamweaver MX 2004的工作界面
电脑基础实例上机系列丛书
清华大学出版社
Dreamweaver中文版网页制作教程
1.1
网页制作基础知识
学习网页制作应先了解网页的基本概念, 学好这些知识是制作出漂亮,美观的网页的前提,千万不能忽视.

第一讲网页制作基础(邯郸学院)

26
Dreamweaver CS3的基本设置的基本设置
容许多个连续的空格
27
Dreamweaver CS3的基本设置的基本设置
通过属性面板设置属性
28
Dreamweaver CS3的基本设置的基本设置
29
典型案例—用典型案例用Dreamweaver制作网页制作网页
案例目标
制作一个与前面用“记事本”创建的效果相同的网页。
21
典型案例——用记事本制作网页用记事本制作网页典型案例
<html> <head> 网页标题 <title>welcome</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body background="bg.jpg"> 网页背景     插入的图像   <img src="welcome.gif" /> 对齐方式 © 版权所有 Likreo 2007 制作 </body> 文字的字号及颜色 </html>

第一章网页制作基础

4.Flash动画
Flash动画是近年来十分流行的网页元素，可以制作十分精美的动画效果，甚至出现了大量的Flash MTV、Flash 游戏等。本书将简单介绍制作Flash动画的方法。
5. 表格表格在网页中扮演十分重要的角色，除了有序的显示数据外，主要用于网页版面设计。
6. 超级链接超级链接是网页中最重要的元素，也是因特网最吸引人的原因之一。文字、图像、Flash动画等都可以定义为超级链接，在网页中点击超级链接可以打开另外一个感兴趣的网页。 7. 视频、音频在网页中可以嵌入视频、音频，实现在线看电影、听音乐。网页还可以加入背景声音。 8. POP窗口 POP窗口是在网页调入时同时打开的小的浏览器窗口，用来显示重要公告、广告等。POP窗口一般只有标题栏和浏览窗口，没有工具栏、地址栏、状态栏等。 9. 标题栏和状态栏文字标题栏和状态栏的文字是网页的组成部分，可以根据网页内容进行设置。标题栏显示网站名称、正文的标题等，状态栏则显示信息提示、当前时间、版权说明等。
2. IE6的界面
连接网络，双击桌面上的Internet Explorer图标或单击状态栏上快速启动的IE图标可打开IE窗口。在地址栏输入网址，就可以浏览网页了，如图1.1所示是搜狐网的首页。IE6 的窗口与其它Windows窗口类似，主要有以下几个部分：
标题栏
菜单栏
工具栏
地址栏
浏览窗口
状态栏
Web是World Wide Web的简称，一般也称之为WWW或3W。 Web最大的特点是使用了超文本（Hypertext）。超文本可以是网页上指定的词或短语，也可以是一个包含通向一个 Internet资源的超级链接的其它网页元素。点击网页里的超级链接元素时，所链接的目标就会出现在浏览器窗口中。当鼠标移动到页面上包含超级链接的地方时，鼠标会变成手状。

网页制作基础

1.2 网页的基本要素
1.2.1 文字
文字是网页发布信息所用的主要形式由文字制作出的网页占用空间小下载方便注意编排
标题字型字号内容的层次样式颜色
1.2 网页的基本要素
1．标题．
表明本网页的主要内容设计醒目标题
2．字号．
大小适中。大小适中。网页信息量变化应统筹规划，给人以生动活泼之感觉。应统筹规划，给人以生动活泼之感觉。
1.4 网页制作的基本步骤
1.4.1 流程规划阶段设计阶段开发阶段发布阶段维护阶段
1.4 网页制作的基本步骤（规划）网页制作的基本步骤（规划）
① 层状结构
层状结构类似于目录系统的树型结构，由网站文件的主页开始，层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。览者具体信息。
1.2.4 交互功能
Internet区别其他媒体的一个重要标志就是它的交互功能 Internet区别其他媒体的一个重要标志就是它的交互功能区别其他媒体的一个重要标志就是它的
数据库进行检索----及时返回确认信息数据库进行检索----及时返回确认信息 ----
通常网页的交互功能都是利用表单来实现的。通常网页的交互功能都是利用表单来实现的。表单是网页中利用表单来实现的站点服务器处理的一组数据输入域，站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。提交表单后，数据就会传送到服务器上。
1.1 网页制作基础
5.万维网概念（www）
Web服务器的计算机组成----组织信息资源-----浏览器浏览(IE Netscape Navigator)

网页制作基础第1课

创建一个简单的HTML页面，包含标题、段落和链接等元素。
学习使用标签
HTML文档由各种标签组成，如 `<h1>`到`<h6>`表示标题，``表示段落等。
使用CSS样式化页面
01
02
03
了解CSS的作用
CSS用于控制网页的布局和样式，使网页更加美观和易于阅读。
学习CSS选择器
CSS选择器用于选择要样式化的HTML元素，如元素选择器、类选择器、ID 选择器和属性选择器等。
字体属性
包括字体类型、大小、颜色、行高、字重等。
颜色和背景属性
包括背景颜色、背景图像、背景重复等。
列表属性
包括列表样式类型、列表符号等。
CSS布局属性
盒模型
CSS布局的基础，包括内容、内边距、边框和外边距。
浮动
使元素向左或向右移动，使文本和内联元素环绕它。
定位
包括静态定位、相对定位、绝对定位和固定定位。
一款轻量级的跨平台IDE，支持多种编程语言，具有丰富的插件和扩展。
02 WebStorm
一款专业的JavaScript IDE，提供了强大的代码提示、自动完成和调试功能。
03 Eclipse
一款基于Java的开源IDE，支持多种开发语言和插件。
在线网页编辑器
01模板和拖拽式编辑功能。
一个HTML元素由开始标签、元素内容和结束标签组成，结束标签的形式为 `</tagname>`。
HTML属性
HTML属性是附加在HTML标签上的附加信息，用来修改标签的
默认行为或提供额外的信息。
属性通常在开始标签中定义，格式为 `name="value"`，例如 `<img src="image.jpg">` 中的 `src` 就是一个属性。

第1讲：网页制作基础

第1讲：网页制作基础学习目标：●理解网页的基本概念●掌握网页设计的基本步骤●了解网页制作的基本工具要点：WWW、Internet、HTML等专业术语的解释，站点规划、站点导航、站点风格等的具体规则、实施情况1.1 什么是网页1.1.1 Internet与WWW计算机网络：是多台计算机通过特定的连接方式构成的一个计算机集合体，它是Internet的基础，在这个集合体中使用一套共同遵循的规则，即网络协议，实现网络中设备的相互沟通。

Internet的理解普遍观点：是由数百万台计算机和数以千万计用户组成的全球范围内的计算机互联网络，是一个世界范围内信息资源的大型集合体系。

网络专家观点：一个基于TCP/IP的网络，它由分布在各个国家的数以万计的网络互连设备组成，其间布满了复杂的通信线路，每台计算机在网络中所独有的标识——IP地方，已经无时无刻不在流动着的数据——IP数据包，IP数据包在通信协议的控制帮助下，能够从发送信息处准确地传达到接受信息的目的地。

社会学家观点：是一个虚拟社会，是一个世界地球村，在Internet中能够找到现实生活中的某些特征和事实。

Internet上提供各种服务，供上网的用户使用，包括：WWW服务（网页浏览服务）、电子邮件服务、网上传呼、文件传输、在线聊天、网上购物、网络炒股、联网游戏等等。

WWW（World Wide Web）它是由遍布在Internet上的称为Web服务器的计算机组成，它将不同的信息资源有机地组织在一起，通过一种叫做“浏览器”的软件进行浏览。

基本工作过程：首先用户要连接到Internet，然后在浏览窗口中输入一个Internet地址（该地址通常对应于一个网页）并按[Enter]键后，请求显示Internet上的某个特定网页。

这个“请求”被浏览器通过电话线等网络介质传送到用户所在的服务器端，然后服务器作出“响应”，再通过网络介质把用户请求的特定网页传送到用户所在的计算机，最后由浏览器进行显示。

《网页设计与制作》第一章网页制作基础

块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。

网页制作课件ppt

提高网站流量，吸引更多潜在客户，提高品牌知名度和销售额。
SEO基本原则
关键词研究、内容质量、网站结构、外部链接和内部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使用CDN等方式提高页面加载速度。
移动端优化
确保网站在移动设备上显示良好，提高用户体验。
响应式设计
使网站能够适应不同设备和屏幕尺寸，提供一致的用户体验。
网站推广策略
关键词广告社交媒体营销
内容营销合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容在各种设备和屏幕分辨率上都能清晰显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰富的商品信息和购物体验。在制作电商网站时，需要考虑如何设计出美观、实用的商品展示页面，以及如何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的用户体验和购物体验。在制作电商网站时，需要考虑如何设计出易于操作和使用的界面和功能，以及如何提供个性化的服务和支持

第一课网页制作基础

统一资源定位器
统一资源定位器简称URL，是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。简单地说，URL确实是网络服务器主机的地址，也称作网址，如 /index.htm 即为一个标准的网址。
文件传输协议
文件传输协议简称FTP，是一种快速、高效、可靠的信息传输协议。通过那个协议，能够把文件从一台计算机传输到另外一台计算机，从而真正地实现资源共享。当站点完成后上传到互联网上时使用的确实是文件传输协议。
浏览器
浏览器是把在互联网上找到的文本文档和其他类型的文件翻译成网页的软件。通过浏览器，能够方便地和Internet互连，从而充分地利用网上的免费资源进行各种工作。目前使用最广泛的浏览器要紧有Microsoft（微软）公司研发的IE浏览器和Netscape（网景）公司研发的NE浏览器，还有国内腾讯公司的 TT浏览器。
域名
IP地址是一长串的数字号码，这些数字难记又难理解，为了方便用户理解、经历，科学家们引入了域名的概念。域名是用一些英文字符来代替IP地址，这些英文字符一般基本上英文单词，也可能是拼音字母，它们差不多上和站点名称一致，因此经历起来就十分容易了。域名的一般书写格式为主机名.机构名.地区名，如确实是新浪站点的域名。
上机实战
本课上机实战要紧练习装饰公司站点的
规划。在练习过程中，应结合课堂讲解中所学的知识（如站点的架构类型和站点用色技巧等）进行。在进行规划之前，到网上搜索相关的装饰公司网页作为参考。
确定站点名称
在进行站点规划时应先确定要建设站点的要紧
内容及站点名称，那个地方要规划的是一个装饰公司的站点，其站点名称为“为您享家装公司”。站点名称中“为您享”其谐音为“为您想”，很好地表达了公司全心为客户着想的服务宗旨，同时，“为您享”中的“享”有“享受”和“享福” 等美好的意思，意在表达公司的决心——为客户创造最好的、最舒适的和最完美的居室，同时也自信地表达了公司的能力——绝对能创建出一流的作品。

第一课网页制作基础知识.doc

第一课网页制作基础知识—、基础知识1、什么是网页网页是网站信息发布与表现的一种主要形式。

网页的内容与发布信息的目的和要求相关，网页的表现形式和效果与制作工具和创意水平有关。

2、网页的组成网页主要由文字、图片、动画、音频、视频等组成。

HTML （超文本标记语言）为一种全球广域网上文档中的标准标记语言。

HTML语言使用“标记”来指示Web浏览器应该如何显示网页元素，例如文本和图片，以及Web浏览器应该如何1口1复使用者的操作，例如超链接的启用是应通过单击键盘或单击按键或单击鼠标来完成。

HTML标记是HTML中用来鉴别网页元素的类型、格式和外观的文木字符串。

3、网页制作软件简介（1）网页编辑软件FrontPage、Dreameaver 等。

（2）网页图像编辑软件Photoshop 7.0x Fireworks 等（3）网页动画编辑软件Flash、Cool 3D 等。

4、网页制作准备工作（1）确定网站主题，选择主页题材下面我们开始肴手策划制作主页。

首先面临的问题便是我要制作什么内容，选择什么样的主页题材。

网络上的主页题材千奇百怪，琳琅满bl。

只要你想的到，就可以把它制作出来。

以下列出一些常见的题材，是否对你有点启发.古典音乐免费软件红楼梦网上教室古今佳句科幻小说金庸客栈国画画廊象棋世家能吃是福网页研习室国旗大展陶艺园地漫画天地中国足球摄影俱乐部幽默轻松体育博览中国古典诗词流行情报建议：1）.一般来说，个人主页的选材要小而精。

如果你想制作一个包罗万象的站点，把所有你认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色, 祥祥有却样样都很肤浅，因为你不可能有那么多的精力去维护它。

注意：网页的最大特点就是更新快。

目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。

2）.题材最好是你自己擅长或者喜爱的内容。

比如：你对诗歌感兴趣，可以放置日己的诗词；对足球感兴趣，可以报道最新的球场战况等等。