从零开始做网站|学习笔记

简介: 快速学习从零开始做网站。

开发者学堂课程【网站架构师 CUED 训课程:从零开始做网站】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/548/detail/7554


从零开始做网站

 

网站分析:

图片1.png

这是一个已经做好的网站

网页有导航、banner、LOGO、登录框、公司介绍、新闻(列表直接引用)、产品展示、文字及图表

 图片2.png

关于我们:由文字和图片构成

 图片3.png

新闻:比较特殊,有三个不同的块,用三个标签做成

图片4.png

案例展示:有两块内容,产品分类;分类结果

 图片5.png

联系我们:地图可以用地图控件完成

以上就是对一个网站的最初步的认识

接下来我们就一起做网页的页头页尾

 

网站制作:

页头:banner、LOGO、导航、注册按钮

Banner:可以使用全屏幻灯控件来制作,直接选择幻灯秀,然后调试对齐。

 图片6.png

透明的底边:

直接用图片的控件把透明的底边加上,同时设置整体的宽度和高度(高度可以通过截屏测量)。

 图片7.png

LOGO:同样可以用图片控件完成,找到图片,调整大小。

图片8.png 

注册控件:在互动社交里面找到登陆注册的按钮,调节整体样式。

导航:

直接按照网页格式新建若干页面(同时引用页头及页尾),找到导航的控件,调试导航字体、颜色、样式

 图片9.png

页尾:版权信息、地址编号、技术支持

底边和文字信息:可以直接用容器控件做(备案号要加一个链接可以直接链接到工信部的网址)

LOGO 共有七个页面,直接新建页面(同时应用页头与页尾)

首页:先选择模板

公司介绍:

直接用文字控件,调节字体和字号,调节居中。网站原型还有两条线,直接用线条,调整位置及长度;查看更多的按钮:用图片的形式做

公司新闻:

直接赋值公司介绍的格式,新闻列表:直接用列表做,将列表的样式添加进来

 图片10.png

案例展示:

具体案例可以使用图片,两边的粗线条直接用线条工具添加并调整位置及大小。用文章及列表完成,在网站后台直接添加信息。

关于我们:下面是公司的介绍,依旧使用文字控件及线条

轮播的图集:直接用图集完成,选择相应的图集

 图片11.png

新闻动态:

是一个标签,从容器中找到标签的控件,3个标签分别是:公司动态;新闻动态;活动新闻。还可以对标签的颜色及悬停进行编辑。每个标签下都有文章,可以直接用列表控件拉取,每个标签下都应该有列表。

 图片12.png


案例展示:是一个分类的控件,直接找到分类的控件并添加整体数据

图片13.png

联系我们:有一个地图,互动社交中有谷歌地图和高德地图,根据需要选择需要的地图控件,并对地点进行描述。其余文字信息可以直接复制。

留言板:

比较简单,完整的留言板控件在互动社交中,可以直接使用留言控件或评论信息进行选择。

 图片14.png

视频展示:

用简单的视频控件可以直接使用(可以支持腾讯、优酷、爱奇艺)

这些就是网站设计的部分,从零开始制作出一个网页的形态。

目录
打赏
0
0
0
0
127
分享
相关文章
Python编程入门:从零开始的代码之旅
【9月更文挑战第4天】本文将带领初学者步入Python的世界,通过简明的语言和直观的例子,逐步揭示编程的乐趣。我们将一起构建基础的数据结构,探索控制语句的奥秘,并实现简单的函数。无论你是编程新手还是希望巩固基础,这篇文章都是你理想的起点。让我们开始吧,一步步将代码块搭建成思维的宫殿!
61 2
Python编程基础:从零开始的代码之旅
【8月更文挑战第24天】这篇文章旨在为初学者提供一个友好的Python入门指南。通过简明的语言和实际的编码示例,我们将探索Python的基本概念、数据结构、控制流程以及函数的使用。无论你是编程新手还是想扩展你的技能库,这篇文章都将是你学习旅程中的一块垫脚石。让我们开始吧,一起揭开编程的神秘面纱,享受代码带来的乐趣!
47 1
|
10月前
|
程序员必知:从零开始的ArduinoUNOR3
程序员必知:从零开始的ArduinoUNOR3
207 0
从零开始掌握Docek的基础知识与应用技巧
从零开始掌握Docek的基础知识与应用技巧
107 6
|
11月前
|
从零开始构建个人网站:初学者指南
【5月更文挑战第9天】本文是初学者构建个人网站的指南,包括明确目标、选择域名和主机、挑选网站建设工具(如WordPress、Wix、Squarespace)、设计网站结构和布局、创建内容、优化测试以及推广维护。按照这些步骤,新手也能轻松建立自己的个人网站。记得在过程中不断学习和改进,祝你建站成功!
|
11月前
|
C#编程入门:从零开始的旅程
【4月更文挑战第20天】本文引导初学者入门C#编程,从环境搭建开始,推荐使用Visual Studio Community版作为IDE。接着,通过编写"Hello, World!"程序,介绍基本语法,包括数据类型、运算符和表达式。文章还涉及控制结构、函数和方法,以及面向对象编程概念。通过学习,读者将对C#有初步了解,并激发进一步探索编程世界的兴趣。
146 4
自己动手搭建一个网站
最近在研究着随便搞一个网站玩玩,既然有想法了,马上行动。 各种查资料的过程就忽略掉了,下面直入主题。