当前位置：文档之家 › 网页制作入门

网页制作入门

  • 格式：pdf
  • 大小：7.86 MB
  • 文档页数：32

参考资料以及课程准备
学习方法
Talk is cheap, show me the code
---Linus Benedict Torvalds
参考资料以及课程准备
学习方法
• 多敲代码
• 非常建议携带笔记本电脑来上课
• 聪明的学，而不是死用功 • 养成良好的编码习惯
参考资料以及课程准备
缩进可以让结构更清晰
பைடு நூலகம் 最后
第一节 课程简介
• 为什么要学习编程 • 关于学习编程的一些建议 • 编程工具推荐 • 课程设置以及考察方式
参考资料以及课程准备
这门课没有教科书
• 课程主要参考Coursera上面的三门课程：
• Introduction to HTML5, CSS3 and Javascript
• 另外也参考了W3School的内容
参考资料以及课程准备
Coursera
参考资料以及课程准备
W3School
/
{
第一节 课程简介
网页前端编程入门 郑骏明 beneon@
}
课程介绍
关于我
• 医学院护理系 • 临床医学专业 • 喜欢编程 • 希望和大家分享对于编程的热爱
课程介绍
这门课程
• 全校任选课 • 面相人群：无基础，对网页制作有一定兴 趣 • 没有考试 • 三次作业：占成绩25%，25%，50%
• DNS
• 电话黄页
打开一个网站的时候浏览器里面发生了什么
请求-响应 循环
• IP地址：
• xxx.xxx.xxx.xxx • 232=40亿个地址
• 文档
• /xuebao/xuebao.ht m • 默认
打开一个网站的时候浏览器里面发生了什么
请求-响应 循环
• 往往还需要请求更多的文件
编程工具
When you only have a hammer, everything looks like a nail to you
编程工具
文本编辑器
• Sublime text • Atom • Notepad++ • Vim • Notepad • Dreamweaver
• 返回
• 返回的不是“网页”，是文件 • 浏览器会打开网页文件然后决定如何展示
• 如果无法实现请求，会返回错误值
• 404 • 500
打开一个网站的时候浏览器里面发生了什么
输入 以后会发生什么：
• 浏览器从DNS服务器寻找IP地址 • DNS服务器返回IP地址：52.86.173.223 • 浏览器往这个IP地址发一个HTTP请求 • 服务器收到请求以后返回（response）请求的文件 • 浏览器收到返回以后开始渲染文件
在你打开一个网站的时候浏览器里发生了什么
打开一个网站的时候浏览器里面发生了什么
上网的“网”是什么？
打开一个网站的时候浏览器里面发生了什么
客户端-服务器
• 服务器
• 持续在线 • 存放共享文件 • 后台
• 客户端
• 电脑，手机 • 可以下线 • 前端
打开一个网站的时候浏览器里面发生了什么
请求-响应 循环
为什么要学编程？
Don’t just consume, create!
计算机语言也是一种语言
语言的目的就是为了交流
关于网络前端编程
为什么学习前端编程
• 很短的代码就可以出结果了 • 跨平台 • 入门门槛低 • 生态系统好，大量框架（JS） • 功能全面（JS）
关于网络前端编程
网页的变迁
• 2000：三剑客 • 2004：css • 2015：HTML5+css3+js
编程工具
Sublime text
编程工具
网页浏览器
• IE 9+ • Chrome • QQ，360等等
审查元素 / 检查 / inspection …
最后
资源下载与联系方式
• 课程课件会存放在网上
/s/1mgUtcXa
• 联系方式：
feprogram@
• URL
• /xuebao/xue bao.htm • 协议 • 域名 • 文档
打开一个网站的时候浏览器里面发生了什么
请求-响应 循环
• 协议
• http • https • ftp
打开一个网站的时候浏览器里面发生了什么
请求-响应 循环
• 域名
• • .edu, .org, .tv, .me
课程介绍
教学内容
• Html，css，javascript • 目标：
• 完成学习后了解HTML5网页制作流程 • 对于css，javascript有一定了解 • 可以建立自己的网页
课程介绍
授课安排
• 1~3周：html5，之后会布置第一次作业 • 4~7周：css3，第二次作业 • 8周：答疑，9周：中段总结 • 10周~14周：javascript，第三次作业 • 15周：总结，16周：答疑

合集下载

网页设计与开发入门教程

网页设计与开发入门教程

