这个在一年前就有写过了。
不过现在可能没有那么热了，都有现成的工具。现成的高级模板。
然而又是无线当道的年代。基本用不到这些基础的代码知识。
但是我觉得对于资金不足，或者自己想慢慢体验兼职做电商的朋友还是有一点用。
学会了对于网店的SEO以及排版，美观、方便程度也有一定的帮助。
例如：描述里的一些间距过宽，描述参数信息想做成可以随意编辑的啊。想换一个整体的背景色，或图案背景啊。。。。。。。。
有些代码是可以用PS直接生成即可，但是有时又往往不尽人意。如果就为了这个而再请一个程序又有点大才小用。当然有经济实力的大店那就例外。
有时很专业的程序也并不一定能适应电商的规则。用写网页的那一套来写电商的代码很多都会水土不服。曾经就出现很多精通代码的高手来问我这半桶水的啊。当然这个一般专业的适应也是比较快的。可以说一点就通。只要稍了解即可解决水土不服问题。
因为一般电商平台都只是开放最基本最简单的一些HTML+CSS功能，简单到对于专业人士可以忽略没把他当回事。
-------------------------------------
下面就以这个展示的效果为例。
模特图片来自淘宝店铺（小镇姗姗）
模特原图大小为800*1200，
没经过任何截剪压缩美化处理。
下面是用DW软件（dreamwevercc2015）展示的
设计与代码视图。（如下图）
我们要用到的就是 中间的内容 红框框住的部分。上部分主要是一些网页的一些重要信息。为了我们在编辑时按F12用浏览器查看效果使用。如果没有删除了，可能上面如（秋季美衣促销）文字可能会出现乱码不认识的文字了。其实这个放到淘宝也会自动正常的啊。（如下图）
、
一般淘宝建议用表格布局，虽然现在做网页的都是提倡DIV+CSS，但是我觉得淘宝用表格更直观简单易调整些。
用图的四张商品图片以及一张纹理背景图片。
-------------------------------------------
下面是完整的代码，我已把图片上传空间，然后替换成淘宝相册空间的地址：为了拿去测试，测试时最好要把图片另存为上传到你的相册空间替换了再放到你店铺。不然可能会警告，不可以使用他人空间的图片。
秋季美衣促销
Associated promotion
-------------------------------------------
把上面格子代码最简单化就是：
--------------------------分解说明-----------------------------------
： 表格的开始
：这个表示一行
三格合并成一个单元格
：第一行的结束
：这个表示第二行
单元格
单元格
单元格
：第二行的结束
：这个表示一行
单元格
单元格
单元格
：第三行的结束
： 表格的结束
从上面的就可以看出这是一个三行三列的表格，最上面一行是三个合并成一个了。做标题写文字或插入一个长条的海报页眉都可以。
--------------------------分解说明-----------------------------------
1.【width="750" 】这个表示表格的宽度是750，也就是淘宝描述的宽度，如果是在首页用950自定义，那这里可能要改成950宽了，当然这里改了，其它六张图片的宽度也要相应增加。比如现在每张图片的宽度是244，如上图片地址后面紧跟着就是图片的宽度width="244" ， 如果变成950宽，那就是950-750=200/3张图片的宽度=66.66666约66，然后244+66=310，那么要放在首页就要把图片的宽度改成310就是首页使用的了。
2.【border="0"】这个表是边框，一般我们写的是0，有这个边框真的不好看。你可以改成1或2试下效果。
3.【align="center"】这里表格一般表示居中对齐。这个是对齐，有三个参数，分别是：左对齐：left 居中对齐：center 右对齐：right ，那么我们这个表格整体是居中对齐的。
4.【cellpadding="0" cellspacing="0"】这里是单元格边距，和单元格间距，不过现在这个一般设置成0即可。
5.【bgcolor="#ffffff"】这个就是表格整体的背景颜色，如果在单元格里面就是单元格背景。（颜色值可以去网上搜索“颜色值查询”你会找到很多的也可以直接用PS软件选取）需要透明背景的话，就直接把这个代码去掉。以及要是有背景图片也要去掉。
6.【style="background:url(!!169171891.jpg) center;"】这个也是背景，但是可以加背景图片，当然方法有很多，具体就不讲那么深入，如想深入学习可以去【】自行学习HTML语方和CSS语言。简单学习，了解方法，不一定要全部记住，也可以把这个网站当工具书。用得多了就会了。
7.【class="65d6-fcff-489d-4072 ziyoou"】这个类，在这里可有可无，只是我习惯性的，一个记号而以，写网站前端就非常有用。
8.【colspan="3"】这个是合并单元格，因为一排有三个格子，所以是3，如果是4格就是4了，当然这个一般用DW软件完成，直接选择三个单元格，然后点一下属性栏上面的合并单元格即可。如下图箭头所指处。
9.【padding:5px 4px 0px 4px;】这个就是间距，非常非常重要，一般是写在style=" "类联样式里面，写法也有很多种，我一般喜欢四个参数一起写的。也就是分别表示上，右，下，左，上边距是：5px，右边距是：4px，下边距是：0px,左边距是4px;
（为什么边距有5PX，和4PX，因为750-244*3=18，总共有四个边距，中间的两个边距是5，加起来就是10，两边的两个只能是4PX，如果是5那整体宽度就变成752了，超过淘宝描述最大宽度，会两个像素看不到。当然如果是白色背景，这个也感觉不出来。只是为了追求完美而为之。）
10.【
11.【】这个就是为商品添加了连接，#号就表示链接地址是空。当然这个添加链接的工具我们一般直接用DW软件添加或者直接在淘宝后台自定义双击图片然后可以直观的看到添加。
12.【alt="图片6"】这个也没什么大作用。可以去掉。相当于说明吧。图片显示不出来时可能会显示图片文字。如下图
好了，学会了以上的几样差不多就可以用这个改来改去举一反三了
页头上的文字样式就可以直接在后台直接选择颜色大小对齐了。
HTML+CSS+JavaScript网页设计课程的教与学
你想要的都有了！
本书提供PPT课件，源码，习题答案，教学大纲，期末试卷，20小时微课视频。
请先花一些时间看一下视频（全书配套20小时教学视频）
一、课程简介
网页设计课程是高等院校计算机、信息管理、电子商务和其他相关专业的一门重要的基础课程，也是一门实践性和技能性要求很强的学科。课程涵盖HTML基本元素、CSS样式表和JavaScript脚本编程语言、页面布局和整站建设三大内容，全面介绍了WEB站点设计与开发的基本操作技术和应用技巧。本课程采用课堂与实践相结合讲授、案例向导的教学方式。
二、教学目标
通过本课程的学习，使学生对网页设计的基本原则、栏目和目录结构定义、主流页面布局方法、导航制作、图文排版、色彩理论等进行详细了解。掌握网站规划、设计、制作、管理、发布的相关技术及网页制作的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表单网页、多媒体动态网页；掌握使用css技术进行网页布局的基本方法。掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，对象的概念及使用JavaScript来进行开发、维护、管理和设置WEB应用程序；掌握HTML5最新页面开发技术；掌握综合网站设计和发布的基本流程和方法。
三、教学内容和要求
1、教学内容
教学内容主要分为基础内容和进阶提高两大部分。基础内容全面地讲述了HTML、CSS、JavaScript技术。主要包括HTML设计和开发所需了解的基本概念和框架结构；文字与段落、列表、超链接、表格、表单和多媒体在页面开发中的应用； CSS在实际开发中的应用技巧； JavaScript在动态网页开发中的基本概念和应用。进阶提高主要包括web设计的基本原则和方法；基于表格的页面布局方法和基于div+css的页面布局方法，以及常见导航菜单的制作；HTML5中介绍了画布、新增表单元素及多媒体应用；综合案例系统介绍了网站开发从规划、实现到发布的完整过程。
2、教学要求
四、课程设计
课程以培养面向商业化应用网站设计的网页设计师为目标，突出实用性和可操作性。因此，在教学方式上应以商业化案例讲授为导向，辅助各内容块相关实验项目的实践，由点到面，最终完成整站综合项目的设计任务。教学过程中可以配合数字教学平台电子资料、PPT、重点难点视频讲解、小技巧使用视频讲解、案例解答等多种技术手段进行辅助教学。主要的教学设计与手段包含讲授、案例调查和分析、课堂讨论、作业、上机实践等。
本课程教学由简入深，主要采用以下教学方法：
（1）模仿精彩优秀的网站，了解其效果实现方法，并将其应用到实验中。
（2）指定配套实验教材中的精典实例，让学生操作实现。
（3）综合运用基本知识点，实现复杂综合功能。
五、教学时间安排
本课程计2学分，其中包含18学时理论教学实践，36学时实践教学时间，共计54学时。学时分配如下：
序号
课程内容/实验名称
理论
实践
备注
网页设计简介
HTML基础介绍
文字与段落
列表
超级链接
表格
表单
使用CSS格式化网页
CSS应用
10
JavaScript 基础
11
Web 设计基础
12
页面布局技术
13
HTML5应用
14
综合网站制作实例
合 计
54
六、考核办法
平时成绩25%(课堂表现+章节作业)+期末考试成绩25%+期末综合项目大作业50%
1.平时成绩：包括出勤率、课堂情况、作业，阶段测验成绩占总成绩的25%。
2.期末考试：成绩占总成绩的25%。
3.综合大作业：要求完成整站设计，占总成绩的50%
七、使用教材
1.郑娅峰 张永强主编，《网页设计与开发-HTML、CSS、JavaScript实例教程（第3版）》，清华大学出版社，2015
2.张永强 郑娅峰主编，《网页设计与开发-HTML、CSS、JavaScript实例教程习题解答与实验指导》，清华大学出版社，2011
本书提供PPT课件，习题答案，教学大纲，期末试卷，20小时微课视频
授课老师可以在书圈下载课件、申请样书
