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启蒙知识与网站开发流程的更多相关文章

  1. asp.net 网站开发流程总结

    由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网 ...

  2. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  3. HTML5移动端手机网站开发流程

    基本上开发手机网站,可大致分为两大类.一类是用框架开发手机网站.一类是自己手写手机网站. 一.框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap).jQuery ...

  4. 《python语言程序设计》_第二章笔记之2.13_软件开发流程

    #程序1: 设计:由用户键入利率.贷款数以及贷款的年限,系统计算出每月还贷数和总还款数 注意:输入的年利率是带有百分比的数字,例如:4.5%.程序需要将它除以100转换成小数.因为一年有12个月,所以 ...

  5. 编程基础知识——Java JNI开发流程（2）

    android中使用jni调用本地C++库 android平台上的本地库文件后缀 .so.类似windows上的dll文件. 要在android上使用jni.首先须要下载android ndk. 操作 ...

  6. 【odoo14】第十四章、CMS网站开发

    第十四章.CMS网站开发** Odoo有一个功能齐全的内容管理系统(CMS).通过拖放功能,你的最终用户可以在几分钟内设计一个页面,但是在Odoo CMS中开发一个新功能或构建块就不是那么简单了.在本 ...

  7. 【odoo14】第十三章、网站开发（对外服务）

    本章我们将介绍一些关于odoo web服务方面的基础知识.进阶的内容,将在第十四章介绍. odoo中的web请求是由python的werkzeug库驱动的.odoo为了操作方便,对werkzeug进行 ...

  8. PureStudy：学科知识分享——个人网站开发全解

    PureStudy:学科知识分享--个人网站开发全解 项目描述 PureStudy,学科知识分享网站. 学生可以使用这个网站,来浏览相应学科的知识点.学习总结,获取相关的资料.此外,他们可以选择上传文 ...

  9. UNIX环境高级编程--第一章 UNIX基础知识

    第一章 UNIX基础知识 1.2 UNIX体系结构   从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...

随机推荐

  1. FW--tomcat bi-laternal https and keytool

    说明:按照本文中以下内容配置https,猫server.xml中clientAuth=false,单向验证的时候,网页中可以访问:当clientAuth=true进行双向验证的时候,网页中不可以访问: ...

  2. DBCHART

    dbchart1.Series[0].DataSource := adoquery1; dbchart1.Series[0].XLabelsSource := 'aaaa'; dbchart1.Ser ...

  3. LeetCode 669 Trim a Binary Search Tree 解题报告

    题目要求 Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so t ...

  4. java JDBC (四)

    package cn.sasa.demo4; import java.sql.Connection; import java.sql.PreparedStatement; import java.sq ...

  5. 【Mock】mock基础、简单的单元测试代码练习。

    说到接口测试,必问 mock,mock 通俗一点来说就是模拟接口返回.解决接口的依赖关系,主要是为了解耦,单元测试用的多. 什么是Mock unittest.mock 是一个用于在 Python 中进 ...

  6. python安装提示ImportError: No module named web

    今天在开发一个项目时出现错误,重新安装了一下python和yum,然后面板就无法启动了,提示需要安装web依赖,但是具体是哪个web源呢,pip install web不行 Traceback (mo ...

  7. what's the python之模块

    正则表达式 首先,我们引入了正则表达式的知识.所谓正则表达式,就是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对 ...

  8. shell编程awk进阶

    awk操作符 算术操作符:  x+y, x-y, x*y, x/y, x^y, x%y      -x: 转换为负数      +x: 转换为数值 字符串操作符:没有符号的操作符,字符串连接 赋值操作 ...

  9. 009-Iterator 和 for...of 循环

    一.概述 原文地址:http://es6.ruanyifeng.com/#docs/iterator 二.详细 2.1.概念 遍历器(Iterator)是一种机制.它是一种接口,为各种不同的数据结构提 ...

  10. NYOJ 92

    1.深搜(会爆栈,通过开全局栈模拟递归) 爆栈代码 # include<iostream> # include<string> # include<string.h> ...