网页设计与开发入门教程第一章：网页设计基础在开始学习网页设计与开发之前，先要了解一些基础概念。

网页是由HTML（Hypertext Markup Language）语言编写的，并使用CSS（Cascading Style Sheets）来装饰和布局。

网页设计的目标是为用户提供一个美观、易于使用且功能强大的网站。

1.1 HTML基础HTML是一种标记语言，用于描述网页的结构和内容。

了解HTML的基本语法和标签是网页设计的第一步。

常用的HTML标签有标题（h1-h6）、段落（p）、链接（a）、图片（img）等。

1.2 CSS基础CSS用于控制网页的样式和布局。

它可以通过选择器选择网页上的元素，并为其应用样式。

了解CSS的基本语法和常用的样式属性（如颜色、字体、边框、背景等）是进行网页设计的关键。

第二章：网页设计工具为了更高效地进行网页设计与开发，可以借助一些专业的工具。

以下是一些常用的网页设计工具：2.1 Adobe PhotoshopPhotoshop是一个功能强大的图像处理软件，网页设计师常用它来创建和编辑用于网页的图像和图标。

掌握基本的Photoshop技巧，如裁剪、调整颜色和大小等，是进行网页设计的基础。

2.2 Adobe IllustratorIllustrator是用于创建矢量图形的软件，特别适用于设计和制作网页上的矢量图标和图形。

熟悉Illustrator的绘图工具和路径编辑功能可以帮助网页设计师实现更精细的设计。

2.3 Sublime TextSublime Text是一款轻量级的代码编辑器，它支持多种编程语言和自定义插件。

在网页开发过程中，使用Sublime Text可以提高代码编写的效率和舒适度。

第三章：网页布局与排版在进行网页布局时，考虑到用户的使用习惯和视觉效果非常重要。

以下是一些常用的网页布局技巧：3.1 响应式设计随着移动设备的普及，响应式设计成为了一种必不可少的技术。

通过使用CSS媒体查询和流式布局，可以使网页在不同设备上自动适应，并提供更好的用户体验。

第2章 HTML入门(网页制作案例教程课件)

第2章 HTML入门(网页制作案例教程课件)

2020/7/26
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
网页编程入门(完整版)

网页编程入门(完整版)

网页编程入门（一）作者：吴刘平文章来源：作者原创更新时间：2006-6-10网络技术飞速发展，互联网正在由以前所说的“走近千家万户”向“走进亿家亿户……”。

网络信息主要来自各种形形色色的网站，不少网络发烧友开始追逐着建设网站的热潮。

网站的信息必须通过网页输出信息，于是要想通过网站发布信息，必须首先学会制作网页。

谈到制作网页，可用的设计工具就太多太多了，有大家熟悉的Dre amveaver、FrontPage、Flash……不同的工具有不同的特点。

总体上来说，网页发布的信息主要通过以下媒体实现：文字、图片、动画、音频和视频，当然更多的是这几种方式的综合体，也就是我们常说的多媒体了（我以前听过一位领导说多媒体是会议厅里使用的电脑和投影设备，这是不对的哟，呵呵）。

说了这么一大堆不相干的，可能有些朋友等不急了，不是说编程吗？怎么尽是些不上叉的，别急，马上就来了……为了能够对所发布的信息进行自由的控制，就需要通过编程来实现了，通过编程，我们可以实现对发布的信息进行动态控制和管理，如果学会了网页编程，我们几乎可以用任何文字编程软件都可以制网页了。

网页编程的道路漫长，千里之寻始于足下，就让我们从html代码开始吧（别说你讨厌代码哈，要是这样的话，你还是不要学习编程的好，因为编程从某种意义上来说，就是编写代码）。

下面就以大家熟悉的FrontPage为例来学习以下html编程吧！先启动FrontPage(如果你的电脑里没有，那么就重新找Office光盘来安装），然后就会进入网页编辑制作界面（上部是菜单、工具栏，左边是视图区，在视图区的右边就是我们设计的主要场所了），我们会看到new_page1.htm标题（是F rontPage默认的网页文件名），在设计区的下面，有三张索引卡可供选择，默认为“普通”，另外还有“html”和“预览”两张。

点击一下"html"你就会看到你所创建网页的代码了，大致代码如下所示：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>New Page 1</title></head><body></body></html>尽管是空的页面，但在代码上却有不少内容了。

网页设计与制作课件第1章

网页设计与制作课件第1章

上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。