第零章 HTML启蒙知识与网站开发流程
Web前端启蒙知识：
1、软件架构模式
a)B/S架构：Browser-Server 浏览器服务器模型
b)C/S架构：Client-Server 客户端服务器模型
注1：浏览器是运行网页的应用程序
注2：B/S架构的运行模式：请求(request)-响应(response)模式
2、静态网页和动态网页的区别：是否与服务器交互
3、网页的四个组成部分
a)内容——图片、文字、音频视频等。【后期存储在数据库中】
b)结构——HTML,定义网页内容
c)表现——CSS，修饰美化
d)行为——JavaScript，JQuery。动作和事件
4、B/S 结构中的四个部分分别是：
（1）由网页组成的Web应用程序;
（2）存放 Web 应用程序并提供网页浏览服务的 Web 服务器；
（3）解析网页并显示网页给用户浏览的客户端浏览器；
（4）在客户端和 Web 服务器端提供通讯的 HTTP 网络协议。
5、HTML基本框架
<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
注：head头部；body身体——包含网页内容（可以是文本、图像等）
6.HTML基本语法
<开始标签 属性1="属性值1;属性值2" 属性2="属性值">元素内容</结束标签>
注：多个属性空格隔开，多个属性值分号分隔。
7.CSS基本语法
选择器{
属性:属性值;
属性:属性值 属性值 属性值;
……
}
网站开发流程
1、开发流程主要包括需求分析、网站制作、网站发布以及测试。
2、需求分析
1) Why——为什么需要建站?即明确组建网站的目的【目的】
l 应用程序的界面一般包括两类： 一种是桌面窗口形式(例如Windows 中的记事本、Office 等)，一般也称为 C／S 应用(Client／Server，客户端／服务器模式)
l 一种是采用网页的形式(例如表 9—1 例举的企业内部信息系统)，一般也称为 B／S 应用(Browser／Server，浏览器／服务器模式)
2) Who——谁来访问?即确定网站的目标受众【客户】
l 一般需要分析目标受众的年龄、兴趣爱好、经济状况等方面的问题。
l 美工人员在设计网站界面草图时，也需考虑时尚、明快的设计样式，包括整个网站的色彩、Logo、图标设计等。
3) What——内容是什么?即确定网站的内容【功能】
l 内容决定一切，内容价值决定了访问者的去离。我们需要结合公司的业务背景，设计相关内容的页面，充分展示网站的价值，让访问者尽快获取到自己需要的内容。
l 设计的主要页面有以下几个：
n 首页(index.htm) ：包括网站导航、商品广告、商品分类、版权声明等内容。
n 某类商品展示页(catlist.htm)：展示某类商品下的具体商品。
n 具体商品的详细介绍页(info.htm)：包括商品的名称、性能描述等。
n 购买商品页(buy.htm)：在线购买的商品情况，即购物车。
n 注册页(register.htm)：注册为网站会员。
n 登录页(login.htm)：使用账号登录网站。
n 帮助页(help.htm)：客户服务方面的帮助信息。
注：一般还需要美工人员使用 Photoshop 等工具，设计相应的页面效果图并提交给客户确认。
3、网站制作：
l 完整的网站制作包括以下两个过程。
n 前台页面制作：拿到美工的效果图以后，编写 HTML、CSS，将效果图转换为*.html 网页,其中包括图片收集、页面布局规划等工作。
n 后台程序开发：实现网站和数据库的连接、内容动态添加或修改等后台功能。
4、 测试：
l 测试网页包括测试以下内容。
n 测试网页是否符合需求。
n 测试并修复网页可能出现的漏洞(bug)。
u 根据客户使用的浏览器的类型和版本， 测试能否同时兼容。 一般要求能同时兼容 IE 6.0、 IE 7.0、IE8.0 及 Firefox3.5，并符合 W3C XHTML 1.0 标准。
5、 发布网站
l 网站空间
n 网站空间就是存放网站内容的空间，一般对应为网站服务器的某个文件夹目录。
l 域名(网址)
n 本地的网站内容通过 FTP 等方式上传到虚拟主机空间后，还需要一个可供他人访问的 URL地址(即网址)。域名解析
6、 Dreamweaver 创建站点
l 建立站点及相关的目录结构
n 建立站点
n 建立目录结构
n 中小型网站，一般会创建如下通用的目录结构。
u images 目录：存放网站的所有图片。
u js 目录：存放 JavaScript 脚本文件，后缀名为*.js，JavaScript
u css 目录：存放 CSS 文件，即前面曾提及的外部 CSS 文件，实现内容和样式 的分离。
u 对于网站下的各网页文件，例如，index.html 等一般放在网站根目录下。
注意：网站目录及网页文件名一般都为小写，并采用代表一定含义的英文命名。
l 除非特殊应用外， DIV+CSS 布局绝对是首选。
7、 命名规范
l Web页面的开发目前还没有类似 Java 或 C#方面的开发规范， 但对于以上各DIV块，习惯采用如下命名规则 (这些命名甚至已列入 W3C 的 HTML 5 草案的规范中)：
container：容器
header：顶部
footer：底部
main：页面主体
logo：企业标志图片
copyright：版权信息
content：页面主体内容
sidebar：侧边栏
l 各div块的样式可以采用 ID或 class一般大的 div区块(黑体标识的4个)用 ID。
8、 设置浮动：
l 用<div>标签分区并设置 ID 标识。
l 设置浮动
l 调整宽高及盒子属性实现实际效果。
本章总结：Ø
l 网站开发流程一般包括需求分析、网站制作、测试网页、发布网站几个环节，其中前期的需求分析非常重要，一般还需要美工人员设计界面草图及和客户进行反复确认。
l 制作网页前一般需要使用 Dreamweaver 工具搭建站点的目录结构，除此之外，还可以使用Dreamweaver 的智能提示功能，辅助编辑 HTML 代码。
l 首页整体布局的实现思路采用的是内容和样式分离的思想。
n 根据效果图规划并编写 HTML 组织结构，并尽量使用语义化的 HTML 标签。
n 在单独的 CSS 文件中设置相关的盒子属性，需要注意各 div 块的规范命名。
l 首页顶部实现的关键点有以下四点。
n 合理使用左右浮动，实现零散布局。
n 一图一文混编，并且在同一行，可以用 div-dl-dt-dd 分两类来实现布局。
n 偏移量技术的典型应用。
n 用 a：hover 伪类实现鼠标悬浮的特效。
l 首页左部实现的关键点有以下三点。
n 只用行高布局来实现多行文字布局的浏览器兼容。
n 区域衔接原则：在右侧或底部添加内边距来实现。
n 重要标题使用<hl>，以利于搜索引擎优化。
l 首页中部实现的关键点有以下三点。
n 利用 div-dt-dl-dd 的特点实现一图一文混编并需要多行布局的应用场景。
n <dt>和<dd>存在默认内边距与外边距，布局时应先清零。
n 把图片和文字分别放入不同的容器<dt>和<dd>，以便对它们进行排版。
第零章 HTML启蒙知识与网站开发流程的更多相关文章
- asp.net 网站开发流程总结
由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网 ...
- 手机移动端网站开发流程HTML5
手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...
- HTML5移动端手机网站开发流程
基本上开发手机网站,可大致分为两大类.一类是用框架开发手机网站.一类是自己手写手机网站. 一.框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap).jQuery ...
- 《python语言程序设计》_第二章笔记之2.13_软件开发流程
#程序1: 设计:由用户键入利率.贷款数以及贷款的年限,系统计算出每月还贷数和总还款数 注意:输入的年利率是带有百分比的数字,例如:4.5%.程序需要将它除以100转换成小数.因为一年有12个月,所以 ...
- 编程基础知识——Java JNI开发流程（2）
android中使用jni调用本地C++库 android平台上的本地库文件后缀 .so.类似windows上的dll文件. 要在android上使用jni.首先须要下载android ndk. 操作 ...
- 【odoo14】第十四章、CMS网站开发
第十四章.CMS网站开发** Odoo有一个功能齐全的内容管理系统(CMS).通过拖放功能,你的最终用户可以在几分钟内设计一个页面,但是在Odoo CMS中开发一个新功能或构建块就不是那么简单了.在本 ...
- 【odoo14】第十三章、网站开发（对外服务）
本章我们将介绍一些关于odoo web服务方面的基础知识.进阶的内容,将在第十四章介绍. odoo中的web请求是由python的werkzeug库驱动的.odoo为了操作方便,对werkzeug进行 ...
- PureStudy：学科知识分享——个人网站开发全解
PureStudy:学科知识分享--个人网站开发全解 项目描述 PureStudy,学科知识分享网站. 学生可以使用这个网站,来浏览相应学科的知识点.学习总结,获取相关的资料.此外,他们可以选择上传文 ...
- UNIX环境高级编程--第一章 UNIX基础知识
第一章 UNIX基础知识 1.2 UNIX体系结构 从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...
随机推荐
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle
安装 webpack-node-externals yarn add -D webpack-node-externals
- 查询执行成本高（查询访问表数据行数多）而导致实例 CPU 使用率高是 MySQL 非常常见的问题
MySQL CPU 使用率高的原因和解决方法_产品性能_常见问题_云数据库 RDS 版-阿里云 https://help.aliyun.com/knowledge_detail/51587.html ...
- 2017年蓝桥杯省赛A组c++第7题(正则问题)
/* 描述:正则问题 考虑一种简单的正则表达式: 只由 x ( ) | 组成的正则表达式. 小明想求出这个正则表达式能接受的最长字符串的长度. 例如 ((xx|xxx)x|(x|xx))xx 能接受的 ...
- 转：环绕通知返回值 object 类型
遇到 AOP 环绕通知报错 “return value from advice does not match primitive return type for: public boolean” 百 ...
- oracle partition table 分区表详解
Oracle partition table 分区表详解 分区表就是通过使用分区技术,将一张大表,拆分成多个表分区(独立的segment),从而提升数据访问的性能,以及日常的可维护性.分区表中,每个分 ...
- LeetCode 977 Squares of a Sorted Array 解题报告
题目要求 Given an array of integers A sorted in non-decreasing order, return an array of the squares of ...
- synchronized使用
在一个方法内部使用如下代码: public void m5() { synchronized (Test1.class) { System.out.println("m5"); t ...
- 接口测试工具-Jmeter使用笔记（三：管理请求服务器信息和Headers参数）
如果使用Jmeter同时执行多个http请求任务,就需要创建多个HTTP取样器,每一个取样器都来手动填写服务器信息和端口号,会非常消耗时间. 解决方法:Jmeter之HTTP请求默认值 1.添加方式 ...
- （4.28）for xml path 在合并拆分上的作用演示
for xml path 用于合并与拆分 1.合并 很多时候需要在SQL Server中创建逗号分隔列表.这可以使用SQL Server的DOR XML PATH功能完成.与select语句一起使用时 ...
- WordPress禁用插件另类方法不用进后台
刚刚一小美女说她在WordPress后台启用了一个插件后出现了问题,网站前端和后端都不能打开了,ytkah查看了一下是有个插件api和另一个插件冲突了,但要怎么禁用呢?有两个办法可以解决 1.直接删除 ...