HTML5+CSS3+JavaScript-网页设计实战--第一章
Web前端开发案例教程(HTML5+CSS3) 第1章 WEB前端开发概述
1.2 WEB相关概念
WEB相关 概念
1
2
3
IP地址 域名 URL
4 HTTP
5
网站、网 页与主页
6
7
HTML Web标准
13
第1章 WEB前端开发概述 1.3 HTML5概述
14
1.3 HTML5概述
HTML5是超文本标记语言的第5代版本， 目前在互联网的应用越来越普及。HTML5将 WEB应用带入一个标准的应用平台。在 HTML5平台上，视频、音频、图像和动画等 都被标准化。
本书是学习WEB前端开发技术的教材，主要学习利用HTML5和CSS3构建WEB网页的知识。
3
第1章 WEB前端开发概述 1.2 WEB相关概念
4
1.2 WEB相关概念
1、IP地址
IP地址(Internet Protocol Address)用于确定Internet上的每台主机，它是 每台主机唯一性的标识。在 Internet 上，每台计算机或网络设备的 IP 地 址是全世界唯一的。 IP 地址的格式是 xxx.xxx.xxx.xxx，其中 xxx 是 0 到 255 之间的任意整数。 例如，某台主机的 IP 地址是 61.172.201.232。
火狐浏览器
谷歌浏览器
21
1.5 创建第一个HTML5页面
编辑创建网页可以使用常用的文本编辑器，如Editplus、记事本等。但最方便 的网页制作工具是Dreamweaver，其智能化的输入代码方式、方便的可视化操作都 为网页制作和浏览提供了很大的方便。本节介绍在Dreamweaver 环境下创建网页的 步骤。
与前端开发对应的是后端开发，如果只做WEB前端的话，则只能供用户浏览而不 能与服务器交互。因此，要想开发一个用户体验更好、功能更强大的网站，我们就有必 要去学习一些后端技术。譬如PHP、JSP和等这些开发技术，通过这些编程 工具的使用，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。
网页设计与制作案例教程(HTML5+CSS3) 第1章网页基础
1.3 基础项目2：制作“陈欧介绍”网页
WEB
11
1.3 基础项目2：制作“陈欧介绍”网页 知识技能目标
（1）了解Dreamweaver工作界面，熟练掌握创建站点及网页的方法。 （2）初识超链接，能够为当前网页添加指向同站点内其它页面的超链接。 （3）了解HTML语言和CSS样式基本书写格式。 （4）掌握<style>标签的使用方法，能够使用<style>标签创建内部样式表。
网站程序开发
1.2.1 网 站 开 发 流 程
后 期 测 试 发 布
页面效果 链接有效性
浏览器兼容性 网站发布
视觉效果、布局、内容、亲 和力、易操作…… 所有链接是否都跳转正常、 所有页面是否均可到达…… 在各主流浏览器下均能正常 显示
本地发布、远程发布
测试过程通常也伴随着优化过程，优化是尽可能地减小网页文件的体积及日后发生错误的机率。
更改界面颜色
1.4.4 使用Dreamweaver CC 2018的几个小技巧 实时预览 快速更改代码（Ctrl+E） 同时编辑多行代码
WEB
13
1.5 提高项目：制作“青春颂歌”网页
14
1.6 拓展项目：制作“支付”网页
15
4
1.2 知识库：网页基础知识
1.2.1 网 站 开 发 流 程
前期准备
中期制作
后期测试 发布
WEB
5
1.2.1 网 站 开 发 流 程
前期准备 需求分析 确定主题 确定网站架构 收集素材 设计页面 导出效果图切片
功能分析、目标用户分析、内容分析等
1.2.1 网 站 开 发 流 程
中期制作
创建站点 静态页面制作
HTML5+CSS3网页设计与制作单元1 站点创建与制作商品简介页面
③ 显示或隐藏【属性】面板的另一种简便方法
双击【属性】面板左上角的“属性”标题，就会隐藏属性面板。属性面板隐藏时，单击 该“属性”标题，就会显示属性面板。
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
（8）面板组 Dreamweaver CC 包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成
了面板组，如图1-12 所示。 ① 显示面板的方法：单击【窗口】菜单选择相应的菜单选项，如图1-13 所示。 ② 显示或隐藏各个面板的另一简便方法：双击面板的标题，如图1-14所示。
▲▲▲
【任务1-1-1】启动Dreamweaver CC与初识其工作界面
任务描述
①启动Dreamweaver CC。 ② Dreamweaver CC 的工作界面主要包括菜单栏、工具栏、文档窗口、属性面板、面板组 等，熟悉Dreamweaver CC 工作界面各个组成部分的主要功能。
任务实施
1．启动Dreamweaver CC 执行【开始】→【所有程序】→【Adobe Dreamweaver CC】菜单命令， 即可启动 Dreamweaver CC。Dreamweaver CC 的启动画面如图1-2 所示。启动成功后，会出现图 1-3 所示的工作界面。
目录导航
渐进训练
任务 1-1 制作电脑版商品简介页面0101.html
探索训练
任务 1-2 制作触屏版商品简介页面0102.html
析疑解惑 单元小结
任务 1-1 制作电脑版商品简介页面0101.html 任务描述
制作电脑版商品简介页面 0101.html，其浏览效果如图1-1 所示。
图1-1 网页0101.html 的浏览效果
（5）【标准】工具栏 【标准】工具栏中包含网页文档的基本操作按钮，例如【新建】【打开】【保存】【剪切】
HTML5+CSS3移动Web开发实战 单元1 跨平台的网站首页设计
图1-1 携程旅行网首页0101.html的浏览效果
表1-1 网页0101.html的HTML代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 HTML代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>酒店预订,机票预订查询,旅游度假-携程旅行网无线版官网</title> <link href="css/common.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <header> <div class="img-item img-size" > <a href="#"><img src="images/01.jpg" title="携程旅行" /></a> </div> </header> <nav> <ul class="nav-list"> <li class="nav-flight" ><h2><a title="机票" href="#" >机票</a></h2></li> <li class="nav-train" ><h2><a title="火车票" href="#" >火车票</a></h2> </li> <li class="nav-car" ><h2><a title="用车" href="#" >用车</a></h2></li> <li class="nav-hotel" ><h2><a title="酒店" href="#" >酒店</a></h2></li> <li class="nav-fortun" ><h2><a title="财富中心" href="#">财富中心</a></h2></li> <li class="nav-strategy"><h2><a title="攻略" href="#" >攻略</a></h2> </li> <li class="nav-trip" ><h2><a title="旅游" href="#" >旅游</a></h2></li> <li class="nav-ticket" ><h2><a title="门票" href="#" >门票</a></h2></li> <li class="nav-week" ><h2><a title="周末游" href="#" >周末游</a></h2> </li> </ul>
网页设计与制作(HTML5 CSS3 JavaScript)教学大纲
《网页设计基础》课程编号：...课程名称：网页设计基础学分：3 学时48 （其中实验学时：16）先修课程：计算机基础B一、目的与任务本课程是本科文科各专业的一门必修的计算机基础课，是计算机基础教学中的重要环节。
本课程的主要任务是使学生掌握在信息社会中必要的计算机应用技能——网页设计与制作，培养学生的计算机文化意识。
课程将讲授HTML、CSS、JavaScript等基本技术，并通过大量实验使学生掌握网页设计与制作技能，为培养理论与实践相结合的、全面发展的计算机应用高级人才打下基础。
二、教学内容与学时分配理论教学部分（32学时）第1章HTML5基础（2学时）浏览器、服务器和URL创建网站的基本步骤HTML的概念和原理使用基本HTML标记符（<html> <head> <title> <body> <p>）创建简单网页第2章文本格式与超链接（4学时）段落格式字体格式列表格式创建超链接第3章CSS入门（4学时）CSS样式定义CSS的属性单位3种CSS样式表5种CSS选择器3种常见CSS属性第4章图像与多媒体（2学时）网页图像基础图像处理基本操作图像标记符img使用多媒体对象第5章表格与表单（2学时）创建表格表格的属性设置创建表单创建表单控件第6章CSS3进阶（6学时）CSS3高级选择器CSS3布局CSS3高级属性CSS3样式的优先级第7章JavaScript与前端开发（3学时）使用客户端脚本JavaScript编程*前端开发技术第8章网页设计基础（3学时）设计与认知网站设计的原则设计适于导航的网页设计网站导航设计版式第9章使用Dreamweaver（3学时）使用本地站点编辑网页使用CSS样式高级功能第10章综合项目实践（3学时）网站开发项目管理综合实例实验教学部分（16学时）实验0：确定网站主题（搜集资料）实验1：制作纯文本网站（2学时）实验2：添加CSS（2学时）实验3：加入图片与多媒体（2学时）实验4：表格与表单（2学时）实验5：CSS布局（2学时）实验6：综合项目实践（6学时）三、考核与成绩评定采用日常性考核（大作业）和期末终结性考核相结合的方式。
Web前端开发——HTML5 + CSS3 +JavaScript智慧树知到答案2024年潍坊学院
Web前端开发——HTML5 + CSS3 +JavaScript潍坊学院智慧树知到答案2024年第一章测试1.WWW 是（）的意思。
（）A:浏览器 B:网页 C:万维网 D:超文本传输协议答案:C2.统一资源定位符是指：（）A:因特网上标准的资源的地址。
B:服务器地址。
C:从一个网页指向另一个目标的连接关系。
D:Web服务器。
答案:A3.以下属于浏览器的是：（）A:IE B:Google Chrome C:Mozilla Firefox D:Hbuilder答案:ABC4.Web前端开发主要任务是信息内容的呈现和用户界面设计。
（）A:错 B:对答案:B5.CSS（也称为层叠样式表）是用来呈现网页外观样式的一组规范，它可以定义网页的样式表现。
（）A:对 B:错答案:A6.JavaScript是一种运行在的服务器端的脚本语言，使用Javascript可以开发交互式的Web页面。
（）A:错 B:对答案:A7.Document Object Model文档对象模型，DOM与JavaScript结合起来实现了Web网页的行为与结构的分离。
（）A:对 B:错答案:A8.BOM主要处理浏览器窗口和框架，常见的BOM窗口有Window对象、Navigator对象、Screen对象、History对象和Location对象。
（）A:对 B:错答案:A9.AJAX即异步JavaScript和XML，是一种支持异步请求的技术。
（）A:错 B:对答案:B10.同一个HTML页面，在不同浏览器上的显示效果是一样的。
（）A:对 B:错答案:B11.Web前端开发常用的技术有：（）A:JavaScript B:CSS C:PHP D:HTML答案:ABD12.浏览器对HTML文档解析显示的结果就是我们平时看到的网页。
（）A:错 B:对答案:B13.下面哪一个工具用于Web前端开发？（）A:Hbuilder B:C++ C:Matlab D:Java答案:A14.在URL地址中多个参数之间使用（）进行分割。
网页设计与制作HTML5+CSS3+JavaScript课程设计
网页设计与制作HTML5+CSS3+JavaScript课程设计1.课程目标本课程旨在培养学生对网页设计的基本理解、前端技术的熟悉程度，以及网页制作的实际操作能力。
在课程的基础上，学生将掌握HTML5、CSS3和JavaScript这三个最重要的网页前端技术，从而能够实现对网页的基本设计和制作。
2.课程安排第一周•网页设计的基本原理和概念•前端技术的介绍和发展•HTML5的语法和基本元素–标题、段落、表格、图片、链接、表单等第二周•CSS3的基本规则和语法–选择器、属性、值•CSS3的基本样式和效果–文本格式、背景、边框、盒子模型等第三周•JavaScript的基础语法和应用–变量和数据类型、运算符、条件语句、循环语句等•JavaScript的事件和DOM操作–事件响应、选择元素、修改属性、插入、删除元素等第四周•综合实践项目–学生完成自己的网页设计和制作项目–应用HTML5、CSS3和JavaScript技术3.课程教材本课程主要使用以下教材：•《Head First HTML5 Programming》，Eric Freeman and Elisabeth Robson，O’Reilly Publishing，2011。
•《CSS3: The Missing Manual》，David Sawyer McFarland，O’Reilly Publishing，2012。
•《JavaScript: The Definitive Guide》，David Flanagan，O’Reilly Publishing，2011。
以上教材内容详尽，机构其他完整案例较多，内容丰富，是本课程的主要参考教材。
4.考核方式学生的考核主要以实践为主，包括大作业和期中期末报告，但同时也会有一些理论知识的测试。
大作业每位学生需要完成一个个人网页项目，实践掌握本课程所讲述的HTML5、CSS3和JavaScript技术。
HTML5+CSS3网页设计与制作单元1 站点创建与制作商品简介页面
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
（3）【插入】工具栏
显示【插入】工具 栏的方法是：选择菜单 命令【窗口】→【插 入】，在Dreamweaver CC 的主界面的右侧将显 示【插入】工具栏。通 常情况下会显示“常用” 插入工具栏，如图1-5 所 示。
利用【插入】工具栏可以快速插入多种网页 元素，例如div 标签、图像、表格、表单和表单 控件等。在【插入】工具栏类型列表中单击菜 单选项，即可切换不同类型的插入工具栏，如 图1-6 所示。
图1-9 显示【标准】工具栏的快捷菜单
2．熟悉Dreamweaver CC工作界面的基本组成及其功能 （6）“文档”窗口 “文档”窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的 共同体。用户可以在文档工具栏中单击【代码】【拆分】或者【设计】按钮，切换窗口视图。 （7）【属性】面板 【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。 属性面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，属性面板上将出现 该图像的对应属性，如图1-10 所示。
（5）【标准】工具栏 【标准】工具栏中包含网页文档的基本操作按钮，例如【新建】【打开】【保存】【剪切】
【复制】【粘贴】等按钮，如图1-8 所示。
图1-8 【标准】工具栏
【提示】
如果【标准】工具栏处于隐藏状态，可以在已显示工 具栏位置单击右键，弹出图1-9 所示的快捷菜单，在该快捷 菜单中选择【标准】命令即可显示【标准】工具栏。
图1-1 网页0101.html 的浏览效果
▲▲▲
【任务1-1-1】启动Dreamweaver CC与初识其工作界面
任务描述
①启动Dreamweaver CC。 ② Dreamweaver CC 的工作界面主要包括菜单栏、工具栏、文档窗口、属性面板、面板组 等，熟悉Dreamweaver CC 工作界面各个组成部分的主要功能。